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: prevent tag arguments normalized as input

Browse Source
This commit is contained in:
dpiercey 2025-04-03 07:30:19 -07:00 committed by Dylan Piercey
parent 40b332e25a
commit 9cba851a4b
27 changed files with 257 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/kind-rockets-remain.md Normal file
View File

@ -0,0 +1,5 @@
---
"@marko/runtime-tags": patch
---
Ensure when tag arguments are used for a dynamic tag with a single argument that it does not become treated the same as normal input. The normal input runtime will add the `content` as well as default to an empty object which was breaking some usages of tag arguments.

4
packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/dom.expected/tags/child.js
View File

@ -7,9 +7,9 @@ const _expr_content_value = /* @__PURE__ */_$.intersection(5, _scope => {
content,
value
} = _scope;
_dynamicTag(_scope, content, () => value);
_dynamicTag(_scope, content, () => [value]);
});
const _dynamicTag = /* @__PURE__ */_$.dynamicTag("#text/0");
const _dynamicTag = /* @__PURE__ */_$.dynamicTag("#text/0", 0, 0, 1);
export const _value = /* @__PURE__ */_$.value("value", _expr_content_value);
export const _content = /* @__PURE__ */_$.value("content", _expr_content_value);
export const _input = /* @__PURE__ */_$.value("input", (_scope, input) => {

6
packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/dom.expected/template.hydrate.js
View File

@ -1,9 +1,9 @@
// size: 620 (min) 309 (brotli)
// size: 629 (min) 314 (brotli)
const _expr_content_value = _$.intersection(5, (_scope) => {
const { 3: content, 4: value } = _scope;
_dynamicTag(_scope, content, () => value);
_dynamicTag(_scope, content, () => [value]);
}),
_dynamicTag = _$.dynamicTag(),
_dynamicTag = _$.dynamicTag(0, 0, 0, 1),
_value = _$.value(4, _expr_content_value),
_content = _$.value(3, _expr_content_value),
_inner$child_content = _$.value(3, (_scope, inner) =>

2
packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/html.expected/tags/child.js
View File

@ -6,7 +6,7 @@ export default _$.createTemplate("__tests__/tags/child.marko", input => {
value
} = input;
_$.write("<div>");
_$.dynamicTag(_scope0_id, "#text/0", content, value, 0, 0, 1);
_$.dynamicTag(_scope0_id, "#text/0", content, [value], 0, 1, 1);
_$.write("</div>");
_$.writeScope(_scope0_id, {
content,

4
packages/runtime-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/dom.expected/tags/custom-tag.js
View File

@ -6,9 +6,9 @@ const _expr_input_content_x = /* @__PURE__ */_$.intersection(7, _scope => {
input_content,
x
} = _scope;
_dynamicTag(_scope, input_content, () => x);
_dynamicTag(_scope, input_content, () => [x]);
});
const _dynamicTag = /* @__PURE__ */_$.dynamicTag("#text/2");
const _dynamicTag = /* @__PURE__ */_$.dynamicTag("#text/2", 0, 0, 1);
const _x_effect = _$.effect("__tests__/tags/custom-tag.marko_0_x", (_scope, {
x
}) => _$.on(_scope["#button/0"], "click", function () {

6
packages/runtime-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/dom.expected/template.hydrate.js
View File

@ -1,9 +1,9 @@
// size: 335 (min) 225 (brotli)
// size: 343 (min) 219 (brotli)
const _expr_input_content_x = _$.intersection(7, (_scope) => {
const { 5: input_content, 6: x } = _scope;
_dynamicTag(_scope, input_content, () => x);
_dynamicTag(_scope, input_content, () => [x]);
}),
_dynamicTag = _$.dynamicTag(2),
_dynamicTag = _$.dynamicTag(2, 0, 0, 1),
_x_effect = _$.effect("a0", (_scope, { 6: x }) =>
_$.on(_scope[0], "click", function () {
_x(_scope, x + 1);

2
packages/runtime-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/html.expected/tags/custom-tag.js
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, 0, 1);
_$.dynamicTag(_scope0_id, "#text/2", input.content, [x], 0, 1, 1);
_$.writeEffect(_scope0_id, "__tests__/tags/custom-tag.marko_0_x");
_$.writeScope(_scope0_id, {
input_content: input.content,

6
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/dom.expected/template.hydrate.js
View File

@ -1,4 +1,4 @@
// size: 366 (min) 221 (brotli)
// size: 370 (min) 229 (brotli)
const _setup = () => {},
_input = _$.value(2, (_scope, input) => {
_$.data(_scope[0], input), _$.tagVarSignal(_scope, input);
@ -6,7 +6,7 @@ const _setup = () => {},
const tags = [
_$.createTemplate("a", "<div>Child: <!></div>", "Db%l", _setup, _input),
],
_dynamicTag = _$.dynamicTag(2, 0, () => _y),
_dynamicTag = _$.dynamicTag(2, 0, () => _y, 1),
_y = _$.registerBoundSignal(
"b0",
_$.value(6, (_scope, y) => _$.data(_scope[4], y)),
@ -18,7 +18,7 @@ const tags = [
),
_x = _$.state(5, (_scope, x) => {
_$.data(_scope[1], x),
_dynamicTag(_scope, tags[0], () => x),
_dynamicTag(_scope, tags[0], () => [x]),
_x_effect(_scope);
});
init();

4
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/dom.expected/template.js
View File

@ -3,7 +3,7 @@ export const _walks = /* get, next(1), over(1), replace, out(1), dynamicTagWithV
import customTag from './tags/custom-tag.marko';
const tags = [customTag];
import * as _$ from "@marko/runtime-tags/debug/dom";
const _dynamicTag = /* @__PURE__ */_$.dynamicTag("#text/2", 0, () => _y);
const _dynamicTag = /* @__PURE__ */_$.dynamicTag("#text/2", 0, () => _y, 1);
const _y = _$.registerBoundSignal("__tests__/template.marko_0_y/var", /* @__PURE__ */_$.value("y", (_scope, y) => _$.data(_scope["#text/4"], y)));
const _x_effect = _$.effect("__tests__/template.marko_0_x", (_scope, {
x
@ -12,7 +12,7 @@ const _x_effect = _$.effect("__tests__/template.marko_0_x", (_scope, {
}));
const _x = /* @__PURE__ */_$.state("x/5", (_scope, x) => {
_$.data(_scope["#text/1"], x);
_dynamicTag(_scope, tags[0], () => x);
_dynamicTag(_scope, tags[0], () => [x]);
_x_effect(_scope);
});
export function _setup(_scope) {

2
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/html.expected/template.js
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 _dynamicScope = _$.peekNextScope();
const y = _$.dynamicTag(_scope0_id, "#text/2", tags[0], x, 0, 0, 1);
const y = _$.dynamicTag(_scope0_id, "#text/2", tags[0], [x], 0, 1, 1);
_$.setTagVar(_scope0_id, "#scopeOffset/3", _dynamicScope, "__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");

36
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/csr-sanitized.expected.md
View File

@ -6,6 +6,15 @@
<div>
1
</div>
<div>
false
</div>
<div>
true
</div>
<div>
"spread1"
</div>
```
@ -20,6 +29,15 @@ container.querySelector("button").click();
<div>
2
</div>
<div>
false
</div>
<div>
true
</div>
<div>
"spread1"
</div>
```
@ -34,6 +52,15 @@ container.querySelector("button").click();
<div>
3
</div>
<div>
false
</div>
<div>
true
</div>
<div>
"spread1"
</div>
```
@ -48,4 +75,13 @@ container.querySelector("button").click();
<div>
4
</div>
<div>
false
</div>
<div>
true
</div>
<div>
"spread1"
</div>
```

44
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/csr.expected.md
View File

@ -6,12 +6,21 @@
<div>
1
</div>
<div>
false
</div>
<div>
true
</div>
<div>
"spread1"
</div>
<!---->
```
# Mutations
```
INSERT button, div, #comment
INSERT button, div0, div1, div2, div3, #comment
```
# Render
@ -25,13 +34,22 @@ container.querySelector("button").click();
<div>
2
</div>
<div>
false
</div>
<div>
true
</div>
<div>
"spread1"
</div>
<!---->
```
# Mutations
```
UPDATE button/#text1 "1" => "2"
UPDATE div/#text "1" => "2"
UPDATE div0/#text "1" => "2"
```
# Render
@ -45,13 +63,22 @@ container.querySelector("button").click();
<div>
3
</div>
<div>
false
</div>
<div>
true
</div>
<div>
"spread1"
</div>
<!---->
```
# Mutations
```
UPDATE button/#text1 "2" => "3"
UPDATE div/#text "2" => "3"
UPDATE div0/#text "2" => "3"
```
# Render
@ -65,11 +92,20 @@ container.querySelector("button").click();
<div>
4
</div>
<div>
false
</div>
<div>
true
</div>
<div>
"spread1"
</div>
<!---->
```
# Mutations
```
UPDATE button/#text1 "3" => "4"
UPDATE div/#text "3" => "4"
UPDATE div0/#text "3" => "4"
```

2
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/tags/custom-tag.js
View File

@ -2,5 +2,5 @@ export const _template = "<div> </div>";
export const _walks = /* next(1), get, out(1) */"D l";
export const _setup = () => {};
import * as _$ from "@marko/runtime-tags/debug/dom";
export const _input = /* @__PURE__ */_$.value("input", (_scope, input) => _$.data(_scope["#text/0"], input));
export const _input = /* @__PURE__ */_$.value("input", (_scope, input) => _$.data(_scope["#text/0"], JSON.stringify(input)));
export default /* @__PURE__ */_$.createTemplate("__tests__/tags/custom-tag.marko", _template, _walks, _setup, _input);

10
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/template.hydrate.js
View File

@ -1,14 +1,16 @@
// size: 273 (min) 187 (brotli)
// size: 289 (min) 204 (brotli)
const _setup = () => {},
_input = _$.value(2, (_scope, input) => _$.data(_scope[0], input));
_input = _$.value(2, (_scope, input) =>
_$.data(_scope[0], JSON.stringify(input)),
);
const tags = [_$.createTemplate("a", "<div> </div>", "D l", _setup, _input)],
_dynamicTag = _$.dynamicTag(2, 0, 0, 1),
_x_effect = _$.effect("b0", (_scope, { 3: x }) =>
_x_effect = _$.effect("b0", (_scope, { 6: x }) =>
_$.on(_scope[0], "click", function () {
_x(_scope, x + 1);
}),
),
_x = _$.state(3, (_scope, x) => {
_x = _$.state(6, (_scope, x) => {
_$.data(_scope[1], x),
_dynamicTag(_scope, tags[0], () => [x, "foo"]),
_x_effect(_scope);

12
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/template.js
View File

@ -1,20 +1,26 @@
export const _template = "<button>Count: <!></button><!><!>";
export const _walks = /* get, next(1), over(1), replace, out(1), replace, over(1) */" Db%l%bD";
export const _template = "<button>Count: <!></button><!><!><!><!><!>";
export const _walks = /* get, next(1), over(1), replace, out(1), replace, over(1), replace, over(1), replace, over(1), replace, over(1) */" Db%l%b%b%b%bD";
import customTag from './tags/custom-tag.marko';
const tags = [customTag];
import * as _$ from "@marko/runtime-tags/debug/dom";
const _dynamicTag4 = /* @__PURE__ */_$.dynamicTag("#text/5", 0, 0, 1);
const _dynamicTag3 = /* @__PURE__ */_$.dynamicTag("#text/4", 0, 0, 1);
const _dynamicTag2 = /* @__PURE__ */_$.dynamicTag("#text/3", 0, 0, 1);
const _dynamicTag = /* @__PURE__ */_$.dynamicTag("#text/2", 0, 0, 1);
const _x_effect = _$.effect("__tests__/template.marko_0_x", (_scope, {
x
}) => _$.on(_scope["#button/0"], "click", function () {
_x(_scope, x + 1), x;
}));
const _x = /* @__PURE__ */_$.state("x/3", (_scope, x) => {
const _x = /* @__PURE__ */_$.state("x/6", (_scope, x) => {
_$.data(_scope["#text/1"], x);
_dynamicTag(_scope, tags[0], () => [x, 'foo']);
_x_effect(_scope);
});
export function _setup(_scope) {
_x(_scope, 1);
_dynamicTag2(_scope, tags[0], () => [false]);
_dynamicTag3(_scope, tags[0], () => [true]);
_dynamicTag4(_scope, tags[0], () => [...["spread1", "spread2"]]);
}
export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _template, _walks, _setup);

2
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/html.expected/tags/custom-tag.js
View File

@ -1,5 +1,5 @@
import * as _$ from "@marko/runtime-tags/debug/html";
export default _$.createTemplate("__tests__/tags/custom-tag.marko", input => {
const _scope0_id = _$.nextScopeId();
_$.write(`<div>${_$.escapeXML(input)}${_$.markResumeNode(_scope0_id, "#text/0")}</div>`);
_$.write(`<div>${_$.escapeXML(JSON.stringify(input))}${_$.markResumeNode(_scope0_id, "#text/0")}</div>`);
});

3
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/html.expected/template.js
View File

@ -6,6 +6,9 @@ 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")}`);
_$.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);
_$.writeEffect(_scope0_id, "__tests__/template.marko_0_x");
_$.writeScope(_scope0_id, {
x

36
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/resume-sanitized.expected.md
View File

@ -6,6 +6,15 @@
<div>
1
</div>
<div>
false
</div>
<div>
true
</div>
<div>
"spread1"
</div>
```
@ -20,6 +29,15 @@ container.querySelector("button").click();
<div>
2
</div>
<div>
false
</div>
<div>
true
</div>
<div>
"spread1"
</div>
```
@ -34,6 +52,15 @@ container.querySelector("button").click();
<div>
3
</div>
<div>
false
</div>
<div>
true
</div>
<div>
"spread1"
</div>
```
@ -48,4 +75,13 @@ container.querySelector("button").click();
<div>
4
</div>
<div>
false
</div>
<div>
true
</div>
<div>
"spread1"
</div>
```

54
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/resume.expected.md
View File

@ -16,6 +16,18 @@
<!--M_*2 #text/0-->
</div>
<!--M_]1 #text/2-->
<div>
false
<!--M_*3 #text/0-->
</div>
<div>
true
<!--M_*4 #text/0-->
</div>
<div>
"spread1"
<!--M_*5 #text/0-->
</div>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b=[0,{"ConditionalScope:#text/2":_.a={},"ConditionalRenderer:#text/2":"__tests__/tags/custom-tag.marko",x:1},_.a]),1,"__tests__/template.marko_0_x"];M._.w()
</script>
@ -45,6 +57,18 @@ container.querySelector("button").click();
<!--M_*2 #text/0-->
</div>
<!--M_]1 #text/2-->
<div>
false
<!--M_*3 #text/0-->
</div>
<div>
true
<!--M_*4 #text/0-->
</div>
<div>
"spread1"
<!--M_*5 #text/0-->
</div>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b=[0,{"ConditionalScope:#text/2":_.a={},"ConditionalRenderer:#text/2":"__tests__/tags/custom-tag.marko",x:1},_.a]),1,"__tests__/template.marko_0_x"];M._.w()
</script>
@ -55,7 +79,7 @@ container.querySelector("button").click();
# Mutations
```
UPDATE html/body/button/#text1 "1" => "2"
UPDATE html/body/div/#text "1" => "2"
UPDATE html/body/div0/#text "1" => "2"
```
# Render
@ -79,6 +103,18 @@ container.querySelector("button").click();
<!--M_*2 #text/0-->
</div>
<!--M_]1 #text/2-->
<div>
false
<!--M_*3 #text/0-->
</div>
<div>
true
<!--M_*4 #text/0-->
</div>
<div>
"spread1"
<!--M_*5 #text/0-->
</div>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b=[0,{"ConditionalScope:#text/2":_.a={},"ConditionalRenderer:#text/2":"__tests__/tags/custom-tag.marko",x:1},_.a]),1,"__tests__/template.marko_0_x"];M._.w()
</script>
@ -89,7 +125,7 @@ container.querySelector("button").click();
# Mutations
```
UPDATE html/body/button/#text1 "2" => "3"
UPDATE html/body/div/#text "2" => "3"
UPDATE html/body/div0/#text "2" => "3"
```
# Render
@ -113,6 +149,18 @@ container.querySelector("button").click();
<!--M_*2 #text/0-->
</div>
<!--M_]1 #text/2-->
<div>
false
<!--M_*3 #text/0-->
</div>
<div>
true
<!--M_*4 #text/0-->
</div>
<div>
"spread1"
<!--M_*5 #text/0-->
</div>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b=[0,{"ConditionalScope:#text/2":_.a={},"ConditionalRenderer:#text/2":"__tests__/tags/custom-tag.marko",x:1},_.a]),1,"__tests__/template.marko_0_x"];M._.w()
</script>
@ -123,5 +171,5 @@ container.querySelector("button").click();
# Mutations
```
UPDATE html/body/button/#text1 "3" => "4"
UPDATE html/body/div/#text "3" => "4"
UPDATE html/body/div0/#text "3" => "4"
```

9
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/ssr-sanitized.expected.md
View File

@ -6,4 +6,13 @@
<div>
1
</div>
<div>
false
</div>
<div>
true
</div>
<div>
"spread1"
</div>
```

29
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/ssr.expected.md
View File

@ -1,6 +1,6 @@
# Write
```html
<button>Count: <!>1<!--M_*1 #text/1--></button><!--M_*1 #button/0--><!--M_[2--><div>1<!--M_*2 #text/0--></div><!--M_]1 #text/2--><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[0,{"ConditionalScope:#text/2":_.a={},"ConditionalRenderer:#text/2":"__tests__/tags/custom-tag.marko",x:1},_.a]),1,"__tests__/template.marko_0_x"];M._.w()</script>
<button>Count: <!>1<!--M_*1 #text/1--></button><!--M_*1 #button/0--><!--M_[2--><div>1<!--M_*2 #text/0--></div><!--M_]1 #text/2--><div>false<!--M_*3 #text/0--></div><div>true<!--M_*4 #text/0--></div><div>"spread1"<!--M_*5 #text/0--></div><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[0,{"ConditionalScope:#text/2":_.a={},"ConditionalRenderer:#text/2":"__tests__/tags/custom-tag.marko",x:1},_.a]),1,"__tests__/template.marko_0_x"];M._.w()</script>
```
# Render End
@ -21,6 +21,18 @@
<!--M_*2 #text/0-->
</div>
<!--M_]1 #text/2-->
<div>
false
<!--M_*3 #text/0-->
</div>
<div>
true
<!--M_*4 #text/0-->
</div>
<div>
"spread1"
<!--M_*5 #text/0-->
</div>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b=[0,{"ConditionalScope:#text/2":_.a={},"ConditionalRenderer:#text/2":"__tests__/tags/custom-tag.marko",x:1},_.a]),1,"__tests__/template.marko_0_x"];M._.w()
</script>
@ -40,10 +52,19 @@ INSERT html/body/button/#text1
INSERT html/body/button/#comment1
INSERT html/body/#comment0
INSERT html/body/#comment1
INSERT html/body/div
INSERT html/body/div/#text
INSERT html/body/div/#comment
INSERT html/body/div0
INSERT html/body/div0/#text
INSERT html/body/div0/#comment
INSERT html/body/#comment2
INSERT html/body/div1
INSERT html/body/div1/#text
INSERT html/body/div1/#comment
INSERT html/body/div2
INSERT html/body/div2/#text
INSERT html/body/div2/#comment
INSERT html/body/div3
INSERT html/body/div3/#text
INSERT html/body/div3/#comment
INSERT html/body/script
INSERT html/body/script/#text
```

2
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/tags/custom-tag.marko
View File

@ -1 +1 @@
<div>${input}</div>
<div>${JSON.stringify(input)}</div>

5
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/template.marko
View File

@ -2,4 +2,7 @@ import customTag from './tags/custom-tag.marko';
static const tags = [customTag];
<let/x=1 />
<button onClick() { x++ }>Count: ${x}</button>
<${tags[0]}(x, 'foo') />
<${tags[0]}(x, 'foo') />
<${tags[0]}(false) />
<${tags[0]}(true) />
<${tags[0]}(...["spread1", "spread2"]) />

6
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/dom.expected/template.hydrate.js
View File

@ -1,10 +1,10 @@
// size: 307 (min) 200 (brotli)
// size: 315 (min) 210 (brotli)
const _input = _$.value(2, (_scope, input) => _$.data(_scope[0], input));
function _setup(_scope) {
_$.tagVarSignal(_scope, "hello from other");
}
const tags = [_$.createTemplate("a", "<div> </div>", "D l", _setup, _input)],
_dynamicTag = _$.dynamicTag(2),
_dynamicTag = _$.dynamicTag(2, 0, 0, 1),
_x_effect = _$.effect("b0", (_scope, { 3: x }) =>
_$.on(_scope[0], "click", function () {
_x(_scope, x + 1);
@ -12,7 +12,7 @@ const tags = [_$.createTemplate("a", "<div> </div>", "D l", _setup, _input)],
),
_x = _$.state(3, (_scope, x) => {
_$.data(_scope[1], x),
_dynamicTag(_scope, tags[0], () => x),
_dynamicTag(_scope, tags[0], () => [x]),
_x_effect(_scope);
});
init();

4
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/dom.expected/template.js
View File

@ -3,7 +3,7 @@ export const _walks = /* get, next(1), over(1), replace, out(1), replace, over(1
import customTag from './tags/custom-tag.marko';
const tags = [customTag];
import * as _$ from "@marko/runtime-tags/debug/dom";
const _dynamicTag = /* @__PURE__ */_$.dynamicTag("#text/2");
const _dynamicTag = /* @__PURE__ */_$.dynamicTag("#text/2", 0, 0, 1);
const _x_effect = _$.effect("__tests__/template.marko_0_x", (_scope, {
x
}) => _$.on(_scope["#button/0"], "click", function () {
@ -11,7 +11,7 @@ const _x_effect = _$.effect("__tests__/template.marko_0_x", (_scope, {
}));
const _x = /* @__PURE__ */_$.state("x/3", (_scope, x) => {
_$.data(_scope["#text/1"], x);
_dynamicTag(_scope, tags[0], () => x);
_dynamicTag(_scope, tags[0], () => [x]);
_x_effect(_scope);
});
export function _setup(_scope) {

2
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/html.expected/template.js
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, 0, 1);
_$.dynamicTag(_scope0_id, "#text/2", tags[0], [x], 0, 1, 1);
_$.writeEffect(_scope0_id, "__tests__/template.marko_0_x");
_$.writeScope(_scope0_id, {
x

15
packages/runtime-tags/src/translator/visitors/tag/dynamic-tag.ts
View File

@ -172,17 +172,14 @@ export default {
isClassAPI ? "renderBody" : "content",
);
const args: (t.Expression | t.SpreadElement)[] = [];
let hasMultipleArgs = false;
let hasTagArgs = false;
if (node.arguments?.length) {
if (node.arguments) {
hasTagArgs = true;
args.push(...node.arguments);
if (properties.length) {
hasMultipleArgs = true;
args.push(propsToExpression(properties));
} else {
hasMultipleArgs =
node.arguments.length > 1 || t.isSpreadElement(node.arguments[0]);
}
} else {
const contentProp = getTranslatedBodyContentProperty(properties);
@ -200,7 +197,7 @@ export default {
const serializeReason =
isClassAPI || !!node.var || getDynamicSourcesForExtra(tagExtra);
const dynamicTagExpr = hasMultipleArgs
const dynamicTagExpr = hasTagArgs
? callRuntime(
"dynamicTag",
getScopeIdIdentifier(section),
@ -295,12 +292,12 @@ export default {
tagVarSignal
? t.arrowFunctionExpression([], tagVarSignal.identifier)
: undefined,
hasMultipleArgs && t.numericLiteral(1),
hasTagArgs && t.numericLiteral(1),
);
};
if (args.length) {
const argsOrInput = hasMultipleArgs
const argsOrInput = hasTagArgs
? t.arrayExpression(args)
: (args[0] as t.Expression);
if (