@livestore/livestore 0.0.0

package/dist/react/StoreContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoreContext.js","sourceRoot":"","sources":["../../src/react/StoreContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAYzC,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAA4B,SAAS,CAAC,CAAA;AAErF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAkB,EAAE;IAC1C,MAAM,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IAE7C,IAAI,YAAY,KAAK,SAAS,EAAE;QAC9B,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAA;KAC1E;IAED,OAAO,YAAY,CAAA;AACrB,CAAC,CAAA"}

package/dist/react/index.d.ts

@@ -0,0 +1,7 @@
+export type { UseLiveStoreComponentProps as LiveStoreComponentConfig, ReactiveGraphQL, ReactiveSQL, Setters, } from './useLiveStoreComponent.js';
+export { LiveStoreContext, useStore } from './LiveStoreContext.js';
+export { LiveStoreProvider } from './LiveStoreProvider.js';
+export { useLiveStoreComponent } from './useLiveStoreComponent.js';
+export { useGraphQL } from './useGraphQL.js';
+export { useGlobalQuery } from './useGlobalQuery.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,0BAA0B,IAAI,wBAAwB,EACtD,eAAe,EACf,WAAW,EACX,OAAO,GACR,MAAM,4BAA4B,CAAA;AACnC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/react/index.js

@@ -0,0 +1,6 @@
+export { LiveStoreContext, useStore } from './LiveStoreContext.js';
+export { LiveStoreProvider } from './LiveStoreProvider.js';
+export { useLiveStoreComponent } from './useLiveStoreComponent.js';
+export { useGraphQL } from './useGraphQL.js';
+export { useGlobalQuery } from './useGlobalQuery.js';
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/react/useGlobalQuery.d.ts

@@ -0,0 +1,3 @@
+import type { LiveStoreQuery, QueryResult } from '../store.js';
+export declare const useGlobalQuery: <Q extends LiveStoreQuery>(query: Q) => QueryResult<Q>;
+//# sourceMappingURL=useGlobalQuery.d.ts.map

package/dist/react/useGlobalQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGlobalQuery.d.ts","sourceRoot":"","sources":["../../src/react/useGlobalQuery.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9D,eAAO,MAAM,cAAc,wDAiC1B,CAAA"}

package/dist/react/useGlobalQuery.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import { labelForKey } from '../componentKey.js';
+import { TODO_REMOVE_trackLongRunningSpan } from '../otel.js';
+export const useGlobalQuery = (query) => {
+    // We know the query has a result by the time we use it; so we can synchronously populate a default state
+    const [value, setValue] = useState(query.results$.result);
+    // Subscribe to future updates for this query
+    useEffect(() => {
+        return query.store.otel.tracer.startActiveSpan(`LiveStore:useGlobalQuery:${labelForKey(query.componentKey)}:${query.label}`, {}, query.store.otel.queriesSpanContext, (span) => {
+            TODO_REMOVE_trackLongRunningSpan(span);
+            const cancel = query.store.subscribe(query, (v) => {
+                // 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.
+                return setValue(v);
+            }, undefined, { label: query.label });
+            return () => {
+                cancel();
+                span.end();
+            };
+        });
+    }, [query]);
+    return value;
+};
+//# sourceMappingURL=useGlobalQuery.js.map

package/dist/react/useGlobalQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGlobalQuery.js","sourceRoot":"","sources":["../../src/react/useGlobalQuery.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,gCAAgC,EAAE,MAAM,YAAY,CAAA;AAG7D,MAAM,CAAC,MAAM,cAAc,GAAG,CAA2B,KAAQ,EAAkB,EAAE;IACnF,yGAAyG;IACzG,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAiB,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;IAEzE,6CAA6C;IAC7C,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,CAC5C,4BAA4B,WAAW,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,KAAK,CAAC,KAAK,EAAE,EAC5E,EAAE,EACF,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,kBAAkB,EACnC,CAAC,IAAI,EAAE,EAAE;YACP,gCAAgC,CAAC,IAAI,CAAC,CAAA;YAEtC,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,SAAS,CAClC,KAAK,EACL,CAAC,CAAC,EAAE,EAAE;gBACJ,qEAAqE;gBACrE,kEAAkE;gBAClE,sCAAsC;gBACtC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAA;YACpB,CAAC,EACD,SAAS,EACT,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CACvB,CAAA;YACD,OAAO,GAAG,EAAE;gBACV,MAAM,EAAE,CAAA;gBACR,IAAI,CAAC,GAAG,EAAE,CAAA;YACZ,CAAC,CAAA;QACH,CAAC,CACF,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}

