@automerge/automerge-repo-solid-primitives 2.2.0

package/test/useDocHandle.test.tsx

@@ -0,0 +1,183 @@
+import {
+  type AutomergeUrl,
+  type DocHandle,
+  type PeerId,
+  Repo,
+} from "@automerge/automerge-repo"
+import { render, renderHook, waitFor } from "@solidjs/testing-library"
+import { afterEach, describe, expect, it, vi } from "vitest"
+import useDocHandle from "../src/useDocHandle.js"
+import { RepoContext } from "../src/context.js"
+import {
+  createEffect,
+  createSignal,
+  on,
+  Suspense,
+  untrack,
+  type ParentComponent,
+} from "solid-js"
+import type { UseDocHandleOptions } from "../src/types.js"
+
+interface ExampleDoc {
+  foo: string
+}
+
+function getRepoWrapper(repo: Repo): ParentComponent {
+  return props => (
+    <RepoContext.Provider value={repo}>{props.children}</RepoContext.Provider>
+  )
+}
+
+describe("useDocHandle", () => {
+  afterEach(() => {
+    document.body.innerHTML = ""
+  })
+  const repo = new Repo({
+    peerId: "bob" as PeerId,
+  })
+
+  function setup() {
+    const handleA = repo.create<ExampleDoc>()
+    handleA.change(doc => (doc.foo = "A"))
+
+    const handleB = repo.create<ExampleDoc>()
+    handleB.change(doc => (doc.foo = "B"))
+
+    return {
+      repo,
+      handleA,
+      handleB,
+      wrapper: getRepoWrapper(repo),
+    }
+  }
+
+  const Component = (props: {
+    url: AutomergeUrl | undefined
+    onHandle: (handle: DocHandle<unknown> | undefined) => void
+    options?: UseDocHandleOptions
+  }) => {
+    const handle = useDocHandle(
+      () => props.url,
+      untrack(() => props.options)
+    )
+    createEffect(
+      on([handle], () => {
+        props.onHandle(handle())
+      })
+    )
+
+    return (
+      <Suspense fallback={<div>fallback</div>}>
+        <button>{handle.latest?.url ?? "🕯️🕯️🕯️🕯️"}</button>
+      </Suspense>
+    )
+  }
+
+  it("loads a handle", async () => {
+    const { handleA, wrapper } = setup()
+    const onHandle = vi.fn()
+
+    render(() => <Component url={handleA.url} onHandle={onHandle} />, {
+      wrapper,
+    })
+    await waitFor(() => expect(onHandle).toHaveBeenLastCalledWith(handleA))
+  })
+
+  it("throws if called without any kinda repo", async () => {
+    const { handleA } = setup()
+    const onHandle = vi.fn()
+
+    expect(() =>
+      render(() => <Component url={handleA.url} onHandle={onHandle} />, {})
+    ).toThrowErrorMatchingInlineSnapshot(
+      `[Error: use outside <RepoContext> requires options.repo]`
+    )
+  })
+
+  it("works without a context if given a repo in options", async () => {
+    const { handleA } = setup()
+    const onHandle = vi.fn()
+
+    render(
+      () => (
+        <Component url={handleA.url} onHandle={onHandle} options={{ repo }} />
+      ),
+      {}
+    )
+    await waitFor(() => expect(onHandle).toHaveBeenLastCalledWith(handleA))
+  })
+
+  it("returns undefined when no url given", async () => {
+    const { wrapper } = setup()
+    const onHandle = vi.fn()
+
+    render(() => <Component url={undefined} onHandle={onHandle} />, { wrapper })
+    await waitFor(() => expect(onHandle).toHaveBeenLastCalledWith(undefined))
+  })
+
+  it("updates the handle when the url changes", async () => {
+    const { handleA, handleB, wrapper } = setup()
+    const onHandle = vi.fn()
+    const [url, updateURL] = createSignal<AutomergeUrl | undefined>(undefined)
+
+    let hookResult = renderHook(useDocHandle, {
+      initialProps: [url],
+      wrapper,
+    })
+
+    let componentResult = render(
+      () => <Component url={url()} onHandle={onHandle} />,
+      { wrapper }
+    )
+    let button = componentResult.getByRole("button")
+
+    // set url to doc A
+    updateURL(handleA.url)
+    await waitFor(() => expect(hookResult.result.latest).toBe(handleA))
+    await waitFor(() => expect(onHandle).toHaveBeenLastCalledWith(handleA))
+
+    await waitFor(() => expect(button).toHaveTextContent(handleA.url))
+
+    // set url to doc B
+    updateURL(handleB.url)
+    await waitFor(() => expect(hookResult.result.latest?.url).toBe(handleB.url))
+
+    await waitFor(() => expect(button).toHaveTextContent(handleB.url))
+
+    // set url to undefined
+    updateURL(undefined)
+    await waitFor(() => expect(hookResult.result.latest?.url).toBe(undefined))
+
+    await waitFor(() => expect(button).toHaveTextContent("🕯️🕯️🕯️🕯️"))
+  })
+
+  it("does not return undefined after the url is updated", async () => {
+    const { wrapper, handleA, handleB } = setup()
+    const onHandle = vi.fn()
+    const [url, updateURL] = createSignal<AutomergeUrl | undefined>(handleA.url)
+
+    render(() => <Component url={url()} onHandle={onHandle} />, { wrapper })
+    await waitFor(() => expect(onHandle).toHaveBeenLastCalledWith(handleA))
+
+    const onHandle2 = vi.fn()
+
+    // set url to doc B
+    updateURL(handleB.url)
+    await waitFor(() => expect(onHandle2).not.toHaveBeenCalledWith(undefined))
+  })
+
+  it("does not return a handle for a different url after the url is updated", async () => {
+    const { wrapper, handleA, handleB } = setup()
+    const onHandle = vi.fn()
+    const [url, updateURL] = createSignal<AutomergeUrl | undefined>(handleA.url)
+
+    render(() => <Component url={url()} onHandle={onHandle} />, { wrapper })
+    await waitFor(() => expect(onHandle).toHaveBeenLastCalledWith(handleA))
+
+    const onHandle2 = vi.fn()
+
+    // set url to doc B
+    updateURL(handleB.url)
+    await waitFor(() => expect(onHandle2).not.toHaveBeenCalledWith(handleA))
+  })
+})

package/test/useDocument.test.tsx

@@ -0,0 +1,337 @@
+import { type PeerId, Repo, type AutomergeUrl } from "@automerge/automerge-repo"
+import { render, renderHook, testEffect } from "@solidjs/testing-library"
+import { describe, expect, it, vi } from "vitest"
+import { RepoContext } from "../src/context.js"
+import {
+  createEffect,
+  createSignal,
+  type Accessor,
+  type ParentComponent,
+} from "solid-js"
+import useDocument from "../src/useDocument.js"
+
+describe("useDocument", () => {
+  function setup() {
+    const repo = new Repo({
+      peerId: "bob" as PeerId,
+    })
+
+    const create = () =>
+      repo.create<ExampleDoc>({
+        key: "value",
+        array: [1, 2, 3],
+        hellos: [{ hello: "world" }, { hello: "hedgehog" }],
+        projects: [
+          { title: "one", items: [{ title: "go shopping" }] },
+          { title: "two", items: [] },
+        ],
+      })
+
+    const handle = create()
+    const wrapper: ParentComponent = props => {
+      return (
+        <RepoContext.Provider value={repo}>
+          {props.children}
+        </RepoContext.Provider>
+      )
+    }
+
+    return {
+      repo,
+      handle,
+      wrapper,
+      create,
+      options: { repo },
+    }
+  }
+
+  it("should notify on a property change", async () => {
+    const { create, options } = setup()
+
+    await testEffect(done => {
+      const [doc, handle] = useDocument<ExampleDoc>(create().url, options)
+      createEffect((run: number = 0) => {
+        if (run == 0) {
+          expect(doc()?.key).toBe("value")
+          handle()?.change(doc => (doc.key = "hello world!"))
+        } else if (run == 1) {
+          expect(doc()?.key).toBe("hello world!")
+          handle()?.change(doc => (doc.key = "friday night!"))
+        } else if (run == 2) {
+          expect(doc()?.key).toBe("friday night!")
+          done()
+        }
+        return run + 1
+      })
+    })
+  })
+
+  it("should not apply patches multiple times just because there are multiple projections", async () => {
+    const {
+      handle: { url },
+      options,
+    } = setup()
+
+    const done2 = testEffect(done => {
+      const [two, handle] = useDocument<ExampleDoc>(url, options)
+      createEffect((run: number = 0) => {
+        if (run == 0) {
+          expect(two()?.array).toEqual([1, 2, 3])
+        } else if (run == 1) {
+          expect(two()?.array).toEqual([1, 2, 3, 4])
+          handle()?.change(doc => doc.array.push(5))
+        } else if (run == 2) {
+          expect(two()?.array).toEqual([1, 2, 3, 4, 5])
+          done()
+        }
+        return run + 1
+      })
+    })
+
+    const done1 = testEffect(done => {
+      const [one, handle] = useDocument<ExampleDoc>(url, options)
+      createEffect((run: number = 0) => {
+        if (run == 0) {
+          expect(one()?.array).toEqual([1, 2, 3])
+          handle()?.change(doc => doc.array.push(4))
+        } else if (run == 1) {
+          expect(one()?.array).toEqual([1, 2, 3, 4])
+        } else if (run == 2) {
+          expect(one()?.array).toEqual([1, 2, 3, 4, 5])
+          done()
+        }
+        return run + 1
+      })
+    })
+
+    return Promise.allSettled([done1, done2])
+  })
+
+  it("should work with a signal url", async () => {
+    const { create, wrapper } = setup()
+    const [url, setURL] = createSignal<AutomergeUrl>()
+    const {
+      result: [doc, handle],
+      owner,
+    } = renderHook(useDocument<ExampleDoc>, {
+      initialProps: [url],
+      wrapper,
+    })
+    const done = testEffect(done => {
+      createEffect((run: number = 0) => {
+        if (run == 0) {
+          expect(doc()?.key).toBe(undefined)
+          setURL(create().url)
+        } else if (run == 1) {
+          expect(doc()?.key).toBe("value")
+          handle()?.change(doc => (doc.key = "hello world!"))
+        } else if (run == 2) {
+          expect(doc()?.key).toBe("hello world!")
+          setURL(create().url)
+        } else if (run == 3) {
+          expect(doc()?.key).toBe("value")
+          handle()?.change(doc => (doc.key = "friday night!"))
+        } else if (run == 4) {
+          expect(doc()?.key).toBe("friday night!")
+          done()
+        }
+
+        return run + 1
+      })
+    }, owner!)
+    return done
+  })
+
+  it("should clear the store when the url signal returns to nothing", async () => {
+    const { create, options } = setup()
+    const [url, setURL] = createSignal<AutomergeUrl>()
+
+    const done = testEffect(done => {
+      const [doc, handle] = useDocument<ExampleDoc>(url, options)
+      createEffect((run: number = 0) => {
+        if (run == 0) {
+          expect(doc()?.key).toBe(undefined)
+          expect(handle()).toBe(undefined)
+          setURL(create().url)
+        } else if (run == 1) {
+          expect(doc()?.key).toBe("value")
+          expect(handle()).not.toBe(undefined)
+          setURL(undefined)
+        } else if (run == 2) {
+          expect(doc()?.key).toBe(undefined)
+          expect(handle()).toBe(undefined)
+          setURL(create().url)
+        } else if (run == 3) {
+          expect(doc()?.key).toBe("value")
+          expect(handle()).not.toBe(undefined)
+          done()
+        }
+
+        return run + 1
+      })
+    })
+    return done
+  })
+
+  it("should not return the wrong store when url changes", async () => {
+    const { create, repo } = setup()
+    const h1 = create()
+    const h2 = create()
+    const u1 = h1.url
+    const u2 = h2.url
+
+    const [stableURL] = createSignal(u1)
+    const [changingURL, setChangingURL] = createSignal(u1)
+
+    await testEffect(async done => {
+      const result = render(() => {
+        function Component(props: {
+          stableURL: Accessor<AutomergeUrl>
+          changingURL: Accessor<AutomergeUrl>
+        }) {
+          const [stableDoc] = useDocument<ExampleDoc>(() => props.stableURL())
+
+          const [changingDoc] = useDocument<ExampleDoc>(() =>
+            props.changingURL()
+          )
+
+          return (
+            <>
+              <div data-testid="key-stable">{stableDoc()?.key}</div>
+              <div data-testid="key-changing">{changingDoc()?.key}</div>
+            </>
+          )
+        }
+
+        return (
+          <RepoContext.Provider value={repo}>
+            <Component stableURL={stableURL} changingURL={changingURL} />
+          </RepoContext.Provider>
+        )
+      })
+
+      h2.change(doc => (doc.key = "document-2"))
+      expect(result.getByTestId("key-stable").textContent).toBe("value")
+      expect(result.getByTestId("key-changing").textContent).toBe("value")
+
+      h1.change(doc => (doc.key = "hello"))
+      await new Promise(yay => setImmediate(yay))
+
+      expect(result.getByTestId("key-stable").textContent).toBe("hello")
+      expect(result.getByTestId("key-changing").textContent).toBe("hello")
+
+      setChangingURL(u2)
+      await new Promise(yay => setImmediate(yay))
+      expect(result.getByTestId("key-stable").textContent).toBe("hello")
+      expect(result.getByTestId("key-changing").textContent).toBe("document-2")
+      h2.change(doc => (doc.key = "world"))
+
+      setChangingURL(u1)
+      await new Promise(yay => setImmediate(yay))
+      expect(result.getByTestId("key-stable").textContent).toBe("hello")
+      expect(result.getByTestId("key-changing").textContent).toBe("hello")
+
+      setChangingURL(u2)
+      await new Promise(yay => setImmediate(yay))
+
+      expect(result.getByTestId("key-stable").textContent).toBe("hello")
+      expect(result.getByTestId("key-changing").textContent).toBe("world")
+
+      done()
+    })
+  })
+
+  it("should work with a slow handle", async () => {
+    const { repo } = setup()
+
+    const slowHandle = repo.create({ im: "slow" })
+    const originalFind = repo.find.bind(repo)
+    repo.find = vi.fn().mockImplementation(async (...args) => {
+      await new Promise(resolve => setTimeout(resolve, 100))
+      // @ts-expect-error i'm ok i promise
+      return await originalFind(...args)
+    })
+
+    const done = testEffect(done => {
+      const [doc] = useDocument<{ im: "slow" }>(() => slowHandle.url, {
+        repo,
+        "~skipInitialValue": true,
+      })
+      createEffect((run: number = 0) => {
+        if (run == 0) {
+          expect(doc()?.im).toBe(undefined)
+        } else if (run == 1) {
+          expect(doc()?.im).toBe("slow")
+          done()
+        }
+        return run + 1
+      })
+    })
+    repo.find = originalFind
+    return done
+  })
+
+  it("should not notify on properties nobody cares about", async () => {
+    const {
+      handle: { url },
+      options,
+    } = setup()
+
+    let fn = vi.fn()
+
+    const [doc, handle] = useDocument<ExampleDoc>(url, options)
+
+    testEffect(() => {
+      createEffect(() => {
+        fn(doc()?.projects[1].title)
+      })
+    })
+    const arrayDotThree = testEffect(done => {
+      createEffect((run: number = 0) => {
+        if (run == 0) {
+          expect(doc()?.array[3]).toBeUndefined()
+          handle()?.change(doc => (doc.array[2] = 22))
+          handle()?.change(doc => (doc.key = "hello world!"))
+          handle()?.change(doc => (doc.array[1] = 11))
+          handle()?.change(doc => (doc.array[3] = 145))
+        } else if (run == 1) {
+          expect(doc()?.array[3]).toBe(145)
+          handle()?.change(doc => (doc.projects[0].title = "hello world!"))
+          handle()?.change(
+            doc => (doc.projects[0].items[0].title = "hello world!")
+          )
+          handle()?.change(doc => (doc.array[3] = 147))
+        } else if (run == 2) {
+          expect(doc()?.array[3]).toBe(147)
+          done()
+        }
+        return run + 1
+      })
+    })
+
+    const projectZeroItemZeroTitle = testEffect(done => {
+      createEffect((run: number = 0) => {
+        if (run == 0) {
+          expect(doc()?.projects[0].items[0].title).toBe("hello world!")
+          done()
+        }
+        return run + 1
+      })
+    })
+
+    expect(fn).toHaveBeenCalledOnce()
+    expect(fn).toHaveBeenCalledWith("two")
+
+    return Promise.all([arrayDotThree, projectZeroItemZeroTitle])
+  })
+})
+
+interface ExampleDoc {
+  key: string
+  array: number[]
+  hellos: { hello: string }[]
+  projects: {
+    title: string
+    items: { title: string; complete?: number }[]
+  }[]
+}

