automerge/javascript
2023-01-12 12:42:19 +00:00
..
config javascript: Use glob to list files in package.json 2023-01-10 12:52:21 +00:00
e2e automerge-js: Add prettier 2022-12-22 17:33:14 +00:00
examples automerge-js: Add prettier 2022-12-22 17:33:14 +00:00
src javascript: Add @packageDocumentation TSDoc 2023-01-10 15:02:56 +00:00
test automerge-js: Add backwards compatibility text layer 2023-01-10 12:52:21 +00:00
.eslintignore Move wrappers/javascript -> javascript 2022-10-16 19:55:54 +01:00
.eslintrc.cjs automerge-js: Add prettier 2022-12-22 17:33:14 +00:00
.gitignore automerge-js: Add backwards compatibility text layer 2023-01-10 12:52:21 +00:00
.prettierignore javascript: Add @packageDocumentation TSDoc 2023-01-10 15:02:56 +00:00
.prettierrc automerge-js: Add prettier 2022-12-22 17:33:14 +00:00
HACKING.md automerge-js: Add prettier 2022-12-22 17:33:14 +00:00
LICENSE Move wrappers/javascript -> javascript 2022-10-16 19:55:54 +01:00
package.json automerge-wasm: publish release build in Github Action 2023-01-12 12:42:19 +00:00
README.md automerge-js: Add prettier 2022-12-22 17:33:14 +00:00
tsconfig.json automerge-js: Add prettier 2022-12-22 17:33:14 +00:00
tslint.json Move wrappers/javascript -> javascript 2022-10-16 19:55:54 +01:00

Automerge

Automerge is a library of data structures for building collaborative applications, this package is the javascript implementation.

Detailed documentation is available at automerge.org but see the following for a short getting started guid.

Quickstart

First, install the library.

yarn add @automerge/automerge

If you're writing a node application, you can skip straight to Make some data. If you're in a browser you need a bundler

Bundler setup

@automerge/automerge is a wrapper around a core library which is written in rust, compiled to WebAssembly and distributed as a separate package called @automerge/automerge-wasm. Browsers don't currently support WebAssembly modules taking part in ESM module imports, so you must use a bundler to import @automerge/automerge in the browser. There are a lot of bundlers out there, we have examples for common bundlers in the examples folder. Here is a short example using Webpack 5.

Assuming a standard setup of a new webpack project, you'll need to enable the asyncWebAssembly experiment. In a typical webpack project that means adding something like this to webpack.config.js

module.exports = {
  ...
  experiments: { asyncWebAssembly: true },
  performance: {       // we dont want the wasm blob to generate warnings
     hints: false,
     maxEntrypointSize: 512000,
     maxAssetSize: 512000
  }
};

Make some data

Automerge allows to separate threads of execution to make changes to some data and always be able to merge their changes later.

import * as automerge from "@automerge/automerge"
import * as assert from "assert"

let doc1 = automerge.from({
  tasks: [
    { description: "feed fish", done: false },
    { description: "water plants", done: false },
  ],
})

// Create a new thread of execution
let doc2 = automerge.clone(doc1)

// Now we concurrently make changes to doc1 and doc2

// Complete a task in doc2
doc2 = automerge.change(doc2, d => {
  d.tasks[0].done = true
})

// Add a task in doc1
doc1 = automerge.change(doc1, d => {
  d.tasks.push({
    description: "water fish",
    done: false,
  })
})

// Merge changes from both docs
doc1 = automerge.merge(doc1, doc2)
doc2 = automerge.merge(doc2, doc1)

// Both docs are merged and identical
assert.deepEqual(doc1, {
  tasks: [
    { description: "feed fish", done: true },
    { description: "water plants", done: false },
    { description: "water fish", done: false },
  ],
})

assert.deepEqual(doc2, {
  tasks: [
    { description: "feed fish", done: true },
    { description: "water plants", done: false },
    { description: "water fish", done: false },
  ],
})

Development

See HACKING.md

Meta

Copyright 2017present, the Automerge contributors. Released under the terms of the MIT license (see LICENSE).