@livestore/livestore 0.0.24 → 0.0.27

package/dist/schema.js

@@ -1,46 +0,0 @@
-import { mapObjectValues } from '@livestore/utils';
-import { SqliteDsl } from 'effect-db-schema';
-import { DbSchema } from './index.js';
-// A global variable representing component state tables we should create in the database
-export const componentStateTables = {};
-export const makeSchema = (schema) => ({
-    tables: { ...mapObjectValues(schema.tables, (_tableName, table) => table.ast), ...systemTables },
-    materializedViews: schema.materializedViews ?? {},
-    actions: schema.actions,
-});
-// TODO get rid of "side effect" in this function (via explicit register fn)
-export const defineComponentStateSchema = (
-// TODO get rid of the `name` param here and use the `componentKey` name instead
-name, columns) => {
-    const tablePath = `components__${name}`;
-    if (Object.keys(componentStateTables).includes(tablePath)) {
-        // throw new Error(`Can't register duplicate component: ${name}`)
-        console.error(`Can't register duplicate component: ${tablePath}`);
-    }
-    const schemaWithId = columns;
-    schemaWithId.id = DbSchema.text({ primaryKey: true });
-    const tableDef = SqliteDsl.table(tablePath, schemaWithId, []);
-    // TODO move into register fn
-    componentStateTables[tablePath] = tableDef.ast;
-    return tableDef;
-};
-export const SCHEMA_META_TABLE = '__livestore_schema';
-const schemaMetaTable = SqliteDsl.table(SCHEMA_META_TABLE, {
-    tableName: SqliteDsl.text({ primaryKey: true }),
-    schemaHash: SqliteDsl.integer({ nullable: false }),
-    /** ISO date format */
-    updatedAt: SqliteDsl.text({ nullable: false }),
-});
-export const systemTables = {
-    // [EVENTS_TABLE_NAME]: SqliteDsl.table(EVENTS_TABLE_NAME, {
-    //   id: SqliteDsl.text({ primaryKey: true }),
-    //   type: SqliteDsl.text({ nullable: false }),
-    //   args: SqliteDsl.text({ nullable: false }),
-    // }).ast,
-    [SCHEMA_META_TABLE]: schemaMetaTable.ast,
-};
-export const defineTables = (tables) => tables;
-export const defineMaterializedViews = (materializedViews) => materializedViews;
-export const defineActions = (actions) => actions;
-export const defineAction = (action) => action;
-//# sourceMappingURL=schema.js.map

package/dist/schema.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"schema.js","sourceRoot":"","sources":["../src/schema.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAGlD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AASrC,yFAAyF;AACzF,MAAM,CAAC,MAAM,oBAAoB,GAAuC,EAAE,CAAA;AAU1E,MAAM,CAAC,MAAM,UAAU,GAAG,CAA8B,MAAe,EAAU,EAAE,CACjF,CAAC;IACC,MAAM,EAAE,EAAE,GAAG,eAAe,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,YAAY,EAAE;IAChG,iBAAiB,EAAE,MAAM,CAAC,iBAAiB,IAAI,EAAE;IACjD,OAAO,EAAE,MAAM,CAAC,OAAO;CACxB,CAAkB,CAAA;AAOrB,4EAA4E;AAC5E,MAAM,CAAC,MAAM,0BAA0B,GAAG;AACxC,gFAAgF;AAChF,IAAW,EACX,OAAiB,EAIjB,EAAE;IACF,MAAM,SAAS,GAAG,eAAe,IAAI,EAAW,CAAA;IAChD,IAAI,MAAM,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;QACzD,iEAAiE;QACjE,OAAO,CAAC,KAAK,CAAC,uCAAuC,SAAS,EAAE,CAAC,CAAA;KAClE;IAED,MAAM,YAAY,GAAG,OAIpB,CAAA;IAED,YAAY,CAAC,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAA;IAErD,MAAM,QAAQ,GAAG,SAAS,CAAC,KAAK,CAAC,SAAS,EAAE,YAAY,EAAE,EAAE,CAAC,CAAA;IAE7D,6BAA6B;IAC7B,oBAAoB,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAA;IAE9C,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA;AA4BD,MAAM,CAAC,MAAM,iBAAiB,GAAG,oBAAoB,CAAA;AAErD,MAAM,eAAe,GAAG,SAAS,CAAC,KAAK,CAAC,iBAAiB,EAAE;IACzD,SAAS,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;IAC/C,UAAU,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClD,sBAAsB;IACtB,SAAS,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;CAC/C,CAAC,CAAA;AAIF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,4DAA4D;IAC5D,8CAA8C;IAC9C,+CAA+C;IAC/C,+CAA+C;IAC/C,UAAU;IACV,CAAC,iBAAiB,CAAC,EAAE,eAAe,CAAC,GAAG;CACd,CAAA;AAE5B,MAAM,CAAC,MAAM,YAAY,GAAG,CAA6B,MAAS,EAAE,EAAE,CAAC,MAAM,CAAA;AAE7E,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAwC,iBAAoB,EAAE,EAAE,CACrG,iBAAiB,CAAA;AAEnB,MAAM,CAAC,MAAM,aAAa,GAAG,CAAmC,OAAU,EAAE,EAAE,CAAC,OAAO,CAAA;AACtF,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,MAA+B,EACN,EAAE,CAAC,MAAM,CAAA"}

