refactor: less queueing for loop closures

Author: mlrawlings

.sizes.json

@@ -7,23 +7,23 @@
     {
       "name": "*",
       "total": {
-        "min": 17441,
-        "brotli": 6584
+        "min": 17482,
+        "brotli": 6602
       }
     },
     {
       "name": "counter",
       "user": {
         "min": 189,
-        "brotli": 143
+        "brotli": 144
       },
       "runtime": {
         "min": 4023,
-        "brotli": 1759
+        "brotli": 1769
       },
       "total": {
         "min": 4212,
-        "brotli": 1902
+        "brotli": 1913
       }
     },
     {
@@ -34,11 +34,11 @@
       },
       "runtime": {
         "min": 3276,
-        "brotli": 1498
+        "brotli": 1491
       },
       "total": {
         "min": 3387,
-        "brotli": 1598
+        "brotli": 1591
       }
     },
     {
@@ -48,12 +48,12 @@
         "brotli": 485
       },
       "runtime": {
-        "min": 6906,
-        "brotli": 2947
+        "min": 6947,
+        "brotli": 2960
       },
       "total": {
-        "min": 7908,
-        "brotli": 3432
+        "min": 7949,
+        "brotli": 3445
       }
     },
     {
@@ -64,11 +64,11 @@
       },
       "runtime": {
         "min": 3443,
-        "brotli": 1548
+        "brotli": 1551
       },
       "total": {
         "min": 3588,
-        "brotli": 1668
+        "brotli": 1671
       }
     }
   ]

.sizes/counter.csr/entry.js