package/dist/react/useGraphQL.d.ts

@@ -0,0 +1,11 @@
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+import React from 'react';
+import { type ComponentKeyConfig } from './useLiveStoreComponent.js';
+export type UseLiveStoreComponentProps<TResult extends Record<string, any>, TVariables extends Record<string, any>> = {
+    query: DocumentNode<TResult, TVariables>;
+    variables: TVariables;
+    componentKey: ComponentKeyConfig;
+    reactDeps?: React.DependencyList;
+};
+export declare const useGraphQL: <TResult extends Record<string, any>, TVariables extends Record<string, any> = {}>({ query, variables, componentKey: componentKeyConfig, reactDeps, }: UseLiveStoreComponentProps<TResult, TVariables>) => Readonly<TResult>;
+//# sourceMappingURL=useGraphQL.d.ts.map

package/dist/react/useGraphQL.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGraphQL.d.ts","sourceRoot":"","sources":["../../src/react/useGraphQL.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,IAAI,YAAY,EAAE,MAAM,mCAAmC,CAAA;AAG1F,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAE,KAAK,kBAAkB,EAAmB,MAAM,4BAA4B,CAAA;AAGrF,MAAM,MAAM,0BAA0B,CAAC,OAAO,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IACpH,KAAK,EAAE,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC,CAAA;IACxC,SAAS,EAAE,UAAU,CAAA;IACrB,YAAY,EAAE,kBAAkB,CAAA;IAChC,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAA;CACjC,CAAA;AAWD,eAAO,MAAM,UAAU,8NAsFtB,CAAA"}

package/dist/react/useGraphQL.js

