-
-
Save nichoth/eca87326822bd21397286b11f0ec3eca to your computer and use it in GitHub Desktop.
Automerge unbundled vanilla example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Automerge (Vanilla JS, Unbundled) Demo</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| </head> | |
| <body> | |
| <script type="module"> | |
| // The ?bundle-deps here is very dodgy... | |
| import * as AR from "https://esm.sh/@automerge/[email protected]/slim?bundle-deps" | |
| import { BrowserWebSocketClientAdapter } from "https://esm.sh/@automerge/[email protected]?bundle-deps" | |
| import { IndexedDBStorageAdapter } from "https://esm.sh/@automerge/[email protected]" | |
| await AR.initializeWasm( | |
| fetch("https://esm.sh/@automerge/[email protected]/dist/automerge.wasm") | |
| ) | |
| const repo = new AR.Repo({ | |
| storage: new IndexedDBStorageAdapter(), | |
| network: [new BrowserWebSocketClientAdapter("wss://sync.automerge.org")], | |
| }) | |
| /* Check the location hash for a doc URL */ | |
| const rootDocUrl = `${document.location.hash.substring(1)}` | |
| let handle | |
| if (AR.isValidAutomergeUrl(rootDocUrl)) { | |
| handle = repo.find(rootDocUrl) | |
| } else { | |
| handle = repo.create() | |
| } | |
| const docUrl = (document.location.hash = handle.url) | |
| /* Put these on the window so we can use them conveniently from the console */ | |
| window.handle = handle | |
| window.repo = repo | |
| /* your code here */ | |
| handle.on("change", ({ handle, doc }) => { | |
| var prettyJson = JSON.stringify(doc, null, 2) | |
| document.getElementById("docId").textContent = handle.documentId | |
| document.getElementById("docContent").textContent = prettyJson | |
| }) | |
| </script> | |
| <h1>Automerge Doc Viewer</h1> | |
| <h2>DocID:<span id="docId"></span></h2> | |
| <pre id="docContent"></pre> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment