enable lazy creation of the stateful singleton in createZero

Author: maxstevens-nl

src/create-zero.test.ts

@@ -1,6 +1,6 @@
-import { createSchema, number, string, table, Zero } from '@rocicorp/zero'
+import { createBuilder, createSchema, number, string, syncedQuery, table, Zero } from '@rocicorp/zero'
 import { assert, describe, expect, it } from 'vitest'
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import { createZero } from './create-zero'
 
 const testSchema = createSchema({
@@ -24,8 +24,8 @@ describe('createZero', () => {
     })
 
     const zero = useZero()
-    assert(zero?.value)
-    expect(zero?.value.userID).toEqual('test-user')
+    assert(zero.value)
+    expect(zero.value.userID).toEqual('test-user')
   })
 
   it('accepts Zero instance instead of options', () => {
@@ -38,7 +38,7 @@ describe('createZero', () => {
     const { useZero } = createZero({ zero })
 
     const usedZero = useZero()
-    assert(usedZero?.value)
+    assert(usedZero.value)
     expect(usedZero.value).toEqual(zero)
   })
 
@@ -54,20 +54,60 @@ describe('createZero', () => {
     const { useZero } = createZero(zeroOptions)
 
     const zero = useZero()
-    assert(zero?.value)
+    assert(zero.value)
 
     expect(zero.value.userID).toEqual('test-user')
 
     const oldZero = zero.value
 
     userID.value = 'test-user-2'
-    await 1
+    await nextTick()
 
     expect(zero.value.userID).toEqual('test-user-2')
     expect(zero.value.closed).toBe(false)
     expect(oldZero.closed).toBe(true)
   })
 
+  it('useQuery works whithout explicitly calling useZero', async () => {
+    const z = new Zero({
+      userID: 'test-user',
+      server: null,
+      schema: testSchema,
+      kvStore: 'mem' as const,
+    })
+
+    await z.mutate.test.insert({ id: 1, name: 'test1' })
+    await z.mutate.test.insert({ id: 2, name: 'test2' })
+
+    const builder = createBuilder(testSchema)
+    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.test.where('id', id)
+      },
+    )
+
+    const { useQuery } = createZero({
+      zero: z,
+    })
+
+    const { data } = useQuery(() => byIdQuery(1))
+    expect(data.value).toMatchInlineSnapshot(`
+[
+  {
+    "id": 1,
+    "name": "test1",
+    Symbol(rc): 1,
+  },
+]`)
+  })
+
   it('updates when Zero instance changes', async () => {
     const userID = ref('test-user')
 
@@ -87,10 +127,48 @@ describe('createZero', () => {
     const oldZero = usedZero.value
 
     userID.value = 'test-user-2'
-    await 1
+    await nextTick()
 
     expect(usedZero.value.userID).toEqual('test-user-2')
     expect(usedZero.value.closed).toBe(false)
     expect(oldZero.closed).toBe(true)
   })
+
+  it('is created lazily and once', async () => {
+    const z = new Zero({
+      userID: 'test-user',
+      server: null,
+      schema: testSchema,
+      kvStore: 'mem' as const,
+    })
+
+    let zeroAccessCount = 0
+    const accessCountPerCreation = 2
+
+    const proxiedOpts = new Proxy(
+      { zero: z },
+      {
+        get(target, prop) {
+          if (prop === 'zero') {
+            zeroAccessCount++
+          }
+          return target[prop as keyof typeof target]
+        },
+      },
+    )
+
+    const { useZero } = createZero(proxiedOpts)
+
+    expect(zeroAccessCount).toBe(0)
+
+    useZero()
+    expect(zeroAccessCount).toBe(accessCountPerCreation)
+
+    await nextTick()
+    expect(zeroAccessCount).toBe(accessCountPerCreation)
+
+    useZero()
+    await nextTick()
+    expect(zeroAccessCount).toBe(accessCountPerCreation)
+  })
 })

src/create-zero.ts

@@ -10,18 +10,25 @@ const zeroCleanups = new Set()
 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)
+  function useZero() {
+    if (z.value) {
+      return z
+    }
 
-  watch(() => toValue(optsOrZero), (opts) => {
-    const cleanupZeroPromise = z.value.close()
-    zeroCleanups.add(cleanupZeroPromise)
-    cleanupZeroPromise.finally(() => {
-      zeroCleanups.delete(cleanupZeroPromise)
-    })
+    watch(() => toValue(optsOrZero), (opts) => {
+      if (z.value && !z.value.closed) {
+        const cleanupZeroPromise = z.value.close()
+        zeroCleanups.add(cleanupZeroPromise)
+        cleanupZeroPromise.finally(() => {
+          zeroCleanups.delete(cleanupZeroPromise)
+        })
+      }
 
-    z.value = 'zero' in opts ? opts.zero : new Zero(opts)
-  }, { deep: true })
+      z.value = 'zero' in opts ? opts.zero : new Zero(opts)
+    }, { deep: true, immediate: true })
+
+    return z
+  }
 
   function useQuery<
     TTable extends keyof S['tables'] & string,