@@ -0,0 +1,68 @@
+import * as otel from '@opentelemetry/api';
+import { isEqual } from 'lodash-es';
+import React from 'react';
+import { labelForKey } from '../componentKey.js';
+import { useStore } from './LiveStoreContext.js';
+import { useComponentKey } from './useLiveStoreComponent.js';
+import { useStateRefWithReactiveInput } from './utils/useStateRefWithReactiveInput.js';
+/**
+ * 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();
+// TODO 1) figure out a way to make `variables` optional if the query doesn't have any variables (probably requires positional args)
+// TODO 2) allow `.pipe` on the resulting query (possibly as a separate optional prop)
+export const useGraphQL = ({ query, variables, componentKey: componentKeyConfig, reactDeps = [], }) => {
+    const componentKey = useComponentKey(componentKeyConfig, reactDeps);
+    const { store } = useStore();
+    const componentKeyLabel = React.useMemo(() => labelForKey(componentKey), [componentKey]);
+    // The following `React.useMemo` and `React.useEffect` calls are used to start and end a span for the lifetime of this component.
+    const { span, otelCtx } = React.useMemo(() => {
+        const existingSpan = spanAlreadyStartedCache.get(componentKeyLabel);
+        if (existingSpan !== undefined)
+            return existingSpan;
+        const span = store.otel.tracer.startSpan(`LiveStore:useGraphQL:${componentKeyLabel}`, {}, store.otel.queriesSpanContext);
+        const otelCtx = otel.trace.setSpan(otel.context.active(), span);
+        spanAlreadyStartedCache.set(componentKeyLabel, { span, otelCtx });
+        return { span, otelCtx };
+    }, [componentKeyLabel, store.otel.queriesSpanContext, store.otel.tracer]);
+    React.useEffect(() => () => {
+        spanAlreadyStartedCache.delete(componentKeyLabel);
+        span.end();
+    }, [componentKeyLabel, span]);
+    const makeLiveStoreQuery = React.useCallback(() => store.queryGraphQL(query, () => variables ?? {}, { componentKey }, otelCtx), 
+    // NOTE: we don't include the queries function passed in by the user here;
+    // the reason is that we don't want to force them to memoize that function.
+    // Instead, we just assume that the function always has the same contents.
+    // This makes sense for LiveStore because the component config should be static.
+    // TODO: document this and consider whether it's the right API surface.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [componentKey, store]);
+    // TODO get rid of the temporary query workaround
+    const initialQueryResults = React.useMemo(() => store.inTempQueryContext(() => makeLiveStoreQuery().results$.result), [makeLiveStoreQuery, store]);
+    const [queryResultsRef, setQueryResults_] = useStateRefWithReactiveInput(initialQueryResults);
+    React.useEffect(() => {
+        const liveStoreQuery = makeLiveStoreQuery();
+        const unsubscribe = store.subscribe(liveStoreQuery, (results) => {
+            if (isEqual(results, queryResultsRef.current) === false) {
+                setQueryResults_(results);
+            }
+        }, undefined, { label: `useGraphQL:query:subscribe:${liveStoreQuery.label}` });
+        return () => {
+            unsubscribe();
+        };
+        // NOTE `setQueryResults_` from the deps array as it seems to cause an infinite loop
+        // This should probably be improved
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        otelCtx,
+        makeLiveStoreQuery,
+        // setQueryResults_,
+        store,
+    ]);
+    // Very important: remove any queries / other resources associated w/ this component
+    React.useEffect(() => () => store.unmountComponent(componentKey), [store, componentKey]);
+    return queryResultsRef.current;
+};
+//# sourceMappingURL=useGraphQL.js.map

package/dist/react/useGraphQL.js.map

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

package/dist/react/useLiveStoreComponent.d.ts

@@ -0,0 +1,70 @@
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+import { type LiteralUnion } from '@livestore/utils';
+import type { DependencyList } from 'react';
+import React from 'react';
+import type { ComponentKey } from '../componentKey.js';
+import type { GetAtom } from '../reactive.js';
+import type { LiveStoreGraphQLQuery } from '../reactiveQueries/graphql.js';
+import type { LiveStoreJSQuery } from '../reactiveQueries/js.js';
+import type { LiveStoreSQLQuery } from '../reactiveQueries/sql.js';
+import type { ComponentStateSchema } from '../schema.js';
+import type { BaseGraphQLContext, LiveStoreQuery, QueryResult } from '../store.js';
+export interface QueryDefinitions {
+    [queryName: string]: LiveStoreQuery;
+}
+export type QueryResults<TQuery> = {
+    [queryName in keyof TQuery]: QueryResult<TQuery[queryName]>;
+};
+export type ReactiveSQL = <TResult>(genQuery: (get: GetAtom) => string, queriedTables: string[]) => LiveStoreSQLQuery<TResult>;
+export type ReactiveGraphQL = <TResult extends Record<string, any>, TVariables extends Record<string, any>, TContext extends BaseGraphQLContext>(query: DocumentNode<TResult, TVariables>, genVariableValues: (get: GetAtom) => TVariables, label?: string) => LiveStoreGraphQLQuery<TResult, TVariables, TContext>;
+type RegisterSubscription = <TQuery extends LiveStoreQuery>(query: TQuery, onNewValue: (value: QueryResult<TQuery>) => void, onUnsubscribe?: () => void) => void;
+type GenQueries<TQueries, TStateResult> = (args: {
+    rxSQL: ReactiveSQL;
+    rxGraphQL: ReactiveGraphQL;
+    globalQueries: QueryDefinitions;
+    state$: LiveStoreJSQuery<TStateResult>;
+    /** Registers a subscription */
+    subscribe: RegisterSubscription;
+    isTemporaryQuery: boolean;
+}) => TQueries;
+export type UseLiveStoreComponentProps<TQueries, TComponentState> = {
+    stateSchema?: ComponentStateSchema<TComponentState>;
+    queries?: GenQueries<TQueries, TComponentState>;
+    reactDeps?: React.DependencyList;
+    componentKey: ComponentKeyConfig;
+};
+export type ComponentKeyConfig = {
+    /**
+     * Name of the Component
+     *
+     * TODO we should eventually derive this info automatically from the component (TBD how though...)
+     */
+    name: string;
+    id: LiteralUnion<'singleton' | '__ephemeral__', string>;
+};
+type ComponentState = {
+    /** Equivalent to `componentKey.key` */
+    id: string;
+    [key: string]: string | number | boolean | null;
+};
+type UseLiveStoreJsonState<TState> = <TResult>(jsonStringKey: keyof TState, parse?: (_: unknown) => TResult) => [value: TResult, setValue: (newVal: TResult | ((prevVal: TResult) => TResult)) => void];
+/**
+ * Create reactive queries within a component.
+ * @param config.queries A function that returns a map of named reactive queries.
+ * @param config.componentKey A function that returns a unique key for this component.
+ * @param config.reactDeps A list of React-level dependencies that will refresh the queries.
+ */
+export declare const useLiveStoreComponent: <TComponentState extends ComponentState, TQueries extends QueryDefinitions>({ stateSchema: stateSchema_, queries, componentKey: componentKeyConfig, reactDeps, }: UseLiveStoreComponentProps<TQueries, TComponentState>) => {
+    queryResults: QueryResults<TQueries>;
+    state: TComponentState;
+    setState: Setters<TComponentState>;
+    useLiveStoreJsonState: UseLiveStoreJsonState<TComponentState>;
+};
+export type Setters<TComponentState> = {
+    [k in keyof TComponentState]: (newValue: TComponentState[k]) => void;
+} & {
+    setMany: (newValues: Partial<TComponentState>) => void;
+};
+export declare const useComponentKey: ({ name, id }: ComponentKeyConfig, deps?: DependencyList) => ComponentKey;
+export {};
+//# sourceMappingURL=useLiveStoreComponent.d.ts.map

