@livestore/react 0.0.0-snapshot-8d3edf87cb1e88c7b67c5f3ea9d0b307253c33df

package/src/__snapshots__/useRow.test.tsx.snap

@@ -0,0 +1,359 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`useRow > otel > should update the data based on component key > strictMode=false 1`] = `
+{
+  "_name": "test",
+  "children": [
+    {
+      "_name": "livestore.in-memory-db:execute",
+      "attributes": {
+        "sql.query": "
+      PRAGMA page_size=32768;
+      PRAGMA cache_size=10000;
+      PRAGMA journal_mode='MEMORY'; -- we don't flush to disk before committing a write
+      PRAGMA synchronous='OFF';
+      PRAGMA temp_store='MEMORY';
+      PRAGMA foreign_keys='ON'; -- we want foreign key constraints to be enforced
+    ",
+      },
+    },
+    {
+      "_name": "sql-in-memory-select",
+      "attributes": {
+        "sql.cached": false,
+        "sql.query": "select 1 from UserInfo where id = 'u1'",
+        "sql.rowsCount": 0,
+      },
+    },
+    {
+      "_name": "sql-in-memory-select",
+      "attributes": {
+        "sql.cached": false,
+        "sql.query": "select 1 from UserInfo where id = 'u2'",
+        "sql.rowsCount": 1,
+      },
+    },
+    {
+      "_name": "LiveStore:mutations",
+      "children": [
+        {
+          "_name": "LiveStore:mutate",
+          "attributes": {
+            "livestore.mutateLabel": "mutate",
+          },
+          "children": [
+            {
+              "_name": "LiveStore:processWrites",
+              "attributes": {
+                "livestore.mutateLabel": "mutate",
+              },
+              "children": [
+                {
+                  "_name": "LiveStore:mutateWithoutRefresh",
+                  "attributes": {
+                    "livestore.args": "{
+  "sql": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')"
+}",
+                    "livestore.mutation": "livestore.RawSql",
+                  },
+                  "children": [
+                    {
+                      "_name": "livestore.in-memory-db:execute",
+                      "attributes": {
+                        "sql.query": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')",
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      "_name": "LiveStore:queries",
+      "children": [
+        {
+          "_name": "sql:select * from UserInfo where id = 'u1' limit 1",
+          "attributes": {
+            "sql.query": "select * from UserInfo where id = 'u1' limit 1",
+            "sql.rowsCount": 1,
+          },
+          "children": [
+            {
+              "_name": "sql-in-memory-select",
+              "attributes": {
+                "sql.cached": false,
+                "sql.query": "select * from UserInfo where id = 'u1' limit 1",
+                "sql.rowsCount": 1,
+              },
+            },
+          ],
+        },
+        {
+          "_name": "LiveStore:useRow:UserInfo:u1",
+          "attributes": {
+            "id": "u1",
+          },
+          "children": [
+            {
+              "_name": "LiveStore:mutateWithoutRefresh",
+              "attributes": {
+                "livestore.args": "{
+  "id": "u1"
+}",
+                "livestore.mutation": "_Derived_Create_UserInfo",
+              },
+              "children": [
+                {
+                  "_name": "livestore.in-memory-db:execute",
+                  "attributes": {
+                    "sql.query": "INSERT INTO UserInfo (username, text, id) VALUES ($username, $text, $id)",
+                  },
+                },
+              ],
+            },
+            {
+              "_name": "LiveStore:useQuery:sql(rowQuery:query:UserInfo:u1)",
+              "attributes": {
+                "label": "sql(rowQuery:query:UserInfo:u1)",
+                "stackInfo": "{"frames":[{"name":"renderHook.wrapper","filePath":"__REPLACED_FOR_SNAPSHOT__"},{"name":"useRow","filePath":"__REPLACED_FOR_SNAPSHOT__"}]}",
+              },
+              "children": [
+                {
+                  "_name": "sql:select * from UserInfo where id = 'u1' limit 1",
+                  "attributes": {
+                    "sql.query": "select * from UserInfo where id = 'u1' limit 1",
+                    "sql.rowsCount": 1,
+                  },
+                  "children": [
+                    {
+                      "_name": "sql-in-memory-select",
+                      "attributes": {
+                        "sql.cached": false,
+                        "sql.query": "select * from UserInfo where id = 'u1' limit 1",
+                        "sql.rowsCount": 1,
+                      },
+                    },
+                  ],
+                },
+                {
+                  "_name": "LiveStore.subscribe",
+                  "attributes": {
+                    "label": "sql(rowQuery:query:UserInfo:u1)",
+                    "queryLabel": "sql(rowQuery:query:UserInfo:u1)",
+                  },
+                },
+              ],
+            },
+          ],
+        },
+        {
+          "_name": "LiveStore:useRow:UserInfo:u2",
+          "attributes": {
+            "id": "u2",
+          },
+          "children": [
+            {
+              "_name": "LiveStore:useQuery:sql(rowQuery:query:UserInfo:u2)",
+              "attributes": {
+                "label": "sql(rowQuery:query:UserInfo:u2)",
+                "stackInfo": "{"frames":[{"name":"renderHook.wrapper","filePath":"__REPLACED_FOR_SNAPSHOT__"},{"name":"useRow","filePath":"__REPLACED_FOR_SNAPSHOT__"}]}",
+              },
+              "children": [
+                {
+                  "_name": "sql:select * from UserInfo where id = 'u2' limit 1",
+                  "attributes": {
+                    "sql.query": "select * from UserInfo where id = 'u2' limit 1",
+                    "sql.rowsCount": 1,
+                  },
+                  "children": [
+                    {
+                      "_name": "sql-in-memory-select",
+                      "attributes": {
+                        "sql.cached": false,
+                        "sql.query": "select * from UserInfo where id = 'u2' limit 1",
+                        "sql.rowsCount": 1,
+                      },
+                    },
+                  ],
+                },
+                {
+                  "_name": "LiveStore.subscribe",
+                  "attributes": {
+                    "label": "sql(rowQuery:query:UserInfo:u2)",
+                    "queryLabel": "sql(rowQuery:query:UserInfo:u2)",
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}
+`;
+
+exports[`useRow > otel > should update the data based on component key > strictMode=true 1`] = `
+{
+  "_name": "test",
+  "children": [
+    {
+      "_name": "livestore.in-memory-db:execute",
+      "attributes": {
+        "sql.query": "
+      PRAGMA page_size=32768;
+      PRAGMA cache_size=10000;
+      PRAGMA journal_mode='MEMORY'; -- we don't flush to disk before committing a write
+      PRAGMA synchronous='OFF';
+      PRAGMA temp_store='MEMORY';
+      PRAGMA foreign_keys='ON'; -- we want foreign key constraints to be enforced
+    ",
+      },
+    },
+    {
+      "_name": "sql-in-memory-select",
+      "attributes": {
+        "sql.cached": false,
+        "sql.query": "select 1 from UserInfo where id = 'u1'",
+        "sql.rowsCount": 0,
+      },
+    },
+    {
+      "_name": "sql-in-memory-select",
+      "attributes": {
+        "sql.cached": false,
+        "sql.query": "select 1 from UserInfo where id = 'u2'",
+        "sql.rowsCount": 1,
+      },
+    },
+    {
+      "_name": "LiveStore:mutations",
+      "children": [
+        {
+          "_name": "LiveStore:mutate",
+          "attributes": {
+            "livestore.mutateLabel": "mutate",
+          },
+          "children": [
+            {
+              "_name": "LiveStore:processWrites",
+              "attributes": {
+                "livestore.mutateLabel": "mutate",
+              },
+              "children": [
+                {
+                  "_name": "LiveStore:mutateWithoutRefresh",
+                  "attributes": {
+                    "livestore.args": "{
+  "sql": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')"
+}",
+                    "livestore.mutation": "livestore.RawSql",
+                  },
+                  "children": [
+                    {
+                      "_name": "livestore.in-memory-db:execute",
+                      "attributes": {
+                        "sql.query": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')",
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      "_name": "LiveStore:queries",
+      "children": [
+        {
+          "_name": "sql:select * from UserInfo where id = 'u1' limit 1",
+          "attributes": {
+            "sql.query": "select * from UserInfo where id = 'u1' limit 1",
+            "sql.rowsCount": 1,
+          },
+          "children": [
+            {
+              "_name": "sql-in-memory-select",
+              "attributes": {
+                "sql.cached": false,
+                "sql.query": "select * from UserInfo where id = 'u1' limit 1",
+                "sql.rowsCount": 1,
+              },
+            },
+          ],
+        },
+        {
+          "_name": "LiveStore:useRow:UserInfo:u1",
+          "attributes": {
+            "id": "u1",
+          },
+          "children": [
+            {
+              "_name": "LiveStore:mutateWithoutRefresh",
+              "attributes": {
+                "livestore.args": "{
+  "id": "u1"
+}",
+                "livestore.mutation": "_Derived_Create_UserInfo",
+              },
+              "children": [
+                {
+                  "_name": "livestore.in-memory-db:execute",
+                  "attributes": {
+                    "sql.query": "INSERT INTO UserInfo (username, text, id) VALUES ($username, $text, $id)",
+                  },
+                },
+              ],
+            },
+            {
+              "_name": "LiveStore:useQuery:sql(rowQuery:query:UserInfo:u1)",
+              "attributes": {
+                "label": "sql(rowQuery:query:UserInfo:u1)",
+                "stackInfo": "{"frames":[{"name":"renderHook.wrapper","filePath":"__REPLACED_FOR_SNAPSHOT__"},{"name":"useRow","filePath":"__REPLACED_FOR_SNAPSHOT__"}]}",
+              },
+              "children": [
+                {
+                  "_name": "sql:select * from UserInfo where id = 'u1' limit 1",
+                  "attributes": {
+                    "sql.query": "select * from UserInfo where id = 'u1' limit 1",
+                    "sql.rowsCount": 1,
+                  },
+                  "children": [
+                    {
+                      "_name": "sql-in-memory-select",
+                      "attributes": {
+                        "sql.cached": false,
+                        "sql.query": "select * from UserInfo where id = 'u1' limit 1",
+                        "sql.rowsCount": 1,
+                      },
+                    },
+                  ],
+                },
+                {
+                  "_name": "LiveStore.subscribe",
+                  "attributes": {
+                    "label": "sql(rowQuery:query:UserInfo:u1)",
+                    "queryLabel": "sql(rowQuery:query:UserInfo:u1)",
+                  },
+                },
+                {
+                  "_name": "LiveStore.subscribe",
+                  "attributes": {
+                    "label": "sql(rowQuery:query:UserInfo:u1)",
+                    "queryLabel": "sql(rowQuery:query:UserInfo:u1)",
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}
+`;