package/test/useRepo.test.tsx

@@ -0,0 +1,34 @@
+import { Repo } from "@automerge/automerge-repo"
+import { render } from "@solidjs/testing-library"
+import { describe, expect, test, vi } from "vitest"
+import type { ParentComponent } from "solid-js"
+import useRepo from "../src/useRepo.js"
+import { RepoContext } from "../src/context.js"
+
+describe("useRepo", () => {
+  const Component = ({ onRepo }: { onRepo: (repo: Repo) => void }) => {
+    const repo = useRepo()
+    onRepo(repo)
+    return null
+  }
+
+  test("should error when context unavailable", () => {
+    // Prevent console spam by swallowing console.error "uncaught error" message
+    const spy = vi.spyOn(console, "error")
+    spy.mockImplementation(() => {})
+    expect(() => render(() => <Component onRepo={() => {}} />)).toThrow(
+      /RepoContext/
+    )
+    spy.mockRestore()
+  })
+
+  test("should return repo from context", () => {
+    const repo = new Repo()
+    const wrapper: ParentComponent = props => (
+      <RepoContext.Provider value={repo}>{props.children}</RepoContext.Provider>
+    )
+    const onRepo = vi.fn()
+    render(() => <Component onRepo={onRepo} />, { wrapper })
+    expect(onRepo).toHaveBeenLastCalledWith(repo)
+  })
+})