package/dist/react/useLiveStoreComponent.d.ts.map

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

package/dist/react/useLiveStoreComponent.js

@@ -0,0 +1,261 @@
+import { omit, shouldNeverHappen } from '@livestore/utils';
+import * as otel from '@opentelemetry/api';
+import { isEqual, mapValues } from 'lodash-es';
+import React from 'react';
+import { v4 as uuid } from 'uuid';
+import { labelForKey, tableNameForComponentKey } from '../componentKey.js';
+import { sql } from '../util.js';
+import { useStore } from './LiveStoreContext.js';
+import { useStateRefWithReactiveInput } from './utils/useStateRefWithReactiveInput.js';
+/**
+ * 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();
+/**
+ * Create reactive queries within a component.
+ * @param config.queries A function that returns a map of named reactive queries.
+ * @param config.componentKey A function that returns a unique key for this component.
+ * @param config.reactDeps A list of React-level dependencies that will refresh the queries.
+ */
+export const useLiveStoreComponent = ({ stateSchema: stateSchema_, queries = () => ({}), componentKey: componentKeyConfig, reactDeps = [], }) => {
+    // TODO we should clean up the state schema handling to remove this special handling for the `id` column
+    const stateSchema = React.useMemo(() => (stateSchema_ ? { ...stateSchema_, columns: omit(stateSchema_.columns, 'id') } : undefined), [stateSchema_]);
+    // performance.mark('useLiveStoreComponent:start')
+    const componentKey = useComponentKey(componentKeyConfig, reactDeps);
+    const { store, globalQueries } = useStore();
+    const componentKeyLabel = React.useMemo(() => labelForKey(componentKey), [componentKey]);
+    // The following `React.useMemo` and `React.useEffect` calls are used to start and end a span for the lifetime of this component.
+    const { span, otelCtx } = React.useMemo(() => {
+        const existingSpan = spanAlreadyStartedCache.get(componentKeyLabel);
+        if (existingSpan !== undefined)
+            return existingSpan;
+        const span = store.otel.tracer.startSpan(`LiveStore:useLiveStoreComponent:${componentKeyLabel}`, {}, store.otel.queriesSpanContext);
+        const otelCtx = otel.trace.setSpan(otel.context.active(), span);
+        spanAlreadyStartedCache.set(componentKeyLabel, { span, otelCtx });
+        return { span, otelCtx };
+    }, [componentKeyLabel, store.otel.queriesSpanContext, store.otel.tracer]);
+    React.useEffect(() => () => {
+        spanAlreadyStartedCache.delete(componentKeyLabel);
+        span.end();
+    }, [componentKeyLabel, span]);
+    const generateQueries = React.useCallback(({ state$, otelCtx, registerSubscription, isTemporaryQuery, }) => queries({
+        rxSQL: (genQuery, queriedTables) => store.querySQL(genQuery, queriedTables, undefined, componentKey, undefined, otelCtx),
+        rxGraphQL: (query, genVariableValues, label) => store.queryGraphQL(query, genVariableValues, { componentKey, label }, otelCtx),
+        globalQueries,
+        state$,
+        subscribe: registerSubscription,
+        isTemporaryQuery,
+    }), 
+    // NOTE: we don't include the queries function passed in by the user here;
+    // the reason is that we don't want to force them to memoize that function.
+    // Instead, we just assume that the function always has the same contents.
+    // This makes sense for LiveStore because the component config should be static.
+    // TODO: document this and consider whether it's the right API surface.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store, componentKey, globalQueries]);
+    const defaultComponentState = React.useMemo(() => {
+        const defaultState = (stateSchema === undefined ? {} : mapValues(stateSchema.columns, (c) => c.default));
+        defaultState.id = componentKeyConfig.id;
+        return defaultState;
+    }, [componentKeyConfig.id, stateSchema]);
+    // Step 1:
+    // Synchronously create state and queries for initial render pass.
+    // We do this in a temporary query context which cleans up after itself, making it idempotent
+    // TODO get rid of the temporary query workaround
+    const { initialComponentState, initialQueryResults } = React.useMemo(() => {
+        return store.otel.tracer.startActiveSpan('LiveStore:useLiveStoreComponent:initial', {}, otelCtx, (span) => {
+            const otelCtx = otel.trace.setSpan(otel.context.active(), span);
+            return store.inTempQueryContext(() => {
+                try {
+                    // create state query
+                    let stateQuery;
+                    if (stateSchema === undefined) {
+                        // TODO don't set up a query if there's no state schema (keeps the graph more clean)
+                        stateQuery = store.queryJS(() => ({}), componentKey, undefined, otelCtx);
+                    }
+                    else {
+                        const componentTableName = tableNameForComponentKey(componentKey);
+                        const whereClause = componentKey._tag === 'singleton' ? '' : `where id = '${componentKey.id}'`;
+                        stateQuery = store
+                            .querySQL(() => sql `select * from ${componentTableName} ${whereClause} limit 1`, [componentTableName], undefined, componentKey, `localState:query:${componentKeyLabel}`, otelCtx)
+                            .getFirstRow({ defaultValue: defaultComponentState });
+                    }
+                    const initialComponentState = stateQuery.results$.result;
+                    const queries = generateQueries({
+                        state$: stateQuery,
+                        otelCtx,
+                        registerSubscription: () => { },
+                        isTemporaryQuery: true,
+                    });
+                    for (const [name, query] of Object.entries(queries)) {
+                        query.label = name;
+                    }
+                    const initialQueryResults = mapValues(queries, (query) => query.results$.result);
+                    return { initialComponentState, initialQueryResults };
+                }
+                finally {
+                    span.end();
+                }
+            });
+        });
+    }, [store, otelCtx, stateSchema, generateQueries, componentKey, componentKeyLabel, defaultComponentState]);
+    // Now that we've computed the initial state synchronously,
+    // we can set up our useState calls w/ a default value populated...
+    const [componentStateRef, setComponentState_] = useStateRefWithReactiveInput(initialComponentState);
+    const [queryResultsRef, setQueryResults_] = useStateRefWithReactiveInput(initialQueryResults);
+    const setState = (stateSchema === undefined
+        ? {}
+        : // TODO: do we have a better type for the values that can go in SQLite?
+            mapValues(stateSchema.columns, (_, columnName) => (value) => {
+                // Don't update the state if it's the same as the value already seen in the component
+                if (componentStateRef.current[columnName] === value)
+                    return;
+                if (['componentKey', 'columnNames'].includes(columnName)) {
+                    shouldNeverHappen(`Can't use reserved column name ${columnName}`);
+                }
+                return store.applyEvent('updateComponentState', {
+                    componentKey,
+                    columnNames: [columnName],
+                    [columnName]: value,
+                });
+            }));
+    setState.setMany = (columnValues) => {
+        // TODO use hashing instead
+        // Don't update the state if it's the same as the value already seen in the component
+        if (Object.entries(columnValues).every(([columnName, value]) => componentStateRef.current[columnName] === value)) {
+            return;
+        }
+        const columnNames = Object.keys(columnValues);
+        return store.applyEvent('updateComponentState', { componentKey, columnNames, ...columnValues });
+    };
+    // OK, now all the synchronous work is done;
+    // time to set up our long-running queries in an effect
+    React.useEffect(() => {
+        return store.otel.tracer.startActiveSpan('LiveStore:useLiveStoreComponent:long-running', { attributes: {} }, otelCtx, (span) => {
+            const otelCtx = otel.trace.setSpan(otel.context.active(), span);
+            const unsubs = [];
+            // create state query
+            let stateQuery;
+            if (stateSchema === undefined) {
+                stateQuery = store.queryJS(() => ({}), componentKey, undefined, otelCtx);
+            }
+            else {
+                const componentTableName = tableNameForComponentKey(componentKey);
+                insertRowForComponentInstance({ store, componentKey, stateSchema });
+                const whereClause = componentKey._tag === 'singleton' ? '' : `where id = '${componentKey.id}'`;
+                stateQuery = store
+                    .querySQL(() => sql `select * from ${componentTableName} ${whereClause} limit 1`, [componentTableName], undefined, componentKey, 
+                // TODO introduce a refresh "grouping" concept to associate related refreshes in the debugger UI
+                `localState:query:${componentKeyLabel}`, otelCtx)
+                    .getFirstRow({ defaultValue: defaultComponentState });
+            }
+            unsubs.push(store.subscribe(stateQuery, (results) => {
+                if (isEqual(results, componentStateRef.current) === false) {
+                    setComponentState_(results);
+                }
+            }, undefined, { label: `useLiveStoreComponent:localState:subscribe:${stateQuery.label}` }));
+            const registerSubscription = (query, callback, onUnsubscribe) => {
+                unsubs.push(store.subscribe(query, (results) => {
+                    callback(results);
+                }, onUnsubscribe, { label: `useLiveStoreComponent:query:manual-subscribe:${query.label}` }));
+            };
+            const queries = generateQueries({ state$: stateQuery, otelCtx, registerSubscription, isTemporaryQuery: false });
+            // Use the name given to this query in the useQueries hook as its label
+            for (const [name, query] of Object.entries(queries)) {
+                query.label = name;
+            }
+            for (const [key, query] of Object.entries(queries)) {
+                unsubs.push(store.subscribe(query, (results) => {
+                    const newQueryResults = { ...queryResultsRef.current, [key]: results };
+                    if (isEqual(newQueryResults, queryResultsRef.current) === false) {
+                        setQueryResults_(newQueryResults);
+                    }
+                }, undefined, { label: `useLiveStoreComponent:query:subscribe:${query.label}` }));
+            }
+            return () => {
+                for (const unsub of unsubs) {
+                    unsub();
+                }
+                span.end();
+            };
+        });
+        // NOTE excluding `setComponentState_` and `setQueryResults_` from the deps array as it seems to cause an infinite loop
+        // This should probably be improved
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        store,
+        componentKey,
+        stateSchema,
+        defaultComponentState,
+        generateQueries,
+        otelCtx,
+        componentStateRef,
+        // setComponentState_,
+        // setQueryResults_,
+    ]);
+    // Very important: remove any queries / other resources associated w/ this component
+    React.useEffect(() => () => store.unmountComponent(componentKey), [store, componentKey]);
+    // performance.mark('useLiveStoreComponent:end')
+    // performance.measure(`useLiveStoreComponent:${componentKey.type}`, 'useLiveStoreComponent:start', 'useLiveStoreComponent:end')
+    const state = componentStateRef.current;
+    const useLiveStoreJsonState = (jsonStringKey, parse = (_) => _) => {
+        const value = React.useMemo(() => {
+            return parse(JSON.parse(state[jsonStringKey]));
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [state[jsonStringKey], parse]);
+        const setValue = React.useCallback((newValOrFn) => {
+            const newVal = typeof newValOrFn === 'function'
+                ? // NOTE we're using the ref instead of the value because we want to be sure
+                    // we're using the latest value when the setter is called
+                    newValOrFn(parse(JSON.parse(componentStateRef.current[jsonStringKey])))
+                : newValOrFn;
+            setState[jsonStringKey](JSON.stringify(newVal));
+        }, [parse, jsonStringKey]);
+        return [value, setValue];
+    };
+    return {
+        queryResults: queryResultsRef.current,
+        state,
+        setState,
+        useLiveStoreJsonState,
+    };
+};
+export const useComponentKey = ({ name, id }, deps = []) => React.useMemo(() => {
+    switch (id) {
+        case 'singleton': {
+            return { _tag: 'singleton', componentName: name, id: 'singleton' };
+        }
+        case '__ephemeral__': {
+            return { _tag: 'ephemeral', componentName: name, id: uuid() };
+        }
+        default: {
+            return { _tag: 'custom', componentName: name, id };
+        }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+}, [...deps, id, name]);
+/**
+ * Create a row storing the state for a component instance, if none exists yet.
+ * Initialized with default values, and keyed on the component key.
+ */
+const insertRowForComponentInstance = ({ store, componentKey, stateSchema, }) => {
+    const columnNames = ['id', ...Object.keys(stateSchema.columns)];
+    const columnValues = columnNames.map((name) => `$${name}`).join(', ');
+    const tableName = tableNameForComponentKey(componentKey);
+    const insertQuery = sql `insert into ${tableName} (${columnNames.join(', ')}) select ${columnValues} where not exists(select 1 from ${tableName} where id = '${componentKey.id}')`;
+    void store.execute(insertQuery, {
+        id: componentKey.id,
+        ...mapValues(stateSchema.columns, (column) => prepareValueForSql(column.default ?? null)),
+    }, [tableName]);
+};
+const prepareValueForSql = (value) => {
+    if (typeof value === 'string' || typeof value === 'number' || value === null) {
+        return value;
+    }
+    else {
+        return value ? 1 : 0;
+    }
+};
+//# sourceMappingURL=useLiveStoreComponent.js.map

package/dist/react/useLiveStoreComponent.js.map

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

package/dist/react/useRiffleComponent.d.ts

@@ -0,0 +1,70 @@
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+import { type LiteralUnion } from '@overtone/utils';
+import type { DependencyList } from 'react';
+import React from 'react';
+import type { ComponentKey } from '../componentKey.js';
+import type { GetAtom } from '../reactive.js';
+import type { RiffleGraphQLQuery } from '../reactiveQueries/graphql.js';
+import type { RiffleJSQuery } from '../reactiveQueries/js.js';
+import type { RiffleSQLQuery } from '../reactiveQueries/sql.js';
+import type { ComponentStateSchema } from '../schema.js';
+import type { BaseGraphQLContext, QueryResult, RiffleQuery } from '../store.js';
+export interface QueryDefinitions {
+    [queryName: string]: RiffleQuery;
+}
+export type QueryResults<TQuery> = {
+    [queryName in keyof TQuery]: QueryResult<TQuery[queryName]>;
+};
+export type ReactiveSQL = <TResult>(genQuery: (get: GetAtom) => string, queriedTables: string[]) => RiffleSQLQuery<TResult>;
+export type ReactiveGraphQL = <TResult extends Record<string, any>, TVariables extends Record<string, any>, TContext extends BaseGraphQLContext>(query: DocumentNode<TResult, TVariables>, genVariableValues: (get: GetAtom) => TVariables, label?: string) => RiffleGraphQLQuery<TResult, TVariables, TContext>;
+type RegisterSubscription = <TQuery extends RiffleQuery>(query: TQuery, onNewValue: (value: QueryResult<TQuery>) => void, onUnsubscribe?: () => void) => void;
+type GenQueries<TQueries, TStateResult> = (args: {
+    rxSQL: ReactiveSQL;
+    rxGraphQL: ReactiveGraphQL;
+    globalQueries: QueryDefinitions;
+    state$: RiffleJSQuery<TStateResult>;
+    /** Registers a subscription */
+    subscribe: RegisterSubscription;
+    isTemporaryQuery: boolean;
+}) => TQueries;
+export type UseRiffleComponentProps<TQueries, TComponentState> = {
+    stateSchema?: ComponentStateSchema<TComponentState>;
+    queries?: GenQueries<TQueries, TComponentState>;
+    reactDeps?: React.DependencyList;
+    componentKey: ComponentKeyConfig;
+};
+export type ComponentKeyConfig = {
+    /**
+     * Name of the Component
+     *
+     * TODO we should eventually derive this info automatically from the component (TBD how though...)
+     */
+    name: string;
+    id: LiteralUnion<'singleton' | '__ephemeral__', string>;
+};
+type ComponentState = {
+    /** Equivalent to `componentKey.key` */
+    id: string;
+    [key: string]: string | number | boolean | null;
+};
+type UseRiffleJsonState<TState> = <TResult>(jsonStringKey: keyof TState, parse?: (_: unknown) => TResult) => [value: TResult, setValue: (newVal: TResult | ((prevVal: TResult) => TResult)) => void];
+/**
+ * Create reactive queries within a component.
+ * @param config.queries A function that returns a map of named reactive queries.
+ * @param config.componentKey A function that returns a unique key for this component.
+ * @param config.reactDeps A list of React-level dependencies that will refresh the queries.
+ */
+export declare const useRiffleComponent: <TComponentState extends ComponentState, TQueries extends QueryDefinitions>({ stateSchema: stateSchema_, queries, componentKey: componentKeyConfig, reactDeps, }: UseRiffleComponentProps<TQueries, TComponentState>) => {
+    queryResults: QueryResults<TQueries>;
+    state: TComponentState;
+    setState: Setters<TComponentState>;
+    useRiffleJsonState: UseRiffleJsonState<TComponentState>;
+};
+export type Setters<TComponentState> = {
+    [k in keyof TComponentState]: (newValue: TComponentState[k]) => void;
+} & {
+    setMany: (newValues: Partial<TComponentState>) => void;
+};
+export declare const useComponentKey: ({ name, id }: ComponentKeyConfig, deps?: DependencyList) => ComponentKey;
+export {};
+//# sourceMappingURL=useRiffleComponent.d.ts.map

package/dist/react/useRiffleComponent.d.ts.map

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