@tanstack/react-db 0.0.1

package/README.md

@@ -0,0 +1,3 @@
+# @tanstack/react-db
+
+React hooks for TanStack DB. See [TanStack/db](https://github.com/TanStack/db) for more details.

package/dist/cjs/index.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const useOptimisticMutation = require("./useOptimisticMutation.cjs");
+const useLiveQuery = require("./useLiveQuery.cjs");
+const db = require("@tanstack/db");
+exports.useOptimisticMutation = useOptimisticMutation.useOptimisticMutation;
+exports.useLiveQuery = useLiveQuery.useLiveQuery;
+Object.defineProperty(exports, "Collection", {
+  enumerable: true,
+  get: () => db.Collection
+});
+Object.defineProperty(exports, "createTransaction", {
+  enumerable: true,
+  get: () => db.createTransaction
+});
+Object.keys(db).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: () => db[k]
+  });
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

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

package/dist/cjs/index.d.cts

@@ -0,0 +1,5 @@
+export * from './useOptimisticMutation.cjs';
+export * from './useLiveQuery.cjs';
+export * from '@tanstack/db';
+export { Collection } from '@tanstack/db';
+export { createTransaction } from '@tanstack/db';

package/dist/cjs/useLiveQuery.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const reactStore = require("@tanstack/react-store");
+const db = require("@tanstack/db");
+function useLiveQuery(queryFn, deps = []) {
+  const [restart, forceRestart] = react.useState(0);
+  const compiledQuery = react.useMemo(() => {
+    const query = queryFn(db.queryBuilder());
+    const compiled = db.compileQuery(query);
+    compiled.start();
+    return compiled;
+  }, [...deps, restart]);
+  const state = reactStore.useStore(compiledQuery.results.derivedState);
+  const data = reactStore.useStore(compiledQuery.results.derivedArray);
+  react.useEffect(() => {
+    if (compiledQuery.state === `stopped`) {
+      forceRestart((count) => {
+        return count += 1;
+      });
+    }
+    return () => {
+      compiledQuery.stop();
+    };
+  }, [compiledQuery]);
+  return {
+    state,
+    data
+  };
+}
+exports.useLiveQuery = useLiveQuery;
+//# sourceMappingURL=useLiveQuery.cjs.map

package/dist/cjs/useLiveQuery.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveQuery.cjs","sources":["../../src/useLiveQuery.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\"\nimport { useStore } from \"@tanstack/react-store\"\nimport { compileQuery, queryBuilder } from \"@tanstack/db\"\nimport type {\n  Context,\n  InitialQueryBuilder,\n  QueryBuilder,\n  ResultsFromContext,\n  Schema,\n} from \"@tanstack/db\"\n\nexport interface UseLiveQueryReturn<T extends object> {\n  state: Map<string, T>\n  data: Array<T>\n}\n\nexport function useLiveQuery<\n  TResultContext extends Context<Schema> = Context<Schema>,\n>(\n  queryFn: (\n    q: InitialQueryBuilder<Context<Schema>>\n  ) => QueryBuilder<TResultContext>,\n  deps: Array<unknown> = []\n): UseLiveQueryReturn<ResultsFromContext<TResultContext>> {\n  const [restart, forceRestart] = useState(0)\n\n  const compiledQuery = useMemo(() => {\n    const query = queryFn(queryBuilder())\n    const compiled = compileQuery(query)\n    compiled.start()\n    return compiled\n  }, [...deps, restart])\n\n  const state = useStore(compiledQuery.results.derivedState)\n  const data = useStore(compiledQuery.results.derivedArray)\n\n  // Clean up on unmount\n  useEffect(() => {\n    if (compiledQuery.state === `stopped`) {\n      forceRestart((count) => {\n        return (count += 1)\n      })\n    }\n\n    return () => {\n      compiledQuery.stop()\n    }\n  }, [compiledQuery])\n\n  return {\n    state,\n    data,\n  }\n}\n"],"names":["useState","useMemo","queryBuilder","compileQuery","useStore","useEffect"],"mappings":";;;;;AAgBO,SAAS,aAGd,SAGA,OAAuB,IACiC;AACxD,QAAM,CAAC,SAAS,YAAY,IAAIA,MAAAA,SAAS,CAAC;AAEpC,QAAA,gBAAgBC,MAAAA,QAAQ,MAAM;AAC5B,UAAA,QAAQ,QAAQC,GAAAA,cAAc;AAC9B,UAAA,WAAWC,gBAAa,KAAK;AACnC,aAAS,MAAM;AACR,WAAA;AAAA,EAAA,GACN,CAAC,GAAG,MAAM,OAAO,CAAC;AAErB,QAAM,QAAQC,WAAA,SAAS,cAAc,QAAQ,YAAY;AACzD,QAAM,OAAOA,WAAA,SAAS,cAAc,QAAQ,YAAY;AAGxDC,QAAAA,UAAU,MAAM;AACV,QAAA,cAAc,UAAU,WAAW;AACrC,mBAAa,CAAC,UAAU;AACtB,eAAQ,SAAS;AAAA,MAAA,CAClB;AAAA,IAAA;AAGH,WAAO,MAAM;AACX,oBAAc,KAAK;AAAA,IACrB;AAAA,EAAA,GACC,CAAC,aAAa,CAAC;AAEX,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;;"}

