@livestore/livestore 0.0.13 → 0.0.16

package/src/reactiveQueries/base-class.ts

@@ -5,13 +5,13 @@ import type { Store } from '../store.js'
 
 export type UnsubscribeQuery = () => void
 
-export abstract class LiveStoreQueryBase {
+export abstract class LiveStoreQueryBase<TResult> {
   /** The key for the associated component */
   componentKey: ComponentKey
   /** Human-readable label for the query for debugging */
   label: string
   /** A pointer back to the store containing this query */
-  store: Store<any>
+  store: Store
   /** Otel Span is started in LiveStore store but ended in this query */
   otelContext: otel.Context
 
@@ -26,7 +26,7 @@ export abstract class LiveStoreQueryBase {
   }: {
     componentKey: ComponentKey
     label: string
-    store: Store<any>
+    store: Store
     otelContext: otel.Context
   }) {
     this.componentKey = componentKey
@@ -46,4 +46,10 @@ export abstract class LiveStoreQueryBase {
       unsubscribe()
     }
   }
+
+  subscribe = (
+    onNewValue: (value: TResult) => void,
+    onSubsubscribe?: () => void,
+    options?: { label?: string } | undefined,
+  ): (() => void) => this.store.subscribe(this as any, onNewValue as any, onSubsubscribe, options)
 }

package/src/reactiveQueries/graphql.ts

@@ -2,8 +2,8 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
 import type * as otel from '@opentelemetry/api'
 
 import type { ComponentKey } from '../componentKey.js'
-import type { GetAtom, Thunk } from '../reactive.js'
-import type { BaseGraphQLContext, Store } from '../store.js'
+import type { Thunk } from '../reactive.js'
+import type { BaseGraphQLContext, GetAtomResult, Store } from '../store.js'
 import { LiveStoreQueryBase } from './base-class.js'
 import type { LiveStoreJSQuery } from './js.js'
 
@@ -11,7 +11,7 @@ export class LiveStoreGraphQLQuery<
   TResult extends Record<string, any>,
   VariableValues extends Record<string, any>,
   TContext extends BaseGraphQLContext,
