archive-gh-me/marko
1
0
Fork 0
mirror of https://github.com/marko-js/marko.git synced 2025-12-08 19:26:05 +00:00
Code Issues Projects Releases Wiki Activity

fix: if resume markers

Browse Source
This commit is contained in:
Michael Rawlings 2024-02-29 17:06:03 -05:00 committed by Dylan Piercey
parent 2752327a9b
commit 30b779cd73
20 changed files with 1193 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/__snapshots__/html.expected/template.js
View File

@ -1,4 +1,4 @@
import { markResumeNode as _markResumeNode, write as _write, escapeXML as _escapeXML, markResumeScopeStart as _markResumeScopeStart, serializedScope as _serializedScope, writeScope as _writeScope, nextScopeId as _nextScopeId, createRenderer as _createRenderer, register as _register, markResumeControlEnd as _markResumeControlEnd, writeEffect as _writeEffect, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
import { markResumeNode as _markResumeNode, write as _write, markResumeScopeStart as _markResumeScopeStart, escapeXML as _escapeXML, serializedScope as _serializedScope, writeScope as _writeScope, nextScopeId as _nextScopeId, createRenderer as _createRenderer, register as _register, markResumeControlEnd as _markResumeControlEnd, writeEffect as _writeEffect, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
const _scope0_id = _nextScopeId();
const show = true;

163
packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/__snapshots__/csr-sanitized.expected.md Normal file
View File

@ -0,0 +1,163 @@
# Render {}
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
0
</button>
</div>
```
# Render
container.querySelector("#count").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
1
</button>
</div>
```
# Render
container.querySelector("#count").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
2
</button>
</div>
```
# Render
container.querySelector("#inner").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
</div>
```
# Render
container.querySelector("#inner").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
2
</button>
</div>
```
# Render
container.querySelector("#count").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
3
</button>
</div>
```
# Render
container.querySelector("#outer").click()
```html
<div>
<button
id="outer"
/>
</div>
```
# Render
container.querySelector("#outer").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
3
</button>
</div>
```
# Render
container.querySelector("#count").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
4
</button>
</div>
```

228
packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/__snapshots__/csr.expected.md Normal file
View File

@ -0,0 +1,228 @@
# Render {}
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
0
</button>
<!---->
</div>
```
# Mutations
```
inserted div0
```
# Render
container.querySelector("#count").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
1
</button>
<!---->
</div>
```
# Mutations
```
div0/button2/#text0: "0" => "1"
```
# Render
container.querySelector("#count").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
2
</button>
<!---->
</div>
```
# Mutations
```
div0/button2/#text0: "1" => "2"
```
# Render
container.querySelector("#inner").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<!---->
</div>
```
# Mutations
```
inserted div0/#text2
removed button after div0/#text2
```
# Render
container.querySelector("#inner").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
2
</button>
<!---->
</div>
```
# Mutations
```
inserted div0/button2
removed #text after div0/button2
div0/button2/#text0: " " => "2"
```
# Render
container.querySelector("#count").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
3
</button>
<!---->
</div>
```
# Mutations
```
div0/button2/#text0: "2" => "3"
```
# Render
container.querySelector("#outer").click()
```html
<div>
<button
id="outer"
/>
</div>
```
# Mutations
```
inserted div0/#text1
removed button after div0/#text1
removed button after div0/#text1
removed #comment after div0/#text1
```
# Render
container.querySelector("#outer").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
3
</button>
<!---->
</div>
```
# Mutations
```
inserted div0/button1
inserted #text
inserted div0/#comment3
removed #text after div0/#comment3
inserted div0/button2
removed #text after div0/button2
div0/button2/#text0: " " => "3"
```
# Render
container.querySelector("#count").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
4
</button>
<!---->
</div>
```
# Mutations
```
div0/button2/#text0: "3" => "4"
```

52
packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/__snapshots__/dom.expected/template.js Normal file
View File

@ -0,0 +1,52 @@
import { on as _on, queueSource as _queueSource, data as _data, register as _register, queueEffect as _queueEffect, dynamicClosure as _dynamicClosure, registerSubscriber as _registerSubscriber, createRenderer as _createRenderer, conditional as _conditional, closure as _closure, dynamicSubscribers as _dynamicSubscribers, value as _value, inConditionalScope as _inConditionalScope, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/dom";
const _count$ifBody_effect = _register("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count", _scope => _on(_scope["#button/0"], "click", function () {
const {
_: {
_: {
count
}
}
} = _scope;
_queueSource(_scope._._, _count, count + 1);
}));
const _count$ifBody = _registerSubscriber("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count/subscriber", /* @__PURE__ */_dynamicClosure("count", (_scope, count) => {
_data(_scope["#text/1"], count);
_queueEffect(_scope, _count$ifBody_effect);
}, _scope => _scope._._));
const _ifBody2 = _register("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_renderer", /* @__PURE__ */_createRenderer("<button id=count> </button>", /* get, next(1), get */" D ", void 0, [_count$ifBody]));
const _if2$ifBody = /* @__PURE__ */_conditional("#text/1");
const _inner$ifBody_effect = _register("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_inner", _scope => _on(_scope["#button/0"], "click", function () {
const {
_: {
inner
}
} = _scope;
_queueSource(_scope._, _inner, !inner);
}));
const _inner$ifBody = /* @__PURE__ */_closure("inner", (_scope, inner) => {
_queueEffect(_scope, _inner$ifBody_effect);
_if2$ifBody(_scope, inner ? _ifBody2 : null);
}, void 0, void 0, _if2$ifBody);
const _ifBody = _register("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_renderer", /* @__PURE__ */_createRenderer("<button id=inner></button><!><!>", /* get, over(1), replace */" b%D", void 0, [_inner$ifBody]));
const _if = /* @__PURE__ */_conditional("#text/1");
const _count = /* @__PURE__ */_value("count", null, _dynamicSubscribers("count"));
const _inner = /* @__PURE__ */_value("inner", null, _inConditionalScope(_inner$ifBody, "#text/1"));
const _outer_effect = _register("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_0_outer", _scope => _on(_scope["#button/0"], "click", function () {
const {
outer
} = _scope;
_queueSource(_scope, _outer, !outer);
}));
const _outer = /* @__PURE__ */_value("outer", (_scope, outer) => {
_queueEffect(_scope, _outer_effect);
_if(_scope, outer ? _ifBody : null);
}, void 0, _if);
const _setup = _scope => {
_outer(_scope, true);
_inner(_scope, true);
_count(_scope, 0);
};
export const template = "<div><button id=outer></button><!></div>";
export const walks = /* next(1), get, over(1), replace, out(1) */"D b%l";
export const setup = _setup;
export default /* @__PURE__ */_createTemplate( /* @__PURE__ */_createRenderer(template, walks, setup), "packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko");

43
packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/__snapshots__/html.expected/template.js Normal file
View File

@ -0,0 +1,43 @@
import { markResumeNode as _markResumeNode, write as _write, markResumeScopeStart as _markResumeScopeStart, escapeXML as _escapeXML, serializedScope as _serializedScope, writeEffect as _writeEffect, writeScope as _writeScope, nextScopeId as _nextScopeId, createRenderer as _createRenderer, register as _register, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, markResumeControlEnd as _markResumeControlEnd, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
const _scope0_id = _nextScopeId();
const outer = true;
const inner = true;
const count = 0;
_write(`<div><button id=outer></button>${_markResumeNode(_scope0_id, "#button/0")}`);
let _scope1_, _ifRenderer2;
if (outer) {
const _scope1_id = _nextScopeId();
_write(`${_markResumeScopeStart(_scope1_id)}<button id=inner></button>${_markResumeNode(_scope1_id, "#button/0")}`);
let _ifScopeId, _scope2_, _ifRenderer;
if (inner) {
const _scope2_id = _nextScopeId();
_write(`<button id=count>${_escapeXML(count)}${_markResumeNode(_scope2_id, "#text/1")}</button>${_markResumeNode(_scope2_id, "#button/0")}`);
_writeEffect(_scope2_id, "packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count");
_writeEffect(_scope2_id, "packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count/subscriber");
_writeScope(_scope2_id, _scope2_ = {
"_": _serializedScope(_scope1_id)
});
_register(_ifRenderer = /* @__PURE__ */_createRenderer(() => {}), "packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_renderer");
_ifScopeId = _scope2_id;
}
_write(`${_markResumeControlSingleNodeEnd(_scope1_id, "#text/1", _ifScopeId)}`);
_writeEffect(_scope1_id, "packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_inner");
_writeScope(_scope1_id, _scope1_ = {
"#text/1!": _scope2_,
"#text/1(": _ifRenderer,
"_": _serializedScope(_scope0_id)
});
_register(_ifRenderer2 = /* @__PURE__ */_createRenderer(() => {}), "packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_renderer");
}
_write(`${_markResumeControlEnd(_scope0_id, "#text/1")}</div>`);
_writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_0_outer");
_writeScope(_scope0_id, {
"outer": outer,
"count": count,
"inner": inner,
"#text/1!": _scope1_,
"#text/1(": _ifRenderer2
});
});
export default /* @__PURE__ */_createTemplate(_renderer, "packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko");

163
packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/__snapshots__/resume-sanitized.expected.md Normal file
View File

@ -0,0 +1,163 @@
# Render {}
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
0
</button>
</div>
```
# Render
container.querySelector("#count").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
1
</button>
</div>
```
# Render
container.querySelector("#count").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
2
</button>
</div>
```
# Render
container.querySelector("#inner").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
</div>
```
# Render
container.querySelector("#inner").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
2
</button>
</div>
```
# Render
container.querySelector("#count").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
3
</button>
</div>
```
# Render
container.querySelector("#outer").click()
```html
<div>
<button
id="outer"
/>
</div>
```
# Render
container.querySelector("#outer").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
3
</button>
</div>
```
# Render
container.querySelector("#count").click()
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
4
</button>
</div>
```

339
packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/__snapshots__/resume.expected.md Normal file
View File

@ -0,0 +1,339 @@
# Render {}
```html
<html>
<head />
<body>
<div>
<button
id="outer"
/>
<!--M*0 #button/0-->
<!--M[1-->
<button
id="inner"
/>
<!--M*1 #button/0-->
<button
id="count"
>
0
<!--M*2 #text/1-->
</button>
<!--M*2 #button/0-->
<!--M|1 #text/1 2-->
<!--M]0 #text/1-->
</div>
<script>
(M$h=[]).push((b,s,h,j,k,m)=&gt;(m={0:k={outer:!0,count:0,inner:!0,"#text/1!":h={"#text/1!":j={},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_renderer")},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_renderer")},1:h,2:j},j._=h,h._=k,m),[2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count",2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_inner",0,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_0_outer",])
</script>
</body>
</html>
```
# Mutations
```
```
# Render
container.querySelector("#count").click()
```html
<html>
<head />
<body>
<div>
<button
id="outer"
/>
<!--M*0 #button/0-->
<!--M[1-->
<button
id="inner"
/>
<!--M*1 #button/0-->
<button
id="count"
>
1
<!--M*2 #text/1-->
</button>
<!--M*2 #button/0-->
<!--M|1 #text/1 2-->
<!--M]0 #text/1-->
</div>
<script>
(M$h=[]).push((b,s,h,j,k,m)=&gt;(m={0:k={outer:!0,count:0,inner:!0,"#text/1!":h={"#text/1!":j={},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_renderer")},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_renderer")},1:h,2:j},j._=h,h._=k,m),[2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count",2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_inner",0,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_0_outer",])
</script>
</body>
</html>
```
# Mutations
```
#document/html0/body1/div0/button5/#text0: "0" => "1"
```
# Render
container.querySelector("#count").click()
```html
<html>
<head />
<body>
<div>
<button
id="outer"
/>
<!--M*0 #button/0-->
<!--M[1-->
<button
id="inner"
/>
<!--M*1 #button/0-->
<button
id="count"
>
2
<!--M*2 #text/1-->
</button>
<!--M*2 #button/0-->
<!--M|1 #text/1 2-->
<!--M]0 #text/1-->
</div>
<script>
(M$h=[]).push((b,s,h,j,k,m)=&gt;(m={0:k={outer:!0,count:0,inner:!0,"#text/1!":h={"#text/1!":j={},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_renderer")},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_renderer")},1:h,2:j},j._=h,h._=k,m),[2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count",2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_inner",0,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_0_outer",])
</script>
</body>
</html>
```
# Mutations
```
#document/html0/body1/div0/button5/#text0: "1" => "2"
```
# Render
container.querySelector("#inner").click()
```html
<html>
<head />
<body>
<div>
<button
id="outer"
/>
<!--M*0 #button/0-->
<!--M[1-->
<button
id="inner"
/>
<!--M*1 #button/0-->
<!--M|1 #text/1 2-->
<!--M*2 #button/0-->
<!--M]0 #text/1-->
</div>
<script>
(M$h=[]).push((b,s,h,j,k,m)=&gt;(m={0:k={outer:!0,count:0,inner:!0,"#text/1!":h={"#text/1!":j={},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_renderer")},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_renderer")},1:h,2:j},j._=h,h._=k,m),[2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count",2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_inner",0,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_0_outer",])
</script>
</body>
</html>
```
# Mutations
```
removed #document/html0/body1/div0/#comment5 after #document/html0/body1/div0/#comment6
inserted #document/html0/body1/div0/#comment5
removed button after #document/html0/body1/div0/#comment5
```
# Render
container.querySelector("#inner").click()
```html
<html>
<head />
<body>
<div>
<button
id="outer"
/>
<!--M*0 #button/0-->
<!--M[1-->
<button
id="inner"
/>
<!--M*1 #button/0-->
<button
id="count"
>
2
</button>
<!--M*2 #button/0-->
<!--M]0 #text/1-->
</div>
<script>
(M$h=[]).push((b,s,h,j,k,m)=&gt;(m={0:k={outer:!0,count:0,inner:!0,"#text/1!":h={"#text/1!":j={},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_renderer")},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_renderer")},1:h,2:j},j._=h,h._=k,m),[2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count",2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_inner",0,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_0_outer",])
</script>
</body>
</html>
```
# Mutations
```
inserted #document/html0/body1/div0/button5
removed #comment after #document/html0/body1/div0/button5
#document/html0/body1/div0/button5/#text0: " " => "2"
```
# Render
container.querySelector("#count").click()
```html
<html>
<head />
<body>
<div>
<button
id="outer"
/>
<!--M*0 #button/0-->
<!--M[1-->
<button
id="inner"
/>
<!--M*1 #button/0-->
<button
id="count"
>
3
</button>
<!--M*2 #button/0-->
<!--M]0 #text/1-->
</div>
<script>
(M$h=[]).push((b,s,h,j,k,m)=&gt;(m={0:k={outer:!0,count:0,inner:!0,"#text/1!":h={"#text/1!":j={},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_renderer")},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_renderer")},1:h,2:j},j._=h,h._=k,m),[2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count",2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_inner",0,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_0_outer",])
</script>
</body>
</html>
```
# Mutations
```
#document/html0/body1/div0/button5/#text0: "2" => "3"
```
# Render
container.querySelector("#outer").click()
```html
<html>
<head />
<body>
<div>
<button
id="outer"
/>
<!--M*0 #button/0-->
<!--M]0 #text/1-->
</div>
<script>
(M$h=[]).push((b,s,h,j,k,m)=&gt;(m={0:k={outer:!0,count:0,inner:!0,"#text/1!":h={"#text/1!":j={},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_renderer")},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_renderer")},1:h,2:j},j._=h,h._=k,m),[2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count",2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_inner",0,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_0_outer",])
</script>
</body>
</html>
```
# Mutations
```
removed #document/html0/body1/div0/#comment2 after #comment
inserted #document/html0/body1/div0/#comment2
removed #comment after #document/html0/body1/div0/#comment2
removed button after #document/html0/body1/div0/#comment2
removed #comment after #document/html0/body1/div0/#comment2
removed button after #document/html0/body1/div0/#comment2
removed #comment after #document/html0/body1/div0/#comment2
```
# Render
container.querySelector("#outer").click()
```html
<html>
<head />
<body>
<div>
<button
id="outer"
/>
<!--M*0 #button/0-->
<button
id="inner"
/>
<button
id="count"
>
3
</button>
<!---->
</div>
<script>
(M$h=[]).push((b,s,h,j,k,m)=&gt;(m={0:k={outer:!0,count:0,inner:!0,"#text/1!":h={"#text/1!":j={},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_renderer")},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_renderer")},1:h,2:j},j._=h,h._=k,m),[2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count",2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_inner",0,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_0_outer",])
</script>
</body>
</html>
```
# Mutations
```
inserted #document/html0/body1/div0/button2
inserted #text
inserted #document/html0/body1/div0/#comment4
removed #comment after #document/html0/body1/div0/#comment4
inserted #document/html0/body1/div0/button3
removed #text after #document/html0/body1/div0/button3
#document/html0/body1/div0/button3/#text0: " " => "3"
```
# Render
container.querySelector("#count").click()
```html
<html>
<head />
<body>
<div>
<button
id="outer"
/>
<!--M*0 #button/0-->
<button
id="inner"
/>
<button
id="count"
>
4
</button>
<!---->
</div>
<script>
(M$h=[]).push((b,s,h,j,k,m)=&gt;(m={0:k={outer:!0,count:0,inner:!0,"#text/1!":h={"#text/1!":j={},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_renderer")},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_renderer")},1:h,2:j},j._=h,h._=k,m),[2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count",2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_inner",0,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_0_outer",])
</script>
</body>
</html>
```
# Mutations
```
#document/html0/body1/div0/button3/#text0: "3" => "4"
```

16
packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/__snapshots__/ssr-sanitized.expected.md Normal file
View File

@ -0,0 +1,16 @@
# Render "End"
```html
<div>
<button
id="outer"
/>
<button
id="inner"
/>
<button
id="count"
>
0
</button>
</div>
```

56
packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/__snapshots__/ssr.expected.md Normal file
View File

@ -0,0 +1,56 @@
# Write
<div><button id=outer></button><!M*0 #button/0><!M[1><button id=inner></button><!M*1 #button/0><button id=count>0<!M*2 #text/1></button><!M*2 #button/0><!M|1 #text/1 2><!M]0 #text/1></div><script>(M$h=[]).push((b,s,h,j,k,m)=>(m={0:k={outer:!0,count:0,inner:!0,"#text/1!":h={"#text/1!":j={},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_renderer")},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_renderer")},1:h,2:j},j._=h,h._=k,m),[2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count",2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_inner",0,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_0_outer",])</script>
# Render "End"
```html
<html>
<head />
<body>
<div>
<button
id="outer"
/>
<!--M*0 #button/0-->
<!--M[1-->
<button
id="inner"
/>
<!--M*1 #button/0-->
<button
id="count"
>
0
<!--M*2 #text/1-->
</button>
<!--M*2 #button/0-->
<!--M|1 #text/1 2-->
<!--M]0 #text/1-->
</div>
<script>
(M$h=[]).push((b,s,h,j,k,m)=&gt;(m={0:k={outer:!0,count:0,inner:!0,"#text/1!":h={"#text/1!":j={},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_renderer")},"#text/1(":b("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_renderer")},1:h,2:j},j._=h,h._=k,m),[2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count",2,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_inner",0,"packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_0_outer",])
</script>
</body>
</html>
```
# Mutations
```
inserted #document/html0
inserted #document/html0/head0
inserted #document/html0/body1
inserted #document/html0/body1/div0
inserted #document/html0/body1/div0/button0
inserted #document/html0/body1/div0/#comment1
inserted #document/html0/body1/div0/#comment2
inserted #document/html0/body1/div0/button3
inserted #document/html0/body1/div0/#comment4
inserted #document/html0/body1/div0/button5
inserted #document/html0/body1/div0/button5/#text0
inserted #document/html0/body1/div0/button5/#comment1
inserted #document/html0/body1/div0/#comment6
inserted #document/html0/body1/div0/#comment7
inserted #document/html0/body1/div0/#comment8
inserted #document/html0/body1/script1
inserted #document/html0/body1/script1/#text0
```

14
packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko Normal file
View File

@ -0,0 +1,14 @@
<let/outer = true/>
<let/inner = true/>
<let/count = 0/>
<div>
<button id="outer" onClick(){ outer = !outer }/>
<if=outer>
<button id="inner" onClick(){ inner = !inner }/>
<if=inner>
<button id="count" onClick(){ count++ }>
${count}
</button>
</if>
</if>
</div>

21
packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/test.ts Normal file
View File

@ -0,0 +1,21 @@
const clickOuter = (container: Element) => {
container.querySelector<HTMLButtonElement>("#outer")!.click();
};
const clickInner = (container: Element) => {
container.querySelector<HTMLButtonElement>("#inner")!.click();
};
const clickCount = (container: Element) => {
container.querySelector<HTMLButtonElement>("#count")!.click();
};
export const steps = [
{},
clickCount,
clickCount,
clickInner,
clickInner,
clickCount,
clickOuter,
clickOuter,
clickCount,
];

5
packages/translator-tags/src/__tests__/fixtures/toggle-nested/__snapshots__/html.expected/template.js
View File

@ -1,4 +1,4 @@
import { write as _write, escapeXML as _escapeXML, markResumeNode as _markResumeNode, serializedScope as _serializedScope, writeScope as _writeScope, nextScopeId as _nextScopeId, createRenderer as _createRenderer, register as _register, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, markResumeScopeStart as _markResumeScopeStart, markResumeControlEnd as _markResumeControlEnd, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
import { write as _write, markResumeScopeStart as _markResumeScopeStart, escapeXML as _escapeXML, markResumeNode as _markResumeNode, serializedScope as _serializedScope, writeScope as _writeScope, nextScopeId as _nextScopeId, createRenderer as _createRenderer, register as _register, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, markResumeControlEnd as _markResumeControlEnd, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
const _scope0_id = _nextScopeId();
const {
@ -10,6 +10,7 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
let _scope1_, _ifRenderer3;
if (show) {
const _scope1_id = _nextScopeId();
_write(`${_markResumeScopeStart(_scope1_id)}`);
let _ifScopeId, _scope2_, _ifRenderer;
if (value1) {
const _scope2_id = _nextScopeId();
@ -31,7 +32,7 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
_register(_ifRenderer2 = /* @__PURE__ */_createRenderer(() => {}), "packages/translator-tags/src/__tests__/fixtures/toggle-nested/template.marko_3_renderer");
_ifScopeId2 = _scope3_id;
}
_write(`${_markResumeScopeStart(_scope1_id)}${_markResumeControlSingleNodeEnd(_scope1_id, "#text/1", _ifScopeId2)}`);
_write(`${_markResumeControlSingleNodeEnd(_scope1_id, "#text/1", _ifScopeId2)}`);
_writeScope(_scope1_id, _scope1_ = {
"#text/0!": _scope2_,
"#text/0(": _ifRenderer,

4
packages/translator-tags/src/__tests__/fixtures/toggle-nested/__snapshots__/resume-sanitized.expected.md Normal file
View File

@ -0,0 +1,4 @@
# Render {"show":false,"value1":"Hello","value2":"World"}
```html
<div />
```

19
packages/translator-tags/src/__tests__/fixtures/toggle-nested/__snapshots__/resume.expected.md Normal file
View File

@ -0,0 +1,19 @@
# Render {"show":false,"value1":"Hello","value2":"World"}
```html
<html>
<head />
<body>
<div>
<!--M]0 #text/0-->
</div>
<script>
(M$h=[]).push((b,s)=&gt;({0:{}}),[])
</script>
</body>
</html>
```
# Mutations
```
```

4
packages/translator-tags/src/__tests__/fixtures/toggle-nested/__snapshots__/ssr-sanitized.expected.md Normal file
View File

@ -0,0 +1,4 @@
# Render "End"
```html
<div />
```

29
packages/translator-tags/src/__tests__/fixtures/toggle-nested/__snapshots__/ssr.expected.md Normal file
View File

@ -0,0 +1,29 @@
# Write
<div><!M]0 #text/0></div><script>(M$h=[]).push((b,s)=>({0:{}}),[])</script>
# Render "End"
```html
<html>
<head />
<body>
<div>
<!--M]0 #text/0-->
</div>
<script>
(M$h=[]).push((b,s)=&gt;({0:{}}),[])
</script>
</body>
</html>
```
# Mutations
```
inserted #document/html0
inserted #document/html0/head0
inserted #document/html0/body1
inserted #document/html0/body1/div0
inserted #document/html0/body1/div0/#comment0
inserted #document/html0/body1/script1
inserted #document/html0/body1/script1/#text0
```

4
packages/translator-tags/src/__tests__/fixtures/toggle-nested/test.ts
View File

@ -24,6 +24,4 @@ export const steps = [
value1: "Goodbye",
value2: "World",
},
];
export const skip_ssr = true;
export const skip_resume = true;
];

8
packages/translator-tags/src/core/condition/else-if.ts
View File

@ -1,7 +1,11 @@
import { type Tag, assertNoParams, assertNoVar } from "@marko/babel-utils";
import { types as t } from "@marko/compiler";
import customTag from "../../visitors/tag/custom-tag";
import { exitBranchAnalyze, exitBranchTranslate } from "./if";
import {
enterBranchTranslate,
exitBranchAnalyze,
exitBranchTranslate,
} from "./if";
export default {
analyze: {
@ -43,6 +47,8 @@ export default {
);
}
}
enterBranchTranslate(tag);
},
exit(tag) {
exitBranchTranslate(tag);

8
packages/translator-tags/src/core/condition/else.ts
View File

@ -1,7 +1,11 @@
import { type Tag, assertNoParams, assertNoVar } from "@marko/babel-utils";
import type { types as t } from "@marko/compiler";
import customTag from "../../visitors/tag/custom-tag";
import { exitBranchAnalyze, exitBranchTranslate } from "./if";
import {
enterBranchTranslate,
exitBranchAnalyze,
exitBranchTranslate,
} from "./if";
export default {
analyze: {
@ -38,6 +42,8 @@ export default {
);
}
}
enterBranchTranslate(tag);
},
exit(tag) {
exitBranchTranslate(tag);

29
packages/translator-tags/src/core/condition/if.ts
View File

@ -89,6 +89,7 @@ export default {
if (isOutputHTML()) {
writer.flushBefore(tag);
}
enterBranchTranslate(tag);
},
exit(tag) {
exitBranchTranslate(tag);
@ -131,6 +132,13 @@ function getBranches(tag: t.NodePath<t.MarkoTag>, bodySection: Section) {
return [isLast, branches] as const;
}
function getRoot(tag: t.NodePath<t.MarkoTag>) {
if (isCoreTagName(tag, "if")) {
return tag;
}
return BRANCHES_LOOKUP.get(tag)![0].tag;
}
export function exitBranchAnalyze(tag: t.NodePath<t.MarkoTag>) {
const tagBody = tag.get("body");
const bodySection = getOrCreateSection(tagBody);
@ -149,6 +157,21 @@ export function exitBranchAnalyze(tag: t.NodePath<t.MarkoTag>) {
}
}
export function enterBranchTranslate(tag: t.NodePath<t.MarkoTag>) {
const tagBody = tag.get("body");
const bodySection = getSection(tagBody);
const rootExtra = getRoot(tag).node.extra!;
const isStateful = rootExtra.isStateful;
const singleNodeOptimization = rootExtra.singleNodeOptimization;
if (isOutputHTML() && isStateful && !singleNodeOptimization) {
writer.writeTo(tagBody)`${callRuntime(
"markResumeScopeStart",
getScopeIdIdentifier(bodySection),
)}`;
}
}
export function exitBranchTranslate(tag: t.NodePath<t.MarkoTag>) {
const tagBody = tag.get("body");
const section = getSection(tag);
@ -160,12 +183,6 @@ export function exitBranchTranslate(tag: t.NodePath<t.MarkoTag>) {
if (isOutputHTML()) {
if (isStateful) {
if (!singleNodeOptimization) {
writer.writePrependTo(tagBody)`${callRuntime(
"markResumeScopeStart",
getScopeIdIdentifier(bodySection),
)}`;
}
setRegisterScopeBuilder(tag, (scope: t.Expression) => {
return t.assignmentExpression(
"=",