From 1ae3b91b1e2204da8552986a29455ab6b7ae0459 Mon Sep 17 00:00:00 2001
From: dpiercey <dpiercey@ebay.com>
Date: Fri, 19 Jan 2024 14:00:05 -0700
Subject: [PATCH] fix: non standard template literal escapes

---
 .changeset/heavy-squids-flow.md                            | 6 ++++++
 .../src/migrate/non-standard-template-literals/parse.ts    | 5 ++++-
 .../__snapshots__/auto-migrate.expected/template.marko     | 3 +++
 .../__snapshots__/dom.expected.md                          | 5 +++++
 .../__snapshots__/dom.expected/template.js                 | 7 ++++++-
 .../__snapshots__/html.expected.md                         | 7 ++++++-
 .../__snapshots__/html.expected/template.js                | 3 +++
 .../__snapshots__/hydrate.expected.md                      | 5 +++++
 .../__snapshots__/manual-migrate-0.expected/template.marko | 7 +++++--
 .../__snapshots__/manual-migrate-1.expected/template.marko | 7 +++++--
 .../non-standard-template-literals/template.marko          | 5 +++--
 tests/main.test.ts                                         | 1 +
 12 files changed, 52 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/heavy-squids-flow.md

diff --git a/.changeset/heavy-squids-flow.md b/.changeset/heavy-squids-flow.md
new file mode 100644
index 0000000..39f5357
--- /dev/null
+++ b/.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.
diff --git a/packages/compat-v4/src/migrate/non-standard-template-literals/parse.ts b/packages/compat-v4/src/migrate/non-standard-template-literals/parse.ts
index fb19c88..f9c9244 100644
--- a/packages/compat-v4/src/migrate/non-standard-template-literals/parse.ts
+++ b/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[];
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 2e85c10..e233622 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
@@ -36,5 +36,8 @@ $ const c = 3;
     x: 1
   }.missing)}def`}
 </div>
+<div id="j">
+  ${'\${abc}'}
+</div>
 $ const handler = console.log;
 <button onClick(handler)/>
\ No newline at end of file
diff --git a/tests/fixtures-class/non-standard-template-literals/__snapshots__/dom.expected.md b/tests/fixtures-class/non-standard-template-literals/__snapshots__/dom.expected.md
index 9d186dc..1839172 100644
--- a/tests/fixtures-class/non-standard-template-literals/__snapshots__/dom.expected.md
+++ b/tests/fixtures-class/non-standard-template-literals/__snapshots__/dom.expected.md
@@ -49,5 +49,10 @@
 >
   abcdef
 </div>
+<div
+  id="j"
+>
+  ${abc}
+</div>
 <button />
 ```
\ No newline at end of file
diff --git a/tests/fixtures-class/non-standard-template-literals/__snapshots__/dom.expected/template.js b/tests/fixtures-class/non-standard-template-literals/__snapshots__/dom.expected/template.js
index 57acd59..138d3c7 100644
--- a/tests/fixtures-class/non-standard-template-literals/__snapshots__/dom.expected/template.js
+++ b/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)
   });
 }, {
diff --git a/tests/fixtures-class/non-standard-template-literals/__snapshots__/html.expected.md b/tests/fixtures-class/non-standard-template-literals/__snapshots__/html.expected.md
index 677651b..0ab671c 100644
--- a/tests/fixtures-class/non-standard-template-literals/__snapshots__/html.expected.md
+++ b/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 />
 ```
\ No newline at end of file
diff --git a/tests/fixtures-class/non-standard-template-literals/__snapshots__/html.expected/template.js b/tests/fixtures-class/non-standard-template-literals/__snapshots__/html.expected/template.js
index f2fb39c..f0cbb81 100644
--- a/tests/fixtures-class/non-standard-template-literals/__snapshots__/html.expected/template.js
+++ b/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)
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 9d186dc..1839172 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
@@ -49,5 +49,10 @@
 >
   abcdef
 </div>
+<div
+  id="j"
+>
+  ${abc}
+</div>
 <button />
 ```
\ No newline at end of file
diff --git a/tests/fixtures-class/non-standard-template-literals/__snapshots__/manual-migrate-0.expected/template.marko b/tests/fixtures-class/non-standard-template-literals/__snapshots__/manual-migrate-0.expected/template.marko
index e6ccf11..a043d5b 100644
--- a/tests/fixtures-class/non-standard-template-literals/__snapshots__/manual-migrate-0.expected/template.marko
+++ b/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,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}`}
@@ -31,5 +31,8 @@ $ const c = 3;
 <div id="i">
   ${"abc${{x: 1}.missing}def"}
 </div>
+<div id="j">
+  ${'\${abc}'}
+</div>
 $ const handler = console.log;
 <button onClick("${handler}")/>
\ No newline at end of file
diff --git a/tests/fixtures-class/non-standard-template-literals/__snapshots__/manual-migrate-1.expected/template.marko b/tests/fixtures-class/non-standard-template-literals/__snapshots__/manual-migrate-1.expected/template.marko
index 00b713d..f46dfe7 100644
--- a/tests/fixtures-class/non-standard-template-literals/__snapshots__/manual-migrate-1.expected/template.marko
+++ b/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}")/>
\ No newline at end of file
diff --git a/tests/fixtures-class/non-standard-template-literals/template.marko b/tests/fixtures-class/non-standard-template-literals/template.marko
index 5d41b66..55564c4 100644
--- a/tests/fixtures-class/non-standard-template-literals/template.marko
+++ b/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}")/>
diff --git a/tests/main.test.ts b/tests/main.test.ts
index 1c7256f..ae8f955 100644
--- a/tests/main.test.ts
+++ b/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 }) {