@livestore/react 0.0.0-snapshot-8d3edf87cb1e88c7b67c5f3ea9d0b307253c33df

package/dist/useRow.test.js

@@ -0,0 +1,212 @@
+import * as LiveStore from '@livestore/livestore';
+import { getSimplifiedRootSpan } from '@livestore/livestore/internal/testing-utils';
+import { Effect, ReadonlyRecord, Schema } from '@livestore/utils/effect';
+import * as otel from '@opentelemetry/api';
+import { BasicTracerProvider, InMemorySpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
+import { render, renderHook } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { AppComponentSchema, AppRouterSchema, makeTodoMvcReact, tables, todos } from './__tests__/fixture.js';
+import * as LiveStoreReact from './mod.js';
+// NOTE running tests concurrently doesn't work with the default global db graph
+describe('useRow', () => {
+    it('should update the data based on component key', () => Effect.gen(function* () {
+        const { wrapper, store, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
+            useGlobalReactivityGraph: false,
+        });
+        const renderCount = makeRenderCount();
+        const { result, rerender } = renderHook((userId) => {
+            renderCount.inc();
+            const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph });
+            return { state, setState };
+        }, { wrapper, initialProps: 'u1' });
+        expect(result.current.state.id).toBe('u1');
+        expect(result.current.state.username).toBe('');
+        expect(renderCount.val).toBe(1);
+        React.act(() => store.mutate(LiveStore.rawSqlMutation({
+            sql: LiveStore.sql `INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')`,
+        })));
+        rerender('u2');
+        expect(result.current.state.id).toBe('u2');
+        expect(result.current.state.username).toBe('username_u2');
+        expect(renderCount.val).toBe(2);
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise));
+    // TODO add a test that makes sure React doesn't re-render when a setter is used to set the same value
+    it('should update the data reactively - via setState', () => Effect.gen(function* () {
+        const { wrapper, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
+            useGlobalReactivityGraph: false,
+        });
+        const renderCount = makeRenderCount();
+        const { result } = renderHook((userId) => {
+            renderCount.inc();
+            const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph });
+            return { state, setState };
+        }, { wrapper, initialProps: 'u1' });
+        expect(result.current.state.id).toBe('u1');
+        expect(result.current.state.username).toBe('');
+        expect(renderCount.val).toBe(1);
+        React.act(() => result.current.setState.username('username_u1_hello'));
+        expect(result.current.state.id).toBe('u1');
+        expect(result.current.state.username).toBe('username_u1_hello');
+        expect(renderCount.val).toBe(2);
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise));
+    it('should update the data reactively - via raw store mutation', () => Effect.gen(function* () {
+        const { wrapper, store, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
+            useGlobalReactivityGraph: false,
+        });
+        const renderCount = makeRenderCount();
+        const { result } = renderHook((userId) => {
+            renderCount.inc();
+            const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph });
+            return { state, setState };
+        }, { wrapper, initialProps: 'u1' });
+        expect(result.current.state.id).toBe('u1');
+        expect(result.current.state.username).toBe('');
+        expect(renderCount.val).toBe(1);
+        React.act(() => store.mutate(LiveStore.rawSqlMutation({
+            sql: LiveStore.sql `UPDATE UserInfo SET username = 'username_u1_hello' WHERE id = 'u1';`,
+        })));
+        expect(result.current.state.id).toBe('u1');
+        expect(result.current.state.username).toBe('username_u1_hello');
+        expect(renderCount.val).toBe(2);
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise));
+    it('should work for a larger app', () => Effect.gen(function* () {
+        const { wrapper, store, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
+            useGlobalReactivityGraph: false,
+        });
+        const allTodos$ = LiveStore.querySQL(`select * from todos`, {
+            label: 'allTodos',
+            schema: Schema.Array(tables.todos.schema),
+            reactivityGraph,
+        });
+        const appRouterRenderCount = makeRenderCount();
+        let globalSetState;
+        const AppRouter = () => {
+            appRouterRenderCount.inc();
+            const [state, setState] = LiveStoreReact.useRow(AppRouterSchema, { reactivityGraph });
+            globalSetState = setState;
+            return (React.createElement("div", null,
+                React.createElement(TasksList, { setTaskId: setState.currentTaskId }),
+                React.createElement("div", { role: "current-id" },
+                    "Current Task Id: ",
+                    state.currentTaskId ?? '-'),
+                state.currentTaskId ? React.createElement(TaskDetails, { id: state.currentTaskId }) : React.createElement("div", null, "Click on a task to see details")));
+        };
+        const TasksList = ({ setTaskId }) => {
+            const allTodos = LiveStoreReact.useQuery(allTodos$);
+            return (React.createElement("div", null, allTodos.map((_) => (React.createElement("div", { key: _.id, onClick: () => setTaskId(_.id) }, _.id)))));
+        };
+        const TaskDetails = ({ id }) => {
+            const [todo] = LiveStoreReact.useRow(todos, id, { reactivityGraph });
+            return React.createElement("div", { role: "content" }, JSON.stringify(todo));
+        };
+        const renderResult = render(React.createElement(AppRouter, null), { wrapper });
+        expect(appRouterRenderCount.val).toBe(1);
+        React.act(() => store.mutate(LiveStore.rawSqlMutation({
+            sql: LiveStore.sql `INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)`,
+        })));
+        expect(appRouterRenderCount.val).toBe(1);
+        expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: -"');
+        React.act(() => globalSetState.currentTaskId('t1'));
+        expect(appRouterRenderCount.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"');
+        React.act(() => store.mutate(LiveStore.rawSqlMutation({
+            sql: LiveStore.sql `INSERT INTO todos (id, text, completed) VALUES ('t2', 'buy eggs', 0)`,
+        }), AppRouterSchema.update({ where: { id: 'singleton' }, values: { currentTaskId: 't2' } }), LiveStore.rawSqlMutation({
+            sql: LiveStore.sql `INSERT INTO todos (id, text, completed) VALUES ('t3', 'buy bread', 0)`,
+        })));
+        expect(appRouterRenderCount.val).toBe(3);
+        expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: t2"');
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise));
+    it('should work for a useRow query chained with a useTemporary query', () => Effect.gen(function* () {
+        const { store, wrapper, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
+            useGlobalReactivityGraph: false,
+        });
+        const renderCount = makeRenderCount();
+        store.mutate(todos.insert({ id: 't1', text: 'buy milk', completed: false }), todos.insert({ id: 't2', text: 'buy bread', completed: false }));
+        const { result, unmount, rerender } = renderHook((userId) => {
+            renderCount.inc();
+            const [_row, _setRow, rowState$] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph });
+            const todos = LiveStoreReact.useTemporaryQuery(() => LiveStore.querySQL((get) => LiveStore.sql `select * from todos where text like '%${get(rowState$).text}%'`, {
+                schema: Schema.Array(tables.todos.schema),
+                reactivityGraph,
+                label: 'todosFiltered',
+            }), userId);
+            return { todos };
+        }, { wrapper, initialProps: 'u1' });
+        React.act(() => store.mutate(LiveStore.rawSqlMutation({
+            sql: LiveStore.sql `INSERT INTO UserInfo (id, username, text) VALUES ('u2', 'username_u2', 'milk')`,
+        })));
+        expect(result.current.todos.length).toBe(2);
+        // expect(result.current.state.username).toBe('')
+        expect(renderCount.val).toBe(1);
+        rerender('u2');
+        expect(result.current.todos.length).toBe(1);
+        expect(renderCount.val).toBe(2);
+        unmount();
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise));
+    let cachedProvider;
+    describe('otel', () => {
+        const exporter = new InMemorySpanExporter();
+        const provider = cachedProvider ?? new BasicTracerProvider();
+        cachedProvider = provider;
+        provider.addSpanProcessor(new SimpleSpanProcessor(exporter));
+        provider.register();
+        const otelTracer = otel.trace.getTracer('test');
+        const span = otelTracer.startSpan('test');
+        const otelContext = otel.trace.setSpan(otel.context.active(), span);
+        it('should update the data based on component key', async () => {
+            const { strictMode } = await Effect.gen(function* () {
+                const { wrapper, store, reactivityGraph, makeRenderCount, strictMode } = yield* makeTodoMvcReact({
+                    useGlobalReactivityGraph: false,
+                    otelContext,
+                    otelTracer,
+                });
+                const renderCount = makeRenderCount();
+                const { result, rerender, unmount } = renderHook((userId) => {
+                    renderCount.inc();
+                    const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph });
+                    return { state, setState };
+                }, { wrapper, initialProps: 'u1' });
+                expect(result.current.state.id).toBe('u1');
+                expect(result.current.state.username).toBe('');
+                expect(renderCount.val).toBe(1);
+                React.act(() => store.mutate(LiveStore.rawSqlMutation({
+                    sql: LiveStore.sql `INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')`,
+                })));
+                rerender('u2');
+                expect(result.current.state.id).toBe('u2');
+                expect(result.current.state.username).toBe('username_u2');
+                expect(renderCount.val).toBe(2);
+                unmount();
+                span.end();
+                return { strictMode };
+            }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise);
+            const mapAttributes = (attributes) => {
+                return ReadonlyRecord.map(attributes, (val, key) => {
+                    if (key === 'stackInfo') {
+                        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;
+                });
+            };
+            // TODO improve testing setup so "obsolete" warning is avoided
+            if (strictMode) {
+                expect(getSimplifiedRootSpan(exporter, mapAttributes)).toMatchSnapshot('strictMode=true');
+            }
+            else {
+                expect(getSimplifiedRootSpan(exporter, mapAttributes)).toMatchSnapshot('strictMode=false');
+            }
+        });
+    });
+});
+//# sourceMappingURL=useRow.test.js.map

