@livestore/livestore 0.0.46-dev.4 → 0.0.47-dev.0

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/row-query.ts

@@ -78,6 +78,9 @@ export const rowQuery: MakeRowQuery = <TTableDef extends DbSchema.TableDef>(
     genQueryString: queryStr,
     queriedTables: new Set([componentTableName]),
     dbGraph: options?.dbGraph,
+    // TODO remove this once the LiveStore Devtools are no longer relying on it
+    // as the defaults rows are now already being inserted during store initialization
+    // and the tables need to be registered during initialization
     execBeforeFirstRun: makeExecBeforeFirstRun({
       otelContext: options?.otelContext,
       table,
@@ -201,7 +204,6 @@ const makeExecBeforeFirstRun =
     }
 
     if (skipInsertDefaultRow !== true) {
-      // TODO find a way to only do this if necessary
       insertRowWithDefaultValuesOrIgnore({
         store,
         id: id ?? 'singleton',

package/src/store.ts

@@ -1,5 +1,11 @@
-import type { DatabaseFactory, DatabaseImpl, PreparedBindValues } from '@livestore/common'
-import { type LiveStoreSchema, makeMutationEventSchema, type MutationEvent } from '@livestore/common/schema'
+import {
+  type DatabaseFactory,
+  type DatabaseImpl,
+  getExecArgsFromMutation,
+  type PreparedBindValues,
+} from '@livestore/common'
+import type { LiveStoreSchema, MutationEvent, MutationEventSchema } from '@livestore/common/schema'
+import { makeMutationEventSchema } from '@livestore/common/schema'
 import { assertNever, isPromise, makeNoopTracer, shouldNeverHappen } from '@livestore/utils'
 import { Schema } from '@livestore/utils/effect'
 import * as otel from '@opentelemetry/api'
@@ -7,7 +13,6 @@ import type { GraphQLSchema } from 'graphql'
 
 import { globalDbGraph } from './global-state.js'
 import { MainDatabaseWrapper } from './MainDatabaseWrapper.js'
-import { migrateDb } from './migrations.js'
 import type { StackInfo } from './react/utils/stack-info.js'
 import type { DebugRefreshReasonBase, ReactiveGraph, Ref } from './reactive.js'
 import type { DbContext, DbGraph, LiveQuery } from './reactiveQueries/base-class.js'
@@ -39,6 +44,7 @@ export type StoreOptions<
   otelTracer: otel.Tracer
   otelRootSpanContext: otel.Context
   dbGraph: DbGraph
+  mutationEventSchema: MutationEventSchema<any>
 }
 
 export type RefreshReason =
@@ -77,6 +83,7 @@ const uniqueStoreId = () => `store-${++storeCount}`
 
 export type BootDb = {
   execute(queryStr: string, bindValues?: ParamsObject): void
+  mutate: <const TMutationArg extends ReadonlyArray<MutationEvent.Any>>(...list: TMutationArg) => void
   select<T>(queryStr: string, bindValues?: ParamsObject): ReadonlyArray<T>
   txn(callback: () => void): void
 }
@@ -105,7 +112,7 @@ export class Store<
   /** RC-based set to see which queries are currently subscribed to */
   activeQueries: ReferenceCountedSet<LiveQuery<any>>
 
-  private mutationArgsSchema
+  private mutationEventSchema
 
   private constructor({
     db,
@@ -115,6 +122,7 @@ export class Store<
     dbGraph,
     otelTracer,
     otelRootSpanContext,
+    mutationEventSchema,
   }: StoreOptions<TGraphQLContext, TSchema>) {
     this.mainDbWrapper = new MainDatabaseWrapper({ otelTracer, otelRootSpanContext, db: db.mainDb })
     this.db = db
@@ -122,7 +130,8 @@ export class Store<
     this.schema = schema
 
     // TODO refactor
-    this.mutationArgsSchema = makeMutationEventSchema(Object.fromEntries(schema.mutations.entries()) as any)
+    this.mutationEventSchema = mutationEventSchema
+    // this.mutationEventSchema = makeMutationEventSchema(Object.fromEntries(schema.mutations.entries()) as any)
 
     // TODO generalize the `tableRefs` concept to allow finer-grained refs
     this.tableRefs = {}
@@ -184,22 +193,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 +217,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 +236,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 +245,8 @@ export class Store<
 
     otel.trace.getSpan(this.otel.mutationsSpanContext)!.end()
     otel.trace.getSpan(this.otel.queriesSpanContext)!.end()
+
+    await this.db.storageDb.shutdown()
   }
 
   mutate: {
@@ -371,48 +384,43 @@ export class Store<
    * the caller must refresh queries after calling this method.
    */
   private mutateWithoutRefresh = (
-    mutationEvent: MutationEvent.ForSchema<TSchema>,
+    mutationEventDecoded: MutationEvent.ForSchema<TSchema>,
     otelContext: otel.Context,
   ): { writeTables: ReadonlySet<string>; durationMs: number } => {
     return this.otel.tracer.startActiveSpan(
       'LiveStore:mutatetWithoutRefresh',
       {
         attributes: {
-          'livestore.mutation': mutationEvent.mutation,
-          'livestore.args': JSON.stringify(mutationEvent.args, null, 2),
+          'livestore.mutation': mutationEventDecoded.mutation,
+          'livestore.args': JSON.stringify(mutationEventDecoded.args, null, 2),
         },
       },
       otelContext,
       (span) => {
         const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
-        const mutationDef =
-          this.schema.mutations.get(mutationEvent.mutation) ??
-          shouldNeverHappen(`Unknown mutation type: ${mutationEvent.mutation}`)
-
-        const statementRes =
-          typeof mutationDef.sql === 'function' ? mutationDef.sql(mutationEvent.args) : mutationDef.sql
+        const allWriteTables = new Set<string>()
+        let durationMsTotal = 0
 
-        const statementSql = typeof statementRes === 'string' ? statementRes : statementRes.sql
-        const writeTables =
-          typeof statementRes === 'string'
-            ? this.mainDbWrapper.getTablesUsed(statementSql)
-            : statementRes.writeTables ?? this.mainDbWrapper.getTablesUsed(statementSql)
+        const mutationDef =
+          this.schema.mutations.get(mutationEventDecoded.mutation) ??
+          shouldNeverHappen(`Unknown mutation type: ${mutationEventDecoded.mutation}`)
 
-        const bindValues =
-          typeof statementRes === 'string'
-            ? Schema.encodeUnknownSync(mutationDef.schema)(mutationEvent.args)
-            : statementRes.bindValues
+        const execArgsArr = getExecArgsFromMutation({ mutationDef, mutationEventDecoded })
 
-        const { durationMs } = this.mainDbWrapper.execute(
+        for (const {
           statementSql,
-          prepareBindValues(bindValues ?? {}, statementSql),
-          writeTables,
-          { otelContext },
-        )
+          bindValues,
+          writeTables = this.mainDbWrapper.getTablesUsed(statementSql),
+        } of execArgsArr) {
+          const { durationMs } = this.mainDbWrapper.execute(statementSql, bindValues, writeTables, { otelContext })
+
+          durationMsTotal += durationMs
+          writeTables.forEach((table) => allWriteTables.add(table))
+        }
 
         // Asynchronously apply mutation to a persistent storage (we're not awaiting this promise here)
-        const mutationEventEncoded = Schema.encodeUnknownSync(this.mutationArgsSchema)(mutationEvent)
+        const mutationEventEncoded = Schema.encodeUnknownSync(this.mutationEventSchema)(mutationEventDecoded)
         this.db.storageDb.mutate(mutationEventEncoded, span)
 
         // Uncomment to print a list of queries currently registered on the store
@@ -420,7 +428,7 @@ export class Store<
 
         span.end()
 
-        return { writeTables, durationMs }
+        return { writeTables: allWriteTables, durationMs: durationMsTotal }
       },
     )
   }
@@ -492,24 +500,21 @@ export const createStore = async <
 }): Promise<Store<TGraphQLContext, TSchema>> => {
   return otelTracer.startActiveSpan('createStore', {}, otelRootSpanContext, async (span) => {
     try {
+      performance.mark('livestore:db-creating')
       const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
-      const dbPromise = makeDb({ otelTracer, otelContext })
+      const dbPromise = makeDb({ otelTracer, otelContext, schema })
       const db = dbPromise instanceof Promise ? await dbPromise : dbPromise
-
-      otelTracer.startActiveSpan('migrateDb', {}, otelContext, (span) => {
-        try {
-          const otelContext = otel.trace.setSpan(otel.context.active(), span)
-          migrateDb({ db, schema, otelContext })
-        } finally {
-          span.end()
-        }
-      })
+      performance.mark('livestore:db-created')
+      performance.measure('livestore:db-create', 'livestore:db-creating', 'livestore:db-created')
 
       if (batchUpdates !== undefined) {
         dbGraph.effectsWrapper = batchUpdates
       }
 
+      const mutationEventSchema = makeMutationEventSchema(Object.fromEntries(schema.mutations.entries()) as any)
+
+      // TODO consider moving booting into the storage backend
       if (boot !== undefined) {
         let isInTxn = false
         let txnExecuteStmnts: [string, PreparedBindValues | undefined][] = []
@@ -526,6 +531,23 @@ export const createStore = async <
               void db.storageDb.execute(queryStr, preparedBindValues, undefined)
             }
           },
+          mutate: (...list) => {
+            for (const mutationEventDecoded of list) {
+              const mutationDef =
+                schema.mutations.get(mutationEventDecoded.mutation) ??
+                shouldNeverHappen(`Unknown mutation type: ${mutationEventDecoded.mutation}`)
+
+              const execArgsArr = getExecArgsFromMutation({ mutationDef, mutationEventDecoded })
+              // const { bindValues, statementSql } = getExecArgsFromMutation({ mutationDef, mutationEventDecoded })
+
+              for (const { statementSql, bindValues } of execArgsArr) {
+                db.mainDb.execute(statementSql, bindValues)
+              }
+
+              const mutationEventEncoded = Schema.encodeUnknownSync(mutationEventSchema)(mutationEventDecoded)
+              void db.storageDb.mutate(mutationEventEncoded, span)
+            }
+          },
           select: (queryStr, bindValues) => {
             const stmt = db.mainDb.prepare(queryStr)
             const preparedBindValues = bindValues ? prepareBindValues(bindValues, queryStr) : undefined
@@ -540,11 +562,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
@@ -566,7 +588,7 @@ export const createStore = async <
       // Think about what to do about this case.
       // await applySchema(db, schema)
       return Store.createStore<TGraphQLContext, TSchema>(
-        { db, schema, graphQLOptions, otelTracer, otelRootSpanContext, dbGraph },
+        { db, schema, graphQLOptions, otelTracer, otelRootSpanContext, dbGraph, mutationEventSchema },
         span,
       )
     } finally {

package/tsconfig.json

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

package/dist/react/components/DiffableList.d.ts

@@ -1,20 +0,0 @@
-import React from 'react';
-import type { LiveQuery } from '../../reactiveQueries/base-class.js';
-export type Props<TItem> = {
-    items$: LiveQuery<ReadonlyArray<TItem>>;
-    /**
-     * @example
-     * ```tsx
-     * renderContainer={(children) => <ul>{children}</ul>}
-     * ```
-     */
-    renderContainer: (ref: React.LegacyRef<any>) => React.ReactNode;
-    renderItem: (item: TItem, opts: {
-        index: number;
-        isInitialListRender: boolean;
-    }) => React.ReactNode;
-    getKey: (item: TItem, index: number) => string | number;
-};
-export declare const DiffableList_: <TItem>({ items$, renderContainer, renderItem, getKey, }: Props<TItem>) => React.ReactNode;
-export declare const DiffableList: <TItem>({ items$, renderContainer, renderItem, getKey, }: Props<TItem>) => React.ReactNode;
-//# sourceMappingURL=DiffableList.d.ts.map

package/dist/react/components/DiffableList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DiffableList.d.ts","sourceRoot":"","sources":["../../../src/react/components/DiffableList.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAA;AAIpE,MAAM,MAAM,KAAK,CAAC,KAAK,IAAI;IACzB,MAAM,EAAE,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAA;IACvC;;;;;OAKG;IACH,eAAe,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAE/D,UAAU,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,mBAAmB,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACnG,MAAM,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAA;CACxD,CAAA;AAED,eAAO,MAAM,aAAa,4DAKvB,MAAM,KAAK,CAAC,KAAG,MAAM,SAyIvB,CAAA;AAED,eAAO,MAAM,YAAY,4DAKtB,MAAM,KAAK,CAAC,KAAG,MAAM,SAIvB,CAAA"}

package/dist/react/components/DiffableList.js

@@ -1,113 +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 { computed } from '../../reactiveQueries/js.js';
-import { useQuery } from '../useQuery.js';
-export const DiffableList_ = ({ items$, renderContainer, renderItem, getKey, }) => {
-    const ref = React.useRef(null);
-    const container = renderContainer(ref);
-    const [hasMounted, setHasMounted] = React.useState(false);
-    React.useEffect(() => setHasMounted(true), []);
-    const keys$ = computed((get) => get(items$).map(getKey));
-    const elsRef = React.useRef([]);
-    const ContextBridge = itsFine.useContextBridge();
-    const renderListEl = React.useCallback((parentEl, index, item$) => {
-        const root = ReactDOM.createRoot(parentEl);
-        root.render(React.createElement(ContextBridge, null,
-            React.createElement(ItemWrapper, { "item$": item$, renderItem: renderItem, opts: { index, isInitialListRender: !hasMounted } })));
-        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]);
-            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]);
-                        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 React.createElement(React.Fragment, null, container);
-};
-export const DiffableList = ({ items$, renderContainer, renderItem, getKey, }) => (React.createElement(itsFine.FiberProvider, null,
-    React.createElement(DiffableList_, { "items$": items$, renderContainer: renderContainer, renderItem: renderItem, getKey: getKey })));
-const ItemWrapper = ({ item$, opts, renderItem, }) => {
-    const item = useQuery(item$);
-    return React.createElement(React.Fragment, null, renderItem(item, opts));
-};
-//# sourceMappingURL=DiffableList.js.map

package/dist/react/components/DiffableList.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DiffableList.js","sourceRoot":"","sources":["../../../src/react/components/DiffableList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,6BAA6B,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,KAAK,OAAO,MAAM,UAAU,CAAA;AACnC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,QAAQ,MAAM,kBAAkB,CAAA;AAGvC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAgBzC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAS,EACpC,MAAM,EACN,eAAe,EACf,UAAU,EACV,MAAM,GACO,EAAmB,EAAE;IAClC,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAA;IAC3C,MAAM,SAAS,GAAG,eAAe,CAAC,GAAG,CAAC,CAAA;IAEtC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEzD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;IAE9C,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAA;IAOxD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAU,EAAE,CAAC,CAAA;IAExC,MAAM,aAAa,GAAG,OAAO,CAAC,gBAAgB,EAAE,CAAA;IAEhD,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,QAAqB,EAAE,KAAa,EAAE,KAAuB,EAAE,EAAE;QAChE,MAAM,IAAI,GAAG,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAA;QAC1C,IAAI,CAAC,MAAM,CACT,oBAAC,aAAa;YACZ,oBAAC,WAAW,aAAQ,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,CAAC,UAAU,EAAE,GAAI,CAC1F,CACjB,CAAA;QAED,OAAO,IAAI,CAAA;IACb,CAAC,EACD,CAAC,aAAa,EAAE,UAAU,EAAE,UAAU,CAAC,CACxC,CAAA;IAED,KAAK,CAAC,eAAe,CAAC,GAAG,EAAE;QACzB,IAAI,GAAG,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YACzB,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAA;QACxC,CAAC;QAED,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAA;QAExB,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC;YACjD,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;YAC9C,GAAG,CAAC,OAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;YAC7B,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,KAAK,CAAE,CAAqB,CAAA;YACxE,MAAM,IAAI,GAAG,YAAY,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,CAAA;YACjD,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,CAAE,EAAE,CAAC,CAAA;QACtE,CAAC;QACD,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAErD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,2BAA2B;QAE3B,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE;YAC9B,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;YAElD,IAAI,YAAY,GAAG,IAAI,CAAA;YACvB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACrC,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;oBAC5B,YAAY,GAAG,KAAK,CAAA;oBACpB,MAAK;gBACP,CAAC;YACH,CAAC;YACD,IAAI,YAAY;gBAAE,OAAM;YAExB,MAAM,WAAW,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,EAAE,EAAE,CAAC,yBAAyB,CAAC,CAAA;YAC5E,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,CAAC,yBAAyB,CAAC,CAAA;YAEtF,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;YAEnC,KAAK,MAAM,KAAK,IAAI,SAAS,EAAE,CAAC;gBAC9B,QAAQ,KAAK,CAAC,EAAE,EAAE,CAAC;oBACjB,KAAK,QAAQ,CAAC,CAAC,CAAC;wBACd,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;wBACvB,MAAM,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAE,CAAA;wBACjC,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAA;wBACjB,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,CAAA;wBACd,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;wBAClB,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;wBAC/B,MAAK;oBACP,CAAC;oBACD,KAAK,KAAK,CAAC,CAAC,CAAC;wBACX,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;wBACvB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;wBAC9C,GAAG,CAAC,OAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;wBAC7B,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,KAAK,CAAE,CAAqB,CAAA;wBACxE,MAAM,IAAI,GAAG,YAAY,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,CAAA;wBACjD,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,CAAE,EAAE,CAAC,CAAA;wBAChF,MAAK;oBACP,CAAC;oBACD,KAAK,MAAM,CAAC,CAAC,CAAC;wBACZ,4CAA4C;wBAE5C,4CAA4C;wBAC5C,yBAAyB;wBACzB,uBAAuB;wBACvB,qBAAqB;wBAErB,0CAA0C;wBAC1C,gEAAgE;wBAEhE,oEAAoE;wBAEpE,sBAAsB;wBAEtB,MAAK;oBACP,CAAC;oBACD,OAAO,CAAC,CAAC,CAAC;wBACR,YAAY,CAAC,KAAK,CAAC,CAAA;oBACrB,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,sDAAsD;QACtD,kDAAkD;QAElD,sDAAsD;QACtD,+BAA+B;QAC/B,6CAA6C;QAC7C,SAAS;QACT,IAAI;QAEJ,uCAAuC;QACvC,IAAI;QAEJ,iGAAiG;QACjG,8CAA8C;QAE9C,kDAAkD;QAElD,kBAAkB;IACpB,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAA;IAEjC,OAAO,0CAAG,SAAS,CAAI,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAS,EACnC,MAAM,EACN,eAAe,EACf,UAAU,EACV,MAAM,GACO,EAAmB,EAAE,CAAC,CACnC,oBAAC,OAAO,CAAC,aAAa;IACpB,oBAAC,aAAa,cAAS,MAAM,EAAE,eAAe,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAI,CACrF,CACzB,CAAA;AAED,MAAM,WAAW,GAAG,CAAS,EAC3B,KAAK,EACL,IAAI,EACJ,UAAU,GAKX,EAAE,EAAE;IACH,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE5B,OAAO,0CAAG,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,CAAI,CAAA;AACtC,CAAC,CAAA"}

package/dist/react/utils/useCleanup.d.ts

@@ -1,7 +0,0 @@
-/**
- * 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 declare const useCleanup: (cleanupCallback: () => void) => void;
-//# sourceMappingURL=useCleanup.d.ts.map

package/dist/react/utils/useCleanup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCleanup.d.ts","sourceRoot":"","sources":["../../../src/react/utils/useCleanup.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,UAAU,oBAEJ,MAAM,IAAI,SAe5B,CAAA"}

package/dist/react/utils/useCleanup.js

@@ -1,19 +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) => {
-    const callbackRef = React.useRef(cleanupCallback);
-    if (callbackRef.current !== cleanupCallback) {
-        callbackRef.current();
-        callbackRef.current = cleanupCallback;
-    }
-    React.useEffect(() => () => {
-        callbackRef.current();
-    }, []);
-};
-//# sourceMappingURL=useCleanup.js.map

package/dist/react/utils/useCleanup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCleanup.js","sourceRoot":"","sources":["../../../src/react/utils/useCleanup.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;AACxB,8CAA8C;AAC9C,eAA2B,EAC3B,EAAE;IACF,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC,CAAA;IAEjD,IAAI,WAAW,CAAC,OAAO,KAAK,eAAe,EAAE,CAAC;QAC5C,WAAW,CAAC,OAAO,EAAE,CAAA;QACrB,WAAW,CAAC,OAAO,GAAG,eAAe,CAAA;IACvC,CAAC;IAED,KAAK,CAAC,SAAS,CACb,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,WAAW,CAAC,OAAO,EAAE,CAAA;IACvB,CAAC,EACD,EAAE,CACH,CAAA;AACH,CAAC,CAAA"}