chore: Update to support 0.19

0.19 removes updateTTL from Query. Instead it gets passed into the
view factory function.

This PR supports both 0.18 and 0.19 by checking the arguments
passed to the view factory function. If updateTTL is passed, it
is passed to the view. If not, it is taken from the query.

Once 0.18 is old enough the workaround can be removed.

Author: arv

src/query.test.ts

@@ -3,7 +3,7 @@ import { createSchema, number, string, table, Zero } from '@rocicorp/zero'
 import { describe, expect, it, vi } from 'vitest'
 import { ref, watchEffect } from 'vue'
 import { useQuery } from './query'
-import { vueViewFactory } from './view'
+import { VueView, vueViewFactory } from './view'
 
 async function setupTestEnvironment() {
   const schema = createSchema({
@@ -80,8 +80,12 @@ describe('useQuery', () => {
     z.close()
   })
 
-  it('useQuery with ttl', async () => {
+  it('useQuery with ttl ([email protected])', async () => {
     const { z, tableQuery } = await setupTestEnvironment()
+    if (!('updateTTL' in tableQuery)) {
+      // 0.19 removed updateTTL from the query
+      return
+    }
     const ttl = ref<TTL>('1m')
 
     const materializeSpy = vi.spyOn(tableQuery, 'materialize')
@@ -107,6 +111,40 @@ describe('useQuery', () => {
     z.close()
   })
 
+  it('useQuery with ttl ([email protected])', async () => {
+    const { z, tableQuery } = await setupTestEnvironment()
+    if ('updateTTL' in tableQuery) {
+      // 0.19 removed updateTTL from the query
+      return
+    }
+
+    const ttl = ref<TTL>('1m')
+
+    const materializeSpy = vi.spyOn(tableQuery, 'materialize')
+
+    const queryGetter = vi.fn(() => tableQuery)
+
+    useQuery(queryGetter, () => ({ ttl: ttl.value }))
+    expect(queryGetter).toHaveBeenCalledTimes(1)
+    expect(materializeSpy).toHaveBeenCalledExactlyOnceWith(
+      vueViewFactory,
+      '1m',
+    )
+    expect(materializeSpy).toHaveLastReturnedWith(expect.any(VueView))
+    const view: VueView<unknown> = materializeSpy.mock.results[0]!.value
+    const updateTTLSpy = vi.spyOn(view, 'updateTTL')
+
+    materializeSpy.mockClear()
+
+    ttl.value = '10m'
+    await 1
+
+    expect(materializeSpy).toHaveBeenCalledTimes(0)
+    expect(updateTTLSpy).toHaveBeenCalledExactlyOnceWith('10m')
+
+    z.close()
+  })
+
   it('useQuery deps change', async () => {
     const { z, tableQuery } = await setupTestEnvironment()
 

src/query.ts

@@ -47,7 +47,7 @@ export function useQuery<
   )
 
   watch(ttl, (ttl) => {
-    toValue(query).updateTTL(ttl)
+    toValue(view)?.updateTTL(ttl)
   })
 
   if (getCurrentInstance()) {

src/view.test.ts

@@ -1254,6 +1254,7 @@ describe('vueView', () => {
         { singular: false, relationships: {} },
         () => {},
         queryCompleteResolver.promise,
+        () => {},
       )
     })
 

src/view.ts

@@ -10,6 +10,7 @@ import type {
   Query,
   ResultType,
   Schema,
+  TTL,
   ViewFactory,
 } from '@rocicorp/zero'
 import { applyChange } from '@rocicorp/zero'
@@ -28,6 +29,7 @@ export class VueView<V> implements Output {
   readonly #input: Input
   readonly #format: Format
   readonly #onDestroy: () => void
+  readonly #updateTTL: (ttl: TTL) => void
 
   #state: State
 
@@ -37,10 +39,12 @@ export class VueView<V> implements Output {
     format: Format = { singular: false, relationships: {} },
     onDestroy: () => void = () => {},
     queryComplete: true | Promise<true>,
+    updateTTL: (ttl: TTL) => void,
   ) {
     this.#input = input
     this.#format = format
     this.#onDestroy = onDestroy
+    this.#updateTTL = updateTTL
     this.#state = reactive([
       { '': format.singular ? undefined : [] },
       queryComplete === true ? complete : unknown,
@@ -83,26 +87,39 @@ export class VueView<V> implements Output {
   push(change: Change): void {
     this.#applyChange(change)
   }
+
+  updateTTL(ttl: TTL): void {
+    this.#updateTTL(ttl)
+  }
 }
 
 export function vueViewFactory<
   TSchema extends Schema,
   TTable extends keyof TSchema['tables'] & string,
   TReturn,
 >(
-  _query: Query<TSchema, TTable, TReturn>,
+  query: Query<TSchema, TTable, TReturn>,
   input: Input,
   format: Format,
   onDestroy: () => void,
   onTransactionCommit: (cb: () => void) => void,
   queryComplete: true | Promise<true>,
+  updateTTL?: (ttl: TTL) => void,
 ) {
+  interface UpdateTTL {
+    updateTTL: (ttl: TTL) => void
+  }
   return new VueView<HumanReadable<TReturn>>(
     input,
     onTransactionCommit,
     format,
     onDestroy,
     queryComplete,
+    // In [email protected] updateTTL is passed in to the view factory.
+    // In [email protected] it was a property on the query.
+    updateTTL ?? (ttl =>
+      (query as unknown as UpdateTTL).updateTTL(ttl)
+    ),
   )
 }