package/dist/cjs/useLiveQuery.d.cts

@@ -0,0 +1,6 @@
+import { Context, InitialQueryBuilder, QueryBuilder, ResultsFromContext, Schema } from '@tanstack/db';
+export interface UseLiveQueryReturn<T extends object> {
+    state: Map<string, T>;
+    data: Array<T>;
+}
+export declare function useLiveQuery<TResultContext extends Context<Schema> = Context<Schema>>(queryFn: (q: InitialQueryBuilder<Context<Schema>>) => QueryBuilder<TResultContext>, deps?: Array<unknown>): UseLiveQueryReturn<ResultsFromContext<TResultContext>>;

package/dist/cjs/useOptimisticMutation.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const db = require("@tanstack/db");
+function useOptimisticMutation(config) {
+  return {
+    mutate: (callback) => {
+      const transaction = db.createTransaction(config);
+      transaction.mutate(callback);
+      return transaction;
+    },
+    createTransaction: () => {
+      return db.createTransaction({ ...config, autoCommit: false });
+    }
+  };
+}
+exports.useOptimisticMutation = useOptimisticMutation;
+//# sourceMappingURL=useOptimisticMutation.cjs.map

package/dist/cjs/useOptimisticMutation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOptimisticMutation.cjs","sources":["../../src/useOptimisticMutation.ts"],"sourcesContent":["import { createTransaction } from \"@tanstack/db\"\nimport type { Transaction, TransactionConfig } from \"@tanstack/db\"\n\nexport function useOptimisticMutation(config: TransactionConfig) {\n  return {\n    mutate: (callback: () => void): Transaction => {\n      const transaction = createTransaction(config)\n      transaction.mutate(callback)\n      return transaction\n    },\n    createTransaction: (): Transaction => {\n      return createTransaction({ ...config, autoCommit: false })\n    },\n  }\n}\n"],"names":["createTransaction"],"mappings":";;;AAGO,SAAS,sBAAsB,QAA2B;AACxD,SAAA;AAAA,IACL,QAAQ,CAAC,aAAsC;AACvC,YAAA,cAAcA,qBAAkB,MAAM;AAC5C,kBAAY,OAAO,QAAQ;AACpB,aAAA;AAAA,IACT;AAAA,IACA,mBAAmB,MAAmB;AACpC,aAAOA,qBAAkB,EAAE,GAAG,QAAQ,YAAY,OAAO;AAAA,IAAA;AAAA,EAE7D;AACF;;"}

package/dist/cjs/useOptimisticMutation.d.cts

@@ -0,0 +1,5 @@
+import { Transaction, TransactionConfig } from '@tanstack/db';
+export declare function useOptimisticMutation(config: TransactionConfig): {
+    mutate: (callback: () => void) => Transaction;
+    createTransaction: () => Transaction;
+};

package/dist/esm/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useOptimisticMutation.js';
+export * from './useLiveQuery.js';
+export * from '@tanstack/db';
+export { Collection } from '@tanstack/db';
+export { createTransaction } from '@tanstack/db';

package/dist/esm/index.js

