archive-gh-me/marko
1
0
Fork 0
mirror of https://github.com/marko-js/marko.git synced 2026-02-01 16:07:13 +00:00
Code Issues Projects Releases Wiki Activity

fix: hydration in for loops (#2134)

Browse Source 
* fix: hydration in for loops

---------

Co-authored-by: Michael Rawlings <mirawlings@ebay.com>
This commit is contained in:
Luke LaValva 2024-03-04 08:41:18 -08:00 committed by GitHub
parent 9ce5b2606b
commit db1ba3673a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 783 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
.sizes.json
View File

@ -7,9 +7,9 @@
{
"name": "*",
"total": {
"min": 12644,
"gzip": 5391,
"brotli": 4935
"min": 12664,
"gzip": 5394,
"brotli": 4922
}
},
{
@ -21,12 +21,12 @@
},
"runtime": {
"min": 3821,
"gzip": 1808,
"gzip": 1800,
"brotli": 1614
},
"total": {
"min": 4172,
"gzip": 2083,
"gzip": 2075,
"brotli": 1852
}
},
@ -34,17 +34,17 @@
"name": "counter 💧",
"user": {
"min": 204,
"gzip": 180,
"gzip": 182,
"brotli": 157
},
"runtime": {
"min": 2683,
"gzip": 1362,
"gzip": 1370,
"brotli": 1222
},
"total": {
"min": 2887,
"gzip": 1542,
"gzip": 1552,
"brotli": 1379
}
},
@ -52,36 +52,36 @@
"name": "comments",
"user": {
"min": 1182,
"gzip": 698,
"brotli": 639
"gzip": 703,
"brotli": 637
},
"runtime": {
"min": 7343,
"gzip": 3386,
"brotli": 3083
"min": 7363,
"gzip": 3405,
"brotli": 3091
},
"total": {
"min": 8525,
"gzip": 4084,
"brotli": 3722
"min": 8545,
"gzip": 4108,
"brotli": 3728
}
},
{
"name": "comments 💧",
"user": {
"min": 949,
"gzip": 586,
"brotli": 543
"gzip": 588,
"brotli": 544
},
"runtime": {
"min": 7867,
"gzip": 3596,
"brotli": 3269
"min": 7887,
"gzip": 3612,
"brotli": 3284
},
"total": {
"min": 8816,
"gzip": 4182,
"brotli": 3812
"min": 8836,
"gzip": 4200,
"brotli": 3828
}
}
]

5
packages/runtime-tags/src/dom/control-flow.ts
View File

