@instantdb/vue 0.0.0

package/dist/useInfiniteQuery.d.ts

@@ -0,0 +1,25 @@
+import type { InstaQLResponse, ValidQuery, InstantCoreDatabase, InstantSchemaDef, InstaQLOptions } from '@instantdb/core';
+import type { ShallowRef, Ref, MaybeRefOrGetter } from 'vue';
+export type InfiniteQueryResult<Schema extends InstantSchemaDef<any, any, any>, Q extends ValidQuery<Q, Schema>, UseDates extends boolean> = {
+    isLoading: Ref<boolean>;
+    data: ShallowRef<InstaQLResponse<Schema, Q, UseDates> | undefined>;
+    error: ShallowRef<{
+        message: string;
+    } | undefined>;
+    canLoadNextPage: Ref<boolean>;
+    loadNextPage: () => void;
+};
+/**
+ * Subscribe to a query and incrementally load more items.
+ *
+ * Only one top-level namespace in the query is allowed. Changing the query or
+ * options while the subscription is active resets and starts over.
+ *
+ * @example
+ *  const { data, isLoading, error, loadNextPage, canLoadNextPage } =
+ *    db.useInfiniteQuery({
+ *      posts: { $: { limit: 20, order: { createdAt: 'desc' } } },
+ *    });
+ */
+export declare function useInfiniteQuery<Schema extends InstantSchemaDef<any, any, any>, Q extends ValidQuery<Q, Schema>, UseDates extends boolean>(core: InstantCoreDatabase<Schema, UseDates>, query: MaybeRefOrGetter<Q | null>, opts?: MaybeRefOrGetter<InstaQLOptions | undefined>): InfiniteQueryResult<Schema, Q, UseDates>;
+//# sourceMappingURL=useInfiniteQuery.d.ts.map

package/dist/useInfiniteQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInfiniteQuery.d.ts","sourceRoot":"","sources":["../src/useInfiniteQuery.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,eAAe,EACf,UAAU,EAEV,mBAAmB,EACnB,gBAAgB,EAChB,cAAc,EACf,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAI7D,MAAM,MAAM,mBAAmB,CAC7B,MAAM,SAAS,gBAAgB,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EAC9C,CAAC,SAAS,UAAU,CAAC,CAAC,EAAE,MAAM,CAAC,EAC/B,QAAQ,SAAS,OAAO,IACtB;IACF,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACxB,IAAI,EAAE,UAAU,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAC,CAAC;IACnE,KAAK,EAAE,UAAU,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC,CAAC;IACnD,eAAe,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IAC9B,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,SAAS,gBAAgB,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EAC9C,CAAC,SAAS,UAAU,CAAC,CAAC,EAAE,MAAM,CAAC,EAC/B,QAAQ,SAAS,OAAO,EAExB,IAAI,EAAE,mBAAmB,CAAC,MAAM,EAAE,QAAQ,CAAC,EAC3C,KAAK,EAAE,gBAAgB,CAAC,CAAC,GAAG,IAAI,CAAC,EACjC,IAAI,CAAC,EAAE,gBAAgB,CAAC,cAAc,GAAG,SAAS,CAAC,GAClD,mBAAmB,CAAC,MAAM,EAAE,CAAC,EAAE,QAAQ,CAAC,CA6D1C"}

package/dist/useInfiniteQuery.js

@@ -0,0 +1,57 @@
+import { getInfiniteQueryInitialSnapshot, weakHash } from "@instantdb/core";
+import { toValue, ref, shallowRef, watch } from "vue";
+import { tryOnScopeDispose } from "./utils.js";
+function useInfiniteQuery(core, query, opts) {
+  const initialQuery = toValue(query);
+  const snapshot = initialQuery ? getInfiniteQueryInitialSnapshot(core, initialQuery, toValue(opts)) : { data: void 0, error: void 0, canLoadNextPage: false };
+  const isLoading = ref(!snapshot.data && !snapshot.error);
+  const data = shallowRef(
+    snapshot.data
+  );
+  const error = shallowRef(snapshot.error);
+  const canLoadNextPage = ref(snapshot.canLoadNextPage);
+  let subRef = null;
+  const stop = watch(
+    [() => weakHash(toValue(query)), () => weakHash(toValue(opts))],
+    (_, __, onCleanup) => {
+      subRef = null;
+      error.value = void 0;
+      data.value = void 0;
+      isLoading.value = true;
+      canLoadNextPage.value = false;
+      const q = toValue(query);
+      if (!q) return;
+      const sub = core.subscribeInfiniteQuery(
+        q,
+        (resp) => {
+          error.value = resp.error;
+          data.value = resp.data;
+          isLoading.value = false;
+          canLoadNextPage.value = resp.canLoadNextPage;
+        },
+        toValue(opts)
+      );
+      subRef = sub;
+      onCleanup(() => {
+        sub.unsubscribe();
+        if (subRef === sub) subRef = null;
+      });
+    },
+    { immediate: true }
+  );
+  const loadNextPage = () => {
+    subRef == null ? void 0 : subRef.loadNextPage();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isLoading,
+    data,
+    error,
+    canLoadNextPage,
+    loadNextPage
+  };
+}
+export {
+  useInfiniteQuery
+};
+//# sourceMappingURL=useInfiniteQuery.js.map

