From bc2d387e0f4d6fa118d0e4da444a86a6b6aaf80c Mon Sep 17 00:00:00 2001
From: DominicGBauer <dominic@nomanini.com>
Date: Mon, 29 Apr 2024 09:10:39 +0200
Subject: [PATCH 1/7] chore: add latest changes

---
 packages/vue/package.json                     |   5 +-
 .../vue/src/composables/usePowerSyncQuery.ts  |  28 +-
 .../vue/src/composables/usePowerSyncStatus.ts |  22 +-
 .../composables/usePowerSyncWatchedQuery.ts   |   4 +-
 packages/vue/src/composables/useQuery.ts      | 110 +++
 packages/vue/src/composables/useStatus.ts     |  14 +
 packages/vue/tests/tsconfig.json              |  27 +
 packages/vue/tests/useQuery.test.ts           |  58 ++
 packages/vue/tests/useStatus.test.ts          |  30 +
 packages/vue/tests/utils.ts                   |  14 +
 packages/vue/tsconfig.json                    |   8 +-
 packages/vue/vitest.config.ts                 |   9 +
 pnpm-lock.yaml                                | 821 ++++--------------
 13 files changed, 459 insertions(+), 691 deletions(-)
 create mode 100644 packages/vue/src/composables/useQuery.ts
 create mode 100644 packages/vue/src/composables/useStatus.ts
 create mode 100644 packages/vue/tests/tsconfig.json
 create mode 100644 packages/vue/tests/useQuery.test.ts
 create mode 100644 packages/vue/tests/useStatus.test.ts
 create mode 100644 packages/vue/tests/utils.ts
 create mode 100644 packages/vue/vitest.config.ts

diff --git a/packages/vue/package.json b/packages/vue/package.json
index 129cd9c3e..a8c6973d6 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -14,7 +14,8 @@
   "scripts": {
     "build": "tsc -b",
     "clean": "rm -rf lib tsconfig.tsbuildinfo",
-    "watch": "tsc -b -w"
+    "watch": "tsc -b -w",
+    "test": "vitest"
   },
   "repository": {
     "type": "git",
@@ -33,7 +34,9 @@
     "vue": "*"
   },
   "devDependencies": {
+    "jsdom": "^24.0.0",
     "typescript": "^5.1.3",
+    "vitest": "^1.5.1",
     "vue": "3.4.21"
   }
 }
diff --git a/packages/vue/src/composables/usePowerSyncQuery.ts b/packages/vue/src/composables/usePowerSyncQuery.ts
index ec39e656a..64591b492 100644
--- a/packages/vue/src/composables/usePowerSyncQuery.ts
+++ b/packages/vue/src/composables/usePowerSyncQuery.ts
@@ -14,12 +14,25 @@ export type QueryOptions = {
    */
   immediate: boolean;
 };
-export type Result<T> = { data: Ref<T[]>; loading: Ref<boolean>; error: Ref<Error>; refresh: () => Promise<void> };
+export type Result<T> = { data: Ref<T[]>; isLoading: Ref<boolean>; error: Ref<Error>; refresh: () => Promise<void> };
 
 /**
+ * @deprecated use {@link useQuery} instead.
+ *
  * A composable to access a single static query.
  * SQL Statement and query Parameters are watched by default.
  * For a result that updates as the source data changes, use {@link usePowerSyncWatchedQuery} instead.
+ * @example
+ * <script>
+ *  import { usePowerSyncQuery } from '@powersync/vue';
+ *
+ *  const listID = '123';
+ *
+ *  const { data: listRecords } = usePowerSyncQuery<{ name: string }>(
+ *    `SELECT name FROM ${LISTS_TABLE} WHERE id = ?`,
+ *    [listID]
+ *  );
+ * <script>
  */
 export const usePowerSyncQuery = <T = any>(
   sqlStatement: MaybeRef<string>,
@@ -27,8 +40,8 @@ export const usePowerSyncQuery = <T = any>(
   queryOptions: QueryOptions = { watchParameters: true, immediate: true }
 ): Result<T> => {
   const data = ref([]);
-  const loading = ref<boolean>(false);
-  const error = ref<Error>(undefined);
+  const isLoading = ref<boolean>(false);
+  const error = ref<Error | undefined>(undefined);
 
   const powerSync = usePowerSync();
 
@@ -40,26 +53,27 @@ export const usePowerSyncQuery = <T = any>(
 
     try {
       error.value = undefined;
-      loading.value = true;
+      isLoading.value = true;
 
       data.value = await powerSync.value.getAll(toValue(sqlStatement), toValue(parameters));
     } catch (e) {
       data.value = [];
 
       const wrappedError = new Error('PowerSync failed to fetch data: ' + e.message);
-      wrappedError.cause = e; // Include the original error as the cause
+      wrappedError.cause = e;
       error.value = wrappedError;
     } finally {
-      loading.value = false;
+      isLoading.value = false;
     }
   };
 
   if (queryOptions.watchParameters) {
     watch([powerSync, ref(sqlStatement), ref(parameters)], fetchData);
   }
+
   if (queryOptions.immediate) {
     fetchData();
   }
 
-  return { data, loading, error, refresh: fetchData };
+  return { data, isLoading, error, refresh: fetchData };
 };
diff --git a/packages/vue/src/composables/usePowerSyncStatus.ts b/packages/vue/src/composables/usePowerSyncStatus.ts
index daee81343..a9f55b400 100644
--- a/packages/vue/src/composables/usePowerSyncStatus.ts
+++ b/packages/vue/src/composables/usePowerSyncStatus.ts
@@ -2,27 +2,29 @@ import { SyncStatus } from '@powersync/common';
 import { onUnmounted, ref } from 'vue';
 import { usePowerSync } from './powerSync';
 
+/**
+ * @deprecated Use {@link useStatus} instead.
+ */
 export const usePowerSyncStatus = () => {
   const status = ref(new SyncStatus({}));
 
-  let cleanup = () => {};
   const powerSync = usePowerSync();
-  if (powerSync) {
-    status.value = powerSync.value.currentStatus || status.value;
 
-    const disposeListener = powerSync.value.registerListener({
+  if (!powerSync) {
+    return;
+  }
+
+  status.value = powerSync.value.currentStatus || status.value;
+
+  const runListener = () =>
+    powerSync.value.registerListener({
       statusChanged: (newStatus: SyncStatus) => {
         status.value = newStatus;
       }
     });
 
-    cleanup = () => {
-      disposeListener();
-    };
-  }
-
   onUnmounted(() => {
-    cleanup();
+    runListener();
   });
 
   return { status };
diff --git a/packages/vue/src/composables/usePowerSyncWatchedQuery.ts b/packages/vue/src/composables/usePowerSyncWatchedQuery.ts
index c3c7e4628..142f45365 100644
--- a/packages/vue/src/composables/usePowerSyncWatchedQuery.ts
+++ b/packages/vue/src/composables/usePowerSyncWatchedQuery.ts
@@ -16,6 +16,8 @@ export type WatchedQueryResult<T> = {
 };
 
 /**
+ * @deprecated use {@link useQuery} instead.
+ *
  * A composable to access the results of a watched query.
  */
 export const usePowerSyncWatchedQuery = <T = any>(
@@ -24,7 +26,7 @@ export const usePowerSyncWatchedQuery = <T = any>(
   options: Omit<SQLWatchOptions, 'signal'> = {}
 ): WatchedQueryResult<T> => {
   const data = ref([]);
-  const error = ref<Error>(undefined);
+  const error = ref<Error | undefined>(undefined);
 
   const loading = ref(true);
   const fetching = ref(true);
diff --git a/packages/vue/src/composables/useQuery.ts b/packages/vue/src/composables/useQuery.ts
new file mode 100644
index 000000000..dacf99df9
--- /dev/null
+++ b/packages/vue/src/composables/useQuery.ts
@@ -0,0 +1,110 @@
+import { type SQLWatchOptions } from '@powersync/common';
+import { type MaybeRef, type Ref, ref, toValue, watchEffect } from 'vue';
+import { usePowerSync } from './powerSync';
+
+interface AdditionalOptions extends Omit<SQLWatchOptions, 'signal'> {
+  runQueryOnce?: boolean;
+}
+
+export type WatchedQueryResult<T> = {
+  data: Ref<T[]>;
+  /**
+   * Indicates the initial loading state (hard loading). Loading becomes false once the first set of results from the watched query is available or an error occurs.
+   */
+  isLoading: Ref<boolean>;
+  /**
+   * Indicates whether the query is currently fetching data, is true during the initial load and any time when the query is re-evaluating (useful for large queries).
+   */
+  isFetching: Ref<boolean>;
+  error: Ref<Error | undefined>;
+};
+
+/**
+ * A composable to access the results of a watched query.
+ */
+export const useQuery = <T = any>(
+  sqlStatement: MaybeRef<string>,
+  sqlParameters: MaybeRef<any[]> = [],
+  options: AdditionalOptions = {}
+): WatchedQueryResult<T> => {
+  const data = ref<T[]>([]) as Ref<T[]>;
+  const error = ref<Error | undefined>(undefined);
+  const isLoading = ref(true);
+  const isFetching = ref(true);
+
+  const powerSync = usePowerSync();
+
+  const finishLoading = () => {
+    isLoading.value = false;
+    isFetching.value = false;
+  };
+
+  if (!powerSync) {
+    finishLoading();
+    error.value = new Error('PowerSync not configured.');
+    return { data, isLoading, isFetching, error };
+  }
+
+  const handleResult = (result: T[]) => {
+    finishLoading();
+    data.value = result;
+    error.value = undefined;
+  };
+
+  const handleError = (e: Error) => {
+    finishLoading();
+    data.value = [];
+
+    const wrappedError = new Error('PowerSync failed to fetch data: ' + e.message);
+    wrappedError.cause = e;
+    error.value = wrappedError;
+  };
+
+  let abortController = new AbortController();
+  watchEffect(async (onCleanup) => {
+    // Abort any previous watches when the effect triggers again, or when the component is unmounted
+    onCleanup(() => abortController.abort());
+    abortController = new AbortController();
+    isLoading.value = true;
+    isFetching.value = true;
+
+    const sql = toValue(sqlStatement);
+    const parameters = toValue(sqlParameters);
+
+    try {
+      const resolvedTables = await powerSync.value.resolveTables(sql, parameters, options);
+
+      // Fetch initial data
+      const result = await powerSync.value.getAll<T>(sql, parameters);
+      handleResult(result);
+
+      if (options.runQueryOnce) {
+        return;
+      }
+
+      powerSync.value.onChangeWithCallback(
+        {
+          onChange: async () => {
+            isFetching.value = true;
+            try {
+              const result = await powerSync.value.getAll<T>(sql, parameters);
+              handleResult(result);
+            } catch (error) {
+              handleError(error);
+            }
+          },
+          onError: handleError
+        },
+        {
+          ...options,
+          signal: abortController.signal,
+          tables: resolvedTables
+        }
+      );
+    } catch (error) {
+      handleError(error);
+    }
+  });
+
+  return { data, isLoading, isFetching, error };
+};
diff --git a/packages/vue/src/composables/useStatus.ts b/packages/vue/src/composables/useStatus.ts
new file mode 100644
index 000000000..68f5e9014
--- /dev/null
+++ b/packages/vue/src/composables/useStatus.ts
@@ -0,0 +1,14 @@
+import { usePowerSyncStatus } from './usePowerSyncStatus';
+
+/**
+ * Retrieve the current synchronization status of PowerSync.
+ * @returns SyncStatus
+ * @example
+ * <script>
+ *  import { useStatus } from '@powersync/vue';
+ *
+ *  const status = useStatus()
+ *  const { connected, dataFlow, lastSyncedAt, hasSynced } = status;
+ * <script>
+ */
+export const useStatus = usePowerSyncStatus;
diff --git a/packages/vue/tests/tsconfig.json b/packages/vue/tests/tsconfig.json
new file mode 100644
index 000000000..ad939a2db
--- /dev/null
+++ b/packages/vue/tests/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "baseUrl": "../",
+    "esModuleInterop": true,
+    "jsx": "react",
+    "rootDir": "../",
+    "composite": true,
+    "outDir": "./lib",
+    "lib": [
+      "esnext",
+      "DOM"
+    ],
+    "module": "esnext",
+    "sourceMap": true,
+    "moduleResolution": "node",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitUseStrict": false,
+    "noStrictGenericChecks": false,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "target": "esnext"
+  },
+  "include": [
+    "../src/**/*"
+  ]
+}
diff --git a/packages/vue/tests/useQuery.test.ts b/packages/vue/tests/useQuery.test.ts
new file mode 100644
index 000000000..c840b2eb9
--- /dev/null
+++ b/packages/vue/tests/useQuery.test.ts
@@ -0,0 +1,58 @@
+import { vi, describe, expect, it, afterEach } from 'vitest';
+import { useQuery } from '../src/composables/useQuery';
+import { withSetup } from './utils';
+import * as PowerSync from '../src/composables/powerSync';
+import { ref } from 'vue';
+
+const mockPowerSync = {
+  currentStatus: { status: 'initial' },
+  registerListener: vi.fn(() => ({
+    statusChanged: vi.fn(() => 'updated')
+  })),
+  resolveTables: vi.fn(),
+  watch: vi.fn(),
+  getAll: vi.fn(() => ['list1', 'list2'])
+};
+
+describe('useQuery', () => {
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('should error when PowerSync is not set', () => {
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(undefined);
+
+    const [result] = withSetup(() => useQuery('SELECT * from lists'));
+
+    expect(result.error.value).toEqual(Error('PowerSync not configured.'));
+    expect(result.isFetching.value).toEqual(false);
+    expect(result.isLoading.value).toEqual(false);
+    expect(result.data.value).toEqual([]);
+  });
+
+  it('should handle error in watchEffect', () => {
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref({}) as any);
+
+    const [result] = withSetup(() => useQuery('SELECT * from lists'));
+
+    expect(result.error.value).toEqual(
+      Error('PowerSync failed to fetch data: powerSync.value.resolveTables is not a function')
+    );
+    expect(result.isFetching.value).toEqual(false);
+    expect(result.isLoading.value).toEqual(false);
+    expect(result.data.value).toEqual([]);
+  });
+
+  it('should run the query once when runQueryOnce flag is set', () => {
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref(mockPowerSync) as any);
+    const getAllSpy = mockPowerSync.getAll;
+
+    const [result] = withSetup(() => useQuery('SELECT * from lists', [], { runQueryOnce: true }));
+
+    expect(result.data.value).toEqual(undefined);
+    expect(getAllSpy).toHaveBeenCalledTimes(1);
+    expect(result.isLoading.value).toEqual(false);
+    expect(result.isFetching.value).toEqual(false);
+    expect(result.error.value).toEqual(undefined);
+  });
+});
diff --git a/packages/vue/tests/useStatus.test.ts b/packages/vue/tests/useStatus.test.ts
new file mode 100644
index 000000000..633d9d625
--- /dev/null
+++ b/packages/vue/tests/useStatus.test.ts
@@ -0,0 +1,30 @@
+import { describe, it, expect, vi } from 'vitest';
+import { useStatus } from '../src/composables/useStatus';
+import { withSetup } from './utils';
+import * as PowerSync from '../src/composables/powerSync';
+import { ref } from 'vue';
+
+const mockPowerSync = {
+  currentStatus: { connected: true },
+  registerListener: vi.fn()
+};
+
+describe('useStatus', () => {
+  it('should load the status of PowerSync', async () => {
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref(mockPowerSync) as any);
+
+    const [result] = withSetup(() => useStatus());
+    expect(result!.status.value.connected).toBe(true);
+  });
+
+  it('should run the listener on unmount', () => {
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref(mockPowerSync as any));
+
+    const [, app] = withSetup(() => useStatus());
+    const listenerUnsubscribe = mockPowerSync.registerListener;
+
+    app.unmount();
+
+    expect(listenerUnsubscribe).toHaveBeenCalled();
+  });
+});
diff --git a/packages/vue/tests/utils.ts b/packages/vue/tests/utils.ts
new file mode 100644
index 000000000..5e3c20bf2
--- /dev/null
+++ b/packages/vue/tests/utils.ts
@@ -0,0 +1,14 @@
+import type { App } from 'vue';
+import { createApp } from 'vue';
+
+export function withSetup<T>(composable: () => T): [T, App] {
+  let result: T;
+  const app = createApp({
+    setup() {
+      result = composable();
+      return () => {};
+    }
+  });
+  app.mount(document.createElement('div'));
+  return [result!, app];
+}
diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json
index 68af76b29..2661427a1 100644
--- a/packages/vue/tsconfig.json
+++ b/packages/vue/tsconfig.json
@@ -6,7 +6,10 @@
     "rootDir": "src",
     "composite": true,
     "outDir": "./lib",
