From cd2b725ddb5ae07a6b4973831d68c823472c8acb Mon Sep 17 00:00:00 2001 From: dpiercey Date: Fri, 20 Sep 2024 14:50:53 -0700 Subject: [PATCH] fix: non standard tmpl literals inside legacy dynamic attrs --- .changeset/orange-rice-hope.md | 6 ++++++ packages/compat-v4/src/migrate/dynamic-attributes.ts | 5 ++++- .../migrate/non-standard-template-literals/index.ts | 8 ++++---- .../__snapshots__/auto-migrate.expected/template.marko | 3 +++ .../__snapshots__/dom.expected.md | 7 +++++++ .../__snapshots__/dom.expected/template.js | 10 +++++++++- .../__snapshots__/html.expected.md | 9 ++++++++- .../__snapshots__/html.expected/template.js | 8 ++++++++ .../__snapshots__/hydrate.expected.md | 7 +++++++ .../manual-migrate-0.expected/template.marko | 3 +++ .../manual-migrate-1.expected/template.marko | 3 +++ .../non-standard-template-literals/template.marko | 3 +++ 12 files changed, 65 insertions(+), 7 deletions(-) create mode 100644 .changeset/orange-rice-hope.md diff --git a/.changeset/orange-rice-hope.md b/.changeset/orange-rice-hope.md new file mode 100644 index 0000000..b2f527e --- /dev/null +++ b/.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. diff --git a/packages/compat-v4/src/migrate/dynamic-attributes.ts b/packages/compat-v4/src/migrate/dynamic-attributes.ts index fd90a9a..5438d2c 100644 --- a/packages/compat-v4/src/migrate/dynamic-attributes.ts +++ b/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 "" 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")); }, }); } diff --git a/packages/compat-v4/src/migrate/non-standard-template-literals/index.ts b/packages/compat-v4/src/migrate/non-standard-template-literals/index.ts index 25f0527..2ea7f84 100644 --- a/packages/compat-v4/src/migrate/non-standard-template-literals/index.ts +++ b/packages/compat-v4/src/migrate/non-standard-template-literals/index.ts @@ -16,19 +16,19 @@ 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); } } } @@ -36,7 +36,7 @@ export default { }, } satisfies t.Visitor; -function checkPath(path: t.NodePath) { +export function migrateNonStandardTemplateLiterals(path: t.NodePath) { if (path.isStringLiteral()) { StringLiteral(path); } else { diff --git a/tests/fixtures-class/non-standard-template-literals/__snapshots__/auto-migrate.expected/template.marko b/tests/fixtures-class/non-standard-template-literals/__snapshots__/auto-migrate.expected/template.marko index e233622..c2753b3 100644 --- a/tests/fixtures-class/non-standard-template-literals/__snapshots__/auto-migrate.expected/template.marko +++ b/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";
${fromStatic} @@ -39,5 +40,7 @@ $ const c = 3;
${'\${abc}'}
+
+
$ const handler = console.log;
+
+
+
${STATIC}
${SCRIPLET}
1
abc}
abc}
abc}
abcd}ef
abc3
abcdef
${abc}
# Render ```html @@ -57,5 +57,12 @@ > ${abc}
+
+
`); out.w("
"); out.w(_marko_escapeXml(fromStatic)); @@ -50,6 +52,12 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon out.w("
"); out.w("${abc}"); out.w("
"); + out.w(`
`); + out.w(`
`); const handler = console.log; out.w(""); }, { diff --git a/tests/fixtures-class/non-standard-template-literals/__snapshots__/hydrate.expected.md b/tests/fixtures-class/non-standard-template-literals/__snapshots__/hydrate.expected.md index 1839172..d44a697 100644 --- a/tests/fixtures-class/non-standard-template-literals/__snapshots__/hydrate.expected.md +++ b/tests/fixtures-class/non-standard-template-literals/__snapshots__/hydrate.expected.md @@ -54,5 +54,12 @@ > ${abc}
+
+