From 286b4c688ba038cd5e67ba86b420f29380f2f542 Mon Sep 17 00:00:00 2001 From: "Lyu, Wei Da" Date: Mon, 11 Apr 2022 13:23:33 +0800 Subject: [PATCH] (fix) more robust transformation for reactive declare with destructure --- .../src/svelte2tsx/nodes/ImplicitTopLevelNames.ts | 13 +++++++++---- .../reactive-declare-destructuring/expected.tsx | 1 + .../reactive-declare-destructuring/expectedv2.ts | 1 + .../reactive-declare-destructuring/input.svelte | 1 + 4 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/svelte2tsx/src/svelte2tsx/nodes/ImplicitTopLevelNames.ts b/packages/svelte2tsx/src/svelte2tsx/nodes/ImplicitTopLevelNames.ts index e0b757bc1..8ac19dcc7 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); } } } 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 110af63ac..00b63b1e7 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 88e776193..a17d7d467 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 736461015..14e4ee604 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: ''} );