package/dist/useRow.test.js.map

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

package/dist/useTemporaryQuery.d.ts

@@ -0,0 +1,22 @@
+import type { QueryInfo } from '@livestore/common';
+import type { LiveQuery } from '@livestore/livestore';
+import * as otel from '@opentelemetry/api';
+import React from 'react';
+export type DepKey = string | number | ReadonlyArray<string | number>;
+/**
+ * Creates a query, subscribes and destroys it when the component unmounts.
+ *
+ * The `key` is used to determine whether the a new query should be created or if the existing one should be reused.
+ */
+export declare const useTemporaryQuery: <TResult>(makeQuery: () => LiveQuery<TResult>, key: DepKey) => TResult;
+export declare const useTemporaryQueryRef: <TResult>(makeQuery: () => LiveQuery<TResult>, key: DepKey) => React.MutableRefObject<TResult>;
+export declare const useMakeTemporaryQuery: <TResult, TQueryInfo extends QueryInfo>(makeQuery: (otelContext: otel.Context) => LiveQuery<TResult, TQueryInfo>, key: DepKey, options?: {
+    otel?: {
+        spanName?: string;
+        attributes?: otel.Attributes;
+    };
+}) => {
+    query$: LiveQuery<TResult, TQueryInfo>;
+    otelContext: otel.Context;
+};
+//# sourceMappingURL=useTemporaryQuery.d.ts.map

