fix: non standard tmpl literals inside legacy dynamic attrs

Author: DylanPiercey

.changeset/orange-rice-hope.md

@@ -0,0 +1,6 @@
+---
+"marko-widgets": patch
+"@marko/compat-v4": patch
+---
+
+Fix issue where non standard template literals were not transformed when used inside of the legacy dynamic attributes syntax.

packages/compat-v4/src/migrate/dynamic-attributes.ts

@@ -1,5 +1,6 @@
 import { types as t } from "@marko/compiler";
 import { diagnosticDeprecate, parseExpression } from "@marko/babel-utils";
+import { migrateNonStandardTemplateLiterals } from "./non-standard-template-literals";
 
 export default {
   MarkoAttribute(attr) {
@@ -15,7 +16,7 @@ export default {
         label:
           'The "<tag ${attributes}>" syntax is deprecated. Please use "...attributes" instead. See: https://github.com/marko-js/marko/wiki/Deprecation:-w‐*-Attributes',
         fix() {
-          attr.replaceWith(
+          const [replacement] = attr.replaceWith(
             t.markoSpreadAttribute(
               start != null && end != null
                 ? parseExpression(
@@ -27,6 +28,8 @@ export default {
                 : parseExpression(attr.hub.file, name.slice(2, -1)),
             ),
           );
+
+          migrateNonStandardTemplateLiterals(replacement.get("value"));
         },
       });
     }

packages/compat-v4/src/migrate/non-standard-template-literals/index.ts

@@ -16,27 +16,27 @@ export default {
       for (const arg of tag.get("arguments") as t.NodePath<
         t.Expression | t.SpreadElement
       >[]) {
-        checkPath(arg);
+        migrateNonStandardTemplateLiterals(arg);
       }
     }
 
     for (const attr of tag.get("attributes")) {
-      checkPath(attr.get("value"));
+      migrateNonStandardTemplateLiterals(attr.get("value"));
 
       if (attr.isMarkoAttribute()) {
         if (attr.node.arguments) {
           for (const arg of attr.get("arguments") as t.NodePath<
             t.Expression | t.SpreadElement
           >[]) {
-            checkPath(arg);
+            migrateNonStandardTemplateLiterals(arg);
           }
         }
       }
     }
   },
 } satisfies t.Visitor;
 
-function checkPath(path: t.NodePath<t.Node>) {
+export function migrateNonStandardTemplateLiterals(path: t.NodePath<t.Node>) {
   if (path.isStringLiteral()) {
     StringLiteral(path);
   } else {

tests/fixtures-class/non-standard-template-literals/__snapshots__/auto-migrate.expected/template.marko

@@ -6,6 +6,7 @@ $ const fromScriptlet = "${SCRIPLET}";
 $ const a = 1;
 $ const b = 2;
 $ const c = 3;
+$ const d = "d";
 <div class=a id=`${a}` data-other=b/>
 <div id="a">
   ${fromStatic}
@@ -39,5 +40,7 @@ $ const c = 3;
 <div id="j">
   ${'\${abc}'}
 </div>
+<div ...a id="c"/>
+<div ...d id="c"/>
 $ const handler = console.log;
 <button onClick(handler)/>

tests/fixtures-class/non-standard-template-literals/__snapshots__/dom.expected.md

@@ -54,5 +54,12 @@
 >
   ${abc}
 </div>
+<div
+  id="c"
+/>
+<div
+  d=""
+  id="c"
+/>
 <button />
 ```

tests/fixtures-class/non-standard-template-literals/__snapshots__/dom.expected/template.js

@@ -7,6 +7,7 @@ function _toString(value) {
 }
 const fromStatic = "${STATIC}";
 import _marko_class_merge from "marko/src/runtime/helpers/class-value.js";
+import _marko_merge_attrs from "marko/src/runtime/vdom/helpers/merge-attrs.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
 import { r as _marko_registerComponent } from "marko/src/runtime/components/registry.js";
 _marko_registerComponent(_marko_componentType, () => _marko_template);
@@ -16,6 +17,7 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   const a = 1;
   const b = 2;
   const c = 3;
+  const d = "d";
   out.e("div", {
     "class": _marko_class_merge(a),
     "id": `${a}`,
@@ -73,8 +75,14 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   }, "10", _component, null, 1);
   out.t('\${abc}', _component);
   out.ee();
+  out.e("div", _marko_merge_attrs(a, {
+    "id": "c"
+  }), "11", _component, 0, 4);
+  out.e("div", _marko_merge_attrs(d, {
+    "id": "c"
+  }), "12", _component, 0, 4);
   const handler = console.log;
-  out.e("button", null, "11", _component, 0, 0, {
+  out.e("button", null, "13", _component, 0, 0, {
     "onclick": _componentDef.d("click", handler, false)
   });
 }, {

tests/fixtures-class/non-standard-template-literals/__snapshots__/html.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <!--M#s0-0--><div id="1" data-other=2></div><div id=a>${STATIC}</div><div id=b>${SCRIPLET}</div><div id=c>1</div><div id=d>abc}</div><div id=e>abc}</div><div id=f>abc}</div><div id=g>abcd}ef</div><div id=h>abc3</div><div id=i>abcdef</div><div id=j>${abc}</div><button></button><!--M/--><script>$MC=(window.$MC||[]).concat({"w":[["s0-0",0,{"renderBody":null},{"f":1,"r":null}]],"t":["<fixture-dir>/template.marko"]})</script>
+  <!--M#s0-0--><div id="1" data-other=2></div><div id=a>${STATIC}</div><div id=b>${SCRIPLET}</div><div id=c>1</div><div id=d>abc}</div><div id=e>abc}</div><div id=f>abc}</div><div id=g>abcd}ef</div><div id=h>abc3</div><div id=i>abcdef</div><div id=j>${abc}</div><div id=c></div><div id=c d></div><button></button><!--M/--><script>$MC=(window.$MC||[]).concat({"w":[["s0-0",0,{"renderBody":null},{"f":1,"r":null}]],"t":["<fixture-dir>/template.marko"]})</script>
 
 # Render
 ```html
@@ -57,5 +57,12 @@
 >
   ${abc}
 </div>
+<div
+  id="c"
+/>
+<div
+  d=""
+  id="c"
+/>
 <button />
 ```

tests/fixtures-class/non-standard-template-literals/__snapshots__/html.expected/template.js

@@ -10,13 +10,15 @@ import _marko_class_merge from "marko/src/runtime/helpers/class-value.js";
 import _marko_attr from "marko/src/runtime/html/helpers/attr.js";
 import { d as _marko_escape_double_quotes } from "marko/src/runtime/html/helpers/escape-quotes.js";
 import { x as _marko_escapeXml } from "marko/src/runtime/html/helpers/escape-xml.js";
+import _marko_merge_attrs from "marko/src/runtime/html/helpers/merge-attrs.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) {
   const fromScriptlet = "${SCRIPLET}";
   const a = 1;
   const b = 2;
   const c = 3;
+  const d = "d";
   out.w(`<div${_marko_attr("class", _marko_class_merge(a))} id="${_marko_escape_double_quotes(a)}"${_marko_attr("data-other", b)}></div>`);
   out.w("<div id=a>");
   out.w(_marko_escapeXml(fromStatic));
@@ -50,6 +52,12 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   out.w("<div id=j>");
   out.w("${abc}");
   out.w("</div>");
+  out.w(`<div${_marko_merge_attrs(a, {
+    "id": "c"
+  })}></div>`);
+  out.w(`<div${_marko_merge_attrs(d, {
+    "id": "c"
+  })}></div>`);
   const handler = console.log;
   out.w("<button></button>");
 }, {

tests/fixtures-class/non-standard-template-literals/__snapshots__/hydrate.expected.md

@@ -54,5 +54,12 @@
 >
   ${abc}
 </div>
+<div
+  id="c"
+/>
+<div
+  d=""
+  id="c"
+/>
 <button />
 ```

tests/fixtures-class/non-standard-template-literals/__snapshots__/manual-migrate-0.expected/template.marko

@@ -3,6 +3,7 @@ $ const fromScriptlet = "${SCRIPLET}";
 $ const a = 1;
 $ const b = 2;
 $ const c = 3;
+$ const d = "d";
 <div class="${a}" id=`${"${a}"}` data-other="${b}"/>
 <div id="a">
   ${fromStatic}
@@ -34,5 +35,7 @@ $ const c = 3;
 <div id="j">
   ${'\${abc}'}
 </div>
+<div ${"${a}"} id="c"/>
+<div ${"${d}"} id="c"/>
 $ const handler = console.log;
 <button onClick("${handler}")/>

tests/fixtures-class/non-standard-template-literals/__snapshots__/manual-migrate-1.expected/template.marko

@@ -3,6 +3,7 @@ $ const fromScriptlet = "${SCRIPLET}";
 $ const a = 1;
 $ const b = 2;
 $ const c = 3;
+$ const d = "d";
 <div class="${a}" id=`${"${a}"}` data-other="${b}"/>
 <div id="a">
   ${fromStatic}
@@ -36,5 +37,7 @@ $ const c = 3;
 <div id="j">
   ${'\${abc}'}
 </div>
+<div ${"${a}"} id="c"/>
+<div ${"${d}"} id="c"/>
 $ const handler = console.log;
 <button onClick("${handler}")/>

tests/fixtures-class/non-standard-template-literals/template.marko

@@ -3,6 +3,7 @@ $ const fromScriptlet = "${SCRIPLET}";
 $ const a = 1;
 $ const b = 2;
 $ const c = 3;
+$ const d = "d";
 <div class="${a}" id=`${"${a}"}` data-other="${b}"/>
 <#a>${fromStatic}</>
 <#b>${fromScriptlet}</>
@@ -14,6 +15,8 @@ $ const c = 3;
 <#h>${"abc${c}"}</>
 <#i>${"abc${{x: 1}.missing}def"}</>
 <#j>${'\${abc}'}</>
+<#c ${"${a}"}></>
+<#c ${"${d}"}></>
 
 $ const handler = console.log;
 <button onClick("${handler}")/>