fix: avoid intersections for closures

marko-js · Feb 25, 2025 · 43522b7 · 43522b7
1 parent b898aa0
commit 43522b7
Show file tree

Hide file tree

Showing 38 changed files with 130 additions and 221 deletions.
diff --git a/.changeset/spotty-doors-boil.md b/.changeset/spotty-doors-boil.md
@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Avoid creating intersections for closures which are now handled via the queue.
diff --git a/.sizes.json b/.sizes.json
@@ -7,8 +7,8 @@
     {
       "name": "*",
       "total": {
-        "min": 17986,
-        "brotli": 6770
+        "min": 17965,
+        "brotli": 6763
       }
     },
     {
@@ -44,16 +44,16 @@
     {
       "name": "comments",
       "user": {
-        "min": 1088,
-        "brotli": 528
+        "min": 1044,
+        "brotli": 512
       },
       "runtime": {
-        "min": 7426,
-        "brotli": 3121
+        "min": 7405,
+        "brotli": 3119
       },
       "total": {
-        "min": 8514,
-        "brotli": 3649
+        "min": 8449,
+        "brotli": 3631
       }
     },
     {

diff --git a/.sizes/comments.csr/entry.js b/.sizes/comments.csr/entry.js
@@ -1,4 +1,4 @@
-// size: 1088 (min) 528 (brotli)
+// size: 1044 (min) 512 (brotli)
 const _expr_comment_comments_id$if_content = intersection(
     2,
     (_scope) => {
@@ -48,32 +48,24 @@ const _expr_comment_comments_id$if_content = intersection(
     attr(_scope[0], "id", id), _id$if_content(_scope);
   }),
   _i$for_content = value(9, 0, () => _expr_input_path_i$for_content),
-  _comment_comments$for_content = value(
-    8,
-    (_scope, comment_comments) => {
-      _if$for_content(_scope, comment_comments ? 0 : 1),
-        _comment_comments$if_content(_scope);
-    },
-    () => _if$for_content,
-  ),
+  _comment_comments$for_content = value(8, (_scope, comment_comments) => {
+    _if$for_content(_scope, comment_comments ? 0 : 1),
+      _comment_comments$if_content(_scope);
+  }),
   _comment_text$for_content = value(7, (_scope, comment_text) =>
     data(_scope[1], comment_text),
   ),
-  _comment$for_content = value(
-    6,
-    (_scope, comment) => {
-      _comment_text$for_content(_scope, comment?.text),
-        _comment_comments$for_content(_scope, comment?.comments);
-    },
-    () => _comment_comments$for_content,
-  ),
+  _comment$for_content = value(6, (_scope, comment) => {
+    _comment_text$for_content(_scope, comment?.text),
+      _comment_comments$for_content(_scope, comment?.comments);
+  }),
   _params_2$for_content = value(
     5,
     (_scope, _params_2) => {
       _comment$for_content(_scope, _params_2[0]),
         _i$for_content(_scope, _params_2[1]);
     },
-    () => intersections([_comment$for_content, _i$for_content]),
+    () => _i$for_content,
   ),
   _input_path$for_content = loopClosure(
     4,
@@ -95,19 +87,12 @@ const _expr_comment_comments_id$if_content = intersection(
   _input_path_ = value(4, (_scope, input_path) =>
     _input_path$for_content(_scope),
   ),
-  _input_comments_ = value(
-    3,
-    (_scope, input_comments) => _for(_scope, [input_comments]),
-    () => _for,
-  ),
-  _input_$1 = value(
-    2,
-    (_scope, input) => {
-      _input_comments_(_scope, input.comments),
-        _input_path_(_scope, input.path);
-    },
-    () => _input_comments_,
+  _input_comments_ = value(3, (_scope, input_comments) =>
+    _for(_scope, [input_comments]),
   ),
+  _input_$1 = value(2, (_scope, input) => {
+    _input_comments_(_scope, input.comments), _input_path_(_scope, input.path);
+  }),
   _input_ = value(
     2,
     (_scope, input) => {

diff --git a/.sizes/dom.js b/.sizes/dom.js
@@ -1,4 +1,4 @@
-// size: 17986 (min) 6770 (brotli)
+// size: 17965 (min) 6763 (brotli)
 var empty = [],
   rest = Symbol();
 function attrTag(attrs2) {
@@ -1245,15 +1245,12 @@ function _clone(ns) {
 var cloneCache = {};
 function conditional(nodeAccessor, ...branches) {
   let branchAccessor = nodeAccessor + "(";
-  return (scope, newBranchIndexOrOp) => {
-    newBranchIndexOrOp !== scope[branchAccessor] &&
-      newBranchIndexOrOp !== DIRTY &&
-      newBranchIndexOrOp !== MARK &&
-      newBranchIndexOrOp !== CLEAN &&
+  return (scope, newBranch) => {
+    newBranch !== scope[branchAccessor] &&
       setConditionalRenderer(
         scope,
         nodeAccessor,
-        branches[(scope[branchAccessor] = newBranchIndexOrOp)],
+        branches[(scope[branchAccessor] = newBranch)],
         createBranchScopeWithRenderer,
       );
   };

diff --git a/...s/basic-conditional-counter-multiple-nodes/__snapshots__/dom.expected/template.hydrate.js b/...s/basic-conditional-counter-multiple-nodes/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 370 (min) 210 (brotli)
+// size: 362 (min) 198 (brotli)
 const _count$if_content = _$.conditionalClosure(4, 2, 0, (_scope, count) =>
     _$.data(_scope[0], count),
   ),
@@ -20,11 +20,7 @@ const _count$if_content = _$.conditionalClosure(4, 2, 0, (_scope, count) =>
       _show(_scope, !show);
     }),
   ),
-  _show = _$.state(
-    3,
-    (_scope, show) => {
-      _show_effect(_scope), _if(_scope, show ? 0 : 1);
-    },
-    () => _if,
-  );
+  _show = _$.state(3, (_scope, show) => {
+    _show_effect(_scope), _if(_scope, show ? 0 : 1);
+  });
 init();
diff --git a/.../fixtures/basic-conditional-counter-multiple-nodes/__snapshots__/dom.expected/template.js b/.../fixtures/basic-conditional-counter-multiple-nodes/__snapshots__/dom.expected/template.js
@@ -24,7 +24,7 @@ const _show_effect = _$.effect("__tests__/template.marko_0_show", (_scope, {
 const _show = /* @__PURE__ */_$.state("show", (_scope, show) => {
   _show_effect(_scope);
   _if(_scope, show ? 0 : 1);
-}, () => _if);
+});
 export function _setup_(_scope) {
   _show(_scope, true);
   _count(_scope, 0);

diff --git a/...tests__/fixtures/basic-conditional-counter/__snapshots__/dom.expected/template.hydrate.js b/...tests__/fixtures/basic-conditional-counter/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 368 (min) 202 (brotli)
+// size: 360 (min) 200 (brotli)
 const _count$if_content = _$.conditionalClosure(4, 2, 0, (_scope, count) =>
     _$.data(_scope[0], count),
   ),
@@ -20,11 +20,7 @@ const _count$if_content = _$.conditionalClosure(4, 2, 0, (_scope, count) =>
       _show(_scope, !show);
     }),
   ),
-  _show = _$.state(
-    3,
-    (_scope, show) => {
-      _show_effect(_scope), _if(_scope, show ? 0 : 1);
-    },
-    () => _if,
-  );
+  _show = _$.state(3, (_scope, show) => {
+    _show_effect(_scope), _if(_scope, show ? 0 : 1);
+  });
 init();
diff --git a/...s/src/__tests__/fixtures/basic-conditional-counter/__snapshots__/dom.expected/template.js b/...s/src/__tests__/fixtures/basic-conditional-counter/__snapshots__/dom.expected/template.js
@@ -24,7 +24,7 @@ const _show_effect = _$.effect("__tests__/template.marko_0_show", (_scope, {
 const _show = /* @__PURE__ */_$.state("show", (_scope, show) => {
   _show_effect(_scope);
   _if(_scope, show ? 0 : 1);
-}, () => _if);
+});
 export function _setup_(_scope) {
   _show(_scope, true);
   _count(_scope, 0);

diff --git a/...c/__tests__/fixtures/basic-execution-order/__snapshots__/dom.expected/template.hydrate.js b/...c/__tests__/fixtures/basic-execution-order/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 303 (min) 193 (brotli)
+// size: 295 (min) 190 (brotli)
 const _message_text$if_content = _$.conditionalClosure(
     3,
     1,
@@ -10,11 +10,7 @@ const _message_text$if_content = _$.conditionalClosure(
   },
   _if_content = _$.createRenderer(" ", " ", _setup$if_content),
   _if = _$.conditional(1, _if_content),
-  _show = _$.state(
-    4,
-    (_scope, show) => _if(_scope, show ? 0 : 1),
-    () => _if,
-  ),
+  _show = _$.state(4, (_scope, show) => _if(_scope, show ? 0 : 1)),
   _message_text = _$.value(3, (_scope, message_text) =>
     _message_text$if_content(_scope),
   ),

diff --git a/...-tags/src/__tests__/fixtures/basic-execution-order/__snapshots__/dom.expected/template.js b/...-tags/src/__tests__/fixtures/basic-execution-order/__snapshots__/dom.expected/template.js
@@ -7,7 +7,7 @@ const _setup$if_content = _scope => {
 };
 const _if_content = /* @__PURE__ */_$.createRenderer(" ", /* get */" ", _setup$if_content);
 const _if = /* @__PURE__ */_$.conditional("#text/1", _if_content);
-const _show = /* @__PURE__ */_$.state("show", (_scope, show) => _if(_scope, show ? 0 : 1), () => _if);
+const _show = /* @__PURE__ */_$.state("show", (_scope, show) => _if(_scope, show ? 0 : 1));
 const _message_text = /* @__PURE__ */_$.value("message_text", (_scope, message_text) => _message_text$if_content(_scope));
 const _message = /* @__PURE__ */_$.state("message", (_scope, message) => _message_text(_scope, message?.text));
 const _setup__effect = _$.effect("__tests__/template.marko_0", _scope => _$.on(_scope["#button/0"], "click", function () {

diff --git a/...tests__/fixtures/basic-inert-collapsible-tree/__snapshots__/dom.expected/tags/comments.js b/...tests__/fixtures/basic-inert-collapsible-tree/__snapshots__/dom.expected/tags/comments.js
@@ -51,16 +51,16 @@ const _i$for_content = /* @__PURE__ */_$.value("i", 0, () => _expr_input_path_i$
 const _comment_comments$for_content = /* @__PURE__ */_$.value("comment_comments", (_scope, comment_comments) => {
   _if$for_content(_scope, comment_comments ? 0 : 1);
   _comment_comments$if_content(_scope);
-}, () => _if$for_content);
+});
 const _comment_text$for_content = /* @__PURE__ */_$.value("comment_text", (_scope, comment_text) => _$.data(_scope["#text/1"], comment_text));
 const _comment$for_content = /* @__PURE__ */_$.value("comment", (_scope, comment) => {
   _comment_text$for_content(_scope, comment?.text);
   _comment_comments$for_content(_scope, comment?.comments);
-}, () => _comment_comments$for_content);
+});
 const _params_2$for_content = /* @__PURE__ */_$.value("_params_2", (_scope, _params_2) => {
   _comment$for_content(_scope, _params_2[0]);
   _i$for_content(_scope, _params_2[1]);
-}, () => _$.intersections([_comment$for_content, _i$for_content]));
+}, () => _i$for_content);
 const _input_path$for_content = /* @__PURE__ */_$.loopClosure("input_path", "#ul/0", 0, () => _expr_input_path_i$for_content);
 const _setup$for_content = _scope => {
   _input_path$for_content._(_scope);
@@ -69,10 +69,10 @@ const _setup$for_content = _scope => {
 const _for_content = /* @__PURE__ */_$.createRenderer("<li><span> </span><button> </button><!></li>", /* get, next(2), get, out(1), get, next(1), get, out(1), replace */" E l D l%", _setup$for_content, () => _params_2$for_content);
 const _for = /* @__PURE__ */_$.loopOf("#ul/0", _for_content);
 export const _input_path_ = /* @__PURE__ */_$.value("input_path", (_scope, input_path) => _input_path$for_content(_scope));
-export const _input_comments_ = /* @__PURE__ */_$.value("input_comments", (_scope, input_comments) => _for(_scope, [input_comments]), () => _for);
+export const _input_comments_ = /* @__PURE__ */_$.value("input_comments", (_scope, input_comments) => _for(_scope, [input_comments]));
 export const _input_ = /* @__PURE__ */_$.value("input", (_scope, input) => {
   _input_comments_(_scope, input.comments);
   _input_path_(_scope, input.path);
-}, () => _input_comments_);
-export const _params__ = /* @__PURE__ */_$.value("_params_", (_scope, _params_) => _input_(_scope, _params_[0]), () => _input_);
+});
+export const _params__ = /* @__PURE__ */_$.value("_params_", (_scope, _params_) => _input_(_scope, _params_[0]));
 export default /* @__PURE__ */_$.createTemplate("__tests__/tags/comments.marko", _template_, _walks_, _setup_, () => _params__);
diff --git a/...gs/src/__tests__/fixtures/basic-nested-for/__snapshots__/dom.expected/template.hydrate.js b/...gs/src/__tests__/fixtures/basic-nested-for/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 637 (min) 363 (brotli)
+// size: 629 (min) 360 (brotli)
 const _name_ = _$.value(3, (_scope, name) => _$.data(_scope[0], name)),
   _expr_outer_inner$for_content = _$.intersection(
     2,
@@ -60,11 +60,7 @@ const _name_ = _$.value(3, (_scope, name) => _$.data(_scope[0], name)),
       _items(_scope, [...items, items.length]);
     }),
   ),
-  _items = _$.state(
-    2,
-    (_scope, items) => {
-      _items_effect(_scope), _for(_scope, [items]), _items$for_content(_scope);
-    },
-    () => _for,
-  );
+  _items = _$.state(2, (_scope, items) => {
+    _items_effect(_scope), _for(_scope, [items]), _items$for_content(_scope);
+  });
 init();
diff --git a/...ntime-tags/src/__tests__/fixtures/basic-nested-for/__snapshots__/dom.expected/template.js b/...ntime-tags/src/__tests__/fixtures/basic-nested-for/__snapshots__/dom.expected/template.js
@@ -37,7 +37,7 @@ const _items = /* @__PURE__ */_$.state("items", (_scope, items) => {
   _items_effect(_scope);
   _for(_scope, [items]);
   _items$for_content(_scope);
-}, () => _for);
+});
 export function _setup_(_scope) {
   _items(_scope, [0, 1]);
 }

diff --git a/...c/__tests__/fixtures/basic-nested-scope-if/__snapshots__/dom.expected/template.hydrate.js b/...c/__tests__/fixtures/basic-nested-scope-if/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 435 (min) 251 (brotli)
+// size: 427 (min) 242 (brotli)
 const _clickCount$else_content = _$.conditionalClosure(
     1,
     0,
@@ -37,13 +37,9 @@ const _clickCount$else_content = _$.conditionalClosure(
     _setup$if_content,
   ),
   _if = _$.conditional(0, _if_content, _else_content),
-  _clickCount = _$.state(
-    1,
-    (_scope, clickCount) => {
-      _if(_scope, clickCount < 3 ? 0 : 1),
-        _clickCount$if_content(_scope),
-        _clickCount$else_content(_scope);
-    },
-    () => _if,
-  );
+  _clickCount = _$.state(1, (_scope, clickCount) => {
+    _if(_scope, clickCount < 3 ? 0 : 1),
+      _clickCount$if_content(_scope),
+      _clickCount$else_content(_scope);
+  });
 init();
diff --git a/...-tags/src/__tests__/fixtures/basic-nested-scope-if/__snapshots__/dom.expected/template.js b/...-tags/src/__tests__/fixtures/basic-nested-scope-if/__snapshots__/dom.expected/template.js
@@ -26,7 +26,7 @@ const _clickCount = /* @__PURE__ */_$.state("clickCount", (_scope, clickCount) =
   _if(_scope, clickCount < 3 ? 0 : 1);
   _clickCount$if_content(_scope);
   _clickCount$else_content(_scope);
-}, () => _if);
+});
 export function _setup_(_scope) {
   _clickCount(_scope, 0);
 }

diff --git a/...__tests__/fixtures/batched-updates-cleanup/__snapshots__/dom.expected/template.hydrate.js b/...__tests__/fixtures/batched-updates-cleanup/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 300 (min) 198 (brotli)
+// size: 292 (min) 192 (brotli)
 const _message$if_content = _$.conditionalClosure(3, 1, 0, (_scope, message) =>
     _$.data(_scope[0], message),
   ),
@@ -13,11 +13,7 @@ const _message$if_content = _$.conditionalClosure(3, 1, 0, (_scope, message) =>
       _message(_scope, "bye"), _show(_scope, !show);
     }),
   ),
-  _show = _$.state(
-    2,
-    (_scope, show) => {
-      _show_effect(_scope), _if(_scope, show ? 0 : 1);
-    },
-    () => _if,
-  );
+  _show = _$.state(2, (_scope, show) => {
+    _show_effect(_scope), _if(_scope, show ? 0 : 1);
+  });
 init();
diff --git a/...ags/src/__tests__/fixtures/batched-updates-cleanup/__snapshots__/dom.expected/template.js b/...ags/src/__tests__/fixtures/batched-updates-cleanup/__snapshots__/dom.expected/template.js
@@ -17,7 +17,7 @@ const _show_effect = _$.effect("__tests__/template.marko_0_show", (_scope, {
 const _show = /* @__PURE__ */_$.state("show", (_scope, show) => {
   _show_effect(_scope);
   _if(_scope, show ? 0 : 1);
-}, () => _if);
+});
 export function _setup_(_scope) {
   _show(_scope, true);
   _message(_scope, "hi");

diff --git a/...__tests__/fixtures/cleanup-n-child-if-deep/__snapshots__/dom.expected/template.hydrate.js b/...__tests__/fixtures/cleanup-n-child-if-deep/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 1420 (min) 528 (brotli)
+// size: 1398 (min) 525 (brotli)
 const _template_ = "<div><!> a</div><span><!> a</span><p><!> a</p>",
   _expr_name_write_effect = _$.effect("a0", (_scope, { 5: name, 6: write }) => {
     write(`${name} mounted`),
@@ -44,7 +44,7 @@ const _template_ = "<div><!> a</div><span><!> a</span><p><!> a</p>",
     "b1",
     7,
     (_scope, showInner) => _if$if_content(_scope, showInner ? 0 : 1),
-    () => _if$if_content,
+    0,
     (_scope) => _scope._._,
   ),
   _setup$if_content2 = (_scope) => {
@@ -71,7 +71,6 @@ const _template_ = "<div><!> a</div><span><!> a</span><p><!> a</p>",
     4,
     0,
     (_scope, showMiddle) => _if$if_content2(_scope, showMiddle ? 0 : 1),
-    () => _if$if_content2,
   ),
   _setup$if_content = (_scope) => {
     _write$if_content._(_scope),
@@ -106,13 +105,9 @@ const _template_ = "<div><!> a</div><span><!> a</span><p><!> a</p>",
       _showOuter(_scope, !showOuter);
     }),
   ),
-  _showOuter = _$.state(
-    5,
-    (_scope, showOuter) => {
-      _showOuter_effect(_scope), _if(_scope, showOuter ? 0 : 1);
-    },
-    () => _if,
-  );
+  _showOuter = _$.state(5, (_scope, showOuter) => {
+    _showOuter_effect(_scope), _if(_scope, showOuter ? 0 : 1);
+  });
 _$.register("b0", function (_scope) {
   return function (msg) {
     _scope[3].innerHTML += "\n" + msg;