chore(vue): rename package

.changeset/gorgeous-jeans-compare.md

@@ -0,0 +1,5 @@
+---
+"@powersync/vue": patch
+---
+
+rename package

demos/vue-supabase-todolist/CHANGELOG.md

@@ -5,4 +5,4 @@
 ### Patch Changes
 
 - @journeyapps/powersync-sdk-web@0.4.1
-- @journeyapps/powersync-vue@0.0.1
+- @powersync/vue@0.0.1

demos/vue-supabase-todolist/README.md

@@ -6,7 +6,7 @@ This package is currently in an alpha release.
 
 ## Overview
 
-Demo app demonstrating use of the [PowerSync Vue](https://www.npmjs.com/package/@journeyapps/powersync-vue) together with Supabase.
+Demo app demonstrating use of the [PowerSync Vue](https://www.npmjs.com/package/@powersync/vue) together with Supabase.
 
 A step-by-step guide through the Supabase<>PowerSync integration is available [here](https://docs.powersync.com/integration-guides/supabase).
 
@@ -59,6 +59,6 @@ pnpm build
 
 ## Learn More
 
-Check out [PowerSync Vue on GitHub](https://github.com/powersync-ja/powersync-js/tree/main/packages/powersync-vue) - your feedback and contributions are welcome!
+Check out [PowerSync Vue on GitHub](https://github.com/powersync-ja/powersync-js/tree/main/packages/vue) - your feedback and contributions are welcome!
 
 To learn more about PowerSync, see the [PowerSync docs](https://docs.powersync.com).

demos/vue-supabase-todolist/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@journeyapps/powersync-sdk-web": "workspace:*",
-    "@journeyapps/powersync-vue": "workspace:*",
+    "@powersync/vue": "workspace:*",
     "@mdi/font": "7.4.47",
     "@supabase/supabase-js": "^2.39.7",
     "@vuelidate/core": "^2.0.3",
@@ -30,7 +30,9 @@
     "unplugin-fonts": "^1.1.1",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.2.0",
+    "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-vuetify": "^2.0.3",
+    "vite-plugin-wasm": "^3.3.0",
     "vue-tsc": "^2.0.6"
   }
 }

demos/vue-supabase-todolist/src/components/LoadingMessage.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { usePowerSyncStatus } from '@journeyapps/powersync-vue';
+import { usePowerSyncStatus } from '@powersync/vue';
 import { ref } from 'vue';
 import { watchEffect } from 'vue';
 import { computed } from 'vue';

demos/vue-supabase-todolist/src/components/widgets/TodoListsWidget.vue

@@ -19,7 +19,7 @@
 <script setup lang="ts">
 import { LISTS_TABLE, ListRecord, TODOS_TABLE } from '@/library/powersync/AppSchema';
 import { TODO_LISTS_ROUTE } from '@/plugins/router'; // Adjust this import according to your project's structure
-import { usePowerSync, usePowerSyncWatchedQuery } from '@journeyapps/powersync-vue'; // Adjust according to your actual implementation
+import { usePowerSync, usePowerSyncWatchedQuery } from '@powersync/vue'; // Adjust according to your actual implementation
 import { useRouter } from 'vue-router';
 import ListItemWidget from './ListItemWidget.vue'; // Ensure this path is correct
 import LoadingMessage from '../LoadingMessage.vue';

demos/vue-supabase-todolist/src/plugins/powerSync.ts

@@ -1,6 +1,6 @@
 import { AppSchema } from '@/library/powersync/AppSchema';
 import { WASQLitePowerSyncDatabaseOpenFactory } from '@journeyapps/powersync-sdk-web';
-import { createPowerSyncPlugin } from '@journeyapps/powersync-vue';
+import { createPowerSyncPlugin } from '@powersync/vue';
 
 export const powerSync = new WASQLitePowerSyncDatabaseOpenFactory({
   dbFilename: 'example-vue-todo.db',

demos/vue-supabase-todolist/src/views/SqlConsole.vue

@@ -21,7 +21,7 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import { usePowerSyncWatchedQuery } from '@journeyapps/powersync-vue';
+import { usePowerSyncWatchedQuery } from '@powersync/vue';
 const query = ref('SELECT * FROM lists');
 const inputText = ref(query.value);
 const executeQuery = () => {

demos/vue-supabase-todolist/src/views/TodoLists.vue

@@ -31,7 +31,7 @@
 import TodoListsWidget from '@/components/widgets/TodoListsWidget.vue';
 import { LISTS_TABLE } from '@/library/powersync/AppSchema';
 import { supabase } from '@/plugins/supabase';
-import { usePowerSync } from '@journeyapps/powersync-vue';
+import { usePowerSync } from '@powersync/vue';
 import { ref } from 'vue';
 
 const powerSync = usePowerSync();

demos/vue-supabase-todolist/src/views/TodoListsEdit.vue

@@ -48,7 +48,7 @@ import TodoItemWidget from '@/components/widgets/TodoItemWidget.vue';
 import { LISTS_TABLE, TODOS_TABLE, TodoRecord } from '@/library/powersync/AppSchema';
 import { pageSubtitle } from '@/main';
 import { supabase } from '@/plugins/supabase';
-import { usePowerSync, usePowerSyncWatchedQuery } from '@journeyapps/powersync-vue';
+import { usePowerSync, usePowerSyncWatchedQuery } from '@powersync/vue';
 import { watch } from 'vue';
 import { onUnmounted } from 'vue';
 import { ref } from 'vue';
@@ -124,7 +124,7 @@ const createNewTodo = async () => {
   await powerSync.value.execute(
     `INSERT INTO
                 ${TODOS_TABLE}
-                    (id, created_at, created_by, description, list_id) 
+                    (id, created_at, created_by, description, list_id)
                 VALUES
                     (uuid(), datetime(), ?, ?, ?)`,
     [userID, todoDescription.value, listID!]

demos/vue-supabase-todolist/src/views/layouts/Layout.vue

@@ -41,7 +41,7 @@ import { supabase } from '@/plugins/supabase';
 import { computed, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { pageSubtitle } from '@/main';
-import { usePowerSyncStatus } from '@journeyapps/powersync-vue';
+import { usePowerSyncStatus } from '@powersync/vue';
 
 const openDrawer = ref(false);
 const { status: syncStatus } = usePowerSyncStatus();

demos/vue-supabase-todolist/vite.config.ts

@@ -1,15 +1,19 @@
 // Plugins
-import Components from 'unplugin-vue-components/vite';
+import wasm from 'vite-plugin-wasm';
+import topLevelAwait from 'vite-plugin-top-level-await';
 import Vue from '@vitejs/plugin-vue';
-import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
 import ViteFonts from 'unplugin-fonts/vite';
+import Components from 'unplugin-vue-components/vite';
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
 
 // Utilities
-import { defineConfig } from 'vite';
 import { fileURLToPath, URL } from 'node:url';
+import { defineConfig } from 'vite';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
+    wasm(),
+    topLevelAwait(),
     Vue({
       template: { transformAssetUrls }
     }),
@@ -38,6 +42,16 @@ export default defineConfig({
     // Don't optimize these packages as they contain web workers and WASM files.
     // https://github.com/vitejs/vite/issues/11672#issuecomment-1415820673
     exclude: ['@journeyapps/wa-sqlite', '@journeyapps/powersync-sdk-web'],
-    include: ['object-hash', 'uuid', 'event-iterator', 'js-logger', 'lodash', 'can-ndjson-stream']
+    include: [
+      '@journeyapps/powersync-sdk-common > uuid',
+      '@journeyapps/powersync-sdk-web > event-iterator',
+      '@journeyapps/powersync-sdk-web > js-logger',
+      '@journeyapps/powersync-sdk-web > lodash/throttle',
+      '@journeyapps/powersync-sdk-web > can-ndjson-stream'
+    ]
+  },
+  worker: {
+    format: 'es',
+    plugins: () => [wasm(), topLevelAwait()]
   }
 });

docs/utils/packageMap.ts

@@ -39,8 +39,8 @@ export const packageMap: PackageMap = {
   [Packages.VueSdk]: {
     name: 'Vue SDK',
     dirName: Packages.VueSdk,
-    entryPoints: ['../packages/powersync-vue/src/index.ts'],
-    tsconfig: '../packages/powersync-vue/tsconfig.json',
+    entryPoints: ['../packages/vue/src/index.ts'],
+    tsconfig: '../packages/vue/tsconfig.json',
     id: Packages.VueSdk
   },
   [Packages.CommonSdk]: {

packages/powersync-vue/CHANGELOG.md → packages/vue/CHANGELOG.md

@@ -1,4 +1,4 @@
-# @journeyapps/powersync-vue
+# @powersync/vue
 
 ## 0.0.1
 

packages/powersync-vue/README.md → packages/vue/README.md

@@ -12,7 +12,7 @@ To set up app-wide accessibility of PowerSync composables, create a PowerSync Vu
 // main.js
 import { createApp } from 'vue'
 import App from './App.vue'
-import { createPowerSyncPlugin } from '@journeyapps/powersync-vue'
+import { createPowerSyncPlugin } from '@powersync/vue'
 
 const db = // Setup PowerSync client
 
@@ -34,7 +34,7 @@ Both `createPowerSyncPlugin` and `providePowerSync` leverage Vue's [provide/inje
 ```Vue
 // Container.vue
 <script setup>
-import { providePowerSync } from '@journeyapps/powersync-vue'
+import { providePowerSync } from '@powersync/vue'
 
 const db = // Setup PowerSync client
 
@@ -50,7 +50,7 @@ The provided PowerSync client is available with the `usePowerSync` composable.
 ```Vue
 // TodoListDisplay.vue
 <script setup>
-import { usePowerSync } from '@journeyapps/powersync-vue';
+import { usePowerSync } from '@powersync/vue';
 import { ref } from 'vue';
 
 const powersync = usePowerSync();
@@ -72,7 +72,7 @@ The `usePowerSyncQuery` composable provides a static view of a given query. You
 ```Vue
 // TodoListDisplayQuery.vue
 <script setup>
-import { usePowerSyncQuery } from '@journeyapps/powersync-vue';
+import { usePowerSyncQuery } from '@powersync/vue';
 import { ref } from 'vue';
 
 const query = ref('SELECT * from lists');
@@ -99,7 +99,7 @@ You can use refs as parameters to refresh the query when they change. The compos
 ```Vue
 // TodoListDisplayWatchedQuery.vue
 <script setup>
-import { usePowerSync, usePowerSyncWatchedQuery } from '@journeyapps/powersync-vue';
+import { usePowerSync, usePowerSyncWatchedQuery } from '@powersync/vue';
 import { ref } from 'vue';
 
 const query = ref('SELECT * from lists');
@@ -131,7 +131,7 @@ The `usePowerSyncStatus` composable provides general connectivity information su
 ```Vue
 // ConnectionStatus.vue
 <script setup>
-import { usePowerSyncStatus } from '@journeyapps/powersync-vue';
+import { usePowerSyncStatus } from '@powersync/vue';
 
 const { status } = usePowerSyncStatus();
 </script>
@@ -157,7 +157,7 @@ Using PowerSync composables in a nested function of a component.
 
 ```javascript
 <script setup>
-import { usePowerSync } from '@journeyapps/powersync-vue';
+import { usePowerSync } from '@powersync/vue';
 
 const exampleFunction = async () => {
   // ❌ Incorrect: `usePowerSync()` called inside a nested function
@@ -172,7 +172,7 @@ It's important to initialize usePowerSync at the top level of your setup functio
 
 ```javascript
 <script setup>
-import { usePowerSync } from '@journeyapps/powersync-vue';
+import { usePowerSync } from '@powersync/vue';
 
 // ✅ Correct: usePowerSync initialized at the top level of setup function and used as a variable.
 const powerSync = usePowerSync();

packages/powersync-vue/package.json → packages/vue/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@journeyapps/powersync-vue",
+  "name": "@powersync/vue",
   "version": "0.0.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

packages/powersync-vue/src/composables/messages.ts → packages/vue/src/composables/messages.ts

@@ -7,7 +7,7 @@ Using powerSync composables in a nested function of a component.
 
 \`\`\`typescript
 <script setup lang="ts">
-import { usePowerSync } from '@journeyapps/powersync-vue';
+import { usePowerSync } from '@powersync/vue';
 
 const exampleFunction = async () => {
   // ❌ Incorrect: 'usePowerSync()' called inside a nested function
@@ -22,7 +22,7 @@ It's important to initialize usePowerSync at the top level of your setup functio
 
 \`\`\`typescript
 <script setup lang="ts">
-import { usePowerSync } from '@journeyapps/powersync-vue';
+import { usePowerSync } from '@powersync/vue';
 
 // ✅ Correct: usePowerSync initialized at the top level of setup function and used as a variable.
 const powerSync = usePowerSync();