fix: if/dynamic tag marker serialization issue

This commit is contained in:
dpiercey 2025-04-14 10:41:56 -07:00 committed by Dylan Piercey
parent 639292f746
commit 4cfdcb5cca
77 changed files with 571 additions and 209 deletions

View File

@ -0,0 +1,5 @@
---
"@marko/runtime-tags": patch
---
Fix marker serialization for if and dynamic tag in some optimized cases.

View File

@ -12,7 +12,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "__tests__/template.marko", "2:2");
return 0;
}
}, $scope0_id, "#text/0", 1, 1);
}, $scope0_id, "#text/0");
_$.writeScope($scope0_id, {}, "__tests__/template.marko", 0);
_$.resumeClosestBranch($scope0_id);
});

View File

@ -13,7 +13,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "__tests__/template.marko", "5:2");
return 0;
}
}, $scope0_id, "#text/2", 1, 1);
}, $scope0_id, "#text/2");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_show");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_count");
_$.writeScope($scope0_id, {

View File

@ -13,7 +13,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "__tests__/template.marko", "5:2");
return 0;
}
}, $scope0_id, "#text/2", 1, 1);
}, $scope0_id, "#text/2");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_show");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_count");
_$.writeScope($scope0_id, {

View File

@ -12,6 +12,6 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "__tests__/template.marko", "3:2");
return 0;
}
}, $scope0_id, "#text/0");
}, $scope0_id, "#text/0", 1, 0);
_$.resumeClosestBranch($scope0_id);
});

View File

@ -15,7 +15,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "__tests__/template.marko", "8:2");
return 0;
}
}, $scope0_id, "#text/1", 1, 1);
}, $scope0_id, "#text/1");
_$.writeEffect($scope0_id, "__tests__/template.marko_0");
_$.writeScope($scope0_id, {
message_text: message?.text

View File

@ -13,7 +13,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
"ClosureSignalIndex:count": 0
}, "__tests__/template.marko", "4:4"));
_$.resumeClosestBranch($scope1_id);
}, $scope0_id));
}, $scope0_id), 0, 0);
_$.writeScope($scope0_id, {
count,
"ClosureScopes:count": $count_closures

View File

@ -20,7 +20,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "__tests__/template.marko", "8:4");
return 1;
}
}, $scope0_id, "#text/0", 1, 1);
}, $scope0_id, "#text/0");
_$.write("</div>");
_$.writeScope($scope0_id, {
clickCount

View File

@ -10,7 +10,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
_$.writeScope($scope1_id, {}, "__tests__/template.marko", "3:4");
return 0;
}
}, $scope0_id, "#text/0", 1, 1);
}, $scope0_id, "#text/0");
_$.write(`<button>Toggle</button>${_$.markResumeNode($scope0_id, "#button/1")}</div>`);
_$.writeEffect($scope0_id, "__tests__/template.marko_0_show");
_$.writeScope($scope0_id, {

View File

@ -13,7 +13,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "__tests__/template.marko", "4:2");
return 0;
}
}, $scope0_id, "#text/1", 1, 1);
}, $scope0_id, "#text/1");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_show");
_$.writeScope($scope0_id, {
show,

View File

@ -37,7 +37,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
_$.writeScope($scope3_id, {}, "__tests__/template.marko", "17:10");
return 0;
}
}, $scope2_id, "#text/1", 1, 1);
}, $scope2_id, "#text/1");
_$.write("</div>");
_$.writeSubscribe($showInner_closures, _$.writeScope($scope2_id, {
_: _$.ensureScopeWithId($scope1_id),
@ -45,14 +45,14 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "__tests__/template.marko", "14:6"));
return 0;
}
}, $scope1_id, "#text/1", 1, 1);
}, $scope1_id, "#text/1");
_$.write("</div>");
_$.writeScope($scope1_id, {
_: _$.ensureScopeWithId($scope0_id)
}, "__tests__/template.marko", "11:2");
return 0;
}
}, $scope0_id, "#text/4", 1, 1);
}, $scope0_id, "#text/4");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_showInner");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_showMiddle");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_showOuter");

View File

@ -14,7 +14,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "__tests__/template.marko", "6:2");
return 0;
}
}, $scope0_id, "#text/2", 1, 1);
}, $scope0_id, "#text/2");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_show");
_$.writeScope($scope0_id, {
show

View File

@ -18,7 +18,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "__tests__/template.marko", "6:2");
return 0;
}
}, $scope0_id, "#text/2", 1, 1);
}, $scope0_id, "#text/2");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_show");
_$.writeScope($scope0_id, {
show

View File

@ -37,7 +37,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
_$.writeScope($scope3_id, {}, "__tests__/template.marko", "17:10");
return 0;
}
}, $scope2_id, "#text/1", 1, 1);
}, $scope2_id, "#text/1");
_$.write("</div>");
_$.writeSubscribe($showInner_closures, _$.writeScope($scope2_id, {
_: _$.ensureScopeWithId($scope1_id),
@ -45,14 +45,14 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "__tests__/template.marko", "14:6"));
return 0;
}
}, $scope1_id, "#text/1", 1, 1);
}, $scope1_id, "#text/1");
_$.write("</div>");
_$.writeScope($scope1_id, {
_: _$.ensureScopeWithId($scope0_id)
}, "__tests__/template.marko", "11:2");
return 0;
}
}, $scope0_id, "#text/4", 1, 1);
}, $scope0_id, "#text/4");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_showInner");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_showMiddle");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_showOuter");

View File