-    "lib": ["esnext", "DOM"],
+    "lib": [
+      "es2022",
+      "DOM"
+    ],
     "module": "esnext",
     "sourceMap": true,
     "moduleResolution": "node",
@@ -22,5 +25,8 @@
     {
       "path": "../common"
     }
+  ],
+  "include": [
+    "../src/**/*"
   ]
 }
diff --git a/packages/vue/vitest.config.ts b/packages/vue/vitest.config.ts
new file mode 100644
index 000000000..f96ac5630
--- /dev/null
+++ b/packages/vue/vitest.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig, UserConfigExport } from 'vitest/config';
+
+const config: UserConfigExport = {
+  test: {
+    environment: 'jsdom'
+  }
+};
+
+export default defineConfig(config);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6554f6109..8b59fafb4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1281,9 +1281,15 @@ importers:
         specifier: workspace:*
         version: link:../common
     devDependencies:
+      jsdom:
+        specifier: ^24.0.0
+        version: 24.0.0
       typescript:
         specifier: ^5.1.3
         version: 5.4.4
+      vitest:
+        specifier: ^1.5.1
+        version: 1.5.1(jsdom@24.0.0)
       vue:
         specifier: 3.4.21
         version: 3.4.21(typescript@5.4.4)
@@ -2177,23 +2183,6 @@ packages:
       '@babel/helper-split-export-declaration': 7.22.6
       semver: 6.3.1
 
-  /@babel/helper-create-class-features-plugin@7.24.4(@babel/core@7.23.5):
-    resolution: {integrity: sha512-lG75yeuUSVu0pIcbhiYMXBXANHrpUPaOfu7ryAzskCgKUHuAxRQI5ssrtmF0X9UXldPlvT0XM/A4F44OXRt6iQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-function-name': 7.23.0
-      '@babel/helper-member-expression-to-functions': 7.23.0
-      '@babel/helper-optimise-call-expression': 7.22.5
-      '@babel/helper-replace-supers': 7.24.1(@babel/core@7.23.5)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      semver: 6.3.1
-
   /@babel/helper-create-class-features-plugin@7.24.4(@babel/core@7.24.0):
     resolution: {integrity: sha512-lG75yeuUSVu0pIcbhiYMXBXANHrpUPaOfu7ryAzskCgKUHuAxRQI5ssrtmF0X9UXldPlvT0XM/A4F44OXRt6iQ==}
     engines: {node: '>=6.9.0'}
@@ -2221,6 +2210,7 @@ packages:
       '@babel/helper-annotate-as-pure': 7.22.5
       regexpu-core: 5.3.2
       semver: 6.3.1
+    dev: false
 
   /@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.23.7):
     resolution: {integrity: sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==}
@@ -2387,20 +2377,6 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /@babel/helper-define-polyfill-provider@0.6.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-o7SDgTJuvx5vLKD6SFvkydkSMBvahDKGiNJzG22IZYXhiqoe9efY7zocICBgzHV4IRg5wdgl2nEL/tulKIEIbA==}
-    peerDependencies:
-      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-plugin-utils': 7.24.0
-      debug: 4.3.4(supports-color@8.1.1)
-      lodash.debounce: 4.0.8
-      resolve: 1.22.8
-    transitivePeerDependencies:
-      - supports-color
-
   /@babel/helper-define-polyfill-provider@0.6.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-o7SDgTJuvx5vLKD6SFvkydkSMBvahDKGiNJzG22IZYXhiqoe9efY7zocICBgzHV4IRg5wdgl2nEL/tulKIEIbA==}
     peerDependencies:
@@ -2622,17 +2598,6 @@ packages:
       '@babel/helper-member-expression-to-functions': 7.23.0
       '@babel/helper-optimise-call-expression': 7.22.5
 
-  /@babel/helper-replace-supers@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-QCR1UqC9BzG5vZl8BMicmZ28RuUBnHhAMddD8yHFHDRH9lLTZ9uUPehX8ctVPT8l0TKblJidqcgUUKGVrePleQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-member-expression-to-functions': 7.23.0
-      '@babel/helper-optimise-call-expression': 7.22.5
-
   /@babel/helper-replace-supers@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-QCR1UqC9BzG5vZl8BMicmZ28RuUBnHhAMddD8yHFHDRH9lLTZ9uUPehX8ctVPT8l0TKblJidqcgUUKGVrePleQ==}
     engines: {node: '>=6.9.0'}
@@ -2724,16 +2689,6 @@ packages:
     dependencies:
       '@babel/types': 7.24.0
 
-  /@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.24.4(@babel/core@7.23.5):
-    resolution: {integrity: sha512-qpl6vOOEEzTLLcsuqYYo8yDtrTocmu2xkGvgNebvPjT9DTtfFYGmgDqY+rBYXNlqL4s9qLDn6xkrJv4RxAPiTA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.24.4(@babel/core@7.24.0):
     resolution: {integrity: sha512-qpl6vOOEEzTLLcsuqYYo8yDtrTocmu2xkGvgNebvPjT9DTtfFYGmgDqY+rBYXNlqL4s9qLDn6xkrJv4RxAPiTA==}
     engines: {node: '>=6.9.0'}
@@ -2782,15 +2737,6 @@ packages:
       '@babel/core': 7.24.0
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-y4HqEnkelJIOQGd+3g1bTeKsA5c6qM7eOn7VggGVbBc0y8MLSKHacwcIE2PplNlQSj0PqS9rrXL/nkPVK+kUNg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-y4HqEnkelJIOQGd+3g1bTeKsA5c6qM7eOn7VggGVbBc0y8MLSKHacwcIE2PplNlQSj0PqS9rrXL/nkPVK+kUNg==}
     engines: {node: '>=6.9.0'}
@@ -2846,17 +2792,6 @@ packages:
       '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
       '@babel/plugin-transform-optional-chaining': 7.23.4(@babel/core@7.24.0)
 
-  /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-Hj791Ii4ci8HqnaKHAlLNs+zaLXb0EzSDhiAWp5VNlyvCNymYfacs64pxTxbH1znW/NcArSmwpmG9IKE/TUVVQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.13.0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.23.5)
-
   /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-Hj791Ii4ci8HqnaKHAlLNs+zaLXb0EzSDhiAWp5VNlyvCNymYfacs64pxTxbH1znW/NcArSmwpmG9IKE/TUVVQ==}
     engines: {node: '>=6.9.0'}
@@ -2910,16 +2845,6 @@ packages:
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-m9m/fXsXLiHfwdgydIFnpk+7jlVbnvlK5B2EKiPdLUb6WX654ZaaEWJUjk8TftRbZpK0XibovlLWX4KIZhV6jw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-m9m/fXsXLiHfwdgydIFnpk+7jlVbnvlK5B2EKiPdLUb6WX654ZaaEWJUjk8TftRbZpK0XibovlLWX4KIZhV6jw==}
     engines: {node: '>=6.9.0'}
@@ -3259,6 +3184,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.23.5
+    dev: false
 
   /@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.23.7):
     resolution: {integrity: sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==}
@@ -3325,6 +3251,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.24.0
+    dev: false
 
   /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.23.7):
     resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
@@ -3359,6 +3286,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.24.0
+    dev: false
 
   /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.23.7):
     resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==}
@@ -3424,6 +3352,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.24.0
+    dev: false
 
   /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.23.7):
     resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==}
@@ -3485,6 +3414,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.24.0
+    dev: false
 
   /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.23.7):
     resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==}
@@ -3577,15 +3507,6 @@ packages:
       '@babel/core': 7.24.0
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-syntax-import-assertions@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-IuwnI5XnuF189t91XbxmXeCDz3qs6iDRO7GJ++wcfgeXNs/8FmIlKcpDSXNVyuLQxlwvskmI3Ct73wUODkJBlQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-syntax-import-assertions@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-IuwnI5XnuF189t91XbxmXeCDz3qs6iDRO7GJ++wcfgeXNs/8FmIlKcpDSXNVyuLQxlwvskmI3Ct73wUODkJBlQ==}
     engines: {node: '>=6.9.0'}
@@ -3633,15 +3554,6 @@ packages:
       '@babel/core': 7.24.0
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-syntax-import-attributes@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-zhQTMH0X2nVLnb04tz+s7AMuasX8U0FnpE+nHTOhSOINjWMnopoZTxtIKsd45n4GQ/HIZLyfIpoul8e2m0DnRA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-syntax-import-attributes@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-zhQTMH0X2nVLnb04tz+s7AMuasX8U0FnpE+nHTOhSOINjWMnopoZTxtIKsd45n4GQ/HIZLyfIpoul8e2m0DnRA==}
     engines: {node: '>=6.9.0'}
@@ -3658,6 +3570,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.24.0
+    dev: false
 
   /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.23.7):
     resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
@@ -3691,6 +3604,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.24.0
+    dev: false
 
   /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.23.7):
     resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
@@ -3752,6 +3666,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.24.0
+    dev: false
 
   /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.23.7):
     resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
@@ -3785,6 +3700,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.24.0
+    dev: false
 
   /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.23.7):
     resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
@@ -3818,6 +3734,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.24.0
+    dev: false
 
   /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.23.7):
     resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
@@ -3851,6 +3768,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.24.0
+    dev: false
 
   /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.23.7):
     resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
@@ -3884,6 +3802,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.24.0
+    dev: false
 
   /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.23.7):
     resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
@@ -3917,6 +3836,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.24.0
+    dev: false
 
   /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.23.7):
     resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
@@ -3951,6 +3871,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.24.0
+    dev: false
 
   /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.23.7):
     resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==}
@@ -3988,6 +3909,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.24.0
+    dev: false
 
   /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.23.7):
     resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
@@ -4054,6 +3976,7 @@ packages:
       '@babel/core': 7.23.5
       '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.5)
       '@babel/helper-plugin-utils': 7.24.0
+    dev: false
 
   /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.23.7):
     resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==}
@@ -4132,6 +4055,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.24.0
+    dev: false
 
   /@babel/plugin-transform-arrow-functions@7.24.1(@babel/core@7.23.9):
     resolution: {integrity: sha512-ngT/3NkRhsaep9ck9uj2Xhv9+xB1zShY3tM3g6om4xxCELwCDN4g4Aq5dRn48+0hasAql7s2hdBOysCfNpr4fw==}
@@ -4189,18 +4113,6 @@ packages:
       '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.23.9)
       '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.23.9)
 
-  /@babel/plugin-transform-async-generator-functions@7.24.3(@babel/core@7.23.5):
-    resolution: {integrity: sha512-Qe26CMYVjpQxJ8zxM1340JFNjZaF+ISWpr1Kt/jGo+ZTUzKkfw/pphEWbRCb+lmSM6k/TOgfYLvmbHkUQ0asIg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.23.5)
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.23.5)
-
   /@babel/plugin-transform-async-generator-functions@7.24.3(@babel/core@7.23.7):
     resolution: {integrity: sha512-Qe26CMYVjpQxJ8zxM1340JFNjZaF+ISWpr1Kt/jGo+ZTUzKkfw/pphEWbRCb+lmSM6k/TOgfYLvmbHkUQ0asIg==}
     engines: {node: '>=6.9.0'}
@@ -4272,17 +4184,6 @@ packages:
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.0)
 
-  /@babel/plugin-transform-async-to-generator@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-AawPptitRXp1y0n4ilKcGbRYWfbbzFWz2NqNu7dacYDtFtz0CMjG64b3LQsb3KIgnf4/obcUL78hfaOS7iCUfw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-module-imports': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.23.5)
-
   /@babel/plugin-transform-async-to-generator@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-AawPptitRXp1y0n4ilKcGbRYWfbbzFWz2NqNu7dacYDtFtz0CMjG64b3LQsb3KIgnf4/obcUL78hfaOS7iCUfw==}
     engines: {node: '>=6.9.0'}
@@ -4332,15 +4233,6 @@ packages:
       '@babel/core': 7.24.0
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-block-scoped-functions@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-TWWC18OShZutrv9C6mye1xwtam+uNi2bnTOCBUd5sZxyHOiWbU6ztSROofIMrK84uweEZC219POICK/sTYwfgg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-block-scoped-functions@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-TWWC18OShZutrv9C6mye1xwtam+uNi2bnTOCBUd5sZxyHOiWbU6ztSROofIMrK84uweEZC219POICK/sTYwfgg==}
     engines: {node: '>=6.9.0'}
