@livestore/react 0.0.0-snapshot-8d3edf87cb1e88c7b67c5f3ea9d0b307253c33df

package/dist/experimental/components/LiveList.js

@@ -0,0 +1,31 @@
+import { computed } from '@livestore/livestore';
+import React from 'react';
+import { useQuery } from '../../useQuery.js';
+import { useTemporaryQuery } from '../../useTemporaryQuery.js';
+/**
+ * This component is a helper component for rendering a list of items for a LiveQuery of an array of items.
+ * The idea is that instead of letting React handle the rendering of the items array directly,
+ * we derive a item LiveQuery for each item which moves the reactivity to the item level when a single item changes.
+ *
+ * In the future we want to make this component even more efficient by using incremental rendering (https://github.com/livestorejs/livestore/pull/55)
+ * e.g. when an item is added/removed/moved to only re-render the affected DOM nodes.
+ */
+export const LiveList = ({ items$, renderItem, getKey }) => {
+    const [hasMounted, setHasMounted] = React.useState(false);
+    React.useEffect(() => setHasMounted(true), []);
+    const keysCb = React.useCallback(() => computed((get) => get(items$).map(getKey)), [getKey, items$]);
+    const keys = useTemporaryQuery(keysCb, 'fixed');
+    const arr = React.useMemo(() => keys.map((key) => 
+    // TODO figure out a way so that `item$` returns an ordered lookup map to more efficiently find the item by key
+    [key, computed((get) => get(items$).find((item) => getKey(item, 0) === key))]), [getKey, items$, keys]);
+    return (React.createElement(React.Fragment, null, arr.map(([key, item$], index) => (React.createElement(ItemWrapperMemo, { key: key, itemKey: key, "item$": item$, opts: { isInitialListRender: !hasMounted, index }, renderItem: renderItem })))));
+};
+const ItemWrapper = ({ item$, opts, renderItem, }) => {
+    const item = useQuery(item$);
+    return React.createElement(React.Fragment, null, renderItem(item, opts));
+};
+const ItemWrapperMemo = React.memo(ItemWrapper, (prev, next) => prev.itemKey === next.itemKey &&
+    prev.renderItem === prev.renderItem &&
+    prev.opts.index === next.opts.index &&
+    prev.opts.isInitialListRender === next.opts.isInitialListRender);
+//# sourceMappingURL=LiveList.js.map

package/dist/experimental/components/LiveList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveList.js","sourceRoot":"","sources":["../../../src/experimental/components/LiveList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAgB9D;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAwB,EAAmB,EAAE;IACxG,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEzD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;IAE9C,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IACpG,MAAM,IAAI,GAAG,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC/C,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CACvB,GAAG,EAAE,CACH,IAAI,CAAC,GAAG,CACN,CAAC,GAAG,EAAE,EAAE;IACN,+GAA+G;IAC/G,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK,GAAG,CAAE,CAAqB,CAAU,CAC9G,EACH,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CACvB,CAAA;IAED,OAAO,CACL,0CACG,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,oBAAC,eAAe,IACd,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,GAAG,WACL,KAAK,EACZ,IAAI,EAAE,EAAE,mBAAmB,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,EACjD,UAAU,EAAE,UAAU,GACtB,CACH,CAAC,CACD,CACJ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAAS,EAC3B,KAAK,EACL,IAAI,EACJ,UAAU,GAMX,EAAE,EAAE;IACH,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE5B,OAAO,0CAAG,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,CAAI,CAAA;AACtC,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAChC,WAAW,EACX,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CACb,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO;IAC7B,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,UAAU;IACnC,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK;IACnC,IAAI,CAAC,IAAI,CAAC,mBAAmB,KAAK,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAC5C,CAAA"}

package/dist/experimental/mod.d.ts

@@ -0,0 +1,2 @@
+export { LiveList, type LiveListProps } from './components/LiveList.js';
+//# sourceMappingURL=mod.d.ts.map

package/dist/experimental/mod.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../src/experimental/mod.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/experimental/mod.js

