@livestore/livestore 0.0.12 → 0.0.14

package/dist/util.d.ts

@@ -0,0 +1,28 @@
+/// <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
+ * doesn't do anything at runtime.
+ * Code copied from: https://esdiscuss.org/topic/string-identity-template-tag
+ */
+export declare const sql: (template: TemplateStringsArray, ...args: unknown[]) => string;
+/** Prepare bind values to send to SQLite
+/*  Add $ to the beginning of keys; which we use as our interpolation syntax
+/*  We also strip out any params that aren't used in the statement,
+/*  because rusqlite doesn't allow unused named params
+/*  TODO: Search for unused params via proper parsing, not string search
+**/
+export declare const prepareBindValues: (values: Bindable, statement: string) => PreparedBindValues;
+/**
+ * Use this to make assertion at end of if-else chain that all members of a
+ * union have been accounted for.
+ */
+export declare function casesHandled(x: never): never;
+export declare const objectToString: (error: any) => string;
+export declare const isPromise: (value: any) => value is Promise<unknown>;
+//# sourceMappingURL=util.d.ts.map

package/dist/util.d.ts.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,55 @@
+/// <reference lib="es2022" />
+/**
+ * This is a tag function for tagged literals.
+ * it lets us get syntax highlighting on SQL queries in VSCode, but
+ * doesn't do anything at runtime.
+ * Code copied from: https://esdiscuss.org/topic/string-identity-template-tag
+ */
+export const sql = (template, ...args) => {
+    let str = '';
+    for (const [i, arg] of args.entries()) {
+        str += template[i] + String(arg);
+    }
+    return str + template.at(-1);
+};
+/** Prepare bind values to send to SQLite
+/*  Add $ to the beginning of keys; which we use as our interpolation syntax
+/*  We also strip out any params that aren't used in the statement,
+/*  because rusqlite doesn't allow unused named params
+/*  TODO: Search for unused params via proper parsing, not string search
+**/
+export const prepareBindValues = (values, statement) => {
+    if (Array.isArray(values))
+        return values;
+    const result = {};
+    for (const [key, value] of Object.entries(values)) {
+        if (statement.includes(key)) {
+            result[`$${key}`] = value;
+        }
+    }
+    return result;
+};
+/**
+ * Use this to make assertion at end of if-else chain that all members of a
+ * union have been accounted for.
+ */
+/* eslint-disable-next-line prefer-arrow/prefer-arrow-functions */
+export function casesHandled(x) {
+    throw new Error(`A case was not handled for value: ${objectToString(x)}`);
+}
+export const objectToString = (error) => {
+    const stack = typeof process !== 'undefined' && process.env.CL_DEBUG ? error.stack : undefined;
+    const str = error.toString();
+    const stackStr = stack ? `\n${stack}` : '';
+    if (str !== '[object Object]')
+        return str + stackStr;
+    try {
+        return JSON.stringify({ ...error, stack }, null, 2);
+    }
+    catch (e) {
+        console.log(error);
+        return 'Error while printing error: ' + e;
+    }
+};
+export const isPromise = (value) => typeof value?.then === 'function';
+//# sourceMappingURL=util.js.map

package/dist/util.js.map

@@ -0,0 +1 @@
+{"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/package.json

@@ -1,15 +1,36 @@
 {
   "name": "@livestore/livestore",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
-  "publishConfig": {
-    "access": "public"
-  },
   "exports": {
-    ".": "./dist/index.js",
-    "./react": "./dist/react/index.js",
-    "./effect": "./dist/effect/index.js",
-    "./util": "./dist/util.js"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./storage/web-worker": {
+      "types": "./dist/storage/web-worker/index.d.ts",
+      "default": "./dist/storage/web-worker/index.js"
+    },
+    "./storage/in-memory": {
+      "types": "./dist/storage/in-memory/index.d.ts",
+      "default": "./dist/storage/in-memory/index.js"
+    },
+    "./storage/tauri": {
+      "types": "./dist/storage/tauri/index.d.ts",
+      "default": "./dist/storage/tauri/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "default": "./dist/react/index.js"
+    },
+    "./effect": {
+      "types": "./dist/effect/index.d.ts",
+      "default": "./dist/effect/index.js"
+    },
+    "./util": {
+      "types": "./dist/util.d.ts",
+      "default": "./dist/util.js"
+    }
   },
   "types": "./dist/index.d.ts",
   "typesVersions": {
@@ -34,11 +55,27 @@
     "@livestore/utils": "workspace:*",
     "@opentelemetry/api": "^1.6.0",
     "comlink": "^4.4.1",
+    "effect-db-schema": "workspace:*",
     "graphql": "^16.8.1",
     "lodash-es": "^4.17.21",
     "sqlite-esm": "3.42.0-build6",
     "uuid": "^9.0.1"
   },
+  "devDependencies": {
+    "@tauri-apps/api": "^1.5.0",
+    "@opentelemetry/sdk-trace-base": "1.17.1",
+    "@testing-library/react": "^14.0.0",
+    "@types/lodash-es": "^4.17.9",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/uuid": "^9.0.5",
+    "jsdom": "^22.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "5.2.2",
+    "vite": "4.4.11",
+    "vitest": "^0.34.6"
+  },
   "peerDependencies": {
     "@tauri-apps/api": "^1.4.0",
     "react": "^18",
@@ -49,16 +86,7 @@
       "optional": true
     }
   },
