diff --git a/.changeset/kind-rockets-remain.md b/.changeset/kind-rockets-remain.md new file mode 100644 index 000000000..7dde0695a --- /dev/null +++ b/.changeset/kind-rockets-remain.md @@ -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. diff --git a/packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/dom.expected/tags/child.js b/packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/dom.expected/tags/child.js index 6e3935d8a..ac381a087 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/dom.expected/tags/child.js +++ b/packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/dom.expected/tags/child.js @@ -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) => { diff --git a/packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/dom.expected/template.hydrate.js b/packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/dom.expected/template.hydrate.js index d92248066..db04d1bb6 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/dom.expected/template.hydrate.js @@ -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) => diff --git a/packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/html.expected/tags/child.js b/packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/html.expected/tags/child.js index 62d2acce0..45221ada2 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/html.expected/tags/child.js +++ b/packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/html.expected/tags/child.js @@ -6,7 +6,7 @@ export default _$.createTemplate("__tests__/tags/child.marko", input => { value } = input; _$.write("
"); - _$.dynamicTag(_scope0_id, "#text/0", content, value, 0, 0, 1); + _$.dynamicTag(_scope0_id, "#text/0", content, [value], 0, 1, 1); _$.write("
"); _$.writeScope(_scope0_id, { content, diff --git a/packages/runtime-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/dom.expected/tags/custom-tag.js b/packages/runtime-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/dom.expected/tags/custom-tag.js index 51abe0a02..9e327a39a 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/dom.expected/tags/custom-tag.js +++ b/packages/runtime-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/dom.expected/tags/custom-tag.js @@ -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 () { diff --git a/packages/runtime-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/dom.expected/template.hydrate.js b/packages/runtime-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/dom.expected/template.hydrate.js index a32328893..e55a95b0a 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/runtime-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/dom.expected/template.hydrate.js @@ -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); diff --git a/packages/runtime-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/html.expected/tags/custom-tag.js b/packages/runtime-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/html.expected/tags/custom-tag.js index a822b755e..58d6f7975 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/html.expected/tags/custom-tag.js +++ b/packages/runtime-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/html.expected/tags/custom-tag.js @@ -3,7 +3,7 @@ export default _$.createTemplate("__tests__/tags/custom-tag.marko", input => { const _scope0_id = _$.nextScopeId(); let x = 1; _$.write(`${_$.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, diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/dom.expected/template.hydrate.js b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/dom.expected/template.hydrate.js index ff13fd13b..4a4fdde19 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/dom.expected/template.hydrate.js @@ -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", "
Child:
", "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(); diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/dom.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/dom.expected/template.js index d80769984..4bb05af74 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/dom.expected/template.js +++ b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/dom.expected/template.js @@ -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) { diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/html.expected/template.js index dc83571ab..2e75f4c68 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/html.expected/template.js +++ b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/html.expected/template.js @@ -6,7 +6,7 @@ export default _$.createTemplate("__tests__/template.marko", input => { let x = 1; _$.write(`${_$.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(`
Parent: ${_$.escapeXML(y)}${_$.markResumeNode(_scope0_id, "#text/4")}
`); _$.writeEffect(_scope0_id, "__tests__/template.marko_0_x"); diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/csr-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/csr-sanitized.expected.md index 2fb78c640..de8c1c8c6 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/csr-sanitized.expected.md +++ b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/csr-sanitized.expected.md @@ -6,6 +6,15 @@
1
+
+ false +
+
+ true +
+
+ "spread1" +
``` @@ -20,6 +29,15 @@ container.querySelector("button").click();
2
+
+ false +
+
+ true +
+
+ "spread1" +
``` @@ -34,6 +52,15 @@ container.querySelector("button").click();
3
+
+ false +
+
+ true +
+
+ "spread1" +
``` @@ -48,4 +75,13 @@ container.querySelector("button").click();
4
+
+ false +
+
+ true +
+
+ "spread1" +
``` diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/csr.expected.md b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/csr.expected.md index 6ce98e09d..3d7cde8f9 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/csr.expected.md +++ b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/csr.expected.md @@ -6,12 +6,21 @@
1
+
+ false +
+
+ true +
+
+ "spread1" +
``` # Mutations ``` -INSERT button, div, #comment +INSERT button, div0, div1, div2, div3, #comment ``` # Render @@ -25,13 +34,22 @@ container.querySelector("button").click();
2
+
+ false +
+
+ true +
+
+ "spread1" +
``` # 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();
3
+
+ false +
+
+ true +
+
+ "spread1" +
``` # 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();
4
+
+ false +
+
+ true +
+
+ "spread1" +
``` # Mutations ``` UPDATE button/#text1 "3" => "4" -UPDATE div/#text "3" => "4" +UPDATE div0/#text "3" => "4" ``` \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/tags/custom-tag.js b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/tags/custom-tag.js index bf1ba8b7b..e940e4b8b 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/tags/custom-tag.js +++ b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/tags/custom-tag.js @@ -2,5 +2,5 @@ export const _template = "
"; 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); \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/template.hydrate.js b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/template.hydrate.js index 6284d66e6..a4964c7f9 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/template.hydrate.js @@ -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", "
", "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); diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/template.js index dfe30f213..f8794b582 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/template.js +++ b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/template.js @@ -1,20 +1,26 @@ -export const _template = ""; -export const _walks = /* get, next(1), over(1), replace, out(1), replace, over(1) */" Db%l%bD"; +export const _template = ""; +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); \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/html.expected/tags/custom-tag.js b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/html.expected/tags/custom-tag.js index 0d6ad4fc9..e61c2e8c1 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/html.expected/tags/custom-tag.js +++ b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/html.expected/tags/custom-tag.js @@ -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(`
${_$.escapeXML(input)}${_$.markResumeNode(_scope0_id, "#text/0")}
`); + _$.write(`
${_$.escapeXML(JSON.stringify(input))}${_$.markResumeNode(_scope0_id, "#text/0")}
`); }); \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/html.expected/template.js index d7df2fca2..4db2c5787 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/html.expected/template.js +++ b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/html.expected/template.js @@ -6,6 +6,9 @@ export default _$.createTemplate("__tests__/template.marko", input => { let x = 1; _$.write(`${_$.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 diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/resume-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/resume-sanitized.expected.md index 2fb78c640..de8c1c8c6 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/resume-sanitized.expected.md +++ b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/resume-sanitized.expected.md @@ -6,6 +6,15 @@
1
+
+ false +
+
+ true +
+
+ "spread1" +
``` @@ -20,6 +29,15 @@ container.querySelector("button").click();
2
+
+ false +
+
+ true +
+
+ "spread1" +
``` @@ -34,6 +52,15 @@ container.querySelector("button").click();
3
+
+ false +
+
+ true +
+
+ "spread1" +
``` @@ -48,4 +75,13 @@ container.querySelector("button").click();
4
+
+ false +
+
+ true +
+
+ "spread1" +
``` diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/resume.expected.md b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/resume.expected.md index 303c73fde..bb07418b1 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/resume.expected.md +++ b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/resume.expected.md @@ -16,6 +16,18 @@ +
+ false + +
+
+ true + +
+
+ "spread1" + +
@@ -45,6 +57,18 @@ container.querySelector("button").click(); +
+ false + +
+
+ true + +
+
+ "spread1" + +
@@ -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(); +
+ false + +
+
+ true + +
+
+ "spread1" + +
@@ -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(); +
+ false + +
+
+ true + +
+
+ "spread1" + +
@@ -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" ``` \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/ssr-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/ssr-sanitized.expected.md index 69efe5908..da08d5b29 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/ssr-sanitized.expected.md +++ b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/ssr-sanitized.expected.md @@ -6,4 +6,13 @@
1
+
+ false +
+
+ true +
+
+ "spread1" +
``` diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/ssr.expected.md b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/ssr.expected.md index 8ba2c002f..c19d337e9 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/ssr.expected.md +++ b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/ssr.expected.md @@ -1,6 +1,6 @@ # Write ```html -
1
+
1
false
true
"spread1"
``` # Render End @@ -21,6 +21,18 @@ +
+ false + +
+
+ true + +
+
+ "spread1" + +
@@ -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 ``` \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/tags/custom-tag.marko b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/tags/custom-tag.marko index 8b0fef93e..497c29d5c 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/tags/custom-tag.marko +++ b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/tags/custom-tag.marko @@ -1 +1 @@ -
${input}
\ No newline at end of file +
${JSON.stringify(input)}
\ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/template.marko b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/template.marko index 540bd0b7b..66e155eb8 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/template.marko +++ b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-args/template.marko @@ -2,4 +2,7 @@ import customTag from './tags/custom-tag.marko'; static const tags = [customTag]; -<${tags[0]}(x, 'foo') /> \ No newline at end of file +<${tags[0]}(x, 'foo') /> +<${tags[0]}(false) /> +<${tags[0]}(true) /> +<${tags[0]}(...["spread1", "spread2"]) /> \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/dom.expected/template.hydrate.js b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/dom.expected/template.hydrate.js index 01b639a48..259eb4271 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/dom.expected/template.hydrate.js @@ -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", "
", "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", "
", "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(); diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/dom.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/dom.expected/template.js index c4b9ec558..2ab21c4bb 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/dom.expected/template.js +++ b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/dom.expected/template.js @@ -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) { diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/html.expected/template.js index 94651b8e4..c74da84a0 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/html.expected/template.js +++ b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/html.expected/template.js @@ -5,7 +5,7 @@ export default _$.createTemplate("__tests__/template.marko", input => { const _scope0_id = _$.nextScopeId(); let x = 1; _$.write(`${_$.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 diff --git a/packages/runtime-tags/src/translator/visitors/tag/dynamic-tag.ts b/packages/runtime-tags/src/translator/visitors/tag/dynamic-tag.ts index 89c817c67..3ac706e6a 100644 --- a/packages/runtime-tags/src/translator/visitors/tag/dynamic-tag.ts +++ b/packages/runtime-tags/src/translator/visitors/tag/dynamic-tag.ts @@ -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 (