@livestore/livestore 0.0.46-dev.4 → 0.0.46

package/src/reactiveQueries/sql.test.ts

@@ -1,9 +1,9 @@
 import * as otel from '@opentelemetry/api'
-import type { ReadableSpan } from '@opentelemetry/sdk-trace-base'
 import { BasicTracerProvider, InMemorySpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'
 import { describe, expect, it } from 'vitest'
 
 import { makeTodoMvc, todos } from '../__tests__/react/fixture.js'
+import { getSimplifiedRootSpan } from '../__tests__/react/utils/otel.js'
 import { computed, ParseUtils, querySQL, rawSqlMutation, sql } from '../index.js'
 
 /*
@@ -299,56 +299,3 @@ describe('otel', () => {
     `)
   })
 })
-
-const compareHrTime = (a: [number, number], b: [number, number]) => {
-  if (a[0] !== b[0]) return a[0] - b[0]
-  return a[1] - b[1]
-}
-
-const omitEmpty = (obj: any) => {
-  const result: any = {}
-  for (const key in obj) {
-    if (
-      obj[key] !== undefined &&
-      !(Array.isArray(obj[key]) && obj[key].length === 0) &&
-      Object.keys(obj[key]).length > 0
-    ) {
-      result[key] = obj[key]
-    }
-  }
-  return result
-}
-
-const getSimplifiedRootSpan = (exporter: InMemorySpanExporter) => {
-  const spans = exporter.getFinishedSpans()
-  const spansMap = new Map<string, NestedSpan>(spans.map((span) => [span.spanContext().spanId, { span, children: [] }]))
-
-  spansMap.forEach((nestedSpan) => {
-    const parentSpan = nestedSpan.span.parentSpanId ? spansMap.get(nestedSpan.span.parentSpanId) : undefined
-    if (parentSpan) {
-      parentSpan.children.push(nestedSpan)
-    }
-  })
-
-  type NestedSpan = { span: ReadableSpan; children: NestedSpan[] }
-  const rootSpan = spansMap.get(spans.find((_) => _.name === 'test')!.spanContext().spanId)!
-
-  type SimplifiedNestedSpan = { _name: string; attributes: any; children: SimplifiedNestedSpan[] }
-
-  const simplifySpan = (span: NestedSpan): SimplifiedNestedSpan =>
-    omitEmpty({
-      _name: span.span.name,
-      attributes: span.span.attributes,
-      children: span.children
-        .filter((_) => _.span.name !== 'createStore')
-        .sort((a, b) => compareHrTime(a.span.startTime, b.span.startTime))
-        .map(simplifySpan),
-    })
-
-  // console.dir(
-  //   spans.map((_) => [_.spanContext().spanId, _.name, _.attributes, _.parentSpanId]),
-  //   { depth: 10 },
-  // )
-
-  return simplifySpan(rootSpan)
-}

package/src/reactiveQueries/sql.ts

@@ -49,7 +49,7 @@ export class LiveStoreSQLQuery<TResult, TQueryInfo extends QueryInfo = QueryInfo
   _tag: 'sql' = 'sql'
 
   /** A reactive thunk representing the query text */
-  queryString$: Thunk<string, DbContext, RefreshReason>
+  queryString$: Thunk<string, DbContext, RefreshReason> | undefined
 
   /** A reactive thunk representing the query results */
   results$: Thunk<TResult, DbContext, RefreshReason>
@@ -126,23 +126,23 @@ Result:`,
             ? map
             : shouldNeverHappen(`Invalid map function ${map}`)
 
-    // TODO don't even create a thunk if query string is static
-    const queryString$ = this.dbGraph.makeThunk(
-      (get, setDebugInfo, { rootOtelContext }, otelContext) => {
-        if (typeof genQueryString === 'function') {
+    let queryString$OrQueryString: string | Thunk<string, DbContext, RefreshReason>
+    if (typeof genQueryString === 'function') {
+      queryString$OrQueryString = this.dbGraph.makeThunk(
+        (get, setDebugInfo, { rootOtelContext }, otelContext) => {
           const startMs = performance.now()
           const queryString = genQueryString(makeGetAtomResult(get, otelContext ?? rootOtelContext))
           const durationMs = performance.now() - startMs
           setDebugInfo({ _tag: 'js', label: `${label}:queryString`, query: queryString, durationMs })
           return queryString
-        } else {
-          return genQueryString
-        }
-      },
-      { label: `${label}:queryString`, meta: { liveStoreThunkType: 'sqlQueryString' } },
-    )
+        },
+        { label: `${label}:queryString`, meta: { liveStoreThunkType: 'sqlQueryString' } },
+      )
 
-    this.queryString$ = queryString$
+      this.queryString$ = queryString$OrQueryString
+    } else {
+      queryString$OrQueryString = genQueryString
+    }
 
     const queryLabel = `${label}:results`
 
@@ -162,7 +162,10 @@ Result:`,
               this.execBeforeFirstRun = undefined
             }
 
