Created
July 26, 2024 21:35
-
-
Save pvh/75fbcf5a8968e4bf936c1b40de6243a0 to your computer and use it in GitHub Desktop.
Automerge unbundled vanilla example
This file contains 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/automerge-repo@2.0.0-alpha.1/slim?bundle-deps" | |
| import { BrowserWebSocketClientAdapter } from "https://esm.sh/@automerge/automerge-repo-network-websocket@2.0.0-alpha.1?bundle-deps" | |
| import { IndexedDBStorageAdapter } from "https://esm.sh/@automerge/automerge-repo-storage-indexeddb@2.0.0-alpha.1" | |
| await AR.initializeWasm( | |
| fetch("https://esm.sh/@automerge/automerge@2.2.7/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