fix: issue hydrating non stateful for loop closure

Author: DylanPiercey

.changeset/honest-apes-shout.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Fix issue with hydrating a closure within a non stateful for loop.

.sizes.json

@@ -7,8 +7,8 @@
     {
       "name": "*",
       "total": {
-        "min": 18979,
-        "brotli": 7217
+        "min": 18988,
+        "brotli": 7245
       }
     },
     {
@@ -48,12 +48,12 @@
         "brotli": 461
       },
       "runtime": {
-        "min": 6997,
-        "brotli": 3003
+        "min": 7006,
+        "brotli": 3001
       },
       "total": {
-        "min": 7916,
-        "brotli": 3464
+        "min": 7925,
+        "brotli": 3462
       }
     },
     {

.sizes/dom.js

@@ -1,4 +1,4 @@
-// size: 18979 (min) 7217 (brotli)
+// size: 18988 (min) 7245 (brotli)
 var empty = [],
   rest = Symbol();
 function attrTag(attrs2) {
@@ -1027,10 +1027,11 @@ function loopClosure(valueAccessor, ownerLoopNodeAccessor, fn) {
     loopScopeAccessor = "l" + ownerLoopNodeAccessor,
     loopScopeMapAccessor = "m" + ownerLoopNodeAccessor,
     ownerSignal = (ownerScope) => {
-      let scopes =
-          ownerScope[loopScopeAccessor] ||
-          ownerScope[loopScopeMapAccessor]?.values() ||
-          [],
+      let scopes = (ownerScope[loopScopeAccessor] ||= ownerScope[
+          loopScopeMapAccessor
+        ]
+          ? [...ownerScope[loopScopeMapAccessor].values()]
+          : []),
         [firstScope] = scopes;
       firstScope &&
         queueRender(

packages/runtime-tags/src/__tests__/fixtures/for-tag-static-value-with-closure/__snapshots__/.name-cache.json

@@ -0,0 +1,11 @@
+{
+  "vars": {
+    "props": {
+      "$_$": "o",
+      "$init": "t",
+      "$$count$for$content": "a",
+      "$$count_effect": "m",
+      "$$count": "r"
+    }
+  }
+}

packages/runtime-tags/src/__tests__/fixtures/for-tag-static-value-with-closure/__snapshots__/csr-sanitized.expected.md

@@ -0,0 +1,43 @@
+# Render
+```html
+0-01-02-03-0
+<button>
+  0
+</button>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+0-11-12-13-1
+<button>
+  1
+</button>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+0-21-22-23-2
+<button>
+  2
+</button>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+0-31-32-33-3
+<button>
+  3
+</button>
+```

packages/runtime-tags/src/__tests__/fixtures/for-tag-static-value-with-closure/__snapshots__/csr.expected.md

@@ -0,0 +1,76 @@
+# Render
+```html
+<!---->
+0-01-02-03-0
+<button>
+  0
+</button>
+```
+
+# Mutations
+```
+INSERT #comment, #text0, #text1, #text2, #text3, #text4, #text5, #text6, #text7, #text8, #text9, #text10, #text11, button
+```
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<!---->
+0-11-12-13-1
+<button>
+  1
+</button>
+```
+
+# Mutations
+```
+UPDATE button/#text "0" => "1"
+UPDATE #text2 "0" => "1"
+UPDATE #text5 "0" => "1"
+UPDATE #text8 "0" => "1"
+UPDATE #text11 "0" => "1"
+```
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<!---->
+0-21-22-23-2
+<button>
+  2
+</button>
+```
+
+# Mutations
+```
+UPDATE button/#text "1" => "2"
+UPDATE #text2 "1" => "2"
+UPDATE #text5 "1" => "2"
+UPDATE #text8 "1" => "2"
+UPDATE #text11 "1" => "2"
+```
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<!---->
+0-31-32-33-3
+<button>
+  3
+</button>
+```
+
+# Mutations
+```
+UPDATE button/#text "2" => "3"
+UPDATE #text2 "2" => "3"
+UPDATE #text5 "2" => "3"
+UPDATE #text8 "2" => "3"
+UPDATE #text11 "2" => "3"
+```

packages/runtime-tags/src/__tests__/fixtures/for-tag-static-value-with-closure/__snapshots__/dom.expected/template.hydrate.js

@@ -0,0 +1,15 @@
+// size: 176 (min) 123 (brotli)
+const $count$for$content = _$.loopClosure(3, 0, ($scope, count) =>
+    _$.data($scope[1], count),
+  ),
+  $count_effect = _$.effect("a0", ($scope, { 3: count }) =>
+    _$.on($scope[1], "click", function () {
+      $count($scope, count + 1);
+    }),
+  ),
+  $count = _$.state(3, ($scope, count) => {
+    _$.data($scope[2], count),
+      $count$for$content($scope),
+      $count_effect($scope);
+  });
+init();

packages/runtime-tags/src/__tests__/fixtures/for-tag-static-value-with-closure/__snapshots__/dom.expected/template.js

@@ -0,0 +1,23 @@
+export const $template = "<!><!><button> </button>";
+export const $walks = /* replace, over(1), get, next(1), get, out(1) */"D%b D l";
+import * as _$ from "@marko/runtime-tags/debug/dom";
+const $index$for$content = /* @__PURE__ */_$.value("index", ($scope, index) => _$.data($scope["#text/0"], index));
+const $count$for$content = /* @__PURE__ */_$.loopClosure("count", "#text/0", ($scope, count) => _$.data($scope["#text/1"], count));
+const $params2$for$content = /* @__PURE__ */_$.value("$params2", ($scope, $params2) => $index$for$content($scope, $params2[0]));
+const $for_content = /* @__PURE__ */_$.createRenderer("<!>-<!>", /* replace, over(2), replace */"%c%", 0, $params2$for$content, $count$for$content);
+const $count_effect = _$.effect("__tests__/template.marko_0_count", ($scope, {
+  count
+}) => _$.on($scope["#button/1"], "click", function () {
+  $count($scope, count + 1), count;
+}));
+const $count = /* @__PURE__ */_$.state("count/3", ($scope, count) => {
+  _$.data($scope["#text/2"], count);
+  $count$for$content($scope);
+  $count_effect($scope);
+});
+const $for = /* @__PURE__ */_$.loopTo("#text/0", $for_content);
+export function $setup($scope) {
+  $count($scope, 0);
+  $for($scope, [3, 0, 1]);
+}
+export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", $template, $walks, $setup);

packages/runtime-tags/src/__tests__/fixtures/for-tag-static-value-with-closure/__snapshots__/html.expected/template.js

@@ -0,0 +1,20 @@
+import * as _$ from "@marko/runtime-tags/debug/html";
+export default _$.createTemplate("__tests__/template.marko", input => {
+  const $scope0_id = _$.nextScopeId();
+  let count = 0;
+  _$.resumeForTo(3, 0, 1, index => {
+    const $scope1_id = _$.nextScopeId();
+    _$.write(`${_$.escapeXML(index)}-<!>${_$.escapeXML(count)}${_$.markResumeNode($scope1_id, "#text/1")}`);
+    _$.writeScope($scope1_id, {
+      _: _$.ensureScopeWithId($scope0_id)
+    }, "__tests__/template.marko", "3:2");
+  }, 0, $scope0_id, "#text/0", /* state: count */1, 0);
+  _$.write(`<button>${_$.escapeXML(count)}${_$.markResumeNode($scope0_id, "#text/2")}</button>${_$.markResumeNode($scope0_id, "#button/1")}`);
+  _$.writeEffect($scope0_id, "__tests__/template.marko_0_count");
+  _$.writeScope($scope0_id, {
+    count
+  }, "__tests__/template.marko", 0, {
+    count: "1:6"
+  });
+  _$.resumeClosestBranch($scope0_id);
+});

packages/runtime-tags/src/__tests__/fixtures/for-tag-static-value-with-closure/__snapshots__/resume-sanitized.expected.md

@@ -0,0 +1,43 @@
+# Render
+```html
+0-01-02-03-0
+<button>
+  0
+</button>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+0-11-12-13-1
+<button>
+  1
+</button>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+0-21-22-23-2
+<button>
+  2
+</button>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+0-31-32-33-3
+<button>
+  3
+</button>
+```