@@ -0,0 +1,2 @@
+export { LiveList } from './components/LiveList.js';
+//# sourceMappingURL=mod.js.map

package/dist/experimental/mod.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mod.js","sourceRoot":"","sources":["../../src/experimental/mod.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,0BAA0B,CAAA"}

package/dist/mod.d.ts

@@ -0,0 +1,8 @@
+export { LiveStoreContext, useStore } from './LiveStoreContext.js';
+export { LiveStoreProvider } from './LiveStoreProvider.js';
+export { useQuery } from './useQuery.js';
+export { useTemporaryQuery } from './useTemporaryQuery.js';
+export { useStackInfo } from './utils/stack-info.js';
+export { useRow, type StateSetters, type SetStateAction, type Dispatch, type UseRowResult as UseStateResult, } from './useRow.js';
+export { useAtom } from './useAtom.js';
+//# sourceMappingURL=mod.d.ts.map

package/dist/mod.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../src/mod.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EACL,MAAM,EACN,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,QAAQ,EACb,KAAK,YAAY,IAAI,cAAc,GACpC,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA"}

package/dist/mod.js

@@ -0,0 +1,8 @@
+export { LiveStoreContext, useStore } from './LiveStoreContext.js';
+export { LiveStoreProvider } from './LiveStoreProvider.js';
+export { useQuery } from './useQuery.js';
+export { useTemporaryQuery } from './useTemporaryQuery.js';
+export { useStackInfo } from './utils/stack-info.js';
+export { useRow, } from './useRow.js';
+export { useAtom } from './useAtom.js';
+//# sourceMappingURL=mod.js.map

package/dist/mod.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mod.js","sourceRoot":"","sources":["../src/mod.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EACL,MAAM,GAKP,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA"}

package/dist/useAtom.d.ts

@@ -0,0 +1,10 @@
+import { type QueryInfoCol, type QueryInfoRow } from '@livestore/common';
+import type { DbSchema } from '@livestore/common/schema';
+import type { LiveQuery } from '@livestore/livestore';
+import type { Dispatch, SetStateAction } from './useRow.js';
+export declare const useAtom: <TQuery extends LiveQuery<any, QueryInfoRow<TTableDef> | QueryInfoCol<TTableDef, any>>, TTableDef extends DbSchema.TableDef<DbSchema.DefaultSqliteTableDefConstrained, boolean, DbSchema.TableOptions & {
+    deriveMutations: {
+        enabled: true;
+    };
+}>>(query$: TQuery) => [value: TQuery["__result!"], setValue: Dispatch<SetStateAction<Partial<TQuery["__result!"]>>>];
+//# sourceMappingURL=useAtom.d.ts.map

package/dist/useAtom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAtom.d.ts","sourceRoot":"","sources":["../src/useAtom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAA;AACxE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAE3D,eAAO,MAAM,OAAO,GAClB,MAAM,SAAS,SAAS,CAAC,GAAG,EAAE,YAAY,CAAC,SAAS,CAAC,GAAG,YAAY,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,EACrF,SAAS,SAAS,QAAQ,CAAC,QAAQ,CACjC,QAAQ,CAAC,gCAAgC,EACzC,OAAO,EACP,QAAQ,CAAC,YAAY,GAAG;IAAE,eAAe,EAAE;QAAE,OAAO,EAAE,IAAI,CAAA;KAAE,CAAA;CAAE,CAC/D,UAEO,MAAM,KACb,CAAC,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAoC/F,CAAA"}

