Repository: sveltejs/language-tools
Pull request #1442 (2022-04-11 05:33:58)

(fix) more robust transformation for reactive declare with destructure
#1439 


Patch:
diff --git a/packages/svelte2tsx/src/svelte2tsx/nodes/ImplicitTopLevelNames.ts b/packages/svelte2tsx/src/svelte2tsx/nodes/ImplicitTopLevelNames.ts
index e0b757bc..8ac19dcc 100644
--- a/packages/svelte2tsx/src/svelte2tsx/nodes/ImplicitTopLevelNames.ts
+++ b/packages/svelte2tsx/src/svelte2tsx/nodes/ImplicitTopLevelNames.ts
@@ -114,12 +114,17 @@ export class ImplicitTopLevelNames {
             ts.isExpressionStatement(node.statement) &&
             isParenthesizedObjectOrArrayLiteralExpression(node.statement.expression)
         ) {
-            const start = node.statement.expression.getStart() + this.astOffset;
-            this.str.overwrite(start, start + 1, '', { contentOnly: true });
-            const end = node.statement.expression.getEnd() + this.astOffset - 1;
+            const parenthesizedExpression = node.statement.expression;
+
+            const parenthesisStart = parenthesizedExpression.getStart() + this.astOffset;
+            const expressionStart = parenthesizedExpression.expression.getStart() + this.astOffset;
+            this.str.overwrite(parenthesisStart, expressionStart, '', { contentOnly: true });
+
+            const parenthesisEnd = parenthesizedExpression.getEnd() + this.astOffset;
+            const expressionEnd = parenthesizedExpression.expression.getEnd() + this.astOffset;
             // We need to keep the `)` of the "wrap with invalidate" expression above.
             // We overwrite the same range so it's needed.
-            overwriteStr(this.str, end, end + 1, ')', true);
+            overwriteStr(this.str, expressionEnd, parenthesisEnd, ')', true);
         }
     }
 }


Test patch:
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/reactive-declare-destructuring/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/reactive-declare-destructuring/expected.tsx
index 110af63a..00b63b1e 100644
--- a/packages/svelte2tsx/test/svelte2tsx/samples/reactive-declare-destructuring/expected.tsx
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/reactive-declare-destructuring/expected.tsx
@@ -5,6 +5,7 @@ let  { a } = __sveltets_1_invalidate(() => ({ a: '' }));
 let  { b: d } = __sveltets_1_invalidate(() => ({ b: '' }));
 let  { c: { length } } = __sveltets_1_invalidate(() => ({ c: '' }));
 let  { ...e } = __sveltets_1_invalidate(() => ({ f: ''}));
+let  { f } = __sveltets_1_invalidate(() => ({ f: ''}));
 ;
 () => (<></>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/reactive-declare-destructuring/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/reactive-declare-destructuring/expectedv2.ts
index 88e77619..a17d7d46 100644
--- a/packages/svelte2tsx/test/svelte2tsx/samples/reactive-declare-destructuring/expectedv2.ts
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/reactive-declare-destructuring/expectedv2.ts
@@ -5,6 +5,7 @@ let  { a } = __sveltets_1_invalidate(() => ({ a: '' }));
 let  { b: d } = __sveltets_1_invalidate(() => ({ b: '' }));
 let  { c: { length } } = __sveltets_1_invalidate(() => ({ c: '' }));
 let  { ...e } = __sveltets_1_invalidate(() => ({ f: ''}));
+let  { f } = __sveltets_1_invalidate(() => ({ f: ''}));
 ;
 async () => {};
 return { props: {}, slots: {}, getters: {}, events: {} }}
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/reactive-declare-destructuring/input.svelte b/packages/svelte2tsx/test/svelte2tsx/samples/reactive-declare-destructuring/input.svelte
index 73646101..14e4ee60 100644
--- a/packages/svelte2tsx/test/svelte2tsx/samples/reactive-declare-destructuring/input.svelte
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/reactive-declare-destructuring/input.svelte
@@ -3,4 +3,5 @@ $: ({ a } = { a: '' });
 $: ({ b: d } = { b: '' });
 $: ({ c: { length } } = { c: '' });
 $: ({ ...e } = { f: ''});
+$: ( { f } = { f: ''} );
 </script>