package/dist/useInfiniteQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInfiniteQuery.js","sources":["../src/useInfiniteQuery.ts"],"sourcesContent":["import { weakHash, getInfiniteQueryInitialSnapshot } from '@instantdb/core';\nimport type {\n  InstaQLResponse,\n  ValidQuery,\n  InfiniteQuerySubscription,\n  InstantCoreDatabase,\n  InstantSchemaDef,\n  InstaQLOptions,\n} from '@instantdb/core';\nimport { shallowRef, ref, watch, toValue } from 'vue';\nimport type { ShallowRef, Ref, MaybeRefOrGetter } from 'vue';\n\nimport { tryOnScopeDispose } from './utils.js';\n\nexport type InfiniteQueryResult<\n  Schema extends InstantSchemaDef<any, any, any>,\n  Q extends ValidQuery<Q, Schema>,\n  UseDates extends boolean,\n> = {\n  isLoading: Ref<boolean>;\n  data: ShallowRef<InstaQLResponse<Schema, Q, UseDates> | undefined>;\n  error: ShallowRef<{ message: string } | undefined>;\n  canLoadNextPage: Ref<boolean>;\n  loadNextPage: () => void;\n};\n\n/**\n * Subscribe to a query and incrementally load more items.\n *\n * Only one top-level namespace in the query is allowed. Changing the query or\n * options while the subscription is active resets and starts over.\n *\n * @example\n *  const { data, isLoading, error, loadNextPage, canLoadNextPage } =\n *    db.useInfiniteQuery({\n *      posts: { $: { limit: 20, order: { createdAt: 'desc' } } },\n *    });\n */\nexport function useInfiniteQuery<\n  Schema extends InstantSchemaDef<any, any, any>,\n  Q extends ValidQuery<Q, Schema>,\n  UseDates extends boolean,\n>(\n  core: InstantCoreDatabase<Schema, UseDates>,\n  query: MaybeRefOrGetter<Q | null>,\n  opts?: MaybeRefOrGetter<InstaQLOptions | undefined>,\n): InfiniteQueryResult<Schema, Q, UseDates> {\n  const initialQuery = toValue(query);\n  const snapshot = initialQuery\n    ? getInfiniteQueryInitialSnapshot(core, initialQuery, toValue(opts))\n    : { data: undefined, error: undefined, canLoadNextPage: false };\n\n  const isLoading = ref(!snapshot.data && !snapshot.error);\n  const data = shallowRef<InstaQLResponse<Schema, Q, UseDates> | undefined>(\n    snapshot.data as any,\n  );\n  const error = shallowRef<{ message: string } | undefined>(snapshot.error);\n  const canLoadNextPage = ref(snapshot.canLoadNextPage);\n\n  let subRef: InfiniteQuerySubscription | null = null;\n\n  const stop = watch(\n    [() => weakHash(toValue(query)), () => weakHash(toValue(opts))],\n    (_, __, onCleanup) => {\n      subRef = null;\n      error.value = undefined;\n      data.value = undefined;\n      isLoading.value = true;\n      canLoadNextPage.value = false;\n\n      const q = toValue(query);\n      if (!q) return;\n\n      const sub = core.subscribeInfiniteQuery(\n        q,\n        (resp: any) => {\n          error.value = resp.error;\n          data.value = resp.data;\n          isLoading.value = false;\n          canLoadNextPage.value = resp.canLoadNextPage;\n        },\n        toValue(opts),\n      );\n\n      subRef = sub;\n\n      onCleanup(() => {\n        sub.unsubscribe();\n        if (subRef === sub) subRef = null;\n      });\n    },\n    { immediate: true },\n  );\n\n  const loadNextPage = () => {\n    subRef?.loadNextPage();\n  };\n\n  tryOnScopeDispose(stop);\n\n  return {\n    isLoading,\n    data,\n    error,\n    canLoadNextPage,\n    loadNextPage,\n  } as InfiniteQueryResult<Schema, Q, UseDates>;\n}\n"],"names":[],"mappings":";;;AAsCgB,SAAA,iBAKd,MACA,OACA,MAC0C;AACpC,QAAA,eAAe,QAAQ,KAAK;AAClC,QAAM,WAAW,eACb,gCAAgC,MAAM,cAAc,QAAQ,IAAI,CAAC,IACjE,EAAE,MAAM,QAAW,OAAO,QAAW,iBAAiB,MAAM;AAEhE,QAAM,YAAY,IAAI,CAAC,SAAS,QAAQ,CAAC,SAAS,KAAK;AACvD,QAAM,OAAO;AAAA,IACX,SAAS;AAAA,EACX;AACM,QAAA,QAAQ,WAA4C,SAAS,KAAK;AAClE,QAAA,kBAAkB,IAAI,SAAS,eAAe;AAEpD,MAAI,SAA2C;AAE/C,QAAM,OAAO;AAAA,IACX,CAAC,MAAM,SAAS,QAAQ,KAAK,CAAC,GAAG,MAAM,SAAS,QAAQ,IAAI,CAAC,CAAC;AAAA,IAC9D,CAAC,GAAG,IAAI,cAAc;AACX,eAAA;AACT,YAAM,QAAQ;AACd,WAAK,QAAQ;AACb,gBAAU,QAAQ;AAClB,sBAAgB,QAAQ;AAElB,YAAA,IAAI,QAAQ,KAAK;AACvB,UAAI,CAAC,EAAG;AAER,YAAM,MAAM,KAAK;AAAA,QACf;AAAA,QACA,CAAC,SAAc;AACb,gBAAM,QAAQ,KAAK;AACnB,eAAK,QAAQ,KAAK;AAClB,oBAAU,QAAQ;AAClB,0BAAgB,QAAQ,KAAK;AAAA,QAC/B;AAAA,QACA,QAAQ,IAAI;AAAA,MACd;AAES,eAAA;AAET,gBAAU,MAAM;AACd,YAAI,YAAY;AACZ,YAAA,WAAW,IAAc,UAAA;AAAA,MAAA,CAC9B;AAAA,IACH;AAAA,IACA,EAAE,WAAW,KAAK;AAAA,EACpB;AAEA,QAAM,eAAe,MAAM;AACzB,qCAAQ;AAAA,EACV;AAEA,oBAAkB,IAAI;AAEf,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;"}