package/dist/useAtom.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useStore } from './LiveStoreContext.js';
+import { useQueryRef } from './useQuery.js';
+export const useAtom = (query$) => {
+    const query$Ref = useQueryRef(query$);
+    const { store } = useStore();
+    // TODO make API equivalent to useRow
+    const setValue = React.useMemo(() => {
+        return (newValueOrFn) => {
+            const newValue = typeof newValueOrFn === 'function' ? newValueOrFn(query$Ref.current) : newValueOrFn;
+            if (query$.queryInfo._tag === 'Row') {
+                if (query$.queryInfo.table.options.isSingleton && query$.queryInfo.table.isSingleColumn) {
+                    store.mutate(query$.queryInfo.table.update(newValue));
+                }
+                else if (query$.queryInfo.table.options.isSingleColumn) {
+                    store.mutate(query$.queryInfo.table.update({ where: { id: query$.queryInfo.id }, values: { value: newValue } }));
+                }
+                else {
+                    store.mutate(query$.queryInfo.table.update({ where: { id: query$.queryInfo.id }, values: newValue }));
+                }
+            }
+            else {
+                if (query$.queryInfo.table.options.isSingleton && query$.queryInfo.table.isSingleColumn) {
+                    store.mutate(query$.queryInfo.table.update({ [query$.queryInfo.column]: newValue }));
+                }
+                else {
+                    store.mutate(query$.queryInfo.table.update({
+                        where: { id: query$.queryInfo.id },
+                        values: { [query$.queryInfo.column]: newValue },
+                    }));
+                }
+            }
+        };
+    }, [query$.queryInfo, query$Ref, store]);
+    return [query$Ref.current, setValue];
+};
+//# sourceMappingURL=useAtom.js.map

package/dist/useAtom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAtom.js","sourceRoot":"","sources":["../src/useAtom.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAG3C,MAAM,CAAC,MAAM,OAAO,GAAG,CAQrB,MAAc,EACkF,EAAE;IAClG,MAAM,SAAS,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAErC,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE5B,qCAAqC;IACrC,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAgD,GAAG,EAAE;QACjF,OAAO,CAAC,YAAiB,EAAE,EAAE;YAC3B,MAAM,QAAQ,GAAG,OAAO,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,YAAY,CAAA;YAEpG,IAAI,MAAM,CAAC,SAAS,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;gBACpC,IAAI,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,IAAI,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;oBACxF,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAA;gBACvD,CAAC;qBAAM,IAAI,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC;oBACzD,KAAK,CAAC,MAAM,CACV,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,CAAC,CACnG,CAAA;gBACH,CAAC;qBAAM,CAAC;oBACN,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAA;gBACvG,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,IAAI,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;oBACxF,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAA;gBACtF,CAAC;qBAAM,CAAC;oBACN,KAAK,CAAC,MAAM,CACV,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC;wBAC5B,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE,EAAE;wBAClC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE;qBAChD,CAAC,CACH,CAAA;gBACH,CAAC;YACH,CAAC;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAA;IAExC,OAAO,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAA;AACtC,CAAC,CAAA"}

package/dist/useQuery.d.ts

@@ -0,0 +1,9 @@
+import type { GetResult, LiveQueryAny } from '@livestore/livestore';
+import * as otel from '@opentelemetry/api';
+import React from 'react';
+export declare const useQuery: <TQuery extends LiveQueryAny>(query: TQuery) => GetResult<TQuery>;
+/**
+ *
+ */
+export declare const useQueryRef: <TQuery extends LiveQueryAny>(query$: TQuery, parentOtelContext?: otel.Context) => React.MutableRefObject<GetResult<TQuery>>;
+//# sourceMappingURL=useQuery.d.ts.map

package/dist/useQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQuery.d.ts","sourceRoot":"","sources":["../src/useQuery.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAGnE,OAAO,KAAK,IAAI,MAAM,oBAAoB,CAAA;AAC1C,OAAO,KAAK,MAAM,OAAO,CAAA;AAkBzB,eAAO,MAAM,QAAQ,GAAI,MAAM,SAAS,YAAY,SAAS,MAAM,KAAG,SAAS,CAAC,MAAM,CAA+B,CAAA;AAErH;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,MAAM,SAAS,YAAY,UAC7C,MAAM,sBACM,IAAI,CAAC,OAAO,KAC/B,KAAK,CAAC,gBAAgB,CAAC,SAAS,CAAC,MAAM,CAAC,CA2F1C,CAAA"}

package/dist/useQuery.js

