fix: allow namespaced html tag attributes

.changeset/purple-boxes-chew.md

@@ -0,0 +1,6 @@
+---
+"@marko/compat-v4": patch
+"marko-widgets": patch
+---
+
+Allow namespace native tag attributes.

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

@@ -9,6 +9,7 @@ import includeDirective from "./include-directive";
 import legacyAttributeTags from "./legacy-attribute-tags";
 import keyModifier from "./key-modifier";
 import refAttribute from "./ref-attribute";
+import nativeTagNamespacedAttribute from "./native-tag-namespaced-attribute";
 
 export default [
   ifDirective,
@@ -21,4 +22,5 @@ export default [
   dynamicAttributes,
   bodyOnlyIfDirective,
   nonStandardTemplateLiterals,
+  nativeTagNamespacedAttribute,
 ] satisfies Visitor[];

packages/compat-v4/src/migrate/native-tag-namespaced-attribute.ts

@@ -0,0 +1,26 @@
+import { types as t } from "@marko/compiler";
+import { diagnosticDeprecate, isNativeTag } from "@marko/babel-utils";
+
+export default {
+  MarkoAttribute(attr) {
+    const {
+      node: { modifier },
+    } = attr;
+
+    switch (modifier) {
+      case null:
+      case undefined:
+      case "scoped":
+      case "no-update":
+        return;
+    }
+
+    if (!isNativeTag(attr.parentPath as t.NodePath<t.MarkoTag>)) return;
+
+    diagnosticDeprecate(attr, {
+      label: "Namespaced attributes are deprecated.",
+    });
+    attr.node.name += `:${modifier}`;
+    attr.node.modifier = null;
+  },
+} satisfies t.Visitor;

tests/fixtures-class/namespaced-attr-native-tag/__snapshots__/auto-migrate.expected/template.marko

@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
+  <use xlink:href="#test"/>
+</svg>

tests/fixtures-class/namespaced-attr-native-tag/__snapshots__/dom.expected.md

@@ -0,0 +1,13 @@
+# Render
+```html
+<svg
+  version="1.1"
+  xml:space="preserve"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+  <use
+    href="#test"
+  />
+</svg>
+```

tests/fixtures-class/namespaced-attr-native-tag/__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 _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.be("svg", {
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg",
+    "xmlns:xlink": "http://www.w3.org/1999/xlink",
+    "xml:space": "preserve"
+  }, "0", _component, null, 0);
+  out.e("use", {
+    "xlink:href": "#test"
+  }, "1", _component, 0, 0);
+  out.ee();
+}, {
+  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/namespaced-attr-native-tag/__snapshots__/html.expected.md

@@ -0,0 +1,16 @@
+# Write
+  <svg version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink xml:space=preserve><use xlink:href=#test /></svg>
+
+# Render
+```html
+<svg
+  version="1.1"
+  xml:space="preserve"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+  <use
+    xlink:href="#test"
+  />
+</svg>
+```

tests/fixtures-class/namespaced-attr-native-tag/__snapshots__/html.expected/template.js

@@ -0,0 +1,15 @@
+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 _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("<svg version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink xml:space=preserve>");
+  out.w("<use xlink:href=#test />");
+  out.w("</svg>");
+}, {
+  t: _marko_componentType,
+  i: true,
+  d: true
+}, _marko_component);

tests/fixtures-class/namespaced-attr-native-tag/__snapshots__/hydrate.expected.md

@@ -0,0 +1,13 @@
+# Render
+```html
+<svg
+  version="1.1"
+  xml:space="preserve"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+  <use
+    xlink:href="#test"
+  />
+</svg>
+```

tests/fixtures-class/namespaced-attr-native-tag/template.marko

@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
+    <use xlink:href="#test" />
+</svg>