feat: support Synced Queries

README.md

@@ -19,19 +19,57 @@ npm install zero-vue
 pnpm install zero-vue
 ```
 
+Register plugin:
 ```js
-import { Zero } from '@rocicorp/zero'
-import { useQuery } from 'zero-vue'
+import { createApp } from 'vue'
+import { createZero } from 'zero-vue'
+
+const app = createApp(App)
+// see docs for all options: https://zero.rocicorp.dev/docs/introduction
+app.use(createZero({
+  userID,
+  server: import.meta.env.VITE_PUBLIC_SERVER,
+  schema,
+  kvStore: 'mem',
+}))
+
+// With computed options:
+app.use(createZero(() => ({
+  userID: userID.value,
+  server: import.meta.env.VITE_PUBLIC_SERVER,
+  schema,
+  kvStore: 'mem',
+})))
 
-// see docs: https://zero.rocicorp.dev/docs/introduction
-const z = new Zero({
+// Or with a Zero instance:
+app.use(createZero(new Zero({
   userID,
   server: import.meta.env.VITE_PUBLIC_SERVER,
   schema,
   kvStore: 'mem',
-})
+})))
+```
+
+Creating `useZero` composable:
+```ts
+import type { Mutators } from './mutators.ts'
+import type { Schema } from './schema.ts'
+import { createUseZero } from 'zero-vue'
+
+// Typed:
+export const useZero = createUseZero<Schema, Mutators>()
+
+// Untyped:
+export const useZero = createUseZero()
+```
+
+To query data:
+```js
+import { useQuery } from 'zero-vue'
+import { useZero } from './use-zero.ts'
 
-const { data: users } = useQuery(z.query.user)
+const z = useZero()
+const { data: users } = useQuery(z.value.query.user)
 ```
 
 > [!TIP]

package.json

@@ -44,6 +44,7 @@
     "bumpp": "latest",
     "changelogithub": "13.16.0",
     "eslint": "latest",
+    "happy-dom": "^18.0.1",
     "installed-check": "latest",
     "knip": "latest",
     "lint-staged": "latest",

pnpm-workspace.yaml

@@ -1,9 +1,12 @@
 packages:
   - playground
+
 ignoredBuiltDependencies:
   - esbuild
   - protobufjs
   - unrs-resolver
+
 onlyBuiltDependencies:
   - '@rocicorp/zero-sqlite3'
+  - oxc-resolver
   - simple-git-hooks

src/create-use-zero.ts

@@ -0,0 +1,11 @@
+import type { CustomMutatorDefs, Schema, Zero } from '@rocicorp/zero'
+import type { ShallowRef } from 'vue'
+import { inject } from 'vue'
+import { zeroSymbol } from './create-zero'
+
+export function createUseZero<
+  S extends Schema,
+  MD extends CustomMutatorDefs | undefined = undefined,
+>() {
+  return () => inject(zeroSymbol) as ShallowRef<Zero<S, MD>>
+}

src/create-zero.test.ts

@@ -0,0 +1,109 @@
+import { createSchema, number, string, table, Zero } from '@rocicorp/zero'
+import { assert, describe, expect, it } from 'vitest'
+import { computed, createApp, inject, ref } from 'vue'
+import { createZero, zeroSymbol } from './create-zero'
+
+const testSchema = createSchema({
+  tables: [
+    table('test')
+      .columns({
+        id: number(),
+        name: string(),
+      })
+      .primaryKey('id'),
+  ],
+})
+
+describe('createZero', () => {
+  it('installs and provides zero instance to Vue app', () => {
+    const app = createApp({})
+    app.use(createZero({
+      userID: 'test-user',
+      server: null,
+      schema: testSchema,
+      kvStore: 'mem' as const,
+    }))
+
+    app.runWithContext(() => {
+      const zero = inject(zeroSymbol)
+      assert(zero?.value)
+      expect(zero?.value.userID).toEqual('test-user')
+    })
+  })
+
+  it('accepts Zero instance instead of options', () => {
+    const app = createApp({})
+    const zero = new Zero({
+      userID: 'test-user',
+      server: null,
+      schema: testSchema,
+      kvStore: 'mem' as const,
+    })
+    app.use(createZero({ zero }))
+
+    app.runWithContext(() => {
+      const injectedZero = inject(zeroSymbol)
+      assert(injectedZero?.value)
+      expect(injectedZero.value).toEqual(zero)
+    })
+  })
+
+  it('updates when options change', async () => {
+    const app = createApp({})
+    const userID = ref('test-user')
+    const zeroOptions = computed(() => ({
+      userID: userID.value,
+      server: null,
+      schema: testSchema,
+      kvStore: 'mem' as const,
+    }))
+
+    app.use(createZero(zeroOptions))
+
+    await app.runWithContext(async () => {
+      const injectedZero = inject(zeroSymbol)
+      assert(injectedZero?.value)
+
+      expect(injectedZero.value.userID).toEqual('test-user')
+
+      const oldZero = injectedZero.value
+
+      userID.value = 'test-user-2'
+      await 1
+
+      expect(injectedZero.value.userID).toEqual('test-user-2')
+      expect(injectedZero.value.closed).toBe(false)
+      expect(oldZero.closed).toBe(true)
+    })
+  })
+
+  it('updates when Zero instance changes', async () => {
+    const app = createApp({})
+    const userID = ref('test-user')
+
+    const zero = computed(() => ({ zero: new Zero({
+      userID: userID.value,
+      server: null,
+      schema: testSchema,
+      kvStore: 'mem' as const,
+    }) }))
+
+    app.use(createZero(zero))
+
+    await app.runWithContext(async () => {
+      const injectedZero = inject(zeroSymbol)
+      assert(injectedZero?.value)
+
+      expect(injectedZero.value.userID).toEqual('test-user')
+
+      const oldZero = injectedZero.value
+
+      userID.value = 'test-user-2'
+      await 1
+
+      expect(injectedZero.value.userID).toEqual('test-user-2')
+      expect(injectedZero.value.closed).toBe(false)
+      expect(oldZero.closed).toBe(true)
+    })
+  })
+})