fix

Author: maxstevens-nl

README.md

@@ -19,6 +19,17 @@ npm install zero-vue
 pnpm install zero-vue
 ```
 
+Register plugin:
+
+```js
+import { createApp } from 'vue'
+import { createZero } from 'zero-vue'
+
+const app = createApp(App)
+app.use(createZero())
+```
+
+Use `useQuery`:
 ```js
 import { Zero } from '@rocicorp/zero'
 import { useQuery } from 'zero-vue'
@@ -34,6 +45,15 @@ const z = new Zero({
 const { data: users } = useQuery(z.query.user)
 ```
 
+Optional: typing `useZero`:
+```ts
+import { createUseZero } from 'zero-vue';
+import type { Schema } from './schema.ts';
+import type { Mutators } from './mutators.ts';
+export const useZero = createUseZero<Schema, Mutators>();
+const z = useZero(); // z is typed with your own schema and mutators
+```
+
 > [!TIP]
 > See [the playground](./playground) for a full working example based on [rocicorp/hello-zero](https://github.com/rocicorp/hello-zero), or check out [danielroe/hello-zero-nuxt](https://github.com/danielroe/hello-zero-nuxt) to see how to set things up with [Nuxt](https://nuxt.com/).
 

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)
+    })
+  })
+})

src/create-zero.ts

@@ -1,22 +1,30 @@
-import type { Schema, ZeroOptions } from '@rocicorp/zero'
+import type { CustomMutatorDefs, Schema, ZeroOptions } from '@rocicorp/zero'
 import type { App, InjectionKey, MaybeRefOrGetter, ShallowRef } from 'vue'
 import { Zero } from '@rocicorp/zero'
 import { shallowRef, toValue, watch } from 'vue'
 
 export const zeroSymbol = Symbol('zero') as InjectionKey<ShallowRef<Zero<Schema, undefined>>>
 
-export function createZero<S extends Schema = Schema>(opts: MaybeRefOrGetter<ZeroOptions<S>>) {
-  const z = shallowRef() as ShallowRef<Zero<S>>
+const oldZeroCleanups = new Set()
 
-  watch(() => toValue(opts), async (opts) => {
-    // await z.value?.close()
-    z.value = new Zero(opts)
+export function createZero<S extends Schema = Schema, MD extends CustomMutatorDefs | undefined = undefined>(optsOrZero: MaybeRefOrGetter<ZeroOptions<S, MD> | { zero: Zero<S, MD> }>) {
+  const z = shallowRef() as ShallowRef<Zero<S, MD>>
+
+  const opts = toValue(optsOrZero)
+  z.value = 'zero' in opts ? opts.zero : new Zero(opts)
+
+  watch(() => toValue(optsOrZero), (opts) => {
+    const cleanupZeroPromise = z.value.close()
+    oldZeroCleanups.add(cleanupZeroPromise)
+    cleanupZeroPromise.finally(() => {
+      oldZeroCleanups.delete(cleanupZeroPromise)
+    })
+
+    z.value = 'zero' in opts ? opts.zero : new Zero(opts)
   }, { deep: true })
 
   return {
     install: (app: App) => {
-      z.value = new Zero(toValue(opts))
-
       // @ts-expect-error - TODO: type properly
       app.provide(zeroSymbol, z)
     },

src/index.ts

@@ -1 +1,3 @@
+export { createUseZero } from './create-use-zero'
+export { createZero } from './create-zero'
 export { useQuery, type UseQueryOptions } from './query'