@livestore/livestore 0.0.0-snapshot-909cdd1ac2fd591945c2be2b0f53e14d87f3c9d4

package/src/utils/data-structures.ts

@@ -0,0 +1,36 @@
+// TODO consider replacing with Effect's RC data structures
+export class ReferenceCountedSet<T> {
+  private map: Map<T, number>
+
+  constructor() {
+    this.map = new Map<T, number>()
+  }
+
+  add = (key: T) => {
+    const count = this.map.get(key) ?? 0
+    this.map.set(key, count + 1)
+  }
+
+  remove = (key: T) => {
+    const count = this.map.get(key) ?? 0
+    if (count === 1) {
+      this.map.delete(key)
+    } else {
+      this.map.set(key, count - 1)
+    }
+  }
+
+  has = (key: T) => {
+    return this.map.has(key)
+  }
+
+  get size() {
+    return this.map.size
+  }
+
+  *[Symbol.iterator]() {
+    for (const key of this.map.keys()) {
+      yield key
+    }
+  }
+}

package/src/utils/dev.ts

@@ -0,0 +1,24 @@
+/* eslint-disable unicorn/prefer-global-this */
+export const downloadBlob = (
+  data: Uint8Array | Blob | string,
+  fileName: string,
+  mimeType = 'application/octet-stream',
+) => {
+  const blob = data instanceof Blob ? data : new Blob([data], { type: mimeType })
+
+  const url = window.URL.createObjectURL(blob)
+
+  downloadURL(url, fileName)
+
+  setTimeout(() => window.URL.revokeObjectURL(url), 1000)
+}
+
+export const downloadURL = (data: string, fileName: string) => {
+  const a = document.createElement('a')
+  a.href = data
+  a.download = fileName
+  document.body.append(a)
+  a.style.display = 'none'
+  a.click()
+  a.remove()
+}

package/src/utils/otel.ts

@@ -0,0 +1,9 @@
+import type * as otel from '@opentelemetry/api'
+
+export const getDurationMsFromSpan = (span: otel.Span): number => {
+  const durationHr: [seconds: number, nanos: number] = (span as any)._duration
+  return durationHr[0] * 1000 + durationHr[1] / 1_000_000
+}
+
+export const getStartTimeHighResFromSpan = (span: otel.Span): DOMHighResTimeStamp =>
+  (span as any)._performanceStartTime as DOMHighResTimeStamp

package/src/utils/stack-info.test.ts

