automerge/javascript
2022-12-02 15:10:24 +00:00
..
config Move wrappers/javascript -> javascript 2022-10-16 19:55:54 +01:00
e2e Move wrappers/javascript -> javascript 2022-10-16 19:55:54 +01:00
examples consolidate inserts and deletes more aggressivly into a single splice 2022-10-18 13:29:56 +01:00
src Explicity create empty changes 2022-12-02 12:12:54 +00:00
test Explicity create empty changes 2022-12-02 12:12:54 +00:00
.eslintignore Move wrappers/javascript -> javascript 2022-10-16 19:55:54 +01:00
.eslintrc.cjs Move wrappers/javascript -> javascript 2022-10-16 19:55:54 +01:00
.gitignore Add typedoc comments to the entire public JS API 2022-10-17 00:41:06 +01:00
HACKING.md Add some READMEs to the javascript directory 2022-10-16 20:01:49 +01:00
LICENSE Move wrappers/javascript -> javascript 2022-10-16 19:55:54 +01:00
package.json automerge-wasm@0.1.19 & automerge-js@2.0.1-alpha.2 2022-12-02 15:10:24 +00:00
README.md Add some READMEs to the javascript directory 2022-10-16 20:01:49 +01:00
tsconfig.json Move wrappers/javascript -> javascript 2022-10-16 19:55:54 +01:00
tslint.json Move wrappers/javascript -> javascript 2022-10-16 19:55:54 +01:00
typedoc-readme.md js: Add Automerge.clone(_, heads) and Automerge.view 2022-10-26 14:01:11 +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).