@livestore/react 0.3.0-dev.9 → 0.3.1-dev.0

package/dist/__tests__/fixture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fixture.d.ts","sourceRoot":"","sources":["../../src/__tests__/fixture.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAc,MAAM,0BAA0B,CAAA;AAG/D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAEhD,OAAO,KAAK,KAAK,IAAI,MAAM,oBAAoB,CAAA;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,WAAW,CAAA;AAEnD,MAAM,MAAM,QAAQ,GAAG;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAQjB,CAAA;AAED,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAQf,CAAA;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAO9B,CAAA;AAED,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAM3B,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAsD,CAAA;AACzE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAyB,CAAA;AAE5C,eAAO,MAAM,gBAAgB,wEAK1B;IACD,UAAU,CAAC,EAAE,IAAI,CAAC,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,IAAI,CAAC,OAAO,CAAA;IAC1B,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;4BAgCkC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EASgC,CAAA"}
+{"version":3,"file":"fixture.d.ts","sourceRoot":"","sources":["../../src/__tests__/fixture.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,EAAE,MAAM,0BAA0B,CAAA;AACpE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,KAAK,KAAK,IAAI,MAAM,oBAAoB,CAAA;AAG/C,OAAO,KAAK,cAAc,MAAM,WAAW,CAAA;AAE3C,MAAM,MAAM,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,WAAW,CAAA;AAEnD,MAAM,MAAM,QAAQ,GAAG;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAwCD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAelB,CAAA;AAOD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA4C,CAAA;AAG/D,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAgC,CAAA;AAEnD,eAAO,MAAM,gBAAgB,GAAI,2CAI9B;IACD,UAAU,CAAC,EAAE,IAAI,CAAC,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,IAAI,CAAC,OAAO,CAAA;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAA;CAChB;4BAkC6B,GAAG;;;;;;6EAWgC,CAAA"}

package/dist/__tests__/fixture.js

@@ -1,30 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeInMemoryAdapter } from '@livestore/adapter-web';
 import { provideOtel } from '@livestore/common';
-import { DbSchema, makeSchema } from '@livestore/common/schema';
-import { createStore, globalReactivityGraph, makeReactivityGraph } from '@livestore/livestore';
-import { Effect } from '@livestore/utils/effect';
-import { makeInMemoryAdapter } from '@livestore/web';
+import { Events, makeSchema, State } from '@livestore/common/schema';
+import { createStore } from '@livestore/livestore';
+import { Effect, Schema } from '@livestore/utils/effect';
 import React from 'react';
 import * as LiveStoreReact from '../mod.js';
