Merge pull request #848 from powersync-ja/sync-streams-vue

(feat): [Vue/Nuxt] Added Sync Streams support and improved overall feature parity with the React SDK.

Author: khawarizmus

.changeset/friendly-points-ring.md

@@ -0,0 +1,47 @@
+---
+'@powersync/vue': minor
+---
+
+Add support for Sync Streams for Vue
+
+Subscribing to a sync stream and using its status:
+
+```
+<script setup>
+import { useSyncStream } from '@powersync/vue';
+
+
+const { status } = useSyncStream('my-stream', { parameters: { userId: 'user-123' } });
+
+// both the name and parameters can be reactive
+const streamName = ref('my-stream')
+const streamOptions = ref({ parameters: { userId: 'user-123' } })
+
+useSyncStream(streamName, streamOptions);
+</script>
+
+<template>
+  <div v-if="status">
+    <span v-if="status.hasSynced">Stream synced</span>
+    <span v-else>Syncing...</span>
+  </div>
+</template>
+```
+
+Running a query backed by sync streams:
+
+```
+<script setup>
+import { useQuery } from '@powersync/vue';
+
+// Subscribe to streams; query runs immediately
+const { data } = useQuery('SELECT * FROM lists', [], {
+  streams: [{ name: 'lists-stream' }]
+});
+
+// Or wait for the stream to sync before showing results
+const { data: lists, isLoading } = useQuery('SELECT * FROM lists', [], {
+  streams: [{ name: 'lists-stream', waitForStream: true }]
+});
+</script>
+```

.changeset/light-dingos-stare.md

@@ -0,0 +1,20 @@
+---
+'@powersync/nuxt': minor
+---
+
+Expose Sync Streams comosable to use in Nuxt with auto-imports
+
+Example:
+
+```
+<script setup lang="ts">
+// useSyncStream is auto-imported in Nuxt
+const streamName = ref('my-stream');
+const { status } = useSyncStream(streamName, { parameters: { id: 'abc' } });
+</script>
+
+<template>
+  <div v-if="status?.hasSynced">Stream ready</div>
+  <div v-else>Syncing...</div>
+</template>
+```

demos/nuxt-supabase-todolist/nuxt.config.ts

@@ -1,23 +1,17 @@
 export default defineNuxtConfig({
-
-  modules: [
-    '@powersync/nuxt',
-    '@nuxt/eslint',
-    '@nuxt/ui',
-    '@nuxtjs/supabase',
-  ],
+  modules: ['@powersync/nuxt', '@nuxt/eslint', '@nuxt/ui', '@nuxtjs/supabase'],
   ssr: false,
 
   devtools: {
-    enabled: true,
+    enabled: true
   },
 
   css: ['~/assets/css/main.css'],
 
   runtimeConfig: {
     public: {
-      powersyncUrl: process.env.NUXT_PUBLIC_POWERSYNC_URL,
-    },
+      powersyncUrl: process.env.NUXT_PUBLIC_POWERSYNC_URL
+    }
   },
 
   // enable hot reloading when we make changes to our module
@@ -27,30 +21,28 @@ export default defineNuxtConfig({
 
   vite: {
     optimizeDeps: {
-      exclude: ['@journeyapps/wa-sqlite', '@powersync/web'],
-      include: [
-        '@supabase/postgrest-js',
-      ],
+      exclude: ['@powersync/web'],
+      include: ['@supabase/postgrest-js']
     },
 
     worker: {
-      format: 'es',
-    },
+      format: 'es'
+    }
   },
 
   unocss: {
-    autoImport: false,
+    autoImport: false
   },
 
   eslint: {
     config: {
-      stylistic: true,
-    },
+      stylistic: true
+    }
   },
 
   powersync: {
     useDiagnostics: true,
-    kysely: true,
+    kysely: true
   },
 
   supabase: {
@@ -59,12 +51,12 @@ export default defineNuxtConfig({
     redirectOptions: {
       login: '/login',
       callback: '/confirm',
-      exclude: ['/unprotected', '/public/*'],
+      exclude: ['/unprotected', '/public/*']
     },
     clientOptions: {
       auth: {
-        persistSession: true,
-      },
-    },
-  },
-})
+        persistSession: true
+      }
+    }
+  }
+});