(fix) store access first in expression statement (#860)

The store transformation now is prepended with a semicolon if it's the first thing in an expression statement because the statement above it could end without a semicolon, making JavaScript think that this is a function invocation
#859

Author: dummdidumm

packages/svelte2tsx/src/svelte2tsx/processInstanceScriptContent.ts

@@ -4,6 +4,7 @@ import * as ts from 'typescript';
 import {
     findExportKeyword,
     getBinaryAssignmentExpr,
+    isFirstInAnExpressionStatement,
     isNotPropertyNameOfImport
 } from './utils/tsAst';
 import { ExportedNames } from './nodes/ExportedNames';
@@ -22,11 +23,11 @@ export interface InstanceScriptProcessResult {
     getters: Set<string>;
 }
 
-type PendingStoreResolution<T> = {
-    node: T;
-    parent: T;
+interface PendingStoreResolution {
+    node: ts.Identifier;
+    parent: ts.Node;
     scope: Scope;
-};
+}
 
 export function processInstanceScriptContent(
     str: MagicString,
@@ -57,7 +58,7 @@ export function processInstanceScriptContent(
 
     //track $store variables since we are only supposed to give top level scopes special treatment, and users can declare $blah variables at higher scopes
     //which prevents us just changing all instances of Identity that start with $
-    const pendingStoreResolutions: Array<PendingStoreResolution<ts.Node>> = [];
+    const pendingStoreResolutions: PendingStoreResolution[] = [];
 
     let scope = new Scope();
     const rootScope = scope;
@@ -140,7 +141,7 @@ export function processInstanceScriptContent(
         }
     };
 
-    const handleStore = (ident: ts.Node, parent: ts.Node) => {
+    const handleStore = (ident: ts.Identifier, parent: ts.Node) => {
         const storename = ident.getText().slice(1); // drop the $
         // handle assign to
         // eslint-disable-next-line max-len
@@ -229,11 +230,12 @@ export function processInstanceScriptContent(
         // - in order to get ts errors if store is not assignable to SvelteStore
         // - use $store variable defined above to get ts flow control
         const dollar = str.original.indexOf('$', ident.getStart() + astOffset);
-        str.overwrite(dollar, dollar + 1, '(__sveltets_store_get(');
+        const getPrefix = isFirstInAnExpressionStatement(ident) ? ';' : '';
+        str.overwrite(dollar, dollar + 1, getPrefix + '(__sveltets_store_get(');
         str.prependLeft(ident.end + astOffset, `), $${storename})`);
     };
 
-    const resolveStore = (pending: PendingStoreResolution<ts.Node>) => {
+    const resolveStore = (pending: PendingStoreResolution) => {
         let { node, parent, scope } = pending;
         const name = (node as ts.Identifier).text;
         while (scope) {

packages/svelte2tsx/src/svelte2tsx/utils/tsAst.ts

@@ -174,3 +174,14 @@ export function getNamesFromLabeledStatement(node: ts.LabeledStatement): string[
             .filter((name) => !name.startsWith('$'))
     );
 }
+
+export function isFirstInAnExpressionStatement(node: ts.Identifier): boolean {
+    let parent = node.parent;
+    while (parent && !ts.isExpressionStatement(parent)) {
+        parent = parent.parent;
+    }
+    if (!parent) {
+        return false;
+    }
+    return parent.getStart() === node.getStart();
+}

packages/svelte2tsx/test/svelte2tsx/samples/$store-assign/expected.tsx

@@ -0,0 +1,29 @@
+///<reference types="svelte" />
+<></>;function render() {
+
+    const store = writable([]);let $store = __sveltets_store_get(store);;
+
+    ;(__sveltets_store_get(store), $store)[1] = true;
+    ;(__sveltets_store_get(store), $store).foo = true;
+
+    ;(__sveltets_store_get(store), $store)[1] = true
+    ;(__sveltets_store_get(store), $store).foo = true
+
+    store.set( true)
+    store.set( true);
+
+    hello[(__sveltets_store_get(store), $store)] = true;
+
+    store.set( true),
+    store.set( false),
+    (__sveltets_store_get(store), $store),
+    (__sveltets_store_get(store), $store).a = true
+
+    ;(__sveltets_store_get(store), $store).a = true,
+    (__sveltets_store_get(store), $store).b = false;
+;
+() => (<></>);
+return { props: {}, slots: {}, getters: {}, events: {} }}
+
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
+}

packages/svelte2tsx/test/svelte2tsx/samples/$store-assign/input.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    const store = writable([]);
+
+    $store[1] = true;
+    $store.foo = true;
+
+    $store[1] = true
+    $store.foo = true
+
+    $store = true
+    $store = true;
+
+    hello[$store] = true;
+
+    $store = true,
+    $store = false,
+    $store,
+    $store.a = true
+
+    $store.a = true,
+    $store.b = false;
+</script>

packages/svelte2tsx/test/svelte2tsx/samples/ast-offset-none/expected.tsx

@@ -1,6 +1,6 @@
 ///<reference types="svelte" />
 <></>;function render() {
-(__sveltets_store_get(var), $var);
+;(__sveltets_store_get(var), $var);
 () => (<></>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
 

packages/svelte2tsx/test/svelte2tsx/samples/ast-offset-some/expected.tsx

@@ -1,6 +1,6 @@
 ///<reference types="svelte" />
 <></>;function render() {
-   (__sveltets_store_get(var), $var);
+   ;(__sveltets_store_get(var), $var);
 () => (<></>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
 

packages/svelte2tsx/test/svelte2tsx/samples/store-from-module/expected.tsx

@@ -5,8 +5,8 @@
     const store4 = writable('');let $store4 = __sveltets_store_get(store4);;
 ;<></>;function render() {
 
-    (__sveltets_store_get(store1), $store1);
-    (__sveltets_store_get(store3), $store3);
+    ;(__sveltets_store_get(store1), $store1);
+    ;(__sveltets_store_get(store3), $store3);
 ;
 () => (<>
 

packages/svelte2tsx/test/svelte2tsx/samples/store-property-access/expected.tsx

@@ -2,15 +2,15 @@
 <></>;function render() {
 
     const store = someStore();let $store = __sveltets_store_get(store);;
-    (__sveltets_store_get(store), $store);
-    (__sveltets_store_get(store), $store).prop;
-    (__sveltets_store_get(store), $store)['prop'];
-    (__sveltets_store_get(store), $store).prop.anotherProp;
-    (__sveltets_store_get(store), $store)['prop'].anotherProp;
-    (__sveltets_store_get(store), $store).prop['anotherProp'];
-    (__sveltets_store_get(store), $store)['prop']['anotherProp'];
-    (__sveltets_store_get(store), $store)?.prop.anotherProp;
-    (__sveltets_store_get(store), $store)?.prop?.anotherProp;
+    ;(__sveltets_store_get(store), $store);
+    ;(__sveltets_store_get(store), $store).prop;
+    ;(__sveltets_store_get(store), $store)['prop'];
+    ;(__sveltets_store_get(store), $store).prop.anotherProp;
+    ;(__sveltets_store_get(store), $store)['prop'].anotherProp;
+    ;(__sveltets_store_get(store), $store).prop['anotherProp'];
+    ;(__sveltets_store_get(store), $store)['prop']['anotherProp'];
+    ;(__sveltets_store_get(store), $store)?.prop.anotherProp;
+    ;(__sveltets_store_get(store), $store)?.prop?.anotherProp;
 ;
 () => (<>
 <p>{(__sveltets_store_get(store), $store)}</p>