@@ -4388,15 +4280,6 @@ packages:
       '@babel/core': 7.24.0
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-block-scoping@7.24.4(@babel/core@7.23.5):
-    resolution: {integrity: sha512-nIFUZIpGKDf9O9ttyRXpHFpKC+X3Y5mtshZONuEUYBomAKoM4y029Jr+uB1bHGPhNmK8YXHevDtKDOLmtRrp6g==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-block-scoping@7.24.4(@babel/core@7.24.0):
     resolution: {integrity: sha512-nIFUZIpGKDf9O9ttyRXpHFpKC+X3Y5mtshZONuEUYBomAKoM4y029Jr+uB1bHGPhNmK8YXHevDtKDOLmtRrp6g==}
     engines: {node: '>=6.9.0'}
@@ -4448,16 +4331,6 @@ packages:
       '@babel/helper-create-class-features-plugin': 7.23.10(@babel/core@7.24.0)
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-class-properties@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-OMLCXi0NqvJfORTaPQBwqLXHhb93wkBKZ4aNwMl6WtehO7ar+cmp+89iPEQPqxAnxsOKTaMcs3POz3rKayJ72g==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.23.5)
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-class-properties@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-OMLCXi0NqvJfORTaPQBwqLXHhb93wkBKZ4aNwMl6WtehO7ar+cmp+89iPEQPqxAnxsOKTaMcs3POz3rKayJ72g==}
     engines: {node: '>=6.9.0'}
@@ -4514,17 +4387,6 @@ packages:
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.0)
 
-  /@babel/plugin-transform-class-static-block@7.24.4(@babel/core@7.23.5):
-    resolution: {integrity: sha512-B8q7Pz870Hz/q9UgP8InNpY01CSLDSCyqX7zcRuv3FcPl87A2G17lASroHWaCtbdIcbYzOZ7kWmXFKbijMSmFg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.12.0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.23.5)
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.23.5)
-
   /@babel/plugin-transform-class-static-block@7.24.4(@babel/core@7.24.0):
     resolution: {integrity: sha512-B8q7Pz870Hz/q9UgP8InNpY01CSLDSCyqX7zcRuv3FcPl87A2G17lASroHWaCtbdIcbYzOZ7kWmXFKbijMSmFg==}
     engines: {node: '>=6.9.0'}
@@ -4602,22 +4464,6 @@ packages:
       '@babel/helper-split-export-declaration': 7.22.6
       globals: 11.12.0
 
-  /@babel/plugin-transform-classes@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-ZTIe3W7UejJd3/3R4p7ScyyOoafetUShSf4kCqV0O7F/RiHxVj/wRaRnQlrGwflvcehNA8M42HkAiEDYZu2F1Q==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-function-name': 7.23.0
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-replace-supers': 7.24.1(@babel/core@7.23.5)
-      '@babel/helper-split-export-declaration': 7.22.6
-      globals: 11.12.0
-
   /@babel/plugin-transform-classes@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-ZTIe3W7UejJd3/3R4p7ScyyOoafetUShSf4kCqV0O7F/RiHxVj/wRaRnQlrGwflvcehNA8M42HkAiEDYZu2F1Q==}
     engines: {node: '>=6.9.0'}
@@ -4676,16 +4522,6 @@ packages:
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/template': 7.24.0
 
-  /@babel/plugin-transform-computed-properties@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-5pJGVIUfJpOS+pAqBQd+QMaTD2vCL/HcePooON6pDpHgRp4gNRmzyHTPIkXntwKsq3ayUFVfJaIKPw2pOkOcTw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/template': 7.24.0
-
   /@babel/plugin-transform-computed-properties@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-5pJGVIUfJpOS+pAqBQd+QMaTD2vCL/HcePooON6pDpHgRp4gNRmzyHTPIkXntwKsq3ayUFVfJaIKPw2pOkOcTw==}
     engines: {node: '>=6.9.0'}
@@ -4734,15 +4570,6 @@ packages:
       '@babel/core': 7.24.0
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-destructuring@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-ow8jciWqNxR3RYbSNVuF4U2Jx130nwnBnhRw6N6h1bOejNkABmcI5X5oz29K4alWX7vf1C+o6gtKXikzRKkVdw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-destructuring@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-ow8jciWqNxR3RYbSNVuF4U2Jx130nwnBnhRw6N6h1bOejNkABmcI5X5oz29K4alWX7vf1C+o6gtKXikzRKkVdw==}
     engines: {node: '>=6.9.0'}
@@ -4794,16 +4621,6 @@ packages:
       '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.0)
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-dotall-regex@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-p7uUxgSoZwZ2lPNMzUkqCts3xlp8n+o05ikjy7gbtFJSt9gdU88jAmtfmOxHM14noQXBxfgzf2yRWECiNVhTCw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.5)
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-dotall-regex@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-p7uUxgSoZwZ2lPNMzUkqCts3xlp8n+o05ikjy7gbtFJSt9gdU88jAmtfmOxHM14noQXBxfgzf2yRWECiNVhTCw==}
     engines: {node: '>=6.9.0'}
@@ -4852,15 +4669,6 @@ packages:
       '@babel/core': 7.24.0
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-duplicate-keys@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-msyzuUnvsjsaSaocV6L7ErfNsa5nDWL1XKNnDePLgmz+WdU4w/J8+AxBMrWfi9m4IxfL5sZQKUPQKDQeeAT6lA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-duplicate-keys@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-msyzuUnvsjsaSaocV6L7ErfNsa5nDWL1XKNnDePLgmz+WdU4w/J8+AxBMrWfi9m4IxfL5sZQKUPQKDQeeAT6lA==}
     engines: {node: '>=6.9.0'}
@@ -4912,16 +4720,6 @@ packages:
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.0)
 
-  /@babel/plugin-transform-dynamic-import@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-av2gdSTyXcJVdI+8aFZsCAtR29xJt0S5tas+Ef8NvBNmD1a+N/3ecMLeMBgfcK+xzsjdLDT6oHt+DFPyeqUbDA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.23.5)
-
   /@babel/plugin-transform-dynamic-import@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-av2gdSTyXcJVdI+8aFZsCAtR29xJt0S5tas+Ef8NvBNmD1a+N/3ecMLeMBgfcK+xzsjdLDT6oHt+DFPyeqUbDA==}
     engines: {node: '>=6.9.0'}
@@ -4974,16 +4772,6 @@ packages:
       '@babel/helper-builder-binary-assignment-operator-visitor': 7.22.15
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-exponentiation-operator@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-U1yX13dVBSwS23DEAqU+Z/PkwE9/m7QQy8Y9/+Tdb8UWYaGNDYwTLi19wqIAiROr8sXVum9A/rtiH5H0boUcTw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-builder-binary-assignment-operator-visitor': 7.22.15
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-exponentiation-operator@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-U1yX13dVBSwS23DEAqU+Z/PkwE9/m7QQy8Y9/+Tdb8UWYaGNDYwTLi19wqIAiROr8sXVum9A/rtiH5H0boUcTw==}
     engines: {node: '>=6.9.0'}
@@ -5036,16 +4824,6 @@ packages:
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.0)
 
-  /@babel/plugin-transform-export-namespace-from@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-Ft38m/KFOyzKw2UaJFkWG9QnHPG/Q/2SkOrRk4pNBPg5IPZ+dOxcmkK5IyuBcxiNPyyYowPGUReyBvrvZs7IlQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.23.5)
-
   /@babel/plugin-transform-export-namespace-from@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-Ft38m/KFOyzKw2UaJFkWG9QnHPG/Q/2SkOrRk4pNBPg5IPZ+dOxcmkK5IyuBcxiNPyyYowPGUReyBvrvZs7IlQ==}
     engines: {node: '>=6.9.0'}
@@ -5129,16 +4907,6 @@ packages:
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
 
-  /@babel/plugin-transform-for-of@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-OxBdcnF04bpdQdR3i4giHZNZQn7cm8RQKcSwA17wAAqEELo1ZOwp5FFgeptWUQXFyT9kwHo10aqqauYkRZPCAg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-
   /@babel/plugin-transform-for-of@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-OxBdcnF04bpdQdR3i4giHZNZQn7cm8RQKcSwA17wAAqEELo1ZOwp5FFgeptWUQXFyT9kwHo10aqqauYkRZPCAg==}
     engines: {node: '>=6.9.0'}
@@ -5195,17 +4963,6 @@ packages:
       '@babel/helper-function-name': 7.23.0
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-function-name@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-BXmDZpPlh7jwicKArQASrj8n22/w6iymRnvHYYd2zO30DbE277JO20/7yXJT3QxDPtiQiOxQBbZH4TpivNXIxA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-function-name': 7.23.0
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-function-name@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-BXmDZpPlh7jwicKArQASrj8n22/w6iymRnvHYYd2zO30DbE277JO20/7yXJT3QxDPtiQiOxQBbZH4TpivNXIxA==}
     engines: {node: '>=6.9.0'}
@@ -5259,16 +5016,6 @@ packages:
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.0)
 
-  /@babel/plugin-transform-json-strings@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-U7RMFmRvoasscrIFy5xA4gIp8iWnWubnKkKuUGJjsuOH7GfbMkB+XZzeslx2kLdEGdOJDamEmCqOks6e8nv8DQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.23.5)
-
   /@babel/plugin-transform-json-strings@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-U7RMFmRvoasscrIFy5xA4gIp8iWnWubnKkKuUGJjsuOH7GfbMkB+XZzeslx2kLdEGdOJDamEmCqOks6e8nv8DQ==}
     engines: {node: '>=6.9.0'}
@@ -5317,15 +5064,6 @@ packages:
       '@babel/core': 7.24.0
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-literals@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-zn9pwz8U7nCqOYIiBaOxoQOtYmMODXTJnkxG4AtX8fPmnCRYWBOHD0qcpwS9e2VDSp1zNJYpdnFMIKb8jmwu6g==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-literals@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-zn9pwz8U7nCqOYIiBaOxoQOtYmMODXTJnkxG4AtX8fPmnCRYWBOHD0qcpwS9e2VDSp1zNJYpdnFMIKb8jmwu6g==}
     engines: {node: '>=6.9.0'}
@@ -5377,16 +5115,6 @@ packages:
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.0)
 
-  /@babel/plugin-transform-logical-assignment-operators@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-OhN6J4Bpz+hIBqItTeWJujDOfNP+unqv/NJgyhlpSqgBTPm37KkMmZV6SYcOj+pnDbdcl1qRGV/ZiIjX9Iy34w==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.23.5)
-
   /@babel/plugin-transform-logical-assignment-operators@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-OhN6J4Bpz+hIBqItTeWJujDOfNP+unqv/NJgyhlpSqgBTPm37KkMmZV6SYcOj+pnDbdcl1qRGV/ZiIjX9Iy34w==}
     engines: {node: '>=6.9.0'}
@@ -5435,15 +5163,6 @@ packages:
       '@babel/core': 7.24.0
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-member-expression-literals@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-4ojai0KysTWXzHseJKa1XPNXKRbuUrhkOPY4rEGeR+7ChlJVKxFa3H3Bz+7tWaGKgJAXUWKOGmltN+u9B3+CVg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-member-expression-literals@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-4ojai0KysTWXzHseJKa1XPNXKRbuUrhkOPY4rEGeR+7ChlJVKxFa3H3Bz+7tWaGKgJAXUWKOGmltN+u9B3+CVg==}
     engines: {node: '>=6.9.0'}
@@ -5495,16 +5214,6 @@ packages:
       '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.0)
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-modules-amd@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-lAxNHi4HVtjnHd5Rxg3D5t99Xm6H7b04hUS7EHIXcUl2EV4yl1gWdqZrNzXnSrHveL9qMdbODlLF55mvgjAfaQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.5)
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-modules-amd@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-lAxNHi4HVtjnHd5Rxg3D5t99Xm6H7b04hUS7EHIXcUl2EV4yl1gWdqZrNzXnSrHveL9qMdbODlLF55mvgjAfaQ==}
     engines: {node: '>=6.9.0'}
@@ -5561,17 +5270,6 @@ packages:
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/helper-simple-access': 7.22.5
 
-  /@babel/plugin-transform-modules-commonjs@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-szog8fFTUxBfw0b98gEWPaEqF42ZUD/T3bkynW/wtgx2p/XCP55WEsb+VosKceRSd6njipdZvNogqdtI4Q0chw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.5)
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-simple-access': 7.22.5
-
   /@babel/plugin-transform-modules-commonjs@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-szog8fFTUxBfw0b98gEWPaEqF42ZUD/T3bkynW/wtgx2p/XCP55WEsb+VosKceRSd6njipdZvNogqdtI4Q0chw==}
     engines: {node: '>=6.9.0'}
@@ -5633,18 +5331,6 @@ packages:
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/helper-validator-identifier': 7.22.20
 
-  /@babel/plugin-transform-modules-systemjs@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-mqQ3Zh9vFO1Tpmlt8QPnbwGHzNz3lpNEMxQb1kAemn/erstyqw1r9KeOlOfo3y6xAnFEcOv2tSyrXfmMk+/YZA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-hoist-variables': 7.22.5
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.5)
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-validator-identifier': 7.22.20
-
   /@babel/plugin-transform-modules-systemjs@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-mqQ3Zh9vFO1Tpmlt8QPnbwGHzNz3lpNEMxQb1kAemn/erstyqw1r9KeOlOfo3y6xAnFEcOv2tSyrXfmMk+/YZA==}
     engines: {node: '>=6.9.0'}
@@ -5699,16 +5385,6 @@ packages:
       '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.0)
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-modules-umd@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-tuA3lpPj+5ITfcCluy6nWonSL7RvaG0AOTeAuvXqEKS34lnLzXpDb0dcP6K8jD0zWZFNDVly90AGFJPnm4fOYg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.5)
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-modules-umd@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-tuA3lpPj+5ITfcCluy6nWonSL7RvaG0AOTeAuvXqEKS34lnLzXpDb0dcP6K8jD0zWZFNDVly90AGFJPnm4fOYg==}
     engines: {node: '>=6.9.0'}
@@ -5728,6 +5404,7 @@ packages:
       '@babel/core': 7.23.5
       '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.5)
       '@babel/helper-plugin-utils': 7.24.0
+    dev: false
 
   /@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.23.7):
     resolution: {integrity: sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==}
@@ -5798,15 +5475,6 @@ packages:
       '@babel/core': 7.24.0
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-new-target@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-/rurytBM34hYy0HKZQyA0nHbQgQNFm4Q/BOc9Hflxi2X3twRof7NaE5W46j4kQitm7SvACVRXsa6N/tSZxvPug==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-new-target@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-/rurytBM34hYy0HKZQyA0nHbQgQNFm4Q/BOc9Hflxi2X3twRof7NaE5W46j4kQitm7SvACVRXsa6N/tSZxvPug==}
     engines: {node: '>=6.9.0'}
@@ -5858,16 +5526,6 @@ packages:
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.0)
 
