@livestore/livestore 0.0.46-dev.2 → 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

@@ -9,5 +9,10 @@
     "tsBuildInfoFile": "./dist/.tsbuildinfo"
   },
   "include": ["./src"],
-  "references": [{ "path": "../../effect-db-schema" }, { "path": "../common" }, { "path": "../web" }, { "path": "../utils" }]
+  "references": [
+    { "path": "../../effect-db-schema" },
+    { "path": "../common" },
+    { "path": "../web" },
+    { "path": "../utils" }
+  ]
 }

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()
-    },
-    [],
-  )
-}