merge in main because rebasing is a pain

.eslintrc.cjs

@@ -24,6 +24,7 @@ module.exports = {
     "**/dist/*",
     "**/node_modules/*",
     ".eslintrc.cjs",
+    "packages/create-vite-app/**/*",
   ],
   overrides: [
     {
@@ -49,7 +50,7 @@ module.exports = {
     "no-use-before-define": OFF,
     "@typescript-eslint/no-non-null-assertion": OFF,
     "@typescript-eslint/no-explicit-any": OFF,
-    "@typescript-eslint/no-unused-vars": [ERROR, {"varsIgnorePattern": "^_"}],
+    "@typescript-eslint/no-unused-vars": [ERROR, { varsIgnorePattern: "^_" }],
   },
   root: true,
 }

.prettierignore

@@ -0,0 +1,2 @@
+dist
+pnpm-lock.yaml

README.md

@@ -49,6 +49,6 @@ This is a monorepo containing the following packages:
   Likely only useful for experimentation, but allows simple (inefficient) tab-to-tab data
   synchronization
 
-Please note that a reference sync-server peer which demonstrates the use of 
+Please note that a reference sync-server peer which demonstrates the use of
 [automerge-repo-network-websocket](/packages/automerge-repo-network-websocket/)
 is available at [automerge-repo-sync-server](https://github.com/automerge/automerge-repo-sync-server) (this is different from [sync-server](/examples/sync-server)).

examples/react-counter/package.json

@@ -2,7 +2,7 @@
   "name": "@automerge/automerge-repo-demo-counter",
   "repository": "https://github.com/automerge/automerge-repo/tree/master/examples/react-counter",
   "private": true,
-  "version": "1.1.2",
+  "version": "1.1.4",
   "type": "module",
   "scripts": {
     "dev": "vite --open",

examples/react-counter/src/App.tsx

@@ -1,22 +1,11 @@
-import {
-  useBootstrap,
-  useDocument,
-} from "@automerge/automerge-repo-react-hooks"
+import { AutomergeUrl } from "@automerge/automerge-repo"
+import { useDocument } from "@automerge/automerge-repo-react-hooks"
 
 interface Doc {
   count: number
 }
 
-export function App() {
-  const { url } = useBootstrap({
-    onNoDocument: repo => {
-      const handle = repo.create<Doc>()
-      handle.change(d => {
-        d.count = 0
-      })
-      return handle
-    },
-  })
+export function App({ url }: { url: AutomergeUrl }) {
   const [doc, changeDoc] = useDocument<Doc>(url)
 
   if (!doc) {

examples/react-counter/src/main.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import ReactDOM from "react-dom/client"
 import { App } from "./App.js"
-import { Repo } from "@automerge/automerge-repo"
+import { DocHandle, Repo, isValidAutomergeUrl } from "@automerge/automerge-repo"
 import { MessageChannelNetworkAdapter } from "@automerge/automerge-repo-network-messagechannel"
 import { IndexedDBStorageAdapter } from "@automerge/automerge-repo-storage-indexeddb"
 import { RepoContext } from "@automerge/automerge-repo-react-hooks"
@@ -28,10 +28,28 @@ const repo = new Repo({
   sharePolicy: async peerId => peerId.includes("shared-worker"),
 })
 
+declare global {
+  interface Window {
+    handle: DocHandle<unknown>
+    repo: Repo
+  }
+}
+
+const rootDocUrl = `${document.location.hash.substring(1)}`
+let handle
+if (isValidAutomergeUrl(rootDocUrl)) {
+  handle = repo.find(rootDocUrl)
+} else {
+  handle = repo.create<{ count: number }>({ count: 0 })
+}
+const docUrl = (document.location.hash = handle.url)
+window.handle = handle // we'll use this later for experimentation
+window.repo = repo
+
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <RepoContext.Provider value={repo}>
     <React.StrictMode>
-      <App />
+      <App url={docUrl} />
     </React.StrictMode>
   </RepoContext.Provider>
 )

examples/react-todo/package.json

@@ -2,7 +2,7 @@
   "name": "@automerge/automerge-repo-demo-todo",
   "repository": "https://github.com/automerge/automerge-repo/tree/master/examples/react-todo",
   "private": true,
-  "version": "1.1.2",
+  "version": "1.1.4",
   "type": "module",
   "scripts": {
     "dev": "vite --open",

examples/react-todo/src/App.tsx

@@ -1,23 +1,12 @@
 import { AutomergeUrl } from "@automerge/automerge-repo"
-import {
-  useBootstrap,
-  useDocument,
-  useRepo,
-} from "@automerge/automerge-repo-react-hooks"
+import { useDocument, useRepo } from "@automerge/automerge-repo-react-hooks"
 import cx from "classnames"
 import { useRef, useState } from "react"
 
 import { Todo } from "./Todo.js"
 import { ExtendedArray, Filter, State, TodoData } from "./types.js"
 
-export function App() {
-  const { url } = useBootstrap({
-    onNoDocument: repo => {
-      const handle = repo.create<State>()
-      handle.change(d => (d.todos = []))
-      return handle
-    },
-  })
+export function App({ url }: { url: AutomergeUrl }) {
   const [state, changeState] = useDocument<State>(url)
 
   const newTodoInput = useRef<HTMLInputElement>(null)

examples/react-todo/src/main.tsx

@@ -1,11 +1,12 @@
-import { Repo } from "@automerge/automerge-repo"
+import { DocHandle, Repo, isValidAutomergeUrl } from "@automerge/automerge-repo"
 import { BroadcastChannelNetworkAdapter } from "@automerge/automerge-repo-network-broadcastchannel"
 import { BrowserWebSocketClientAdapter } from "@automerge/automerge-repo-network-websocket"
 import { RepoContext } from "@automerge/automerge-repo-react-hooks"
 import { IndexedDBStorageAdapter } from "@automerge/automerge-repo-storage-indexeddb"
 import React from "react"
 import ReactDOM from "react-dom/client"
 import { App } from "./App.js"
+import { State } from "./types.js"
 import "./index.css"
 
 const repo = new Repo({
@@ -16,10 +17,28 @@ const repo = new Repo({
   storage: new IndexedDBStorageAdapter("automerge-repo-demo-todo"),
 })
 
+declare global {
+  interface Window {
+    handle: DocHandle<unknown>
+    repo: Repo
+  }
+}
+
+const rootDocUrl = `${document.location.hash.substring(1)}`
+let handle
+if (isValidAutomergeUrl(rootDocUrl)) {
+  handle = repo.find(rootDocUrl)
+} else {
+  handle = repo.create<State>({ todos: [] })
+}
+const docUrl = (document.location.hash = handle.url)
+window.handle = handle // we'll use this later for experimentation
+window.repo = repo
+
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <RepoContext.Provider value={repo}>
     <React.StrictMode>
-      <App />
+      <App url={docUrl} />
     </React.StrictMode>
   </RepoContext.Provider>
 )

examples/react-use-awareness/package.json

@@ -1,8 +1,8 @@
 {
   "name": "automerge-use-awareness-example-project",
-  "repository": "https://github.com/automerge/automerge-repo/tree/master/examples/react-use-awareness",
+  "version": "1.1.4",
   "private": true,
-  "version": "1.1.2",
+  "repository": "https://github.com/automerge/automerge-repo/tree/master/examples/react-use-awareness",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,6 +12,7 @@
     "@automerge/automerge-repo": "workspace:*",
     "@automerge/automerge-repo-network-broadcastchannel": "workspace:*",
     "@automerge/automerge-repo-react-hooks": "workspace:*",
+    "@automerge/automerge-repo-storage-indexeddb": "workspace:*",
     "eventemitter3": "^5.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/react-use-awareness/src/App.jsx

@@ -2,32 +2,32 @@ import {
   useDocument,
   useLocalAwareness,
   useRemoteAwareness,
-  useBootstrap,
-} from "@automerge/automerge-repo-react-hooks";
+} from "@automerge/automerge-repo-react-hooks"
 
-export function App({ userId }) {
-  const handle = useBootstrap();
-  const [doc, changeDoc] = useDocument(handle.url);
+export function App({ userId, url }) {
+  const [doc, changeDoc] = useDocument(url)
 
   const [localState, updateLocalState] = useLocalAwareness({
     handle,
     userId,
-    initialState: {}
-  });
-  
+    initialState: {},
+  })
+
   const [peerStates, heartbeats] = useRemoteAwareness({
-    handle, 
+    handle,
     localUserId: userId,
-  });
+  })
 
-  const newCount = localState?.count;
-  const count = doc?.count ?? 0;
+  const newCount = localState?.count
+  const count = doc?.count ?? 0
 
   return (
     <div>
       <p>
-        This is an example of useAwareness, which is used to share ephemeral state that won't be saved to the document.
-        It's most commonly used for showing which peers are online and their cursor positions, but you can use any serializable data you'd like. 
+        This is an example of useAwareness, which is used to share ephemeral
+        state that won't be saved to the document. It's most commonly used for
+        showing which peers are online and their cursor positions, but you can
+        use any serializable data you'd like.
       </p>
       <hr />
       <div>
@@ -37,8 +37,8 @@ export function App({ userId }) {
           value={newCount ?? count}
           placeholder={count}
           style={{ color: newCount ? "red" : "black" }}
-          onChange={(e) =>
-            updateLocalState((state) => ({
+          onChange={e =>
+            updateLocalState(state => ({
               ...state,
               count: e.target.value,
             }))
@@ -66,18 +66,18 @@ export function App({ userId }) {
       <br />
       <button
         onClick={() =>
-          changeDoc((doc) => {
-            if (newCount === undefined) return;
+          changeDoc(doc => {
+            if (newCount === undefined) return
             doc.count = newCount
-            updateLocalState((state) => ({ ...state, count: undefined }));
+            updateLocalState(state => ({ ...state, count: undefined }))
           })
         }
         disabled={newCount === undefined}
         children="commit to doc"
       />
       <button
         onClick={() =>
-          updateLocalState((state) => ({ ...state, count: undefined }))
+          updateLocalState(state => ({ ...state, count: undefined }))
         }
         disabled={newCount === undefined}
         children="reset"
@@ -86,5 +86,5 @@ export function App({ userId }) {
         {JSON.stringify({ doc, localState, peerStates, heartbeats }, null, 2)}
       </pre>
     </div>
-  );
+  )
 }

examples/react-use-awareness/src/main.jsx

@@ -1,25 +1,33 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { App } from "./App";
-import { Repo } from "@automerge/automerge-repo";
-import { BroadcastChannelNetworkAdapter } from "@automerge/automerge-repo-network-broadcastchannel";
-import { RepoContext } from "@automerge/automerge-repo-react-hooks";
-import { v4 } from 'uuid'
+import React from "react"
+import ReactDOM from "react-dom/client"
+import { App } from "./App"
+import { Repo, isValidAutomergeUrl } from "@automerge/automerge-repo"
+import { BroadcastChannelNetworkAdapter } from "@automerge/automerge-repo-network-broadcastchannel"
+import { RepoContext } from "@automerge/automerge-repo-react-hooks"
+import { v4 } from "uuid"
 import { IndexedDBStorageAdapter } from "@automerge/automerge-repo-storage-indexeddb"
 
 const repo = new Repo({
   storage: new IndexedDBStorageAdapter("use-awareness-example"),
-  network: [
-    new BroadcastChannelNetworkAdapter()
-  ],
-});
+  network: [new BroadcastChannelNetworkAdapter()],
+})
 
-const userId = v4();
+const userId = v4()
+
+const rootDocUrl = `${document.location.hash.substring(1)}`
+const handle = isValidAutomergeUrl(rootDocUrl)
+  ? repo.find(rootDocUrl)
+  : repo.create()
+
+const docUrl = (document.location.hash = handle.url)
+
+window.handle = handle // we'll use this later for experimentation
+window.repo = repo
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <RepoContext.Provider value={repo}>
     <React.StrictMode>
-      <App userId={userId} />
+      <App userId={userId} url={docUrl} />
     </React.StrictMode>
   </RepoContext.Provider>
-);
+)

examples/react-use-awareness/vite.config.js

@@ -1,18 +1,11 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
-import wasm from 'vite-plugin-wasm'
-import topLevelAwait from 'vite-plugin-top-level-await'
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react-swc"
+import wasm from "vite-plugin-wasm"
+import topLevelAwait from "vite-plugin-top-level-await"
 
 export default defineConfig({
-  plugins: [
-    react(),
-    wasm(),
-    topLevelAwait()
-  ],
+  plugins: [react(), wasm(), topLevelAwait()],
   worker: {
-    plugins: () => [
-      wasm(),
-      topLevelAwait()
-    ]
-  }
-});
+    plugins: () => [wasm(), topLevelAwait()],
+  },
+})

examples/svelte-counter/package.json

@@ -2,7 +2,7 @@
   "name": "@automerge/automerge-repo-demo-counter-svelte",
   "repository": "https://github.com/automerge/automerge-repo/tree/master/examples/svelte-counter",
   "private": true,
-  "version": "1.1.2",
+  "version": "1.1.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/sync-server/package.json

@@ -2,7 +2,7 @@
   "name": "@automerge/example-sync-server",
   "repository": "https://github.com/automerge/automerge-repo/tree/master/examples/sync-server",
   "private": true,
-  "version": "1.1.2",
+  "version": "1.1.4",
   "main": "index.js",
   "license": "MIT",
   "type": "module",

lerna.json

@@ -3,5 +3,5 @@
   "useNx": true,
   "npmClient": "pnpm",
   "useWorkspaces": true,
-  "version": "1.1.2"
+  "version": "1.1.4"
 }