fix: migrate tag arguments

.changeset/slimy-jokes-deny.md

@@ -0,0 +1,6 @@
+---
+"@marko/compat-utils": patch
+"@marko/compat-v4": patch
+---
+
+Migrate tags with arguments to regular attributes or spreads.

packages/compat-utils/src/tags.ts

@@ -20,6 +20,13 @@ export function willMigrateTag(
   }
 }
 
+export function isCoreOrMigrateTag(
+  tag: t.NodePath<t.MarkoTag>,
+): tag is t.NodePath<t.MarkoTag & { name: t.StringLiteral }> {
+  const taglibId = getTagDef(tag)?.taglibId;
+  return taglibId ? /^@?marko[-/]/.test(taglibId) : false;
+}
+
 export function willMigrateAllAttrs(tag: t.NodePath<t.MarkoTag>) {
   if (willMigrateTag(tag)) {
     switch (tag.node.name.value) {

packages/compat-v4/src/migrate/index.ts

@@ -10,6 +10,7 @@ import legacyAttributeTags from "./legacy-attribute-tags";
 import keyModifier from "./key-modifier";
 import refAttribute from "./ref-attribute";
 import nativeTagNamespacedAttribute from "./native-tag-namespaced-attribute";
+import tagArguments from "./tag-arguments";
 
 export default [
   ifDirective,
@@ -23,4 +24,5 @@ export default [
   bodyOnlyIfDirective,
   nonStandardTemplateLiterals,
   nativeTagNamespacedAttribute,
+  tagArguments,
 ] satisfies Visitor[];

packages/compat-v4/src/migrate/tag-arguments.ts

@@ -0,0 +1,37 @@
+import { types as t } from "@marko/compiler";
+import { diagnosticDeprecate } from "@marko/babel-utils";
+import {
+  exprToAttrs,
+  getTagFile,
+  isCoreOrMigrateTag,
+} from "@marko/compat-utils";
+
+export default {
+  MarkoTag(tag) {
+    const args = tag.node.arguments;
+    if (!args || isCoreOrMigrateTag(tag) || !getTagFile(tag)) {
+      return;
+    }
+
+    diagnosticDeprecate(tag, {
+      label:
+        "Tag arguments have been deprecated. Instead use regular attributes, or spread attributes.",
+      fix() {
+        const attrs: t.MarkoTag["attributes"] = [];
+        for (const arg of args) {
+          if (arg.type === "SpreadElement") {
+            attrs.push(t.markoSpreadAttribute(arg.argument));
+            continue;
+          }
+
+          for (const attr of exprToAttrs(arg)) {
+            attrs.push(attr);
+          }
+        }
+
+        tag.node.arguments = null;
+        tag.node.attributes = attrs.concat(tag.node.attributes);
+      },
+    });
+  },
+} satisfies t.Visitor;

tests/fixtures-class/tag-arguments/__snapshots__/auto-migrate.expected/components/my-tag.marko

@@ -0,0 +1 @@
+${JSON.stringify(input)}

tests/fixtures-class/tag-arguments/__snapshots__/auto-migrate.expected/template.marko

@@ -0,0 +1,2 @@
+<my-tag x=1/>
+<my-tag x=1 y=2 x=3/>

tests/fixtures-class/tag-arguments/__snapshots__/dom.expected.md

@@ -0,0 +1,4 @@
+# Render {"attrs":{"data-foo":"bar","data-bar":"baz"}}
+```html
+{"x":1}{"x":3,"y":2}
+```

tests/fixtures-class/tag-arguments/__snapshots__/dom.expected/components/my-tag.js

@@ -0,0 +1,17 @@
+import { t as _t } from "marko/src/runtime/vdom/index.js";
+const _marko_componentType = "<fixture-dir>/components/my-tag.marko",
+  _marko_template = _t(_marko_componentType);
+export default _marko_template;
+import _marko_renderer from "marko/src/runtime/components/renderer.js";
+import { r as _marko_registerComponent } from "marko/src/runtime/components/registry";
+_marko_registerComponent(_marko_componentType, () => _marko_template);
+const _marko_component = {};
+_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
+  out.t(JSON.stringify(input), _component);
+}, {
+  t: _marko_componentType,
+  i: true,
+  d: true
+}, _marko_component);
+import _marko_defineComponent from "marko/src/runtime/components/defineComponent.js";
+_marko_template.Component = _marko_defineComponent(_marko_component, _marko_template._);

tests/fixtures-class/tag-arguments/__snapshots__/dom.expected/template.js

@@ -0,0 +1,26 @@
+import { t as _t } from "marko/src/runtime/vdom/index.js";
+const _marko_componentType = "<fixture-dir>/template.marko",
+  _marko_template = _t(_marko_componentType);
+export default _marko_template;
+import _myTag from "./components/my-tag.marko";
+import _marko_tag from "marko/src/runtime/helpers/render-tag.js";
+import _marko_renderer from "marko/src/runtime/components/renderer.js";
+import { r as _marko_registerComponent } from "marko/src/runtime/components/registry";
+_marko_registerComponent(_marko_componentType, () => _marko_template);
+const _marko_component = {};
+_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
+  _marko_tag(_myTag, {
+    "x": 1
+  }, out, _componentDef, "0");
+  _marko_tag(_myTag, {
+    "x": 1,
+    "y": 2,
+    "x": 3
+  }, out, _componentDef, "1");
+}, {
+  t: _marko_componentType,
+  i: true,
+  d: true
+}, _marko_component);
+import _marko_defineComponent from "marko/src/runtime/components/defineComponent.js";
+_marko_template.Component = _marko_defineComponent(_marko_component, _marko_template._);

