fix: non standard template literal escapes

.changeset/heavy-squids-flow.md

@@ -0,0 +1,6 @@
+---
+"@marko/compat-v4": patch
+"marko-widgets": patch
+---
+
+Improve handling of non standard template literals when there are escape sequences.

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

@@ -23,7 +23,10 @@ export function parseNonStandardTemplateLiteral(
   string: t.NodePath<t.StringLiteral>,
 ) {
   const { file } = string.hub;
-  const { value } = string.node;
+  const { extra } = string.node;
+  let value = extra?.raw as string | undefined;
+  if (typeof value !== "string") return;
+  value = value.slice(1, -1);
   const { length } = value;
   const valueStart = string.node.start == null ? null : string.node.start + 1;
   let elements: undefined | t.TemplateElement[];

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

@@ -36,5 +36,8 @@ $ const c = 3;
     x: 1
   }.missing)}def`}
 </div>
+<div id="j">
+  ${'\${abc}'}
+</div>
 $ const handler = console.log;
 <button onClick(handler)/>

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

@@ -49,5 +49,10 @@
 >
   abcdef
 </div>
+<div
+  id="j"
+>
+  ${abc}
+</div>
 <button />
 ```

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

@@ -68,8 +68,13 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
     x: 1
   }.missing)}def`, _component);
   out.ee();
+  out.be("div", {
+    "id": "j"
+  }, "10", _component, null, 1);
+  out.t('\${abc}', _component);
+  out.ee();
   const handler = console.log;
-  out.e("button", null, "10", _component, 0, 0, {
+  out.e("button", null, "11", _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
-  <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><button></button>
+  <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>
 
 # Render
 ```html
@@ -52,5 +52,10 @@
 >
   abcdef
 </div>
+<div
+  id="j"
+>
+  ${abc}
+</div>
 <button />
 ```

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

@@ -47,6 +47,9 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
     x: 1
   }.missing)}def`));
   out.w("</div>");
+  out.w("<div id=j>");
+  out.w("${abc}");
+  out.w("</div>");
   const handler = console.log;
   out.w(`<button${_marko_props(out, _componentDef, {
     "onclick": _componentDef.d("click", handler, false)

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

@@ -49,5 +49,10 @@
 >
   abcdef
 </div>
+<div
+  id="j"
+>
+  ${abc}
+</div>
 <button />
 ```

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

@@ -14,7 +14,7 @@ $ const c = 3;
   ${"${a}"}
 </div>
 <div id="d">
-  ${"abc${\"}\"}"}
+  ${'abc${"}"}'}
 </div>
 <div id="e">
   ${"abc${'}'}"}
@@ -23,13 +23,16 @@ $ const c = 3;
   ${"abc${`}`}"}
 </div>
 <div id="g">
-  ${"abc${`d${\"}\"}e`}f"}
+  ${'abc${`d${"}"}e`}f'}
 </div>
 <div id="h">
   ${`abc${c}`}
 </div>
 <div id="i">
   ${"abc${{x: 1}.missing}def"}
 </div>
+<div id="j">
+  ${'\${abc}'}
+</div>
 $ const handler = console.log;
 <button onClick("${handler}")/>

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

@@ -14,7 +14,7 @@ $ const c = 3;
   ${"${a}"}
 </div>
 <div id="d">
-  ${"abc${\"}\"}"}
+  ${'abc${"}"}'}
 </div>
 <div id="e">
   ${"abc${'}'}"}
@@ -23,7 +23,7 @@ $ const c = 3;
   ${"abc${`}`}"}
 </div>
 <div id="g">
-  ${"abc${`d${\"}\"}e`}f"}
+  ${'abc${`d${"}"}e`}f'}
 </div>
 <div id="h">
   ${"abc${c}"}
@@ -33,5 +33,8 @@ $ const c = 3;
     x: 1
   }.missing}def`}
 </div>
+<div id="j">
+  ${'\${abc}'}
+</div>
 $ const handler = console.log;
 <button onClick("${handler}")/>

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

@@ -7,12 +7,13 @@ $ const c = 3;
 <#a>${fromStatic}</>
 <#b>${fromScriptlet}</>
 <#c>${"${a}"}</>
-<#d>${"abc${\"}\"}"}</>
+<#d>${'abc${"}"}'}</>
 <#e>${"abc${'}'}"}</>
 <#f>${"abc${`}`}"}</>
-<#g>${"abc${`d${\"}\"}e`}f"}</>
+<#g>${'abc${`d${"}"}e`}f'}</>
 <#h>${"abc${c}"}</>
 <#i>${"abc${{x: 1}.missing}def"}</>
+<#j>${'\${abc}'}</>
 
 $ const handler = console.log;
 <button onClick("${handler}")/>

tests/main.test.ts

@@ -41,6 +41,7 @@ const baseConfig: compiler.Config = {
   babelConfig: {
     babelrc: false,
     configFile: false,
+    browserslistConfigFile: false,
   },
   writeVersionComment: false,
   resolveVirtualDependency(filename, { code, virtualPath }) {