createZero composable

Author: maxstevens-nl

README.md

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

package.json

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

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 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'
+import { computed, ref } from 'vue'
+import { createZero } from './create-zero'
 
 const testSchema = createSchema({
   tables: [
@@ -15,41 +15,34 @@ const testSchema = createSchema({
 })
 
 describe('createZero', () => {
-  it('installs and provides zero instance to Vue app', () => {
-    const app = createApp({})
-    app.use(createZero({
+  it('creates a zero instance', () => {
+    const { useZero } = 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')
     })
+
+    const zero = useZero()
+    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 }))
+    const { useZero } = createZero({ zero })
 
-    app.runWithContext(() => {
-      const injectedZero = inject(zeroSymbol)
-      assert(injectedZero?.value)
-      expect(injectedZero.value).toEqual(zero)
-    })
+    const usedZero = useZero()
+    assert(usedZero?.value)
+    expect(usedZero.value).toEqual(zero)
   })
 
   it('updates when options change', async () => {
-    const app = createApp({})
     const userID = ref('test-user')
     const zeroOptions = computed(() => ({
       userID: userID.value,
@@ -58,27 +51,24 @@ describe('createZero', () => {
       kvStore: 'mem' as const,
     }))
 
-    app.use(createZero(zeroOptions))
+    const { useZero } = createZero(zeroOptions)
 
-    await app.runWithContext(async () => {
-      const injectedZero = inject(zeroSymbol)
-      assert(injectedZero?.value)
+    const zero = useZero()
+    assert(zero?.value)
 
-      expect(injectedZero.value.userID).toEqual('test-user')
+    expect(zero.value.userID).toEqual('test-user')
 
-      const oldZero = injectedZero.value
+    const oldZero = zero.value
 
-      userID.value = 'test-user-2'
-      await 1
+    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)
-    })
+    expect(zero.value.userID).toEqual('test-user-2')
+    expect(zero.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({
@@ -88,22 +78,19 @@ describe('createZero', () => {
       kvStore: 'mem' as const,
     }) }))
 
-    app.use(createZero(zero))
-
-    await app.runWithContext(async () => {
-      const injectedZero = inject(zeroSymbol)
-      assert(injectedZero?.value)
+    const { useZero } = createZero(zero)
+    const usedZero = useZero()
+    assert(usedZero?.value)
 
-      expect(injectedZero.value.userID).toEqual('test-user')
+    expect(usedZero.value.userID).toEqual('test-user')
 
-      const oldZero = injectedZero.value
+    const oldZero = usedZero.value
 
-      userID.value = 'test-user-2'
-      await 1
+    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)
-    })
+    expect(usedZero.value.userID).toEqual('test-user-2')
+    expect(usedZero.value.closed).toBe(false)
+    expect(oldZero.closed).toBe(true)
   })
 })