Merge pull request #895 from powersync-ja/fix-comlink-vue

Use `shallowRef` for database instance to prevent `DataCloneError` in worker communication

Author: khawarizmus

.changeset/mighty-rabbits-sort.md

@@ -0,0 +1,5 @@
+---
+'@powersync/vue': patch
+---
+
+Use shallowRef instead of ref for database instance to prevent DataCloneError in shared worker communication

.changeset/nice-clocks-smash.md

@@ -0,0 +1,5 @@
+---
+'@powersync/nuxt': patch
+---
+
+Use shallowRef instead of ref for database instance to prevent DataCloneError in shared worker communication

packages/nuxt/src/runtime/utils/NuxtPowerSyncDatabase.ts

@@ -19,7 +19,7 @@ import { RecordingStorageAdapter } from './RecordingStorageAdapter';
 import type { DynamicSchemaManager } from './DynamicSchemaManager';
 import { usePowerSyncInspector } from '../composables/usePowerSyncInspector';
 import { useDiagnosticsLogger } from '../composables/useDiagnosticsLogger';
-import { ref, type Ref } from 'vue';
+import { shallowRef, type ShallowRef } from 'vue';
 import { useRuntimeConfig } from '#app';
 import { RustClientInterceptor } from './RustClientInterceptor';
 
@@ -111,13 +111,13 @@ export class NuxtPowerSyncDatabase extends PowerSyncDatabase {
       const adapter =
         clientImplementation === SyncClientImplementation.RUST
           ? new RustClientInterceptor(
-              ref(this) as Ref<PowerSyncDatabase>,
+              shallowRef(this) as ShallowRef<PowerSyncDatabase>,
               new WebRemote(connector, logger),
-              ref(schemaManager) as Ref<DynamicSchemaManager>
+              shallowRef(schemaManager) as ShallowRef<DynamicSchemaManager>
             )
           : new RecordingStorageAdapter(
-              ref(this) as Ref<PowerSyncDatabase>,
-              ref(schemaManager) as Ref<DynamicSchemaManager>
+              shallowRef(this) as ShallowRef<PowerSyncDatabase>,
+              shallowRef(schemaManager) as ShallowRef<DynamicSchemaManager>
             );
 
       if (this.options.flags?.enableMultiTabs) {

packages/nuxt/src/runtime/utils/RecordingStorageAdapter.ts

@@ -1,15 +1,15 @@
 import type { Checkpoint, ColumnType, DBAdapter, PowerSyncDatabase, SyncDataBatch } from '@powersync/web';
 import { AbstractPowerSyncDatabase, SqliteBucketStorage } from '@powersync/web';
 import type { DynamicSchemaManager } from './DynamicSchemaManager';
-import type { Ref } from 'vue';
+import type { ShallowRef } from 'vue';
 
 export class RecordingStorageAdapter extends SqliteBucketStorage {
   private rdb: DBAdapter;
   private schemaManager: DynamicSchemaManager;
 
   public tables: Record<string, Record<string, ColumnType>> = {};
 
-  constructor(db: Ref<PowerSyncDatabase>, schemaManager: Ref<DynamicSchemaManager>) {
+  constructor(db: ShallowRef<PowerSyncDatabase>, schemaManager: ShallowRef<DynamicSchemaManager>) {
     super(db.value.database, (AbstractPowerSyncDatabase as any).transactionMutex);
     this.rdb = db.value.database;
     this.schemaManager = schemaManager.value;

packages/nuxt/src/runtime/utils/RustClientInterceptor.ts

@@ -19,7 +19,7 @@ import {
   SyncDataBucket
 } from '@powersync/web';
 import type { DynamicSchemaManager } from './DynamicSchemaManager';
-import type { Ref } from 'vue';
+import type { ShallowRef } from 'vue';
 /**
  * Tracks per-byte and per-operation progress for the Rust client.
  *
@@ -34,9 +34,9 @@ export class RustClientInterceptor extends SqliteBucketStorage {
   public tables: Record<string, Record<string, ColumnType>> = {};
 
   constructor(
-    db: Ref<PowerSyncDatabase>,
+    db: ShallowRef<PowerSyncDatabase>,
     private remote: AbstractRemote,
-    private schemaManager: Ref<DynamicSchemaManager>
+    private schemaManager: ShallowRef<DynamicSchemaManager>
   ) {
     super(db.value.database, (AbstractPowerSyncDatabase as any).transactionMutex);
     this.rdb = db.value.database;

packages/vue/src/composables/powerSync.ts

@@ -1,5 +1,5 @@
 import { AbstractPowerSyncDatabase } from '@powersync/common';
-import { App, MaybeRef, Ref, hasInjectionContext, inject, provide, ref } from 'vue';
+import { App, MaybeRef, Ref, hasInjectionContext, inject, provide, shallowRef, toRaw, toValue } from 'vue';
 import { setupTopLevelWarningMessage } from './messages.js';
 
 // Create a unique symbol for the PowerSync context
@@ -13,7 +13,7 @@ const POWERSYNC_KEY = Symbol('POWERSYNC_KEY');
  */
 export function createPowerSyncPlugin(powerSyncPluginOptions: { database: MaybeRef<AbstractPowerSyncDatabase> }) {
   const install = (app: App) => {
-    app.provide(POWERSYNC_KEY, ref(powerSyncPluginOptions.database));
+    app.provide(POWERSYNC_KEY, shallowRef(toRaw(toValue(powerSyncPluginOptions.database))));
   };
   return { install };
 }
@@ -26,7 +26,7 @@ export function createPowerSyncPlugin(powerSyncPluginOptions: { database: MaybeR
  * If the key parameter is provided, the client will be provided under that key instead of the default PowerSync key.
  */
 export function providePowerSync(database: MaybeRef<AbstractPowerSyncDatabase>, key: string | undefined = undefined) {
-  provide(key || POWERSYNC_KEY, ref(database));
+  provide(key || POWERSYNC_KEY, shallowRef(toRaw(toValue(database))));
 }
 
 /**