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: tags/class interop walk order

Browse Source
This commit is contained in:
dpiercey 2025-08-28 10:57:07 -07:00 committed by Dylan Piercey
parent 1091291ae2
commit df07bb6ec8
7 changed files with 170 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.changeset/beige-carrots-act.md Normal file
View File

@ -0,0 +1,7 @@
---
"@marko/translator-interop-class-tags": patch
"marko": patch
"@marko/runtime-tags": patch
---
Ensure tags api runtime compat always walks after running class api init code.

5
packages/runtime-class/src/runtime/helpers/tags-compat/runtime-html.js
View File

@ -34,6 +34,11 @@ exports.p = function (htmlCompat) {
if (componentDefs) {
scripts = ___getInitComponentsCodeForDefs($global, componentDefs);
htmlCompat.ensureState($global).walkOnNextFlush = true;
if (!tagsAPI.length) {
scripts = concatScripts(htmlCompat.flushScript($global), scripts);
}
}
if (tagsAPI.length) {

10
packages/runtime-tags/src/html/compat.ts
View File

@ -89,6 +89,16 @@ export const compat = {
return compatRegistered;
};
},
flushScript($global: any) {
const boundary = new Boundary(this.ensureState($global));
if (!boundary.done) {
throw new Error(
"Cannot serialize promise across tags/class compat layer.",
);
}
return new Chunk(boundary, null, null).flushScript().scripts;
},
render(
renderer: ServerRenderer,
willRerender: boolean,

162
packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/__snapshots__/resume.expected.md
View File

@ -19,6 +19,18 @@
</button>
<!--M_]1 #text/2-->
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/2": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/2": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
]),
count: 0
}, _.a])];
M._.w();
$MC = (window.$MC || []).concat(
{
"p": "_",
@ -35,20 +47,9 @@
"__tests__/components/class-counter.marko"
]
});
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/2": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/2": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
]),
count: 0
}, _.a]), "$compat_setScope", 2,
M._.r.push("$compat_setScope", 2,
"__tests__/template.marko_0_count",
1
];
1);
M._.w()
</script>
</body>
@ -87,6 +88,18 @@ container.querySelector("#tags").click();
</button>
<!--M_]1 #text/2-->
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/2": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/2": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
]),
count: 0
}, _.a])];
M._.w();
$MC = (window.$MC || []).concat(
{
"p": "_",
@ -103,20 +116,9 @@ container.querySelector("#tags").click();
"__tests__/components/class-counter.marko"
]
});
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/2": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/2": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
]),
count: 0
}, _.a]), "$compat_setScope", 2,
M._.r.push("$compat_setScope", 2,
"__tests__/template.marko_0_count",
1
];
1);
M._.w()
</script>
</body>
@ -153,6 +155,18 @@ container.querySelector("#class").click();
</button>
<!--M_]1 #text/2-->
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/2": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/2": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
]),
count: 0
}, _.a])];
M._.w();
$MC = (window.$MC || []).concat(
{
"p": "_",
@ -169,20 +183,9 @@ container.querySelector("#class").click();
"__tests__/components/class-counter.marko"
]
});
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/2": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/2": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
]),
count: 0
}, _.a]), "$compat_setScope", 2,
M._.r.push("$compat_setScope", 2,
"__tests__/template.marko_0_count",
1
];
1);
M._.w()
</script>
</body>
@ -218,6 +221,18 @@ container.querySelector("#tags").click();
</button>
<!--M_]1 #text/2-->
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/2": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/2": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
]),
count: 0
}, _.a])];
M._.w();
$MC = (window.$MC || []).concat(
{
"p": "_",
@ -234,20 +249,9 @@ container.querySelector("#tags").click();
"__tests__/components/class-counter.marko"
]
});
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/2": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/2": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
]),
count: 0
}, _.a]), "$compat_setScope", 2,
M._.r.push("$compat_setScope", 2,
"__tests__/template.marko_0_count",
1
];
1);
M._.w()
</script>
</body>
@ -284,6 +288,18 @@ container.querySelector("#class").click();
</button>
<!--M_]1 #text/2-->
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/2": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/2": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
]),
count: 0
}, _.a])];
M._.w();
$MC = (window.$MC || []).concat(
{
"p": "_",
@ -300,20 +316,9 @@ container.querySelector("#class").click();
"__tests__/components/class-counter.marko"
]
});
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/2": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/2": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
]),
count: 0
}, _.a]), "$compat_setScope", 2,
M._.r.push("$compat_setScope", 2,
"__tests__/template.marko_0_count",
1
];
1);
M._.w()
</script>
</body>
@ -349,6 +354,18 @@ container.querySelector("#tags").click();
</button>
<!--M_]1 #text/2-->
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/2": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/2": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
]),
count: 0
}, _.a])];
M._.w();
$MC = (window.$MC || []).concat(
{
"p": "_",
@ -365,20 +382,9 @@ container.querySelector("#tags").click();
"__tests__/components/class-counter.marko"
]
});
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/2": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/2": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
]),
count: 0
}, _.a]), "$compat_setScope", 2,
M._.r.push("$compat_setScope", 2,
"__tests__/template.marko_0_count",
1
];
1);
M._.w()
</script>
</body>

29
packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/__snapshots__/ssr.expected.md
View File