@@ -0,0 +1,11 @@
+import { useOptimisticMutation } from "./useOptimisticMutation.js";
+import { useLiveQuery } from "./useLiveQuery.js";
+export * from "@tanstack/db";
+import { Collection, createTransaction } from "@tanstack/db";
+export {
+  Collection,
+  createTransaction,
+  useLiveQuery,
+  useOptimisticMutation
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

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

package/dist/esm/useLiveQuery.d.ts

@@ -0,0 +1,6 @@
+import { Context, InitialQueryBuilder, QueryBuilder, ResultsFromContext, Schema } from '@tanstack/db';
+export interface UseLiveQueryReturn<T extends object> {
+    state: Map<string, T>;
+    data: Array<T>;
+}
+export declare function useLiveQuery<TResultContext extends Context<Schema> = Context<Schema>>(queryFn: (q: InitialQueryBuilder<Context<Schema>>) => QueryBuilder<TResultContext>, deps?: Array<unknown>): UseLiveQueryReturn<ResultsFromContext<TResultContext>>;

package/dist/esm/useLiveQuery.js

@@ -0,0 +1,32 @@
+import { useState, useMemo, useEffect } from "react";
+import { useStore } from "@tanstack/react-store";
+import { queryBuilder, compileQuery } from "@tanstack/db";
+function useLiveQuery(queryFn, deps = []) {
+  const [restart, forceRestart] = useState(0);
+  const compiledQuery = useMemo(() => {
+    const query = queryFn(queryBuilder());
+    const compiled = compileQuery(query);
+    compiled.start();
+    return compiled;
+  }, [...deps, restart]);
+  const state = useStore(compiledQuery.results.derivedState);
+  const data = useStore(compiledQuery.results.derivedArray);
+  useEffect(() => {
+    if (compiledQuery.state === `stopped`) {
+      forceRestart((count) => {
+        return count += 1;
+      });
+    }
+    return () => {
+      compiledQuery.stop();
+    };
+  }, [compiledQuery]);
+  return {
+    state,
+    data
+  };
+}
+export {
+  useLiveQuery
+};
+//# sourceMappingURL=useLiveQuery.js.map

package/dist/esm/useLiveQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveQuery.js","sources":["../../src/useLiveQuery.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\"\nimport { useStore } from \"@tanstack/react-store\"\nimport { compileQuery, queryBuilder } from \"@tanstack/db\"\nimport type {\n  Context,\n  InitialQueryBuilder,\n  QueryBuilder,\n  ResultsFromContext,\n  Schema,\n} from \"@tanstack/db\"\n\nexport interface UseLiveQueryReturn<T extends object> {\n  state: Map<string, T>\n  data: Array<T>\n}\n\nexport function useLiveQuery<\n  TResultContext extends Context<Schema> = Context<Schema>,\n>(\n  queryFn: (\n    q: InitialQueryBuilder<Context<Schema>>\n  ) => QueryBuilder<TResultContext>,\n  deps: Array<unknown> = []\n): UseLiveQueryReturn<ResultsFromContext<TResultContext>> {\n  const [restart, forceRestart] = useState(0)\n\n  const compiledQuery = useMemo(() => {\n    const query = queryFn(queryBuilder())\n    const compiled = compileQuery(query)\n    compiled.start()\n    return compiled\n  }, [...deps, restart])\n\n  const state = useStore(compiledQuery.results.derivedState)\n  const data = useStore(compiledQuery.results.derivedArray)\n\n  // Clean up on unmount\n  useEffect(() => {\n    if (compiledQuery.state === `stopped`) {\n      forceRestart((count) => {\n        return (count += 1)\n      })\n    }\n\n    return () => {\n      compiledQuery.stop()\n    }\n  }, [compiledQuery])\n\n  return {\n    state,\n    data,\n  }\n}\n"],"names":[],"mappings":";;;AAgBO,SAAS,aAGd,SAGA,OAAuB,IACiC;AACxD,QAAM,CAAC,SAAS,YAAY,IAAI,SAAS,CAAC;AAEpC,QAAA,gBAAgB,QAAQ,MAAM;AAC5B,UAAA,QAAQ,QAAQ,cAAc;AAC9B,UAAA,WAAW,aAAa,KAAK;AACnC,aAAS,MAAM;AACR,WAAA;AAAA,EAAA,GACN,CAAC,GAAG,MAAM,OAAO,CAAC;AAErB,QAAM,QAAQ,SAAS,cAAc,QAAQ,YAAY;AACzD,QAAM,OAAO,SAAS,cAAc,QAAQ,YAAY;AAGxD,YAAU,MAAM;AACV,QAAA,cAAc,UAAU,WAAW;AACrC,mBAAa,CAAC,UAAU;AACtB,eAAQ,SAAS;AAAA,MAAA,CAClB;AAAA,IAAA;AAGH,WAAO,MAAM;AACX,oBAAc,KAAK;AAAA,IACrB;AAAA,EAAA,GACC,CAAC,aAAa,CAAC;AAEX,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;"}

package/dist/esm/useOptimisticMutation.d.ts

@@ -0,0 +1,5 @@
+import { Transaction, TransactionConfig } from '@tanstack/db';
+export declare function useOptimisticMutation(config: TransactionConfig): {
+    mutate: (callback: () => void) => Transaction;
+    createTransaction: () => Transaction;
+};

package/dist/esm/useOptimisticMutation.js

@@ -0,0 +1,17 @@
+import { createTransaction } from "@tanstack/db";
+function useOptimisticMutation(config) {
+  return {
+    mutate: (callback) => {
+      const transaction = createTransaction(config);
+      transaction.mutate(callback);
+      return transaction;
+    },
+    createTransaction: () => {
+      return createTransaction({ ...config, autoCommit: false });
+    }
+  };
+}
+export {
+  useOptimisticMutation
+};
+//# sourceMappingURL=useOptimisticMutation.js.map

