fix svelte2tsx parentheses overwrite issues (#302)

* fix parentheses overwrite for await block

* fix class directive parentheses overwrite

Author: jasonlyu123

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(

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>
+</>})}}</>

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}

packages/svelte2tsx/test/htmlx2jsx/samples/class-parentheses/expected.jsx

@@ -0,0 +1 @@
+<><h1 {...__sveltets_ensureType(Boolean, !!("test"=="test"))}>Hello</h1></>

packages/svelte2tsx/test/htmlx2jsx/samples/class-parentheses/input.svelte

@@ -0,0 +1 @@
+<h1 class:active={("test"=="test")}>Hello</h1>

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></>

packages/svelte2tsx/test/htmlx2jsx/samples/class/input.svelte

@@ -1 +1,2 @@
-<h1 class:active={"test"=="test"}>Hello</h1>
+<h1 class:active={"test"=="test"}>Hello</h1>
+<h1 class:active="{"test"=="test"}">Hello</h1>