@ -315,7 +315,10 @@ export function inLoopScope(
) {
const loopScopeAccessor = loopNodeAccessor + AccessorChar.LoopScopeArray;
return (scope: Scope, clean?: boolean | 1) => {
const loopScopes = scope[loopScopeAccessor] ?? [];
const loopScopes =
scope[loopScopeAccessor] ??
scope[loopNodeAccessor + AccessorChar.LoopScopeMap]?.values() ??
[];
for (const scope of loopScopes) {
signal(scope, clean);
}

13
packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/__snapshots__/html.expected/template.js
View File

@ -1,18 +1,25 @@
import { attr as _attr, escapeXML as _escapeXML, markResumeNode as _markResumeNode, write as _write, serializedScope as _serializedScope, writeEffect as _writeEffect, writeScope as _writeScope, nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
import { attr as _attr, escapeXML as _escapeXML, markResumeNode as _markResumeNode, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, write as _write, serializedScope as _serializedScope, writeEffect as _writeEffect, writeScope as _writeScope, nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
const _scope0_id = _nextScopeId();
const selected = 0;
const _forScopeIds = [],
_scope1_ = new Map();
let _i2 = 0;
for (const num of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]) {
const _scope1_id = _nextScopeId();
let _i = _i2++;
_forScopeIds.push(_scope1_id);
_write(`<button${_attr("data-selected", selected === num)}${_attr("data-multiple", num % selected === 0)}>${_escapeXML(num)}${_markResumeNode(_scope1_id, "#text/1")}</button>${_markResumeNode(_scope1_id, "#button/0")}`);
_writeEffect(_scope1_id, "packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num");
_writeScope(_scope1_id, {
_writeScope(_scope1_id, (_s => (_scope1_.set(_i, _s), _s))({
"num": num,
"_": _serializedScope(_scope0_id)
});
}));
_maybeFlush();
}
_write(`${_markResumeControlSingleNodeEnd(_scope0_id, "#text/0", _forScopeIds)}`);
_writeScope(_scope0_id, {
"#text/0(": _scope1_.size ? _scope1_ : undefined,
"selected": selected
});
});

195
packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/__snapshots__/resume-sanitized.expected.md Normal file
View File

@ -0,0 +1,195 @@
# Render {}
```html
<button>
1
</button>
<button>
2
</button>
<button>
3
</button>
<button>
4
</button>
<button>
5
</button>
<button>
6
</button>
<button>
7
</button>
<button>
8
</button>
<button>
9
</button>
<button>
10
</button>
<button>
11
</button>
<button>
12
</button>
```
# Render
c => click(c, 2)
```html
<button>
1
</button>
<button
data-multiple=""
data-selected=""
>
2
</button>
<button>
3
</button>
<button
data-multiple=""
>
4
</button>
<button>
5
</button>
<button
data-multiple=""
>
6
</button>
<button>
7
</button>
<button
data-multiple=""
>
8
</button>
<button>
9
</button>
<button
data-multiple=""
>
10
</button>
<button>
11
</button>
<button
data-multiple=""
>
12
</button>
```
# Render
c => click(c, 3)
```html
<button>
1
</button>
<button>
2
</button>
<button
data-multiple=""
data-selected=""
>
3
</button>
<button>
4
</button>
<button>
5
</button>
<button
data-multiple=""
>
6
</button>
<button>
7
</button>
<button>
8
</button>
<button
data-multiple=""
>
9
</button>
<button>
10
</button>
<button>
11
</button>
<button
data-multiple=""
>
12
</button>
```
# Render
c => click(c, 5)
```html
<button>
1
</button>
<button>
2
</button>
<button>
3
</button>
<button>
4
</button>
<button
data-multiple=""
data-selected=""
>
5
</button>
<button>
6
</button>
<button>
7
</button>
<button>
8
</button>
<button>
9
</button>
<button
data-multiple=""
>
10
</button>
<button>
11
</button>
<button>
12
</button>
```

369
packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/__snapshots__/resume.expected.md Normal file
View File

@ -0,0 +1,369 @@
# Render {}
```html
<html>
<head />
<body>
<button>
1
<!--M*1 #text/1-->
</button>
<!--M*1 #button/0-->
<button>
2
<!--M*2 #text/1-->
</button>
<!--M*2 #button/0-->
<button>
3
<!--M*3 #text/1-->
</button>
<!--M*3 #button/0-->
<button>
4
<!--M*4 #text/1-->
</button>
<!--M*4 #button/0-->
<button>
5
<!--M*5 #text/1-->
</button>
<!--M*5 #button/0-->
<button>
6
<!--M*6 #text/1-->
</button>
<!--M*6 #button/0-->
<button>
7
<!--M*7 #text/1-->
</button>
<!--M*7 #button/0-->
<button>
8
<!--M*8 #text/1-->
</button>
<!--M*8 #button/0-->
<button>
9
<!--M*9 #text/1-->
</button>
<!--M*9 #button/0-->
<button>
10
<!--M*10 #text/1-->
</button>
<!--M*10 #button/0-->
<button>
11
<!--M*11 #text/1-->
</button>
<!--M*11 #button/0-->
<button>
12
<!--M*12 #text/1-->
</button>
<!--M*12 #button/0-->
<!--M|0 #text/0 1,2,3,4,5,6,7,8,9,10,11,12-->
<script>
(M$h=[]).push((b,s,h,j,k,m,o,q,u,x,z,A,B,C,D,E)=&gt;(E={0:h={"#text/0(":new Map([[0,j={num:1}],[1,k={num:2}],[2,m={num:3}],[3,o={num:4}],[4,q={num:5}],[5,u={num:6}],[6,x={num:7}],[7,z={num:8}],[8,A={num:9}],[9,B={num:10}],[10,C={num:11}],[11,D={num:12}]]),selected:0},1:j,2:k,3:m,4:o,5:q,6:u,7:x,8:z,9:A,10:B,11:C,12:D},j._=k._=m._=o._=q._=u._=x._=z._=A._=B._=C._=D._=h,E),[1,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",2,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",3,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",4,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",5,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",6,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",7,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",8,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",9,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",10,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",11,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",12,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",])
</script>
</body>
</html>
```
# Mutations
```
```
# Render
c => click(c, 2)
```html
<html>
<head />
<body>
<button>
1
<!--M*1 #text/1-->
</button>
<!--M*1 #button/0-->
<button
data-multiple=""
data-selected=""
>
2
<!--M*2 #text/1-->
</button>
<!--M*2 #button/0-->
<button>
3
<!--M*3 #text/1-->
</button>
<!--M*3 #button/0-->
<button
data-multiple=""
>
4
<!--M*4 #text/1-->
</button>
<!--M*4 #button/0-->
<button>
5
<!--M*5 #text/1-->
</button>
<!--M*5 #button/0-->
<button
data-multiple=""
>
6
<!--M*6 #text/1-->
</button>
<!--M*6 #button/0-->
<button>
7
<!--M*7 #text/1-->
</button>
<!--M*7 #button/0-->
<button
data-multiple=""
>
8
<!--M*8 #text/1-->
</button>
<!--M*8 #button/0-->
<button>
9
<!--M*9 #text/1-->
</button>
<!--M*9 #button/0-->
<button
data-multiple=""
>
10
<!--M*10 #text/1-->
</button>
<!--M*10 #button/0-->
<button>
11
<!--M*11 #text/1-->
</button>
<!--M*11 #button/0-->
<button
data-multiple=""
>
12
<!--M*12 #text/1-->
</button>
<!--M*12 #button/0-->
<!--M|0 #text/0 1,2,3,4,5,6,7,8,9,10,11,12-->
<script>
(M$h=[]).push((b,s,h,j,k,m,o,q,u,x,z,A,B,C,D,E)=&gt;(E={0:h={"#text/0(":new Map([[0,j={num:1}],[1,k={num:2}],[2,m={num:3}],[3,o={num:4}],[4,q={num:5}],[5,u={num:6}],[6,x={num:7}],[7,z={num:8}],[8,A={num:9}],[9,B={num:10}],[10,C={num:11}],[11,D={num:12}]]),selected:0},1:j,2:k,3:m,4:o,5:q,6:u,7:x,8:z,9:A,10:B,11:C,12:D},j._=k._=m._=o._=q._=u._=x._=z._=A._=B._=C._=D._=h,E),[1,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",2,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",3,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",4,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",5,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",6,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",7,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",8,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",9,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",10,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",11,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",12,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",])
</script>
</body>
</html>
```
# Mutations
```
#document/html0/body1/button2: attr(data-selected) null => ""
#document/html0/body1/button2: attr(data-multiple) null => ""
#document/html0/body1/button6: attr(data-multiple) null => ""
#document/html0/body1/button10: attr(data-multiple) null => ""
#document/html0/body1/button14: attr(data-multiple) null => ""
#document/html0/body1/button18: attr(data-multiple) null => ""
#document/html0/body1/button22: attr(data-multiple) null => ""
```
# Render
c => click(c, 3)
```html
<html>
<head />
<body>
<button>
1
<!--M*1 #text/1-->
</button>
<!--M*1 #button/0-->
<button>
2
<!--M*2 #text/1-->
</button>
<!--M*2 #button/0-->
<button
data-multiple=""
data-selected=""
>
3
<!--M*3 #text/1-->
</button>
<!--M*3 #button/0-->
<button>
4
<!--M*4 #text/1-->
</button>
<!--M*4 #button/0-->
<button>
5
<!--M*5 #text/1-->
</button>
<!--M*5 #button/0-->
<button
data-multiple=""
>
6
<!--M*6 #text/1-->
</button>
<!--M*6 #button/0-->
<button>
7
<!--M*7 #text/1-->
</button>
<!--M*7 #button/0-->
<button>
8
<!--M*8 #text/1-->
</button>
<!--M*8 #button/0-->
<button
data-multiple=""
>
9
<!--M*9 #text/1-->
</button>
<!--M*9 #button/0-->
<button>
10
<!--M*10 #text/1-->
</button>
<!--M*10 #button/0-->
<button>
11
<!--M*11 #text/1-->
</button>
<!--M*11 #button/0-->
<button
data-multiple=""
>
12
<!--M*12 #text/1-->
</button>
<!--M*12 #button/0-->
<!--M|0 #text/0 1,2,3,4,5,6,7,8,9,10,11,12-->
<script>
(M$h=[]).push((b,s,h,j,k,m,o,q,u,x,z,A,B,C,D,E)=&gt;(E={0:h={"#text/0(":new Map([[0,j={num:1}],[1,k={num:2}],[2,m={num:3}],[3,o={num:4}],[4,q={num:5}],[5,u={num:6}],[6,x={num:7}],[7,z={num:8}],[8,A={num:9}],[9,B={num:10}],[10,C={num:11}],[11,D={num:12}]]),selected:0},1:j,2:k,3:m,4:o,5:q,6:u,7:x,8:z,9:A,10:B,11:C,12:D},j._=k._=m._=o._=q._=u._=x._=z._=A._=B._=C._=D._=h,E),[1,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",2,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",3,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",4,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",5,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",6,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",7,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",8,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",9,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",10,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",11,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",12,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",])
</script>
</body>
</html>
```
# Mutations
```
#document/html0/body1/button2: attr(data-selected) "" => null
#document/html0/body1/button2: attr(data-multiple) "" => null
#document/html0/body1/button4: attr(data-selected) null => ""
#document/html0/body1/button4: attr(data-multiple) null => ""
#document/html0/body1/button6: attr(data-multiple) "" => null
#document/html0/body1/button10: attr(data-multiple) "" => ""
#document/html0/body1/button14: attr(data-multiple) "" => null
#document/html0/body1/button16: attr(data-multiple) null => ""
#document/html0/body1/button18: attr(data-multiple) "" => null
#document/html0/body1/button22: attr(data-multiple) "" => ""
```
# Render
c => click(c, 5)
```html
<html>
<head />
<body>
<button>
1
<!--M*1 #text/1-->
</button>
<!--M*1 #button/0-->
<button>
2
<!--M*2 #text/1-->
</button>
<!--M*2 #button/0-->
<button>
3
<!--M*3 #text/1-->
</button>
<!--M*3 #button/0-->
<button>
4
<!--M*4 #text/1-->
</button>
<!--M*4 #button/0-->
<button
data-multiple=""
data-selected=""
>
5
<!--M*5 #text/1-->
</button>
<!--M*5 #button/0-->
<button>
6
<!--M*6 #text/1-->
</button>
<!--M*6 #button/0-->
<button>
7
<!--M*7 #text/1-->
</button>
<!--M*7 #button/0-->
<button>
8
<!--M*8 #text/1-->
</button>
<!--M*8 #button/0-->
<button>
9
<!--M*9 #text/1-->
</button>
<!--M*9 #button/0-->
<button
data-multiple=""
>
10
<!--M*10 #text/1-->
</button>
<!--M*10 #button/0-->
<button>
11
<!--M*11 #text/1-->
</button>
<!--M*11 #button/0-->
<button>
12
<!--M*12 #text/1-->
</button>
<!--M*12 #button/0-->
<!--M|0 #text/0 1,2,3,4,5,6,7,8,9,10,11,12-->
<script>
(M$h=[]).push((b,s,h,j,k,m,o,q,u,x,z,A,B,C,D,E)=&gt;(E={0:h={"#text/0(":new Map([[0,j={num:1}],[1,k={num:2}],[2,m={num:3}],[3,o={num:4}],[4,q={num:5}],[5,u={num:6}],[6,x={num:7}],[7,z={num:8}],[8,A={num:9}],[9,B={num:10}],[10,C={num:11}],[11,D={num:12}]]),selected:0},1:j,2:k,3:m,4:o,5:q,6:u,7:x,8:z,9:A,10:B,11:C,12:D},j._=k._=m._=o._=q._=u._=x._=z._=A._=B._=C._=D._=h,E),[1,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",2,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",3,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",4,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",5,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",6,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",7,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",8,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",9,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",10,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",11,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",12,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",])
</script>
</body>
</html>
```
# Mutations
```
#document/html0/body1/button4: attr(data-selected) "" => null
#document/html0/body1/button4: attr(data-multiple) "" => null
#document/html0/body1/button8: attr(data-selected) null => ""
#document/html0/body1/button8: attr(data-multiple) null => ""
#document/html0/body1/button10: attr(data-multiple) "" => null
#document/html0/body1/button16: attr(data-multiple) "" => null
#document/html0/body1/button18: attr(data-multiple) null => ""
#document/html0/body1/button22: attr(data-multiple) "" => null
```

39
packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/__snapshots__/ssr-sanitized.expected.md Normal file
View File

@ -0,0 +1,39 @@
# Render "End"
```html
<button>
1
</button>
<button>
2
</button>
<button>
3
</button>
<button>
4
</button>
<button>
5
</button>
<button>
6
</button>
<button>
7
</button>
<button>
8
</button>
<button>
9
</button>
<button>
10
</button>
<button>
11
</button>
<button>
12
</button>
```

134
packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/__snapshots__/ssr.expected.md Normal file
View File

@ -0,0 +1,134 @@
# Write
<button>1<!M*1 #text/1></button><!M*1 #button/0><button>2<!M*2 #text/1></button><!M*2 #button/0><button>3<!M*3 #text/1></button><!M*3 #button/0><button>4<!M*4 #text/1></button><!M*4 #button/0><button>5<!M*5 #text/1></button><!M*5 #button/0><button>6<!M*6 #text/1></button><!M*6 #button/0><button>7<!M*7 #text/1></button><!M*7 #button/0><button>8<!M*8 #text/1></button><!M*8 #button/0><button>9<!M*9 #text/1></button><!M*9 #button/0><button>10<!M*10 #text/1></button><!M*10 #button/0><button>11<!M*11 #text/1></button><!M*11 #button/0><button>12<!M*12 #text/1></button><!M*12 #button/0><!M|0 #text/0 1,2,3,4,5,6,7,8,9,10,11,12><script>(M$h=[]).push((b,s,h,j,k,m,o,q,u,x,z,A,B,C,D,E)=>(E={0:h={"#text/0(":new Map([[0,j={num:1}],[1,k={num:2}],[2,m={num:3}],[3,o={num:4}],[4,q={num:5}],[5,u={num:6}],[6,x={num:7}],[7,z={num:8}],[8,A={num:9}],[9,B={num:10}],[10,C={num:11}],[11,D={num:12}]]),selected:0},1:j,2:k,3:m,4:o,5:q,6:u,7:x,8:z,9:A,10:B,11:C,12:D},j._=k._=m._=o._=q._=u._=x._=z._=A._=B._=C._=D._=h,E),[1,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",2,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",3,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",4,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",5,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",6,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",7,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",8,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",9,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",10,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",11,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",12,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",])</script>
# Render "End"
```html
<html>
<head />
<body>
<button>
1
<!--M*1 #text/1-->
</button>
<!--M*1 #button/0-->
<button>
2
<!--M*2 #text/1-->
</button>
<!--M*2 #button/0-->
<button>
3
<!--M*3 #text/1-->
</button>
<!--M*3 #button/0-->
<button>
4
<!--M*4 #text/1-->
</button>
<!--M*4 #button/0-->
<button>
5
<!--M*5 #text/1-->
</button>
<!--M*5 #button/0-->
<button>
6
<!--M*6 #text/1-->
</button>
<!--M*6 #button/0-->
<button>
7
<!--M*7 #text/1-->
</button>
<!--M*7 #button/0-->
<button>
8
<!--M*8 #text/1-->
</button>
<!--M*8 #button/0-->
<button>
9
<!--M*9 #text/1-->
</button>
<!--M*9 #button/0-->
<button>
10
<!--M*10 #text/1-->
</button>
<!--M*10 #button/0-->
<button>
11
<!--M*11 #text/1-->
</button>
<!--M*11 #button/0-->
<button>
12
<!--M*12 #text/1-->
</button>
<!--M*12 #button/0-->
<!--M|0 #text/0 1,2,3,4,5,6,7,8,9,10,11,12-->
<script>
(M$h=[]).push((b,s,h,j,k,m,o,q,u,x,z,A,B,C,D,E)=&gt;(E={0:h={"#text/0(":new Map([[0,j={num:1}],[1,k={num:2}],[2,m={num:3}],[3,o={num:4}],[4,q={num:5}],[5,u={num:6}],[6,x={num:7}],[7,z={num:8}],[8,A={num:9}],[9,B={num:10}],[10,C={num:11}],[11,D={num:12}]]),selected:0},1:j,2:k,3:m,4:o,5:q,6:u,7:x,8:z,9:A,10:B,11:C,12:D},j._=k._=m._=o._=q._=u._=x._=z._=A._=B._=C._=D._=h,E),[1,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",2,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",3,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",4,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",5,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",6,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",7,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",8,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",9,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",10,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",11,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",12,"packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num",])
</script>
</body>
</html>
```
# Mutations
```
inserted #document/html0
inserted #document/html0/head0
inserted #document/html0/body1
inserted #document/html0/body1/button0
inserted #document/html0/body1/button0/#text0
inserted #document/html0/body1/button0/#comment1
inserted #document/html0/body1/#comment1
inserted #document/html0/body1/button2
inserted #document/html0/body1/button2/#text0
inserted #document/html0/body1/button2/#comment1
inserted #document/html0/body1/#comment3
inserted #document/html0/body1/button4
inserted #document/html0/body1/button4/#text0
inserted #document/html0/body1/button4/#comment1
inserted #document/html0/body1/#comment5
inserted #document/html0/body1/button6
inserted #document/html0/body1/button6/#text0
inserted #document/html0/body1/button6/#comment1
inserted #document/html0/body1/#comment7
inserted #document/html0/body1/button8
inserted #document/html0/body1/button8/#text0
inserted #document/html0/body1/button8/#comment1
inserted #document/html0/body1/#comment9
inserted #document/html0/body1/button10
inserted #document/html0/body1/button10/#text0
inserted #document/html0/body1/button10/#comment1
inserted #document/html0/body1/#comment11
inserted #document/html0/body1/button12
inserted #document/html0/body1/button12/#text0
inserted #document/html0/body1/button12/#comment1
inserted #document/html0/body1/#comment13
inserted #document/html0/body1/button14
inserted #document/html0/body1/button14/#text0
inserted #document/html0/body1/button14/#comment1
inserted #document/html0/body1/#comment15
inserted #document/html0/body1/button16
inserted #document/html0/body1/button16/#text0
inserted #document/html0/body1/button16/#comment1
inserted #document/html0/body1/#comment17
inserted #document/html0/body1/button18
inserted #document/html0/body1/button18/#text0
inserted #document/html0/body1/button18/#comment1
inserted #document/html0/body1/#comment19
inserted #document/html0/body1/button20
inserted #document/html0/body1/button20/#text0
inserted #document/html0/body1/button20/#comment1
inserted #document/html0/body1/#comment21
inserted #document/html0/body1/button22
inserted #document/html0/body1/button22/#text0
inserted #document/html0/body1/button22/#comment1
inserted #document/html0/body1/#comment23
inserted #document/html0/body1/#comment24
inserted #document/html0/body1/script25
inserted #document/html0/body1/script25/#text0
```

2
packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/test.ts
View File

@ -12,5 +12,3 @@ function click(container: Element, number: number) {
const button = buttons.find((b) => b.textContent === "" + number)!;
button.click();
}
export const skip_ssr = true;

14
packages/translator-tags/src/core/for.ts
View File

@ -5,7 +5,7 @@ import {
getTagDef,
} from "@marko/babel-utils";
import { types as t } from "@marko/compiler";
import { WalkCode } from "@marko/runtime-tags/common/types";
import { AccessorChar, WalkCode } from "@marko/runtime-tags/common/types";
import { isOutputHTML } from "../util/marko-config";
import analyzeAttributeTags from "../util/nested-attribute-tags";
import { mergeReferences } from "../util/references";
@ -282,7 +282,7 @@ const translateHTML = {
let byParams: t.Expression[];
let keyExpression: t.Expression | undefined = t.identifier("NOO");
if (isStateful) {
if (isStateful || bodySection.closures) {
setRegisterScopeBuilder(tag, (scope: t.Expression) => {
const tempScopeIdentifier =
currentProgramPath.scope.generateUidIdentifier("s");
@ -363,7 +363,7 @@ const translateHTML = {
valParam = tempValParam;
}
if (indexParam || isStateful) {
if (indexParam || isStateful || bodySection.closures) {
indexParam ??= currentProgramPath.scope.generateUidIdentifier("i");
const indexName = tag.scope.generateUidIdentifierBasedOnNode(
indexParam,
@ -421,7 +421,7 @@ const translateHTML = {
const stepName = tag.scope.generateUidIdentifier("step");
const fromName = tag.scope.generateUidIdentifier("from");
if (indexParam || isStateful) {
if (indexParam || isStateful || bodySection.closures) {
indexParam ??= currentProgramPath.scope.generateUidIdentifier("i");
keyExpression = indexParam as t.Identifier;
block.body.unshift(
@ -466,7 +466,7 @@ const translateHTML = {
);
}
if (isStateful) {
if (isStateful || bodySection.closures) {
const forScopeIdsIdentifier =
tag.scope.generateUidIdentifier("forScopeIds");
const forScopesIdentifier = getScopeIdentifier(bodySection);
@ -511,7 +511,9 @@ const translateHTML = {
)}`;
}
getSerializedScopeProperties(tagSection).set(
t.stringLiteral(getScopeAccessorLiteral(reserve!).value + "("),
t.stringLiteral(
getScopeAccessorLiteral(reserve!).value + AccessorChar.LoopScopeMap,
),
t.conditionalExpression(
t.memberExpression(forScopesIdentifier, t.identifier("size")),
forScopesIdentifier,