package/dist/esm/useOptimisticMutation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOptimisticMutation.js","sources":["../../src/useOptimisticMutation.ts"],"sourcesContent":["import { createTransaction } from \"@tanstack/db\"\nimport type { Transaction, TransactionConfig } from \"@tanstack/db\"\n\nexport function useOptimisticMutation(config: TransactionConfig) {\n  return {\n    mutate: (callback: () => void): Transaction => {\n      const transaction = createTransaction(config)\n      transaction.mutate(callback)\n      return transaction\n    },\n    createTransaction: (): Transaction => {\n      return createTransaction({ ...config, autoCommit: false })\n    },\n  }\n}\n"],"names":[],"mappings":";AAGO,SAAS,sBAAsB,QAA2B;AACxD,SAAA;AAAA,IACL,QAAQ,CAAC,aAAsC;AACvC,YAAA,cAAc,kBAAkB,MAAM;AAC5C,kBAAY,OAAO,QAAQ;AACpB,aAAA;AAAA,IACT;AAAA,IACA,mBAAmB,MAAmB;AACpC,aAAO,kBAAkB,EAAE,GAAG,QAAQ,YAAY,OAAO;AAAA,IAAA;AAAA,EAE7D;AACF;"}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@tanstack/react-db",
+  "description": "React integration for @tanstack/db",
+  "version": "0.0.1",
+  "author": "Kyle Mathews",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/db.git",
+    "directory": "packages/react-db"
+  },
+  "homepage": "https://tanstack.com/db",
+  "keywords": [
+    "optimistic",
+    "react",
+    "typescript"
+  ],
+  "packageManager": "pnpm@10.5.2",
+  "dependencies": {
+    "@tanstack/db": "workspace:*",
+    "@tanstack/react-store": "^0.7.0",
+    "use-sync-external-store": "^1.2.0"
+  },
+  "devDependencies": {
+    "@electric-sql/client": "1.0.0",
+    "@testing-library/react": "^16.2.0",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.3",
+    "@types/use-sync-external-store": "^0.0.6",
+    "@vitest/coverage-istanbul": "^3.0.9",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "npx vitest --run",
+    "lint": "eslint . --fix"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "types": "dist/esm/index.d.ts"
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+// Re-export all public APIs
+export * from "./useOptimisticMutation"
+export * from "./useLiveQuery"
+
+// Re-export everything from @tanstack/db
+export * from "@tanstack/db"
+
+// Re-export some stuff explicitly to ensure the type & value is exported
+export { Collection } from "@tanstack/db"
+export { createTransaction } from "@tanstack/db"

package/src/useLiveQuery.ts

@@ -0,0 +1,54 @@
+import { useEffect, useMemo, useState } from "react"
+import { useStore } from "@tanstack/react-store"
+import { compileQuery, queryBuilder } from "@tanstack/db"
+import type {
+  Context,
+  InitialQueryBuilder,
+  QueryBuilder,
+  ResultsFromContext,
+  Schema,
+} from "@tanstack/db"
+
+export interface UseLiveQueryReturn<T extends object> {
+  state: Map<string, T>
+  data: Array<T>
+}
+
+export function useLiveQuery<
+  TResultContext extends Context<Schema> = Context<Schema>,
+>(
+  queryFn: (
+    q: InitialQueryBuilder<Context<Schema>>
+  ) => QueryBuilder<TResultContext>,
+  deps: Array<unknown> = []
+): UseLiveQueryReturn<ResultsFromContext<TResultContext>> {
+  const [restart, forceRestart] = useState(0)
+
+  const compiledQuery = useMemo(() => {
+    const query = queryFn(queryBuilder())
+    const compiled = compileQuery(query)
+    compiled.start()
+    return compiled
+  }, [...deps, restart])
+
+  const state = useStore(compiledQuery.results.derivedState)
+  const data = useStore(compiledQuery.results.derivedArray)
+
+  // Clean up on unmount
+  useEffect(() => {
+    if (compiledQuery.state === `stopped`) {
+      forceRestart((count) => {
+        return (count += 1)
+      })
+    }
+
+    return () => {
+      compiledQuery.stop()
+    }
+  }, [compiledQuery])
+
+  return {
+    state,
+    data,
+  }
+}

package/src/useOptimisticMutation.ts

@@ -0,0 +1,15 @@
+import { createTransaction } from "@tanstack/db"
+import type { Transaction, TransactionConfig } from "@tanstack/db"
+
+export function useOptimisticMutation(config: TransactionConfig) {
+  return {
+    mutate: (callback: () => void): Transaction => {
+      const transaction = createTransaction(config)
+      transaction.mutate(callback)
+      return transaction
+    },
+    createTransaction: (): Transaction => {
+      return createTransaction({ ...config, autoCommit: false })
+    },
+  }
+}