-  "devDependencies": {
-    "@tauri-apps/api": "^1.4.0",
-    "@testing-library/react": "^14.0.0",
-    "@types/lodash-es": "^4.17.9",
-    "@types/uuid": "^9.0.4",
-    "jsdom": "^22.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "5.2.2",
-    "vite": "4.4.9",
-    "vitest": "^0.34.6"
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/QueryCache.ts

@@ -38,7 +38,7 @@ export default class QueryCache {
     return this.#entries.get(key)
   }
 
-  set = (queriedTables: string[], key: CacheKey, results: any) => {
+  set = (queriedTables: ReadonlyArray<string>, key: CacheKey, results: any) => {
     this.#entries.set(key, results)
     for (const table of queriedTables) {
       let keys = this.#dependencies.get(table)

package/src/__tests__/react/fixture.tsx

@@ -1,9 +1,11 @@
-import { mapObjectValues } from '@livestore/utils'
+import type * as otel from '@opentelemetry/api'
 import React from 'react'
+import initSqlite3Wasm from 'sqlite-esm'
 
 import * as LiveStore from '../../index.js'
 import { sql } from '../../index.js'
 import * as LiveStoreReact from '../../react/index.js'
+import { InMemoryStorage } from '../../storage/in-memory/index.js'
 
 export type Todo = {
   id: string
@@ -18,31 +20,22 @@ export type AppState = {
   filter: Filter
 }
 
-const appState: LiveStore.QueryDefinition = (store) =>
-  store.querySQL<AppState>(() => `select newTodoText, filter from app;`, { queriedTables: ['app'] }).getFirstRow()
+// const appState: LiveStore.QueryDefinition = (store) =>
+//   store.querySQL<AppState>(() => `select newTodoText, filter from app;`, { queriedTables: ['app'] }).getFirstRow()
 
-export const globalQueryDefs = {
-  appState,
-}
-
-export const schema = LiveStore.defineSchema({
+export const schema = LiveStore.makeSchema({
   tables: {
-    todos: {
-      columns: {
-        id: { type: 'text', primaryKey: true },
-        text: { type: 'text', default: '', nullable: false },
-        completed: { type: 'boolean', default: false, nullable: false },
-      },
-    },
-    app: {
-      columns: {
-        id: { type: 'text', primaryKey: true },
-        newTodoText: { type: 'text', default: '', nullable: true },
-        filter: { type: 'text', default: 'all', nullable: false },
-      },
-    },
+    todos: LiveStore.DbSchema.table('todos', {
+      id: LiveStore.DbSchema.text({ primaryKey: true }),
+      text: LiveStore.DbSchema.text({ default: '', nullable: false }),
+      completed: LiveStore.DbSchema.boolean({ default: false, nullable: false }),
+    }),
+    app: LiveStore.DbSchema.table('app', {
+      id: LiveStore.DbSchema.text({ primaryKey: true }),
+      newTodoText: LiveStore.DbSchema.text({ default: '', nullable: true }),
+      filter: LiveStore.DbSchema.text({ default: 'all', nullable: false }),
+    }),
   },
-  materializedViews: {},
   actions: {
     // TODO: fix these actions to make them have write annotatinos
     addTodo: {
@@ -62,29 +55,32 @@ export const schema = LiveStore.defineSchema({
   },
 })
 
-export const makeTodoMvc = async () => {
-  type UserInfoComponentState = { username: string }
+export const makeTodoMvc = async ({
+  otelTracer,
+  otelContext,
+}: {
+  otelTracer?: otel.Tracer
+  otelContext?: otel.Context
+} = {}) => {
+  const AppSchema = LiveStore.defineComponentStateSchema('UserInfo', {
+    username: LiveStore.DbSchema.text({ default: '' }),
+  })
 
-  const AppSchema = LiveStore.defineComponentStateSchema<UserInfoComponentState>({
-    componentType: 'UserInfo',
-    columns: {
-      username: { type: 'text', default: '' },
-    },
+  const sqlite3 = await initSqlite3Wasm({
+    print: (message) => console.log(`[livestore sqlite] ${message}`),
+    printErr: (message) => console.error(`[livestore sqlite] ${message}`),
   })
 
   const store = await LiveStore.createStore({
     schema,
-    backendOptions: { type: 'web-in-memory' },
-    boot: async (backend) => {
-      backend.execute(sql`INSERT INTO app (newTodoText, filter) VALUES ('', 'all');`)
-      // NOTE we can't insert into components__UserInfo yet because the table doesn't exist yet
-      // backend.execute(sql`INSERT INTO components__UserInfo (id, username) VALUES ('u1', 'username_u1');`)
-      // backend.execute(sql`INSERT INTO components__UserInfo (id, username) VALUES ('u2', 'username_u2');`)
-    },
+    loadStorage: () => InMemoryStorage.load(),
+    boot: (db) => db.execute(sql`INSERT OR IGNORE INTO app (id, newTodoText, filter) VALUES ('static', '', 'all');`),
+    sqlite3,
+    otelTracer,
+    otelRootSpanContext: otelContext,
   })
 
-  const globalQueries = mapObjectValues(globalQueryDefs, (_, queryDef) => queryDef(store))
-  const storeContext: LiveStore.LiveStoreContext = { store, globalQueries }
+  const storeContext: LiveStore.LiveStoreContext = { store }
 
   const wrapper = ({ children }: any) => (
     <LiveStoreReact.LiveStoreContext.Provider value={storeContext}>{children}</LiveStoreReact.LiveStoreContext.Provider>

package/src/__tests__/react/{useLiveStoreComponent.test.tsx → useComponentState.test.tsx}

@@ -5,7 +5,7 @@ import { sql } from '../../index.js'
 import * as LiveStoreReact from '../../react/index.js'
 import { makeTodoMvc } from './fixture.js'
 
-describe('useLiveStoreComponent', () => {
+describe('useComponentState', () => {
   it('should update the data based on component key', async () => {
     let renderCount = 0
 
@@ -15,10 +15,9 @@ describe('useLiveStoreComponent', () => {
       (userId: string) => {
         renderCount++
 
-        return LiveStoreReact.useLiveStoreComponent({
-          stateSchema: AppSchema,
+        return LiveStoreReact.useComponentState({
+          schema: AppSchema,
           componentKey: { name: 'UserInfo', id: userId },
-          queries: () => ({}),
         })
       },
       { wrapper, initialProps: 'u1' },
@@ -48,10 +47,9 @@ describe('useLiveStoreComponent', () => {
       (userId: string) => {
         renderCount++
 
-        return LiveStoreReact.useLiveStoreComponent({
-          stateSchema: AppSchema,
+        return LiveStoreReact.useComponentState({
+          schema: AppSchema,
           componentKey: { name: 'UserInfo', id: userId },
-          queries: () => ({}),
         })
       },
       { wrapper, initialProps: 'u1' },
@@ -61,13 +59,7 @@ describe('useLiveStoreComponent', () => {
     expect(result.current.state.username).toBe('')
     expect(renderCount).toBe(1)
 
-    act(() => {
-      result.current.setState.username('username_u1_hello')
-    })
-
-    // act(() => {
-    //   store.execute(sql`UPDATE components__UserInfo SET username = 'username_u1_hello' WHERE id = 'u1';`)
-    // })
+    act(() => result.current.setState.username('username_u1_hello'))
 
     expect(result.current.state.id).toBe('u1')
     expect(result.current.state.username).toBe('username_u1_hello')
@@ -83,10 +75,9 @@ describe('useLiveStoreComponent', () => {
       (userId: string) => {
         renderCount++
 
-        return LiveStoreReact.useLiveStoreComponent({
-          stateSchema: AppSchema,
+        return LiveStoreReact.useComponentState({
+          schema: AppSchema,
           componentKey: { name: 'UserInfo', id: userId },
-          queries: () => ({}),
         })
       },
       { wrapper, initialProps: 'u1' },
@@ -96,9 +87,7 @@ describe('useLiveStoreComponent', () => {
     expect(result.current.state.username).toBe('')
     expect(renderCount).toBe(1)
 
-    act(() => {
-      result.current.setState.username('username_u1_hello')
-    })
+    act(() => result.current.setState.username('username_u1_hello'))
 
     act(() => {
       void store.execute(sql`UPDATE components__UserInfo SET username = 'username_u1_hello' WHERE id = 'u1';`)

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

@@ -0,0 +1,48 @@
+import { act, renderHook } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import * as LiveStoreReact from '../../react/index.js'
+import { LiveStoreSQLQuery } from '../../reactiveQueries/sql.js'
+import { sql } from '../../util.js'
+import type { Todo } from './fixture.js'
+import { makeTodoMvc } from './fixture.js'
+
+const query = new LiveStoreSQLQuery<Todo>({
+  label: 'todo',
+  genQueryString: `select * from todos`,
+  queriedTables: ['todos'],
+})
+
+describe('useQuery', () => {
+  it('simple', async () => {
+    let renderCount = 0
+
+    const { wrapper, store } = await makeTodoMvc()
+
+    const { result } = renderHook(
+      () => {
+        renderCount++
+
+        return LiveStoreReact.useQuery(query)
+      },
+      { wrapper },
+    )
+
+    expect(result.current.length).toBe(0)
+    expect(renderCount).toBe(1)
+
+    act(() =>
+      store.applyEvent('RawSql', {
+        sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0);`,
+        bindValues: {},
+        writeTables: ['todos'],
+      }),
+    )
+
+    expect(result.current.length).toBe(1)
+    expect(result.current[0]!.text).toBe('buy milk')
+    expect(renderCount).toBe(2)
+  })
+})
+
+// TODO write tests that use the same query in multiple components at the same time with different bind values

package/src/__tests__/react/utils/extractStackInfoFromStackTrace.test.ts

@@ -0,0 +1,40 @@
+import { expect, it } from 'vitest'
+
+import { extractStackInfoFromStackTrace } from '../../../react/utils/extractStackInfoFromStackTrace.js'
+
+it('RouteLink stacktrace', async () => {
+  const stackTrace = `\
+Error
+	at https://localhost:8081/@fs/Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/livestore/dist/react/useQuery.js?t=1699550216884:18:23
+	at mountMemo (https://localhost:8081/node_modules/.vite-web/deps/chunk-M23HUTQV.js?v=3eb66ed6:12817:27)
+	at Object.useMemo (https://localhost:8081/node_modules/.vite-web/deps/chunk-M23HUTQV.js?v=3eb66ed6:13141:24)
+	at Object.useMemo (https://localhost:8081/node_modules/.vite-web/deps/chunk-4WADDZ2G.js?v=3eb66ed6:1094:29)
+	at useQuery (https://localhost:8081/@fs/Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/livestore/dist/react/useQuery.js?t=1699550216884:13:33)
+	at useAppState (https://localhost:8081/src/db/AppState.ts?t=1699550216884:17:34)
+	at useRoute (https://localhost:8081/src/db/AppState.ts?t=1699550216884:74:22)
+	at RouteLink (https://localhost:8081/src/components/Link.tsx?t=1699550216884:36:7)
+	at renderWithHooks (https://localhost:8081/node_modules/.vite-web/deps/chunk-M23HUTQV.js?v=3eb66ed6:12171:26)
+	at mountIndeterminateComponent (https://localhost:8081/node_modules/.vite-web/deps/chunk-M23HUTQV.js?v=3eb66ed6:14921:21)
+`
+
+  expect(extractStackInfoFromStackTrace(stackTrace)).toMatchInlineSnapshot(`
+    [
+      {
+        "filePath": "https://localhost:8081/src/components/Link.tsx?t=1699550216884:36:7",
+        "name": "RouteLink",
+      },
+      {
+        "filePath": "https://localhost:8081/src/db/AppState.ts?t=1699550216884:74:22",
+        "name": "useRoute",
+      },
+      {
+        "filePath": "https://localhost:8081/src/db/AppState.ts?t=1699550216884:17:34",
+        "name": "useAppState",
+      },
+      {
+        "filePath": "https://localhost:8081/@fs/Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/livestore/dist/react/useQuery.js?t=1699550216884:13:33",
+        "name": "useQuery",
+      },
+    ]
+  `)
+})