@@ -0,0 +1,88 @@
+import { extractStackInfoFromStackTrace, stackInfoToString } from '@livestore/livestore';
+import { deepEqual, indent } from '@livestore/utils';
+import * as otel from '@opentelemetry/api';
+import React from 'react';
+import { useStore } from './LiveStoreContext.js';
+import { originalStackLimit } from './utils/stack-info.js';
+import { useStateRefWithReactiveInput } from './utils/useStateRefWithReactiveInput.js';
+/**
+ * NOTE Some folks have suggested to use `React.useSyncExternalStore`, however, it's not doing anything special
+ * for what's needed here, so we handle everything manually.
+ */
+/**
+ * This is needed because the `React.useMemo` call below, can sometimes be called multiple times 🤷,
+ * so we need to "cache" the fact that we've already started a span for this component.
+ * The map entry is being removed again in the `React.useEffect` call below.
+ */
+const spanAlreadyStartedCache = new Map();
+export const useQuery = (query) => useQueryRef(query).current;
+/**
+ *
+ */
+export const useQueryRef = (query$, parentOtelContext) => {
+    const { store } = useStore();
+    React.useDebugValue(`LiveStore:useQuery:${query$.id}:${query$.label}`);
+    // console.debug(`LiveStore:useQuery:${query$.id}:${query$.label}`)
+    const stackInfo = React.useMemo(() => {
+        Error.stackTraceLimit = 10;
+        // eslint-disable-next-line unicorn/error-message
+        const stack = new Error().stack;
+        Error.stackTraceLimit = originalStackLimit;
+        return extractStackInfoFromStackTrace(stack);
+    }, []);
+    // The following `React.useMemo` and `React.useEffect` calls are used to start and end a span for the lifetime of this component.
+    const { span, otelContext } = React.useMemo(() => {
+        const existingSpan = spanAlreadyStartedCache.get(query$);
+        if (existingSpan !== undefined)
+            return existingSpan;
+        const span = store.otel.tracer.startSpan(`LiveStore:useQuery:${query$.label}`, { attributes: { label: query$.label, stackInfo: JSON.stringify(stackInfo) } }, parentOtelContext ?? store.otel.queriesSpanContext);
+        const otelContext = otel.trace.setSpan(otel.context.active(), span);
+        spanAlreadyStartedCache.set(query$, { span, otelContext });
+        return { span, otelContext };
+    }, [parentOtelContext, query$, stackInfo, store.otel.queriesSpanContext, store.otel.tracer]);
+    const initialResult = React.useMemo(() => {
+        try {
+            return query$.run(otelContext, {
+                _tag: 'react',
+                api: 'useQuery',
+                label: query$.label,
+                stackInfo,
+            });
+        }
+        catch (cause) {
+            throw new Error(`\
+[@livestore/react:useQuery] Error running query: ${cause.name}
+
+Query: ${query$.label}
+
+React trace:
+
+${indent(stackInfoToString(stackInfo), 4)}
+
+Stack trace:
+`, { cause });
+        }
+    }, [otelContext, query$, stackInfo]);
+    // We know the query has a result by the time we use it; so we can synchronously populate a default state
+    const [valueRef, setValue] = useStateRefWithReactiveInput(initialResult);
+    React.useEffect(() => () => {
+        spanAlreadyStartedCache.delete(query$);
+        span.end();
+    }, [query$, span]);
+    // Subscribe to future updates for this query
+    React.useEffect(() => {
+        query$.activeSubscriptions.add(stackInfo);
+        return store.subscribe(query$, (newValue) => {
+            // NOTE: we return a reference to the result object within LiveStore;
+            // this implies that app code must not mutate the results, or else
+            // there may be weird reactivity bugs.
+            if (deepEqual(newValue, valueRef.current) === false) {
+                setValue(newValue);
+            }
+        }, () => {
+            query$.activeSubscriptions.delete(stackInfo);
+        }, { label: query$.label, otelContext });
+    }, [stackInfo, query$, setValue, store, valueRef, otelContext, span]);
+    return valueRef;
+};
+//# sourceMappingURL=useQuery.js.map

package/dist/useQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQuery.js","sourceRoot":"","sources":["../src/useQuery.ts"],"names":[],"mappings":"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"}