-> extends LiveStoreQueryBase {
+> extends LiveStoreQueryBase<TResult> {
   _tag: 'graphql' = 'graphql'
 
   /** The abstract GraphQL query */
@@ -39,7 +39,7 @@ export class LiveStoreGraphQLQuery<
     this.results$ = results$
   }
 
-  pipe = <U>(f: (x: TResult, get: GetAtom) => U): LiveStoreJSQuery<U> =>
+  pipe = <U>(f: (x: TResult, get: GetAtomResult) => U): LiveStoreJSQuery<U> =>
     this.store.queryJS(
       (get) => {
         const results = get(this.results$)

package/src/reactiveQueries/js.ts

@@ -5,7 +5,7 @@ import type { GetAtom, Thunk } from '../reactive.js'
 import type { Store } from '../store.js'
 import { LiveStoreQueryBase } from './base-class.js'
 
-export class LiveStoreJSQuery<TResult> extends LiveStoreQueryBase {
+export class LiveStoreJSQuery<TResult> extends LiveStoreQueryBase<TResult> {
   _tag: 'js' = 'js'
   /** A reactive thunk representing the query results */
   results$: Thunk<TResult>
@@ -17,7 +17,7 @@ export class LiveStoreJSQuery<TResult> extends LiveStoreQueryBase {
     results$: Thunk<TResult>
     componentKey: ComponentKey
     label: string
-    store: Store<any>
+    store: Store
     otelContext: otel.Context
   }) {
     super(baseProps)

package/src/reactiveQueries/sql.ts

@@ -7,12 +7,12 @@ import { LiveStoreQueryBase } from './base-class.js'
 import type { LiveStoreJSQuery } from './js.js'
 
 /* An object encapsulating a reactive SQL query */
-export class LiveStoreSQLQuery<Row> extends LiveStoreQueryBase {
+export class LiveStoreSQLQuery<Row> extends LiveStoreQueryBase<Row> {
   _tag: 'sql' = 'sql'
   /** A reactive thunk representing the query text */
   queryString$: Thunk<string>
   /** A reactive thunk representing the query results */
-  results$: Thunk<Row[]>
+  results$: Thunk<ReadonlyArray<Row>>
 
   constructor({
     queryString$,
@@ -20,10 +20,10 @@ export class LiveStoreSQLQuery<Row> extends LiveStoreQueryBase {
     ...baseProps
   }: {
     queryString$: Thunk<string>
-    results$: Thunk<Row[]>
+    results$: Thunk<ReadonlyArray<Row>>
     componentKey: ComponentKey
     label: string
-    store: Store<any>
+    store: Store
     otelContext: otel.Context
   }) {
     super(baseProps)
@@ -36,11 +36,11 @@ export class LiveStoreSQLQuery<Row> extends LiveStoreQueryBase {
    * Returns a new reactive query that contains the result of
    * running an arbitrary JS computation on the results of this SQL query.
    */
-  pipe = <U>(f: (result: Row[], get: GetAtom) => U): LiveStoreJSQuery<U> =>
+  pipe = <U>(fn: (result: ReadonlyArray<Row>, get: GetAtom) => U): LiveStoreJSQuery<U> =>
     this.store.queryJS(
       (get) => {
         const results = get(this.results$)
-        return f(results, get)
+        return fn(results, get)
       },
       {
         componentKey: this.componentKey,

package/src/schema.ts

@@ -38,6 +38,7 @@ export type ComponentStateSchema = SqliteDsl.TableDefinition<any, any> & {
 
 // TODO get rid of "side effect" in this function (via explicit register fn)
 export const defineComponentStateSchema = <TName extends string, TColumns extends SqliteDsl.Columns>(
+  // TODO get rid of the `name` param here and use the `componentKey` name instead
   name: TName,
   columns: TColumns,
 ): SqliteDsl.TableDefinition<
@@ -92,7 +93,6 @@ export type ActionDefinitions<TArgsMap extends Record<string, any>> = {
   [key in keyof TArgsMap]: ActionDefinition<TArgsMap[key]>
 }
 
-export const EVENT_CURSOR_TABLE = '__livestore_event_cursor'
 export const SCHEMA_META_TABLE = '__livestore_schema'
 
 const schemaMetaTable = SqliteDsl.table(SCHEMA_META_TABLE, {
@@ -110,10 +110,6 @@ export const systemTables = {
   //   type: SqliteDsl.text({ nullable: false }),
   //   args: SqliteDsl.text({ nullable: false }),
   // }).ast,
-  [EVENT_CURSOR_TABLE]: SqliteDsl.table(EVENT_CURSOR_TABLE, {
-    id: SqliteDsl.text({ primaryKey: true }),
-    cursor: SqliteDsl.text({ nullable: false }),
-  }).ast,
   [SCHEMA_META_TABLE]: schemaMetaTable.ast,
 } satisfies TableDefinitions
 
@@ -138,6 +134,7 @@ type RecordValues<T> = T extends Record<string, infer V> ? V : never
 
 export type GetActionArgs<A> = A extends ActionDefinition<infer TArgs> ? TArgs : never
 
+// TODO get rid of this
 declare global {
   // NOTE Can be extended
   interface LiveStoreActionDefinitionsTypes {

package/src/storage/in-memory/index.ts

@@ -1,6 +1,6 @@
 import type * as otel from '@opentelemetry/api'
 
-import type { ParamsObject } from '../../util.js'
+import type { PreparedBindValues } from '../../util.js'
 import type { Storage, StorageOtelProps } from '../index.js'
 
 export type StorageOptionsWebInMemory = {
@@ -15,7 +15,7 @@ export class InMemoryStorage implements Storage {
     return ({ otelTracer }: StorageOtelProps) => new InMemoryStorage(otelTracer)
   }
 
-  execute = (_query: string, _bindValues?: ParamsObject): void => {}
+  execute = (_query: string, _bindValues?: PreparedBindValues): void => {}
 
   getPersistedData = async (): Promise<Uint8Array> => new Uint8Array()
 }

package/src/storage/index.ts

@@ -8,12 +8,12 @@
 
 import type * as otel from '@opentelemetry/api'
 
-import type { ParamsObject } from '../util.js'
+import type { PreparedBindValues } from '../util.js'
 
 export type StorageInit = (otelProps: StorageOtelProps) => Promise<Storage> | Storage
 
 export interface Storage {
-  execute(query: string, bindValues?: ParamsObject, parentSpan?: otel.Span): void
+  execute(query: string, bindValues?: PreparedBindValues, parentSpan?: otel.Span): void
 
   /** Return a snapshot of persisted data from the storage */
   getPersistedData(parentSpan?: otel.Span): Promise<Uint8Array>

package/src/storage/tauri/index.ts

@@ -2,7 +2,7 @@ import { getTraceParentHeader } from '@livestore/utils'
 import type * as otel from '@opentelemetry/api'
 import { invoke } from '@tauri-apps/api'
 
-import type { ParamsObject } from '../../util.js'
+import type { PreparedBindValues } from '../../util.js'
 import { prepareBindValues } from '../../util.js'
 import type { Storage, StorageOtelProps } from '../index.js'
 
@@ -28,7 +28,7 @@ export class TauriStorage implements Storage {
       return new TauriStorage(dbFilePath, dbDirPath, otelTracer, parentSpan)
     }
 
-  execute = (query: string, bindValues?: ParamsObject, parentSpan?: otel.Span): void => {
+  execute = (query: string, bindValues?: PreparedBindValues, parentSpan?: otel.Span): void => {
     // console.log({ query, bindValues, prepared: prepareBindValues(bindValues ?? {}, query) })
     void invoke('execute', {
       dbName: this.dbFilePath,

package/src/storage/web-worker/index.ts

@@ -2,8 +2,7 @@ import { casesHandled } from '@livestore/utils'
 import type * as otel from '@opentelemetry/api'
 import * as Comlink from 'comlink'
 
-import type { ParamsObject } from '../../util.js'
-import { prepareBindValues } from '../../util.js'
+import type { PreparedBindValues } from '../../util.js'
 import type { Storage, StorageOtelProps } from '../index.js'
 import { IDB } from '../utils/idb.js'
 import type { WrappedWorker } from './worker.js'
@@ -13,7 +12,7 @@ export type StorageType = 'opfs' | 'indexeddb'
 export type StorageOptionsWeb = {
   /** Specifies where to persist data for this storage */
   type: StorageType
-  virtualFilename: string
+  fileName: string
 }
 
 export class WebWorkerStorage implements Storage {
@@ -21,7 +20,7 @@ export class WebWorkerStorage implements Storage {
   options: StorageOptionsWeb
   otelTracer: otel.Tracer
 
-  executionBacklog: { query: string; bindValues?: ParamsObject }[] = []
+  executionBacklog: { query: string; bindValues?: PreparedBindValues }[] = []
   executionPromise: Promise<void> | undefined
 
   private constructor({
@@ -61,8 +60,7 @@ export class WebWorkerStorage implements Storage {
       })
   }
 
-  execute = (query: string, bindValues_?: ParamsObject) => {
-    const bindValues = prepareBindValues(bindValues_ ?? {}, query)
+  execute = (query: string, bindValues?: PreparedBindValues) => {
     this.executionBacklog.push({ query, bindValues })
 
     // Instead of sending the queries to the worker immediately, we wait a bit and batch them up (which reduces the number of messages sent to the worker)
@@ -91,7 +89,7 @@ const getPersistedData = async (options: StorageOptionsWeb): Promise<Uint8Array>
     case 'opfs': {
       try {
         const rootHandle = await navigator.storage.getDirectory()
-        const fileHandle = await rootHandle.getFileHandle(options.virtualFilename + '.db')
+        const fileHandle = await rootHandle.getFileHandle(options.fileName + '.db')
         const file = await fileHandle.getFile()
         const buffer = await file.arrayBuffer()
         const data = new Uint8Array(buffer)
@@ -107,7 +105,7 @@ const getPersistedData = async (options: StorageOptionsWeb): Promise<Uint8Array>
     }
 
     case 'indexeddb': {
-      const idb = new IDB(options.virtualFilename)
+      const idb = new IDB(options.fileName)
 
       return (await idb.get('db')) ?? new Uint8Array()
     }

package/src/storage/web-worker/worker.ts

@@ -46,7 +46,7 @@ const initialize = async (options: StorageOptionsWeb) => {
   switch (options.type) {
     case 'opfs': {
       try {
-        db = new sqlite3.oo1.OpfsDb(fullyQualifiedFilename(options.virtualFilename)) // , 'c'
+        db = new sqlite3.oo1.OpfsDb(fullyQualifiedFilename(options.fileName)) // , 'c'
       } catch (e) {
         debugger
       }
@@ -55,7 +55,7 @@ const initialize = async (options: StorageOptionsWeb) => {
     case 'indexeddb': {
       try {
         db = new sqlite3.oo1.DB({ filename: ':memory:', flags: 'c' })
-        idb = new IDB(options.virtualFilename)
+        idb = new IDB(options.fileName)
 
         const bytes = await idb.get('db')
 

package/src/store.ts

@@ -6,16 +6,17 @@ import type { GraphQLSchema } from 'graphql'
 import * as graphql from 'graphql'
 import { uniqueId } from 'lodash-es'
 import * as ReactDOM from 'react-dom'
-import initSqlite3Wasm from 'sqlite-esm'
+import type * as Sqlite from 'sqlite-esm'
 import { v4 as uuid } from 'uuid'
 
 import type { ComponentKey } from './componentKey.js'
 import { tableNameForComponentKey } from './componentKey.js'
+import type { QueryDefinition } from './effect/LiveStore.js'
 import type { LiveStoreEvent } from './events.js'
 import { InMemoryDatabase } from './inMemoryDatabase.js'
 import { migrateDb } from './migrations.js'
 import { getDurationMsFromSpan } from './otel.js'
-import type { GetAtom, Ref } from './reactive.js'
+import type { Atom, Ref } from './reactive.js'
 import { ReactiveGraph } from './reactive.js'
 import { LiveStoreGraphQLQuery } from './reactiveQueries/graphql.js'
 import { LiveStoreJSQuery } from './reactiveQueries/js.js'
@@ -24,7 +25,9 @@ import type { ActionDefinition, GetActionArgs, Schema, SQLWriteStatement } from
 import { componentStateTables } from './schema.js'
 import type { Storage, StorageInit } from './storage/index.js'
 import type { Bindable, ParamsObject } from './util.js'
-import { isPromise, sql } from './util.js'
+import { isPromise, prepareBindValues, sql } from './util.js'
+
+export type GetAtomResult = <T>(atom: Atom<T> | LiveStoreJSQuery<T>) => T
 
 export type LiveStoreQuery<TResult extends Record<string, any> = any> =
   | LiveStoreSQLQuery<TResult>
@@ -37,8 +40,6 @@ export type BaseGraphQLContext = {
   otelContext?: otel.Context
 }
 
-export const RESET_DB_LOCAL_STORAGE_KEY = 'livestore-reset'
-
 export type QueryResult<TQuery> = TQuery extends LiveStoreSQLQuery<infer R>
   ? ReadonlyArray<Readonly<R>>
   : TQuery extends LiveStoreJSQuery<infer S>
@@ -56,6 +57,8 @@ export type GraphQLOptions<TContext> = {
 
 export type StoreOptions<TGraphQLContext extends BaseGraphQLContext> = {
   db: InMemoryDatabase
+  /** A `Proxy`d version of `db` except that it also mirrors `execute` calls to the storage */
+  dbProxy: InMemoryDatabase
   schema: Schema
   storage?: Storage
   graphQLOptions?: GraphQLOptions<TGraphQLContext>
@@ -100,9 +103,11 @@ export type StoreOtel = {
   queriesSpanContext: otel.Context
 }
 
-export class Store<TGraphQLContext extends BaseGraphQLContext> {
+export class Store<TGraphQLContext extends BaseGraphQLContext = BaseGraphQLContext> {
   graph: ReactiveGraph<RefreshReason, QueryDebugInfo>
   inMemoryDB: InMemoryDatabase
+  // TODO refactor
+  _proxyDb: InMemoryDatabase
   schema: Schema
   graphQLSchema?: GraphQLSchema
   graphQLContext?: TGraphQLContext
@@ -118,6 +123,7 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
 
   private constructor({
     db,
+    dbProxy,
     schema,
     storage,
     graphQLOptions,
@@ -125,6 +131,7 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
     otelRootSpanContext,
   }: StoreOptions<TGraphQLContext>) {
     this.inMemoryDB = db
+    this._proxyDb = dbProxy
     this.graph = new ReactiveGraph({
       // TODO move this into React module
       // Do all our updates inside a single React setState batch to avoid multiple UI re-renders
@@ -188,7 +195,7 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
    * NOTE The query is actually running (even if no one has subscribed to it yet) and will be kept up to date.
    */
   querySQL = <TResult>(
-    genQueryString: (get: GetAtom) => string,
+    genQueryString: string | ((get: GetAtomResult) => string),
     {
       queriedTables,
       bindValues,
@@ -218,9 +225,17 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
 
         const queryString$ = this.graph.makeThunk(
           (get, addDebugInfo) => {
-            const queryString = genQueryString(get)
-            addDebugInfo({ _tag: 'js', label: `${label}:queryString`, query: queryString })
-            return queryString
+            if (typeof genQueryString === 'function') {
+              const getAtom: GetAtomResult = (atom) => {
+                if (atom._tag === 'thunk' || atom._tag === 'ref') return get(atom)
+                return get(atom.results$)
+              }
+              const queryString = genQueryString(getAtom)
+              addDebugInfo({ _tag: 'js', label: `${label}:queryString`, query: queryString })
+              return queryString
+            } else {
+              return genQueryString
+            }
           },
           { label: `${label}:queryString`, meta: { liveStoreThunkType: 'sqlQueryString' } },
           otelContext,
@@ -231,10 +246,10 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
 
         const queryLabel = `${label}:results` + (this.temporaryQueries ? ':temp' : '')
 
-        const results$ = this.graph.makeThunk<TResult[]>(
+        const results$ = this.graph.makeThunk<ReadonlyArray<TResult>>(
           (get, addDebugInfo) =>
             this.otel.tracer.startActiveSpan(
-              'sql', // NOTE span name will be overridden further down
+              'sql:', // NOTE span name will be overridden further down
               {},
               otelContext,
               (span) => {
@@ -252,12 +267,16 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
                   span.setAttribute('sql.query', sqlString)
                   span.updateName(`sql:${sqlString.slice(0, 50)}`)
 
-                  const results = this.inMemoryDB.select(sqlString, { queriedTables, bindValues, otelContext })
+                  const results = this.inMemoryDB.select<TResult>(sqlString, {
+                    queriedTables,
+                    bindValues: bindValues ? prepareBindValues(bindValues, sqlString) : undefined,
+                    otelContext,
+                  })
 
                   span.setAttribute('sql.rowsCount', results.length)
                   addDebugInfo({ _tag: 'sql', label: label ?? '', query: sqlString })
 
-                  return results as unknown as TResult[]
+                  return results
                 } finally {
                   span.end()
                 }
@@ -289,7 +308,7 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
     )
 
   queryJS = <TResult>(
-    genResults: (get: GetAtom) => TResult,
+    genResults: (get: GetAtomResult) => TResult,
     {
       componentKey = globalComponentKey,
       label = `js${uniqueId()}`,
@@ -301,8 +320,12 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
       const queryLabel = `${label}:results` + (this.temporaryQueries ? ':temp' : '')
       const results$ = this.graph.makeThunk(
         (get, addDebugInfo) => {
+          const getAtom: GetAtomResult = (atom) => {
+            if (atom._tag === 'thunk' || atom._tag === 'ref') return get(atom)
+            return get(atom.results$)
+          }
           addDebugInfo({ _tag: 'js', label, query: genResults.toString() })
-          return genResults(get)
+          return genResults(getAtom)
         },
         { label: queryLabel, meta: { liveStoreThunkType: 'jsResults' } },
         otelContext,
@@ -329,7 +352,7 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
 
   queryGraphQL = <TResult extends Record<string, any>, TVariableValues extends Record<string, any>>(
     document: DocumentNode<TResult, TVariableValues>,
-    genVariableValues: (get: GetAtom) => TVariableValues,
+    genVariableValues: TVariableValues | ((get: GetAtomResult) => TVariableValues),
     {
       componentKey,
       label,
@@ -356,7 +379,17 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
         span.updateName(`queryGraphQL:${labelWithDefault}`)
 
         const variableValues$ = this.graph.makeThunk(
-          genVariableValues,
+          (get) => {
+            if (typeof genVariableValues === 'function') {
+              const getAtom: GetAtomResult = (atom) => {
+                if (atom._tag === 'thunk' || atom._tag === 'ref') return get(atom)
+                return get(atom.results$)
+              }
+              return genVariableValues(getAtom)
+            } else {
+              return genVariableValues
+            }
+          },
           { label: `${labelWithDefault}:variableValues`, meta: { liveStoreThunkType: 'graphqlVariableValues' } },
           otelContext,
         )
@@ -720,6 +753,13 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
     )
   }
 
+  // TODO get rid of this as part of new query definition approach https://www.notion.so/schickling/New-query-definition-approach-1097a78ef0e9495bac25f90417374756?pvs=4
+  runOnce = <TQueryDef extends QueryDefinition>(queryDef: TQueryDef): QueryResult<ReturnType<TQueryDef>> => {
+    return this.inTempQueryContext(() => {
+      return queryDef(this).results$.result
+    })
+  }
+
   /**
    * Apply an event to the store.
    * Returns the tables that were affected by the event.
@@ -778,14 +818,19 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
         // Synchronously apply the event to the in-memory database
         // const { durationMs } = this.inMemoryDB.applyEvent(eventWithId, actionDefinition, otelContext)
         const { statement, bindValues } = eventToSql(eventWithId, actionDefinition)
-        const { durationMs } = this.inMemoryDB.execute(statement.sql, bindValues, statement.writeTables, {
-          otelContext,
-        })
+        const { durationMs } = this.inMemoryDB.execute(
+          statement.sql,
+          prepareBindValues(bindValues, statement.sql),
+          statement.writeTables,
+          {
+            otelContext,
+          },
+        )
 
         // Asynchronously apply the event to a persistent storage (we're not awaiting this promise here)
         if (this.storage !== undefined) {
           // this.storage.applyEvent(eventWithId, actionDefinition, span)
-          this.storage.execute(statement.sql, bindValues, span)
+          this.storage.execute(statement.sql, prepareBindValues(bindValues, statement.sql), span)
         }
 
         // Uncomment to print a list of queries currently registered on the store
@@ -809,11 +854,11 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
    * all app writes should go through applyEvent.
    */
   execute = async (query: string, params: ParamsObject = {}, writeTables?: string[]) => {
-    this.inMemoryDB.execute(query, params, writeTables)
+    this.inMemoryDB.execute(query, prepareBindValues(params, query), writeTables)
 
     if (this.storage !== undefined) {
       const parentSpan = otel.trace.getSpan(otel.context.active())
-      this.storage.execute(query, params, parentSpan)
+      this.storage.execute(query, prepareBindValues(params, query), parentSpan)
     }
   }
 }
@@ -826,6 +871,7 @@ export const createStore = async <TGraphQLContext extends BaseGraphQLContext>({
   otelTracer = makeNoopTracer(),
   otelRootSpanContext = otel.context.active(),
   boot,
+  sqlite3,
 }: {
   schema: Schema
   loadStorage: () => StorageInit | Promise<StorageInit>
@@ -833,50 +879,36 @@ export const createStore = async <TGraphQLContext extends BaseGraphQLContext>({
   otelTracer?: otel.Tracer
   otelRootSpanContext?: otel.Context
   boot?: (db: InMemoryDatabase, parentSpan: otel.Span) => unknown | Promise<unknown>
+  sqlite3: Sqlite.Sqlite3Static
 }): Promise<Store<TGraphQLContext>> => {
   return otelTracer.startActiveSpan('createStore', {}, otelRootSpanContext, async (span) => {
     try {
       const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
-      const loadStorageAndPersistedData = async () => {
-        const storage = await otelTracer.startActiveSpan('storage:load', {}, otelContext, async (span) => {
+      const storage = await otelTracer.startActiveSpan('storage:load', {}, otelContext, async (span) => {
+        try {
+          const init = await loadStorage()
+          const parentSpan = otel.trace.getSpan(otel.context.active()) ?? makeNoopSpan()
+          return init({ otelTracer, parentSpan })
+        } finally {
+          span.end()
+        }
+      })
+
+      const persistedData = await otelTracer.startActiveSpan(
+        'storage:getPersistedData',
+        {},
+        otelContext,
+        async (span) => {
           try {
-            const init = await loadStorage()
-            const parentSpan = otel.trace.getSpan(otel.context.active()) ?? makeNoopSpan()
-            return init({ otelTracer, parentSpan })
+            return await storage.getPersistedData(span)
           } finally {
             span.end()
           }
-        })
-
-        const persistedData = await otelTracer.startActiveSpan(
-          'storage:getPersistedData',
-          {},
-          otelContext,
-          async (span) => {
-            try {
-              return await storage.getPersistedData(span)
-            } finally {
-              span.end()
-            }
-          },
-        )
-
-        return { storage, persistedData }
-      }
-
-      const loadSqlite3 = () =>
-        initSqlite3Wasm({
-          // Required to load the wasm binary asynchronously. Of course, you can host it wherever you want
-          // You can omit locateFile completely when running in node
-          // locateFile: () => `/sql-wasm.wasm`,
-          print: (message) => console.log(`[livestore sqlite] ${message}`),
-          printErr: (message) => console.error(`[livestore sqlite] ${message}`),
-        })
-
-      const [{ storage, persistedData }, sqlite3] = await Promise.all([loadStorageAndPersistedData(), loadSqlite3()])
+        },
+      )
 
-      const db = InMemoryDatabase.load(persistedData, otelTracer, otelRootSpanContext, sqlite3)
+      const db = InMemoryDatabase.load({ data: persistedData, otelTracer, otelRootSpanContext, sqlite3 })
 
       // Proxy to `db` that also mirrors `execute` calls to `storage`
       const dbProxy = new Proxy(db, {
@@ -887,6 +919,14 @@ export const createStore = async <TGraphQLContext extends BaseGraphQLContext>({
               return db.execute(query, bindValues, writeTables, options)
             }
             return execute
+          } else if (prop === 'select') {
+            // NOTE we're even proxying `select` calls here as some apps (e.g. Overtone) currently rely on this
+            // TODO remove this once we've migrated all apps to use `execute` instead of `select`
+            const select: InMemoryDatabase['select'] = (query, options = {}) => {
+              storage.execute(query, options.bindValues as any)
+              return db.select(query, options)
+            }
+            return select
           } else {
             return Reflect.get(db, prop, receiver)
           }
@@ -914,7 +954,7 @@ export const createStore = async <TGraphQLContext extends BaseGraphQLContext>({
       // Think about what to do about this case.
       // await applySchema(db, schema)
       return Store.createStore<TGraphQLContext>(
-        { db, schema, storage, graphQLOptions, otelTracer, otelRootSpanContext },
+        { db, dbProxy, schema, storage, graphQLOptions, otelTracer, otelRootSpanContext },
         span,
       )
     } finally {

package/src/util.ts

@@ -1,10 +1,14 @@
 /// <reference lib="es2022" />
 
+import type { Brand } from '@livestore/utils/effect'
+
 export type ParamsObject = Record<string, SqlValue>
 export type SqlValue = string | number | Uint8Array | null
 
 export type Bindable = SqlValue[] | ParamsObject
 
+export type PreparedBindValues = Brand.Branded<Bindable, 'PreparedBindValues'>
+
 /**
  * This is a tag function for tagged literals.
  * it lets us get syntax highlighting on SQL queries in VSCode, but
@@ -25,7 +29,9 @@ export const sql = (template: TemplateStringsArray, ...args: unknown[]): string
 /*  because rusqlite doesn't allow unused named params
 /*  TODO: Search for unused params via proper parsing, not string search
 **/
-export const prepareBindValues = (values: ParamsObject, statement: string): ParamsObject => {
+export const prepareBindValues = (values: Bindable, statement: string): PreparedBindValues => {
+  if (Array.isArray(values)) return values as PreparedBindValues
+
   const result: ParamsObject = {}
   for (const [key, value] of Object.entries(values)) {
     if (statement.includes(key)) {
@@ -33,7 +39,7 @@ export const prepareBindValues = (values: ParamsObject, statement: string): Para
     }
   }
 
-  return result
+  return result as PreparedBindValues
 }
 
 /**