@@ -1,4 +1,4 @@
-// size: 189 (min) 143 (brotli)
+// size: 189 (min) 144 (brotli)
 const _clickCount_effect = effect("a0", (_scope, { 2: clickCount }) =>
     on(_scope[0], "click", function () {
       _clickCount(_scope, clickCount + 1);

.sizes/dom.js

@@ -1,4 +1,4 @@
-// size: 17441 (min) 6584 (brotli)
+// size: 17482 (min) 6602 (brotli)
 var empty = [],
   rest = Symbol();
 function attrTag(attrs2) {
@@ -97,10 +97,10 @@ var registeredValues = {},
   Render = class {
     l = [];
     m = {};
-    z = { _: registeredValues };
+    A = { _: registeredValues };
     constructor(renders, runtimeId, renderId) {
-      (this.A = renders),
-        (this.B = runtimeId),
+      (this.B = renders),
+        (this.C = runtimeId),
         (this.n = renderId),
         (this.o = renders[renderId]),
         this.p();
@@ -110,7 +110,7 @@ var registeredValues = {},
     }
     p() {
       let data2 = this.o,
-        serializeContext = this.z,
+        serializeContext = this.A,
         scopeLookup = this.m,
         visits = data2.v,
         branchIds = new Set(),
@@ -200,7 +200,7 @@ var registeredValues = {},
                 { $global: $global } = scopeLookup;
               $global ||
                 ((scopeLookup.$global = $global = scopes.$ || {}),
-                ($global.runtimeId = this.B),
+                ($global.runtimeId = this.C),
                 ($global.renderId = this.n));
               for (let scopeId in scopes)
                 if ("$" !== scopeId) {
@@ -225,7 +225,7 @@ var registeredValues = {},
                 }
             } else
               i === len || "string" != typeof resumes[i]
-                ? delete this.A[this.n]
+                ? delete this.B[this.n]
                 : registeredValues[resumes[i++]](
                     scopeLookup[resumeData],
                     scopeLookup[resumeData],
@@ -781,7 +781,7 @@ function destroyBranch(branch) {
   branch.q?.j?.delete(branch), destroyNestedBranches(branch);
 }
 function destroyNestedBranches(branch) {
-  (branch.C = 1),
+  (branch.s = 1),
     branch.j?.forEach(destroyNestedBranches),
     branch.D?.forEach((scope) => {
       for (let id in scope.g) scope.g[id]?.abort();
@@ -800,10 +800,10 @@ var pendingRenders = [],
 function queueRender(scope, signal, signalKey, value2, scopeKey = scope.d) {
   let key = 1024 * scopeKey + signalKey,
     existingRender = -1 !== signalKey && pendingRendersLookup.get(key);
-  if (existingRender) existingRender.s = value2;
+  if (existingRender) existingRender.t = value2;
   else {
     let i = pendingRenders.length,
-      render = { t: scope, E: signal, s: value2, u: key };
+      render = { u: scope, E: signal, t: value2, x: key };
     for (
       pendingRendersLookup.set(key, render), pendingRenders.push(render);
       i;
@@ -879,15 +879,15 @@ function runRenders() {
       }
       pendingRenders[i] = item;
     }
-    render.t.c?.C || render.E(render.t, render.s);
+    render.u.c?.s || render.E(render.u, render.t);
   }
   !(function () {
     for (let scope of pendingScopes) scope.f = 0;
     pendingScopes = [];
   })();
 }
 function comparePendingRenders(a, b) {
-  return a.u - b.u;
+  return a.x - b.x;
 }
 function resetAbortSignal(scope, id) {
   let ctrl = scope.g?.[id];
@@ -983,13 +983,13 @@ function createBranch($global, renderer, parentScope, parentNode) {
   let branch = createScope($global),
     parentBranch = parentScope?.c;
   return (
-    (branch._ = renderer.x || parentScope),
+    (branch._ = renderer.y || parentScope),
     (branch.c = branch),
     parentBranch
-      ? ((branch.y = parentBranch.y + 1),
+      ? ((branch.z = parentBranch.z + 1),
         (branch.q = parentBranch),
         (parentBranch.j ||= new Set()).add(branch))
-      : (branch.y = 1),
+      : (branch.z = 1),
     renderer.k?.(branch, parentNode.namespaceURI),
     branch
   );
@@ -1032,7 +1032,7 @@ function createContent(id, template, rawWalks, setup, getArgs) {
   return (owner) => ({
     d: id,
     k: init2,
-    x: owner,
+    y: owner,
     get h() {
       return (args ||= getArgs?.());
     },
@@ -1102,10 +1102,22 @@ function loopClosure(valueAccessor, ownerLoopNodeAccessor, fn) {
     loopScopeAccessor = ownerLoopNodeAccessor + "!",
     loopScopeMapAccessor = ownerLoopNodeAccessor + "(",
     ownerSignal = (ownerScope) => {
-      for (let scope of ownerScope[loopScopeAccessor] ||
-        ownerScope[loopScopeMapAccessor]?.values() ||
-        [])
-        scope.f || queueRender(scope, childSignal, -1);
+      let scopes =
+          ownerScope[loopScopeAccessor] ||
+          ownerScope[loopScopeMapAccessor]?.values() ||
+          [],
+        [firstScope] = scopes;
+      firstScope &&
+        queueRender(
+          ownerScope,
+          () => {
+            for (let scope of scopes)
+              !scope.f && !scope.s && childSignal(scope);
+          },
+          -1,
+          0,
+          firstScope.d,
+        );
     };
   return (ownerSignal._ = childSignal), ownerSignal;
 }
@@ -1521,7 +1533,7 @@ var classIdToBranch = new Map(),
           branch
             ? (existing = !0)
             : (branch = component.scope =
-                createBranch(out.global, renderer, renderer.x, document.body)),
+                createBranch(out.global, renderer, renderer.y, document.body)),
             applyArgs(branch, args);
         })),
         !existing)

packages/runtime-tags/src/dom/signals.ts

@@ -97,12 +97,25 @@ export function loopClosure<T>(
   const loopScopeMapAccessor =
     ownerLoopNodeAccessor + AccessorChar.LoopScopeMap;
   const ownerSignal = (ownerScope: Scope) => {
-    for (const scope of ownerScope[loopScopeAccessor] ||
+    const scopes =
+      ownerScope[loopScopeAccessor] ||
       ownerScope[loopScopeMapAccessor]?.values() ||
-      []) {
-      if (!scope.___pending) {
-        queueRender(scope, childSignal, -1);
-      }
+      [];
+    const [firstScope] = scopes;
+    if (firstScope) {
+      queueRender(
+        ownerScope,
+        () => {
+          for (const scope of scopes) {
+            if (!scope.___pending && !scope.___destroyed) {
+              childSignal(scope);
+            }
+          }
+        },
+        -1,
+        0,
+        firstScope.___id,
+      );
     }
   };
   ownerSignal._ = childSignal;