-export const todos = DbSchema.table('todos', {
-    id: DbSchema.text({ primaryKey: true }),
-    text: DbSchema.text({ default: '', nullable: false }),
-    completed: DbSchema.boolean({ default: false, nullable: false }),
-}, { deriveMutations: true, isSingleton: false });
-export const app = DbSchema.table('app', {
-    id: DbSchema.text({ primaryKey: true, default: 'static' }),
-    newTodoText: DbSchema.text({ default: '', nullable: true }),
-    filter: DbSchema.text({ default: 'all', nullable: false }),
-}, { isSingleton: true });
-export const AppComponentSchema = DbSchema.table('UserInfo', {
-    username: DbSchema.text({ default: '' }),
-    text: DbSchema.text({ default: '' }),
-}, { deriveMutations: true });
-export const AppRouterSchema = DbSchema.table('AppRouter', {
-    currentTaskId: DbSchema.text({ default: null, nullable: true }),
-}, { isSingleton: true, deriveMutations: true });
-export const tables = { todos, app, AppComponentSchema, AppRouterSchema };
-export const schema = makeSchema({ tables });
-export const makeTodoMvcReact = ({ otelTracer, otelContext, useGlobalReactivityGraph = true, strictMode, } = {}) => Effect.gen(function* () {
+const todos = State.SQLite.table({
+    name: 'todos',
+    columns: {
+        id: State.SQLite.text({ primaryKey: true }),
+        text: State.SQLite.text({ default: '', nullable: false }),
+        completed: State.SQLite.boolean({ default: false, nullable: false }),
+    },
+});
+const app = State.SQLite.table({
+    name: 'app',
+    columns: {
+        id: State.SQLite.text({ primaryKey: true, default: 'static' }),
+        newTodoText: State.SQLite.text({ default: '', nullable: true }),
+        filter: State.SQLite.text({ default: 'all', nullable: false }),
+    },
+});
+const userInfo = State.SQLite.clientDocument({
+    name: 'UserInfo',
+    schema: Schema.Struct({
+        username: Schema.String,
+        text: Schema.String,
+    }),
+    default: { value: { username: '', text: '' } },
+});
+const AppRouterSchema = State.SQLite.clientDocument({
+    name: 'AppRouter',
+    schema: Schema.Struct({
+        currentTaskId: Schema.String.pipe(Schema.NullOr),
+    }),
+    default: {
+        value: { currentTaskId: null },
+        id: 'singleton',
+    },
+});
+export const events = {
+    todoCreated: Events.synced({
+        name: 'todoCreated',
+        schema: Schema.Struct({ id: Schema.String, text: Schema.String, completed: Schema.Boolean }),
+    }),
+    todoUpdated: Events.synced({
+        name: 'todoUpdated',
+        schema: Schema.Struct({
+            id: Schema.String,
+            text: Schema.String.pipe(Schema.optional),
+            completed: Schema.Boolean.pipe(Schema.optional),
+        }),
+    }),
+    AppRouterSet: AppRouterSchema.set,
+    UserInfoSet: userInfo.set,
+};
+const materializers = State.SQLite.materializers(events, {
+    todoCreated: ({ id, text, completed }) => todos.insert({ id, text, completed }),
+    todoUpdated: ({ id, text, completed }) => todos.update({ completed, text }).where({ id }),
+});
+export const tables = { todos, app, userInfo, AppRouterSchema };
+const state = State.SQLite.makeState({ tables, materializers });
+export const schema = makeSchema({ state, events });
+export const makeTodoMvcReact = ({ otelTracer, otelContext, strictMode, } = {}) => Effect.gen(function* () {
     const makeRenderCount = () => {
         let val = 0;
         const inc = () => {
@@ -37,19 +76,21 @@ export const makeTodoMvcReact = ({ otelTracer, otelContext, useGlobalReactivityG
             inc,
         };
     };
-    const reactivityGraph = useGlobalReactivityGraph ? globalReactivityGraph : makeReactivityGraph();
     const store = yield* createStore({
         schema,
         storeId: 'default',
         adapter: makeInMemoryAdapter(),
-        reactivityGraph,
         debug: { instanceId: 'test' },
     });
+    const storeWithReactApi = LiveStoreReact.withReactApi(store);
     // TODO improve typing of `LiveStoreContext`
-    const storeContext = { stage: 'running', store };
+    const storeContext = {
+        stage: 'running',
+        store: storeWithReactApi,
+    };
     const MaybeStrictMode = strictMode ? React.StrictMode : React.Fragment;
-    const wrapper = ({ children }) => (React.createElement(MaybeStrictMode, null,
-        React.createElement(LiveStoreReact.LiveStoreContext.Provider, { value: storeContext }, children)));
-    return { wrapper, store, reactivityGraph, makeRenderCount };
+    const wrapper = ({ children }) => (_jsx(MaybeStrictMode, { children: _jsx(LiveStoreReact.LiveStoreContext.Provider, { value: storeContext, children: children }) }));
+    const renderCount = makeRenderCount();
+    return { wrapper, store: storeWithReactApi, renderCount };
 }).pipe(provideOtel({ parentSpanContext: otelContext, otelTracer }));
 //# sourceMappingURL=fixture.js.map

package/dist/__tests__/fixture.js.map

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

package/dist/experimental/components/LiveList.d.ts

@@ -1,7 +1,7 @@
-import type { LiveQuery } from '@livestore/livestore';
+import type { LiveQueryDef } from '@livestore/livestore';
 import React from 'react';
 export type LiveListProps<TItem> = {
-    items$: LiveQuery<ReadonlyArray<TItem>>;
+    items$: LiveQueryDef<ReadonlyArray<TItem>>;
     renderItem: (item: TItem, opts: {
         index: number;
         isInitialListRender: boolean;

package/dist/experimental/components/LiveList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LiveList.d.ts","sourceRoot":"","sources":["../../../src/experimental/components/LiveList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,MAAM,MAAM,aAAa,CAAC,KAAK,IAAI;IACjC,MAAM,EAAE,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAA;IAEvC,UAAU,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,mBAAmB,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACnG,+CAA+C;IAC/C,MAAM,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAA;CACxD,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,GAAI,KAAK,kCAAmC,aAAa,CAAC,KAAK,CAAC,KAAG,KAAK,CAAC,SA8B7F,CAAA"}
+{"version":3,"file":"LiveList.d.ts","sourceRoot":"","sources":["../../../src/experimental/components/LiveList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAExD,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,MAAM,aAAa,CAAC,KAAK,IAAI;IACjC,MAAM,EAAE,YAAY,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAA;IAE1C,UAAU,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,mBAAmB,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACnG,+CAA+C;IAC/C,MAAM,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAA;CACxD,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,GAAI,KAAK,EAAG,gCAAgC,aAAa,CAAC,KAAK,CAAC,KAAG,KAAK,CAAC,SAkC7F,CAAA"}

package/dist/experimental/components/LiveList.js

@@ -1,7 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { computed } from '@livestore/livestore';
 import React from 'react';
 import { useQuery } from '../../useQuery.js';
-import { useScopedQuery } from '../../useScopedQuery.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,
@@ -13,16 +13,20 @@ import { useScopedQuery } from '../../useScopedQuery.js';
 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 = useScopedQuery(keysCb, 'fixed');
+    const keys = useQuery(computed((get) => get(items$).map(getKey)));
     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 })))));
+    [
+        key,
+        computed((get) => get(items$).find((item) => getKey(item, 0) === key), {
+            deps: [key],
+        }),
+    ]), [getKey, items$, keys]);
+    return (_jsx(_Fragment, { children: arr.map(([key, item$], index) => (_jsx(ItemWrapperMemo, { itemKey: key, "item$": item$, opts: { isInitialListRender: !hasMounted, index }, renderItem: renderItem }, key))) }));
 };
 const ItemWrapper = ({ item$, opts, renderItem, }) => {
     const item = useQuery(item$);
-    return React.createElement(React.Fragment, null, renderItem(item, opts));
+    return _jsx(_Fragment, { children: renderItem(item, opts) });
 };
 const ItemWrapperMemo = React.memo(ItemWrapper, (prev, next) => prev.itemKey === next.itemKey &&
     prev.renderItem === prev.renderItem &&

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

@@ -1 +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,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAgBxD;;;;;;;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,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC5C,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"}
+{"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;AAgB5C;;;;;;;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,IAAI,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IACjE,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CACvB,GAAG,EAAE,CACH,IAAI,CAAC,GAAG,CACN,CAAC,GAAG,EAAE,EAAE;IACN,+GAA+G;IAC/G;QACE,GAAG;QACH,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,EAAE;YACtE,IAAI,EAAE,CAAC,GAAG,CAAC;SACZ,CAAwB;KACjB,CACb,EACH,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CACvB,CAAA;IAED,OAAO,CACL,4BACG,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,KAAC,eAAe,IAEd,OAAO,EAAE,GAAG,WACL,KAAK,EACZ,IAAI,EAAE,EAAE,mBAAmB,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,EACjD,UAAU,EAAE,UAAU,IAJjB,GAAG,CAKR,CACH,CAAC,GACD,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,4BAAG,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,GAAI,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/mod.d.ts

@@ -1,8 +1,7 @@
-export { LiveStoreContext, useStore } from './LiveStoreContext.js';
+export { LiveStoreContext, type ReactApi } from './LiveStoreContext.js';
+export { useStore, withReactApi } from './useStore.js';
 export { LiveStoreProvider } from './LiveStoreProvider.js';
-export { useQuery } from './useQuery.js';
-export { useScopedQuery } from './useScopedQuery.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';
+export { useQuery, useQueryRef } from './useQuery.js';
+export { useClientDocument, type StateSetters, type SetStateAction, type Dispatch, type UseRowResult as UseStateResult, } from './useClientDocument.js';
 //# sourceMappingURL=mod.d.ts.map

package/dist/mod.d.ts.map

@@ -1 +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,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,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"}
+{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../src/mod.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AACvE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EACL,iBAAiB,EACjB,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,QAAQ,EACb,KAAK,YAAY,IAAI,cAAc,GACpC,MAAM,wBAAwB,CAAA"}

package/dist/mod.js

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

package/dist/mod.js.map

@@ -1 +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,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EACL,MAAM,GAKP,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"mod.js","sourceRoot":"","sources":["../src/mod.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAiB,MAAM,uBAAuB,CAAA;AACvE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EACL,iBAAiB,GAKlB,MAAM,wBAAwB,CAAA"}

package/dist/useClientDocument.d.ts

@@ -0,0 +1,61 @@
+import type { RowQuery } from '@livestore/common';
+import { SessionIdSymbol } from '@livestore/common';
+import { State } from '@livestore/common/schema';
+import type { LiveQuery } from '@livestore/livestore';
+export type UseRowResult<TTableDef extends State.SQLite.ClientDocumentTableDef.TraitAny> = [
+    row: TTableDef['Value'],
+    setRow: StateSetters<TTableDef>,
+    id: string,
+    query$: LiveQuery<TTableDef['Value']>
+];
+/**
+ * Similar to `React.useState` but returns a tuple of `[state, setState, id, query$]` for a given table where ...
+ *
+ *   - `state` is the current value of the row (fully decoded according to the table schema)
+ *   - `setState` is a function that can be used to update the document
+ *   - `id` is the id of the document
+ *   - `query$` is a `LiveQuery` that e.g. can be used to subscribe to changes to the document
+ *
+ * `useClientDocument` only works for client-document tables:
+ *
+ * ```tsx
+ * const MyState = State.SQLite.clientDocument({
+ *   name: 'MyState',
+ *   schema: Schema.Struct({
+ *     showSidebar: Schema.Boolean,
+ *   }),
+ *   default: { id: SessionIdSymbol, value: { showSidebar: true } },
+ * })
+ *
+ * const MyComponent = () => {
+ *   const [{ showSidebar }, setState] = useClientDocument(MyState)
+ *   return (
+ *     <div onClick={() => setState({ showSidebar: !showSidebar })}>
+ *       {showSidebar ? 'Sidebar is open' : 'Sidebar is closed'}
+ *     </div>
+ *   )
+ * }
+ * ```
+ *
+ * If the table has a default id, `useClientDocument` can be called without an `id` argument. Otherwise, the `id` argument is required.
+ */
+export declare const useClientDocument: {
+    <TTableDef extends State.SQLite.ClientDocumentTableDef.Trait<any, any, any, {
+        partialSet: boolean;
+        default: {
+            id: string | SessionIdSymbol;
+            value: any;
+        };
+    }>>(table: TTableDef, id?: State.SQLite.ClientDocumentTableDef.DefaultIdType<TTableDef> | SessionIdSymbol, options?: Partial<RowQuery.GetOrCreateOptions<TTableDef>>): UseRowResult<TTableDef>;
+    <TTableDef extends State.SQLite.ClientDocumentTableDef.Trait<any, any, any, {
+        partialSet: boolean;
+        default: {
+            id: string | SessionIdSymbol | undefined;
+            value: any;
+        };
+    }>>(table: TTableDef, id: State.SQLite.ClientDocumentTableDef.DefaultIdType<TTableDef> | string | SessionIdSymbol, options?: Partial<RowQuery.GetOrCreateOptions<TTableDef>>): UseRowResult<TTableDef>;
+};
+export type Dispatch<A> = (action: A) => void;
+export type SetStateAction<S> = Partial<S> | ((previousValue: S) => Partial<S>);
+export type StateSetters<TTableDef extends State.SQLite.ClientDocumentTableDef.TraitAny> = Dispatch<SetStateAction<TTableDef['Value']>>;
+//# sourceMappingURL=useClientDocument.d.ts.map

package/dist/useClientDocument.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClientDocument.d.ts","sourceRoot":"","sources":["../src/useClientDocument.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,KAAK,EAAE,SAAS,EAAuB,MAAM,sBAAsB,CAAA;AAQ1E,MAAM,MAAM,YAAY,CAAC,SAAS,SAAS,KAAK,CAAC,MAAM,CAAC,sBAAsB,CAAC,QAAQ,IAAI;IACzF,GAAG,EAAE,SAAS,CAAC,OAAO,CAAC;IACvB,MAAM,EAAE,YAAY,CAAC,SAAS,CAAC;IAC/B,EAAE,EAAE,MAAM;IACV,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;CACtC,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,iBAAiB,EAAE;IAE9B,CACE,SAAS,SAAS,KAAK,CAAC,MAAM,CAAC,sBAAsB,CAAC,KAAK,CACzD,GAAG,EACH,GAAG,EACH,GAAG,EACH;QAAE,UAAU,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE;YAAE,EAAE,EAAE,MAAM,GAAG,eAAe,CAAC;YAAC,KAAK,EAAE,GAAG,CAAA;SAAE,CAAA;KAAE,CAC/E,EAED,KAAK,EAAE,SAAS,EAChB,EAAE,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,sBAAsB,CAAC,aAAa,CAAC,SAAS,CAAC,GAAG,eAAe,EACnF,OAAO,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC,GACxD,YAAY,CAAC,SAAS,CAAC,CAAA;IAG1B,CACE,SAAS,SAAS,KAAK,CAAC,MAAM,CAAC,sBAAsB,CAAC,KAAK,CACzD,GAAG,EACH,GAAG,EACH,GAAG,EACH;QAAE,UAAU,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE;YAAE,EAAE,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS,CAAC;YAAC,KAAK,EAAE,GAAG,CAAA;SAAE,CAAA;KAAE,CAC3F,EAED,KAAK,EAAE,SAAS,EAEhB,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,sBAAsB,CAAC,aAAa,CAAC,SAAS,CAAC,GAAG,MAAM,GAAG,eAAe,EAC3F,OAAO,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC,GACxD,YAAY,CAAC,SAAS,CAAC,CAAA;CAwD3B,CAAA;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAA;AAC7C,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;AAE/E,MAAM,MAAM,YAAY,CAAC,SAAS,SAAS,KAAK,CAAC,MAAM,CAAC,sBAAsB,CAAC,QAAQ,IAAI,QAAQ,CACjG,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CACnC,CAAA"}

package/dist/useClientDocument.js

@@ -0,0 +1,79 @@
+import { SessionIdSymbol } from '@livestore/common';
+import { State } from '@livestore/common/schema';
+import { queryDb } from '@livestore/livestore';
+import { shouldNeverHappen } from '@livestore/utils';
+import React from 'react';
+import { LiveStoreContext } from './LiveStoreContext.js';
+import { useQueryRef } from './useQuery.js';
+/**
+ * Similar to `React.useState` but returns a tuple of `[state, setState, id, query$]` for a given table where ...
+ *
+ *   - `state` is the current value of the row (fully decoded according to the table schema)
+ *   - `setState` is a function that can be used to update the document
+ *   - `id` is the id of the document
+ *   - `query$` is a `LiveQuery` that e.g. can be used to subscribe to changes to the document
+ *
+ * `useClientDocument` only works for client-document tables:
+ *
+ * ```tsx
+ * const MyState = State.SQLite.clientDocument({
+ *   name: 'MyState',
+ *   schema: Schema.Struct({
+ *     showSidebar: Schema.Boolean,
+ *   }),
+ *   default: { id: SessionIdSymbol, value: { showSidebar: true } },
+ * })
+ *
+ * const MyComponent = () => {
+ *   const [{ showSidebar }, setState] = useClientDocument(MyState)
+ *   return (
+ *     <div onClick={() => setState({ showSidebar: !showSidebar })}>
+ *       {showSidebar ? 'Sidebar is open' : 'Sidebar is closed'}
+ *     </div>
+ *   )
+ * }
+ * ```
+ *
+ * If the table has a default id, `useClientDocument` can be called without an `id` argument. Otherwise, the `id` argument is required.
+ */
+export const useClientDocument = (table, idOrOptions, options_, storeArg) => {
+    const id = typeof idOrOptions === 'string' || idOrOptions === SessionIdSymbol
+        ? idOrOptions
+        : table[State.SQLite.ClientDocumentTableDefSymbol].options.default.id;
+    const options = typeof idOrOptions === 'string' || idOrOptions === SessionIdSymbol ? options_ : idOrOptions;
+    const { default: defaultValues } = options ?? {};
+    React.useMemo(() => validateTableOptions(table), [table]);
+    const tableName = table.sqliteDef.name;
+    const store = storeArg?.store ??
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        React.useContext(LiveStoreContext)?.store ??
+        shouldNeverHappen(`No store provided to useClientDocument`);
+    // console.debug('useClientDocument', tableName, id)
+    const idStr = id === SessionIdSymbol ? store.clientSession.sessionId : id;
+    const queryDef = React.useMemo(() => queryDb(table.get(id, { default: defaultValues }), {
+        deps: [idStr, table.sqliteDef.name, JSON.stringify(defaultValues)],
+    }), [table, id, defaultValues, idStr]);
+    const queryRef = useQueryRef(queryDef, {
+        otelSpanName: `LiveStore:useClientDocument:${tableName}:${idStr}`,
+        store: storeArg?.store,
+    });
+    const setState = React.useMemo(() => (newValueOrFn) => {
+        const newValue = typeof newValueOrFn === 'function' ? newValueOrFn(queryRef.valueRef.current) : newValueOrFn;
+        if (queryRef.valueRef.current === newValue)
+            return;
+        store.commit(table.set(removeUndefinedValues(newValue), id));
+    }, [id, queryRef.valueRef, store, table]);
+    return [queryRef.valueRef.current, setState, idStr, queryRef.queryRcRef.value];
+};
+const validateTableOptions = (table) => {
+    if (State.SQLite.tableIsClientDocumentTable(table) === false) {
+        return shouldNeverHappen(`useClientDocument called on table "${table.sqliteDef.name}" which is not a client document table`);
+    }
+};
+const removeUndefinedValues = (value) => {
+    if (typeof value === 'object' && value !== null) {
+        return Object.fromEntries(Object.entries(value).filter(([_, v]) => v !== undefined));
+    }
+    return value;
+};
+//# sourceMappingURL=useClientDocument.js.map

package/dist/useClientDocument.js.map

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

package/dist/useClientDocument.test.d.ts

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

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

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

package/dist/useClientDocument.test.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as LiveStore from '@livestore/livestore';
+import { getSimplifiedRootSpan } from '@livestore/livestore/internal/testing-utils';
+import { Effect, ReadonlyRecord, Schema } from '@livestore/utils/effect';
+import { Vitest } from '@livestore/utils-dev/node-vitest';
+import * as otel from '@opentelemetry/api';
+import { BasicTracerProvider, InMemorySpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
+import * as ReactTesting from '@testing-library/react';
+import { beforeEach, expect, it } from 'vitest';
+import { events, makeTodoMvcReact, tables } from './__tests__/fixture.js';
+import { __resetUseRcResourceCache } from './useRcResource.js';
+// const strictMode = process.env.REACT_STRICT_MODE !== undefined
+// NOTE running tests concurrently doesn't work with the default global db graph
+Vitest.describe('useClientDocument', () => {
+    beforeEach(() => {
+        __resetUseRcResourceCache();
+    });
+    Vitest.scopedLive('should update the data based on component key', () => Effect.gen(function* () {
+        const { wrapper, store, renderCount } = yield* makeTodoMvcReact({});
+        const { result, rerender } = ReactTesting.renderHook((userId) => {
+            renderCount.inc();
+            const [state, setState, id] = store.useClientDocument(tables.userInfo, userId);
+            return { state, setState, id };
+        }, { wrapper, initialProps: 'u1' });
+        expect(result.current.id).toBe('u1');
+        expect(result.current.state.username).toBe('');
+        expect(renderCount.val).toBe(1);
+        expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot();
+        store.commit(tables.userInfo.set({ username: 'username_u2' }, 'u2'));
+        rerender('u2');
+        expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot();
+        expect(result.current.id).toBe('u2');
+        expect(result.current.state.username).toBe('username_u2');
+        expect(renderCount.val).toBe(2);
+    }));
+    // TODO add a test that makes sure React doesn't re-render when a setter is used to set the same value
+    Vitest.scopedLive('should update the data reactively - via setState', () => Effect.gen(function* () {
+        const { wrapper, store, renderCount } = yield* makeTodoMvcReact({});
+        const { result } = ReactTesting.renderHook((userId) => {
+            renderCount.inc();
+            const [state, setState, id] = store.useClientDocument(tables.userInfo, userId);
+            return { state, setState, id };
+        }, { wrapper, initialProps: 'u1' });
+        expect(result.current.id).toBe('u1');
+        expect(result.current.state.username).toBe('');
+        expect(renderCount.val).toBe(1);
+        ReactTesting.act(() => result.current.setState({ username: 'username_u1_hello' }));
+        expect(result.current.id).toBe('u1');
+        expect(result.current.state.username).toBe('username_u1_hello');
+        expect(renderCount.val).toBe(2);
+    }));
+    Vitest.scopedLive('should update the data reactively - via raw store commit', () => Effect.gen(function* () {
+        const { wrapper, store, renderCount } = yield* makeTodoMvcReact({});
+        const { result } = ReactTesting.renderHook((userId) => {
+            renderCount.inc();
+            const [state, setState, id] = store.useClientDocument(tables.userInfo, userId);
+            return { state, setState, id };
+        }, { wrapper, initialProps: 'u1' });
+        expect(result.current.id).toBe('u1');
+        expect(result.current.state.username).toBe('');
+        expect(renderCount.val).toBe(1);
+        ReactTesting.act(() => store.commit(events.UserInfoSet({ username: 'username_u1_hello' }, 'u1')));
+        expect(result.current.id).toBe('u1');
+        expect(result.current.state.username).toBe('username_u1_hello');
+        expect(renderCount.val).toBe(2);
+    }));
+    Vitest.scopedLive('should work for a larger app', () => Effect.gen(function* () {
+        const { wrapper, store, renderCount } = yield* makeTodoMvcReact({});
+        const allTodos$ = LiveStore.queryDb({ query: `select * from todos`, schema: Schema.Array(tables.todos.rowSchema) }, { label: 'allTodos' });
+        let globalSetState;
+        const AppRouter = () => {
+            renderCount.inc();
+            const [state, setState] = store.useClientDocument(tables.AppRouterSchema, 'singleton');
+            globalSetState = setState;
+            return (_jsxs("div", { children: [_jsx(TasksList, { setTaskId: (taskId) => setState({ currentTaskId: taskId }) }), _jsxs("div", { role: "current-id", children: ["Current Task Id: ", state.currentTaskId ?? '-'] }), state.currentTaskId ? _jsx(TaskDetails, { id: state.currentTaskId }) : _jsx("div", { children: "Click on a task to see details" })] }));
+        };
+        const TasksList = ({ setTaskId }) => {
+            const allTodos = store.useQuery(allTodos$);
+            return (_jsx("div", { children: allTodos.map((_) => (_jsx("div", { onClick: () => setTaskId(_.id), children: _.id }, _.id))) }));
+        };
+        const TaskDetails = ({ id }) => {
+            const todo = store.useQuery(LiveStore.queryDb(tables.todos.where({ id }).first(), { deps: id }));
+            return _jsx("div", { role: "content", children: JSON.stringify(todo) });
+        };
+        const renderResult = ReactTesting.render(_jsx(AppRouter, {}), { wrapper });
+        expect(renderCount.val).toBe(1);
+        ReactTesting.act(() => store.commit(LiveStore.rawSqlEvent({
+            sql: LiveStore.sql `INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)`,
+        })));
+        expect(renderCount.val).toBe(1);
+        expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: -"');
+        ReactTesting.act(() => globalSetState({ currentTaskId: 't1' }));
+        expect(renderCount.val).toBe(2);
+        expect(renderResult.getByRole('content').innerHTML).toMatchInlineSnapshot(`"{"id":"t1","text":"buy milk","completed":false}"`);
+        expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: t1"');
+        ReactTesting.act(() => store.commit(events.todoCreated({ id: 't2', text: 'buy eggs', completed: false }), events.AppRouterSet({ currentTaskId: 't2' }), events.todoCreated({ id: 't3', text: 'buy bread', completed: false })));
+        expect(renderCount.val).toBe(3);
+        expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: t2"');
+    }));
+    Vitest.scopedLive('should work for a useClientDocument query chained with a useTemporary query', () => Effect.gen(function* () {
+        const { store, wrapper, renderCount } = yield* makeTodoMvcReact({});
+        store.commit(events.todoCreated({ id: 't1', text: 'buy milk', completed: false }), events.todoCreated({ id: 't2', text: 'buy bread', completed: false }));
+        const { result, unmount, rerender } = ReactTesting.renderHook((userId) => {
+            renderCount.inc();
+            const [_row, _setRow, _id, rowState$] = store.useClientDocument(tables.userInfo, userId);
+            const todos = store.useQuery(LiveStore.queryDb((get) => tables.todos.where('text', 'LIKE', `%${get(rowState$).text}%`), 
+            // TODO find a way where explicit `userId` is not needed here
+            // possibly by automatically understanding the `get(rowState$)` dependency
+            { label: 'todosFiltered', deps: userId }));
+            return { todos };
+        }, { wrapper, initialProps: 'u1' });
+        ReactTesting.act(() => store.commit(events.UserInfoSet({ username: 'username_u2', text: 'milk' }, 'u2')));
+        expect(result.current.todos.length).toBe(2);
+        expect(renderCount.val).toBe(1);
+        rerender('u2');
+        expect(result.current.todos.length).toBe(1);
+        expect(renderCount.val).toBe(2);
+        unmount();
+    }));
+    Vitest.describe('otel', () => {
+        it.each([{ strictMode: true }, { strictMode: false }])('should update the data based on component key strictMode=%s', async ({ strictMode }) => {
+            const exporter = new InMemorySpanExporter();
+            const provider = new BasicTracerProvider({
+                spanProcessors: [new SimpleSpanProcessor(exporter)],
+            });
+            const otelTracer = provider.getTracer(`testing-${strictMode ? 'strict' : 'non-strict'}`);
+            const span = otelTracer.startSpan('test-root');
+            const otelContext = otel.trace.setSpan(otel.context.active(), span);
+            await Effect.gen(function* () {
+                const { wrapper, store, renderCount } = yield* makeTodoMvcReact({
+                    otelContext,
+                    otelTracer,
+                    strictMode,
+                });
+                const { result, rerender, unmount } = ReactTesting.renderHook((userId) => {
+                    renderCount.inc();
+                    const [state, setState, id] = store.useClientDocument(tables.userInfo, userId);
+                    return { state, setState, id };
+                }, { wrapper, initialProps: 'u1' });
+                expect(result.current.id).toBe('u1');
+                expect(result.current.state.username).toBe('');
+                expect(renderCount.val).toBe(1);
+                // For u2 we'll make sure that the row already exists,
+                // so the lazy `insert` will be skipped
+                ReactTesting.act(() => store.commit(events.UserInfoSet({ username: 'username_u2' }, 'u2')));
+                rerender('u2');
+                expect(result.current.id).toBe('u2');
+                expect(result.current.state.username).toBe('username_u2');
+                expect(renderCount.val).toBe(2);
+                unmount();
+                span.end();
+            }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise);
+            await provider.forceFlush();
+            const mapAttributes = (attributes) => {
+                return ReadonlyRecord.map(attributes, (val, key) => {
+                    if (key === 'firstStackInfo') {
+                        const stackInfo = JSON.parse(val);
+                        // stackInfo.frames.shift() // Removes `renderHook.wrapper` from the stack
+                        stackInfo.frames.forEach((_) => {
+                            if (_.name.includes('renderHook.wrapper')) {
+                                _.name = 'renderHook.wrapper';
+                            }
+                            _.filePath = '__REPLACED_FOR_SNAPSHOT__';
+                        });
+                        return JSON.stringify(stackInfo);
+                    }
+                    return val;
+                });
+            };
+            expect(getSimplifiedRootSpan(exporter, mapAttributes)).toMatchSnapshot();
+            await provider.shutdown();
+        });
+    });
+});
+//# sourceMappingURL=useClientDocument.test.js.map