package/src/__tests__/fixture.tsx

@@ -0,0 +1,119 @@
+import { sql } from '@livestore/common'
+import { DbSchema, makeSchema } from '@livestore/common/schema'
+import type { LiveStoreContextRunning } from '@livestore/livestore'
+import { createStore, globalReactivityGraph, makeReactivityGraph } from '@livestore/livestore'
+import { Effect, FiberSet } from '@livestore/utils/effect'
+import { makeInMemoryAdapter } from '@livestore/web'
+import type * as otel from '@opentelemetry/api'
+import React from 'react'
+
+import * as LiveStoreReact from '../mod.js'
+
+export type Todo = {
+  id: string
+  text: string
+  completed: boolean
+}
+
+export type Filter = 'all' | 'active' | 'completed'
+
+export type AppState = {
+  newTodoText: string
+  filter: Filter
+}
+
+export const todos = DbSchema.table(
+  'todos',
+  {
+    id: DbSchema.text({ primaryKey: true }),
+    text: DbSchema.text({ default: '', nullable: false }),
+    completed: DbSchema.boolean({ default: false, nullable: false }),
+  },
+  { deriveMutations: true, isSingleton: false },
+)
+
+export const app = DbSchema.table('app', {
+  id: DbSchema.text({ primaryKey: true }),
+  newTodoText: DbSchema.text({ default: '', nullable: true }),
+  filter: DbSchema.text({ default: 'all', nullable: false }),
+})
+
+export const AppComponentSchema = DbSchema.table(
+  'UserInfo',
+  {
+    username: DbSchema.text({ default: '' }),
+    text: DbSchema.text({ default: '' }),
+  },
+  { deriveMutations: true },
+)
+
+export const AppRouterSchema = DbSchema.table(
+  'AppRouter',
+  {
+    currentTaskId: DbSchema.text({ default: null, nullable: true }),
+  },
+  { isSingleton: true, deriveMutations: true },
+)
+
+export const tables = { todos, app, AppComponentSchema, AppRouterSchema }
+export const schema = makeSchema({ tables })
+
+export const makeTodoMvcReact = ({
+  otelTracer,
+  otelContext,
+  useGlobalReactivityGraph = true,
+  strictMode = process.env.REACT_STRICT_MODE !== undefined,
+}: {
+  otelTracer?: otel.Tracer
+  otelContext?: otel.Context
+  useGlobalReactivityGraph?: boolean
+  strictMode?: boolean
+} = {}) =>
+  Effect.gen(function* () {
+    const makeRenderCount = () => {
+      let val = 0
+
+      const inc = () => {
+        val += strictMode ? 0.5 : 1
+      }
+
+      return {
+        get val() {
+          return val
+        },
+        inc,
+      }
+    }
+
+    const reactivityGraph = useGlobalReactivityGraph ? globalReactivityGraph : makeReactivityGraph()
+
+    const fiberSet = yield* FiberSet.make()
+
+    const store = yield* createStore({
+      schema,
+      storeId: 'default',
+      boot: (db) => db.execute(sql`INSERT OR IGNORE INTO app (id, newTodoText, filter) VALUES ('static', '', 'all');`),
+      adapter: makeInMemoryAdapter(),
+      reactivityGraph,
+      otelOptions: {
+        tracer: otelTracer,
+        rootSpanContext: otelContext,
+      },
+      fiberSet,
+    })
+
+    // TODO improve typing of `LiveStoreContext`
+    const storeContext = { stage: 'running', store } as any as LiveStoreContextRunning
+
+    const MaybeStrictMode = strictMode ? React.StrictMode : React.Fragment
+
+    const wrapper = ({ children }: any) => (
+      <MaybeStrictMode>
+        <LiveStoreReact.LiveStoreContext.Provider value={storeContext}>
+          {children}
+        </LiveStoreReact.LiveStoreContext.Provider>
+      </MaybeStrictMode>
+    )
+
+    return { wrapper, store, reactivityGraph, makeRenderCount, strictMode }
+  })

