@virtuoso.dev/gurx - npm Package Compare versions

Comparing version 1.2.2 to 1.2.3

CHANGELOG.md

 # Change Log - @virtuoso.dev/gurx
 
+## 1.2.3
+
+### Patch Changes
+
+- [#1369](https://github.com/petyosi/react-virtuoso/pull/1369) [`5b57a93`](https://github.com/petyosi/react-virtuoso/commit/5b57a93ea047dbb9351bfd5786be496bc6ee9b14) Thanks [@petyosi](https://github.com/petyosi)! - Reduce per-publish CPU cost and fix memory leaks in the reactive engine
+
+  - Cache `combineCells()` by source set to prevent orphaned graph nodes on repeated calls
+  - Clean up `subMultiple()` synthetic nodes on unsubscribe
+  - Fast-path `pub()` to skip object allocation for single-node publishes
+  - Replace full state map clone with dirty-state overlay in `pubIn`
+  - Pre-compute source+pull node arrays on projections to avoid per-node array allocations
+  - Merge double `Object.getOwnPropertySymbols` iteration in `pubIn` into a single loop
+  - Replace `indexOf`/`splice` with skip-set in `nodeWillNotEmit` propagation
+  - Lift `inContext` to wrap entire `pubIn` propagation loop
+  - Skip empty `RealmProvider` publishes when no `updateWith` is provided
+  - Memoize `getSnapshot` in `useCellValueWithStore` for stable `useSyncExternalStore` identity
+
 ## 1.2.2
@@ -4,0 +21,0 @@

dist/index.d.ts

@@ -229,2 +229,3 @@ import { JSX } from 'react/jsx-runtime';
     private readonly state;
+    private readonly combinedCells;
     private readonly subscriptions;
@@ -586,3 +587,3 @@ /**
         sources: Out[];
-    }): void;
+    }): RealmProjection<T>;
     /**
@@ -684,2 +685,3 @@ * Gets the current value of a node. The node must be stateful.
     pubIn(values: Record<symbol, unknown>): void;
+    private execute;
     /**
@@ -803,2 +805,10 @@ * Explicitly includes the specified cell/signal/pipe reference in the realm.
 
+declare interface RealmProjection<T extends unknown[] = unknown[]> {
+    map: ProjectionFunc<T>;
+    pulls: Set<symbol>;
+    sink: symbol;
+    sourceAndPullNodes: symbol[];
+    sources: Set<symbol>;
+}
+
 /**
@@ -805,0 +815,0 @@ * @category React Components

dist/index.js

@@ -1,2 +0,2 @@
-import * as f from "react";
+import * as p from "react";
 import { jsx as N } from "react/jsx-runtime";
@@ -20,3 +20,3 @@ class M {
 }
-class w {
+class C {
   map = /* @__PURE__ */ new Map();
@@ -38,14 +38,14 @@ delete(t) {
 }
-function h(s, t) {
+function f(s, t) {
   return t(s), s;
 }
-function x() {
+function k() {
 }
-const k = "cell", v = "signal", T = "pipe";
+const I = "cell", O = "signal", T = "pipe";
 function E(s, t) {
   return s === t;
 }
-const y = /* @__PURE__ */ new Map();
+const d = /* @__PURE__ */ new Map();
 let S;
-function L(s, t) {
+function v(s, t) {
   const e = S;
@@ -59,11 +59,12 @@ S = s;
 }
-class j {
+class L {
   definitionRegistry = /* @__PURE__ */ new Set();
   distinctNodes = /* @__PURE__ */ new Map();
   executionMaps = /* @__PURE__ */ new Map();
-  graph = new w();
+  graph = new C();
   pipeMap = /* @__PURE__ */ new Map();
   singletonSubscriptions = /* @__PURE__ */ new Map();
   state = /* @__PURE__ */ new Map();
-  subscriptions = new w();
+  combinedCells = [];
+  subscriptions = new C();
   /**
@@ -108,4 +109,4 @@ * Creates a new realm.
     this.connect({
-      map: (i) => (r, u) => {
-        i(n(u, r));
+      map: (i) => (r, o) => {
+        i(n(o, r));
       },
@@ -119,3 +120,3 @@ pulls: [t],
   combine(...t) {
-    return h(this.signalInstance(), (e) => {
+    return f(this.signalInstance(), (e) => {
       this.connect({
@@ -132,15 +133,16 @@ map: (n) => (...i) => {
   combineCells(...t) {
-    return h(
+    const e = this.combinedCells.find((n) => t.length === n.sources.length && t.every((i, r) => i === n.sources[r]));
+    return e ? e.cell : f(
       this.cellInstance(
-        t.map((e) => this.getValue(e)),
+        t.map((n) => this.getValue(n)),
         !0
       ),
-      (e) => {
+      (n) => {
         this.connect({
-          map: (n) => (...i) => {
-            n(i);
+          map: (i) => (...r) => {
+            i(r);
           },
-          sink: e,
+          sink: n,
           sources: t
-        });
+        }), this.combinedCells.push({ cell: n, sources: t });
       }
@@ -163,7 +165,8 @@ );
       sink: this.register(n),
+      sourceAndPullNodes: [...i, ...e],
       sources: new Set(i)
     };
-    for (const u of [...i, ...e])
-      this.register(u), this.graph.getOrCreate(u).add(r);
-    this.executionMaps.clear();
+    for (const o of [...i, ...e])
+      this.register(o), this.graph.getOrCreate(o).add(r);
+    return this.executionMaps.clear(), r;
   }
@@ -193,3 +196,3 @@ /**
   inContext(t) {
-    return L(this, t);
+    return v(this, t);
   }
@@ -212,3 +215,4 @@ /**
   pub(t, e) {
-    this.pubIn({ [t]: e });
+    const n = this.pipeMap.get(t) ?? t;
+    this.execute([n], { [n]: e });
   }
@@ -229,42 +233,58 @@ /**
   pubIn(t) {
-    const e = Object.getOwnPropertySymbols(t).map((l) => this.pipeMap.get(l) ?? l), n = Object.getOwnPropertySymbols(t).reduce((l, o) => {
-      const a = t[o], b = this.pipeMap.get(o) ?? o;
-      return l[b] = a, l;
-    }, {}), i = this.getExecutionMap(e), r = i.refCount.clone(), u = i.participatingNodes.slice(), c = new Map(this.state), p = (l) => {
-      this.graph.use(l, (o) => {
-        for (const { sink: a, sources: b } of o)
-          b.has(l) && r.decrement(a, () => {
-            u.splice(u.indexOf(a), 1), p(a);
+    const e = Object.getOwnPropertySymbols(t);
+    if (this.pipeMap.size === 0) {
+      this.execute(e, t);
+      return;
+    }
+    const n = new Array(e.length);
+    let i = !1;
+    for (let o = 0; o < e.length; o++) {
+      const u = e[o], a = this.pipeMap.get(u) ?? u;
+      n[o] = a, a !== u && (i = !0);
+    }
+    if (!i) {
+      this.execute(n, t);
+      return;
+    }
+    const r = {};
+    for (let o = 0; o < e.length; o++)
+      r[n[o]] = t[e[o]];
+    this.execute(n, r);
+  }
+  execute(t, e) {
+    const n = this.getExecutionMap(t), i = n.refCount.clone(), r = n.participatingNodes, o = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Set(), a = (c) => o.has(c) ? o.get(c) : this.state.get(c), m = (c) => {
+      this.graph.use(c, (l) => {
+        for (const { sink: b, sources: h } of l)
+          h.has(c) && i.decrement(b, () => {
+            u.add(b), m(b);
           });
       });
     };
-    for (; ; ) {
-      const l = u.shift();
-      if (l === void 0)
-        break;
-      const o = l;
-      let a = !1;
-      const b = (m) => {
-        if (this.distinctNodes.get(o)?.(c.get(o), m) === !0) {
-          a = !1;
-          return;
-        }
-        a = !0, c.set(o, m), this.state.has(o) && this.state.set(o, m);
-      };
-      if (Object.hasOwn(n, o) ? b(n[o]) : i.projections.use(o, (m) => {
-        for (const d of m) {
-          const I = [...Array.from(d.sources), ...Array.from(d.pulls)].map((P) => c.get(P));
-          d.map(b)(...I);
-        }
-      }), a) {
-        const m = c.get(o);
-        this.inContext(() => {
-          this.subscriptions.use(o, (d) => {
-            for (const I of d)
-              I(m);
-          });
-        }), this.singletonSubscriptions.get(o)?.(m);
-      } else
-        p(o);
-    }
+    this.inContext(() => {
+      for (const c of r) {
+        if (u.has(c))
+          continue;
+        let l = !1;
+        const b = (h) => {
+          if (this.distinctNodes.get(c)?.(a(c), h) === !0) {
+            l = !1;
+            return;
+          }
+          l = !0, o.set(c, h), this.state.has(c) && this.state.set(c, h);
+        };
+        if (Object.hasOwn(e, c) ? b(e[c]) : n.projections.use(c, (h) => {
+          for (const y of h) {
+            const x = y.sourceAndPullNodes.map(a);
+            y.map(b)(...x);
+          }
+        }), l) {
+          const h = o.get(c);
+          this.subscriptions.use(c, (y) => {
+            for (const x of y)
+              x(h);
+          }), this.singletonSubscriptions.get(c)?.(h);
+        } else
+          m(c);
+      }
+    });
   }
@@ -277,16 +297,16 @@ /**
   register(t) {
-    const e = y.get(t);
+    const e = d.get(t);
     if (e === void 0)
       return t;
     if (!this.definitionRegistry.has(t)) {
-      if (this.definitionRegistry.add(t), e.type === k)
-        return h(this.cellInstance(e.initial, e.distinct, t), (u) => {
+      if (this.definitionRegistry.add(t), e.type === I)
+        return f(this.cellInstance(e.initial, e.distinct, t), (o) => {
           this.inContext(() => {
-            e.init(this, u);
+            e.init(this, o);
           });
         });
-      if (e.type === v)
-        return h(this.signalInstance(e.distinct, t), (u) => {
+      if (e.type === O)
+        return f(this.signalInstance(e.distinct, t), (o) => {
           this.inContext(() => {
-            e.init(this, u);
+            e.init(this, o);
           });
@@ -358,24 +378,29 @@ });
   subMultiple(t, e) {
-    const n = this.signalInstance();
-    return this.connect({
-      map: (i) => (...r) => {
-        i(r);
+    const n = this.signalInstance(), i = this.connect({
+      map: (o) => (...u) => {
+        o(u);
       },
       sink: n,
       sources: t
-    }), this.sub(n, e);
+    }), r = this.sub(n, e);
+    return () => {
+      r();
+      for (const o of t)
+        this.graph.get(o)?.delete(i);
+      this.graph.delete(n), this.subscriptions.delete(n), this.state.delete(n), this.executionMaps.clear();
+    };
   }
   transformer(...t) {
-    return (e) => h(this.signalInstance(), (n) => (this.link(this.pipe(n, ...t), e), n));
+    return (e) => f(this.signalInstance(), (n) => (this.link(this.pipe(n, ...t), e), n));
   }
   calculateExecutionMap(t) {
-    const e = [], n = /* @__PURE__ */ new Set(), i = new w(), r = new M(), u = new w(), c = (p, l = 0) => {
-      r.increment(p), !n.has(p) && (this.register(p), i.use(p, (o) => {
-        l = Math.max(...Array.from(o).map((a) => e.indexOf(a))) + 1;
-      }), this.graph.use(p, (o) => {
-        for (const a of o)
-          a.sources.has(p) ? (u.getOrCreate(a.sink).add(a), c(a.sink, l)) : i.getOrCreate(a.sink).add(p);
-      }), n.add(p), e.splice(l, 0, p));
+    const e = [], n = /* @__PURE__ */ new Set(), i = new C(), r = new M(), o = new C(), u = (a, m = 0) => {
+      r.increment(a), !n.has(a) && (this.register(a), i.use(a, (c) => {
+        m = Math.max(...Array.from(c).map((l) => e.indexOf(l))) + 1;
+      }), this.graph.use(a, (c) => {
+        for (const l of c)
+          l.sources.has(a) ? (o.getOrCreate(l.sink).add(l), u(l.sink, m)) : i.getOrCreate(l.sink).add(a);
+      }), n.add(a), e.splice(m, 0, a));
     };
-    return t.forEach(c), { participatingNodes: e, pendingPulls: i, projections: u, refCount: r };
+    return t.forEach(u), { participatingNodes: e, pendingPulls: i, projections: o, refCount: r };
   }
@@ -398,3 +423,3 @@ combineOperators(...t) {
       for (const [i, r] of this.executionMaps.entries())
-        if (Array.isArray(i) && i.length === t.length && i.every((u) => t.includes(u)))
+        if (Array.isArray(i) && i.length === t.length && i.every((o) => t.includes(o)))
           return r;
@@ -405,15 +430,15 @@ const n = this.calculateExecutionMap(t);
 }
-function D(s, t = x, e = !0) {
-  return h(Symbol(), (n) => {
-    y.set(n, { distinct: e, init: t, initial: s, type: k });
+function D(s, t = k, e = !0) {
+  return f(Symbol(), (n) => {
+    d.set(n, { distinct: e, init: t, initial: s, type: I });
   });
 }
-function A(s, t, e = !0) {
-  return h(Symbol(), (n) => {
-    y.set(n, { distinct: e, init: t, initial: s, type: T });
+function j(s, t, e = !0) {
+  return f(Symbol(), (n) => {
+    d.set(n, { distinct: e, init: t, initial: s, type: T });
   });
 }
-function U(s, t, e = !0) {
-  return h(Symbol(), (n) => {
-    y.set(n, {
+function K(s, t, e = !0) {
+  return f(Symbol(), (n) => {
+    d.set(n, {
       distinct: e,
@@ -424,14 +449,14 @@ init: (i, r) => {
       initial: s,
-      type: k
+      type: I
     });
   });
 }
-function q(s = x, t = !1) {
-  return h(Symbol(), (e) => {
-    y.set(e, { distinct: t, init: s, type: "signal" });
+function U(s = k, t = !1) {
+  return f(Symbol(), (e) => {
+    d.set(e, { distinct: t, init: s, type: "signal" });
   });
 }
-function F(s = x) {
-  return h(Symbol(), (t) => {
-    y.set(t, { distinct: !1, init: s, type: "signal" });
+function q(s = k) {
+  return f(Symbol(), (t) => {
+    d.set(t, { distinct: !1, init: s, type: "signal" });
   });
@@ -444,18 +469,18 @@ }
 }
-const G = (s, t) => {
+const z = (s, t) => {
   g().link(s, t);
-}, z = (...s) => {
+}, F = (...s) => {
   g().pub(...s);
-}, B = (...s) => g().sub(...s), H = (...s) => {
+}, G = (...s) => g().sub(...s), B = (...s) => {
   g().pubIn(...s);
-}, J = (...s) => g().pipe(...s), X = (...s) => {
+}, H = (...s) => g().pipe(...s), J = (...s) => {
   g().changeWith(...s);
-}, Z = (...s) => g().combine(...s), $ = (s) => g().getValue(s), R = { data: null, error: null, isLoading: !0, type: "loading" };
-function tt(s, t) {
-  return A(R, (e, n, i) => {
-    function r(u) {
-      e.pub(i, R), s(u).then((c) => {
-        e.pub(i, { data: c, error: null, isLoading: !1, type: "success" });
-      }).catch((c) => {
-        e.pub(i, { data: null, error: c, isLoading: !1, type: "error" });
+}, X = (...s) => g().combine(...s), Z = (s) => g().getValue(s), R = { data: null, error: null, isLoading: !0, type: "loading" };
+function $(s, t) {
+  return j(R, (e, n, i) => {
+    function r(o) {
+      e.pub(i, R), s(o).then((u) => {
+        e.pub(i, { data: u, error: null, isLoading: !1, type: "success" });
+      }).catch((u) => {
+        e.pub(i, { data: null, error: u, isLoading: !1, type: "error" });
       });
@@ -466,16 +491,16 @@ }
 }
-const V = f.createContext(null);
-function et({
+const P = p.createContext(null);
+function tt({
   children: s,
   initWith: t,
-  updateWith: e = {}
+  updateWith: e
 }) {
-  const n = f.useMemo(() => new j(t), []);
-  return f.useEffect(() => {
-    n.pubIn(e);
-  }, [e, n]), /* @__PURE__ */ N(V.Provider, { value: n, children: s });
+  const n = p.useMemo(() => new L(t), []);
+  return p.useEffect(() => {
+    e !== void 0 && n.pubIn(e);
+  }, [e, n]), /* @__PURE__ */ N(P.Provider, { value: n, children: s });
 }
-const W = typeof document < "u" ? f.useLayoutEffect : f.useEffect;
-function C() {
-  const s = f.useContext(V);
+const A = typeof document < "u" ? p.useLayoutEffect : p.useEffect;
+function w() {
+  const s = p.useContext(P);
   if (s === null)
@@ -485,17 +510,13 @@ throw new Error("useRealm must be used within a RealmContextProvider");
 }
-function Y(s) {
-  const t = C();
+function W(s) {
+  const t = w();
   t.register(s);
-  const e = f.useCallback((n) => t.sub(s, n), [t, s]);
-  return f.useSyncExternalStore(
-    e,
-    () => t.getValue(s),
-    () => t.getValue(s)
-  );
+  const e = p.useCallback((i) => t.sub(s, i), [t, s]), n = p.useCallback(() => t.getValue(s), [t, s]);
+  return p.useSyncExternalStore(e, n, n);
 }
-function _(s) {
-  const t = C();
+function Y(s) {
+  const t = w();
   t.register(s);
-  const [e, n] = f.useState(() => t.getValue(s));
-  return W(() => {
+  const [e, n] = p.useState(() => t.getValue(s));
+  return A(() => {
     const i = t.sub(s, () => {
@@ -509,10 +530,10 @@ n(() => t.getValue(s));
 }
-const O = "useSyncExternalStore" in f ? Y : _;
-function nt(...s) {
-  const t = C(), e = f.useMemo(() => t.combineCells(...s), [t, ...s]);
-  return O(e);
+const V = "useSyncExternalStore" in p ? W : Y;
+function et(...s) {
+  const t = w(), e = p.useMemo(() => t.combineCells(...s), [t, ...s]);
+  return V(e);
 }
-function K(s) {
-  const t = C();
-  return t.register(s), f.useCallback(
+function _(s) {
+  const t = w();
+  return t.register(s), p.useCallback(
     (e) => {
@@ -524,6 +545,6 @@ t.pub(s, e);
 }
+function nt(s) {
+  return [V(s), _(s)];
+}
 function st(s) {
-  return [O(s), K(s)];
-}
-function it(s) {
   return ((t, e) => {
@@ -540,3 +561,3 @@ const n = e.signalInstance();
 }
-function rt(...s) {
+function it(...s) {
   return ((t, e) => {
@@ -554,3 +575,3 @@ const n = e.signalInstance();
 }
-function ut(s) {
+function rt(s) {
   return (t, e) => {
@@ -592,8 +613,8 @@ const n = e.signalInstance();
 }
-function at(s, t) {
+function ut(s, t) {
   return (e, n) => {
     const i = n.signalInstance();
     return n.connect({
-      map: (r) => (u) => {
-        r(t = s(t, u));
+      map: (r) => (o) => {
+        r(t = s(t, o));
       },
@@ -605,8 +626,8 @@ sink: i,
 }
-function lt(s) {
+function at(s) {
   return (t, e) => {
     const n = e.signalInstance();
     let i, r = null;
-    return e.sub(t, (u) => {
-      i = u, r === null && (r = setTimeout(() => {
+    return e.sub(t, (o) => {
+      i = o, r === null && (r = setTimeout(() => {
         r = null, e.pub(n, i);
@@ -617,8 +638,8 @@ }, s));
 }
-function pt(s) {
+function lt(s) {
   return (t, e) => {
     const n = e.signalInstance();
     let i, r = null;
-    return e.sub(t, (u) => {
-      i = u, r !== null && clearTimeout(r), r = setTimeout(() => {
+    return e.sub(t, (o) => {
+      i = o, r !== null && clearTimeout(r), r = setTimeout(() => {
         e.pub(n, i);
@@ -629,3 +650,3 @@ }, s);
 }
-function ft() {
+function pt() {
   return (s, t) => {
@@ -645,21 +666,21 @@ const e = t.signalInstance();
     return e.connect({
-      map: (u) => (c) => {
-        r !== i && (u([r, c]), r = i);
+      map: (o) => (u) => {
+        r !== i && (o([r, u]), r = i);
       },
       sink: n,
       sources: [s]
-    }), e.sub(t, (u) => {
-      r = u;
+    }), e.sub(t, (o) => {
+      r = o;
     }), n;
   };
 }
-function mt(s, t, e) {
+function ft(s, t, e) {
   return (n, i) => {
     const r = i.signalInstance();
-    return i.sub(n, (u) => {
-      u !== null && typeof u == "object" && "then" in u ? (i.pub(r, s()), u.then((c) => {
-        i.pub(r, t(c));
-      }).catch((c) => {
-        i.pub(r, e(c));
-      })) : i.pub(r, t(u));
+    return i.sub(n, (o) => {
+      o !== null && typeof o == "object" && "then" in o ? (i.pub(r, s()), o.then((u) => {
+        i.pub(r, t(u));
+      }).catch((u) => {
+        i.pub(r, e(u));
+      })) : i.pub(r, t(o));
     }), r;
@@ -669,36 +690,36 @@ };
 export {
-  F as Action,
-  tt as AsyncQuery,
+  q as Action,
+  $ as AsyncQuery,
   D as Cell,
-  U as DerivedCell,
-  A as Pipe,
-  j as Realm,
-  V as RealmContext,
-  et as RealmProvider,
-  q as Signal,
-  X as changeWith,
-  Z as combine,
-  pt as debounceTime,
+  K as DerivedCell,
+  j as Pipe,
+  L as Realm,
+  P as RealmContext,
+  tt as RealmProvider,
+  U as Signal,
+  J as changeWith,
+  X as combine,
+  lt as debounceTime,
   E as defaultComparator,
-  ft as delayWithMicrotask,
+  pt as delayWithMicrotask,
   ot as filter,
-  $ as getValue,
-  mt as handlePromise,
-  G as link,
-  it as map,
-  ut as mapTo,
+  Z as getValue,
+  ft as handlePromise,
+  z as link,
+  st as map,
+  rt as mapTo,
   ht as onNext,
   ct as once,
-  J as pipe,
-  z as pub,
-  H as pubIn,
-  at as scan,
-  B as sub,
-  lt as throttleTime,
-  st as useCell,
-  O as useCellValue,
-  nt as useCellValues,
-  K as usePublisher,
-  C as useRealm,
-  rt as withLatestFrom
+  H as pipe,
+  F as pub,
+  B as pubIn,
+  ut as scan,
+  G as sub,
+  at as throttleTime,
+  nt as useCell,
+  V as useCellValue,
+  et as useCellValues,
+  _ as usePublisher,
+  w as useRealm,
+  it as withLatestFrom
 };

package.json

 {
   "name": "@virtuoso.dev/gurx",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "private": false,
@@ -5,0 +5,0 @@ "license": "MIT",

No alert changes

Improved metrics

Total package byte prevSize

76743

2.93%

Lines of code

1620

1.89%

No dependency changes