package/dist/util.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAA;AAEpD,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;AACnD,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,IAAI,CAAA;AAE1D,MAAM,MAAM,QAAQ,GAAG,QAAQ,EAAE,GAAG,YAAY,CAAA;AAEhD,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAA;AAE9E;;;;;GAKG;AACH,eAAO,MAAM,GAAG,aAAc,oBAAoB,WAAW,OAAO,EAAE,KAAG,MAMxE,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,WAAY,QAAQ,aAAa,MAAM,KAAG,kBAWvE,CAAA;AAED;;;GAGG;AAEH,wBAAgB,YAAY,CAAC,CAAC,EAAE,KAAK,GAAG,KAAK,CAE5C;AAED,eAAO,MAAM,cAAc,UAAW,GAAG,KAAG,MAa3C,CAAA;AAED,eAAO,MAAM,SAAS,UAAW,GAAG,8BAAiE,CAAA"}

package/dist/util.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,8BAA8B;AAW9B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,QAA8B,EAAE,GAAG,IAAe,EAAU,EAAE;IAChF,IAAI,GAAG,GAAG,EAAE,CAAA;IACZ,KAAK,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;QACrC,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;KACjC;IACD,OAAO,GAAG,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;AAC9B,CAAC,CAAA;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,MAAgB,EAAE,SAAiB,EAAsB,EAAE;IAC3F,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC;QAAE,OAAO,MAA4B,CAAA;IAE9D,MAAM,MAAM,GAAiB,EAAE,CAAA;IAC/B,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;QACjD,IAAI,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;YAC3B,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC,GAAG,KAAK,CAAA;SAC1B;KACF;IAED,OAAO,MAA4B,CAAA;AACrC,CAAC,CAAA;AAED;;;GAGG;AACH,kEAAkE;AAClE,MAAM,UAAU,YAAY,CAAC,CAAQ;IACnC,MAAM,IAAI,KAAK,CAAC,qCAAqC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;AAC3E,CAAC;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAU,EAAU,EAAE;IACnD,MAAM,KAAK,GAAG,OAAO,OAAO,KAAK,WAAW,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAA;IAC9F,MAAM,GAAG,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAA;IAC5B,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IAC1C,IAAI,GAAG,KAAK,iBAAiB;QAAE,OAAO,GAAG,GAAG,QAAQ,CAAA;IAEpD,IAAI;QACF,OAAO,IAAI,CAAC,SAAS,CAAC,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;KACpD;IAAC,OAAO,CAAM,EAAE;QACf,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;QAElB,OAAO,8BAA8B,GAAG,CAAC,CAAA;KAC1C;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAU,EAA6B,EAAE,CAAC,OAAO,KAAK,EAAE,IAAI,KAAK,UAAU,CAAA"}

package/src/__tests__/react/useComponentState.test.tsx