@@ -0,0 +1,79 @@
+import { expect, it } from 'vitest'
+
+import { extractStackInfoFromStackTrace } from './stack-info.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)
+`
+
+  const stackInfo = extractStackInfoFromStackTrace(stackTrace)
+  // Replacing file paths for snapshot testing as they are not stable
+  stackInfo.frames.forEach((_) => (_.filePath = '__REPLACED_FOR_SNAPSHOT__'))
+  expect(stackInfo).toMatchInlineSnapshot(`
+    {
+      "frames": [
+        {
+          "filePath": "__REPLACED_FOR_SNAPSHOT__",
+          "name": "RouteLink",
+        },
+        {
+          "filePath": "__REPLACED_FOR_SNAPSHOT__",
+          "name": "useRoute",
+        },
+        {
+          "filePath": "__REPLACED_FOR_SNAPSHOT__",
+          "name": "useAppState",
+        },
+        {
+          "filePath": "__REPLACED_FOR_SNAPSHOT__",
+          "name": "useQuery",
+        },
+      ],
+    }
+  `)
+})
+
+it('Tracklist_ stacktrace', async () => {
+  const stackTrace = `\
+stack Error
+    at https://localhost:8081/@fs/Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/livestore/dist/react/useQuery.js?t=1701368568351:19:23
+    at mountMemo (https://localhost:8081/node_modules/.vite-web/deps/chunk-YKTDXTVC.js?v=86daed82:12817:27)
+    at Object.useMemo (https://localhost:8081/node_modules/.vite-web/deps/chunk-YKTDXTVC.js?v=86daed82:13141:24)
+    at Object.useMemo (https://localhost:8081/node_modules/.vite-web/deps/chunk-7P4K3U7O.js?v=86daed82:1094:29)
+    at useQueryRef (https://localhost:8081/@fs/Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/livestore/dist/react/useQuery.js?t=1701368568351:16:29)
+    at Module.useQuery (https://localhost:8081/@fs/Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/livestore/dist/react/useQuery.js?t=1701368568351:13:36)
+    at Tracklist_ (https://localhost:8081/src/components/Tracklist/Tracklist.tsx?t=1701368568351:148:44)
+    at renderWithHooks (https://localhost:8081/node_modules/.vite-web/deps/chunk-YKTDXTVC.js?v=86daed82:12171:26)
+    at mountIndeterminateComponent (https://localhost:8081/node_modules/.vite-web/deps/chunk-YKTDXTVC.js?v=86daed82:14921:21)
+    at beginWork (https://localhost:8081/node_modules/.vite-web/deps/chunk-YKTDXTVC.js?v=86daed82:15902:22)
+`
+
+  const stackInfo = extractStackInfoFromStackTrace(stackTrace)
+  // Replacing file paths for snapshot testing as they are not stable
+  stackInfo.frames.forEach((_) => (_.filePath = '__REPLACED_FOR_SNAPSHOT__'))
+  expect(stackInfo).toMatchInlineSnapshot(`
+    {
+      "frames": [
+        {
+          "filePath": "__REPLACED_FOR_SNAPSHOT__",
+          "name": "Tracklist_",
+        },
+        {
+          "filePath": "__REPLACED_FOR_SNAPSHOT__",
+          "name": "useQuery",
+        },
+      ],
+    }
+  `)
+})

package/src/utils/stack-info.ts

@@ -0,0 +1,54 @@
+export type StackInfo = {
+  frames: StackFrame[]
+}
+
+export type StackFrame = {
+  name: string
+  filePath: string
+}
+
+/*
+Example stack trace:
+
+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)
+  
+Approach:
+  - Start filtering at `at useQuery` (including)
+  - Stop filtering at `at renderWithHooks` (excluding)
+ */
+export const extractStackInfoFromStackTrace = (stackTrace: string): StackInfo => {
+  const namePattern = /at (\S+) \((.+)\)/g
+  let match: RegExpExecArray | null
+  const frames: StackFrame[] = []
+  let hasReachedStart = false
+
+  while ((match = namePattern.exec(stackTrace)) !== null) {
+    const [, name, filePath] = match as any as [string, string, string]
+
+    // NOTE No idea where this `Module.` comes from - possibly a Vite thing?
+    if ((name.startsWith('use') || name.startsWith('Module.use')) && name.endsWith('QueryRef') === false) {
+      hasReachedStart = true
+
+      frames.unshift({ name: name.replace(/^Module\./, ''), filePath })
+    } else if (hasReachedStart) {
+      // We've reached the end of the `use*` functions, so we're adding the component name and stop
+      frames.unshift({ name, filePath })
+      break
+    }
+  }
+
+  return { frames }
+}
+
+export const stackInfoToString = (stackInfo: StackInfo): string =>
+  stackInfo.frames.map((f) => `${f.name} (${f.filePath})`).join('\n')

package/src/utils/tests/fixture.ts

@@ -0,0 +1,77 @@
+import type { FromInputSchema } from '@livestore/common/schema'
+import type { Store } from '@livestore/livestore'
+import {
+  createStore,
+  DbSchema,
+  globalReactivityGraph,
+  makeReactivityGraph,
+  makeSchema,
+  sql,
+} from '@livestore/livestore'
+import { Effect, FiberSet } from '@livestore/utils/effect'
+import { makeInMemoryAdapter } from '@livestore/web'
+import type * as otel from '@opentelemetry/api'
+
+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 tables = { todos, app }
+export const schema = makeSchema({ tables })
+
+export interface FixtureSchema extends FromInputSchema.DeriveSchema<{ tables: typeof tables }> {}
+
+export const makeTodoMvc = ({
+  otelTracer,
+  otelContext,
+  useGlobalReactivityGraph = true,
+}: {
+  otelTracer?: otel.Tracer
+  otelContext?: otel.Context
+  useGlobalReactivityGraph?: boolean
+} = {}) =>
+  Effect.gen(function* () {
+    const reactivityGraph = useGlobalReactivityGraph ? globalReactivityGraph : makeReactivityGraph()
+
+    const fiberSet = yield* FiberSet.make()
+
+    const store: Store<any, FixtureSchema> = 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,
+    })
+
+    return { store, reactivityGraph }
+  })

package/src/utils/tests/mod.ts

@@ -0,0 +1,2 @@
+export * from './fixture.js'
+export * from './otel.js'

package/src/utils/tests/otel.ts

@@ -0,0 +1,61 @@
+import { identity } from '@livestore/utils/effect'
+import type { Attributes } from '@opentelemetry/api'
+import type { InMemorySpanExporter, ReadableSpan } from '@opentelemetry/sdk-trace-base'
+
+type SimplifiedNestedSpan = { _name: string; attributes: any; children: SimplifiedNestedSpan[] }
+
+export const getSimplifiedRootSpan = (
+  exporter: InMemorySpanExporter,
+  mapAttributes?: (attributes: Attributes) => Attributes,
+) => {
+  const spans = exporter.getFinishedSpans()
+  const spansMap = new Map<string, NestedSpan>(spans.map((span) => [span.spanContext().spanId, { span, children: [] }]))
+
+  const mapAttributesfn = mapAttributes ?? identity
+
+  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)!
+
+  const simplifySpan = (span: NestedSpan): SimplifiedNestedSpan =>
+    omitEmpty({
+      _name: span.span.name,
+      attributes: mapAttributesfn(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)
+}
+
+// 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
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    // "jsx": "preserve",
+    "tsBuildInfoFile": "./dist/.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../db-schema" },
+    { "path": "../common" },
+    { "path": "../web" },
+    { "path": "../utils" }
+  ]
+}

package/vitest.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@livestore/wa-sqlite/dist/wa-sqlite.mjs': '@livestore/wa-sqlite/dist/wa-sqlite.node.mjs',
+    },
+  },
+})