-  /@babel/plugin-transform-nullish-coalescing-operator@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-iQ+caew8wRrhCikO5DrUYx0mrmdhkaELgFa+7baMcVuhxIkN7oxt06CZ51D65ugIb1UWRQ8oQe+HXAVM6qHFjw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.5)
-
   /@babel/plugin-transform-nullish-coalescing-operator@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-iQ+caew8wRrhCikO5DrUYx0mrmdhkaELgFa+7baMcVuhxIkN7oxt06CZ51D65ugIb1UWRQ8oQe+HXAVM6qHFjw==}
     engines: {node: '>=6.9.0'}
@@ -5920,16 +5578,6 @@ packages:
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.0)
 
-  /@babel/plugin-transform-numeric-separator@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-7GAsGlK4cNL2OExJH1DzmDeKnRv/LXq0eLUSvudrehVA5Rgg4bIrqEUW29FbKMBRT0ztSqisv7kjP+XIC4ZMNw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.23.5)
-
   /@babel/plugin-transform-numeric-separator@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-7GAsGlK4cNL2OExJH1DzmDeKnRv/LXq0eLUSvudrehVA5Rgg4bIrqEUW29FbKMBRT0ztSqisv7kjP+XIC4ZMNw==}
     engines: {node: '>=6.9.0'}
@@ -6024,18 +5672,6 @@ packages:
       '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.0)
       '@babel/plugin-transform-parameters': 7.23.3(@babel/core@7.24.0)
 
-  /@babel/plugin-transform-object-rest-spread@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-XjD5f0YqOtebto4HGISLNfiNMTTs6tbkFf2TOqJlYKYmbo+mN9Dnpl4SRoofiziuOWMIyq3sZEUqLo3hLITFEA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.23.5)
-      '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.23.5)
-
   /@babel/plugin-transform-object-rest-spread@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-XjD5f0YqOtebto4HGISLNfiNMTTs6tbkFf2TOqJlYKYmbo+mN9Dnpl4SRoofiziuOWMIyq3sZEUqLo3hLITFEA==}
     engines: {node: '>=6.9.0'}
@@ -6090,16 +5726,6 @@ packages:
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/helper-replace-supers': 7.22.20(@babel/core@7.24.0)
 
-  /@babel/plugin-transform-object-super@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-oKJqR3TeI5hSLRxudMjFQ9re9fBVUU0GICqM3J1mi8MqlhVr6hC/ZN4ttAyMuQR6EZZIY6h/exe5swqGNNIkWQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-replace-supers': 7.24.1(@babel/core@7.23.5)
-
   /@babel/plugin-transform-object-super@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-oKJqR3TeI5hSLRxudMjFQ9re9fBVUU0GICqM3J1mi8MqlhVr6hC/ZN4ttAyMuQR6EZZIY6h/exe5swqGNNIkWQ==}
     engines: {node: '>=6.9.0'}
@@ -6152,16 +5778,6 @@ packages:
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.0)
 
-  /@babel/plugin-transform-optional-catch-binding@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-oBTH7oURV4Y+3EUrf6cWn1OHio3qG/PVwO5J03iSJmBg6m2EhKjkAu/xuaXaYwWW9miYtvbWv4LNf0AmR43LUA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.23.5)
-
   /@babel/plugin-transform-optional-catch-binding@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-oBTH7oURV4Y+3EUrf6cWn1OHio3qG/PVwO5J03iSJmBg6m2EhKjkAu/xuaXaYwWW9miYtvbWv4LNf0AmR43LUA==}
     engines: {node: '>=6.9.0'}
@@ -6218,17 +5834,6 @@ packages:
       '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
       '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.0)
 
-  /@babel/plugin-transform-optional-chaining@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-n03wmDt+987qXwAgcBlnUUivrZBPZ8z1plL0YvgQalLm+ZE5BMhGm94jhxXtA1wzv1Cu2aaOv1BM9vbVttrzSg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.5)
-
   /@babel/plugin-transform-optional-chaining@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-n03wmDt+987qXwAgcBlnUUivrZBPZ8z1plL0YvgQalLm+ZE5BMhGm94jhxXtA1wzv1Cu2aaOv1BM9vbVttrzSg==}
     engines: {node: '>=6.9.0'}
@@ -6278,15 +5883,6 @@ packages:
       '@babel/core': 7.24.0
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-parameters@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-8Jl6V24g+Uw5OGPeWNKrKqXPDw2YDjLc53ojwfMcKwlEoETKU9rU0mHUtcg9JntWI/QYzGAXNWEcVHZ+fR+XXg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-parameters@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-8Jl6V24g+Uw5OGPeWNKrKqXPDw2YDjLc53ojwfMcKwlEoETKU9rU0mHUtcg9JntWI/QYzGAXNWEcVHZ+fR+XXg==}
     engines: {node: '>=6.9.0'}
@@ -6338,16 +5934,6 @@ packages:
       '@babel/helper-create-class-features-plugin': 7.23.10(@babel/core@7.24.0)
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-private-methods@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-tGvisebwBO5em4PaYNqt4fkw56K2VALsAbAakY0FjTYqJp7gfdrgr7YX76Or8/cpik0W6+tj3rZ0uHU9Oil4tw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.23.5)
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-private-methods@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-tGvisebwBO5em4PaYNqt4fkw56K2VALsAbAakY0FjTYqJp7gfdrgr7YX76Or8/cpik0W6+tj3rZ0uHU9Oil4tw==}
     engines: {node: '>=6.9.0'}
@@ -6408,18 +5994,6 @@ packages:
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.0)
 
-  /@babel/plugin-transform-private-property-in-object@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-pTHxDVa0BpUbvAgX3Gat+7cSciXqUcY9j2VZKTbSB6+VQGpNgNO9ailxTGHSXlqOnX1Hcx1Enme2+yv7VqP9bg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.23.5)
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.23.5)
-
   /@babel/plugin-transform-private-property-in-object@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-pTHxDVa0BpUbvAgX3Gat+7cSciXqUcY9j2VZKTbSB6+VQGpNgNO9ailxTGHSXlqOnX1Hcx1Enme2+yv7VqP9bg==}
     engines: {node: '>=6.9.0'}
@@ -6470,15 +6044,6 @@ packages:
       '@babel/core': 7.24.0
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-property-literals@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-LetvD7CrHmEx0G442gOomRr66d7q8HzzGGr4PMHGr+5YIm6++Yke+jxj246rpvsbyhJwCLxcTn6zW1P1BSenqA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-property-literals@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-LetvD7CrHmEx0G442gOomRr66d7q8HzzGGr4PMHGr+5YIm6++Yke+jxj246rpvsbyhJwCLxcTn6zW1P1BSenqA==}
     engines: {node: '>=6.9.0'}
@@ -6722,16 +6287,6 @@ packages:
       '@babel/helper-plugin-utils': 7.24.0
       regenerator-transform: 0.15.2
 
-  /@babel/plugin-transform-regenerator@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-sJwZBCzIBE4t+5Q4IGLaaun5ExVMRY0lYwos/jNecjMrVCygCdph3IKv0tkP5Fc87e/1+bebAmEAGBfnRD+cnw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-      regenerator-transform: 0.15.2
-
   /@babel/plugin-transform-regenerator@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-sJwZBCzIBE4t+5Q4IGLaaun5ExVMRY0lYwos/jNecjMrVCygCdph3IKv0tkP5Fc87e/1+bebAmEAGBfnRD+cnw==}
     engines: {node: '>=6.9.0'}
@@ -6780,15 +6335,6 @@ packages:
       '@babel/core': 7.24.0
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-reserved-words@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-JAclqStUfIwKN15HrsQADFgeZt+wexNQ0uLhuqvqAUFoqPMjEcFCYZBhq0LUdz6dZK/mD+rErhW71fbx8RYElg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-reserved-words@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-JAclqStUfIwKN15HrsQADFgeZt+wexNQ0uLhuqvqAUFoqPMjEcFCYZBhq0LUdz6dZK/mD+rErhW71fbx8RYElg==}
     engines: {node: '>=6.9.0'}
@@ -6910,6 +6456,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.24.0
+    dev: false
 
   /@babel/plugin-transform-shorthand-properties@7.24.1(@babel/core@7.23.9):
     resolution: {integrity: sha512-LyjVB1nsJ6gTTUKRjRWx9C1s9hE7dLfP/knKdrfeH9UPtAGjYGgxIbFfx7xyLIEWs7Xe1Gnf8EWiUqfjLhInZA==}
@@ -6972,16 +6519,6 @@ packages:
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
 
-  /@babel/plugin-transform-spread@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-KjmcIM+fxgY+KxPVbjelJC6hrH1CgtPmTvdXAfn3/a9CnWGSTY7nH4zm5+cjmWJybdcPSsD0++QssDsjcpe47g==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-
   /@babel/plugin-transform-spread@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-KjmcIM+fxgY+KxPVbjelJC6hrH1CgtPmTvdXAfn3/a9CnWGSTY7nH4zm5+cjmWJybdcPSsD0++QssDsjcpe47g==}
     engines: {node: '>=6.9.0'}
@@ -7030,15 +6567,6 @@ packages:
       '@babel/core': 7.24.0
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-sticky-regex@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-9v0f1bRXgPVcPrngOQvLXeGNNVLc8UjMVfebo9ka0WF3/7+aVUHmaJVT3sa0XCzEFioPfPHZiOcYG9qOsH63cw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-sticky-regex@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-9v0f1bRXgPVcPrngOQvLXeGNNVLc8UjMVfebo9ka0WF3/7+aVUHmaJVT3sa0XCzEFioPfPHZiOcYG9qOsH63cw==}
     engines: {node: '>=6.9.0'}
@@ -7094,6 +6622,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.24.0
+    dev: false
 
   /@babel/plugin-transform-template-literals@7.24.1(@babel/core@7.23.9):
     resolution: {integrity: sha512-WRkhROsNzriarqECASCNu/nojeXCDTE/F2HmRgOzi7NGvyfYGq1NEjKBK3ckLfRgGc6/lPAqP0vDOSw3YtG34g==}
@@ -7152,15 +6681,6 @@ packages:
       '@babel/core': 7.24.0
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-typeof-symbol@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-CBfU4l/A+KruSUoW+vTQthwcAdwuqbpRNB8HQKlZABwHRhsdHZ9fezp4Sn18PeAlYxTNiLMlx4xUBV3AWfg1BA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-typeof-symbol@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-CBfU4l/A+KruSUoW+vTQthwcAdwuqbpRNB8HQKlZABwHRhsdHZ9fezp4Sn18PeAlYxTNiLMlx4xUBV3AWfg1BA==}
     engines: {node: '>=6.9.0'}
@@ -7245,15 +6765,6 @@ packages:
       '@babel/core': 7.24.0
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-unicode-escapes@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-RlkVIcWT4TLI96zM660S877E7beKlQw7Ig+wqkKBiWfj0zH5Q4h50q6er4wzZKRNSYpfo6ILJ+hrJAGSX2qcNw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-unicode-escapes@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-RlkVIcWT4TLI96zM660S877E7beKlQw7Ig+wqkKBiWfj0zH5Q4h50q6er4wzZKRNSYpfo6ILJ+hrJAGSX2qcNw==}
     engines: {node: '>=6.9.0'}
@@ -7305,16 +6816,6 @@ packages:
       '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.0)
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-unicode-property-regex@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-Ss4VvlfYV5huWApFsF8/Sq0oXnGO+jB+rijFEFugTd3cwSObUSnUi88djgR5528Csl0uKlrI331kRqe56Ov2Ng==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.5)
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-unicode-property-regex@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-Ss4VvlfYV5huWApFsF8/Sq0oXnGO+jB+rijFEFugTd3cwSObUSnUi88djgR5528Csl0uKlrI331kRqe56Ov2Ng==}
     engines: {node: '>=6.9.0'}
@@ -7367,16 +6868,6 @@ packages:
       '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.0)
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-unicode-regex@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-2A/94wgZgxfTsiLaQ2E36XAOdcZmGAaEEgVmxQWwZXWkGhvoHbaqXcKnU8zny4ycpu3vNqg0L/PcCiYtHtA13g==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.5)
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-unicode-regex@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-2A/94wgZgxfTsiLaQ2E36XAOdcZmGAaEEgVmxQWwZXWkGhvoHbaqXcKnU8zny4ycpu3vNqg0L/PcCiYtHtA13g==}
     engines: {node: '>=6.9.0'}
@@ -7429,16 +6920,6 @@ packages:
       '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.0)
       '@babel/helper-plugin-utils': 7.24.0
 
-  /@babel/plugin-transform-unicode-sets-regex@7.24.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-fqj4WuzzS+ukpgerpAoOnMfQXwUHFxXUZUE84oL2Kao2N8uSlvcpnAidKASgsNgzZHBsHWvcm8s9FPWUhAb8fA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.5)
-      '@babel/helper-plugin-utils': 7.24.0
-
   /@babel/plugin-transform-unicode-sets-regex@7.24.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-fqj4WuzzS+ukpgerpAoOnMfQXwUHFxXUZUE84oL2Kao2N8uSlvcpnAidKASgsNgzZHBsHWvcm8s9FPWUhAb8fA==}
     engines: {node: '>=6.9.0'}
@@ -7811,97 +7292,6 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /@babel/preset-env@7.24.4(@babel/core@7.23.5):
-    resolution: {integrity: sha512-7Kl6cSmYkak0FK/FXjSEnLJ1N9T/WA2RkMhu17gZ/dsxKJUuTYNIylahPTzqpLyJN4WhDif8X0XK1R8Wsguo/A==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/compat-data': 7.24.4
-      '@babel/core': 7.23.5
-      '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-validator-option': 7.23.5
-      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.24.4(@babel/core@7.23.5)
-      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.23.5)
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.23.5)
-      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.23.5)
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.23.5)
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.23.5)
-      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.23.5)
-      '@babel/plugin-syntax-import-assertions': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-syntax-import-attributes': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.23.5)
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.23.5)
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.23.5)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.5)
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.23.5)
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.23.5)
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.23.5)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.5)
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.23.5)
-      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.23.5)
-      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.23.5)
-      '@babel/plugin-transform-arrow-functions': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-async-generator-functions': 7.24.3(@babel/core@7.23.5)
-      '@babel/plugin-transform-async-to-generator': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-block-scoped-functions': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-block-scoping': 7.24.4(@babel/core@7.23.5)
-      '@babel/plugin-transform-class-properties': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-class-static-block': 7.24.4(@babel/core@7.23.5)
-      '@babel/plugin-transform-classes': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-computed-properties': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-destructuring': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-dotall-regex': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-duplicate-keys': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-dynamic-import': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-exponentiation-operator': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-export-namespace-from': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-for-of': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-function-name': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-json-strings': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-literals': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-logical-assignment-operators': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-member-expression-literals': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-modules-amd': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-modules-systemjs': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-modules-umd': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.23.5)
-      '@babel/plugin-transform-new-target': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-numeric-separator': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-object-rest-spread': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-object-super': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-optional-catch-binding': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-private-property-in-object': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-property-literals': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-regenerator': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-reserved-words': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-shorthand-properties': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-spread': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-sticky-regex': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-template-literals': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-typeof-symbol': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-unicode-escapes': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-unicode-property-regex': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-unicode-regex': 7.24.1(@babel/core@7.23.5)
-      '@babel/plugin-transform-unicode-sets-regex': 7.24.1(@babel/core@7.23.5)
-      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.23.5)
-      babel-plugin-polyfill-corejs2: 0.4.10(@babel/core@7.23.5)
-      babel-plugin-polyfill-corejs3: 0.10.4(@babel/core@7.23.5)
-      babel-plugin-polyfill-regenerator: 0.6.1(@babel/core@7.23.5)
-      core-js-compat: 3.36.0
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
   /@babel/preset-env@7.24.4(@babel/core@7.24.0):
     resolution: {integrity: sha512-7Kl6cSmYkak0FK/FXjSEnLJ1N9T/WA2RkMhu17gZ/dsxKJUuTYNIylahPTzqpLyJN4WhDif8X0XK1R8Wsguo/A==}
     engines: {node: '>=6.9.0'}