@@ -1,100 +0,0 @@
-import { act, renderHook } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import { sql } from '../../index.js'
-import * as LiveStoreReact from '../../react/index.js'
-import { makeTodoMvc } from './fixture.js'
-
-describe('useComponentState', () => {
-  it('should update the data based on component key', async () => {
-    let renderCount = 0
-
-    const { wrapper, AppSchema, store } = await makeTodoMvc()
-
-    const { result, rerender } = renderHook(
-      (userId: string) => {
-        renderCount++
-
-        return LiveStoreReact.useComponentState({
-          schema: AppSchema,
-          componentKey: { name: 'UserInfo', id: userId },
-        })
-      },
-      { wrapper, initialProps: 'u1' },
-    )
-
-    expect(result.current.state.id).toBe('u1')
-    expect(result.current.state.username).toBe('')
-    expect(renderCount).toBe(1)
-
-    act(() => {
-      void store.execute(sql`INSERT INTO components__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).toBe(2)
-  })
-
-  it('should update the data reactively - via setState', async () => {
-    let renderCount = 0
-
-    const { wrapper, AppSchema } = await makeTodoMvc()
-
-    const { result } = renderHook(
-      (userId: string) => {
-        renderCount++
-
-        return LiveStoreReact.useComponentState({
-          schema: AppSchema,
-          componentKey: { name: 'UserInfo', id: userId },
-        })
-      },
-      { wrapper, initialProps: 'u1' },
-    )
-
-    expect(result.current.state.id).toBe('u1')
-    expect(result.current.state.username).toBe('')
-    expect(renderCount).toBe(1)
-
-    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).toBe(2)
-  })
-
-  it('should update the data reactively - via raw store update', async () => {
-    let renderCount = 0
-
-    const { wrapper, AppSchema, store } = await makeTodoMvc()
-
-    const { result } = renderHook(
-      (userId: string) => {
-        renderCount++
-
-        return LiveStoreReact.useComponentState({
-          schema: AppSchema,
-          componentKey: { name: 'UserInfo', id: userId },
-        })
-      },
-      { wrapper, initialProps: 'u1' },
-    )
-
-    expect(result.current.state.id).toBe('u1')
-    expect(result.current.state.username).toBe('')
-    expect(renderCount).toBe(1)
-
-    act(() => result.current.setState.username('username_u1_hello'))
-
-    act(() => {
-      void store.execute(sql`UPDATE components__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).toBe(2)
-  })
-})

package/src/componentKey.ts

@@ -1,9 +0,0 @@
-type SingletonKey = { _tag: 'singleton'; componentName: string; id: 'singleton' }
-type EphemeralKey = { _tag: 'ephemeral'; componentName: string; id: string }
-type CustomKey = { _tag: 'custom'; componentName: string; id: string }
-
-export type ComponentKey = SingletonKey | EphemeralKey | CustomKey
-
-export const labelForKey = (key: ComponentKey): string => `${key.componentName}/${key.id}`
-
-export const tableNameForComponentKey = (componentKey: ComponentKey) => `components__${componentKey.componentName}`

package/src/react/useComponentState.ts

@@ -1,404 +0,0 @@
-import type { LiteralUnion } from '@livestore/utils'
-import { omit, shouldNeverHappen } from '@livestore/utils'
-import { Schema } from '@livestore/utils/effect'
-import * as otel from '@opentelemetry/api'
-import { SqliteAst, SqliteDsl } from 'effect-db-schema'
-import { isEqual, mapValues } from 'lodash-es'
-import type { DependencyList } from 'react'
-import React from 'react'
-import { v4 as uuid } from 'uuid'
-
-import type { ComponentKey } from '../componentKey.js'
-import { labelForKey, tableNameForComponentKey } from '../componentKey.js'
-import { migrateTable } from '../migrations.js'
-import { LiveStoreJSQuery } from '../reactiveQueries/js.js'
-import { LiveStoreSQLQuery } from '../reactiveQueries/sql.js'
-import { SCHEMA_META_TABLE } from '../schema.js'
-import type { BaseGraphQLContext, LiveStoreQuery, Store } from '../store.js'
-import { sql } from '../util.js'
-import { useStore } from './LiveStoreContext.js'
-import { extractStackInfoFromStackTrace, originalStackLimit } from './utils/stack-info.js'
-import { useStateRefWithReactiveInput } from './utils/useStateRefWithReactiveInput.js'
-
-export interface QueryDefinitions {
-  [queryName: string]: LiveStoreQuery
-}
-
-export type UseComponentStateProps<TStateColumns extends ComponentColumns> = {
-  schema?: SqliteDsl.TableDefinition<string, TStateColumns>
-  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>
-}
-
-// TODO enforce columns are non-nullable or have a default
-export interface ComponentColumns extends SqliteDsl.Columns {
-  id: SqliteDsl.ColumnDefinition<SqliteDsl.FieldType.FieldTypeText<string, string>, false>
-}
-
-// type ComponentState = {
-//   /** Equivalent to `componentKey.key` */
-//   id: string
-//   [key: string]: string | number | boolean | null
-// }
-
-/**
- * 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<string, { span: otel.Span; otelContext: otel.Context }>()
-
-type UseLiveStoreJsonState<TState> = <TResult>(
-  jsonStringKey: keyof TState,
-  parse?: (_: unknown) => TResult,
-) => [value: TResult, setValue: (newVal: TResult | ((prevVal: TResult) => TResult)) => void]
-
-export type GetStateType<TTableDef extends SqliteDsl.TableDefinition<any, any>> = SqliteDsl.FromColumns.RowDecoded<
-  TTableDef['columns']
->
-
-export type GetStateTypeEncoded<TTableDef extends SqliteDsl.TableDefinition<any, any>> =
-  SqliteDsl.FromColumns.RowEncoded<TTableDef['columns']>
-
-/**
- * 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 useComponentState = <TStateColumns extends ComponentColumns>({
-  schema: stateSchema_,
-  componentKey: componentKeyConfig,
-  reactDeps = [],
-}: UseComponentStateProps<TStateColumns>): {
-  state$: LiveStoreJSQuery<SqliteDsl.FromColumns.RowDecoded<TStateColumns>>
-  state: SqliteDsl.FromColumns.RowDecoded<TStateColumns>
-  setState: Setters<SqliteDsl.FromColumns.RowDecoded<TStateColumns>>
-  useLiveStoreJsonState: UseLiveStoreJsonState<SqliteDsl.FromColumns.RowDecoded<TStateColumns>>
-} => {
-  type TComponentState = SqliteDsl.FromColumns.RowDecoded<TStateColumns>
-
-  // TODO validate schema to make sure each column has a default value
-  // 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' as any) } : undefined),
-    [stateSchema_],
-  )
-
-  const componentKey = useComponentKey(componentKeyConfig, reactDeps)
-  const { store } = useStore()
-
-  const componentKeyLabel = React.useMemo(() => labelForKey(componentKey), [componentKey])
-
-  const stackInfo = React.useMemo(() => {
-    Error.stackTraceLimit = 10
-    // eslint-disable-next-line unicorn/error-message
-    const stack = new Error().stack!
-    Error.stackTraceLimit = originalStackLimit
-    return extractStackInfoFromStackTrace(stack)
-  }, [])
-
-  // The following `React.useMemo` and `React.useEffect` calls are used to start and end a span for the lifetime of this component.
-  const { span, otelContext } = React.useMemo(() => {
-    const existingSpan = spanAlreadyStartedCache.get(componentKeyLabel)
-    if (existingSpan !== undefined) return existingSpan
-
-    const span = store.otel.tracer.startSpan(
-      `LiveStore:useComponentState:${componentKeyLabel}`,
-      { attributes: { stackInfo: JSON.stringify(stackInfo) } },
-      store.otel.queriesSpanContext,
-    )
-
-    const otelContext = otel.trace.setSpan(otel.context.active(), span)
-
-    spanAlreadyStartedCache.set(componentKeyLabel, { span, otelContext })
-
-    return { span, otelContext }
-  }, [componentKeyLabel, stackInfo, store.otel.queriesSpanContext, store.otel.tracer])
-
-  React.useEffect(
-    () => () => {
-      spanAlreadyStartedCache.delete(componentKeyLabel)
-      span.end()
-    },
-    [componentKeyLabel, span],
-  )
-
-  const defaultComponentState = React.useMemo(() => {
-    const defaultState = (
-      stateSchema === undefined ? {} : mapValues(stateSchema.columns, (c) => c.default)
-    ) as TComponentState
-
-    // @ts-expect-error TODO fix typing
-    defaultState.id = componentKeyConfig.id
-
-    return defaultState
-  }, [componentKeyConfig.id, stateSchema])
-
-  const componentStateEffectSchema = React.useMemo(
-    () => (stateSchema ? SqliteDsl.structSchemaForTable(stateSchema) : Schema.any),
-    [stateSchema],
-  )
-
-  const state$ = React.useMemo(() => {
-    // create state query
-    if (stateSchema === undefined) {
-      // TODO don't set up a query if there's no state schema (keeps the graph more clean)
-      return new LiveStoreJSQuery({
-        fn: () => ({}) as TComponentState,
-        label: 'empty-component-state',
-        // otelContext,
-        // otelTracer: store.otel.tracer,
-      })
-    } else {
-      const componentTableName = tableNameForComponentKey(componentKey)
-      const whereClause = componentKey._tag === 'singleton' ? '' : `where id = '${componentKey.id}'`
-
-      // TODO find a better solution for this
-      if (store.tableRefs[componentTableName] === undefined) {
-        const schemaHash = SqliteAst.hash(stateSchema.ast)
-        const res = store.inMemoryDB.select<{ schemaHash: number }>(
-          sql`SELECT schemaHash FROM ${SCHEMA_META_TABLE} WHERE tableName = '${componentTableName}'`,
-        )
-        if (res.length === 0 || res[0]!.schemaHash !== schemaHash) {
-          migrateTable({ db: store._proxyDb, tableDef: stateSchema.ast, otelContext, schemaHash })
-        }
-
-        store.tableRefs[componentTableName] = store.graph.makeRef(null, {
-          equal: () => false,
-          label: componentTableName,
-          meta: { liveStoreRefType: 'table' },
-        })
-      }
-
-      return (
-        new LiveStoreSQLQuery({
-          label: `localState:query:${componentKeyLabel}`,
-          genQueryString: () => sql`select * from ${componentTableName} ${whereClause} limit 1`,
-          queriedTables: [componentTableName],
-        })
-          // TODO consider to instead of just returning the default value, to write the default component state to the DB
-          .pipe<TComponentState>((results) =>
-            results.length === 1 ? Schema.parseSync(componentStateEffectSchema)(results[0]!) : defaultComponentState,
-          )
-      )
-    }
-  }, [
-    componentKey,
-    componentKeyLabel,
-    componentStateEffectSchema,
-    defaultComponentState,
-    otelContext,
-    stateSchema,
-    store,
-  ])
-
-  // Step 1:
-  // Synchronously create state and queries for initial render pass.
-  const initialComponentState = React.useMemo(
-    () => state$.run(otelContext, { _tag: 'react', api: 'useComponentState', label: state$.label, stackInfo }),
-    [otelContext, stackInfo, state$],
-  )
-
-  // 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<TComponentState>(initialComponentState)
-
-  const setState = (
-    stateSchema === undefined
-      ? {}
-      : // TODO: do we have a better type for the values that can go in SQLite?
-        mapValues(stateSchema.columns, (column, columnName) => (value: string | number) => {
-          // Don't update the state if it's the same as the value already seen in the component
-          // @ts-expect-error TODO fix typing
-          if (componentStateRef.current[columnName] === value) return
-
-          const encodedValue = Schema.encodeSync(column.type.codec)(value)
-
-          if (['componentKey', 'columnNames'].includes(columnName)) {
-            shouldNeverHappen(`Can't use reserved column name ${columnName}`)
-          }
-
-          return store.applyEvent('updateComponentState', {
-            componentKey,
-            columnNames: [columnName],
-            [columnName]: encodedValue,
-          })
-        })
-  ) as Setters<TComponentState>
-
-  setState.setMany = (columnValues: Partial<TComponentState>) => {
-    // TODO use hashing instead
-    // Don't update the state if it's the same as the value already seen in the component
-    // @ts-expect-error TODO fix typing
-    if (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:useComponentState:long-running',
-      { attributes: {} },
-      otelContext,
-      (span) => {
-        const unsubs: (() => void)[] = []
-
-        const otelContext = otel.trace.setSpan(otel.context.active(), span)
-        if (stateSchema !== undefined) {
-          insertRowForComponentInstance({ store, componentKey, stateSchema, otelContext })
-        }
-
-        state$.activeSubscriptions.add(stackInfo)
-
-        unsubs.push(
-          store.subscribe(
-            state$,
-            (results) => {
-              if (isEqual(results, componentStateRef.current) === false) {
-                setComponentState_(results as TComponentState)
-              }
-            },
-            undefined,
-            { label: `useComponentState:localState:subscribe:${state$.label}`, otelContext },
-          ),
-          () => state$.activeSubscriptions.delete(stackInfo),
-        )
-
-        return () => {
-          for (const unsub of unsubs) {
-            unsub()
-          }
-
-          span.end()
-        }
-      },
-    )
-  }, [
-    store,
-    stackInfo,
-    stateSchema,
-    defaultComponentState,
-    otelContext,
-    componentStateRef,
-    state$,
-    setComponentState_,
-    componentKey,
-  ])
-
-  React.useEffect(() => () => state$.destroy(), [state$])
-
-  const state = componentStateRef.current
-
-  const useLiveStoreJsonState = <TResult>(
-    jsonStringKey: keyof TComponentState,
-    parse: (_: unknown) => TResult = (_) => _ as TResult,
-  ): [value: TResult, setValue: (newVal: TResult | ((prevVal: TResult) => TResult)) => void] => {
-    const value = React.useMemo<TResult>(() => {
-      return parse(JSON.parse(state[jsonStringKey] as string))
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [state[jsonStringKey], parse])
-
-    const setValue = React.useCallback(
-      (newValOrFn: TResult | ((prev: TResult) => TResult)) => {
-        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 as any)(parse(JSON.parse(componentStateRef.current[jsonStringKey] as string)))
-            : newValOrFn
-        setState[jsonStringKey](JSON.stringify(newVal) as any)
-      },
-      [parse, jsonStringKey],
-    )
-
-    return [value, setValue]
-  }
-
-  return {
-    state$,
-    state,
-    setState,
-    useLiveStoreJsonState,
-  }
-}
-
-export type Setters<TComponentState> = {
-  [k in keyof TComponentState]: (newValue: TComponentState[k]) => void
-} & {
-  setMany: (newValues: Partial<TComponentState>) => void
-}
-
-export const useComponentKey = ({ name, id }: ComponentKeyConfig, deps: DependencyList = []) =>
-  React.useMemo<ComponentKey>(() => {
-    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,
-  otelContext,
-}: {
-  store: Store<BaseGraphQLContext>
-  componentKey: ComponentKey
-  stateSchema: SqliteDsl.TableDefinition<string, SqliteDsl.Columns>
-  otelContext: otel.Context
-}) => {
-  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,
-    {
-      ...mapValues(stateSchema.columns, (column) => prepareValueForSql(column.default ?? null)),
-      id: componentKey.id,
-    },
-    [tableName],
-    otelContext,
-  )
-}
-
-const prepareValueForSql = (value: string | number | boolean | null) => {
-  if (typeof value === 'string' || typeof value === 'number' || value === null) {
-    return value
-  } else {
-    return value ? 1 : 0
-  }
-}

package/src/reactiveQueries/graph.ts

@@ -1,15 +0,0 @@
-import type * as otel from '@opentelemetry/api'
-import ReactDOM from 'react-dom'
-
-import { ReactiveGraph } from '../reactive.js'
-import type { QueryDebugInfo, RefreshReason, Store } from '../store.js'
-
-export type DbContext = {
-  store: Store
-  otelTracer: otel.Tracer
-  rootOtelContext: otel.Context
-}
-
-export const dbGraph = new ReactiveGraph<RefreshReason, QueryDebugInfo, DbContext>({
-  effectsWrapper: (run) => ReactDOM.unstable_batchedUpdates(() => run()),
-})