@tanstack/react-db 0.1.75 → 0.1.77

package/dist/cjs/index.cjs

@@ -4,11 +4,13 @@ const useLiveQuery = require("./useLiveQuery.cjs");
 const useLiveSuspenseQuery = require("./useLiveSuspenseQuery.cjs");
 const usePacedMutations = require("./usePacedMutations.cjs");
 const useLiveInfiniteQuery = require("./useLiveInfiniteQuery.cjs");
+const useLiveQueryEffect = require("./useLiveQueryEffect.cjs");
 const db = require("@tanstack/db");
 exports.useLiveQuery = useLiveQuery.useLiveQuery;
 exports.useLiveSuspenseQuery = useLiveSuspenseQuery.useLiveSuspenseQuery;
 exports.usePacedMutations = usePacedMutations.usePacedMutations;
 exports.useLiveInfiniteQuery = useLiveInfiniteQuery.useLiveInfiniteQuery;
+exports.useLiveQueryEffect = useLiveQueryEffect.useLiveQueryEffect;
 Object.defineProperty(exports, "createTransaction", {
   enumerable: true,
   get: () => db.createTransaction

package/dist/cjs/index.cjs.map

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

package/dist/cjs/index.d.cts

@@ -2,6 +2,7 @@ export * from './useLiveQuery.cjs';
 export * from './useLiveSuspenseQuery.cjs';
 export * from './usePacedMutations.cjs';
 export * from './useLiveInfiniteQuery.cjs';
+export * from './useLiveQueryEffect.cjs';
 export * from '@tanstack/db';
 export type { Collection } from '@tanstack/db';
 export { createTransaction } from '@tanstack/db';

package/dist/cjs/useLiveQueryEffect.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const db = require("@tanstack/db");
+function useLiveQueryEffect(config, deps = []) {
+  const configRef = react.useRef(config);
+  configRef.current = config;
+  react.useEffect(() => {
+    const effect = db.createEffect({
+      id: config.id,
+      query: config.query,
+      skipInitial: config.skipInitial,
+      onEnter: (event, ctx) => configRef.current.onEnter?.(event, ctx),
+      onUpdate: (event, ctx) => configRef.current.onUpdate?.(event, ctx),
+      onExit: (event, ctx) => configRef.current.onExit?.(event, ctx),
+      onBatch: (events, ctx) => configRef.current.onBatch?.(events, ctx),
+      onError: config.onError ? (error, event) => configRef.current.onError?.(error, event) : void 0,
+      onSourceError: config.onSourceError ? (error) => configRef.current.onSourceError?.(error) : void 0
+    });
+    return () => {
+      effect.dispose();
+    };
+  }, deps);
+}
+exports.useLiveQueryEffect = useLiveQueryEffect;
+//# sourceMappingURL=useLiveQueryEffect.cjs.map

package/dist/cjs/useLiveQueryEffect.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveQueryEffect.cjs","sources":["../../src/useLiveQueryEffect.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { createEffect } from '@tanstack/db'\nimport type { Effect, EffectConfig } from '@tanstack/db'\n\n/**\n * React hook for creating a reactive effect that fires handlers when rows\n * enter, exit, or update within a query result.\n *\n * The effect is created on mount and disposed on unmount. If `deps` change,\n * the previous effect is disposed and a new one is created.\n *\n * @example\n * ```tsx\n * function ChatComponent() {\n *   useLiveQueryEffect(\n *     {\n *       query: (q) => q.from({ msg: messages }).where(({ msg }) => eq(msg.role, 'user')),\n *       skipInitial: true,\n *       onEnter: async (event) => {\n *         await generateResponse(event.value)\n *       },\n *     },\n *     []\n *   )\n *\n *   return <div>...</div>\n * }\n * ```\n */\nexport function useLiveQueryEffect<\n  TRow extends object = Record<string, unknown>,\n  TKey extends string | number = string | number,\n>(config: EffectConfig<TRow, TKey>, deps: React.DependencyList = []): void {\n  const configRef = useRef<EffectConfig<TRow, TKey>>(config)\n  configRef.current = config\n\n  useEffect(() => {\n    const effect: Effect = createEffect<TRow, TKey>({\n      id: config.id,\n      query: config.query,\n      skipInitial: config.skipInitial,\n      onEnter: (event, ctx) => configRef.current.onEnter?.(event, ctx),\n      onUpdate: (event, ctx) => configRef.current.onUpdate?.(event, ctx),\n      onExit: (event, ctx) => configRef.current.onExit?.(event, ctx),\n      onBatch: (events, ctx) => configRef.current.onBatch?.(events, ctx),\n      onError: config.onError\n        ? (error, event) => configRef.current.onError?.(error, event)\n        : undefined,\n      onSourceError: config.onSourceError\n        ? (error) => configRef.current.onSourceError?.(error)\n        : undefined,\n    })\n\n    return () => {\n      // Fire-and-forget disposal; AbortSignal cancels in-flight work\n      effect.dispose()\n    }\n  }, deps)\n}\n"],"names":["useRef","useEffect","createEffect"],"mappings":";;;;AA6BO,SAAS,mBAGd,QAAkC,OAA6B,IAAU;AACzE,QAAM,YAAYA,MAAAA,OAAiC,MAAM;AACzD,YAAU,UAAU;AAEpBC,QAAAA,UAAU,MAAM;AACd,UAAM,SAAiBC,GAAAA,aAAyB;AAAA,MAC9C,IAAI,OAAO;AAAA,MACX,OAAO,OAAO;AAAA,MACd,aAAa,OAAO;AAAA,MACpB,SAAS,CAAC,OAAO,QAAQ,UAAU,QAAQ,UAAU,OAAO,GAAG;AAAA,MAC/D,UAAU,CAAC,OAAO,QAAQ,UAAU,QAAQ,WAAW,OAAO,GAAG;AAAA,MACjE,QAAQ,CAAC,OAAO,QAAQ,UAAU,QAAQ,SAAS,OAAO,GAAG;AAAA,MAC7D,SAAS,CAAC,QAAQ,QAAQ,UAAU,QAAQ,UAAU,QAAQ,GAAG;AAAA,MACjE,SAAS,OAAO,UACZ,CAAC,OAAO,UAAU,UAAU,QAAQ,UAAU,OAAO,KAAK,IAC1D;AAAA,MACJ,eAAe,OAAO,gBAClB,CAAC,UAAU,UAAU,QAAQ,gBAAgB,KAAK,IAClD;AAAA,IAAA,CACL;AAED,WAAO,MAAM;AAEX,aAAO,QAAA;AAAA,IACT;AAAA,EACF,GAAG,IAAI;AACT;;"}

package/dist/cjs/useLiveQueryEffect.d.cts

@@ -0,0 +1,27 @@
+import { EffectConfig } from '@tanstack/db';
+/**
+ * React hook for creating a reactive effect that fires handlers when rows
+ * enter, exit, or update within a query result.
+ *
+ * The effect is created on mount and disposed on unmount. If `deps` change,
+ * the previous effect is disposed and a new one is created.
+ *
+ * @example
+ * ```tsx
+ * function ChatComponent() {
+ *   useLiveQueryEffect(
+ *     {
+ *       query: (q) => q.from({ msg: messages }).where(({ msg }) => eq(msg.role, 'user')),
+ *       skipInitial: true,
+ *       onEnter: async (event) => {
+ *         await generateResponse(event.value)
+ *       },
+ *     },
+ *     []
+ *   )
+ *
+ *   return <div>...</div>
+ * }
+ * ```
+ */
+export declare function useLiveQueryEffect<TRow extends object = Record<string, unknown>, TKey extends string | number = string | number>(config: EffectConfig<TRow, TKey>, deps?: React.DependencyList): void;

package/dist/esm/index.d.ts

@@ -2,6 +2,7 @@ export * from './useLiveQuery.js';
 export * from './useLiveSuspenseQuery.js';
 export * from './usePacedMutations.js';
 export * from './useLiveInfiniteQuery.js';
+export * from './useLiveQueryEffect.js';
 export * from '@tanstack/db';
 export type { Collection } from '@tanstack/db';
 export { createTransaction } from '@tanstack/db';

package/dist/esm/index.js

@@ -2,12 +2,14 @@ import { useLiveQuery } from "./useLiveQuery.js";
 import { useLiveSuspenseQuery } from "./useLiveSuspenseQuery.js";
 import { usePacedMutations } from "./usePacedMutations.js";
 import { useLiveInfiniteQuery } from "./useLiveInfiniteQuery.js";
+import { useLiveQueryEffect } from "./useLiveQueryEffect.js";
 export * from "@tanstack/db";
 import { createTransaction } from "@tanstack/db";
 export {
   createTransaction,
   useLiveInfiniteQuery,
   useLiveQuery,
+  useLiveQueryEffect,
   useLiveSuspenseQuery,
   usePacedMutations
 };

package/dist/esm/index.js.map

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

package/dist/esm/useLiveQueryEffect.d.ts

@@ -0,0 +1,27 @@
+import { EffectConfig } from '@tanstack/db';
+/**
+ * React hook for creating a reactive effect that fires handlers when rows
+ * enter, exit, or update within a query result.
+ *
+ * The effect is created on mount and disposed on unmount. If `deps` change,
+ * the previous effect is disposed and a new one is created.
+ *
+ * @example
+ * ```tsx
+ * function ChatComponent() {
+ *   useLiveQueryEffect(
+ *     {
+ *       query: (q) => q.from({ msg: messages }).where(({ msg }) => eq(msg.role, 'user')),
+ *       skipInitial: true,
+ *       onEnter: async (event) => {
+ *         await generateResponse(event.value)
+ *       },
+ *     },
+ *     []
+ *   )
+ *
+ *   return <div>...</div>
+ * }
+ * ```
+ */
+export declare function useLiveQueryEffect<TRow extends object = Record<string, unknown>, TKey extends string | number = string | number>(config: EffectConfig<TRow, TKey>, deps?: React.DependencyList): void;

package/dist/esm/useLiveQueryEffect.js

@@ -0,0 +1,26 @@
+import { useRef, useEffect } from "react";
+import { createEffect } from "@tanstack/db";
+function useLiveQueryEffect(config, deps = []) {
+  const configRef = useRef(config);
+  configRef.current = config;
+  useEffect(() => {
+    const effect = createEffect({
+      id: config.id,
+      query: config.query,
+      skipInitial: config.skipInitial,
+      onEnter: (event, ctx) => configRef.current.onEnter?.(event, ctx),
+      onUpdate: (event, ctx) => configRef.current.onUpdate?.(event, ctx),
+      onExit: (event, ctx) => configRef.current.onExit?.(event, ctx),
+      onBatch: (events, ctx) => configRef.current.onBatch?.(events, ctx),
+      onError: config.onError ? (error, event) => configRef.current.onError?.(error, event) : void 0,
+      onSourceError: config.onSourceError ? (error) => configRef.current.onSourceError?.(error) : void 0
+    });
+    return () => {
+      effect.dispose();
+    };
+  }, deps);
+}
+export {
+  useLiveQueryEffect
+};
+//# sourceMappingURL=useLiveQueryEffect.js.map

package/dist/esm/useLiveQueryEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveQueryEffect.js","sources":["../../src/useLiveQueryEffect.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { createEffect } from '@tanstack/db'\nimport type { Effect, EffectConfig } from '@tanstack/db'\n\n/**\n * React hook for creating a reactive effect that fires handlers when rows\n * enter, exit, or update within a query result.\n *\n * The effect is created on mount and disposed on unmount. If `deps` change,\n * the previous effect is disposed and a new one is created.\n *\n * @example\n * ```tsx\n * function ChatComponent() {\n *   useLiveQueryEffect(\n *     {\n *       query: (q) => q.from({ msg: messages }).where(({ msg }) => eq(msg.role, 'user')),\n *       skipInitial: true,\n *       onEnter: async (event) => {\n *         await generateResponse(event.value)\n *       },\n *     },\n *     []\n *   )\n *\n *   return <div>...</div>\n * }\n * ```\n */\nexport function useLiveQueryEffect<\n  TRow extends object = Record<string, unknown>,\n  TKey extends string | number = string | number,\n>(config: EffectConfig<TRow, TKey>, deps: React.DependencyList = []): void {\n  const configRef = useRef<EffectConfig<TRow, TKey>>(config)\n  configRef.current = config\n\n  useEffect(() => {\n    const effect: Effect = createEffect<TRow, TKey>({\n      id: config.id,\n      query: config.query,\n      skipInitial: config.skipInitial,\n      onEnter: (event, ctx) => configRef.current.onEnter?.(event, ctx),\n      onUpdate: (event, ctx) => configRef.current.onUpdate?.(event, ctx),\n      onExit: (event, ctx) => configRef.current.onExit?.(event, ctx),\n      onBatch: (events, ctx) => configRef.current.onBatch?.(events, ctx),\n      onError: config.onError\n        ? (error, event) => configRef.current.onError?.(error, event)\n        : undefined,\n      onSourceError: config.onSourceError\n        ? (error) => configRef.current.onSourceError?.(error)\n        : undefined,\n    })\n\n    return () => {\n      // Fire-and-forget disposal; AbortSignal cancels in-flight work\n      effect.dispose()\n    }\n  }, deps)\n}\n"],"names":[],"mappings":";;AA6BO,SAAS,mBAGd,QAAkC,OAA6B,IAAU;AACzE,QAAM,YAAY,OAAiC,MAAM;AACzD,YAAU,UAAU;AAEpB,YAAU,MAAM;AACd,UAAM,SAAiB,aAAyB;AAAA,MAC9C,IAAI,OAAO;AAAA,MACX,OAAO,OAAO;AAAA,MACd,aAAa,OAAO;AAAA,MACpB,SAAS,CAAC,OAAO,QAAQ,UAAU,QAAQ,UAAU,OAAO,GAAG;AAAA,MAC/D,UAAU,CAAC,OAAO,QAAQ,UAAU,QAAQ,WAAW,OAAO,GAAG;AAAA,MACjE,QAAQ,CAAC,OAAO,QAAQ,UAAU,QAAQ,SAAS,OAAO,GAAG;AAAA,MAC7D,SAAS,CAAC,QAAQ,QAAQ,UAAU,QAAQ,UAAU,QAAQ,GAAG;AAAA,MACjE,SAAS,OAAO,UACZ,CAAC,OAAO,UAAU,UAAU,QAAQ,UAAU,OAAO,KAAK,IAC1D;AAAA,MACJ,eAAe,OAAO,gBAClB,CAAC,UAAU,UAAU,QAAQ,gBAAgB,KAAK,IAClD;AAAA,IAAA,CACL;AAED,WAAO,MAAM;AAEX,aAAO,QAAA;AAAA,IACT;AAAA,EACF,GAAG,IAAI;AACT;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-db",
-  "version": "0.1.75",
+  "version": "0.1.77",
   "description": "React integration for @tanstack/db",
   "author": "Kyle Mathews",
   "license": "MIT",
@@ -40,7 +40,7 @@
   ],
   "dependencies": {
     "use-sync-external-store": "^1.6.0",
-    "@tanstack/db": "0.5.31"
+    "@tanstack/db": "0.5.33"
   },
   "peerDependencies": {
     "react": ">=16.8.0"

package/src/index.ts

@@ -3,6 +3,7 @@ export * from './useLiveQuery'
 export * from './useLiveSuspenseQuery'
 export * from './usePacedMutations'
 export * from './useLiveInfiniteQuery'
+export * from './useLiveQueryEffect'
 
 // Re-export everything from @tanstack/db
 export * from '@tanstack/db'

package/src/useLiveQueryEffect.ts

@@ -0,0 +1,59 @@
+import { useEffect, useRef } from 'react'
+import { createEffect } from '@tanstack/db'
+import type { Effect, EffectConfig } from '@tanstack/db'
+
+/**
+ * React hook for creating a reactive effect that fires handlers when rows
+ * enter, exit, or update within a query result.
+ *
+ * The effect is created on mount and disposed on unmount. If `deps` change,
+ * the previous effect is disposed and a new one is created.
+ *
+ * @example
+ * ```tsx
+ * function ChatComponent() {
+ *   useLiveQueryEffect(
+ *     {
+ *       query: (q) => q.from({ msg: messages }).where(({ msg }) => eq(msg.role, 'user')),
+ *       skipInitial: true,
+ *       onEnter: async (event) => {
+ *         await generateResponse(event.value)
+ *       },
+ *     },
+ *     []
+ *   )
+ *
+ *   return <div>...</div>
+ * }
+ * ```
+ */
+export function useLiveQueryEffect<
+  TRow extends object = Record<string, unknown>,
+  TKey extends string | number = string | number,
+>(config: EffectConfig<TRow, TKey>, deps: React.DependencyList = []): void {
+  const configRef = useRef<EffectConfig<TRow, TKey>>(config)
+  configRef.current = config
+
+  useEffect(() => {
+    const effect: Effect = createEffect<TRow, TKey>({
+      id: config.id,
+      query: config.query,
+      skipInitial: config.skipInitial,
+      onEnter: (event, ctx) => configRef.current.onEnter?.(event, ctx),
+      onUpdate: (event, ctx) => configRef.current.onUpdate?.(event, ctx),
+      onExit: (event, ctx) => configRef.current.onExit?.(event, ctx),
+      onBatch: (events, ctx) => configRef.current.onBatch?.(events, ctx),
+      onError: config.onError
+        ? (error, event) => configRef.current.onError?.(error, event)
+        : undefined,
+      onSourceError: config.onSourceError
+        ? (error) => configRef.current.onSourceError?.(error)
+        : undefined,
+    })
+
+    return () => {
+      // Fire-and-forget disposal; AbortSignal cancels in-flight work
+      effect.dispose()
+    }
+  }, deps)
+}