tests/fixtures-class/tag-arguments/__snapshots__/html.expected.md

@@ -0,0 +1,7 @@
+# Write
+  {"x":1}{"x":3,"y":2}
+
+# Render {"attrs":{"data-foo":"bar","data-bar":"baz"}}
+```html
+{"x":1}{"x":3,"y":2}
+```

tests/fixtures-class/tag-arguments/__snapshots__/html.expected/components/my-tag.js

@@ -0,0 +1,14 @@
+import { t as _t } from "marko/src/runtime/html/index.js";
+const _marko_componentType = "<fixture-dir>/components/my-tag.marko",
+  _marko_template = _t(_marko_componentType);
+export default _marko_template;
+import { x as _marko_escapeXml } from "marko/src/runtime/html/helpers/escape-xml.js";
+import _marko_renderer from "marko/src/runtime/components/renderer.js";
+const _marko_component = {};
+_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
+  out.w(_marko_escapeXml(JSON.stringify(input)));
+}, {
+  t: _marko_componentType,
+  i: true,
+  d: true
+}, _marko_component);

tests/fixtures-class/tag-arguments/__snapshots__/html.expected/template.js

@@ -0,0 +1,22 @@
+import { t as _t } from "marko/src/runtime/html/index.js";
+const _marko_componentType = "<fixture-dir>/template.marko",
+  _marko_template = _t(_marko_componentType);
+export default _marko_template;
+import _myTag from "./components/my-tag.marko";
+import _marko_tag from "marko/src/runtime/helpers/render-tag.js";
+import _marko_renderer from "marko/src/runtime/components/renderer.js";
+const _marko_component = {};
+_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
+  _marko_tag(_myTag, {
+    "x": 1
+  }, out, _componentDef, "0");
+  _marko_tag(_myTag, {
+    "x": 1,
+    "y": 2,
+    "x": 3
+  }, out, _componentDef, "1");
+}, {
+  t: _marko_componentType,
+  i: true,
+  d: true
+}, _marko_component);

tests/fixtures-class/tag-arguments/__snapshots__/hydrate.expected.md

@@ -0,0 +1,4 @@
+# Render {"attrs":{"data-foo":"bar","data-bar":"baz"}}
+```html
+{"x":1}{"x":3,"y":2}
+```

tests/fixtures-class/tag-arguments/components/my-tag.marko

@@ -0,0 +1 @@
+-- ${JSON.stringify(input)}

tests/fixtures-class/tag-arguments/template.marko

@@ -0,0 +1,2 @@
+<my-tag({ x: 1 })/>
+<my-tag({ x: 1 }, { y: 2 }, { x: 3 })/>

tests/fixtures-class/tag-arguments/test.ts

@@ -0,0 +1,10 @@
+import type { FixtureConfig } from "../../main.test";
+
+export default {
+  input: {
+    attrs: {
+      "data-foo": "bar",
+      "data-bar": "baz",
+    },
+  },
+} satisfies FixtureConfig;

tests/old/render/fixtures/invoke/template.marko

@@ -1,6 +1,5 @@
 <script template-helpers>
 function greeting(name, out) {
-    debugger;
     out.write('Hello ' + name + '!');
 }
 </script>