package/dist/utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Run `fn` when the current effect scope is disposed. Returns true if a scope
+ * was active (and the callback was registered), false otherwise. Lets hooks
+ * work both inside component setup and inside a manual `effectScope()` without
+ * blowing up when called outside any scope.
+ */
+export declare function tryOnScopeDispose(fn: () => void): boolean;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,OAAO,CAMzD"}

package/dist/utils.js

@@ -0,0 +1,12 @@
+import { getCurrentScope, onScopeDispose } from "vue";
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+export {
+  tryOnScopeDispose
+};
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { onScopeDispose, getCurrentScope } from 'vue';\n\n/**\n * Run `fn` when the current effect scope is disposed. Returns true if a scope\n * was active (and the callback was registered), false otherwise. Lets hooks\n * work both inside component setup and inside a manual `effectScope()` without\n * blowing up when called outside any scope.\n */\nexport function tryOnScopeDispose(fn: () => void): boolean {\n  if (getCurrentScope()) {\n    onScopeDispose(fn);\n    return true;\n  }\n  return false;\n}\n"],"names":[],"mappings":";AAQO,SAAS,kBAAkB,IAAyB;AACzD,MAAI,mBAAmB;AACrB,mBAAe,EAAE;AACV,WAAA;AAAA,EAAA;AAEF,SAAA;AACT;"}

package/dist/version.d.ts

@@ -0,0 +1,3 @@
+import { version } from '@instantdb/version';
+export default version;
+//# sourceMappingURL=version.d.ts.map

package/dist/version.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,eAAe,OAAO,CAAC"}

package/dist/version.js

@@ -0,0 +1,6 @@
+import { version } from "@instantdb/version";
+import { version as version2 } from "@instantdb/version";
+export {
+  version2 as default
+};
+//# sourceMappingURL=version.js.map

package/dist/version.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@instantdb/vue",
+  "type": "module",
+  "version": "0.0.0",
+  "description": "Vue client for InstantDB",
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/instantdb/instant/tree/main/client/packages/vue",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/instantdb/instant.git",
+    "directory": "client/packages/vue"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "dependencies": {
+    "@instantdb/core": "0.0.0",
+    "@instantdb/version": "0.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.0",
+    "@vue/test-utils": "^2.4.0",
+    "jsdom": "^25.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.2.0",
+    "vitest": "^2.0.0",
+    "vue": "^3.5.0",
+    "vue-tsc": "^2.2.0"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "check": "vue-tsc --noEmit",
+    "build:types": "vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "build:js": "vite build",
+    "build": "rm -rf dist && pnpm build:types && pnpm build:js",
+    "dev": "vite build --watch",
+    "publish-package": "pnpm pack && npm publish *.tgz --access public"
+  }
+}