@@ -8013,6 +7403,7 @@ packages:
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/types': 7.24.0
       esutils: 2.0.3
+    dev: false
 
   /@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.23.7):
     resolution: {integrity: sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==}
@@ -13338,7 +12729,7 @@ packages:
       '@babel/preset-env': ^7.1.6
     dependencies:
       '@babel/parser': 7.23.9
-      '@babel/preset-env': 7.24.4(@babel/core@7.23.5)
+      '@babel/preset-env': 7.24.4(@babel/core@7.24.0)
       flow-parser: 0.206.0
       glob: 7.2.3
       invariant: 2.2.4
@@ -17411,6 +16802,14 @@ packages:
       chai: 4.4.1
     dev: true
 
+  /@vitest/expect@1.5.1:
+    resolution: {integrity: sha512-w3Bn+VUMqku+oWmxvPhTE86uMTbfmBl35aGaIPlwVW7Q89ZREC/icfo2HBsEZ3AAW6YR9lObfZKPEzstw9tJOQ==}
+    dependencies:
+      '@vitest/spy': 1.5.1
+      '@vitest/utils': 1.5.1
+      chai: 4.4.1
+    dev: true
+
   /@vitest/runner@1.3.1:
     resolution: {integrity: sha512-5FzF9c3jG/z5bgCnjr8j9LNq/9OxV2uEBAITOXfoe3rdZJTdO7jzThth7FXv/6b+kdY65tpRQB7WaKhNZwX+Kg==}
     dependencies:
@@ -17419,6 +16818,14 @@ packages:
       pathe: 1.1.2
     dev: true
 
+  /@vitest/runner@1.5.1:
+    resolution: {integrity: sha512-mt372zsz0vFR7L1xF/ert4t+teD66oSuXoTyaZbl0eJgilvyzCKP1tJ21gVa8cDklkBOM3DLnkE1ljj/BskyEw==}
+    dependencies:
+      '@vitest/utils': 1.5.1
+      p-limit: 5.0.0
+      pathe: 1.1.2
+    dev: true
+
   /@vitest/snapshot@1.3.1:
     resolution: {integrity: sha512-EF++BZbt6RZmOlE3SuTPu/NfwBF6q4ABS37HHXzs2LUVPBLx2QoY/K0fKpRChSo8eLiuxcbCVfqKgx/dplCDuQ==}
     dependencies:
@@ -17427,12 +16834,26 @@ packages:
       pretty-format: 29.7.0
     dev: true
 
+  /@vitest/snapshot@1.5.1:
+    resolution: {integrity: sha512-h/1SGaZYXmjn6hULRBOlqam2z4oTlEe6WwARRzLErAPBqljAs6eX7tfdyN0K+MpipIwSZ5sZsubDWkCPAiVXZQ==}
+    dependencies:
+      magic-string: 0.30.9
+      pathe: 1.1.2
+      pretty-format: 29.7.0
+    dev: true
+
   /@vitest/spy@1.3.1:
     resolution: {integrity: sha512-xAcW+S099ylC9VLU7eZfdT9myV67Nor9w9zhf0mGCYJSO+zM2839tOeROTdikOi/8Qeusffvxb/MyBSOja1Uig==}
     dependencies:
       tinyspy: 2.2.1
     dev: true
 
+  /@vitest/spy@1.5.1:
+    resolution: {integrity: sha512-vsqczk6uPJjmPLy6AEtqfbFqgLYcGBe9BTY+XL8L6y8vrGOhyE23CJN9P/hPimKXnScbqiZ/r/UtUSOQ2jIDGg==}
+    dependencies:
+      tinyspy: 2.2.1
+    dev: true
+
   /@vitest/utils@1.3.1:
     resolution: {integrity: sha512-d3Waie/299qqRyHTm2DjADeTaNdNSVsnwHPWrs20JMpjh6eiVq7ggggweO8rc4arhf6rRkWuHKwvxGvejUXZZQ==}
     dependencies:
@@ -17442,6 +16863,15 @@ packages:
       pretty-format: 29.7.0
     dev: true
 
+  /@vitest/utils@1.5.1:
+    resolution: {integrity: sha512-92pE17bBXUxA0Y7goPcvnATMCuq4NQLOmqsG0e2BtzRi7KLwZB5jpiELi/8ybY8IQNWemKjSD5rMoO7xTdv8ug==}
+    dependencies:
+      diff-sequences: 29.6.3
+      estree-walker: 3.0.3
+      loupe: 2.3.7
+      pretty-format: 29.7.0
+    dev: true
+
   /@volar/language-core@2.2.0-alpha.7:
     resolution: {integrity: sha512-igpp+nTkyl8faVzRJMpSCeA4XlBJ5UVSyc/WGyksmUmP10YbfufbcQCFlxEXv2uMBV+a3L4JVCj+Vju+08FOSA==}
     dependencies:
@@ -18497,18 +17927,6 @@ packages:
       resolve: 1.22.8
     dev: false
 