package/tsconfig.build.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "emitDeclarationOnly": true,
+    "allowImportingTsExtensions": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "isolatedDeclarations": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "composite": true,
+    "pretty": true,
+    "rootDir": "./src",
+    "rewriteRelativeImportExtensions": true,
+    "outDir": "./out"
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": [],
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.build.json" },
+    { "path": "./tsconfig.test.json" }
+  ]
+}

package/tsconfig.test.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "types": ["@testing-library/jest-dom"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "composite": true,
+    "noEmit": true
+  },
+  "include": ["test/**/*.tsx", "src/**/*.ts"]
+}

package/typedoc.json

@@ -0,0 +1,5 @@
+{
+  "extends": ["../../typedoc.base.json"],
+  "entryPoints": ["src/index.ts"],
+  "readme": "none"
+}

package/vite.config.ts

@@ -0,0 +1,41 @@
+import { defineConfig } from "vitest/config"
+import solid from "vite-plugin-solid"
+import { resolve } from "path"
+import dts from "vite-plugin-dts"
+import wasm from "vite-plugin-wasm"
+import { visualizer } from "rollup-plugin-visualizer"
+
+export default defineConfig({
+  plugins: [
+    solid(),
+    wasm(),
+    dts({
+      insertTypesEntry: true,
+      tsconfigPath: "./tsconfig.build.json",
+    }),
+    process.env.VISUALIZE && visualizer(),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      formats: ["es"],
+      fileName: "index",
+    },
+    target: "esnext",
+    rollupOptions: {
+      external: [
+        "solid-js",
+        "@automerge/automerge",
+        "cabbages",
+        "solid-js/store",
+      ],
+    },
+  },
+  resolve: {
+    conditions: ["solid", "browser", "module", "import"],
+    mainFields: ["browser", "module", "main"],
+  },
+  worker: {
+    plugins: () => [wasm()],
+  },
+})

package/vitest.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig, mergeConfig } from "vitest/config"
+import rootConfig from "../../vitest.config"
+import solid from "vite-plugin-solid"
+
+export default mergeConfig(
+  rootConfig,
+  defineConfig({
+    plugins: [solid()],
+    test: {
+      environment: "jsdom",
+      deps: {
+        optimizer: {
+          web: {
+            enabled: true,
+          },
+        },
+      },
+      server: {
+        deps: {
+          inline: [/solid-js/],
+        },
+      },
+    },
+  })
+)