@ -1,5 +1,5 @@
# Write
<button id=tags>0<!--M_*1 #text/1--></button><!--M_*1 #button/0--><!--M_[2--><!--M#_0--><button id=class data-parent=0>0</button><!--M/--><!--M_]1 #text/2--><script>$MC=(window.$MC||[]).concat({"p":"_","w":[["_0",0,{"count":0},{"f":1}]],"t":["__tests__/components/class-counter.marko"]});WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[0,{"ConditionalScope:#text/2":_.a={m5c:"_0"},"ConditionalRenderer:#text/2":_._.$compat_renderer(_._["__tests__/components/class-counter.marko"]),count:0},_.a]),"$compat_setScope",2,"__tests__/template.marko_0_count",1];M._.w()</script>
<button id=tags>0<!--M_*1 #text/1--></button><!--M_*1 #button/0--><!--M_[2--><!--M#_0--><button id=class data-parent=0>0</button><!--M/--><!--M_]1 #text/2--><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[0,{"ConditionalScope:#text/2":_.a={m5c:"_0"},"ConditionalRenderer:#text/2":_._.$compat_renderer(_._["__tests__/components/class-counter.marko"]),count:0},_.a])];M._.w();$MC=(window.$MC||[]).concat({"p":"_","w":[["_0",0,{"count":0},{"f":1}]],"t":["__tests__/components/class-counter.marko"]});M._.r.push("$compat_setScope",2,"__tests__/template.marko_0_count",1);M._.w()</script>
# Render End
```html
@ -24,6 +24,18 @@
<!--M/-->
<!--M_]1 #text/2-->
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/2": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/2": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
]),
count: 0
}, _.a])];
M._.w();
$MC = (window.$MC || []).concat(
{
"p": "_",
@ -40,20 +52,9 @@
"__tests__/components/class-counter.marko"
]
});
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/2": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/2": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
]),
count: 0
}, _.a]), "$compat_setScope", 2,
M._.r.push("$compat_setScope", 2,
"__tests__/template.marko_0_count",
1
];
1);
M._.w()
</script>
</body>

66
packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/__snapshots__/resume.expected.md
View File

@ -17,6 +17,17 @@
<!--M_*1 #text/1-->
</div>
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/0": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/0": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
])
}, _.a]), _ =&gt; (_.d = [-2, _.c = _.b[1]])];
M._.w();
$MC = (window.$MC || []).concat(
{
"p": "_",
@ -37,16 +48,7 @@
"__tests__/components/class-counter.marko"
]
});
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/0": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/0": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
])
}, _.a]), "$compat_setScope", 2];
M._.r.push("$compat_setScope", 2);
M._.w()
</script>
</body>
@ -83,6 +85,17 @@ container.querySelector("#class-api").click();
<!--M_*1 #text/1-->
</div>
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/0": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/0": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
])
}, _.a]), _ =&gt; (_.d = [-2, _.c = _.b[1]])];
M._.w();
$MC = (window.$MC || []).concat(
{
"p": "_",
@ -103,16 +116,7 @@ container.querySelector("#class-api").click();
"__tests__/components/class-counter.marko"
]
});
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/0": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/0": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
])
}, _.a]), "$compat_setScope", 2];
M._.r.push("$compat_setScope", 2);
M._.w()
</script>
</body>
@ -147,6 +151,17 @@ container.querySelector("#class-api").click();
<!--M_*1 #text/1-->
</div>
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/0": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/0": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
])
}, _.a]), _ =&gt; (_.d = [-2, _.c = _.b[1]])];
M._.w();
$MC = (window.$MC || []).concat(
{
"p": "_",
@ -167,16 +182,7 @@ container.querySelector("#class-api").click();
"__tests__/components/class-counter.marko"
]
});
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/0": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/0": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
])
}, _.a]), "$compat_setScope", 2];
M._.r.push("$compat_setScope", 2);
M._.w()
</script>
</body>

24
packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/__snapshots__/ssr.expected.md
View File

@ -1,5 +1,5 @@
# Write
<!--M_[2--><!--M#_0--><button id=class-api>0</button><!--M/--><!--M_]1 #text/0--><div id=tags-api>0<!--M_*1 #text/1--></div><script>$MC=(window.$MC||[]).concat({"p":"_","w":[["_0",0,{},{"e":[["count",["__tests__/template.marko_0/onCount",1]]],"f":1}]],"t":["__tests__/components/class-counter.marko"]});WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[0,{"ConditionalScope:#text/0":_.a={m5c:"_0"},"ConditionalRenderer:#text/0":_._.$compat_renderer(_._["__tests__/components/class-counter.marko"])},_.a]),"$compat_setScope",2];M._.w()</script>
<!--M_[2--><!--M#_0--><button id=class-api>0</button><!--M/--><!--M_]1 #text/0--><div id=tags-api>0<!--M_*1 #text/1--></div><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[0,{"ConditionalScope:#text/0":_.a={m5c:"_0"},"ConditionalRenderer:#text/0":_._.$compat_renderer(_._["__tests__/components/class-counter.marko"])},_.a]),_=>(_.d=[-2,_.c=_.b[1]])];M._.w();$MC=(window.$MC||[]).concat({"p":"_","w":[["_0",0,{},{"e":[["count",["__tests__/template.marko_0/onCount",1]]],"f":1}]],"t":["__tests__/components/class-counter.marko"]});M._.r.push("$compat_setScope",2);M._.w()</script>
# Render End
```html
@ -22,6 +22,17 @@
<!--M_*1 #text/1-->
</div>
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/0": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/0": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
])
}, _.a]), _ =&gt; (_.d = [-2, _.c = _.b[1]])];
M._.w();
$MC = (window.$MC || []).concat(
{
"p": "_",
@ -42,16 +53,7 @@
"__tests__/components/class-counter.marko"
]
});
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{
"ConditionalScope:#text/0": _.a = {
m5c: "_0"
},
"ConditionalRenderer:#text/0": _._.$compat_renderer(_._[
"__tests__/components/class-counter.marko"
])
}, _.a]), "$compat_setScope", 2];
M._.r.push("$compat_setScope", 2);
M._.w()
</script>
</body>