-  /babel-plugin-polyfill-corejs2@0.4.10(@babel/core@7.23.5):
-    resolution: {integrity: sha512-rpIuu//y5OX6jVU+a5BCn1R5RSZYWAl2Nar76iwaOdycqb6JPxediskWFMMl7stfwNJR4b7eiQvh5fB5TEQJTQ==}
-    peerDependencies:
-      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
-    dependencies:
-      '@babel/compat-data': 7.24.4
-      '@babel/core': 7.23.5
-      '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.23.5)
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
   /babel-plugin-polyfill-corejs2@0.4.10(@babel/core@7.24.0):
     resolution: {integrity: sha512-rpIuu//y5OX6jVU+a5BCn1R5RSZYWAl2Nar76iwaOdycqb6JPxediskWFMMl7stfwNJR4b7eiQvh5fB5TEQJTQ==}
     peerDependencies:
@@ -18596,17 +18014,6 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /babel-plugin-polyfill-corejs3@0.10.4(@babel/core@7.23.5):
-    resolution: {integrity: sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==}
-    peerDependencies:
-      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.23.5)
-      core-js-compat: 3.37.0
-    transitivePeerDependencies:
-      - supports-color
-
   /babel-plugin-polyfill-corejs3@0.10.4(@babel/core@7.24.0):
     resolution: {integrity: sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==}
     peerDependencies:
@@ -18706,16 +18113,6 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /babel-plugin-polyfill-regenerator@0.6.1(@babel/core@7.23.5):
-    resolution: {integrity: sha512-JfTApdE++cgcTWjsiCQlLyFBMbTUft9ja17saCc93lgV33h4tuCVj7tlvu//qpLwaG+3yEz7/KhahGrUMkVq9g==}
-    peerDependencies:
-      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
-    dependencies:
-      '@babel/core': 7.23.5
-      '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.23.5)
-    transitivePeerDependencies:
-      - supports-color
-
   /babel-plugin-polyfill-regenerator@0.6.1(@babel/core@7.24.0):
     resolution: {integrity: sha512-JfTApdE++cgcTWjsiCQlLyFBMbTUft9ja17saCc93lgV33h4tuCVj7tlvu//qpLwaG+3yEz7/KhahGrUMkVq9g==}
     peerDependencies:
@@ -34187,6 +33584,11 @@ packages:
     engines: {node: '>=14.0.0'}
     dev: true
 
+  /tinypool@0.8.4:
+    resolution: {integrity: sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==}
+    engines: {node: '>=14.0.0'}
+    dev: true
+
   /tinyspy@2.2.1:
     resolution: {integrity: sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==}
     engines: {node: '>=14.0.0'}
@@ -35224,6 +34626,27 @@ packages:
       - terser
     dev: true
 
+  /vite-node@1.5.1:
+    resolution: {integrity: sha512-HNpfV7BrAsjkYVNWIcPleJwvJmydJqqJRrRbpoQ/U7QDwJKyEzNa4g5aYg8MjXJyKsk29IUCcMLFRcsEvqUIsA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    dependencies:
+      cac: 6.7.14
+      debug: 4.3.4(supports-color@8.1.1)
+      pathe: 1.1.2
+      picocolors: 1.0.0
+      vite: 5.2.8(@types/node@20.11.17)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
   /vite-plugin-pwa@0.19.2(vite@5.1.5)(workbox-build@7.0.0)(workbox-window@7.0.0):
     resolution: {integrity: sha512-LSQJFPxCAQYbRuSyc9EbRLRqLpaBA9onIZuQFomfUYjWSgHuQLonahetDlPSC9zsxmkSEhQH8dXZN8yL978h3w==}
     engines: {node: '>=16.0.0'}
@@ -35741,6 +35164,62 @@ packages:
       - terser
     dev: true
 
+  /vitest@1.5.1(jsdom@24.0.0):
+    resolution: {integrity: sha512-3GvBMpoRnUNbZRX1L3mJCv3Ou3NAobb4dM48y8k9ZGwDofePpclTOyO+lqJFKSQpubH1V8tEcAEw/Y3mJKGJQQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/node': ^18.0.0 || >=20.0.0
+      '@vitest/browser': 1.5.1
+      '@vitest/ui': 1.5.1
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+    dependencies:
+      '@vitest/expect': 1.5.1
+      '@vitest/runner': 1.5.1
+      '@vitest/snapshot': 1.5.1
+      '@vitest/spy': 1.5.1
+      '@vitest/utils': 1.5.1
+      acorn-walk: 8.3.2
+      chai: 4.4.1
+      debug: 4.3.4(supports-color@8.1.1)
+      execa: 8.0.1
+      jsdom: 24.0.0
+      local-pkg: 0.5.0
+      magic-string: 0.30.9
+      pathe: 1.1.2
+      picocolors: 1.0.0
+      std-env: 3.7.0
+      strip-literal: 2.0.0
+      tinybench: 2.6.0
+      tinypool: 0.8.4
+      vite: 5.2.8(@types/node@20.11.17)
+      vite-node: 1.5.1
+      why-is-node-running: 2.2.2
+    transitivePeerDependencies:
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
   /vlq@1.0.1:
     resolution: {integrity: sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==}
 

From 56679bb377f38f982986ceec2e54cbdfc5d6bb44 Mon Sep 17 00:00:00 2001
From: Christiaan Landman <christiaanlandman@Christiaans-MacBook-Pro-2.local>
Date: Mon, 29 Apr 2024 16:06:13 +0200
Subject: [PATCH 2/7] chore cleaning up useQuery/useStatus introduction, using
 in Vue demo

---
 .../src/components/LoadingMessage.vue         | 14 +--
 .../components/widgets/TodoListsWidget.vue    | 14 +--
 .../src/views/TodoListsEdit.vue               | 19 ++--
 .../src/views/layouts/Layout.vue              |  4 +-
 packages/vue/README.md                        | 86 ++++++++++-------
 .../vue/src/composables/usePowerSyncQuery.ts  | 21 +----
 .../vue/src/composables/usePowerSyncStatus.ts | 19 ++--
 packages/vue/src/composables/useQuery.ts      | 94 ++++++++++++-------
 packages/vue/src/composables/useStatus.ts     |  9 +-
 packages/vue/src/index.ts                     |  8 +-
 packages/vue/tsconfig.json                    |  9 +-
 11 files changed, 163 insertions(+), 134 deletions(-)

diff --git a/demos/vue-supabase-todolist/src/components/LoadingMessage.vue b/demos/vue-supabase-todolist/src/components/LoadingMessage.vue
index 8cfa023f5..c841ccd03 100644
--- a/demos/vue-supabase-todolist/src/components/LoadingMessage.vue
+++ b/demos/vue-supabase-todolist/src/components/LoadingMessage.vue
@@ -14,27 +14,27 @@
 </template>
 
 <script setup lang="ts">
-import { usePowerSyncStatus } from '@powersync/vue';
+import { useStatus } from '@powersync/vue';
 import { ref } from 'vue';
 import { watchEffect } from 'vue';
 import { computed } from 'vue';
 
-const { status } = usePowerSyncStatus();
+const status = useStatus();
 
 const props = defineProps({
-  loading: Boolean,
-  fetching: Boolean
+  isLoading: Boolean,
+  isFetching: Boolean
 });
 
 let dispose: (() => void) | undefined = undefined;
 const showLoadingMessage = ref(false);
 
 watchEffect(() => {
-  if (props.fetching || props.loading || !status.value.hasSynced) {
+  if (props.isFetching || props.isLoading || !status.value.hasSynced) {
     if (!dispose) {
       const timeout = setTimeout(() => {
         showLoadingMessage.value = true;
-      }, 100);
+      }, 300);
 
       dispose = () => clearTimeout(timeout);
     }
@@ -46,5 +46,5 @@ watchEffect(() => {
   }
 });
 
-const loadingMessage = computed(() => (props.loading ? 'Loading' : 'Re-executing query'));
+const loadingMessage = computed(() => (props.isLoading ? 'Loading' : 'Re-executing query'));
 </script>
diff --git a/demos/vue-supabase-todolist/src/components/widgets/TodoListsWidget.vue b/demos/vue-supabase-todolist/src/components/widgets/TodoListsWidget.vue
index 4aea95035..14456484e 100644
--- a/demos/vue-supabase-todolist/src/components/widgets/TodoListsWidget.vue
+++ b/demos/vue-supabase-todolist/src/components/widgets/TodoListsWidget.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="py-10 pa-2">
-    <LoadingMessage :loading :fetching />
+    <LoadingMessage v-if="isLoading || isFetching" :isLoading :isFetching />
 
     <ErrorMessage v-if="error">{{ error.message }}</ErrorMessage>
     <v-list v-else class="bg-black pa-0" lines="two">
@@ -18,10 +18,10 @@
 
 <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 '@powersync/vue'; // Adjust according to your actual implementation
+import { TODO_LISTS_ROUTE } from '@/plugins/router';
+import { usePowerSync, useQuery } from '@powersync/vue';
 import { useRouter } from 'vue-router';
-import ListItemWidget from './ListItemWidget.vue'; // Ensure this path is correct
+import ListItemWidget from './ListItemWidget.vue';
 import LoadingMessage from '../LoadingMessage.vue';
 
 const powerSync = usePowerSync();
@@ -31,10 +31,10 @@ const router = useRouter();
 
 const {
   data: listRecords,
-  loading,
-  fetching,
+  isLoading,
+  isFetching,
   error
-} = usePowerSyncWatchedQuery<ListRecord & { total_tasks: number; completed_tasks: number }>(`
+} = useQuery<ListRecord & { total_tasks: number; completed_tasks: number }>(`
       SELECT
         ${LISTS_TABLE}.*, COUNT(${TODOS_TABLE}.id) AS total_tasks, SUM(CASE WHEN ${TODOS_TABLE}.completed = true THEN 1 ELSE 0 END) as completed_tasks
       FROM
diff --git a/demos/vue-supabase-todolist/src/views/TodoListsEdit.vue b/demos/vue-supabase-todolist/src/views/TodoListsEdit.vue
index 20dc00867..89b33db31 100644
--- a/demos/vue-supabase-todolist/src/views/TodoListsEdit.vue
+++ b/demos/vue-supabase-todolist/src/views/TodoListsEdit.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="py-10">
-    <LoadingMessage v-if="loading || fetching" :loading :fetching />
+    <LoadingMessage v-if="isLoading || isFetching" :isLoading :isFetching />
     <v-list v-if="listName" class="pa-2 bg-black" lines="one">
       <ErrorMessage v-if="error">{{ error.message }}</ErrorMessage>
       <TodoItemWidget
@@ -13,7 +13,7 @@
         @toggle-completion="toggleCompletion(record, !record.completed)"
       />
     </v-list>
-    <h2 v-else-if="!loading" class="text-subtitle-1">No matching List found, please navigate back...</h2>
+    <h2 v-else-if="!isLoading" class="text-subtitle-1">No matching List found, please navigate back...</h2>
 
     <v-dialog v-model="showPrompt" width="350" opacity="0.5" scrim="black">
       <v-card title="Create Todo Item" class="bg-surface-light">
@@ -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 '@powersync/vue';
+import { usePowerSync, useQuery } from '@powersync/vue';
 import { watch } from 'vue';
 import { onUnmounted } from 'vue';
 import { ref } from 'vue';
@@ -64,10 +64,7 @@ const setShowPrompt = (state: boolean): void => {
   showPrompt.value = state;
 };
 const { id: listID = '' } = useRoute().params;
-const { data: listRecords } = usePowerSyncWatchedQuery<{ name: string }>(
-  `SELECT name FROM ${LISTS_TABLE} WHERE id = ?`,
-  [listID]
-);
+const { data: listRecords } = useQuery<{ name: string }>(`SELECT name FROM ${LISTS_TABLE} WHERE id = ?`, [listID]);
 
 const listName = computed(() => listRecords.value[0]?.name);
 watch(listName, () => {
@@ -79,12 +76,10 @@ onUnmounted(() => {
 
 const {
   data: todoRecords,
-  loading,
-  fetching,
+  isLoading,
+  isFetching,
   error
-} = usePowerSyncWatchedQuery<TodoRecord>(`SELECT * FROM ${TODOS_TABLE} WHERE list_id=? ORDER BY created_at DESC, id`, [
-  listID
-]);
+} = useQuery<TodoRecord>(`SELECT * FROM ${TODOS_TABLE} WHERE list_id=? ORDER BY created_at DESC, id`, [listID]);
 
 const toggleCompletion = async (record: TodoRecord, completed: boolean) => {
   const updatedRecord = { ...record, completed: completed };
diff --git a/demos/vue-supabase-todolist/src/views/layouts/Layout.vue b/demos/vue-supabase-todolist/src/views/layouts/Layout.vue
index ac50befe5..1d21c99dd 100644
--- a/demos/vue-supabase-todolist/src/views/layouts/Layout.vue
+++ b/demos/vue-supabase-todolist/src/views/layouts/Layout.vue
@@ -41,10 +41,10 @@ import { supabase } from '@/plugins/supabase';
 import { computed, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { pageSubtitle } from '@/main';
-import { usePowerSyncStatus } from '@powersync/vue';
+import { useStatus } from '@powersync/vue';
 
 const openDrawer = ref(false);
-const { status: syncStatus } = usePowerSyncStatus();
+const syncStatus = useStatus();
 const router = useRouter();
 const route = useRoute();
 
diff --git a/packages/vue/README.md b/packages/vue/README.md
index 60265fd44..945c9282d 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -23,7 +23,7 @@ app.use(powerSyncPlugin);
 app.mount('#app');
 ```
 
-### Overriding the PowerSync instance
+## Overriding the PowerSync instance
 
 The `createPowerSyncPlugin` function is designed for setting up a PowerSync client that is available across your entire Vue application. It's the recommended approach for package setup. However, there may be situations where an app-wide setup isn't suitable, or you need a different PowerSync client for specific parts of your application.
 
@@ -43,7 +43,7 @@ providePowerSync(db);
 </script>
 ```
 
-### Accessing PowerSync
+## Accessing PowerSync
 
 The provided PowerSync client is available with the `usePowerSync` composable.
 
@@ -65,75 +65,91 @@ powersync.value.getAll('SELECT * from lists').then((l) => list.value = l);
 </template>
 ```
 
-### Queries
+## Query
 
-The `usePowerSyncQuery` composable provides a static view of a given query. You can use refs as parameters instead to automatically refresh the query when they change. The composable exposes reactive variables for the results, the loading state and error state, as well as a refresh callback that can be invoked to rerun the query manually.
+The `useQuery` composable provides a dynamic view of a given query. The data will automatically update when a dependent table is updated.
+
+You can use refs as parameters to refresh the query when they change. The composable exposes reactive variables for the results as well as the loading, fetching, and and error states. Note that `isLoading` indicates that the initial result is being retrieved and `isFetching` indicates the query is fetching data, which could be for the initial load or any time when the query is re-evaluating due to a change in a dependent table.
 
 ```Vue
 // TodoListDisplayQuery.vue
 <script setup>
-import { usePowerSyncQuery } from '@powersync/vue';
+import { usePowerSync, useQuery } from '@powersync/vue';
 import { ref } from 'vue';
 
 const query = ref('SELECT * from lists');
-const { data: list, error, loading, refresh} = usePowerSyncQuery(query);
+const { data, isLoading, isFetching, error} = useQuery(query);
+
+const powersync = usePowerSync();
+const addList = () => {
+    powersync.value.execute('INSERT INTO lists (id, name) VALUES (?, ?)', [Math.round(Math.random() * 1000), 'list name']);
+}
 </script>
 
 <template>
     <input v-model="query" />
     <div v-if="loading">Loading...</div>
-    <div v-else-if="error">{{ error }}</div>
+    <div v-else-if="fetching">Updating results...</div>
+
+    <div v-if="error">{{ error }}</div>
     <ul v-else>
         <li v-for="l in list" :key="l.id">{{ l.name }}</li>
     </ul>
-    <button @click="refresh">Refresh</button>
+    <button @click="addList">Add list</button>
 </template>
 ```
 
-### Watched Queries
-
-The `usePowerSyncWatchedQuery` composable provides a dynamic view of a given query. The data will automatically update when a dependent table is updated.
+### Static query
 
-You can use refs as parameters to refresh the query when they change. The composable exposes reactive variables for the results as well as the loading, fetching, and and error states. Note that `loading` initicates that the initial result is being retrieved and `fetching` indicates the query is fetching data, which could be for the initial load or any time when the query is re-evaluating due to a change in a dependent table.
+The `useQuery` composable can be configured to only execute initially and not every time changes to dependent tables are detected. The query can be manually re-executed by using the returned `refresh` function.
 
 ```Vue
-// TodoListDisplayWatchedQuery.vue
+// TodoListDisplayStaticQuery.vue
 <script setup>
-import { usePowerSync, usePowerSyncWatchedQuery } from '@powersync/vue';
-import { ref } from 'vue';
-
-const query = ref('SELECT * from lists');
-const { data: list, loading, fetching, error} = usePowerSyncWatchedQuery(query);
+import { useQuery } from '@powersync/vue';
 
-const powersync = usePowerSync();
-const addList = () => {
-    powersync.value.execute('INSERT INTO lists (id, name) VALUES (?, ?)', [Math.round(Math.random() * 1000), 'list name']);
-}
+const { data, refresh } = useQuery('SELECT id, name FROM lists', [], {
+  runQueryOnce: true
+});
 </script>
 
 <template>
-    <input v-model="query" />
-    <div v-if="loading">Loading...</div>
-    <div v-else-if="fetching">Updating results...</div>
+  <ul>
+    <li v-for="l in data" :key="l.name">{{ l.name }} + {{ l.id }}</li>
+  </ul>
+  <button @click="refresh">Refresh list</button>
+</template>
 
-    <div v-if="error">{{ error }}</div>
-    <ul v-else>
-        <li v-for="l in list" :key="l.id">{{ l.name }}</li>
-    </ul>
-    <button @click="addList">Add list</button>
+```
+
+### TypeScript Support
+
+A type can be specified for each row returned by `useQuery`. Remember to declare `lang="ts"` when defining a `script setup` block.
+
+```Vue
+<script setup lang="ts">
+import { useQuery } from '@powersync/vue';
+
+const { data } = useQuery<{ id: string, name: string }>('SELECT id, name FROM lists');
+</script>
+
+<template>
+   <ul>
+       <li v-for="l in data" :key="l.id">{{ l.name }}</li>
+   </ul>
 </template>
 ```
 
-### Connection Status
+## Connection Status
 
-The `usePowerSyncStatus` composable provides general connectivity information such as the connection status, whether the initial full sync has completed, when the last sync completed, and whether any data is being uploaded or downloaded.
+The `useStatus` composable provides general connectivity information such as the connection status, whether the initial full sync has completed, when the last sync completed, and whether any data is being uploaded or downloaded.
 
 ```Vue
 // ConnectionStatus.vue
 <script setup>
-import { usePowerSyncStatus } from '@powersync/vue';
+import { useStatus } from '@powersync/vue';
 
-const { status } = usePowerSyncStatus();
+const status = useStatus();
 </script>
 
 <template>
@@ -150,7 +166,7 @@ const { status } = usePowerSyncStatus();
 
 ### Top-level setup block
 
-The `usePowersync`, `usePowerSyncQuery`, `usePowerSyncWatchedQuery`, and `usePowerSyncStatus` composables are meant to be invoked in the top-level setup block. Vue expects certain Composition API functions, like `inject` which this package depends on, to be resolved in the setup context and not inside nested or asynchronous functions. For use cases where you need to do this, you should access the PowerSync `AbstractPowerSyncDatabase` instance directly - like exporting it as singleton after configuring Vue with it in `main.js`.
+The `usePowersync`, `useQuery`, and `useStatus` composables are meant to be invoked in the top-level setup block. Vue expects certain Composition API functions, like `inject` which this package depends on, to be resolved in the setup context and not inside nested or asynchronous functions. For use cases where you need to do this, you should access the PowerSync `AbstractPowerSyncDatabase` instance directly - like exporting it as singleton after configuring Vue with it in `main.js`.
 
 Incorrect Usage Example:
 Using PowerSync composables in a nested function of a component.
diff --git a/packages/vue/src/composables/usePowerSyncQuery.ts b/packages/vue/src/composables/usePowerSyncQuery.ts
index 64591b492..016b94dfe 100644
--- a/packages/vue/src/composables/usePowerSyncQuery.ts
+++ b/packages/vue/src/composables/usePowerSyncQuery.ts
@@ -14,7 +14,7 @@ export type QueryOptions = {
    */
   immediate: boolean;
 };
-export type Result<T> = { data: Ref<T[]>; isLoading: Ref<boolean>; error: Ref<Error>; refresh: () => Promise<void> };
+export type Result<T> = { data: Ref<T[]>; loading: Ref<boolean>; error: Ref<Error>; refresh: () => Promise<void> };
 
 /**
  * @deprecated use {@link useQuery} instead.
@@ -22,17 +22,6 @@ export type Result<T> = { data: Ref<T[]>; isLoading: Ref<boolean>; error: Ref<Er
  * A composable to access a single static query.
  * SQL Statement and query Parameters are watched by default.
  * For a result that updates as the source data changes, use {@link usePowerSyncWatchedQuery} instead.
- * @example
- * <script>
- *  import { usePowerSyncQuery } from '@powersync/vue';
- *
- *  const listID = '123';
- *
- *  const { data: listRecords } = usePowerSyncQuery<{ name: string }>(
- *    `SELECT name FROM ${LISTS_TABLE} WHERE id = ?`,
- *    [listID]
- *  );
- * <script>
  */
 export const usePowerSyncQuery = <T = any>(
   sqlStatement: MaybeRef<string>,
@@ -40,7 +29,7 @@ export const usePowerSyncQuery = <T = any>(
   queryOptions: QueryOptions = { watchParameters: true, immediate: true }
 ): Result<T> => {
   const data = ref([]);
-  const isLoading = ref<boolean>(false);
+  const loading = ref<boolean>(false);
   const error = ref<Error | undefined>(undefined);
 
   const powerSync = usePowerSync();
@@ -53,7 +42,7 @@ export const usePowerSyncQuery = <T = any>(
 
     try {
       error.value = undefined;
-      isLoading.value = true;
+      loading.value = true;
 
       data.value = await powerSync.value.getAll(toValue(sqlStatement), toValue(parameters));
     } catch (e) {
@@ -63,7 +52,7 @@ export const usePowerSyncQuery = <T = any>(
       wrappedError.cause = e;
       error.value = wrappedError;
     } finally {
-      isLoading.value = false;
+      loading.value = false;
     }
   };
 
@@ -75,5 +64,5 @@ export const usePowerSyncQuery = <T = any>(
     fetchData();
   }
 
-  return { data, isLoading, error, refresh: fetchData };
+  return { data, loading, error, refresh: fetchData };
 };
diff --git a/packages/vue/src/composables/usePowerSyncStatus.ts b/packages/vue/src/composables/usePowerSyncStatus.ts
index a9f55b400..6afec3e2a 100644
--- a/packages/vue/src/composables/usePowerSyncStatus.ts
+++ b/packages/vue/src/composables/usePowerSyncStatus.ts
@@ -1,31 +1,32 @@
 import { SyncStatus } from '@powersync/common';
-import { onUnmounted, ref } from 'vue';
+import { ref, watchEffect } from 'vue';
 import { usePowerSync } from './powerSync';
 
 /**
  * @deprecated Use {@link useStatus} instead.
  */
 export const usePowerSyncStatus = () => {
-  const status = ref(new SyncStatus({}));
-
   const powerSync = usePowerSync();
+  const status = ref(new SyncStatus({}));
 
   if (!powerSync) {
-    return;
+    return status;
   }
 
   status.value = powerSync.value.currentStatus || status.value;
 
-  const runListener = () =>
-    powerSync.value.registerListener({
+  watchEffect((onCleanup) => {
+    const listener = powerSync.value.registerListener({
       statusChanged: (newStatus: SyncStatus) => {
         status.value = newStatus;
       }
     });
 
-  onUnmounted(() => {
-    runListener();
+    // Cleanup previous listener when the effect triggers again, or when the component is unmounted
+    onCleanup(() => {
+      listener();
+    });
   });
 
-  return { status };
+  return status;
 };
diff --git a/packages/vue/src/composables/useQuery.ts b/packages/vue/src/composables/useQuery.ts
index dacf99df9..af6be425c 100644
--- a/packages/vue/src/composables/useQuery.ts
+++ b/packages/vue/src/composables/useQuery.ts
@@ -17,10 +17,33 @@ export type WatchedQueryResult<T> = {
    */
   isFetching: Ref<boolean>;
   error: Ref<Error | undefined>;
+  /**
+   * Function used to run the query again.
+   */
+  refresh?: () => Promise<void>;
 };
 
 /**
  * A composable to access the results of a watched query.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useQuery } from '@powersync/vue';
+ *
+ * const { data, isLoading, isFetching, error} = useQuery('SELECT * FROM lists');
+ * </script>
+ *
+ * <template>
+ *    <div v-if="isLoading">Loading...</div>
+ *    <div v-else-if="isFetching">Updating results...</div>
+ *
+ *    <div v-if="error">{{ error }}</div>
+ *    <ul v-else>
+ *        <li v-for="l in data" :key="l.id">{{ l.name }}</li>
+ *    </ul>
+ * </template>
+ * ```
  */
 export const useQuery = <T = any>(
   sqlStatement: MaybeRef<string>,
@@ -60,51 +83,58 @@ export const useQuery = <T = any>(
     error.value = wrappedError;
   };
 
+  const fetchData = async (sql: string, parameters: any[]) => {
+    isFetching.value = true;
+    try {
+      const result = await powerSync.value.getAll<T>(sql, parameters);
+      handleResult(result);
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
   let abortController = new AbortController();
   watchEffect(async (onCleanup) => {
     // Abort any previous watches when the effect triggers again, or when the component is unmounted
     onCleanup(() => abortController.abort());
     abortController = new AbortController();
-    isLoading.value = true;
-    isFetching.value = true;
 
     const sql = toValue(sqlStatement);
     const parameters = toValue(sqlParameters);
 
+    let resolvedTables = [];
     try {
-      const resolvedTables = await powerSync.value.resolveTables(sql, parameters, options);
-
-      // Fetch initial data
-      const result = await powerSync.value.getAll<T>(sql, parameters);
-      handleResult(result);
-
-      if (options.runQueryOnce) {
-        return;
-      }
-
-      powerSync.value.onChangeWithCallback(
-        {
-          onChange: async () => {
-            isFetching.value = true;
-            try {
-              const result = await powerSync.value.getAll<T>(sql, parameters);
-              handleResult(result);
-            } catch (error) {
-              handleError(error);
-            }
-          },
-          onError: handleError
-        },
-        {
-          ...options,
-          signal: abortController.signal,
-          tables: resolvedTables
-        }
-      );
+      resolvedTables = await powerSync.value.resolveTables(sql, parameters, options);
     } catch (error) {
       handleError(error);
     }
+    // Fetch initial data
+    await fetchData(sql, parameters);
+
+    if (options.runQueryOnce) {
+      return;
+    }
+
+    powerSync.value.onChangeWithCallback(
+      {
+        onChange: async () => {
+          await fetchData(sql, parameters);
+        },
+        onError: handleError
+      },
+      {
+        ...options,
+        signal: abortController.signal,
+        tables: resolvedTables
+      }
+    );
   });
 
-  return { data, isLoading, isFetching, error };
+  return {
+    data,
+    isLoading,
+    isFetching,
+    error,
+    refresh: () => fetchData(toValue(sqlStatement), toValue(sqlParameters))
+  };
 };
diff --git a/packages/vue/src/composables/useStatus.ts b/packages/vue/src/composables/useStatus.ts
index 68f5e9014..907eec38a 100644
--- a/packages/vue/src/composables/useStatus.ts
+++ b/packages/vue/src/composables/useStatus.ts
@@ -4,11 +4,12 @@ import { usePowerSyncStatus } from './usePowerSyncStatus';
  * Retrieve the current synchronization status of PowerSync.
  * @returns SyncStatus
  * @example
- * <script>
- *  import { useStatus } from '@powersync/vue';
+ * ```vue
+ * <script setup>
+ * import { useStatus } from '@powersync/vue';
  *
- *  const status = useStatus()
- *  const { connected, dataFlow, lastSyncedAt, hasSynced } = status;
+ * const status = useStatus();
  * <script>
+ * ```
  */
 export const useStatus = usePowerSyncStatus;
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index a2f9aa1a4..7a034c1e7 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -1,4 +1,6 @@
 export * from './composables/powerSync';
-export * from './composables/usePowerSyncQuery';
-export * from './composables/usePowerSyncStatus';
-export * from './composables/usePowerSyncWatchedQuery';
+export { usePowerSyncQuery } from './composables/usePowerSyncQuery';
+export { usePowerSyncStatus } from './composables/usePowerSyncStatus';
+export { usePowerSyncWatchedQuery } from './composables/usePowerSyncWatchedQuery';
+export { useQuery } from './composables/useQuery';
+export { useStatus } from './composables/useStatus';
diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json
index 2661427a1..714b7302e 100644
--- a/packages/vue/tsconfig.json
+++ b/packages/vue/tsconfig.json
@@ -6,10 +6,7 @@
     "rootDir": "src",
     "composite": true,
     "outDir": "./lib",
-    "lib": [
-      "es2022",
-      "DOM"
-    ],
+    "lib": ["es2022", "DOM"],
     "module": "esnext",
     "sourceMap": true,
     "moduleResolution": "node",
@@ -26,7 +23,5 @@
       "path": "../common"
     }
   ],
-  "include": [
-    "../src/**/*"
-  ]
+  "include": ["src/**/*"]
 }

From 6b2c31460f2feaf818afac5671cf833244937f4d Mon Sep 17 00:00:00 2001
From: Christiaan Landman <christiaanlandman@Christiaans-MacBook-Pro-2.local>
Date: Tue, 30 Apr 2024 09:41:59 +0200
Subject: [PATCH 3/7] chore: breaking out of Vue watchEffect on table
 resolution failure

---
 packages/vue/src/composables/useQuery.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vue/src/composables/useQuery.ts b/packages/vue/src/composables/useQuery.ts
index af6be425c..64b66ca25 100644
--- a/packages/vue/src/composables/useQuery.ts
+++ b/packages/vue/src/composables/useQuery.ts
@@ -107,6 +107,7 @@ export const useQuery = <T = any>(
       resolvedTables = await powerSync.value.resolveTables(sql, parameters, options);
     } catch (error) {
       handleError(error);
+      return;
     }
     // Fetch initial data
     await fetchData(sql, parameters);

From 6106d9bd2e0dabdb712587bbe7d9d213eb41c23b Mon Sep 17 00:00:00 2001
From: Christiaan Landman <christiaanlandman@Christiaans-MacBook-Pro-2.local>
Date: Thu, 2 May 2024 13:54:28 +0200
Subject: [PATCH 4/7] chore: finished ported react package tests to vue package

---
 .../src/views/SqlConsole.vue                  |   6 +-
 packages/vue/README.md                        |   1 +
 packages/vue/package.json                     |   1 +
 packages/vue/tests/useQuery.test.ts           | 103 ++++++++++++++----
 packages/vue/tests/useStatus.test.ts          |  18 ++-
 pnpm-lock.yaml                                |   7 ++
 6 files changed, 106 insertions(+), 30 deletions(-)

diff --git a/demos/vue-supabase-todolist/src/views/SqlConsole.vue b/demos/vue-supabase-todolist/src/views/SqlConsole.vue
index c1698909d..a502802f2 100644
--- a/demos/vue-supabase-todolist/src/views/SqlConsole.vue
+++ b/demos/vue-supabase-todolist/src/views/SqlConsole.vue
@@ -5,7 +5,7 @@
       <v-btn @click="executeQuery" class="ml-2" color="primary" height="auto">Execute Query</v-btn>
     </div>
     <div class="mt-9">
-      <LoadingMessage v-if="loading || fetching" :loading :fetching />
+      <LoadingMessage v-if="isLoading || isFetching" :isLoading :isFetching />
       <ErrorMessage v-if="error">{{ error.message }}</ErrorMessage>
       <v-container v-else-if="queryDataGridResult.columns.length > 0" class="mt-4 pa-0" fluid>
         <v-data-table
@@ -21,13 +21,13 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import { usePowerSyncWatchedQuery } from '@powersync/vue';
+import { useQuery } from '@powersync/vue';
 const query = ref('SELECT * FROM lists');
 const inputText = ref(query.value);
 const executeQuery = () => {
   query.value = inputText.value;
 };
-const { data: querySQLResult, loading, fetching, error } = usePowerSyncWatchedQuery(query);
+const { data: querySQLResult, isLoading, isFetching, error } = useQuery(query);
 const queryDataGridResult = computed(() => {
   const firstItem = querySQLResult.value?.[0];
   return {
diff --git a/packages/vue/README.md b/packages/vue/README.md
index 945c9282d..5b1cbefa7 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -127,6 +127,7 @@ const { data, refresh } = useQuery('SELECT id, name FROM lists', [], {
 A type can be specified for each row returned by `useQuery`. Remember to declare `lang="ts"` when defining a `script setup` block.
 
 ```Vue
+// TodoListDisplayStaticQueryTypeScript.vue
 <script setup lang="ts">
 import { useQuery } from '@powersync/vue';
 
diff --git a/packages/vue/package.json b/packages/vue/package.json
index a8c6973d6..0fd462a37 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -34,6 +34,7 @@
     "vue": "*"
   },
   "devDependencies": {
+    "flush-promises": "^1.0.2",
     "jsdom": "^24.0.0",
     "typescript": "^5.1.3",
     "vitest": "^1.5.1",
diff --git a/packages/vue/tests/useQuery.test.ts b/packages/vue/tests/useQuery.test.ts
index c840b2eb9..8924e2b68 100644
--- a/packages/vue/tests/useQuery.test.ts
+++ b/packages/vue/tests/useQuery.test.ts
@@ -1,8 +1,9 @@
-import { vi, describe, expect, it, afterEach } from 'vitest';
+import flushPromises from 'flush-promises';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { ref } from 'vue';
+import * as PowerSync from '../src/composables/powerSync';
 import { useQuery } from '../src/composables/useQuery';
 import { withSetup } from './utils';
-import * as PowerSync from '../src/composables/powerSync';
-import { ref } from 'vue';
 
 const mockPowerSync = {
   currentStatus: { status: 'initial' },
@@ -11,48 +12,108 @@ const mockPowerSync = {
   })),
   resolveTables: vi.fn(),
   watch: vi.fn(),
+  onChangeWithCallback: vi.fn(),
   getAll: vi.fn(() => ['list1', 'list2'])
 };
 
 describe('useQuery', () => {
   afterEach(() => {
-    vi.resetAllMocks();
+    vi.clearAllMocks();
   });
 
   it('should error when PowerSync is not set', () => {
     vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(undefined);
 
-    const [result] = withSetup(() => useQuery('SELECT * from lists'));
+    const [{ data, isLoading, isFetching, error }] = withSetup(() => useQuery('SELECT * from lists'));
 
-    expect(result.error.value).toEqual(Error('PowerSync not configured.'));
-    expect(result.isFetching.value).toEqual(false);
-    expect(result.isLoading.value).toEqual(false);
-    expect(result.data.value).toEqual([]);
+    expect(error.value).toEqual(Error('PowerSync not configured.'));
+    expect(isFetching.value).toEqual(false);
+    expect(isLoading.value).toEqual(false);
+    expect(data.value).toEqual([]);
   });
 
-  it('should handle error in watchEffect', () => {
+  it('should handle error in watchEffect', async () => {
     vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref({}) as any);
 
-    const [result] = withSetup(() => useQuery('SELECT * from lists'));
+    const [{ data, isLoading, isFetching, error }] = withSetup(() => useQuery('SELECT * from lists'));
 
-    expect(result.error.value).toEqual(
+    expect(error.value).toEqual(
       Error('PowerSync failed to fetch data: powerSync.value.resolveTables is not a function')
     );
-    expect(result.isFetching.value).toEqual(false);
-    expect(result.isLoading.value).toEqual(false);
-    expect(result.data.value).toEqual([]);
+    expect(isFetching.value).toEqual(false);
+    expect(isLoading.value).toEqual(false);
+    expect(data.value).toEqual([]);
   });
 
-  it('should run the query once when runQueryOnce flag is set', () => {
+  it('should run the query once when runQueryOnce flag is set', async () => {
     vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref(mockPowerSync) as any);
     const getAllSpy = mockPowerSync.getAll;
 
-    const [result] = withSetup(() => useQuery('SELECT * from lists', [], { runQueryOnce: true }));
+    const [{ data, isLoading, isFetching, error }] = withSetup(() =>
+      useQuery('SELECT * from lists', [], { runQueryOnce: true })
+    );
+    await flushPromises();
 
-    expect(result.data.value).toEqual(undefined);
     expect(getAllSpy).toHaveBeenCalledTimes(1);
-    expect(result.isLoading.value).toEqual(false);
-    expect(result.isFetching.value).toEqual(false);
-    expect(result.error.value).toEqual(undefined);
+    expect(data.value).toEqual(['list1', 'list2']);
+    expect(isLoading.value).toEqual(false);
+    expect(isFetching.value).toEqual(false);
+    expect(error.value).toEqual(undefined);
+  });
+
+  it('should rerun the query when refresh is used', async () => {
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref(mockPowerSync) as any);
+    const getAllSpy = mockPowerSync.getAll;
+
+    const [{ isLoading, isFetching, refresh }] = withSetup(() =>
+      useQuery('SELECT * from lists', [], { runQueryOnce: true })
+    );
+    expect(isFetching.value).toEqual(true);
+    expect(isLoading.value).toEqual(true);
+
+    await flushPromises();
+    expect(isFetching.value).toEqual(false);
+    expect(isLoading.value).toEqual(false);
+
+    expect(getAllSpy).toHaveBeenCalledTimes(1);
+
+    const refreshPromise = refresh?.();
+    expect(isFetching.value).toEqual(true);
+    expect(isLoading.value).toEqual(false); // only used for initial loading
+
+    await refreshPromise;
+    expect(isFetching.value).toEqual(false);
+
+    expect(getAllSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('should set error when error occurs and runQueryOnce flag is set', async () => {
+    const mockPowerSyncError = {
+      ...mockPowerSync,
+      getAll: vi.fn(() => {
+        throw new Error('some error');
+      })
+    };
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref(mockPowerSyncError) as any);
+
+    const [{ error }] = withSetup(() => useQuery('SELECT * from lists', [], { runQueryOnce: true }));
+    await flushPromises();
+
+    expect(error.value).toEqual(Error('PowerSync failed to fetch data: some error'));
+  });
+
+  it('should set error when error occurs', async () => {
+    const mockPowerSyncError = {
+      ...mockPowerSync,
+      getAll: vi.fn(() => {
+        throw new Error('some error');
+      })
+    };
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref(mockPowerSyncError) as any);
+
+    const [{ error }] = withSetup(() => useQuery('SELECT * from lists', []));
+    await flushPromises();
+
+    expect(error.value).toEqual(Error('PowerSync failed to fetch data: some error'));
   });
 });
diff --git a/packages/vue/tests/useStatus.test.ts b/packages/vue/tests/useStatus.test.ts
index 633d9d625..8a0912da6 100644
--- a/packages/vue/tests/useStatus.test.ts
+++ b/packages/vue/tests/useStatus.test.ts
@@ -1,27 +1,33 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, afterEach } from 'vitest';
 import { useStatus } from '../src/composables/useStatus';
 import { withSetup } from './utils';
 import * as PowerSync from '../src/composables/powerSync';
 import { ref } from 'vue';
 
+const cleanupListener = vi.fn();
+
 const mockPowerSync = {
   currentStatus: { connected: true },
-  registerListener: vi.fn()
+  registerListener: () => cleanupListener
 };
 
 describe('useStatus', () => {
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
   it('should load the status of PowerSync', async () => {
     vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref(mockPowerSync) as any);
 
-    const [result] = withSetup(() => useStatus());
-    expect(result!.status.value.connected).toBe(true);
+    const [status] = withSetup(() => useStatus());
+    expect(status.value.connected).toBe(true);
   });
 
-  it('should run the listener on unmount', () => {
+  it('should run the listener cleanup on unmount', () => {
     vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref(mockPowerSync as any));
 
     const [, app] = withSetup(() => useStatus());
-    const listenerUnsubscribe = mockPowerSync.registerListener;
+    const listenerUnsubscribe = cleanupListener;
 
     app.unmount();
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 30ef6a2b7..47bd70714 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1278,6 +1278,9 @@ importers:
         specifier: workspace:*
         version: link:../common
     devDependencies:
+      flush-promises:
+        specifier: ^1.0.2
+        version: 1.0.2
       jsdom:
         specifier: ^24.0.0
         version: 24.0.0
@@ -22782,6 +22785,10 @@ packages:
     resolution: {integrity: sha512-HVzoK3r6Vsg+lKvlIZzaWNBVai+FXTX1wdYhz/wVlH13tb/gOdLXmlTqy6odmTBhT5UoWUbq0k8263Qhr9d88w==}
     engines: {node: '>=0.4.0'}
 
+  /flush-promises@1.0.2:
+    resolution: {integrity: sha512-G0sYfLQERwKz4+4iOZYQEZVpOt9zQrlItIxQAAYAWpfby3gbHrx0osCHz5RLl/XoXevXk0xoN4hDFky/VV9TrA==}
+    dev: true
+
   /follow-redirects@1.15.5:
     resolution: {integrity: sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==}
     engines: {node: '>=4.0'}

From 109dd9234bcfccfde0e6afe3957c837e727aa6f0 Mon Sep 17 00:00:00 2001
From: Christiaan Landman <christiaanlandman@Christiaans-MacBook-Pro-2.local>
Date: Thu, 2 May 2024 14:58:35 +0200
Subject: [PATCH 5/7] update compilable to Vue composable signature

---
 packages/vue/src/composables/useQuery.ts | 39 ++++++++++++++++--------
 packages/vue/tests/useQuery.test.ts      | 24 +++++++++++++++
 2 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/packages/vue/src/composables/useQuery.ts b/packages/vue/src/composables/useQuery.ts
index 64b66ca25..a126cbe09 100644
--- a/packages/vue/src/composables/useQuery.ts
+++ b/packages/vue/src/composables/useQuery.ts
@@ -1,4 +1,4 @@
-import { type SQLWatchOptions } from '@powersync/common';
+import { type SQLWatchOptions, parseQuery, type CompilableQuery, ParsedQuery } from '@powersync/common';
 import { type MaybeRef, type Ref, ref, toValue, watchEffect } from 'vue';
 import { usePowerSync } from './powerSync';
 
@@ -46,7 +46,7 @@ export type WatchedQueryResult<T> = {
  * ```
  */
 export const useQuery = <T = any>(
-  sqlStatement: MaybeRef<string>,
+  query: MaybeRef<string | CompilableQuery<T>>,
   sqlParameters: MaybeRef<any[]> = [],
   options: AdditionalOptions = {}
 ): WatchedQueryResult<T> => {
@@ -55,6 +55,9 @@ export const useQuery = <T = any>(
   const isLoading = ref(true);
   const isFetching = ref(true);
 
+  // Only defined when the query and parameters are successfully parsed and tables are resolved
+  let fetchData: () => Promise<void> | undefined;
+
   const powerSync = usePowerSync();
 
   const finishLoading = () => {
@@ -75,6 +78,7 @@ export const useQuery = <T = any>(
   };
 
   const handleError = (e: Error) => {
+    fetchData = undefined;
     finishLoading();
     data.value = [];
 
@@ -83,13 +87,14 @@ export const useQuery = <T = any>(
     error.value = wrappedError;
   };
 
-  const fetchData = async (sql: string, parameters: any[]) => {
+  const _fetchData = async (sql: string, parameters: any[]) => {
     isFetching.value = true;
     try {
       const result = await powerSync.value.getAll<T>(sql, parameters);
       handleResult(result);
-    } catch (error) {
-      handleError(error);
+    } catch (e) {
+      console.error('Failed to fetch data:', e);
+      handleError(e);
     }
   };
 
@@ -99,18 +104,28 @@ export const useQuery = <T = any>(
     onCleanup(() => abortController.abort());
     abortController = new AbortController();
 
-    const sql = toValue(sqlStatement);
-    const parameters = toValue(sqlParameters);
+    let parsedQuery: ParsedQuery;
+    try {
+      parsedQuery = parseQuery(toValue(query), toValue(sqlParameters));
+    } catch (e) {
+      console.error('Failed to parse query:', e);
+      handleError(e);
+      return;
+    }
+
+    const { sqlStatement: sql, parameters } = parsedQuery;
 
     let resolvedTables = [];
     try {
       resolvedTables = await powerSync.value.resolveTables(sql, parameters, options);
-    } catch (error) {
-      handleError(error);
+    } catch (e) {
+      console.error('Failed to fetch tables:', e);
+      handleError(e);
       return;
     }
     // Fetch initial data
-    await fetchData(sql, parameters);
+    fetchData = () => _fetchData(sql, parameters);
+    await fetchData();
 
     if (options.runQueryOnce) {
       return;
@@ -119,7 +134,7 @@ export const useQuery = <T = any>(
     powerSync.value.onChangeWithCallback(
       {
         onChange: async () => {
-          await fetchData(sql, parameters);
+          await fetchData();
         },
         onError: handleError
       },
@@ -136,6 +151,6 @@ export const useQuery = <T = any>(
     isLoading,
     isFetching,
     error,
-    refresh: () => fetchData(toValue(sqlStatement), toValue(sqlParameters))
+    refresh: () => fetchData?.()
   };
 };
diff --git a/packages/vue/tests/useQuery.test.ts b/packages/vue/tests/useQuery.test.ts
index 8924e2b68..a9adce93b 100644
--- a/packages/vue/tests/useQuery.test.ts
+++ b/packages/vue/tests/useQuery.test.ts
@@ -116,4 +116,28 @@ describe('useQuery', () => {
 
     expect(error.value).toEqual(Error('PowerSync failed to fetch data: some error'));
   });
+
+  it('should accept compilable queries', async () => {
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref(mockPowerSync) as any);
+
+    const [{ isLoading }] = withSetup(() =>
+      useQuery({ execute: () => [] as any, compile: () => ({ sql: 'SELECT * from lists', parameters: [] }) })
+    );
+
+    expect(isLoading.value).toEqual(true);
+    await flushPromises();
+    expect(isLoading.value).toEqual(false);
+  });
+
+  it('should set error for compilable query on useQuery parameters', async () => {
+    vi.spyOn(PowerSync, 'usePowerSync').mockReturnValue(ref(mockPowerSync) as any);
+
+    const [{ isLoading, error }] = withSetup(() =>
+      useQuery({ execute: () => [] as any, compile: () => ({ sql: 'SELECT * from lists', parameters: [] }) }, ['x'])
+    );
+
+    expect(error.value).toEqual(
+      Error('PowerSync failed to fetch data: You cannot pass parameters to a compiled query.')
+    );
+  });
 });

From 30b92930c0b79929537c5c3d4c11ecfd195aefa3 Mon Sep 17 00:00:00 2001
From: Christiaan Landman <christiaanlandman@Christiaans-MacBook-Pro-2.local>
Date: Fri, 3 May 2024 12:28:31 +0200
Subject: [PATCH 6/7] chore readme and changeset entries

---
 .changeset/big-mugs-admire.md   |  5 +++++
 .changeset/seven-sheep-smell.md |  5 +++++
 packages/vue/README.md          | 16 ++++++++++++++++
 3 files changed, 26 insertions(+)
 create mode 100644 .changeset/big-mugs-admire.md
 create mode 100644 .changeset/seven-sheep-smell.md

diff --git a/.changeset/big-mugs-admire.md b/.changeset/big-mugs-admire.md
new file mode 100644
index 000000000..d5fc87108
--- /dev/null
+++ b/.changeset/big-mugs-admire.md
@@ -0,0 +1,5 @@
+---
+"@powersync/vue": minor
+---
+
+Introduced `useQuery` and `useStatus` composables which include compilable query support. Deprecated `usePowerSyncQuery`, `usePowerSyncWatchedQuery`, and `usePowerSyncStatus`.
diff --git a/.changeset/seven-sheep-smell.md b/.changeset/seven-sheep-smell.md
new file mode 100644
index 000000000..170ec5042
--- /dev/null
+++ b/.changeset/seven-sheep-smell.md
@@ -0,0 +1,5 @@
+---
+"vue-supabase-todolist": patch
+---
+
+Using new Vue `useQuery` and `useStatus` composables instead of deprecated ones.
diff --git a/packages/vue/README.md b/packages/vue/README.md
index 5b1cbefa7..a79241bed 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -141,6 +141,22 @@ const { data } = useQuery<{ id: string, name: string }>('SELECT id, name FROM li
 </template>
 ```
 
+You are also able to use a compilable query (e.g. [Kysely queries](https://github.com/powersync-ja/powersync-js/tree/main/packages/kysely-driver)) as a query argument in place of a SQL statement string.
+
+```Vue
+// TodolistDisplayQueryKysely.vue
+<script setup lang="ts">
+import { usePowerSync, useQuery } from '@powersync/vue';
+import { wrapPowerSyncWithKysely } from '@powersync/kysely-driver';
+import { Database } from '@/library/powersync/AppSchema';
+
+const powerSync = usePowerSync();
+const db = wrapPowerSyncWithKysely<Database>(powerSync.value);
+
+const { data } = useQuery(db.selectFrom('lists').selectAll().where('name', 'like', '%Shopping%'));
+</script>
+```
+
 ## Connection Status
 
 The `useStatus` composable provides general connectivity information such as the connection status, whether the initial full sync has completed, when the last sync completed, and whether any data is being uploaded or downloaded.

From 5d600b25ad06926196f33b1f97c005149459dea6 Mon Sep 17 00:00:00 2001
From: Christiaan Landman <christiaanlandman@Christiaans-MacBook-Pro-2.local>
Date: Mon, 6 May 2024 10:56:16 +0200
Subject: [PATCH 7/7] chore: moved abort controller instantiation to inside
 watchEffect

---
 packages/vue/README.md                   | 10 +++++-----
 packages/vue/src/composables/useQuery.ts |  3 +--
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/vue/README.md b/packages/vue/README.md
index a79241bed..cd279ddc0 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -78,7 +78,7 @@ import { usePowerSync, useQuery } from '@powersync/vue';
 import { ref } from 'vue';
 
 const query = ref('SELECT * from lists');
-const { data, isLoading, isFetching, error} = useQuery(query);
+const { data:list, isLoading, isFetching, error} = useQuery(query);
 
 const powersync = usePowerSync();
 const addList = () => {
@@ -88,8 +88,8 @@ const addList = () => {
 
 <template>
     <input v-model="query" />
-    <div v-if="loading">Loading...</div>
-    <div v-else-if="fetching">Updating results...</div>
+    <div v-if="isLoading">Loading...</div>
+    <div v-else-if="isFetching">Updating results...</div>
 
     <div v-if="error">{{ error }}</div>
     <ul v-else>
@@ -108,14 +108,14 @@ The `useQuery` composable can be configured to only execute initially and not ev
 <script setup>
 import { useQuery } from '@powersync/vue';
 
-const { data, refresh } = useQuery('SELECT id, name FROM lists', [], {
+const { data: list, refresh } = useQuery('SELECT id, name FROM lists', [], {
   runQueryOnce: true
 });
 </script>
 
 <template>
   <ul>
-    <li v-for="l in data" :key="l.name">{{ l.name }} + {{ l.id }}</li>
+    <li v-for="l in list" :key="l.name">{{ l.name }} + {{ l.id }}</li>
   </ul>
   <button @click="refresh">Refresh list</button>
 </template>
diff --git a/packages/vue/src/composables/useQuery.ts b/packages/vue/src/composables/useQuery.ts
index a126cbe09..707b4ffc2 100644
--- a/packages/vue/src/composables/useQuery.ts
+++ b/packages/vue/src/composables/useQuery.ts
@@ -98,11 +98,10 @@ export const useQuery = <T = any>(
     }
   };
 
-  let abortController = new AbortController();
   watchEffect(async (onCleanup) => {
+    const abortController = new AbortController();
     // Abort any previous watches when the effect triggers again, or when the component is unmounted
     onCleanup(() => abortController.abort());
-    abortController = new AbortController();
 
     let parsedQuery: ParsedQuery;
     try {