package/src/ambient.d.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-var
+var __debugLiveStore: any

package/src/experimental/components/LiveList.tsx

@@ -0,0 +1,84 @@
+import type { LiveQuery } from '@livestore/livestore'
+import { computed } from '@livestore/livestore'
+import React from 'react'
+
+import { useQuery } from '../../useQuery.js'
+import { useTemporaryQuery } from '../../useTemporaryQuery.js'
+
+/*
+TODO:
+- [ ] Bring back incremental rendering (see https://github.com/livestorejs/livestore/pull/55)
+- [ ] Enable exit animations
+*/
+
+export type LiveListProps<TItem> = {
+  items$: LiveQuery<ReadonlyArray<TItem>>
+  // TODO refactor render-flag to allow for transition animations on add/remove
+  renderItem: (item: TItem, opts: { index: number; isInitialListRender: boolean }) => React.ReactNode
+  /** Needs to be unique across all list items */
+  getKey: (item: TItem, index: number) => string | number
+}
+
+/**
+ * This component is a helper component for rendering a list of items for a LiveQuery of an array of items.
+ * The idea is that instead of letting React handle the rendering of the items array directly,
+ * we derive a item LiveQuery for each item which moves the reactivity to the item level when a single item changes.
+ *
+ * In the future we want to make this component even more efficient by using incremental rendering (https://github.com/livestorejs/livestore/pull/55)
+ * e.g. when an item is added/removed/moved to only re-render the affected DOM nodes.
+ */
+export const LiveList = <TItem,>({ items$, renderItem, getKey }: LiveListProps<TItem>): React.ReactNode => {
+  const [hasMounted, setHasMounted] = React.useState(false)
+
+  React.useEffect(() => setHasMounted(true), [])
+
+  const keysCb = React.useCallback(() => computed((get) => get(items$).map(getKey)), [getKey, items$])
+  const keys = useTemporaryQuery(keysCb, 'fixed')
+  const arr = React.useMemo(
+    () =>
+      keys.map(
+        (key) =>
+          // TODO figure out a way so that `item$` returns an ordered lookup map to more efficiently find the item by key
+          [key, computed((get) => get(items$).find((item) => getKey(item, 0) === key)!) as LiveQuery<TItem>] as const,
+      ),
+    [getKey, items$, keys],
+  )
+
+  return (
+    <>
+      {arr.map(([key, item$], index) => (
+        <ItemWrapperMemo
+          key={key}
+          itemKey={key}
+          item$={item$}
+          opts={{ isInitialListRender: !hasMounted, index }}
+          renderItem={renderItem}
+        />
+      ))}
+    </>
+  )
+}
+
+const ItemWrapper = <TItem,>({
+  item$,
+  opts,
+  renderItem,
+}: {
+  itemKey: string | number
+  item$: LiveQuery<TItem>
+  opts: { index: number; isInitialListRender: boolean }
+  renderItem: (item: TItem, opts: { index: number; isInitialListRender: boolean }) => React.ReactNode
+}) => {
+  const item = useQuery(item$)
+
+  return <>{renderItem(item, opts)}</>
+}
+
+const ItemWrapperMemo = React.memo(
+  ItemWrapper,
+  (prev, next) =>
+    prev.itemKey === next.itemKey &&
+    prev.renderItem === prev.renderItem &&
+    prev.opts.index === next.opts.index &&
+    prev.opts.isInitialListRender === next.opts.isInitialListRender,
+) as typeof ItemWrapper

