@livestore/livestore 0.0.46-dev.2 → 0.0.46-dev.4

package/dist/__tests__/react/fixture.d.ts

@@ -204,8 +204,8 @@ export declare const schema: import("@livestore/common/dist/schema/index.js").Li
 }, never>;
 export declare const parseTodos: (rawRows: readonly any[]) => readonly {
     text: string;
-    id: string;
     completed: boolean;
+    id: string;
 }[];
 export declare const makeTodoMvc: ({ otelTracer, otelContext, useGlobalDbGraph, }?: {
     otelTracer?: otel.Tracer | undefined;

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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"DiffableList.js","sourceRoot":"","sources":["../../../src/react/components/DiffableList.tsx"],"names":[],"mappings":"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"}

package/dist/react/index.d.ts

@@ -5,5 +5,6 @@ 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';
+export { DiffableList } from './components/DiffableList.js';
 export type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 //# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EACL,MAAM,EACN,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,QAAQ,EACb,KAAK,YAAY,IAAI,cAAc,GACpC,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAGtC,YAAY,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EACL,MAAM,EACN,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,QAAQ,EACb,KAAK,YAAY,IAAI,cAAc,GACpC,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAG3D,YAAY,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAA"}

package/dist/react/index.js

@@ -5,4 +5,5 @@ export { useTemporaryQuery } from './useTemporaryQuery.js';
 export { useStackInfo } from './utils/stack-info.js';
 export { useRow, } from './useRow.js';
 export { useAtom } from './useAtom.js';
+export { DiffableList } from './components/DiffableList.js';
 //# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EACL,MAAM,GAKP,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EACL,MAAM,GAKP,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livestore/livestore",
-  "version": "0.0.46-dev.2",
+  "version": "0.0.46-dev.4",
   "type": "module",
   "exports": {
     ".": {
@@ -37,10 +37,12 @@
   "dependencies": {
     "@graphql-typed-document-node/core": "^3.2.0",
     "@opentelemetry/api": "^1.8.0",
+    "its-fine": "^1.1.2",
     "lodash-es": "^4.17.21",
-    "@livestore/common": "0.0.46-dev.2",
-    "@livestore/utils": "0.0.46-dev.2",
-    "effect-db-schema": "0.0.46-dev.2"
+    "@livestore/common": "0.0.46-dev.4",
+    "effect-db-schema": "0.0.46-dev.4",
+    "@livestore/utils": "0.0.46-dev.4",
+    "@livestore/fractional-index": "0.0.46-dev.4"
   },
   "devDependencies": {
     "@opentelemetry/sdk-trace-base": "1.22.0",
@@ -55,7 +57,7 @@
     "typescript": "5.4.2",
     "vite": "5.1.6",
     "vitest": "^1.3.1",
-    "@livestore/web": "0.0.46-dev.2"
+    "@livestore/web": "0.0.46-dev.4"
   },
   "peerDependencies": {
     "@tauri-apps/api": "^1.4.0",

package/src/react/components/DiffableList.tsx

@@ -0,0 +1,192 @@
+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/index.ts

@@ -12,5 +12,7 @@ export {
 } from './useRow.js'
 export { useAtom } from './useAtom.js'
 
+export { DiffableList } from './components/DiffableList.js'
+
 // Needed to make TS happy
 export type { TypedDocumentNode } from '@graphql-typed-document-node/core'

package/tsconfig.json

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