feat(deps)!: support zero 1.7

.github/workflows/ci.yml

@@ -55,5 +55,8 @@ jobs:
       - name: 🧪 Test project
         run: pnpm test:unit -- --coverage
 
+      - name: 🧪 Test fixtures
+        run: pnpm test:e2e
+
       - name: 🟩 Coverage
         uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7

package.json

@@ -34,7 +34,7 @@
     "vue": "^3.5.13"
   },
   "dependencies": {
-    "@rocicorp/zero": "^1.4.0"
+    "@rocicorp/zero": "^1.7.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "latest",

src/view.test.ts

@@ -1431,7 +1431,8 @@ describe('vueViewFactory', () => {
     })
 
     expect(view).toBeDefined()
-    expect(onTransactionCommit).not.toHaveBeenCalled()
+    expect(onTransactionCommit).toHaveBeenCalledTimes(1)
+    expect(onTransactionCommit).toHaveBeenCalledWith(expect.any(Function))
     expect(onDestroy).not.toHaveBeenCalled()
     view.destroy()
     expect(onDestroy).toHaveBeenCalledTimes(1)

src/view.ts

@@ -17,9 +17,9 @@ import type {
   TTL,
 } from '@rocicorp/zero'
 import type { ViewChange } from '@rocicorp/zero/bindings'
-import type { Ref } from 'vue'
+import type { Ref, ShallowRef } from 'vue'
 import { applyChange, skipYields } from '@rocicorp/zero/bindings'
-import { ref } from 'vue'
+import { ref, shallowRef } from 'vue'
 
 export type QueryStatus = QueryResultDetails['type']
 export type QueryError = QueryErrorDetails['error']
@@ -30,10 +30,11 @@ export class VueView implements Output {
   readonly #onDestroy: () => void
   readonly #updateTTL: (ttl: TTL) => void
 
-  #data: Ref<Entry>
+  #data: ShallowRef<Entry>
   #status: Ref<QueryStatus>
   #error: Ref<QueryError | undefined>
   #isDestroyed = false
+  #txnDirty = new WeakSet<object>()
 
   constructor(
     input: Input,
@@ -47,16 +48,18 @@ export class VueView implements Output {
     this.#format = format
     this.#onDestroy = onDestroy
     this.#updateTTL = updateTTL
-    this.#data = ref({ '': format.singular ? undefined : [] })
+    this.#data = shallowRef({ '': format.singular ? undefined : [] })
     this.#status = ref(queryComplete === true ? 'complete' : 'error' in queryComplete ? 'error' : 'unknown')
     this.#error = ref(queryComplete !== true && 'error' in queryComplete ? makeError(queryComplete) : undefined) as Ref<QueryError | undefined>
 
     input.setOutput(this)
 
     for (const node of skipYields(input.fetch({}))) {
-      this.#applyChange({ type: 'add', node })
+      this.#applyChange({ type: 'add', node }, true)
     }
 
+    onTransactionCommit(() => this.flush())
+
     if (queryComplete !== true && !('error' in queryComplete)) {
       void queryComplete.then(() => {
         this.#status.value = 'complete'
@@ -87,13 +90,15 @@ export class VueView implements Output {
     }
   }
 
-  #applyChange(change: ViewChange): void {
-    applyChange(
+  #applyChange(change: ViewChange, mutate: boolean | WeakSet<object> = this.#txnDirty): void {
+    this.#data.value = applyChange(
       this.#data.value,
       change,
       this.#input.getSchema(),
       '',
       this.#format,
+      false,
+      mutate,
     )
   }
 
@@ -105,6 +110,10 @@ export class VueView implements Output {
   updateTTL(ttl: TTL): void {
     this.#updateTTL(ttl)
   }
+
+  flush(): void {
+    this.#txnDirty = new WeakSet<object>()
+  }
 }
 
 function materializeRelationships(change: Change): ViewChange {

vitest.config.ts

@@ -1,5 +1,5 @@
 import { fileURLToPath } from 'node:url'
-import { defineConfig } from 'vitest/config'
+import { configDefaults, defineConfig } from 'vitest/config'
 
 export default defineConfig({
   resolve: {
@@ -14,5 +14,6 @@ export default defineConfig({
       include: ['src'],
       reporter: ['text', 'json', 'html'],
     },
+    exclude: [...configDefaults.exclude, 'test/fixtures/**'],
   },
 })