package/src/experimental/mod.ts

@@ -0,0 +1 @@
+export { LiveList, type LiveListProps } from './components/LiveList.js'

package/src/mod.ts

@@ -0,0 +1,13 @@
+export { LiveStoreContext, useStore } from './LiveStoreContext.js'
+export { LiveStoreProvider } from './LiveStoreProvider.js'
+export { useQuery } from './useQuery.js'
+export { useTemporaryQuery } from './useTemporaryQuery.js'
+export { useStackInfo } from './utils/stack-info.js'
+export {
+  useRow,
+  type StateSetters,
+  type SetStateAction,
+  type Dispatch,
+  type UseRowResult as UseStateResult,
+} from './useRow.js'
+export { useAtom } from './useAtom.js'

package/src/useAtom.ts

@@ -0,0 +1,55 @@
+import { type QueryInfoCol, type QueryInfoRow } from '@livestore/common'
+import type { DbSchema } from '@livestore/common/schema'
+import type { LiveQuery } from '@livestore/livestore'
+import React from 'react'
+
+import { useStore } from './LiveStoreContext.js'
+import { useQueryRef } from './useQuery.js'
+import type { Dispatch, SetStateAction } from './useRow.js'
+
+export const useAtom = <
+  TQuery extends LiveQuery<any, QueryInfoRow<TTableDef> | QueryInfoCol<TTableDef, any>>,
+  TTableDef extends DbSchema.TableDef<
+    DbSchema.DefaultSqliteTableDefConstrained,
+    boolean,
+    DbSchema.TableOptions & { deriveMutations: { enabled: true } }
+  >,
+>(
+  query$: TQuery,
+): [value: TQuery['__result!'], setValue: Dispatch<SetStateAction<Partial<TQuery['__result!']>>>] => {
+  const query$Ref = useQueryRef(query$)
+
+  const { store } = useStore()
+
+  // TODO make API equivalent to useRow
+  const setValue = React.useMemo<Dispatch<SetStateAction<TQuery['__result!']>>>(() => {
+    return (newValueOrFn: any) => {
+      const newValue = typeof newValueOrFn === 'function' ? newValueOrFn(query$Ref.current) : newValueOrFn
+
+      if (query$.queryInfo._tag === 'Row') {
+        if (query$.queryInfo.table.options.isSingleton && query$.queryInfo.table.isSingleColumn) {
+          store.mutate(query$.queryInfo.table.update(newValue))
+        } else if (query$.queryInfo.table.options.isSingleColumn) {
+          store.mutate(
+            query$.queryInfo.table.update({ where: { id: query$.queryInfo.id }, values: { value: newValue } }),
+          )
+        } else {
+          store.mutate(query$.queryInfo.table.update({ where: { id: query$.queryInfo.id }, values: newValue }))
+        }
+      } else {
+        if (query$.queryInfo.table.options.isSingleton && query$.queryInfo.table.isSingleColumn) {
+          store.mutate(query$.queryInfo.table.update({ [query$.queryInfo.column]: newValue }))
+        } else {
+          store.mutate(
+            query$.queryInfo.table.update({
+              where: { id: query$.queryInfo.id },
+              values: { [query$.queryInfo.column]: newValue },
+            }),
+          )
+        }
+      }
+    }
+  }, [query$.queryInfo, query$Ref, store])
+
+  return [query$Ref.current, setValue]
+}