package/dist/useQuery.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useQuery.test.d.ts.map

package/dist/useQuery.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQuery.test.d.ts","sourceRoot":"","sources":["../src/useQuery.test.tsx"],"names":[],"mappings":""}

package/dist/useQuery.test.js

@@ -0,0 +1,51 @@
+import { querySQL } from '@livestore/livestore';
+import { Effect, Schema } from '@livestore/utils/effect';
+import { renderHook } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { makeTodoMvcReact, tables, todos } from './__tests__/fixture.js';
+import * as LiveStoreReact from './mod.js';
+describe('useQuery', () => {
+    it('simple', () => Effect.gen(function* () {
+        const { wrapper, store, makeRenderCount } = yield* makeTodoMvcReact();
+        const renderCount = makeRenderCount();
+        const allTodos$ = querySQL(`select * from todos`, { schema: Schema.Array(tables.todos.schema) });
+        const { result } = renderHook(() => {
+            renderCount.inc();
+            return LiveStoreReact.useQuery(allTodos$);
+        }, { wrapper });
+        expect(result.current.length).toBe(0);
+        expect(renderCount.val).toBe(1);
+        React.act(() => store.mutate(todos.insert({ id: 't1', text: 'buy milk', completed: false })));
+        expect(result.current.length).toBe(1);
+        expect(result.current[0].text).toBe('buy milk');
+        expect(renderCount.val).toBe(2);
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise));
+    it('same `useQuery` hook invoked with different queries', () => Effect.gen(function* () {
+        const { wrapper, store, makeRenderCount } = yield* makeTodoMvcReact();
+        const renderCount = makeRenderCount();
+        const todo1$ = querySQL(`select * from todos where id = 't1'`, {
+            label: 'libraryTracksView1',
+            schema: Schema.Array(tables.todos.schema),
+        });
+        const todo2$ = querySQL(`select * from todos where id = 't2'`, {
+            label: 'libraryTracksView2',
+            schema: Schema.Array(tables.todos.schema),
+        });
+        store.mutate(todos.insert({ id: 't1', text: 'buy milk', completed: false }), todos.insert({ id: 't2', text: 'buy eggs', completed: false }));
+        const { result, rerender } = renderHook((todoId) => {
+            renderCount.inc();
+            const query$ = React.useMemo(() => (todoId === 't1' ? todo1$ : todo2$), [todoId]);
+            return LiveStoreReact.useQuery(query$)[0].text;
+        }, { wrapper, initialProps: 't1' });
+        expect(result.current).toBe('buy milk');
+        expect(renderCount.val).toBe(1);
+        React.act(() => store.mutate(todos.update({ where: { id: 't1' }, values: { text: 'buy soy milk' } })));
+        expect(result.current).toBe('buy soy milk');
+        expect(renderCount.val).toBe(2);
+        rerender('t2');
+        expect(result.current).toBe('buy eggs');
+        expect(renderCount.val).toBe(3);
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise));
+});
+//# sourceMappingURL=useQuery.test.js.map

package/dist/useQuery.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQuery.test.js","sourceRoot":"","sources":["../src/useQuery.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AACnD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,KAAK,cAAc,MAAM,UAAU,CAAA;AAE1C,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE,CAChB,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC;QAClB,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC,CAAC,gBAAgB,EAAE,CAAA;QAErE,MAAM,WAAW,GAAG,eAAe,EAAE,CAAA;QAErC,MAAM,SAAS,GAAG,QAAQ,CAAC,qBAAqB,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;QAEhG,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAC3B,GAAG,EAAE;YACH,WAAW,CAAC,GAAG,EAAE,CAAA;YAEjB,OAAO,cAAc,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;QAC3C,CAAC,EACD,EAAE,OAAO,EAAE,CACZ,CAAA;QAED,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACrC,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QAE/B,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAA;QAE7F,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACrC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QAChD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACjC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAA;IAEtE,EAAE,CAAC,qDAAqD,EAAE,GAAG,EAAE,CAC7D,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC;QAClB,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC,CAAC,gBAAgB,EAAE,CAAA;QAErE,MAAM,WAAW,GAAG,eAAe,EAAE,CAAA;QAErC,MAAM,MAAM,GAAG,QAAQ,CAAC,qCAAqC,EAAE;YAC7D,KAAK,EAAE,oBAAoB;YAC3B,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;SAC1C,CAAC,CAAA;QACF,MAAM,MAAM,GAAG,QAAQ,CAAC,qCAAqC,EAAE;YAC7D,KAAK,EAAE,oBAAoB;YAC3B,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;SAC1C,CAAC,CAAA;QAEF,KAAK,CAAC,MAAM,CACV,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAC9D,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAC/D,CAAA;QAED,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CACrC,CAAC,MAAc,EAAE,EAAE;YACjB,WAAW,CAAC,GAAG,EAAE,CAAA;YAEjB,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;YAEjF,OAAO,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAE,CAAC,IAAI,CAAA;QACjD,CAAC,EACD,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,CAChC,CAAA;QAED,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QACvC,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QAE/B,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,CAAA;QAEtG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;QAC3C,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QAE/B,QAAQ,CAAC,IAAI,CAAC,CAAA;QAEd,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QACvC,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACjC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAA;AACxE,CAAC,CAAC,CAAA"}

package/dist/useRow.d.ts

@@ -0,0 +1,46 @@
+import type { QueryInfo } from '@livestore/common';
+import { SessionIdSymbol } from '@livestore/common';
+import { DbSchema } from '@livestore/common/schema';
+import type { LiveQuery, ReactivityGraph, RowResult } from '@livestore/livestore';
+export type UseRowResult<TTableDef extends DbSchema.TableDef> = [
+    row: RowResult<TTableDef>,
+    setRow: StateSetters<TTableDef>,
+    query$: LiveQuery<RowResult<TTableDef>, QueryInfo>
+];
+export type UseRowOptionsDefaulValues<TTableDef extends DbSchema.TableDef> = {
+    defaultValues?: Partial<RowResult<TTableDef>>;
+};
+export type UseRowOptionsBase = {
+    reactivityGraph?: ReactivityGraph;
+};
+/**
+ * Similar to `React.useState` but returns a tuple of `[row, setRow, query$]` for a given table where ...
+ *
+ *   - `row` is the current value of the row (fully decoded according to the table schema)
+ *   - `setRow` is a function that can be used to update the row (values will be encoded according to the table schema)
+ *   - `query$` is a `LiveQuery` that e.g. can be used to subscribe to changes to the row
+ *
+ * If the table is a singleton table, `useRow` can be called without an `id` argument. Otherwise, the `id` argument is required.
+ */
+export declare const useRow: {
+    <TTableDef extends DbSchema.TableDef<DbSchema.DefaultSqliteTableDef, boolean, DbSchema.TableOptions & {
+        isSingleton: true;
+        deriveMutations: {
+            enabled: true;
+        };
+    }>>(table: TTableDef, options?: UseRowOptionsBase): UseRowResult<TTableDef>;
+    <TTableDef extends DbSchema.TableDef<DbSchema.DefaultSqliteTableDef, boolean, DbSchema.TableOptions & {
+        isSingleton: false;
+        deriveMutations: {
+            enabled: true;
+        };
+    }>>(table: TTableDef, id: string | SessionIdSymbol, options?: UseRowOptionsBase & UseRowOptionsDefaulValues<TTableDef>): UseRowResult<TTableDef>;
+};
+export type Dispatch<A> = (action: A) => void;
+export type SetStateAction<S> = S | ((previousValue: S) => S);
+export type StateSetters<TTableDef extends DbSchema.TableDef> = TTableDef['isSingleColumn'] extends true ? Dispatch<SetStateAction<RowResult<TTableDef>>> : {
+    [K in keyof RowResult<TTableDef>]: Dispatch<SetStateAction<RowResult<TTableDef>[K]>>;
+} & {
+    setMany: Dispatch<SetStateAction<Partial<RowResult<TTableDef>>>>;
+};
+//# sourceMappingURL=useRow.d.ts.map

package/dist/useRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRow.d.ts","sourceRoot":"","sources":["../src/useRow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAEnD,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAUjF,MAAM,MAAM,YAAY,CAAC,SAAS,SAAS,QAAQ,CAAC,QAAQ,IAAI;IAC9D,GAAG,EAAE,SAAS,CAAC,SAAS,CAAC;IACzB,MAAM,EAAE,YAAY,CAAC,SAAS,CAAC;IAC/B,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;CACnD,CAAA;AAED,MAAM,MAAM,yBAAyB,CAAC,SAAS,SAAS,QAAQ,CAAC,QAAQ,IAAI;IAC3E,aAAa,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAA;CAC9C,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,CAAA;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM,EAAE;IACnB,CACE,SAAS,SAAS,QAAQ,CAAC,QAAQ,CACjC,QAAQ,CAAC,qBAAqB,EAC9B,OAAO,EACP,QAAQ,CAAC,YAAY,GAAG;QAAE,WAAW,EAAE,IAAI,CAAC;QAAC,eAAe,EAAE;YAAE,OAAO,EAAE,IAAI,CAAA;SAAE,CAAA;KAAE,CAClF,EAED,KAAK,EAAE,SAAS,EAChB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,YAAY,CAAC,SAAS,CAAC,CAAA;IAC1B,CACE,SAAS,SAAS,QAAQ,CAAC,QAAQ,CACjC,QAAQ,CAAC,qBAAqB,EAC9B,OAAO,EACP,QAAQ,CAAC,YAAY,GAAG;QAAE,WAAW,EAAE,KAAK,CAAC;QAAC,eAAe,EAAE;YAAE,OAAO,EAAE,IAAI,CAAA;SAAE,CAAA;KAAE,CACnF,EAED,KAAK,EAAE,SAAS,EAEhB,EAAE,EAAE,MAAM,GAAG,eAAe,EAC5B,OAAO,CAAC,EAAE,iBAAiB,GAAG,yBAAyB,CAAC,SAAS,CAAC,GACjE,YAAY,CAAC,SAAS,CAAC,CAAA;CA+G3B,CAAA;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAA;AAC7C,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;AAE7D,MAAM,MAAM,YAAY,CAAC,SAAS,SAAS,QAAQ,CAAC,QAAQ,IAAI,SAAS,CAAC,gBAAgB,CAAC,SAAS,IAAI,GACpG,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,GAC9C;KACG,CAAC,IAAI,MAAM,SAAS,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACrF,GAAG;IACF,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;CACjE,CAAA"}

package/dist/useRow.js

@@ -0,0 +1,96 @@
+import { SessionIdSymbol } from '@livestore/common';
+import { DbSchema } from '@livestore/common/schema';
+import { rowQuery } from '@livestore/livestore';
+import { shouldNeverHappen } from '@livestore/utils';
+import { ReadonlyRecord } from '@livestore/utils/effect';
+import React from 'react';
+import { useStore } from './LiveStoreContext.js';
+import { useQueryRef } from './useQuery.js';
+import { useMakeTemporaryQuery } from './useTemporaryQuery.js';
+/**
+ * Similar to `React.useState` but returns a tuple of `[row, setRow, query$]` for a given table where ...
+ *
+ *   - `row` is the current value of the row (fully decoded according to the table schema)
+ *   - `setRow` is a function that can be used to update the row (values will be encoded according to the table schema)
+ *   - `query$` is a `LiveQuery` that e.g. can be used to subscribe to changes to the row
+ *
+ * If the table is a singleton table, `useRow` can be called without an `id` argument. Otherwise, the `id` argument is required.
+ */
+export const useRow = (table, idOrOptions, options_) => {
+    const sqliteTableDef = table.sqliteDef;
+    const id = typeof idOrOptions === 'string' || idOrOptions === SessionIdSymbol ? idOrOptions : undefined;
+    const options = typeof idOrOptions === 'string' || idOrOptions === SessionIdSymbol ? options_ : idOrOptions;
+    const { defaultValues, reactivityGraph } = options ?? {};
+    const tableName = table.sqliteDef.name;
+    if (DbSchema.tableHasDerivedMutations(table) === false) {
+        shouldNeverHappen(`useRow called on table "${tableName}" which does not have 'deriveMutations: true' set`);
+    }
+    const { store } = useStore();
+    if (store.schema.tables.has(table.sqliteDef.name) === false &&
+        table.sqliteDef.name.startsWith('__livestore') === false) {
+        shouldNeverHappen(`Table "${table.sqliteDef.name}" not found in schema`);
+    }
+    // console.debug('useRow', tableName, id)
+    const idStr = id === SessionIdSymbol ? 'session' : id;
+    const { query$, otelContext } = useMakeTemporaryQuery((otelContext) => DbSchema.tableIsSingleton(table)
+        ? rowQuery(table, { otelContext, reactivityGraph })
+        : rowQuery(table, id, {
+            otelContext,
+            defaultValues: defaultValues,
+            reactivityGraph,
+        }), [idStr, tableName], {
+        otel: {
+            spanName: `LiveStore:useRow:${tableName}${idStr === undefined ? '' : `:${idStr}`}`,
+            attributes: { id: idStr },
+        },
+    });
+    const query$Ref = useQueryRef(query$, otelContext);
+    const setState = React.useMemo(() => {
+        if (table.isSingleColumn) {
+            return (newValueOrFn) => {
+                const newValue = typeof newValueOrFn === 'function' ? newValueOrFn(query$Ref.current) : newValueOrFn;
+                if (query$Ref.current === newValue)
+                    return;
+                // NOTE we need to account for the short-hand syntax for single-column+singleton tables
+                if (table.options.isSingleton) {
+                    store.mutate(table.update(newValue));
+                }
+                else {
+                    store.mutate(table.update({ where: { id }, values: { value: newValue } }));
+                }
+                // store.mutate(updateMutationForQueryInfo(query$.queryInfo!, { value: newValue }))
+            };
+        }
+        else {
+            const setState = // TODO: do we have a better type for the values that can go in SQLite?
+             ReadonlyRecord.map(sqliteTableDef.columns, (column, columnName) => (newValueOrFn) => {
+                const newValue = 
+                // @ts-expect-error TODO fix typing
+                typeof newValueOrFn === 'function' ? newValueOrFn(query$Ref.current[columnName]) : newValueOrFn;
+                // Don't update the state if it's the same as the value already seen in the component
+                // @ts-expect-error TODO fix typing
+                if (query$Ref.current[columnName] === newValue)
+                    return;
+                store.mutate(table.update({ where: { id: id ?? 'singleton' }, values: { [columnName]: newValue } }));
+                // store.mutate(updateMutationForQueryInfo(query$.queryInfo!, { [columnName]: newValue }))
+            });
+            setState.setMany = (columnValuesOrFn) => {
+                const columnValues = 
+                // @ts-expect-error TODO fix typing
+                typeof columnValuesOrFn === 'function' ? columnValuesOrFn(query$Ref.current) : columnValuesOrFn;
+                // TODO use hashing instead
+                // Don't update the state if it's the same as the value already seen in the component
+                if (
+                // @ts-expect-error TODO fix typing
+                Object.entries(columnValues).every(([columnName, value]) => query$Ref.current[columnName] === value)) {
+                    return;
+                }
+                store.mutate(table.update({ where: { id: id ?? 'singleton' }, values: columnValues }));
+                // store.mutate(updateMutationForQueryInfo(query$.queryInfo!, columnValues))
+            };
+            return setState;
+        }
+    }, [id, query$Ref, sqliteTableDef.columns, store, table]);
+    return [query$Ref.current, setState, query$];
+};
+//# sourceMappingURL=useRow.js.map

package/dist/useRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRow.js","sourceRoot":"","sources":["../src/useRow.ts"],"names":[],"mappings":"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"}

package/dist/useRow.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useRow.test.d.ts.map

package/dist/useRow.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRow.test.d.ts","sourceRoot":"","sources":["../src/useRow.test.tsx"],"names":[],"mappings":""}