From 17bfd6e27fd8a6cbc6f417eb184bc7d0b1dac727 Mon Sep 17 00:00:00 2001
From: "Lyu, Wei-Da" <36730922+jasonlyu123@users.noreply.github.com>
Date: Sun, 12 Jul 2020 10:22:49 +0800
Subject: [PATCH] fix svelte2tsx parentheses overwrite issues (#302)

* fix parentheses overwrite for await block

* fix class directive parentheses overwrite
---
 packages/svelte2tsx/src/htmlxtojsx.ts         | 19 ++++++++++++-------
 .../await-block-parentheses/expected.jsx      |  9 +++++++++
 .../await-block-parentheses/input.svelte      |  9 +++++++++
 .../samples/class-parentheses/expected.jsx    |  1 +
 .../samples/class-parentheses/input.svelte    |  1 +
 .../test/htmlx2jsx/samples/class/expected.jsx |  3 ++-
 .../test/htmlx2jsx/samples/class/input.svelte |  3 ++-
 7 files changed, 36 insertions(+), 9 deletions(-)
 create mode 100644 packages/svelte2tsx/test/htmlx2jsx/samples/await-block-parentheses/expected.jsx
 create mode 100644 packages/svelte2tsx/test/htmlx2jsx/samples/await-block-parentheses/input.svelte
 create mode 100644 packages/svelte2tsx/test/htmlx2jsx/samples/class-parentheses/expected.jsx
 create mode 100644 packages/svelte2tsx/test/htmlx2jsx/samples/class-parentheses/input.svelte

diff --git a/packages/svelte2tsx/src/htmlxtojsx.ts b/packages/svelte2tsx/src/htmlxtojsx.ts
index 5309302da..5badd7cd0 100644
--- a/packages/svelte2tsx/src/htmlxtojsx.ts
+++ b/packages/svelte2tsx/src/htmlxtojsx.ts
@@ -83,11 +83,12 @@ export function convertHtmlxToJsx(
     };
 
     const handleClassDirective = (attr: Node) => {
-        const needCurly = attr.expression.start == attr.start + 'class:'.length;
         str.overwrite(attr.start, attr.expression.start, `{...__sveltets_ensureType(Boolean, !!(`);
-        str.appendLeft(attr.expression.end, `))${needCurly ? '}' : ''}`);
-        if (htmlx[attr.end - 1] == '"') {
-            str.remove(attr.end - 1, attr.end);
+        const endBrackets = `))}`;
+        if (attr.end !== attr.expression.end) {
+            str.overwrite(attr.expression.end, attr.end, endBrackets);
+        } else {
+            str.appendLeft(attr.end, endBrackets);
         }
     };
 
@@ -501,7 +502,6 @@ export function convertHtmlxToJsx(
     // {() => {let _$$p = (somePromise);
     const handleAwait = (awaitBlock: Node) => {
         str.overwrite(awaitBlock.start, awaitBlock.expression.start, '{() => {let _$$p = (');
-        str.prependLeft(awaitBlock.expression.end, ');');
         // then value } | {:then value} ->
         // _$$p.then((value) => {<>
         let thenStart: number;
@@ -517,11 +517,16 @@ export function convertHtmlxToJsx(
             str.prependLeft(thenStart, '</>; ');
             // add the start tag too
             const awaitEnd = htmlx.indexOf('}', awaitBlock.expression.end);
-            str.remove(awaitEnd, awaitEnd + 1);
-            str.appendRight(awaitEnd, ' <>');
+
+            // somePromise} -> somePromise);
+            str.overwrite(awaitBlock.expression.end, awaitEnd + 1, ');');
+            str.appendRight(awaitEnd + 1, ' <>');
         } else {
             thenEnd = htmlx.lastIndexOf('}', awaitBlock.then.start) + 1;
             thenStart = htmlx.indexOf('then', awaitBlock.expression.end);
+
+            // somePromise then -> somePromise); then
+            str.overwrite(awaitBlock.expression.end, thenStart, '); ');
         }
         if (awaitBlock.value) {
             str.overwrite(
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/await-block-parentheses/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/await-block-parentheses/expected.jsx
new file mode 100644
index 000000000..08d8fb537
--- /dev/null
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/await-block-parentheses/expected.jsx
@@ -0,0 +1,9 @@
+<>{() => {let _$$p = (somePromise); _$$p.then((value) => {<>
+    <h1>Promise Resolved</h1>
+</>})}}
+
+{() => {let _$$p = (somePromise); <>
+    <h1>Loading...</h1>
+</>; _$$p.then(() => {<>
+    <h1>Promise Resolved</h1>
+</>})}}</>
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/await-block-parentheses/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/await-block-parentheses/input.svelte
new file mode 100644
index 000000000..fc3781ab9
--- /dev/null
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/await-block-parentheses/input.svelte
@@ -0,0 +1,9 @@
+{#await (somePromise) then value}
+    <h1>Promise Resolved</h1>
+{/await}
+
+{#await (somePromise)}
+    <h1>Loading...</h1>
+{:then}
+    <h1>Promise Resolved</h1>
+{/await}
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/class-parentheses/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/class-parentheses/expected.jsx
new file mode 100644
index 000000000..e616f4daf
--- /dev/null
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/class-parentheses/expected.jsx
@@ -0,0 +1 @@
+<><h1 {...__sveltets_ensureType(Boolean, !!("test"=="test"))}>Hello</h1></>
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/class-parentheses/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/class-parentheses/input.svelte
new file mode 100644
index 000000000..01dd7de6e
--- /dev/null
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/class-parentheses/input.svelte
@@ -0,0 +1 @@
+<h1 class:active={("test"=="test")}>Hello</h1>
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/class/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/class/expected.jsx
index e616f4daf..17ca8d0d3 100644
--- a/packages/svelte2tsx/test/htmlx2jsx/samples/class/expected.jsx
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/class/expected.jsx
@@ -1 +1,2 @@
-<><h1 {...__sveltets_ensureType(Boolean, !!("test"=="test"))}>Hello</h1></>
+<><h1 {...__sveltets_ensureType(Boolean, !!("test"=="test"))}>Hello</h1>
+<h1 {...__sveltets_ensureType(Boolean, !!("test"=="test"))}>Hello</h1></>
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/class/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/class/input.svelte
index 8ab26d52f..5b5553554 100644
--- a/packages/svelte2tsx/test/htmlx2jsx/samples/class/input.svelte
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/class/input.svelte
@@ -1 +1,2 @@
-<h1 class:active={"test"=="test"}>Hello</h1>
\ No newline at end of file
+<h1 class:active={"test"=="test"}>Hello</h1>
+<h1 class:active="{"test"=="test"}">Hello</h1>