@ -14,7 +14,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "__tests__/template.marko", "6:2");
return 0;
}
}, $scope0_id, "#text/2", 1, 1);
}, $scope0_id, "#text/2");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_show");
_$.writeScope($scope0_id, {
show

View File

@ -18,7 +18,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "__tests__/template.marko", "6:2");
return 0;
}
}, $scope0_id, "#text/2", 1, 1);
}, $scope0_id, "#text/2");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_show");
_$.writeScope($scope0_id, {
show

View File

@ -19,7 +19,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "#option/2", $scope1_id, "option")}>C</option>${_$.markResumeNode($scope1_id, "#option/2")}`);
_$.writeEffect($scope1_id, "__tests__/template.marko_1");
_$.writeScope($scope1_id, {}, "__tests__/template.marko", "3:4");
}, $scope0_id), 0, 1);
}, $scope0_id));
_$.write(`<span>${_$.escapeXML(value)}${_$.markResumeNode($scope0_id, "#text/1")}</span>`);
_$.writeScope($scope0_id, {
tag

View File

@ -4,7 +4,7 @@ export default _$.createTemplate("__tests__/tags/custom-tag.marko", input => {
let x = 1;
let y = 10;
_$.write(`<button class=inc>${_$.escapeXML(x)}${_$.markResumeNode($scope0_id, "#text/1")},<!>${_$.escapeXML(y)}${_$.markResumeNode($scope0_id, "#text/2")}</button>${_$.markResumeNode($scope0_id, "#button/0")}`);
_$.dynamicTag($scope0_id, "#text/3", input.content, [x, y], 0, 1, 1);
_$.dynamicTag($scope0_id, "#text/3", input.content, [x, y], 0, 1);
_$.writeEffect($scope0_id, "__tests__/tags/custom-tag.marko_0_x_y");
_$.writeScope($scope0_id, {
input_content: input.content,

View File

@ -6,7 +6,7 @@ export default _$.createTemplate("__tests__/tags/custom-tag.marko", input => {
_$.dynamicTag($scope0_id, "#text/2", input.content, {
count: x,
name: input.name
}, 0, 0, 1);
});
_$.writeEffect($scope0_id, "__tests__/tags/custom-tag.marko_0_x");
_$.writeScope($scope0_id, {
input_content: input.content,

View File

@ -3,7 +3,7 @@ export default _$.createTemplate("__tests__/tags/custom-tag.marko", input => {
const $scope0_id = _$.nextScopeId();
let x = 1;
_$.write(`<button class=inc>${_$.escapeXML(x)}${_$.markResumeNode($scope0_id, "#text/1")}</button>${_$.markResumeNode($scope0_id, "#button/0")}`);
_$.dynamicTag($scope0_id, "#text/2", input.content, [x], 0, 1, 1);
_$.dynamicTag($scope0_id, "#text/2", input.content, [x], 0, 1);
_$.writeEffect($scope0_id, "__tests__/tags/custom-tag.marko_0_x");
_$.writeScope($scope0_id, {
input_content: input.content,

View File

@ -9,7 +9,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
_$.writeScope($scope1_id, {}, "__tests__/template.marko", "2:2");
}, $scope0_id)
};
_$.dynamicTag($scope0_id, "#text/0", MyTag, [1, "Hello", x], 0, 1, 1);
_$.dynamicTag($scope0_id, "#text/0", MyTag, [1, "Hello", x], 0, 1);
_$.write(`<button>${_$.escapeXML(x)}${_$.markResumeNode($scope0_id, "#text/2")}</button>${_$.markResumeNode($scope0_id, "#button/1")}`);
_$.writeEffect($scope0_id, "__tests__/template.marko_0_x");
_$.writeScope($scope0_id, {

View File

@ -13,7 +13,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
};
_$.dynamicTag($scope0_id, "#text/0", MyTag, {
number: x
}, 0, 0, 1);
});
_$.write(`<button>${_$.escapeXML(x)}${_$.markResumeNode($scope0_id, "#text/2")}</button>${_$.markResumeNode($scope0_id, "#button/1")}`);
_$.writeEffect($scope0_id, "__tests__/template.marko_0_x");
_$.writeScope($scope0_id, {

View File

@ -14,7 +14,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
_$.resumeClosestBranch($scope1_id);
})
};
_$.dynamicTag($scope0_id, "#text/0", MyTag, {});
_$.dynamicTag($scope0_id, "#text/0", MyTag, {}, 0, 0, 0);
_$.write(`<button>${_$.escapeXML(x)}${_$.markResumeNode($scope0_id, "#text/2")}</button>${_$.markResumeNode($scope0_id, "#button/1")}`);
_$.writeEffect($scope0_id, "__tests__/template.marko_0_x");
_$.writeScope($scope0_id, {

View File

@ -19,5 +19,5 @@ export default _$.createTemplate("__tests__/template.marko", input => {
};
_$.dynamicTag($scope0_id, "#text/0", MyTag, {
name: "Ryan"
});
}, 0, 0, 0);
});

View File

@ -10,7 +10,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
_$.writeScope($scope1_id, {}, "__tests__/template.marko", "3:4");
return 0;
}
}, $scope0_id, "#text/0", 1, 1);
}, $scope0_id, "#text/0");
_$.resumeSingleNodeConditional(() => {
if (!show) {
const $scope2_id = _$.nextScopeId();
@ -18,7 +18,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
_$.writeScope($scope2_id, {}, "__tests__/template.marko", "7:4");
return 0;
}
}, $scope0_id, "#text/1", 1, 1);
}, $scope0_id, "#text/1");
_$.write(`<button>Toggle</button>${_$.markResumeNode($scope0_id, "#button/2")}</div>`);
_$.writeEffect($scope0_id, "__tests__/template.marko_0_show");
_$.writeScope($scope0_id, {

View File

@ -11,14 +11,14 @@
>
1
</span>
<!--M_|1 #text/1 3-->
<!--M_|1 #text/1 2-->
<button>
Toggle
</button>
<!--M_*1 #button/2-->
</div>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b=[{x:1},{"ConditionalRenderer:#text/1":0,"ConditionalScope:#text/1":_.a={},show:!1},1,_.a]),"__tests__/template.marko_0_show",1];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b=[{x:1},{"ConditionalRenderer:#text/1":0,"ConditionalScope:#text/1":_.a={},show:!1},_.a]),"__tests__/template.marko_0_show",1];M._.w()
</script>
</body>
</html>
@ -37,14 +37,14 @@ container.querySelector("button").click();
<span>
1
</span>
<!--M_|1 #text/1 3-->
<!--M_|1 #text/1 2-->
<button>
Toggle
</button>
<!--M_*1 #button/2-->
</div>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b=[{x:1},{"ConditionalRenderer:#text/1":0,"ConditionalScope:#text/1":_.a={},show:!1},1,_.a]),"__tests__/template.marko_0_show",1];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b=[{x:1},{"ConditionalRenderer:#text/1":0,"ConditionalScope:#text/1":_.a={},show:!1},_.a]),"__tests__/template.marko_0_show",1];M._.w()
</script>
</body>
</html>
@ -81,7 +81,7 @@ container.querySelector("button").click();
<!--M_*1 #button/2-->
</div>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b=[{x:1},{"ConditionalRenderer:#text/1":0,"ConditionalScope:#text/1":_.a={},show:!1},1,_.a]),"__tests__/template.marko_0_show",1];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b=[{x:1},{"ConditionalRenderer:#text/1":0,"ConditionalScope:#text/1":_.a={},show:!1},_.a]),"__tests__/template.marko_0_show",1];M._.w()
</script>
</body>
</html>
@ -108,14 +108,14 @@ container.querySelector("button").click();
<span>
1
</span>
<!--M_|1 #text/1 3-->
<!--M_|1 #text/1 2-->
<button>
Toggle
</button>
<!--M_*1 #button/2-->
</div>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b=[{x:1},{"ConditionalRenderer:#text/1":0,"ConditionalScope:#text/1":_.a={},show:!1},1,_.a]),"__tests__/template.marko_0_show",1];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b=[{x:1},{"ConditionalRenderer:#text/1":0,"ConditionalScope:#text/1":_.a={},show:!1},_.a]),"__tests__/template.marko_0_show",1];M._.w()
</script>
</body>
</html>

View File

@ -1,6 +1,6 @@
# Write
```html
<div><!--M_|1 #text/0--><span class=hidden>1</span><!--M_|1 #text/1 3--><button>Toggle</button><!--M_*1 #button/2--></div><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[{x:1},{"ConditionalRenderer:#text/1":0,"ConditionalScope:#text/1":_.a={},show:!1},1,_.a]),"__tests__/template.marko_0_show",1];M._.w()</script>
<div><!--M_|1 #text/0--><span class=hidden>1</span><!--M_|1 #text/1 2--><button>Toggle</button><!--M_*1 #button/2--></div><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[{x:1},{"ConditionalRenderer:#text/1":0,"ConditionalScope:#text/1":_.a={},show:!1},_.a]),"__tests__/template.marko_0_show",1];M._.w()</script>
```
# Render End
@ -15,14 +15,14 @@
>
1
</span>
<!--M_|1 #text/1 3-->
<!--M_|1 #text/1 2-->
<button>
Toggle
</button>
<!--M_*1 #button/2-->
</div>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b=[{x:1},{"ConditionalRenderer:#text/1":0,"ConditionalScope:#text/1":_.a={},show:!1},1,_.a]),"__tests__/template.marko_0_show",1];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b=[{x:1},{"ConditionalRenderer:#text/1":0,"ConditionalScope:#text/1":_.a={},show:!1},_.a]),"__tests__/template.marko_0_show",1];M._.w()
</script>
</body>
</html>

View File

@ -32,13 +32,13 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "__tests__/template.marko", "11:6"));
return 0;
}
}, $scope2_id, "#text/0");
}, $scope2_id, "#text/0", 1, 0);
_$.writeScope($scope2_id, {
_: _$.ensureScopeWithId($scope0_id)
}, "__tests__/template.marko", "10:4");
return 0;
}
}, $scope0_id, "#div/2", 1);
}, $scope0_id, "#div/2", 1, 0);
_$.write("</div>");
_$.writeEffect($scope0_id, "__tests__/template.marko_0");
_$.writeScope($scope0_id, {

View File

@ -8,7 +8,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, _$.registerContent("__tests__/template.marko_1_renderer", () => {
const $scope1_id = _$.nextScopeId();
_$.write("body content");
}, $scope0_id), 0, 1);
}, $scope0_id));
_$.write(`<button></button>${_$.markResumeNode($scope0_id, "#button/1")}`);
_$.writeEffect($scope0_id, "__tests__/template.marko_0_tagName");
_$.writeScope($scope0_id, {

View File

@ -6,7 +6,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
let x = 1;
_$.write(`<button>Count: <!>${_$.escapeXML(x)}${_$.markResumeNode($scope0_id, "#text/1")}</button>${_$.markResumeNode($scope0_id, "#button/0")}`);
const $tags0_scope = _$.peekNextScopeId();
const y = _$.dynamicTag($scope0_id, "#text/2", tags[0], [x], 0, 1, 1);
const y = _$.dynamicTag($scope0_id, "#text/2", tags[0], [x], 0, 1);
_$.setTagVar($scope0_id, "#scopeOffset/3", $tags0_scope, "__tests__/template.marko_0_y/var");
_$.write(`<div>Parent: <!>${_$.escapeXML(y)}${_$.markResumeNode($scope0_id, "#text/4")}</div>`);
_$.writeEffect($scope0_id, "__tests__/template.marko_0_x");

View File

@ -5,10 +5,10 @@ export default _$.createTemplate("__tests__/template.marko", input => {
const $scope0_id = _$.nextScopeId();
let x = 1;
_$.write(`<button>Count: <!>${_$.escapeXML(x)}${_$.markResumeNode($scope0_id, "#text/1")}</button>${_$.markResumeNode($scope0_id, "#button/0")}`);
_$.dynamicTag($scope0_id, "#text/2", tags[0], [x, 'foo'], 0, 1, 1);
_$.dynamicTag($scope0_id, "#text/3", tags[0], [false], 0, 1);
_$.dynamicTag($scope0_id, "#text/4", tags[0], [true], 0, 1);
_$.dynamicTag($scope0_id, "#text/5", tags[0], [...["spread1", "spread2"]], 0, 1);
_$.dynamicTag($scope0_id, "#text/2", tags[0], [x, 'foo'], 0, 1);
_$.dynamicTag($scope0_id, "#text/3", tags[0], [false], 0, 1, 0);
_$.dynamicTag($scope0_id, "#text/4", tags[0], [true], 0, 1, 0);
_$.dynamicTag($scope0_id, "#text/5", tags[0], [...["spread1", "spread2"]], 0, 1, 0);
_$.writeEffect($scope0_id, "__tests__/template.marko_0_x");
_$.writeScope($scope0_id, {
x

View File

@ -6,7 +6,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
_$.write(`<button></button>${_$.markResumeNode($scope0_id, "#button/0")}`);
_$.dynamicTag($scope0_id, "#text/1", tagName, {
id: "dynamic"
}, 0, 0, 1);
});
_$.writeEffect($scope0_id, "__tests__/template.marko_0_tagName");
_$.writeScope($scope0_id, {
tagName

View File

@ -7,7 +7,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
let val = 3;
_$.dynamicTag($scope0_id, "#text/0", tagName, {
value: val
}, 0, 0, 1);
});
_$.write(`<button></button>${_$.markResumeNode($scope0_id, "#button/1")}`);
_$.writeEffect($scope0_id, "__tests__/template.marko_0_tagName");
_$.writeScope($scope0_id, {

View File

@ -80,10 +80,10 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
class: ["a", "b"],
other: other
}, 0, 0, _$.serializeGuard($serialize, 2));
_$.dynamicTag($scope0_id, "#text/15", `h${1}`, {});
_$.dynamicTag($scope0_id, "#text/16", foo || 'div', {});
_$.dynamicTag($scope0_id, "#text/17", foo + 'div', {});
_$.dynamicTag($scope0_id, "#text/18", "d" + "iv", {});
_$.dynamicTag($scope0_id, "#text/15", `h${1}`, {}, 0, 0, 0);
_$.dynamicTag($scope0_id, "#text/16", foo || 'div', {}, 0, 0, 0);
_$.dynamicTag($scope0_id, "#text/17", foo + 'div', {}, 0, 0, 0);
_$.dynamicTag($scope0_id, "#text/18", "d" + "iv", {}, 0, 0, 0);
_$.serializeGuard($serialize, 8) && _$.writeScope($scope0_id, {
content: _$.serializeIf($serialize, 9) && content,
x: _$.serializeIf($serialize, 9) && x,

View File

@ -5,7 +5,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
const $scope0_id = _$.nextScopeId();
let x = 1;
_$.write(`<button>Count: <!>${_$.escapeXML(x)}${_$.markResumeNode($scope0_id, "#text/1")}</button>${_$.markResumeNode($scope0_id, "#button/0")}`);
_$.dynamicTag($scope0_id, "#text/2", tags[0], [x], 0, 1, 1);
_$.dynamicTag($scope0_id, "#text/2", tags[0], [x], 0, 1);
_$.writeEffect($scope0_id, "__tests__/template.marko_0_x");
_$.writeScope($scope0_id, {
x

View File

@ -5,7 +5,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
_$.dynamicTag($scope0_id, "#text/0", x, {}, _$.registerContent("__tests__/template.marko_1_renderer", () => {
const $scope1_id = _$.nextScopeId();
_$.write("Body Content");
}, $scope0_id), 0, 1);
}, $scope0_id));
_$.write(`<button></button>${_$.markResumeNode($scope0_id, "#button/1")}`);
_$.writeEffect($scope0_id, "__tests__/template.marko_0_x");
_$.writeScope($scope0_id, {

View File

@ -7,7 +7,7 @@ import * as _$ from "@marko/runtime-tags/debug/html";
export default _$.createTemplate("__tests__/template.marko", input => {
const $scope0_id = _$.nextScopeId();
const $getCounter_scope = _$.peekNextScopeId();
const count = _$.dynamicTag($scope0_id, "#text/0", getCounter(), {}, 0, 0, 1);
const count = _$.dynamicTag($scope0_id, "#text/0", getCounter(), {});
_$.setTagVar($scope0_id, "#scopeOffset/1", $getCounter_scope, "__tests__/template.marko_0_count/var");
_$.write(`<button class=reset>reset</button>${_$.markResumeNode($scope0_id, "#button/2")}`);
_$.writeEffect($scope0_id, "__tests__/template.marko_0");

View File

@ -4,13 +4,13 @@ export default _$.createTemplate("__tests__/template.marko", input => {
const $scope0_id = _$.nextScopeId();
const data1 = child({});
const $inputshowchild_scope = _$.peekNextScopeId();
const data2 = _$.dynamicTag($scope0_id, "#text/2", input.show && child, {}, 0, 0, 1);
const data2 = _$.dynamicTag($scope0_id, "#text/2", input.show && child, {});
_$.setTagVar($scope0_id, "#scopeOffset/3", $inputshowchild_scope, "__tests__/template.marko_0_data2/var");
const $inputdynamic_scope = _$.peekNextScopeId();
const data3 = _$.dynamicTag($scope0_id, "#text/4", input.dynamic, {}, 0, 0, 1);
const data3 = _$.dynamicTag($scope0_id, "#text/4", input.dynamic, {});
_$.setTagVar($scope0_id, "#scopeOffset/5", $inputdynamic_scope, "__tests__/template.marko_0_data3/var");
const $inputshowdiv_scope = _$.peekNextScopeId();
const el1 = _$.dynamicTag($scope0_id, "#text/6", input.show && "div", {}, 0, 0, 1);
const el1 = _$.dynamicTag($scope0_id, "#text/6", input.show && "div", {});
_$.setTagVar($scope0_id, "#scopeOffset/7", $inputshowdiv_scope, "__tests__/template.marko_0_el1/var");
_$.writeScope($scope0_id, {}, "__tests__/template.marko", 0);
});

View File

@ -6,7 +6,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
_$.dynamicTag($scope0_id, "#text/0", tagName, {}, _$.registerContent("__tests__/template.marko_1_renderer", () => {
const $scope1_id = _$.nextScopeId();
_counter({});
}, $scope0_id), 0, 1);
}, $scope0_id));
_$.write(`<button id=changeTag></button>${_$.markResumeNode($scope0_id, "#button/1")}`);
_$.writeEffect($scope0_id, "__tests__/template.marko_0_tagName");
_$.writeScope($scope0_id, {

View File

@ -40,7 +40,7 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
});
return 0;
}
}, $scope0_id, "#text/2");
}, $scope0_id, "#text/2", 1, 0);
_$.resumeSingleNodeConditional(() => {
if (true) {
const $scope4_id = _$.nextScopeId();
@ -52,7 +52,7 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
});
return 0;
}
}, $scope0_id, "#text/3");
}, $scope0_id, "#text/3", 1, 0);
_$.resumeSingleNodeConditional(() => {
if (true) {
const $scope5_id = _$.nextScopeId();
@ -62,7 +62,7 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
}, "__tests__/template.marko", "26:2");
return 0;
}
}, $scope0_id, "#text/4");
}, $scope0_id, "#text/4", 1, 0);
_$.writeEffect($scope0_id, "__tests__/template.marko_0");
_$.writeScope($scope0_id, {
input_show: _$.serializeIf($serialize, 0) && input.show,

View File

@ -12,7 +12,7 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
content: _$.createContent("__tests__/template.marko_1_renderer", () => {
const $scope1_id = _$.nextScopeId();
const $Child_scope = _$.peekNextScopeId();
const setHtml = _$.dynamicTag($scope1_id, "#text/0", 1 && Child, {}, 0, 0, 1);
const setHtml = _$.dynamicTag($scope1_id, "#text/0", 1 && Child, {});
_$.setTagVar($scope1_id, "#scopeOffset/1", $Child_scope, "__tests__/template.marko_1_setHtml/var");
_$.writeSubscribe($thing_content_subscribers, _$.writeScope($scope1_id, {
setHtml
@ -28,7 +28,7 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
content: _$.createContent("__tests__/template.marko_3_renderer", () => {
const $scope3_id = _$.nextScopeId();
const $Child_scope2 = _$.peekNextScopeId();
const setHtml2 = _$.dynamicTag($scope3_id, "#text/0", 1 && Child, {}, 0, 0, 1);
const setHtml2 = _$.dynamicTag($scope3_id, "#text/0", 1 && Child, {});
_$.setTagVar($scope3_id, "#scopeOffset/1", $Child_scope2, "__tests__/template.marko_3_setHtml2/var");
_$.writeSubscribe($thing_content2_subscribers, _$.writeScope($scope3_id, {
setHtml2
@ -44,7 +44,7 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
_$.dynamicTag($scope0_id, "#text/2", input.show ? 'section' : null, {}, _$.registerContent("__tests__/template.marko_4_renderer", () => {
const $scope4_id = _$.nextScopeId();
const $Child_scope3 = _$.peekNextScopeId();
const setHtml3 = _$.dynamicTag($scope4_id, "#text/0", 1 && Child, {}, 0, 0, 1);
const setHtml3 = _$.dynamicTag($scope4_id, "#text/0", 1 && Child, {});
_$.setTagVar($scope4_id, "#scopeOffset/1", $Child_scope3, "__tests__/template.marko_4_setHtml3/var");
_$.writeSubscribe($inputshowsectionnull_content_subscribers, _$.writeScope($scope4_id, {
setHtml3

View File

@ -6,7 +6,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
_$.resumeForTo(5, 0, 1, () => {
const $scope1_id = _$.nextScopeId();
const $Child_scope = _$.peekNextScopeId();
const setHtml = _$.dynamicTag($scope1_id, "#text/0", 1 && Child, {}, 0, 0, 1);
const setHtml = _$.dynamicTag($scope1_id, "#text/0", 1 && Child, {});
_$.setTagVar($scope1_id, "#scopeOffset/1", $Child_scope, "__tests__/template.marko_1_setHtml/var");
_$.writeScope($scope1_id, {
setHtml
@ -19,7 +19,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
_$.resumeForTo(to, 0, 1, () => {
const $scope2_id = _$.nextScopeId();
const $Child_scope2 = _$.peekNextScopeId();
const setHtml2 = _$.dynamicTag($scope2_id, "#text/0", 1 && Child, {}, 0, 0, 1);
const setHtml2 = _$.dynamicTag($scope2_id, "#text/0", 1 && Child, {});
_$.setTagVar($scope2_id, "#scopeOffset/1", $Child_scope2, "__tests__/template.marko_2_setHtml2/var");
_$.writeScope($scope2_id, {
setHtml2
@ -34,7 +34,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
_$.resumeForTo(3, 0, 1, j => {
const $scope4_id = _$.nextScopeId();
const $Child_scope3 = _$.peekNextScopeId();
const setHtml3 = _$.dynamicTag($scope4_id, "#text/0", 1 && Child, {}, 0, 0, 1);
const setHtml3 = _$.dynamicTag($scope4_id, "#text/0", 1 && Child, {});
_$.setTagVar($scope4_id, "#scopeOffset/1", $Child_scope3, "__tests__/template.marko_4_setHtml3/var");
_$.writeScope($scope4_id, {
setHtml3

View File

@ -11,7 +11,7 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
if (input.show) {
const $scope2_id = _$.nextScopeId();
const $Child_scope = _$.peekNextScopeId();
const setHtml = _$.dynamicTag($scope2_id, "#text/0", 1 && Child, {}, 0, 0, 1);
const setHtml = _$.dynamicTag($scope2_id, "#text/0", 1 && Child, {});
_$.setTagVar($scope2_id, "#scopeOffset/1", $Child_scope, "__tests__/template.marko_2_setHtml/var");
_$.writeScope($scope2_id, {
setHtml
@ -35,7 +35,7 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
if (true) {
const $scope3_id = _$.nextScopeId();
const $Child_scope2 = _$.peekNextScopeId();
const setHtml2 = _$.dynamicTag($scope3_id, "#text/0", 1 && Child, {}, 0, 0, 1);
const setHtml2 = _$.dynamicTag($scope3_id, "#text/0", 1 && Child, {});
_$.setTagVar($scope3_id, "#scopeOffset/1", $Child_scope2, "__tests__/template.marko_3_setHtml2/var");
_$.writeScope($scope3_id, {
setHtml2
@ -44,12 +44,12 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
});
return 0;
}
}, $scope0_id, "#text/2");
}, $scope0_id, "#text/2", 1, 0);
_$.resumeConditional(() => {
if (true) {
const $scope4_id = _$.nextScopeId();
const $Child_scope3 = _$.peekNextScopeId();
const setHtml3 = _$.dynamicTag($scope4_id, "#text/0", 1 && Child, {}, 0, 0, 1);
const setHtml3 = _$.dynamicTag($scope4_id, "#text/0", 1 && Child, {});
_$.setTagVar($scope4_id, "#scopeOffset/1", $Child_scope3, "__tests__/template.marko_4_setHtml3/var");
_$.writeScope($scope4_id, {
setHtml3
@ -58,7 +58,7 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
});
return 0;
}
}, $scope0_id, "#text/3");
}, $scope0_id, "#text/3", 1, 0);
_$.resumeSingleNodeConditional(() => {
if (true) {
const $scope5_id = _$.nextScopeId();
@ -68,7 +68,7 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
}, "__tests__/template.marko", "28:2");
return 0;
}
}, $scope0_id, "#text/4");
}, $scope0_id, "#text/4", 1, 0);
_$.writeEffect($scope0_id, "__tests__/template.marko_0");
_$.writeScope($scope0_id, {
input_show: _$.serializeIf($serialize, 0) && input.show,

View File

@ -37,7 +37,7 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
_$.writeScope($scope3_id, {}, "__tests__/template.marko", "19:2");
return 0;
}
}, $scope0_id, "#text/2");
}, $scope0_id, "#text/2", 1, 0);
_$.writeEffect($scope0_id, "__tests__/template.marko_0");
_$.writeScope($scope0_id, {
input_show: _$.serializeIf($serialize, 0) && input.show,

View File

@ -10,7 +10,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
_$.writeScope($scope1_id, {}, "__tests__/template.marko", "3:2");
return 0;
}
}, $scope0_id, "#text/1", 1, 1);
}, $scope0_id, "#text/1");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_show");
_$.writeScope($scope0_id, {
show

View File

@ -4,7 +4,7 @@ import * as _$ from "@marko/runtime-tags/debug/html";
export default _$.createTemplate("__tests__/template.marko", input => {
const $scope0_id = _$.nextScopeId();
let x = 1;
_$.dynamicTag($scope0_id, "#text/0", x === 1 ? baz : foo, {}, 0, 0, 1);
_$.dynamicTag($scope0_id, "#text/0", x === 1 ? baz : foo, {});
_$.writeScope($scope0_id, {}, "__tests__/template.marko", 0);
_$.resumeClosestBranch($scope0_id);
});

View File

@ -12,7 +12,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "__tests__/template.marko", "3:2");
return 0;
}
}, $scope0_id, "#text/0", 1, 1);
}, $scope0_id, "#text/0");
_$.write(`<div id=ref></div><button id=increment>Increment</button>${_$.markResumeNode($scope0_id, "#button/1")}<button id=toggle>Toggle</button>${_$.markResumeNode($scope0_id, "#button/2")}`);
_$.writeEffect($scope0_id, "__tests__/template.marko_0_show");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_x");

View File

@ -11,14 +11,14 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
}, _$.registerContent("__tests__/template.marko_2_renderer", () => {
const $scope2_id = _$.nextScopeId();
_$.write("Hi");
}, $scope0_id), 0, 1);
}, $scope0_id));
_$.write(`</svg><math>${_$.toString(input.value)}${_$.markResumeNode($scope0_id, "#text/3", _$.serializeGuard($serialize, 0))}`);
_$.dynamicTag($scope0_id, "#text/4", Child, {
href: "#bar"
}, _$.registerContent("__tests__/template.marko_3_renderer", () => {
const $scope3_id = _$.nextScopeId();
_$.write("Hi");
}, $scope0_id), 0, 1);
}, $scope0_id));
_$.write("</math>");
_$.dynamicTag($scope0_id, "#text/5", Parent, {}, _$.registerContent("__tests__/template.marko_1_renderer", () => {
const $scope1_id = _$.nextScopeId();
@ -28,7 +28,7 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
"ClosureSignalIndex:input_value": _$.serializeIf($serialize, 0) && 0
}, "__tests__/template.marko", "12:3"));
_$.resumeClosestBranch($scope1_id);
}, $scope0_id), 0, 1);
}, $scope0_id));
_$.write(`<button class=toggle-parent>Toggle Parent</button>${_$.markResumeNode($scope0_id, "#button/6")}<button class=toggle-child>Toggle Child</button>${_$.markResumeNode($scope0_id, "#button/7")}</div>${_$.markResumeNode($scope0_id, "#div/0")}`);
_$.writeEffect($scope0_id, "__tests__/template.marko_0_Parent_Child");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_Child");

View File

@ -12,6 +12,6 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "__tests__/template.marko", "2:2");
return 0;
}
}, $scope0_id, "#text/1");
}, $scope0_id, "#text/1", 1, 0);
_$.writeScope($scope0_id, {}, "__tests__/template.marko", 0);
});

View File

@ -25,7 +25,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "__tests__/template.marko", "12:4");
return 1;
}
}, $scope1_id, "#text/0", 1, 1);
}, $scope1_id, "#text/0");
_$.writeScope($scope1_id, {
count,
i,

View File

@ -30,7 +30,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
value: _$.register(function () {
clickOnceCount++;
}, "__tests__/template.marko_0/onClickOnce", $scope0_id)
}, 0, 0, 1);
});
_$.setTagVar($scope0_id, "#scopeOffset/1", $Once_scope, "__tests__/template.marko_0_onClickOnce/var");
_$.write(`<button class=once>${_$.escapeXML(clickOnceCount)}${_$.markResumeNode($scope0_id, "#text/3")}</button>${_$.markResumeNode($scope0_id, "#button/2")}`);
const Twice = {
@ -62,7 +62,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
value: _$.register(function () {
clickTwiceCount++;
}, "__tests__/template.marko_0/onClickTwice", $scope0_id)
}, 0, 0, 1);
});
_$.setTagVar($scope0_id, "#scopeOffset/5", $Twice_scope, "__tests__/template.marko_0_onClickTwice/var");
_$.write(`<button class=twice>${_$.escapeXML(clickTwiceCount)}${_$.markResumeNode($scope0_id, "#text/7")}</button>${_$.markResumeNode($scope0_id, "#button/6")}`);
_$.writeEffect($scope0_id, "__tests__/template.marko_0_onClickTwice");

View File

@ -7,5 +7,5 @@ export default _$.createTemplate("__tests__/template.marko", input => {
const $scope0_id = _$.nextScopeId();
_$.write("<div></div>");
_foo({});
_$.dynamicTag($scope0_id, "#text/1", Bar, {});
_$.dynamicTag($scope0_id, "#text/1", Bar, {}, 0, 0, 0);
});

View File

@ -21,14 +21,14 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "__tests__/template.marko", "8:6"));
return 0;
}
}, $scope1_id, "#text/1", 1, 1);
}, $scope1_id, "#text/1");
_$.writeEffect($scope1_id, "__tests__/template.marko_1_inner");
_$.writeScope($scope1_id, {
_: _$.ensureScopeWithId($scope0_id)
}, "__tests__/template.marko", "6:4");
return 0;
}
}, $scope0_id, "#text/1", 1, 1);
}, $scope0_id, "#text/1");
_$.write("</div>");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_outer");
_$.writeScope($scope0_id, {

View File

@ -21,14 +21,14 @@ export default _$.createTemplate("__tests__/template.marko", input => {
}, "__tests__/template.marko", "8:6"));
return 0;
}
}, $scope1_id, "#text/1", 1, 1);
}, $scope1_id, "#text/1");
_$.writeEffect($scope1_id, "__tests__/template.marko_1_inner");
_$.writeScope($scope1_id, {
_: _$.ensureScopeWithId($scope0_id)
}, "__tests__/template.marko", "6:4");
return 0;
}
}, $scope0_id, "#text/1", 1, 1);
}, $scope0_id, "#text/1");
_$.write(" hello</div>");
_$.writeEffect($scope0_id, "__tests__/template.marko_0_outer");
_$.writeScope($scope0_id, {

View File

@ -0,0 +1,8 @@
{
"vars": {
"props": {
"$_$": "t",
"$init": "o"
}
}
}

View File

@ -0,0 +1,41 @@
# Render `{"show":true}`
```html
<button>
<span
id="count"
>
0
</span>
</button>
```
# Render
```js
container.querySelector("button").click();
```
```html
<button>
<span
id="count"
>
1
</span>
</button>
```
# Render
```js
container.querySelector("button").click();
```
```html
<button>
<span
id="count"
>
2
</span>
</button>
```

View File

@ -0,0 +1,56 @@
# Render `{"show":true}`
```html
<button>
<span
id="count"
>
0
</span>
</button>
```
# Mutations
```
INSERT button
```
# Render
```js
container.querySelector("button").click();
```
```html
<button>
<span
id="count"
>
1
</span>
</button>
```
# Mutations
```
REMOVE #text in button/span
INSERT button/span/#text
```
# Render
```js
container.querySelector("button").click();
```
```html
<button>
<span
id="count"
>
2
</span>
</button>
```
# Mutations
```
REMOVE #text in button/span
INSERT button/span/#text
```

View File

@ -0,0 +1,7 @@
// size: 104 (min) 68 (brotli)
_$.effect("a0", ($scope) =>
_$.on($scope[0], "click", function () {
document.getElementById("count").textContent++;
}),
),
init();

View File

@ -0,0 +1,12 @@
export const $template = "<button></button>";
export const $walks = /* get, over(1) */" b";
import * as _$ from "@marko/runtime-tags/debug/dom";
const $if_content = /* @__PURE__ */_$.createRenderer("<span id=count>0</span>");
const $if = /* @__PURE__ */_$.conditional("#button/0", $if_content);
export const $input_show = /* @__PURE__ */_$.value("input_show", ($scope, input_show) => $if($scope, input_show ? 0 : 1));
export const $input = /* @__PURE__ */_$.value("input", ($scope, input) => $input_show($scope, input.show));
const $setup_effect = _$.effect("__tests__/template.marko_0", $scope => _$.on($scope["#button/0"], "click", function () {
document.getElementById("count").textContent++;
}));
export const $setup = $setup_effect;
export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", $template, $walks, $setup, $input);

View File

@ -0,0 +1,16 @@
import * as _$ from "@marko/runtime-tags/debug/html";
export default _$.createTemplate("__tests__/template.marko", (input, $serialize) => {
const $scope0_id = _$.nextScopeId();
_$.write("<button>");
_$.resumeSingleNodeConditional(() => {
if (input.show) {
const $scope1_id = _$.nextScopeId();
_$.write("<span id=count>0</span>");
_$.serializeGuard($serialize, 0) && _$.writeScope($scope1_id, {}, "__tests__/template.marko", "2:4");
return 0;
}
}, $scope0_id, "#button/0", _$.serializeGuard($serialize, 0), 1, 1);
_$.write("</button>");
_$.writeEffect($scope0_id, "__tests__/template.marko_0");
_$.writeScope($scope0_id, {}, "__tests__/template.marko", 0);
});

View File

@ -0,0 +1,41 @@
# Render `{"show":true}`
```html
<button>
<span
id="count"
>
0
</span>
</button>
```
# Render
```js
container.querySelector("button").click();
```
```html
<button>
<span
id="count"
>
1
</span>
</button>
```
# Render
```js
container.querySelector("button").click();
```
```html
<button>
<span
id="count"
>
2
</span>
</button>
```

View File

@ -0,0 +1,79 @@
# Render `{"show":true}`
```html
<html>
<head />
<body>
<button>
<span
id="count"
>
0
</span>
<!--M_=1 #button/0 2-->
</button>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.a=[0,{}]),"__tests__/template.marko_0",1];M._.w()
</script>
</body>
</html>
```
# Render
```js
container.querySelector("button").click();
```
```html
<html>
<head />
<body>
<button>
<span
id="count"
>
1
</span>
<!--M_=1 #button/0 2-->
</button>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.a=[0,{}]),"__tests__/template.marko_0",1];M._.w()
</script>
</body>
</html>
```
# Mutations
```
REMOVE #text in html/body/button/span
INSERT html/body/button/span/#text
```
# Render
```js
container.querySelector("button").click();
```
```html
<html>
<head />
<body>
<button>
<span
id="count"
>
2
</span>
<!--M_=1 #button/0 2-->
</button>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.a=[0,{}]),"__tests__/template.marko_0",1];M._.w()
</script>
</body>
</html>
```
# Mutations
```
REMOVE #text in html/body/button/span
INSERT html/body/button/span/#text
```

View File

@ -0,0 +1,10 @@
# Render End
```html
<button>
<span
id="count"
>
0
</span>
</button>
```

View File

@ -0,0 +1,37 @@
# Write
```html
<button><span id=count>0</span><!--M_=1 #button/0 2--></button><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.a=[0,{}]),"__tests__/template.marko_0",1];M._.w()</script>
```
# Render End
```html
<html>
<head />
<body>
<button>
<span
id="count"
>
0
</span>
<!--M_=1 #button/0 2-->
</button>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.a=[0,{}]),"__tests__/template.marko_0",1];M._.w()
</script>
</body>
</html>
```
# Mutations
```
INSERT html
INSERT html/head
INSERT html/body
INSERT html/body/button
INSERT html/body/button/span
INSERT html/body/button/span/#text
INSERT html/body/button/#comment
INSERT html/body/script
INSERT html/body/script/#text
```

View File

@ -0,0 +1,5 @@
<button onClick() { document.getElementById("count").textContent++ }>
<if=input.show>
<span#count>0</span>
</if>
</button>

View File

@ -0,0 +1,5 @@
const click = (container: Element) => {
container.querySelector<HTMLButtonElement>("button")!.click();
};
export const steps = [{ show: true }, click, click];

View File

@ -22,5 +22,5 @@ export default _$.createTemplate("__tests__/template.marko", input => {
});
})
};
_$.dynamicTag($scope0_id, "#text/0", Foo, {});
_$.dynamicTag($scope0_id, "#text/0", Foo, {}, 0, 0, 0);
});

View File

@ -32,8 +32,9 @@ export let dynamicTag = (
inputOrArgs: unknown,
content?: (() => void) | 0,
inputIsArgs?: 1,
shouldResume?: 1 | 0,
serializeReason?: 1 | 0,
) => {
const shouldResume = serializeReason !== 0;
const renderer = normalizeDynamicRenderer<ServerRenderer>(tag);
if (MARKO_DEBUG) {
@ -126,7 +127,7 @@ export let dynamicTag = (
content
? { ...(input as Record<string, unknown>), content }
: input,
shouldResume,
shouldResume ? 1 : 0,
);
}
return inputIsArgs

View File

@ -455,39 +455,40 @@ export function resumeConditional(
scopeId: number,
accessor: Accessor,
serializeBranch?: 0 | 1,
serializeMarker?: 1,
serializeMarker?: 0 | 1,
) {
if (serializeBranch === 0) {
return cb();
}
const resumeBranch = serializeBranch !== 0;
const resumeMarker = serializeMarker !== 0;
const branchId = peekNextScopeId();
if (serializeMarker) {
if (resumeMarker && resumeBranch) {
$chunk.writeHTML(
$chunk.boundary.state.mark(ResumeSymbol.BranchStart, branchId + ""),
);
}
const branchIndex = withBranchId(branchId, cb);
const branchIndex = resumeBranch ? withBranchId(branchId, cb) : cb();
const rendered = branchIndex !== undefined;
if (branchIndex !== undefined) {
if (resumeBranch && rendered) {
writeScope(scopeId, {
[AccessorPrefix.ConditionalRenderer + accessor]: serializeMarker
[AccessorPrefix.ConditionalRenderer + accessor]: resumeMarker
? branchIndex
: undefined,
[AccessorPrefix.ConditionalScope + accessor]: writeScope(branchId, {}),
});
} else {
nextScopeId();
}
if (serializeMarker) {
$chunk.writeHTML(
$chunk.boundary.state.mark(
ResumeSymbol.BranchEnd,
scopeId + " " + accessor,
),
);
if (resumeMarker) {
if (resumeBranch) {
$chunk.writeHTML(
$chunk.boundary.state.mark(
ResumeSymbol.BranchEnd,
scopeId + " " + accessor,
),
);
} else {
markResumeNode(scopeId, accessor);
}
}
}
@ -499,26 +500,22 @@ export function resumeSingleNodeConditional(
serializeMarker?: 0 | 1,
onlyChild?: 1,
) {
if (serializeBranch === 0) {
return cb();
}
const resumeBranch = serializeBranch !== 0;
const resumeMarker = serializeMarker !== 0;
const branchId = peekNextScopeId();
const branchIndex = withBranchId(branchId, cb);
const branchIndex = resumeBranch ? withBranchId(branchId, cb) : cb();
const rendered = branchIndex !== undefined;
if (rendered) {
if (resumeBranch && rendered) {
writeScope(scopeId, {
[AccessorPrefix.ConditionalRenderer + accessor]: serializeMarker
[AccessorPrefix.ConditionalRenderer + accessor]: resumeMarker
? branchIndex
: undefined,
[AccessorPrefix.ConditionalScope + accessor]: writeScope(branchId, {}),
});
} else {
nextScopeId();
}
if (serializeMarker) {
if (resumeMarker || (resumeBranch && onlyChild)) {
$chunk.writeHTML(
$chunk.boundary.state.mark(
onlyChild

View File

@ -163,6 +163,10 @@ export default {
);
}
if (hasEventHandlers || spreadReferenceNodes) {
forceBindingSerialize(tagSection, nodeBinding);
}
if (node.var) {
forceBindingSerialize(tagSection, nodeBinding);
@ -183,15 +187,13 @@ export default {
trackHoistedReference(ref as t.NodePath<t.Identifier>, nodeBinding);
}
}
} else if (hasEventHandlers || spreadReferenceNodes) {
forceBindingSerialize(tagSection, nodeBinding);
} else {
addBindingSerializeReasonExpr(
tagSection,
nodeBinding,
push(attrExprExtras, tagExtra),
);
}
addBindingSerializeReasonExpr(
tagSection,
nodeBinding,
push(attrExprExtras, tagExtra),
);
}
},
translate: {

View File

@ -163,6 +163,10 @@ export default {
);
}
if (hasEventHandlers || spreadReferenceNodes) {
forceBindingSerialize(tagSection, nodeBinding);
}
if (node.var) {
forceBindingSerialize(tagSection, nodeBinding);
@ -183,15 +187,13 @@ export default {
trackHoistedReference(ref as t.NodePath<t.Identifier>, nodeBinding);
}
}
} else if (hasEventHandlers || spreadReferenceNodes) {
forceBindingSerialize(tagSection, nodeBinding);
} else {
addBindingSerializeReasonExpr(
tagSection,
nodeBinding,
push(attrExprExtras, tagExtra),
);
}
addBindingSerializeReasonExpr(
tagSection,
nodeBinding,
push(attrExprExtras, tagExtra),
);
}
},
translate: {

View File

@ -197,12 +197,6 @@ export const IfTag = {
}
if (branchSerializeReasons) {
const branchSerializeExpr =
branchSerializeReasons === true
? !onlyChildInParentOptimization && !markerSerializeReason
? undefined
: getSerializeGuard(branchSerializeReasons)
: getSerializeGuardForAny(branchSerializeReasons);
const cbNode = t.arrowFunctionExpression(
[],
t.blockStatement([statement!]),
@ -214,12 +208,19 @@ export const IfTag = {
cbNode,
getScopeIdIdentifier(ifTagSection),
getScopeAccessorLiteral(nodeBinding),
branchSerializeExpr,
markerSerializeReason
? getSerializeGuard(markerSerializeReason)
: onlyChildInParentOptimization
? t.numericLiteral(0)
: undefined,
branchSerializeReasons === true
? markerSerializeReason === true &&
!onlyChildInParentOptimization
? undefined
: t.numericLiteral(1)
: getSerializeGuardForAny(branchSerializeReasons),
!markerSerializeReason
? t.numericLiteral(0)
: markerSerializeReason === true
? onlyChildInParentOptimization
? t.numericLiteral(1)
: undefined
: getSerializeGuard(markerSerializeReason),
onlyChildInParentOptimization && t.numericLiteral(1),
)
: callRuntime(
@ -227,8 +228,16 @@ export const IfTag = {
cbNode,
getScopeIdIdentifier(ifTagSection),
getScopeAccessorLiteral(nodeBinding),
branchSerializeExpr,
getSerializeGuard(markerSerializeReason),
branchSerializeReasons === true
? markerSerializeReason === true
? undefined
: t.numericLiteral(1)
: getSerializeGuardForAny(branchSerializeReasons),
!markerSerializeReason
? t.numericLiteral(0)
: markerSerializeReason === true
? undefined
: getSerializeGuard(markerSerializeReason),
),
);
}
@ -452,7 +461,7 @@ function getBranches(tag: t.NodePath<t.MarkoTag>) {
}
function getSerializeGuardForAny(reasons: DynamicSerializeReasons) {
let expr = getSerializeGuard(reasons[0]);
let expr: t.Expression = getSerializeGuard(reasons[0]);
for (let i = 1; i < reasons.length; i++) {
expr = t.logicalExpression("||", expr, getSerializeGuard(reasons[i]));
}

View File

@ -69,7 +69,7 @@ export function forceSectionSerialize(
forceSerializeKey(section, getSectionPropSerializeReasonKey(section, prop));
} else if (section.serializeReason !== true) {
reasonExprs.delete(section);
section.serializeReason = true;
setSectionSerializeReason(section, true);
}
}
export function forceBindingSerialize(
@ -81,7 +81,7 @@ export function forceBindingSerialize(
}
function forceSerializeKey(section: Section, key: SerializeKey) {
if (section.serializeReasons.get(key) !== true) {
section.serializeReasons.set(key, true);
setSectionKeyedSerializeReason(section, key, true);
keyedReasonExprs.get(section)?.delete(key);
}
}
@ -188,9 +188,9 @@ export function addSectionSerializeReasonRef(
if (reason === true) {
forceSectionSerialize(section);
} else {
section.serializeReason = mergeSerializeReasons(
existingReason,
reason,
setSectionSerializeReason(
section,
mergeSerializeReasons(existingReason, reason),
);
}
}
@ -227,7 +227,8 @@ function addKeyedSerializeReasonRef(
if (reason === true) {
forceSerializeKey(section, key);
} else {
section.serializeReasons.set(
setSectionKeyedSerializeReason(
section,
key,
mergeSerializeReasons(existingReason, reason)!,
);
@ -254,9 +255,9 @@ export function addSectionSerializeReason(
if (reason === true) {
forceSectionSerialize(section);
} else {
section.serializeReason = mergeSerializeReasons(
existingReason,
reason,
setSectionSerializeReason(
section,
mergeSerializeReasons(existingReason, reason),
);
}
}
@ -287,7 +288,8 @@ function addKeyedSerializeReason(
if (reason === true) {
forceSerializeKey(section, key);
} else {
section.serializeReasons.set(
setSectionKeyedSerializeReason(
section,
key,
mergeSerializeReasons(existingReason, reason)!,
);
@ -365,7 +367,8 @@ export function applySerializeReasonExprs(section: Section) {
for (const [key, exprs] of keyedExprs) {
const reason = getSerializeSourcesForExprs(exprs);
if (reason) {
section.serializeReasons.set(
setSectionKeyedSerializeReason(
section,
key,
mergeSerializeReasons(section.serializeReasons.get(key), reason)!,
);
@ -373,10 +376,14 @@ export function applySerializeReasonExprs(section: Section) {
}
}
section.serializeReason = mergeSerializeReasons(
section.serializeReason,
getSerializeSourcesForExprs(reasonExprs.get(section)),
);
const reason = getSerializeSourcesForExprs(reasonExprs.get(section));
if (reason) {
setSectionSerializeReason(
section,
mergeSerializeReasons(section.serializeReason, reason),
);
}
reasonExprs.delete(section);
}
@ -394,7 +401,7 @@ export function finalizeSectionSerializeReasons(section: Section) {
reason = mergeSerializeReasons(reason, keyedReason);
}
section.serializeReason = reason;
setSectionSerializeReason(section, reason);
}
}
@ -446,3 +453,20 @@ export function mergeSerializeReasons<T extends undefined | SerializeReason>(
if (a === true || b === true) return true as T;
return bindingUtil.union(a, b) as T;
}
// Exists as the single point of assigning section reasons to aid in debugging.
function setSectionSerializeReason(
section: Section,
reason: SerializeReason | undefined,
) {
section.serializeReason = reason;
}
// Exists as the single point of assigning section reasons to aid in debugging.
function setSectionKeyedSerializeReason(
section: Section,
key: SerializeKey,
reason: SerializeReason,
) {
section.serializeReasons.set(key, reason);
}

View File

@ -44,25 +44,17 @@ export function getExprIfSerialized<
) as T extends {} ? U : undefined;
}
export function getSerializeGuard<
T extends undefined | boolean | DynamicSerializeReason,
>(reason: T) {
return (
reason
? reason === true
? t.numericLiteral(1)
: callRuntime(
"serializeGuard",
t.identifier(getSharedUid("serialize")),
t.numericLiteral(
resolveSerializeReasonId(
getProgram().node.extra.inputSerializeReasons!,
reason,
),
),
)
: undefined
) as T extends {} ? t.Expression : undefined;
export function getSerializeGuard(reason: DynamicSerializeReason) {
return callRuntime(
"serializeGuard",
t.identifier(getSharedUid("serialize")),
t.numericLiteral(
resolveSerializeReasonId(
getProgram().node.extra.inputSerializeReasons!,
reason,
),
),
);
}
export default {

View File

@ -269,13 +269,16 @@ function translateHTML(tag: t.NodePath<t.MarkoTag>) {
if (childSerializeReasonIds) {
if (childSerializeReasonIds.length === 1) {
// Special case single reason to pass either 1 or undefined.
childSerializeReasonExpr = getSerializeGuard(
getBindingSerializeReason(
section,
childScopeBinding,
childSerializeReasonIds[0],
),
const reason = getBindingSerializeReason(
section,
childScopeBinding,
childSerializeReasonIds[0],
);
childSerializeReasonExpr = !reason
? undefined
: reason == true
? t.numericLiteral(1)
: getSerializeGuard(reason);
} else {
const props: t.ObjectExpression["properties"] = [];
let hasDynamicReasons = false;
@ -289,7 +292,10 @@ function translateHTML(tag: t.NodePath<t.MarkoTag>) {
if (reason) {
hasDynamicReasons ||= reason !== true;
props.push(
t.objectProperty(t.numericLiteral(i), getSerializeGuard(reason)),
t.objectProperty(
t.numericLiteral(i),
reason === true ? t.numericLiteral(1) : getSerializeGuard(reason),
),
);
} else {
hasSkippedReasons = true;

View File

@ -200,6 +200,11 @@ export default {
tagSection,
nodeBinding,
);
const serializeArg = !serializeReason
? t.numericLiteral(0)
: serializeReason === true
? undefined
: getSerializeGuard(serializeReason);
const dynamicTagExpr = hasTagArgs
? callRuntime(
"dynamicTag",
@ -209,7 +214,7 @@ export default {
t.arrayExpression(args),
t.numericLiteral(0),
t.numericLiteral(1),
getSerializeGuard(serializeReason),
serializeArg,
)
: callRuntime(
"dynamicTag",
@ -217,9 +222,9 @@ export default {
getScopeAccessorLiteral(nodeBinding),
tagExpression,
args[0],
args[1] || (serializeReason ? t.numericLiteral(0) : undefined),
serializeReason ? t.numericLiteral(0) : undefined,
getSerializeGuard(serializeReason),
args[1] || (serializeArg ? t.numericLiteral(0) : undefined),
serializeArg ? t.numericLiteral(0) : undefined,
serializeArg,
);
if (node.var) {

View File

@ -295,6 +295,10 @@ export default {
);
}
if (hasEventHandlers || spreadReferenceNodes) {
forceBindingSerialize(tagSection, nodeBinding);
}
if (node.var) {
forceBindingSerialize(tagSection, nodeBinding);
for (const ref of tag.scope.getBinding(node.var.name)!
@ -308,8 +312,8 @@ export default {
tagSection,
getAccessorProp().Owner,
);
if (!isInvokedFunction(ref)) {
tagExtra[kGetterId] ||= getRegisterUID(
if (!tagExtra[kGetterId] && !isInvokedFunction(ref)) {
tagExtra[kGetterId] = getRegisterUID(
tagSection,
nodeBinding.name,
);
@ -321,15 +325,13 @@ export default {
);
}
}
} else if (hasEventHandlers || spreadReferenceNodes) {
forceBindingSerialize(tagSection, nodeBinding);
} else {
addBindingSerializeReasonExpr(
tagSection,
nodeBinding,
push(attrExprExtras, tagExtra),
);
}
addBindingSerializeReasonExpr(
tagSection,
nodeBinding,
push(attrExprExtras, tagExtra),
);
}
},
},