package/dist/useTemporaryQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTemporaryQuery.d.ts","sourceRoot":"","sources":["../src/useTemporaryQuery.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,KAAK,IAAI,MAAM,oBAAoB,CAAA;AAC1C,OAAO,KAAK,MAAM,OAAO,CAAA;AAuBzB,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;AAErE;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,OAAO,aAAa,MAAM,SAAS,CAAC,OAAO,CAAC,OAAO,MAAM,KAAG,OAChD,CAAA;AAE9C,eAAO,MAAM,oBAAoB,GAAI,OAAO,aAC/B,MAAM,SAAS,CAAC,OAAO,CAAC,OAC9B,MAAM,KACV,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAIhC,CAAA;AAED,eAAO,MAAM,qBAAqB,GAAI,OAAO,EAAE,UAAU,SAAS,SAAS,aAC9D,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,OACnE,MAAM,YACD;IACR,IAAI,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,CAAA;KAC7B,CAAA;CACF,KACA;IAAE,MAAM,EAAE,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAAC,WAAW,EAAE,IAAI,CAAC,OAAO,CAAA;CA4ErE,CAAA"}

package/dist/useTemporaryQuery.js

@@ -0,0 +1,75 @@
+import * as otel from '@opentelemetry/api';
+import React from 'react';
+import { useStore } from './LiveStoreContext.js';
+import { useQueryRef } from './useQuery.js';
+// NOTE Given `useMemo` will be called multiple times (e.g. when using React Strict mode or Fast Refresh),
+// we are using this cache to avoid starting multiple queries/spans for the same component.
+// This is somewhat against some recommended React best practices, but it should be fine in our case below.
+// Please definitely open an issue if you see or run into any problems with this approach!
+const cache = new Map();
+/**
+ * Creates a query, subscribes and destroys it when the component unmounts.
+ *
+ * The `key` is used to determine whether the a new query should be created or if the existing one should be reused.
+ */
+export const useTemporaryQuery = (makeQuery, key) => useTemporaryQueryRef(makeQuery, key).current;
+export const useTemporaryQueryRef = (makeQuery, key) => {
+    const { query$ } = useMakeTemporaryQuery(makeQuery, key);
+    return useQueryRef(query$);
+};
+export const useMakeTemporaryQuery = (makeQuery, key, options) => {
+    const { store } = useStore();
+    const fullKey = React.useMemo(
+    // NOTE We're using the `makeQuery` function body string to make sure the key is unique across the app
+    // TODO we should figure out whether this could cause some problems and/or if there's a better way to do this
+    () => (Array.isArray(key) ? key.join('-') : key) + '-' + store.reactivityGraph.id + '-' + makeQuery.toString(), [key, makeQuery, store.reactivityGraph.id]);
+    const fullKeyRef = React.useRef();
+    const { query$, otelContext } = React.useMemo(() => {
+        if (fullKeyRef.current !== undefined && fullKeyRef.current !== fullKey) {
+            // console.debug('fullKey changed', 'prev', fullKeyRef.current.split('-')[0]!, '-> new', fullKey.split('-')[0]!)
+            const cachedItem = cache.get(fullKeyRef.current);
+            if (cachedItem !== undefined && cachedItem._tag === 'active') {
+                cachedItem.rc--;
+                if (cachedItem.rc === 0) {
+                    // console.debug('rc=0-changed', cachedItem.query$.id, cachedItem.query$.label)
+                    cachedItem.query$.destroy();
+                    cachedItem.span.end();
+                    cache.set(fullKeyRef.current, { _tag: 'destroyed' });
+                }
+            }
+        }
+        const cachedItem = cache.get(fullKey);
+        if (cachedItem !== undefined && cachedItem._tag === 'active') {
+            // console.debug('rc++', cachedItem.query$.id, cachedItem.query$.label)
+            cachedItem.rc++;
+            return cachedItem;
+        }
+        const spanName = options?.otel?.spanName ?? `LiveStore:useTemporaryQuery:${key}`;
+        const span = store.otel.tracer.startSpan(spanName, { attributes: options?.otel?.attributes }, store.otel.queriesSpanContext);
+        const otelContext = otel.trace.setSpan(otel.context.active(), span);
+        const query$ = makeQuery(otelContext);
+        cache.set(fullKey, { _tag: 'active', rc: 1, query$, span, otelContext });
+        return { query$, otelContext };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [fullKey]);
+    fullKeyRef.current = fullKey;
+    React.useEffect(() => {
+        return () => {
+            const fullKey = fullKeyRef.current;
+            const cachedItem = cache.get(fullKey);
+            // NOTE in case the fullKey changed then the query was already destroyed in the useMemo above
+            if (cachedItem === undefined || cachedItem._tag === 'destroyed')
+                return;
+            // console.debug('rc--', cachedItem.query$.id, cachedItem.query$.label)
+            cachedItem.rc--;
+            if (cachedItem.rc === 0) {
+                // console.debug('rc=0', cachedItem.query$.id, cachedItem.query$.label)
+                cachedItem.query$.destroy();
+                cachedItem.span.end();
+                cache.delete(fullKey);
+            }
+        };
+    }, []);
+    return { query$, otelContext };
+};
+//# sourceMappingURL=useTemporaryQuery.js.map

package/dist/useTemporaryQuery.js.map

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

package/dist/useTemporaryQuery.test.d.ts

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

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

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

package/dist/useTemporaryQuery.test.js

@@ -0,0 +1,59 @@
+import * as LiveStore from '@livestore/livestore';
+import { querySQL } from '@livestore/livestore';
+import { Effect, Schema } from '@livestore/utils/effect';
+import { render, renderHook } from '@testing-library/react';
+import React from 'react';
+// @ts-expect-error no types
+import * as ReactWindow from 'react-window';
+import { describe, expect, it } from 'vitest';
+import { makeTodoMvcReact, tables, todos } from './__tests__/fixture.js';
+import * as LiveStoreReact from './mod.js';
+describe('useTemporaryQuery', () => {
+    it('simple', () => Effect.gen(function* () {
+        const { wrapper, store, makeRenderCount } = yield* makeTodoMvcReact();
+        const renderCount = makeRenderCount();
+        store.mutate(todos.insert({ id: 't1', text: 'buy milk', completed: false }), todos.insert({ id: 't2', text: 'buy bread', completed: false }));
+        const queryMap = new Map();
+        const { rerender, result, unmount } = renderHook((id) => {
+            renderCount.inc();
+            return LiveStoreReact.useTemporaryQuery(() => {
+                const query$ = querySQL(`select * from todos where id = '${id}'`, {
+                    schema: Schema.Array(tables.todos.schema),
+                });
+                queryMap.set(id, query$);
+                return query$;
+            }, id);
+        }, { wrapper, initialProps: 't1' });
+        expect(result.current.length).toBe(1);
+        expect(result.current[0].text).toBe('buy milk');
+        expect(renderCount.val).toBe(1);
+        expect(queryMap.get('t1').runs).toBe(1);
+        rerender('t2');
+        expect(result.current.length).toBe(1);
+        expect(result.current[0].text).toBe('buy bread');
+        expect(renderCount.val).toBe(2);
+        expect(queryMap.get('t1').runs).toBe(1);
+        expect(queryMap.get('t2').runs).toBe(1);
+        unmount();
+        expect(queryMap.get('t2').runs).toBe(1);
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise));
+    // NOTE this test covers some special react lifecyle paths which I couldn't easily reproduce without react-window
+    // it basically causes a "query swap" in the `useMemo` and both a `useEffect` cleanup call.
+    // To handle this properly we introduced the `_tag: 'destroyed'` state in the `spanAlreadyStartedCache`.
+    it('should work for a list with react-window', () => Effect.gen(function* () {
+        const { wrapper } = yield* makeTodoMvcReact();
+        const ListWrapper = ({ numItems }) => {
+            return (React.createElement(ReactWindow.FixedSizeList, { height: 100, width: 100, itemSize: 10, itemCount: numItems, itemData: Array.from({ length: numItems }, (_, i) => i).reverse() }, ListItem));
+        };
+        const ListItem = ({ data: ids, index }) => {
+            const id = ids[index];
+            const res = LiveStoreReact.useTemporaryQuery(() => LiveStore.computed(() => id, { label: `ListItem.${id}` }), id);
+            return React.createElement("div", { role: "listitem" }, res);
+        };
+        const renderResult = render(React.createElement(ListWrapper, { numItems: 1 }), { wrapper });
+        expect(renderResult.container.textContent).toBe('0');
+        renderResult.rerender(React.createElement(ListWrapper, { numItems: 2 }));
+        expect(renderResult.container.textContent).toBe('10');
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise));
+});
+//# sourceMappingURL=useTemporaryQuery.test.js.map

package/dist/useTemporaryQuery.test.js.map

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

package/dist/utils/stack-info.d.ts

@@ -0,0 +1,4 @@
+import { type StackInfo } from '@livestore/livestore';
+export declare const originalStackLimit: number;
+export declare const useStackInfo: () => StackInfo;
+//# sourceMappingURL=stack-info.d.ts.map

package/dist/utils/stack-info.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack-info.d.ts","sourceRoot":"","sources":["../../src/utils/stack-info.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAGrF,eAAO,MAAM,kBAAkB,QAAwB,CAAA;AAEvD,eAAO,MAAM,YAAY,QAAO,SAOxB,CAAA"}

package/dist/utils/stack-info.js

@@ -0,0 +1,11 @@
+import { extractStackInfoFromStackTrace } from '@livestore/livestore';
+import React from 'react';
+export const originalStackLimit = Error.stackTraceLimit;
+export const useStackInfo = () => React.useMemo(() => {
+    Error.stackTraceLimit = 10;
+    // eslint-disable-next-line unicorn/error-message
+    const stack = new Error().stack;
+    Error.stackTraceLimit = originalStackLimit;
+    return extractStackInfoFromStackTrace(stack);
+}, []);
+//# sourceMappingURL=stack-info.js.map

package/dist/utils/stack-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack-info.js","sourceRoot":"","sources":["../../src/utils/stack-info.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,8BAA8B,EAAkB,MAAM,sBAAsB,CAAA;AACrF,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,eAAe,CAAA;AAEvD,MAAM,CAAC,MAAM,YAAY,GAAG,GAAc,EAAE,CAC1C,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;IACjB,KAAK,CAAC,eAAe,GAAG,EAAE,CAAA;IAC1B,iDAAiD;IACjD,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC,KAAM,CAAA;IAChC,KAAK,CAAC,eAAe,GAAG,kBAAkB,CAAA;IAC1C,OAAO,8BAA8B,CAAC,KAAK,CAAC,CAAA;AAC9C,CAAC,EAAE,EAAE,CAAC,CAAA"}

package/dist/utils/useStateRefWithReactiveInput.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+/**
+ * A variant of `React.useState` which allows the `inputState` to change over time as well.
+ * Important: This hook is synchronous / single-render-pass (i.e. doesn't use `useEffect` or `setState` directly).
+ *
+ * Notes:
+ * - The output state is always reset to the input state in case the input state changes (i.e. the previous "external" `setStateAndRerender` call is forgotten)
+ * - This hook might not work properly with React Suspense
+ * - Also see this Tweet for more potential problems: https://twitter.com/schickling/status/1677317711104278528
+ *
+ */
+export declare const useStateRefWithReactiveInput: <T>(inputState: T) => [React.MutableRefObject<T>, (newState: T | ((prev: T) => T)) => void];
+//# sourceMappingURL=useStateRefWithReactiveInput.d.ts.map

package/dist/utils/useStateRefWithReactiveInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStateRefWithReactiveInput.d.ts","sourceRoot":"","sources":["../../src/utils/useStateRefWithReactiveInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;GASG;AACH,eAAO,MAAM,4BAA4B,GAAI,CAAC,cAChC,CAAC,KACZ,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAwBtE,CAAA"}

package/dist/utils/useStateRefWithReactiveInput.js

@@ -0,0 +1,38 @@
+import React from 'react';
+/**
+ * A variant of `React.useState` which allows the `inputState` to change over time as well.
+ * Important: This hook is synchronous / single-render-pass (i.e. doesn't use `useEffect` or `setState` directly).
+ *
+ * Notes:
+ * - The output state is always reset to the input state in case the input state changes (i.e. the previous "external" `setStateAndRerender` call is forgotten)
+ * - This hook might not work properly with React Suspense
+ * - Also see this Tweet for more potential problems: https://twitter.com/schickling/status/1677317711104278528
+ *
+ */
+export const useStateRefWithReactiveInput = (inputState) => {
+    const [_, rerender] = React.useState(0);
+    const lastKnownInputStateRef = React.useRef(inputState);
+    const stateRef = React.useRef(inputState);
+    if (lastKnownInputStateRef.current !== inputState) {
+        lastKnownInputStateRef.current = inputState;
+        // NOTE we don't need to re-render here, because the component is already re-rendering due to the `inputState` change
+        stateRef.current = inputState;
+    }
+    const setStateAndRerender = React.useCallback((newState) => {
+        // @ts-expect-error https://github.com/microsoft/TypeScript/issues/37663
+        const val = typeof newState === 'function' ? newState(stateRef.current) : newState;
+        stateRef.current = val;
+        rerender((c) => c + 1);
+    }, [rerender]);
+    return [stateRef, setStateAndRerender];
+};
+// Down-side of this implementation: Double render pass due to `setState` call (which forces a re-render)
+// Keeping around for now in case `useStateRefWithReactiveInput` doesn't work out
+// const _useStateWithReactiveInput = <T>(inputState: T): [T, (newState: T | ((prev: T) => T)) => void] => {
+//   const [externalState, setExternalState] = React.useState(inputState)
+//   if (externalState !== inputState) {
+//     setExternalState(inputState)
+//   }
+//   return [externalState, setExternalState]
+// }
+//# sourceMappingURL=useStateRefWithReactiveInput.js.map

package/dist/utils/useStateRefWithReactiveInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStateRefWithReactiveInput.js","sourceRoot":"","sources":["../../src/utils/useStateRefWithReactiveInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAC1C,UAAa,EAC0D,EAAE;IACzE,MAAM,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IAEvC,MAAM,sBAAsB,GAAG,KAAK,CAAC,MAAM,CAAI,UAAU,CAAC,CAAA;IAC1D,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAI,UAAU,CAAC,CAAA;IAE5C,IAAI,sBAAsB,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;QAClD,sBAAsB,CAAC,OAAO,GAAG,UAAU,CAAA;QAE3C,qHAAqH;QACrH,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAA;IAC/B,CAAC;IAED,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAC3C,CAAC,QAA8B,EAAE,EAAE;QACjC,wEAAwE;QACxE,MAAM,GAAG,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;QAClF,QAAQ,CAAC,OAAO,GAAG,GAAG,CAAA;QACtB,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;IACxB,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,OAAO,CAAC,QAAQ,EAAE,mBAAmB,CAAC,CAAA;AACxC,CAAC,CAAA;AAED,yGAAyG;AACzG,iFAAiF;AACjF,4GAA4G;AAC5G,yEAAyE;AAEzE,wCAAwC;AACxC,mCAAmC;AACnC,MAAM;AAEN,6CAA6C;AAC7C,IAAI"}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@livestore/react",
+  "version": "0.0.0-snapshot-8d3edf87cb1e88c7b67c5f3ea9d0b307253c33df",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/mod.d.ts",
+      "default": "./dist/mod.js"
+    },
+    "./experimental": {
+      "types": "./dist/experimental/mod.d.ts",
+      "default": "./dist/experimental/mod.js"
+    }
+  },
+  "types": "./dist/mod.d.ts",
+  "typesVersions": {
+    "*": {
+      "./experimental": [
+        "./dist/experimental/mod.d.ts"
+      ]
+    }
+  },
+  "dependencies": {
+    "@opentelemetry/api": "^1.9.0",
+    "@livestore/common": "0.0.0-snapshot-8d3edf87cb1e88c7b67c5f3ea9d0b307253c33df",
+    "@livestore/utils": "0.0.0-snapshot-8d3edf87cb1e88c7b67c5f3ea9d0b307253c33df",
+    "@livestore/livestore": "0.0.0-snapshot-8d3edf87cb1e88c7b67c5f3ea9d0b307253c33df",
+    "@livestore/db-schema": "0.0.0-snapshot-8d3edf87cb1e88c7b67c5f3ea9d0b307253c33df"
+  },
+  "devDependencies": {
+    "@opentelemetry/sdk-trace-base": "1.27.0",
+    "@testing-library/react": "^16.0.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-window": "^1.8.10",
+    "typescript": "5.6.3",
+    "vite": "5.4.10",
+    "vitest": "^2.1.4",
+    "@livestore/web": "0.0.0-snapshot-8d3edf87cb1e88c7b67c5f3ea9d0b307253c33df"
+  },
+  "peerDependencies": {
+    "react": "^18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest && REACT_STRICT_MODE=1 vitest"
+  }
+}

package/src/LiveStoreContext.ts

@@ -0,0 +1,19 @@
+import type { Store } from '@livestore/livestore'
+import type { LiveStoreContextRunning as LiveStoreContext_ } from '@livestore/livestore/effect'
+import React, { useContext } from 'react'
+
+export const LiveStoreContext = React.createContext<LiveStoreContext_ | undefined>(undefined)
+
+export const useStore = (): { store: Store } => {
+  const storeContext = useContext(LiveStoreContext)
+
+  if (storeContext === undefined) {
+    throw new Error(`useStore can only be used inside StoreContext.Provider`)
+  }
+
+  if (storeContext.stage !== 'running') {
+    throw new Error(`useStore can only be used after the store is running`)
+  }
+
+  return storeContext
+}