fix: prevent tag arguments normalized as input

Author: DylanPiercey

.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.

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) => {

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) =>

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("<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,

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 () {

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);

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(`<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,

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

@@ -1,12 +1,12 @@
-// size: 366 (min) 221 (brotli)
+// size: 370 (min) 229 (brotli)
 const _setup = () => {},
   _input = _$.value(2, (_scope, input) => {
     _$.data(_scope[0], input), _$.tagVarSignal(_scope, input);
   });
 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();

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) {

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(`<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");

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

@@ -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>
 ```

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

@@ -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"
 ```

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

@@ -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);

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", "<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);

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

@@ -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);

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(`<div>${_$.escapeXML(input)}${_$.markResumeNode(_scope0_id, "#text/0")}</div>`);
+  _$.write(`<div>${_$.escapeXML(JSON.stringify(input))}${_$.markResumeNode(_scope0_id, "#text/0")}</div>`);
 });

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(`<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