-            const sqlString = get(queryString$, otelContext)
+            const sqlString =
+              typeof queryString$OrQueryString === 'string'
+                ? queryString$OrQueryString
+                : get(queryString$OrQueryString, otelContext)
 
             if (queriedTablesRef.current === undefined) {
               queriedTablesRef.current = store.mainDbWrapper.getTablesUsed(sqlString)
@@ -238,7 +241,10 @@ Result:`,
   //   })
 
   destroy = () => {
-    this.dbGraph.destroyNode(this.queryString$)
+    if (this.queryString$ !== undefined) {
+      this.dbGraph.destroyNode(this.queryString$)
+    }
+
     this.dbGraph.destroyNode(this.results$)
   }
 }

package/src/store.ts

@@ -184,22 +184,23 @@ export class Store<
    * Returns a function to cancel the subscription.
    */
   subscribe = <TResult>(
-    query: LiveQuery<TResult, any>,
+    query$: LiveQuery<TResult, any>,
     onNewValue: (value: TResult) => void,
     onUnsubsubscribe?: () => void,
     options?: { label?: string; otelContext?: otel.Context; skipInitialRun?: boolean } | undefined,
   ): (() => void) =>
     this.otel.tracer.startActiveSpan(
       `LiveStore.subscribe`,
-      { attributes: { label: options?.label, queryLabel: query.label } },
+      { attributes: { label: options?.label, queryLabel: query$.label } },
       options?.otelContext ?? this.otel.queriesSpanContext,
       (span) => {
+        // console.log('store sub', query$.label)
         const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
         const label = `subscribe:${options?.label}`
-        const effect = this.graph.makeEffect((get) => onNewValue(get(query.results$)), { label })
+        const effect = this.graph.makeEffect((get) => onNewValue(get(query$.results$)), { label })
 
-        this.activeQueries.add(query as LiveQuery<TResult>)
+        this.activeQueries.add(query$ as LiveQuery<TResult>)
 
         // Running effect right away to get initial value (unless `skipInitialRun` is set)
         if (options?.skipInitialRun !== true) {
@@ -207,9 +208,10 @@ export class Store<
         }
 
         const unsubscribe = () => {
+          // console.log('store unsub', query$.label)
           try {
             this.graph.destroyNode(effect)
-            this.activeQueries.remove(query as LiveQuery<TResult>)
+            this.activeQueries.remove(query$ as LiveQuery<TResult>)
             onUnsubsubscribe?.()
           } finally {
             span.end()
@@ -225,7 +227,7 @@ export class Store<
    *
    * Currently only used when shutting down the app for debugging purposes (e.g. to close Otel spans).
    */
-  destroy = () => {
+  destroy = async () => {
     for (const tableRef of Object.values(this.tableRefs)) {
       for (const superComp of tableRef.super) {
         this.graph.removeEdge(superComp, tableRef)
@@ -234,6 +236,8 @@ export class Store<
 
     otel.trace.getSpan(this.otel.mutationsSpanContext)!.end()
     otel.trace.getSpan(this.otel.queriesSpanContext)!.end()
+
+    await this.db.storageDb.shutdown()
   }
 
   mutate: {
@@ -540,11 +544,11 @@ export const createStore = async <
 
               db.mainDb.execute('COMMIT', undefined)
 
-              db.storageDb.execute('BEGIN', undefined, undefined)
+              // db.storageDb.execute('BEGIN', undefined, undefined)
               for (const [queryStr, bindValues] of txnExecuteStmnts) {
                 db.storageDb.execute(queryStr, bindValues, undefined)
               }
-              db.storageDb.execute('COMMIT', undefined, undefined)
+              // db.storageDb.execute('COMMIT', undefined, undefined)
             } catch (e: any) {
               db.mainDb.execute('ROLLBACK', undefined)
               throw e

package/tsconfig.json

@@ -12,7 +12,6 @@
   "references": [
     { "path": "../../effect-db-schema" },
     { "path": "../common" },
-    { "path": "../fractional-index" },
     { "path": "../web" },
     { "path": "../utils" }
   ]

package/src/react/components/DiffableList.tsx

@@ -1,192 +0,0 @@
-import { FI } from '@livestore/fractional-index'
-import { casesHandled } from '@livestore/utils'
-import * as itsFine from 'its-fine'
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-
-import type { LiveQuery } from '../../reactiveQueries/base-class.js'
-import { computed } from '../../reactiveQueries/js.js'
-import { useQuery } from '../useQuery.js'
-
-export type Props<TItem> = {
-  items$: LiveQuery<ReadonlyArray<TItem>>
-  /**
-   * @example
-   * ```tsx
-   * renderContainer={(children) => <ul>{children}</ul>}
-   * ```
-   */
-  renderContainer: (ref: React.LegacyRef<any>) => React.ReactNode
-  // TODO refactor render-flag to allow for transition animations on add/remove
-  renderItem: (item: TItem, opts: { index: number; isInitialListRender: boolean }) => React.ReactNode
-  getKey: (item: TItem, index: number) => string | number
-}
-
-export const DiffableList_ = <TItem,>({
-  items$,
-  renderContainer,
-  renderItem,
-  getKey,
-}: Props<TItem>): React.ReactNode => {
-  const ref = React.useRef<HTMLElement>(null)
-  const container = renderContainer(ref)
-
-  const [hasMounted, setHasMounted] = React.useState(false)
-
-  React.useEffect(() => setHasMounted(true), [])
-
-  const keys$ = computed((get) => get(items$).map(getKey))
-  type RefEl = {
-    id: string | number
-    el: HTMLElement
-    item$: LiveQuery<TItem>
-    root: ReactDOM.Root
-  }
-  const elsRef = React.useRef<RefEl[]>([])
-
-  const ContextBridge = itsFine.useContextBridge()
-
-  const renderListEl = React.useCallback(
-    (parentEl: HTMLElement, index: number, item$: LiveQuery<TItem>) => {
-      const root = ReactDOM.createRoot(parentEl)
-      root.render(
-        <ContextBridge>
-          <ItemWrapper item$={item$} renderItem={renderItem} opts={{ index, isInitialListRender: !hasMounted }} />
-        </ContextBridge>,
-      )
-
-      return root
-    },
-    [ContextBridge, hasMounted, renderItem],
-  )
-
-  React.useLayoutEffect(() => {
-    if (ref.current === null) {
-      throw new Error('ref.current is null')
-    }
-
-    const keys = keys$.run()
-
-    for (let index = 0; index < keys.length; index++) {
-      const parentEl = document.createElement('div')
-      ref.current!.append(parentEl)
-      const item$ = computed((get) => get(items$)[index]!) as LiveQuery<TItem>
-      const root = renderListEl(parentEl, index, item$)
-      elsRef.current.push({ el: parentEl, item$, root, id: keys[index]! })
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  React.useEffect(() => () => keys$.destroy(), [keys$])
-
-  React.useEffect(() => {
-    // const keys = keys$.run()
-
-    return keys$.subscribe((keys) => {
-      const prevKeys = elsRef.current.map((el) => el.id)
-
-      let arrayIsEqual = true
-      for (let i = 0; i < keys.length; i++) {
-        if (keys[i] !== prevKeys[i]) {
-          arrayIsEqual = false
-          break
-        }
-      }
-      if (arrayIsEqual) return
-
-      const previousAgg = FI.aggregateMake(prevKeys, FI.fractionalIndexImplNumber)
-      const { newEvents } = FI.getNewEvents(previousAgg, keys, FI.fractionalIndexImplNumber)
-
-      console.log('newEvents', newEvents)
-
-      for (const event of newEvents) {
-        switch (event.op) {
-          case 'remove': {
-            const { index } = event
-            const el = elsRef.current[index]!
-            el.root.unmount()
-            el.el.remove()
-            el.item$.destroy()
-            elsRef.current.splice(index, 1)
-            break
-          }
-          case 'add': {
-            const { index } = event
-            const parentEl = document.createElement('div')
-            ref.current!.append(parentEl)
-            const item$ = computed((get) => get(items$)[index]!) as LiveQuery<TItem>
-            const root = renderListEl(parentEl, index, item$)
-            elsRef.current.splice(index, 0, { el: parentEl, item$, root, id: keys[index]! })
-            break
-          }
-          case 'move': {
-            // const { newIndex, previousIndex } = event
-
-            // const el = elsRef.current[previousIndex]!
-            // const item$ = el.item$
-            // const root = el.root
-            // const elEl = el.el
-
-            // elsRef.current.splice(previousIndex, 1)
-            // elsRef.current.splice(newIndex, 0, { el: elEl, item$, root })
-
-            // ref.current!.insertBefore(elEl, elsRef.current[newIndex + 1]?.el)
-
-            // // move dom element
-
-            break
-          }
-          default: {
-            casesHandled(event)
-          }
-        }
-      }
-    })
-
-    // for (let index = 0; index < keys.length; index++) {
-    //   if (prevKeys[index] === keys[index]) continue
-
-    // // check if `keys[index]` === `prevKeys[index + 1]`
-    // // which probably means that
-    // if (keys[index] === prevKeys[index + 1]) {
-    // 	// sp
-    // }
-
-    // prevKeys[index] = keys[index] as any
-    // }
-
-    // TODO in the future use a more efficient diffing algorithm that re-uses elements more optimally
-    // right now we're only looking one step ahead
-
-    // reconcile until `keys` and `prevKeys` are equal
-
-    // prevKeys = keys
-  }, [items$, keys$, renderListEl])
-
-  return <>{container}</>
-}
-
-export const DiffableList = <TItem,>({
-  items$,
-  renderContainer,
-  renderItem,
-  getKey,
-}: Props<TItem>): React.ReactNode => (
-  <itsFine.FiberProvider>
-    <DiffableList_ items$={items$} renderContainer={renderContainer} renderItem={renderItem} getKey={getKey} />
-  </itsFine.FiberProvider>
-)
-
-const ItemWrapper = <TItem,>({
-  item$,
-  opts,
-  renderItem,
-}: {
-  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)}</>
-}

package/src/react/utils/useCleanup.ts

@@ -1,25 +0,0 @@
-import React from 'react'
-
-/**
- * Like cleanup callback of `React.useEffect` but running as part of the render loop.
- *
- * NOTE: This hook should not be used with React strict mode.
- */
-export const useCleanup = (
-  /** Needs to be a `React.useCallback` value */
-  cleanupCallback: () => void,
-) => {
-  const callbackRef = React.useRef(cleanupCallback)
-
-  if (callbackRef.current !== cleanupCallback) {
-    callbackRef.current()
-    callbackRef.current = cleanupCallback
-  }
-
-  React.useEffect(
-    () => () => {
-      callbackRef.current()
-    },
-    [],
-  )
-}