@@ -30,11 +37,12 @@ export function createZero<S extends Schema = Schema, MD extends CustomMutatorDe
     query: MaybeRefOrGetter<Query<S, TTable, TReturn>>,
     options?: MaybeRefOrGetter<UseQueryOptions>,
   ): QueryResult<TReturn> {
+    const z = useZero()
     return useQueryWithZero(query, options, z)
   }
 
   return {
-    useZero: () => z,
+    useZero,
     useQuery,
   }
 }

src/query.test.ts

@@ -1,24 +1,24 @@
 import type { TTL } from '@rocicorp/zero'
 import type { MockInstance } from 'vitest'
-import { createBuilder, createSchema, number, string, syncedQuery, table } 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 { nextTick, ref, watchEffect } from 'vue'
 import { createZero } from './create-zero'
 import { useQuery } from './query'
 import { VueView, vueViewFactory } from './view'
 
-async function setupTestEnvironment() {
-  const schema = createSchema({
-    tables: [
-      table('table')
-        .columns({
-          a: number(),
-          b: string(),
-        })
-        .primaryKey('a'),
-    ],
-  })
+const schema = createSchema({
+  tables: [
+    table('table')
+      .columns({
+        a: number(),
+        b: string(),
+      })
+      .primaryKey('a'),
+  ],
+})
 
+async function setupTestEnvironment() {
   const userID = ref('asdf')
 
   const { useZero, useQuery } = createZero(() => ({
@@ -72,7 +72,7 @@ describe('useQuery', () => {
     expect(status.value).toEqual('unknown')
 
     await z.value.mutate.table.insert({ a: 3, b: 'c' })
-    await 1
+    await nextTick()
 
     expect(rows.value).toMatchInlineSnapshot(`[
   {
@@ -123,7 +123,7 @@ describe('useQuery', () => {
     materializeSpy.mockClear()
 
     ttl.value = '10m'
-    await 1
+    await nextTick()
 
     expect(materializeSpy).toHaveBeenCalledTimes(0)
     expect(updateTTLSpy).toHaveBeenCalledExactlyOnceWith('10m')
@@ -176,7 +176,7 @@ describe('useQuery', () => {
     materializeSpy.mockClear()
 
     ttl.value = '10m'
-    await 1
+    await nextTick()
 
     expect(materializeSpy).toHaveBeenCalledTimes(0)
     expect(updateTTLSpy).toHaveBeenCalledExactlyOnceWith('10m')
@@ -225,7 +225,7 @@ describe('useQuery', () => {
     resetLogs()
 
     a.value = 2
-    await 1
+    await nextTick()
 
     expect(rowLog).toMatchInlineSnapshot(`[
   [
@@ -320,9 +320,16 @@ describe('useQuery', () => {
   })
 
   it('can still be used without createZero', async () => {
-    const { z, tableQuery } = await setupTestEnvironment()
+    const z = new Zero({
+      userID: 'test-user',
+      server: null,
+      schema,
+      kvStore: 'mem' as const,
+    })
+    await z.mutate.table.insert({ a: 1, b: 'a' })
+    await z.mutate.table.insert({ a: 2, b: 'b' })
 
-    const { data: rows, status } = useQuery(() => tableQuery)
+    const { data: rows, status } = useQuery(() => z.query.table)
     expect(rows.value).toMatchInlineSnapshot(`[
   {
     "a": 1,
@@ -337,6 +344,6 @@ describe('useQuery', () => {
 ]`)
     expect(status.value).toEqual('unknown')
 
-    z.value.close()
+    z.close()
   })
 })

src/view.test.ts

@@ -10,6 +10,7 @@ import {
   Zero,
 } from '@rocicorp/zero'
 import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 import { VueView, vueViewFactory } from './view'
 
 const simpleSchema = createSchema({
@@ -1275,7 +1276,7 @@ describe('vueView', () => {
     expect(view.status).toEqual('unknown')
 
     queryCompleteResolver.resolve(true)
-    await 1
+    await nextTick()
     expect(view.status).toEqual('complete')
 
     z.close()