30:[] 2e:{"title":"Hello Automerge","cells":[{"id":0,"value":"md`\n# Hello Automerge\n\n*This notebook is a copy of https://observablehq.com/@j-f1/automerge-demo, and I appended an Addendum section.*\n\nLet's say \\`doc1\\` is the application state on device 1.\nFurther down we'll simulate a second device.\nWe initialize the document to initially contain an empty list of cards.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"doc1v1 = Automerge.from({ cards: [] })","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"render(doc1v1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`\nThe \\`doc1\\` object is treated as immutable -- you must never change it\ndirectly. To change it, you need to call \\`Automerge.change()\\` with a callback\nin which you can mutate the state. You can also include a human-readable\ndescription of the change, like a commit message, which is stored in the\nchange history (see below).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"doc1v2 = Automerge.change(doc1v1, 'Add card', doc => {\n doc.cards.push({ title: 'Rewrite everything in Clojure', done: false });\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"render(doc1v2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`\nAutomerge also defines an \\`insertAt()\\` method for inserting a new element at\na particular position in a list. Or you could use \\`splice()\\`, if you prefer.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"doc1v3 = Automerge.change(doc1v2, 'Add another card', doc => {\n doc.cards.insertAt(0, {\n title: 'Rewrite everything in Haskell',\n done: false\n });\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"render(doc1v2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"md`---\nNow let's simulate another device, whose application state is \\`doc2\\`. We\ninitialise it separately, and merge \\`doc1\\` into it. After merging, \\`doc2\\` has\na copy of all the cards in \\`doc1\\`.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"doc2v1 = {\n let doc2 = Automerge.init();\n doc2 = Automerge.merge(doc2, doc1v3);\n return doc2;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"render(doc2v1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"md`Now make a change on device 1:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"doc1v4 = Automerge.change(doc1v3, 'Mark card as done', doc => {\n doc.cards[0].done = true;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"render(doc1v4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`And, unbeknownst to device 1, also make a change on device 2:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"doc2v2 = Automerge.change(doc2v1, 'Delete card', doc => {\n delete doc.cards[1];\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"render(doc2v2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"md`Now comes the moment of truth. Let's merge the changes from device 2 back\ninto device 1. You can also do the merge the other way round, and you'll get\nthe same result. The merged result remembers that 'Rewrite everything in\nHaskell' was set to true, and that 'Rewrite everything in Clojure' was\ndeleted:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"finalDoc = Automerge.merge(doc1v4, doc2v2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"render(finalDoc)","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"md`As our final trick, we can inspect the change history. Automerge\nautomatically keeps track of every change, along with the \"commit message\"\nthat you passed to \\`change()\\`. When you query that history, it includes both\nchanges you made locally, and also changes that came from other devices. You\ncan also see a snapshot of the application state at any moment in time in the\npast. For example, we can count how many cards there were at each point:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"render(\n Automerge.getHistory(finalDoc).map(state => [\n state.change.message,\n state.snapshot.cards.length\n ])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"md`\n## Addendum\n\n*Complementing https://observablehq.com/@j-f1/automerge-demo*\n\n### Difference between two states\n\n\nWe cannot examine the difference between two documents without merging first:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"Automerge.diff(doc1v4, doc2v2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`But we can do it after the merge, and it will return a list of edits that must be applied to reach the merged state.\n\nFor example, here is the list of edits to apply to doc2v2 to reach finalDoc:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"Automerge.diff(doc2v2, finalDoc)","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"md`Alternatively to calling merge and diff, the same list of edits can be obtained applying:\n- getChanges on doc1v3\n- applyChanges to apply these changes on doc2v2\n- diff to see the list of edits.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"changes = Automerge.getChanges(doc1v3, doc1v4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"doc2withChanges = Automerge.applyChanges(doc2v2, changes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"Automerge.diff(doc2v2, doc2withChanges)","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"md`### Redundant edits will be applied\n\nThe edits are a selection of changes. All the changes must be applied to get to the merged state, even if it's redundant (ie. looping around a given state)\n\nEg: let's toggle the first card twice:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"doc1v5 = Automerge.change(doc1v4, 'Unmark card as done', doc => {\n doc.cards[0].done = false;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"doc1v6 = Automerge.change(doc1v5, 'Mark card as done', doc => {\n doc.cards[0].done = true;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"doc1v7 = Automerge.change(doc1v6, 'Unmark card as done', doc => {\n doc.cards[0].done = false;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"doc1v8 = Automerge.change(doc1v7, 'Mark card as done', doc => {\n doc.cards[0].done = true;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"md`The real-world states of doc1v8 and doc1v4 are the same`","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"deepEqual(toJson(doc1v8.cards), toJson(doc1v4.cards))","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"toJson(doc1v8)","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"md`but doc1v8's history contains more changes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"render(\n Automerge.getHistory(doc1v8).map(state => [\n state.change.message,\n state.snapshot.cards.length\n ])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"md`than doc1v4's`","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"render(\n Automerge.getHistory(doc1v4).map(state => [\n state.change.message,\n state.snapshot.cards.length\n ])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"md`And, **even if the final state is the same**, the edits proposed to merge doc2v3 with doc1v8 are different to those proposed to merge doc2v3 with doc1v4, as they include all the redundant edits (v5 to v8)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"editsTov8 = {\n const mergedDoc = Automerge.merge(doc1v8, doc2v2);\n return Automerge.diff(doc2v2, mergedDoc);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"editsTov4 = {\n const mergedDoc = Automerge.merge(doc1v4, doc2v2);\n return Automerge.diff(doc2v2, mergedDoc);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"md`### The same edit on two documents doesn't generate conflict\n\nLet's create a third document, equal to doc1v3, using Automerge.merge(). Be careful to the order of Automerge.merge() arguments.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"doc3v1 = {\n const doc3v0 = Automerge.init(); \n return Automerge.merge(doc3v0, doc1v3);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"md`and apply the same modification as doc1v4 (toggle the done property)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"doc3v2 = Automerge.change(doc3v1, 'Mark card as done', doc => {\n doc.cards[0].done = true;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"md`Its current real-world state is the same as doc1v4`","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"deepEqual(toJson(doc3v2.cards), toJson(doc1v4.cards))","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"md`the edits are different objects`","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"doc3v2LastChange = Automerge.getChanges(doc3v1, doc3v2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"doc1v4LastChange = Automerge.getChanges(doc1v3, doc1v4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"deepEqual(doc3v2LastChange, doc1v4LastChange)","pinned":true,"hidden":false,"mode":"ojs"},{"id":445,"value":"md`And merging both will work without any conflict`","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"merge3in1 = Automerge.merge(doc3v2, doc1v4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"Automerge.getConflicts(merge3in1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":458,"value":"md`but one of the edits has disappeared in the merged history. As doc3 has been merged into doc1, it seems the edit from doc1 has been kept in the history:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"Automerge.getHistory(merge3in1).slice(-1)[0].change","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"md`Meanwhile, the edit from doc3 would have been kept if doc1 had been merged into doc3:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"{\n const merge1in3 = Automerge.merge(doc1v4, doc3v2);\n return Automerge.getHistory(merge1in3).slice(-1)[0].change;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"md`### Applying an equivalent change adds a record to the history\n\nThe last change of doc1v4 and of doc3v2 correspond to the same mutation (even if these changes aren't the same Javascript object).\n\nLet's apply the last change of doc1v4 to doc3v2:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"doc3v3 = Automerge.applyChanges(doc3v2, doc1v4LastChange)","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"md`The real world value of doc3v3 is the same as doc3v2's: it has not been modified by this last change.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"deepEqual(toJson(doc3v3), toJson(doc3v2))","pinned":true,"hidden":false,"mode":"ojs"},{"id":616,"value":"md`as also stated with the Automerge.equals function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"Automerge.equals(doc3v3, doc3v2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":567,"value":"md`*But* the history keeps the track of that change having been applied:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"Automerge.getHistory(doc3v2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":551,"value":"Automerge.getHistory(doc3v3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":586,"value":"md`### Reapplying a past change is ignored\n\nIf we try to apply the last change of doc1v4 to itself, it isn't applied and the history remains unchanged\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"doc1v4Again = Automerge.applyChanges(doc1v4, doc1v4LastChange)","pinned":true,"hidden":false,"mode":"ojs"},{"id":593,"value":"deepEqual(Automerge.getHistory(doc1v4Again), Automerge.getHistory(doc1v4))","pinned":true,"hidden":false,"mode":"ojs"},{"id":612,"value":"Automerge.equals(doc1v4Again, doc1v4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":624,"value":"md`Note that both variables are not strictly equal objects.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"doc1v4Again === doc1v4","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"md`---\n\n## Credits\n\nNotebook by Jed Fox (https://observablehq.com/@j-f1/automerge-demo). Addendum section by Sylvain Lesage for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/).\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"md`\n### Importing Automerge`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"Automerge = require('automerge')","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`### Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"render = doc =>\n md`~~~json\\n${format(JSON.stringify(doc), {\n parser: 'json',\n printWidth: width / 10\n })}\\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"// Removes all the Automerge metadata, since they use Symbol(something) keys, that are stripped by JSON.stringify\n//\n// > All Symbol-keyed properties will be completely ignored, even when using the replacer function\n//\n// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Description\ntoJson = o => JSON.parse(JSON.stringify(o))","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"deepEqual = require('https://bundle.run/deep-equal')","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"format = {\n const [prettier, parserBabel] = await Promise.all(\n ['standalone', 'parser-babylon'].map(f =>\n require(`prettier@1.18.2/${f}.js`)\n )\n );\n return c => prettier.format(c, { parser: 'json', plugins: [parserBabel] });\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}