draft: zero 0.23

Author: maxstevens-nl

package.json

@@ -35,15 +35,17 @@
     "vue": "^3.5.13"
   },
   "dependencies": {
-    "@rocicorp/zero": "^0.22.0"
+    "@rocicorp/zero": "^0.23.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "latest",
     "@rocicorp/resolver": "1.0.2",
+    "@testing-library/vue": "^8.1.0",
     "@vitest/coverage-v8": "latest",
     "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,9 +1,12 @@
 packages:
   - playground
+
 ignoredBuiltDependencies:
   - esbuild
   - protobufjs
   - unrs-resolver
+
 onlyBuiltDependencies:
   - '@rocicorp/zero-sqlite3'
+  - oxc-resolver
   - simple-git-hooks

pnpm-workspace.yaml

@@ -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-use-zero.ts

@@ -0,0 +1,24 @@
+import type { 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>>
+
+  watch(() => toValue(opts), async (opts) => {
+    // await z.value?.close()
+    z.value = 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/create-zero.ts

@@ -1,10 +1,26 @@
 import type { TTL } from '@rocicorp/zero'
-import { createSchema, number, string, table, Zero } from '@rocicorp/zero'
+import { createBuilder, createSchema, number, string, syncedQuery, table, Zero } from '@rocicorp/zero'
 import { describe, expect, it, vi } from 'vitest'
-import { ref, watchEffect } from 'vue'
+import { createApp, nextTick, onMounted, ref, shallowRef, watchEffect } from 'vue'
+import { createUseZero } from './create-use-zero'
+import { createZero } from './create-zero'
 import { useQuery } from './query'
 import { VueView, vueViewFactory } from './view'
 
+export function withSetup<T>(composable: () => T) {
+  const result = shallowRef<T>()
+  const app = createApp({
+    setup() {
+      onMounted(() => {
+        result.value = composable()
+      })
+
+      return () => {}
+    },
+  })
+  return [result, app] as const
+}
+
 async function setupTestEnvironment() {
   const schema = createSchema({
     tables: [
@@ -16,22 +32,41 @@ async function setupTestEnvironment() {
         .primaryKey('a'),
     ],
   })
+  const builder = createBuilder(schema)
 
-  const z = new Zero({
+  const useZero = createUseZero<typeof schema>()
+  const [zero, app] = withSetup(useZero)
+  app.use(createZero({
     userID: 'asdf',
     server: null,
     schema,
     // This is often easier to develop with if you're frequently changing
     // the schema. Switch to 'idb' for local-persistence.
     kvStore: 'mem',
-  })
+  }))
+  app.mount(document.createElement('div'))
+
+  const z = zero.value!.value
 
   await z.mutate.table.insert({ a: 1, b: 'a' })
   await z.mutate.table.insert({ a: 2, b: 'b' })
 
+  const byIdQuery = syncedQuery(
+    'byId',
+    ([id]) => {
+      if (typeof id !== 'number') {
+        throw new TypeError('id must be a number')
+      }
+      return [id] as const
+    },
+    (id: number) => {
+      return builder.table.where('a', id)
+    },
+  )
+
   const tableQuery = z.query.table
 
-  return { z, tableQuery }
+  return { z, tableQuery, byIdQuery }
 }
 
 describe('useQuery', () => {
@@ -112,7 +147,7 @@ describe('useQuery', () => {
     z.close()
   })
 
-  it('useQuery with ttl (zero@0.19)', async () => {
+  it.only('useQuery with ttl (zero@0.19)', async () => {
     const { z, tableQuery } = await setupTestEnvironment()
     if ('updateTTL' in tableQuery) {
       // 0.19 removed updateTTL from the query
@@ -258,4 +293,23 @@ describe('useQuery', () => {
 
     z.close()
   })
+
+  it.skip('useQuery with syncedQuery', async () => {
+    const { z, byIdQuery } = await setupTestEnvironment()
+
+    const a = ref(1)
+    const { data: rows, status } = useQuery(() => byIdQuery(a.value))
+
+    expect(rows.value).toMatchInlineSnapshot(`
+[
+  {
+    "a": 1,
+    "b": "a",
+    Symbol(rc): 1,
+  },
+]`)
+    expect(status.value).toEqual('unknown')
+
+    z.close()
+  })
 })

src/query.test.ts

@@ -7,11 +7,13 @@ import type { VueView } from './view'
 import {
   computed,
   getCurrentInstance,
+  inject,
   onUnmounted,
   shallowRef,
   toValue,
   watch,
 } from 'vue'
+import { zeroSymbol } from './create-zero'
 import { vueViewFactory } from './view'
 
 const DEFAULT_TTL_MS = 1_000 * 60 * 5
@@ -38,11 +40,16 @@ export function useQuery<
   })
   const view = shallowRef<VueView<HumanReadable<TReturn>> | null>(null)
 
+  const z = inject(zeroSymbol)
+  if (!z) {
+    throw new Error('Zero not found. Did you forget to call app.use(createZero())?')
+  }
+
   watch(
     () => toValue(query),
     (q) => {
       view.value?.destroy()
-      view.value = q.materialize(vueViewFactory, ttl.value)
+      view.value = z.value.materialize(q, vueViewFactory, { ttl: ttl.value })
     },
     { immediate: true },
   )

src/query.ts

@@ -2,7 +2,8 @@
   "compilerOptions": {
     "target": "es2022",
     "lib": [
-      "es2022"
+      "es2022",
+      "dom"
     ],
     "moduleDetection": "force",
     "module": "preserve",

tsconfig.json

@@ -10,6 +10,7 @@ export default defineConfig({
     },
   },
   test: {
+    environment: 'happy-dom',
     coverage: {
       include: ['src'],
       reporter: ['text', 'json', 'html'],