svelte2tsx 0.5.8 → 0.5.11

package/index.js

@@ -2096,7 +2096,7 @@ const oneWayBindingAttributes$1 = new Map(['clientWidth', 'clientHeight', 'offse
  * List of all binding names that are transformed to sth like `binding = variable`.
  * This applies to readonly bindings and the this binding.
  */
-const assignmentBindings = new Set([...oneWayBindingAttributes$1.keys(), 'this']);
+new Set([...oneWayBindingAttributes$1.keys(), 'this']);
 /**
  * Transform bind:xxx into something that conforms to JSX
  */
@@ -2440,22 +2440,42 @@ function handleEventHandler$1(htmlx, str, attr, parent) {
  */
 function handleIf$1(htmlx, str, ifBlock, ifScope) {
     const endIf = htmlx.lastIndexOf('{', ifBlock.end - 1);
+    const constTags = extractConstTags(ifBlock.children);
+    const ifConditionEnd = htmlx.indexOf('}', ifBlock.expression.end) + 1;
+    const hasConstTags = !!constTags.length;
+    const endIIFE = createEndIIFE(hasConstTags);
+    const startIIFE = createStartIIFE(hasConstTags);
+    if (hasConstTags) {
+        // {@const hi = exp} <div>{hi}> -> {(() => { const hi = exp; return <> <div>{hi}<div></> })}
+        constTags.forEach((constTag) => {
+            constTag(ifConditionEnd, str);
+        });
+        str.appendRight(ifConditionEnd, 'return <>');
+        if (ifBlock.else) {
+            // {:else} -> </>})()}</> : <>
+            const elseWord = htmlx.lastIndexOf(':else', ifBlock.else.start);
+            const elseStart = htmlx.lastIndexOf('{', elseWord);
+            str.appendLeft(elseStart, endIIFE);
+        }
+    }
     if (ifBlock.elseif) {
         // {:else if expr}  ->  : (expr) ? <>
+        // {:else if expr}{@const ...}  ->  : (expr) ? <>{(() => {const ...; return <>
         const elseIfStart = htmlx.lastIndexOf('{', ifBlock.expression.start);
-        const elseIfConditionEnd = htmlx.indexOf('}', ifBlock.expression.end) + 1;
-        str.overwrite(elseIfStart, ifBlock.expression.start, '</> : (', { contentOnly: true });
-        str.overwrite(withTrailingPropertyAccess$1(str.original, ifBlock.expression.end), elseIfConditionEnd, ') ? <>');
+        str.overwrite(elseIfStart, ifBlock.expression.start, '</> : (', {
+            contentOnly: true
+        });
+        str.overwrite(withTrailingPropertyAccess$1(str.original, ifBlock.expression.end), ifConditionEnd, ') ? <>' + startIIFE);
         ifScope.addElseIf(ifBlock.expression, str);
         if (!ifBlock.else) {
-            str.appendLeft(endIf, '</> : <>');
+            str.appendLeft(endIf, endIIFE + '</> : <>');
         }
         return;
     }
     // {#if expr}  ->  {(expr) ? <>
+    // {#if expr}{@const ...} ->  {(expr) ? <>{(() => {const ...; return <>
     str.overwrite(ifBlock.start, ifBlock.expression.start, '{(', { contentOnly: true });
-    const end = htmlx.indexOf('}', ifBlock.expression.end);
-    str.overwrite(withTrailingPropertyAccess$1(str.original, ifBlock.expression.end), end + 1, ') ? <>', { contentOnly: true });
+    str.overwrite(withTrailingPropertyAccess$1(str.original, ifBlock.expression.end), ifConditionEnd, ') ? <>' + startIIFE, { contentOnly: true });
     ifScope.addNestedIf(ifBlock.expression, str);
     if (ifBlock.else) {
         // {/if}  ->  </> }
@@ -2463,11 +2483,21 @@ function handleIf$1(htmlx, str, ifBlock, ifScope) {
     }
     else {
         // {/if}  ->  </> : <></>}
-        str.overwrite(endIf, ifBlock.end, '</> : <></>}', { contentOnly: true });
+        // {@const ...} -> </>})()}</> : <></>}
+        str.overwrite(endIf, ifBlock.end, endIIFE + '</> : <></>}', {
+            contentOnly: true
+        });
     }
 }
+function createStartIIFE(hasConstTags) {
+    return hasConstTags ? '{(() => {' : '';
+}
+function createEndIIFE(hasConstTags) {
+    return hasConstTags ? '</>})()}' : '';
+}
 /**
  * {:else}   --->   </> : <>
+ * {:else} {@const ...} -> </> : <>{(() => { const ...; return<>
  */
 function handleElse$1(htmlx, str, elseBlock, parent, ifScope) {
     var _a, _b;
@@ -2478,8 +2508,18 @@ function handleElse$1(htmlx, str, elseBlock, parent, ifScope) {
     const elseEnd = htmlx.lastIndexOf('}', elseBlock.start);
     const elseword = htmlx.lastIndexOf(':else', elseEnd);
     const elseStart = htmlx.lastIndexOf('{', elseword);
-    str.overwrite(elseStart, elseEnd + 1, '</> : <>');
+    const constTags = extractConstTags(elseBlock.children);
+    const hasConstTags = !!constTags.length;
+    str.overwrite(elseStart, elseEnd + 1, '</> : <>' + createStartIIFE(hasConstTags));
     ifScope.addElse();
+    if (!hasConstTags) {
+        return;
+    }
+    constTags.forEach((constTag) => {
+        constTag(elseEnd + 1, str);
+    });
+    str.appendRight(elseEnd + 1, 'return <>');
+    str.appendLeft(elseBlock.end, createEndIIFE(true));
 }
 
 var IfType;
@@ -3451,7 +3491,6 @@ class Element {
             case 'svelte:head':
             case 'svelte:window':
             case 'svelte:body':
-            case 'svelte:element':
             case 'svelte:fragment': {
                 // remove the colon: svelte:xxx -> sveltexxx
                 const nodeName = `svelte${this.node.name.substring(7)}`;
@@ -3460,6 +3499,18 @@ class Element {
                 this.addNameConstDeclaration = () => (this.startTransformation[0] = `{ const ${this._name} = ${createElement}("${nodeName}", {`);
                 break;
             }
+            case 'svelte:element': {
+                const nodeName = this.node.tag
+                    ? typeof this.node.tag !== 'string'
+                        ? [this.node.tag.start, this.node.tag.end]
+                        : `"${this.node.tag}"`
+                    : '""';
+                this._name = '$$_svelteelement' + this.computeDepth();
+                this.startTransformation.push(`{ ${createElement}(`, nodeName, ', {');
+                this.addNameConstDeclaration = () => ((this.startTransformation[0] = `{ const ${this._name} = ${createElement}(`),
+                    ', {');
+                break;
+            }
             case 'slot': {
                 // If the element is a <slot> tag, create the element with the createSlot-function
                 // which is created inside createRenderFunction.ts to check that the name and attributes
@@ -3914,7 +3965,7 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
         return;
     }
     if (attr.value.length == 0) {
-        // attr=""
+        // shouldn't happen
         addAttribute(attributeName, ['""']);
         return;
     }
@@ -3922,6 +3973,11 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
     if (attr.value.length == 1) {
         const attrVal = attr.value[0];
         if (attrVal.type == 'Text') {
+            // Handle the attr="" special case with a transformation that allows mapping of the position
+            if (attrVal.start === attrVal.end) {
+                addAttribute(attributeName, [[attrVal.start - 1, attrVal.end + 1]]);
+                return;
+            }
             const hasBrackets = str.original.lastIndexOf('}', attrVal.end) === attrVal.end - 1 ||
                 str.original.lastIndexOf('}"', attrVal.end) === attrVal.end - 1 ||
                 str.original.lastIndexOf("}'", attrVal.end) === attrVal.end - 1;
@@ -4802,22 +4858,6 @@ function getNamesFromLabeledStatement(node) {
         // svelte won't let you create a variable with $ prefix (reserved for stores)
         .filter((name) => !name.startsWith('$')));
 }
-function isSafeToPrefixWithSemicolon(node) {
-    let parent = node.parent;
-    while (parent && !ts__default['default'].isExpressionStatement(parent)) {
-        parent = parent.parent;
-    }
-    if (!parent) {
-        return false;
-    }
-    return (parent.getStart() === node.getStart() &&
-        !(parent.parent &&
-            (ts__default['default'].isIfStatement(parent.parent) ||
-                ts__default['default'].isForStatement(parent.parent) ||
-                ts__default['default'].isForInStatement(parent.parent) ||
-                ts__default['default'].isForOfStatement(parent.parent) ||
-                ts__default['default'].isWhileStatement(parent.parent))));
-}
 
 function is$$EventsDeclaration(node) {
     return isInterfaceOrTypeDeclaration(node) && node.name.text === '$$Events';
@@ -5922,72 +5962,12 @@ function getSingleSlotDef(componentNode, slotName) {
     return `__sveltets_1_instanceOf(${componentType}).$$slot_def['${slotName}']`;
 }
 
-function handleStore(node, parent, str) {
-    const storename = node.name.slice(1);
-    //handle assign to
-    if (parent.type == 'AssignmentExpression' && parent.left == node && parent.operator == '=') {
-        const dollar = str.original.indexOf('$', node.start);
-        str.remove(dollar, dollar + 1);
-        str.overwrite(node.end, str.original.indexOf('=', node.end) + 1, '.set(');
-        str.appendLeft(parent.end, ')');
-        return;
-    }
-    // handle Assignment operators ($store +=, -=, *=, /=, %=, **=, etc.)
-    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment
-    const operators = ['+=', '-=', '*=', '/=', '%=', '**=', '<<=', '>>=', '>>>=', '&=', '^=', '|='];
-    if (parent.type == 'AssignmentExpression' &&
-        parent.left == node &&
-        operators.includes(parent.operator)) {
-        const storename = node.name.slice(1); // drop the $
-        const operator = parent.operator.substring(0, parent.operator.length - 1); // drop the = sign
-        str.overwrite(parent.start, str.original.indexOf('=', node.end) + 1, `${storename}.set( $${storename} ${operator}`);
-        str.appendLeft(parent.end, ')');
-        return;
-    }
-    // handle $store++, $store--, ++$store, --$store
-    if (parent.type == 'UpdateExpression') {
-        let simpleOperator;
-        if (parent.operator === '++') {
-            simpleOperator = '+';
-        }
-        if (parent.operator === '--') {
-            simpleOperator = '-';
-        }
-        if (simpleOperator) {
-            const storename = node.name.slice(1); // drop the $
-            str.overwrite(parent.start, parent.end, `(${storename}.set( $${storename} ${simpleOperator} 1), $${storename})`);
-        }
-        else {
-            console.warn(`Warning - unrecognized UpdateExpression operator ${parent.operator}!
-                This is an edge case unaccounted for in svelte2tsx, please file an issue:
-                https://github.com/sveltejs/language-tools/issues/new/choose
-                `, str.original.slice(parent.start, parent.end));
-        }
-        return;
-    }
-    const dollar = str.original.indexOf('$', node.start);
-    // handle bindings which are transformed to assignments. These need special treatment because
-    // `(__sveltets_1_store_get(foo), foo$) = something` is syntactically invalid
-    // Therefore remove the outer commas. Note: This relies on the binding expression wrapping
-    // this statement with __sveltets_1_empty
-    if (parent.type === 'Binding' && assignmentBindings.has(parent.name)) {
-        str.overwrite(dollar, dollar + 1, '__sveltets_1_store_get(', { contentOnly: true });
-        str.prependLeft(node.end, `), $${storename}`);
-        return;
-    }
-    // we change "$store" references into "(__sveltets_1_store_get(store), $store)"
-    // - in order to get ts errors if store is not assignable to SvelteStore
-    // - use $store variable defined above to get ts flow control
-    str.overwrite(dollar, dollar + 1, '(__sveltets_1_store_get(', { contentOnly: true });
-    str.prependLeft(node.end, `), $${storename})`);
-}
 const reservedNames = new Set(['$$props', '$$restProps', '$$slots']);
 class Stores {
-    constructor(scope, str, isDeclaration) {
+    constructor(scope, isDeclaration) {
         this.scope = scope;
-        this.str = str;
         this.isDeclaration = isDeclaration;
-        this.pendingStoreResolutions = [];
+        this.possibleStores = [];
     }
     handleDirective(node, str) {
         if (this.notAStore(node.name) || this.isDeclaration.value) {
@@ -5995,7 +5975,7 @@ class Stores {
         }
         const start = str.original.indexOf('$', node.start);
         const end = start + node.name.length;
-        this.pendingStoreResolutions.push({
+        this.possibleStores.push({
             node: { type: 'Identifier', start, end, name: node.name },
             parent: { start: 0, end: 0, type: '' },
             scope: this.scope.current
@@ -6019,18 +5999,17 @@ class Stores {
             if (isObjectKey(parent, prop)) {
                 return;
             }
-            this.pendingStoreResolutions.push({ node, parent, scope: this.scope.current });
+            this.possibleStores.push({ node, parent, scope: this.scope.current });
         }
     }
-    resolveStores() {
-        const unresolvedStores = this.pendingStoreResolutions.filter(({ node, scope }) => {
+    getStoreNames() {
+        const stores = this.possibleStores.filter(({ node, scope }) => {
             const name = node.name;
             // if variable starting with '$' was manually declared by the user,
             // this isn't a store access.
             return !scope.hasDefined(name);
         });
-        unresolvedStores.forEach(({ node, parent }) => handleStore(node, parent, this.str));
-        return unresolvedStores.map(({ node }) => node.name.slice(1));
+        return stores.map(({ node }) => node.name.slice(1));
     }
     notAStore(name) {
         return name[0] !== '$' || reservedNames.has(name);
@@ -6163,12 +6142,15 @@ class ImplicitTopLevelNames {
         // to `let {a} = b;` produces valid code.
         if (ts__default['default'].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);
         }
     }
 }
@@ -6318,9 +6300,15 @@ class Generics {
 /**
  * move imports to top of script so they appear outside our render function
  */
-function handleImportDeclaration(node, str, astOffset, scriptStart) {
+function handleImportDeclaration(node, str, astOffset, scriptStart, sourceFile) {
     var _a;
+    const scanner = ts__default['default'].createScanner(sourceFile.languageVersion, 
+    /*skipTrivia*/ false, sourceFile.languageVariant);
     const comments = (_a = ts__default['default'].getLeadingCommentRanges(node.getFullText(), 0)) !== null && _a !== void 0 ? _a : [];
+    if (!comments.some((comment) => comment.hasTrailingNewLine) &&
+        isNewGroup(sourceFile, node, scanner)) {
+        str.appendRight(node.getStart() + astOffset, '\n');
+    }
     for (const comment of comments) {
         const commentEnd = node.pos + comment.end + astOffset;
         str.move(node.pos + comment.pos + astOffset, commentEnd, scriptStart + 1);
@@ -6333,8 +6321,27 @@ function handleImportDeclaration(node, str, astOffset, scriptStart) {
     const originalEndChar = str.original[node.end + astOffset - 1];
     str.overwrite(node.end + astOffset - 1, node.end + astOffset, originalEndChar + '\n');
 }
+/**
+ * adopted from https://github.com/microsoft/TypeScript/blob/6e0447fdf165b1cec9fc80802abcc15bd23a268f/src/services/organizeImports.ts#L111
+ */
+function isNewGroup(sourceFile, topLevelImportDecl, scanner) {
+    const startPos = topLevelImportDecl.getFullStart();
+    const endPos = topLevelImportDecl.getStart();
+    scanner.setText(sourceFile.text, startPos, endPos - startPos);
+    let numberOfNewLines = 0;
+    while (scanner.getTokenPos() < endPos) {
+        const tokenKind = scanner.scan();
+        if (tokenKind === ts__default['default'].SyntaxKind.NewLineTrivia) {
+            numberOfNewLines++;
+            if (numberOfNewLines >= 2) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
 
-function processInstanceScriptContent(str, script, events, implicitStoreValues, mode) {
+function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, hasModuleScript) {
     const htmlx = str.original;
     const scriptContent = htmlx.substring(script.content.start, script.content.end);
     const tsAst = ts__namespace.createSourceFile('component.ts.svelte', scriptContent, ts__namespace.ScriptTarget.Latest, true, ts__namespace.ScriptKind.TS);
@@ -6355,95 +6362,8 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
     const rootScope = scope;
     const pushScope = () => (scope = new Scope(scope));
     const popScope = () => (scope = scope.parent);
-    const handleStore = (ident, parent) => {
-        // ignore "typeof $store"
-        if (parent && parent.kind === ts__namespace.SyntaxKind.TypeQuery) {
-            return;
-        }
-        // ignore break
-        if (parent && parent.kind === ts__namespace.SyntaxKind.BreakStatement) {
-            return;
-        }
-        const storename = ident.getText().slice(1); // drop the $
-        // handle assign to
-        if (parent &&
-            ts__namespace.isBinaryExpression(parent) &&
-            parent.operatorToken.kind == ts__namespace.SyntaxKind.EqualsToken &&
-            parent.left == ident) {
-            //remove $
-            const dollar = str.original.indexOf('$', ident.getStart() + astOffset);
-            str.remove(dollar, dollar + 1);
-            // replace = with .set(
-            str.overwrite(ident.end + astOffset, parent.operatorToken.end + astOffset, '.set(');
-            // append )
-            str.appendLeft(parent.end + astOffset, ')');
-            return;
-        }
-        // handle Assignment operators ($store +=, -=, *=, /=, %=, **=, etc.)
-        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment
-        const operators = {
-            [ts__namespace.SyntaxKind.PlusEqualsToken]: '+',
-            [ts__namespace.SyntaxKind.MinusEqualsToken]: '-',
-            [ts__namespace.SyntaxKind.AsteriskEqualsToken]: '*',
-            [ts__namespace.SyntaxKind.SlashEqualsToken]: '/',
-            [ts__namespace.SyntaxKind.PercentEqualsToken]: '%',
-            [ts__namespace.SyntaxKind.AsteriskAsteriskEqualsToken]: '**',
-            [ts__namespace.SyntaxKind.LessThanLessThanEqualsToken]: '<<',
-            [ts__namespace.SyntaxKind.GreaterThanGreaterThanEqualsToken]: '>>',
-            [ts__namespace.SyntaxKind.GreaterThanGreaterThanGreaterThanEqualsToken]: '>>>',
-            [ts__namespace.SyntaxKind.AmpersandEqualsToken]: '&',
-            [ts__namespace.SyntaxKind.CaretEqualsToken]: '^',
-            [ts__namespace.SyntaxKind.BarEqualsToken]: '|'
-        };
-        if (ts__namespace.isBinaryExpression(parent) &&
-            parent.left == ident &&
-            Object.keys(operators).find((x) => x === String(parent.operatorToken.kind))) {
-            const operator = operators[parent.operatorToken.kind];
-            str.overwrite(parent.getStart() + astOffset, str.original.indexOf('=', ident.end + astOffset) + 1, `${storename}.set( $${storename} ${operator}`);
-            str.appendLeft(parent.end + astOffset, ')');
-            return;
-        }
-        // handle $store++, $store--, ++$store, --$store
-        if ((ts__namespace.isPrefixUnaryExpression(parent) || ts__namespace.isPostfixUnaryExpression(parent)) &&
-            ![
-                ts__namespace.SyntaxKind.ExclamationToken,
-                ts__namespace.SyntaxKind.PlusToken,
-                ts__namespace.SyntaxKind.MinusToken,
-                ts__namespace.SyntaxKind.TildeToken // ~$store
-            ].includes(parent.operator) /* `!$store` etc does not need processing */) {
-            let simpleOperator;
-            if (parent.operator === ts__namespace.SyntaxKind.PlusPlusToken) {
-                simpleOperator = '+';
-            }
-            if (parent.operator === ts__namespace.SyntaxKind.MinusMinusToken) {
-                simpleOperator = '-';
-            }
-            if (simpleOperator) {
-                str.overwrite(parent.getStart() + astOffset, parent.end + astOffset, `(${storename}.set( $${storename} ${simpleOperator} 1), $${storename})`);
-                return;
-            }
-            else {
-                console.warn(`Warning - unrecognized UnaryExpression operator ${parent.operator}!
-                This is an edge case unaccounted for in svelte2tsx, please file an issue:
-                https://github.com/sveltejs/language-tools/issues/new/choose
-                `, parent.getText());
-            }
-        }
-        // we change "$store" references into "(__sveltets_1_store_get(store), $store)"
-        // - 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);
-        const getPrefix = isSafeToPrefixWithSemicolon(ident)
-            ? ';'
-            : ts__namespace.isShorthandPropertyAssignment(parent)
-                ? // { $store } --> { $store: __sveltets_1_store_get(..)}
-                    ident.text + ': '
-                : '';
-        str.overwrite(dollar, dollar + 1, getPrefix + '(__sveltets_1_store_get(');
-        str.prependLeft(ident.end + astOffset, `), $${storename})`);
-    };
     const resolveStore = (pending) => {
-        let { node, parent, scope } = pending;
+        let { node, scope } = pending;
         const name = node.text;
         while (scope) {
             if (scope.declared.has(name)) {
@@ -6452,8 +6372,6 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
             }
             scope = scope.parent;
         }
-        //We haven't been resolved, we must be a store read/write, handle it.
-        handleStore(node, parent);
         const storename = node.getText().slice(1);
         implicitStoreValues.addStoreAcess(storename);
     };
@@ -6530,7 +6448,7 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
             exportedNames.handleExportDeclaration(node);
         }
         if (ts__namespace.isImportDeclaration(node)) {
-            handleImportDeclaration(node, str, astOffset, script.start);
+            handleImportDeclaration(node, str, astOffset, script.start, tsAst);
             // Check if import is the event dispatcher
             events.checkIfImportIsEventDispatcher(node);
         }
@@ -6603,7 +6521,9 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
         .filter(ts__namespace.isImportDeclaration)
         .sort((a, b) => a.end - b.end)[0];
     if (firstImport) {
-        str.appendRight(firstImport.getStart() + astOffset, '\n');
+        // ensure it's in a newline.
+        // if file has module script ensure an empty line to separate imports
+        str.appendRight(firstImport.getStart() + astOffset, '\n' + (hasModuleScript ? '\n' : ''));
     }
     if (mode === 'dts') {
         // Transform interface declarations to type declarations because indirectly
@@ -6927,7 +6847,7 @@ function processSvelteTemplate(str, options) {
     //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 scopeStack = new ScopeStack();
-    const stores = new Stores(scopeStack, str, isDeclaration);
+    const stores = new Stores(scopeStack, isDeclaration);
     const scripts = new Scripts(htmlxAst);
     const handleSvelteOptions = (node) => {
         for (let i = 0; i < node.attributes.length; i++) {
@@ -7114,7 +7034,7 @@ function processSvelteTemplate(str, options) {
     const { scriptTag, moduleScriptTag } = scripts.getTopLevelScriptTags();
     scripts.blankOtherScriptTags(str);
     //resolve stores
-    const resolvedStores = stores.resolveStores();
+    const resolvedStores = stores.getStoreNames();
     return {
         htmlAst: htmlxAst,
         moduleScriptTag,
@@ -7164,7 +7084,8 @@ function svelte2tsx(svelte, options = {}) {
         if (scriptTag.start != instanceScriptTarget) {
             str.move(scriptTag.start, scriptTag.end, instanceScriptTarget);
         }
-        const res = processInstanceScriptContent(str, scriptTag, events, implicitStoreValues, options.mode);
+        const res = processInstanceScriptContent(str, scriptTag, events, implicitStoreValues, options.mode, 
+        /**hasModuleScripts */ !!moduleScriptTag);
         uses$$props = uses$$props || res.uses$$props;
         uses$$restProps = uses$$restProps || res.uses$$restProps;
         uses$$slots = uses$$slots || res.uses$$slots;

package/index.mjs

@@ -2066,7 +2066,7 @@ const oneWayBindingAttributes$1 = new Map(['clientWidth', 'clientHeight', 'offse
  * List of all binding names that are transformed to sth like `binding = variable`.
  * This applies to readonly bindings and the this binding.
  */
-const assignmentBindings = new Set([...oneWayBindingAttributes$1.keys(), 'this']);
+new Set([...oneWayBindingAttributes$1.keys(), 'this']);
 /**
  * Transform bind:xxx into something that conforms to JSX
  */
@@ -2410,22 +2410,42 @@ function handleEventHandler$1(htmlx, str, attr, parent) {
  */
 function handleIf$1(htmlx, str, ifBlock, ifScope) {
     const endIf = htmlx.lastIndexOf('{', ifBlock.end - 1);
+    const constTags = extractConstTags(ifBlock.children);
+    const ifConditionEnd = htmlx.indexOf('}', ifBlock.expression.end) + 1;
+    const hasConstTags = !!constTags.length;
+    const endIIFE = createEndIIFE(hasConstTags);
+    const startIIFE = createStartIIFE(hasConstTags);
+    if (hasConstTags) {
+        // {@const hi = exp} <div>{hi}> -> {(() => { const hi = exp; return <> <div>{hi}<div></> })}
+        constTags.forEach((constTag) => {
+            constTag(ifConditionEnd, str);
+        });
+        str.appendRight(ifConditionEnd, 'return <>');
+        if (ifBlock.else) {
+            // {:else} -> </>})()}</> : <>
+            const elseWord = htmlx.lastIndexOf(':else', ifBlock.else.start);
+            const elseStart = htmlx.lastIndexOf('{', elseWord);
+            str.appendLeft(elseStart, endIIFE);
+        }
+    }
     if (ifBlock.elseif) {
         // {:else if expr}  ->  : (expr) ? <>
+        // {:else if expr}{@const ...}  ->  : (expr) ? <>{(() => {const ...; return <>
         const elseIfStart = htmlx.lastIndexOf('{', ifBlock.expression.start);
-        const elseIfConditionEnd = htmlx.indexOf('}', ifBlock.expression.end) + 1;
-        str.overwrite(elseIfStart, ifBlock.expression.start, '</> : (', { contentOnly: true });
-        str.overwrite(withTrailingPropertyAccess$1(str.original, ifBlock.expression.end), elseIfConditionEnd, ') ? <>');
+        str.overwrite(elseIfStart, ifBlock.expression.start, '</> : (', {
+            contentOnly: true
+        });
+        str.overwrite(withTrailingPropertyAccess$1(str.original, ifBlock.expression.end), ifConditionEnd, ') ? <>' + startIIFE);
         ifScope.addElseIf(ifBlock.expression, str);
         if (!ifBlock.else) {
-            str.appendLeft(endIf, '</> : <>');
+            str.appendLeft(endIf, endIIFE + '</> : <>');
         }
         return;
     }
     // {#if expr}  ->  {(expr) ? <>
+    // {#if expr}{@const ...} ->  {(expr) ? <>{(() => {const ...; return <>
     str.overwrite(ifBlock.start, ifBlock.expression.start, '{(', { contentOnly: true });
-    const end = htmlx.indexOf('}', ifBlock.expression.end);
-    str.overwrite(withTrailingPropertyAccess$1(str.original, ifBlock.expression.end), end + 1, ') ? <>', { contentOnly: true });
+    str.overwrite(withTrailingPropertyAccess$1(str.original, ifBlock.expression.end), ifConditionEnd, ') ? <>' + startIIFE, { contentOnly: true });
     ifScope.addNestedIf(ifBlock.expression, str);
     if (ifBlock.else) {
         // {/if}  ->  </> }
@@ -2433,11 +2453,21 @@ function handleIf$1(htmlx, str, ifBlock, ifScope) {
     }
     else {
         // {/if}  ->  </> : <></>}
-        str.overwrite(endIf, ifBlock.end, '</> : <></>}', { contentOnly: true });
+        // {@const ...} -> </>})()}</> : <></>}
+        str.overwrite(endIf, ifBlock.end, endIIFE + '</> : <></>}', {
+            contentOnly: true
+        });
     }
 }
+function createStartIIFE(hasConstTags) {
+    return hasConstTags ? '{(() => {' : '';
+}
+function createEndIIFE(hasConstTags) {
+    return hasConstTags ? '</>})()}' : '';
+}
 /**
  * {:else}   --->   </> : <>
+ * {:else} {@const ...} -> </> : <>{(() => { const ...; return<>
  */
 function handleElse$1(htmlx, str, elseBlock, parent, ifScope) {
     var _a, _b;
@@ -2448,8 +2478,18 @@ function handleElse$1(htmlx, str, elseBlock, parent, ifScope) {
     const elseEnd = htmlx.lastIndexOf('}', elseBlock.start);
     const elseword = htmlx.lastIndexOf(':else', elseEnd);
     const elseStart = htmlx.lastIndexOf('{', elseword);
-    str.overwrite(elseStart, elseEnd + 1, '</> : <>');
+    const constTags = extractConstTags(elseBlock.children);
+    const hasConstTags = !!constTags.length;
+    str.overwrite(elseStart, elseEnd + 1, '</> : <>' + createStartIIFE(hasConstTags));
     ifScope.addElse();
+    if (!hasConstTags) {
+        return;
+    }
+    constTags.forEach((constTag) => {
+        constTag(elseEnd + 1, str);
+    });
+    str.appendRight(elseEnd + 1, 'return <>');
+    str.appendLeft(elseBlock.end, createEndIIFE(true));
 }
 
 var IfType;
@@ -3421,7 +3461,6 @@ class Element {
             case 'svelte:head':
             case 'svelte:window':
             case 'svelte:body':
-            case 'svelte:element':
             case 'svelte:fragment': {
                 // remove the colon: svelte:xxx -> sveltexxx
                 const nodeName = `svelte${this.node.name.substring(7)}`;
@@ -3430,6 +3469,18 @@ class Element {
                 this.addNameConstDeclaration = () => (this.startTransformation[0] = `{ const ${this._name} = ${createElement}("${nodeName}", {`);
                 break;
             }
+            case 'svelte:element': {
+                const nodeName = this.node.tag
+                    ? typeof this.node.tag !== 'string'
+                        ? [this.node.tag.start, this.node.tag.end]
+                        : `"${this.node.tag}"`
+                    : '""';
+                this._name = '$$_svelteelement' + this.computeDepth();
+                this.startTransformation.push(`{ ${createElement}(`, nodeName, ', {');
+                this.addNameConstDeclaration = () => ((this.startTransformation[0] = `{ const ${this._name} = ${createElement}(`),
+                    ', {');
+                break;
+            }
             case 'slot': {
                 // If the element is a <slot> tag, create the element with the createSlot-function
                 // which is created inside createRenderFunction.ts to check that the name and attributes
@@ -3884,7 +3935,7 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
         return;
     }
     if (attr.value.length == 0) {
-        // attr=""
+        // shouldn't happen
         addAttribute(attributeName, ['""']);
         return;
     }
@@ -3892,6 +3943,11 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
     if (attr.value.length == 1) {
         const attrVal = attr.value[0];
         if (attrVal.type == 'Text') {
+            // Handle the attr="" special case with a transformation that allows mapping of the position
+            if (attrVal.start === attrVal.end) {
+                addAttribute(attributeName, [[attrVal.start - 1, attrVal.end + 1]]);
+                return;
+            }
             const hasBrackets = str.original.lastIndexOf('}', attrVal.end) === attrVal.end - 1 ||
                 str.original.lastIndexOf('}"', attrVal.end) === attrVal.end - 1 ||
                 str.original.lastIndexOf("}'", attrVal.end) === attrVal.end - 1;
@@ -4772,22 +4828,6 @@ function getNamesFromLabeledStatement(node) {
         // svelte won't let you create a variable with $ prefix (reserved for stores)
         .filter((name) => !name.startsWith('$')));
 }
-function isSafeToPrefixWithSemicolon(node) {
-    let parent = node.parent;
-    while (parent && !ts__default.isExpressionStatement(parent)) {
-        parent = parent.parent;
-    }
-    if (!parent) {
-        return false;
-    }
-    return (parent.getStart() === node.getStart() &&
-        !(parent.parent &&
-            (ts__default.isIfStatement(parent.parent) ||
-                ts__default.isForStatement(parent.parent) ||
-                ts__default.isForInStatement(parent.parent) ||
-                ts__default.isForOfStatement(parent.parent) ||
-                ts__default.isWhileStatement(parent.parent))));
-}
 
 function is$$EventsDeclaration(node) {
     return isInterfaceOrTypeDeclaration(node) && node.name.text === '$$Events';
@@ -5892,72 +5932,12 @@ function getSingleSlotDef(componentNode, slotName) {
     return `__sveltets_1_instanceOf(${componentType}).$$slot_def['${slotName}']`;
 }
 
-function handleStore(node, parent, str) {
-    const storename = node.name.slice(1);
-    //handle assign to
-    if (parent.type == 'AssignmentExpression' && parent.left == node && parent.operator == '=') {
-        const dollar = str.original.indexOf('$', node.start);
-        str.remove(dollar, dollar + 1);
-        str.overwrite(node.end, str.original.indexOf('=', node.end) + 1, '.set(');
-        str.appendLeft(parent.end, ')');
-        return;
-    }
-    // handle Assignment operators ($store +=, -=, *=, /=, %=, **=, etc.)
-    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment
-    const operators = ['+=', '-=', '*=', '/=', '%=', '**=', '<<=', '>>=', '>>>=', '&=', '^=', '|='];
-    if (parent.type == 'AssignmentExpression' &&
-        parent.left == node &&
-        operators.includes(parent.operator)) {
-        const storename = node.name.slice(1); // drop the $
-        const operator = parent.operator.substring(0, parent.operator.length - 1); // drop the = sign
-        str.overwrite(parent.start, str.original.indexOf('=', node.end) + 1, `${storename}.set( $${storename} ${operator}`);
-        str.appendLeft(parent.end, ')');
-        return;
-    }
-    // handle $store++, $store--, ++$store, --$store
-    if (parent.type == 'UpdateExpression') {
-        let simpleOperator;
-        if (parent.operator === '++') {
-            simpleOperator = '+';
-        }
-        if (parent.operator === '--') {
-            simpleOperator = '-';
-        }
-        if (simpleOperator) {
-            const storename = node.name.slice(1); // drop the $
-            str.overwrite(parent.start, parent.end, `(${storename}.set( $${storename} ${simpleOperator} 1), $${storename})`);
-        }
-        else {
-            console.warn(`Warning - unrecognized UpdateExpression operator ${parent.operator}!
-                This is an edge case unaccounted for in svelte2tsx, please file an issue:
-                https://github.com/sveltejs/language-tools/issues/new/choose
-                `, str.original.slice(parent.start, parent.end));
-        }
-        return;
-    }
-    const dollar = str.original.indexOf('$', node.start);
-    // handle bindings which are transformed to assignments. These need special treatment because
-    // `(__sveltets_1_store_get(foo), foo$) = something` is syntactically invalid
-    // Therefore remove the outer commas. Note: This relies on the binding expression wrapping
-    // this statement with __sveltets_1_empty
-    if (parent.type === 'Binding' && assignmentBindings.has(parent.name)) {
-        str.overwrite(dollar, dollar + 1, '__sveltets_1_store_get(', { contentOnly: true });
-        str.prependLeft(node.end, `), $${storename}`);
-        return;
-    }
-    // we change "$store" references into "(__sveltets_1_store_get(store), $store)"
-    // - in order to get ts errors if store is not assignable to SvelteStore
-    // - use $store variable defined above to get ts flow control
-    str.overwrite(dollar, dollar + 1, '(__sveltets_1_store_get(', { contentOnly: true });
-    str.prependLeft(node.end, `), $${storename})`);
-}
 const reservedNames = new Set(['$$props', '$$restProps', '$$slots']);
 class Stores {
-    constructor(scope, str, isDeclaration) {
+    constructor(scope, isDeclaration) {
         this.scope = scope;
-        this.str = str;
         this.isDeclaration = isDeclaration;
-        this.pendingStoreResolutions = [];
+        this.possibleStores = [];
     }
     handleDirective(node, str) {
         if (this.notAStore(node.name) || this.isDeclaration.value) {
@@ -5965,7 +5945,7 @@ class Stores {
         }
         const start = str.original.indexOf('$', node.start);
         const end = start + node.name.length;
-        this.pendingStoreResolutions.push({
+        this.possibleStores.push({
             node: { type: 'Identifier', start, end, name: node.name },
             parent: { start: 0, end: 0, type: '' },
             scope: this.scope.current
@@ -5989,18 +5969,17 @@ class Stores {
             if (isObjectKey(parent, prop)) {
                 return;
             }
-            this.pendingStoreResolutions.push({ node, parent, scope: this.scope.current });
+            this.possibleStores.push({ node, parent, scope: this.scope.current });
         }
     }
-    resolveStores() {
-        const unresolvedStores = this.pendingStoreResolutions.filter(({ node, scope }) => {
+    getStoreNames() {
+        const stores = this.possibleStores.filter(({ node, scope }) => {
             const name = node.name;
             // if variable starting with '$' was manually declared by the user,
             // this isn't a store access.
             return !scope.hasDefined(name);
         });
-        unresolvedStores.forEach(({ node, parent }) => handleStore(node, parent, this.str));
-        return unresolvedStores.map(({ node }) => node.name.slice(1));
+        return stores.map(({ node }) => node.name.slice(1));
     }
     notAStore(name) {
         return name[0] !== '$' || reservedNames.has(name);
@@ -6133,12 +6112,15 @@ class ImplicitTopLevelNames {
         // to `let {a} = b;` produces valid code.
         if (ts__default.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);
         }
     }
 }
@@ -6288,9 +6270,15 @@ class Generics {
 /**
  * move imports to top of script so they appear outside our render function
  */
-function handleImportDeclaration(node, str, astOffset, scriptStart) {
+function handleImportDeclaration(node, str, astOffset, scriptStart, sourceFile) {
     var _a;
+    const scanner = ts__default.createScanner(sourceFile.languageVersion, 
+    /*skipTrivia*/ false, sourceFile.languageVariant);
     const comments = (_a = ts__default.getLeadingCommentRanges(node.getFullText(), 0)) !== null && _a !== void 0 ? _a : [];
+    if (!comments.some((comment) => comment.hasTrailingNewLine) &&
+        isNewGroup(sourceFile, node, scanner)) {
+        str.appendRight(node.getStart() + astOffset, '\n');
+    }
     for (const comment of comments) {
         const commentEnd = node.pos + comment.end + astOffset;
         str.move(node.pos + comment.pos + astOffset, commentEnd, scriptStart + 1);
@@ -6303,8 +6291,27 @@ function handleImportDeclaration(node, str, astOffset, scriptStart) {
     const originalEndChar = str.original[node.end + astOffset - 1];
     str.overwrite(node.end + astOffset - 1, node.end + astOffset, originalEndChar + '\n');
 }
+/**
+ * adopted from https://github.com/microsoft/TypeScript/blob/6e0447fdf165b1cec9fc80802abcc15bd23a268f/src/services/organizeImports.ts#L111
+ */
+function isNewGroup(sourceFile, topLevelImportDecl, scanner) {
+    const startPos = topLevelImportDecl.getFullStart();
+    const endPos = topLevelImportDecl.getStart();
+    scanner.setText(sourceFile.text, startPos, endPos - startPos);
+    let numberOfNewLines = 0;
+    while (scanner.getTokenPos() < endPos) {
+        const tokenKind = scanner.scan();
+        if (tokenKind === ts__default.SyntaxKind.NewLineTrivia) {
+            numberOfNewLines++;
+            if (numberOfNewLines >= 2) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
 
-function processInstanceScriptContent(str, script, events, implicitStoreValues, mode) {
+function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, hasModuleScript) {
     const htmlx = str.original;
     const scriptContent = htmlx.substring(script.content.start, script.content.end);
     const tsAst = ts.createSourceFile('component.ts.svelte', scriptContent, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
@@ -6325,95 +6332,8 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
     const rootScope = scope;
     const pushScope = () => (scope = new Scope(scope));
     const popScope = () => (scope = scope.parent);
-    const handleStore = (ident, parent) => {
-        // ignore "typeof $store"
-        if (parent && parent.kind === ts.SyntaxKind.TypeQuery) {
-            return;
-        }
-        // ignore break
-        if (parent && parent.kind === ts.SyntaxKind.BreakStatement) {
-            return;
-        }
-        const storename = ident.getText().slice(1); // drop the $
-        // handle assign to
-        if (parent &&
-            ts.isBinaryExpression(parent) &&
-            parent.operatorToken.kind == ts.SyntaxKind.EqualsToken &&
-            parent.left == ident) {
-            //remove $
-            const dollar = str.original.indexOf('$', ident.getStart() + astOffset);
-            str.remove(dollar, dollar + 1);
-            // replace = with .set(
-            str.overwrite(ident.end + astOffset, parent.operatorToken.end + astOffset, '.set(');
-            // append )
-            str.appendLeft(parent.end + astOffset, ')');
-            return;
-        }
-        // handle Assignment operators ($store +=, -=, *=, /=, %=, **=, etc.)
-        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment
-        const operators = {
-            [ts.SyntaxKind.PlusEqualsToken]: '+',
-            [ts.SyntaxKind.MinusEqualsToken]: '-',
-            [ts.SyntaxKind.AsteriskEqualsToken]: '*',
-            [ts.SyntaxKind.SlashEqualsToken]: '/',
-            [ts.SyntaxKind.PercentEqualsToken]: '%',
-            [ts.SyntaxKind.AsteriskAsteriskEqualsToken]: '**',
-            [ts.SyntaxKind.LessThanLessThanEqualsToken]: '<<',
-            [ts.SyntaxKind.GreaterThanGreaterThanEqualsToken]: '>>',
-            [ts.SyntaxKind.GreaterThanGreaterThanGreaterThanEqualsToken]: '>>>',
-            [ts.SyntaxKind.AmpersandEqualsToken]: '&',
-            [ts.SyntaxKind.CaretEqualsToken]: '^',
-            [ts.SyntaxKind.BarEqualsToken]: '|'
-        };
-        if (ts.isBinaryExpression(parent) &&
-            parent.left == ident &&
-            Object.keys(operators).find((x) => x === String(parent.operatorToken.kind))) {
-            const operator = operators[parent.operatorToken.kind];
-            str.overwrite(parent.getStart() + astOffset, str.original.indexOf('=', ident.end + astOffset) + 1, `${storename}.set( $${storename} ${operator}`);
-            str.appendLeft(parent.end + astOffset, ')');
-            return;
-        }
-        // handle $store++, $store--, ++$store, --$store
-        if ((ts.isPrefixUnaryExpression(parent) || ts.isPostfixUnaryExpression(parent)) &&
-            ![
-                ts.SyntaxKind.ExclamationToken,
-                ts.SyntaxKind.PlusToken,
-                ts.SyntaxKind.MinusToken,
-                ts.SyntaxKind.TildeToken // ~$store
-            ].includes(parent.operator) /* `!$store` etc does not need processing */) {
-            let simpleOperator;
-            if (parent.operator === ts.SyntaxKind.PlusPlusToken) {
-                simpleOperator = '+';
-            }
-            if (parent.operator === ts.SyntaxKind.MinusMinusToken) {
-                simpleOperator = '-';
-            }
-            if (simpleOperator) {
-                str.overwrite(parent.getStart() + astOffset, parent.end + astOffset, `(${storename}.set( $${storename} ${simpleOperator} 1), $${storename})`);
-                return;
-            }
-            else {
-                console.warn(`Warning - unrecognized UnaryExpression operator ${parent.operator}!
-                This is an edge case unaccounted for in svelte2tsx, please file an issue:
-                https://github.com/sveltejs/language-tools/issues/new/choose
-                `, parent.getText());
-            }
-        }
-        // we change "$store" references into "(__sveltets_1_store_get(store), $store)"
-        // - 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);
-        const getPrefix = isSafeToPrefixWithSemicolon(ident)
-            ? ';'
-            : ts.isShorthandPropertyAssignment(parent)
-                ? // { $store } --> { $store: __sveltets_1_store_get(..)}
-                    ident.text + ': '
-                : '';
-        str.overwrite(dollar, dollar + 1, getPrefix + '(__sveltets_1_store_get(');
-        str.prependLeft(ident.end + astOffset, `), $${storename})`);
-    };
     const resolveStore = (pending) => {
-        let { node, parent, scope } = pending;
+        let { node, scope } = pending;
         const name = node.text;
         while (scope) {
             if (scope.declared.has(name)) {
@@ -6422,8 +6342,6 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
             }
             scope = scope.parent;
         }
-        //We haven't been resolved, we must be a store read/write, handle it.
-        handleStore(node, parent);
         const storename = node.getText().slice(1);
         implicitStoreValues.addStoreAcess(storename);
     };
@@ -6500,7 +6418,7 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
             exportedNames.handleExportDeclaration(node);
         }
         if (ts.isImportDeclaration(node)) {
-            handleImportDeclaration(node, str, astOffset, script.start);
+            handleImportDeclaration(node, str, astOffset, script.start, tsAst);
             // Check if import is the event dispatcher
             events.checkIfImportIsEventDispatcher(node);
         }
@@ -6573,7 +6491,9 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
         .filter(ts.isImportDeclaration)
         .sort((a, b) => a.end - b.end)[0];
     if (firstImport) {
-        str.appendRight(firstImport.getStart() + astOffset, '\n');
+        // ensure it's in a newline.
+        // if file has module script ensure an empty line to separate imports
+        str.appendRight(firstImport.getStart() + astOffset, '\n' + (hasModuleScript ? '\n' : ''));
     }
     if (mode === 'dts') {
         // Transform interface declarations to type declarations because indirectly
@@ -6897,7 +6817,7 @@ function processSvelteTemplate(str, options) {
     //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 scopeStack = new ScopeStack();
-    const stores = new Stores(scopeStack, str, isDeclaration);
+    const stores = new Stores(scopeStack, isDeclaration);
     const scripts = new Scripts(htmlxAst);
     const handleSvelteOptions = (node) => {
         for (let i = 0; i < node.attributes.length; i++) {
@@ -7084,7 +7004,7 @@ function processSvelteTemplate(str, options) {
     const { scriptTag, moduleScriptTag } = scripts.getTopLevelScriptTags();
     scripts.blankOtherScriptTags(str);
     //resolve stores
-    const resolvedStores = stores.resolveStores();
+    const resolvedStores = stores.getStoreNames();
     return {
         htmlAst: htmlxAst,
         moduleScriptTag,
@@ -7134,7 +7054,8 @@ function svelte2tsx(svelte, options = {}) {
         if (scriptTag.start != instanceScriptTarget) {
             str.move(scriptTag.start, scriptTag.end, instanceScriptTarget);
         }
-        const res = processInstanceScriptContent(str, scriptTag, events, implicitStoreValues, options.mode);
+        const res = processInstanceScriptContent(str, scriptTag, events, implicitStoreValues, options.mode, 
+        /**hasModuleScripts */ !!moduleScriptTag);
         uses$$props = uses$$props || res.uses$$props;
         uses$$restProps = uses$$restProps || res.uses$$restProps;
         uses$$slots = uses$$slots || res.uses$$slots;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte2tsx",
-  "version": "0.5.8",
+  "version": "0.5.11",
   "description": "Convert Svelte components to TSX for type checking",
   "author": "David Pershouse",
   "license": "MIT",
@@ -18,6 +18,7 @@
   "module": "index.mjs",
   "types": "index.d.ts",
   "devDependencies": {
+    "@jridgewell/trace-mapping": "^0.3.9",
     "@rollup/plugin-commonjs": "^15.0.0",
     "@rollup/plugin-json": "^4.0.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
@@ -31,13 +32,12 @@
     "periscopic": "^2.0.2",
     "rollup": "2.52.7",
     "rollup-plugin-delete": "^2.0.0",
-    "source-map": "^0.6.1",
     "source-map-support": "^0.5.16",
     "sourcemap-codec": "^1.4.8",
-    "svelte": "~3.47.0",
+    "svelte": "~3.48.0",
     "tiny-glob": "^0.2.6",
     "tslib": "^1.10.0",
-    "typescript": "^4.6.2"
+    "typescript": "^4.7.3"
   },
   "peerDependencies": {
     "svelte": "^3.24",

package/svelte-jsx.d.ts

@@ -11,11 +11,12 @@ declare namespace svelteHTML {
   ): SVGElementTagNameMap[K];
   function mapElementTag(
     tag: any
-  ): HTMLElement;
+  ): any; // needs to be any because used in context of <svelte:element>
 
   function createElement<Elements extends IntrinsicElements, Key extends keyof Elements>(
-    element: Key, attrs: Elements[Key]
-  ): Key extends keyof ElementTagNameMap ? ElementTagNameMap[Key] : Key extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[Key] : HTMLElement;
+    // "undefined | null" because of <svelte:element>
+    element: Key | undefined | null, attrs: Elements[Key]
+  ): Key extends keyof ElementTagNameMap ? ElementTagNameMap[Key] : Key extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[Key] : any;
 
 
   type NativeElement = HTMLElement;
@@ -298,7 +299,6 @@ declare namespace svelteHTML {
     sveltefragment: { slot?: string; };
     svelteoptions: { [name: string]: any };
     sveltehead: { [name: string]: any };
-    svelteelement: { 'this': string | undefined | null; } & HTMLProps<any> & SVGProps<any>;
 
     [name: string]: { [name: string]: any };
   }
@@ -825,6 +825,7 @@ declare namespace svelte.JSX {
       pattern?: string | undefined | null;
       placeholder?: string | undefined | null;
       playsinline?: boolean | undefined | null;
+      ping?: string | undefined | null;
       poster?: string | undefined | null;
       preload?: string | undefined | null;
       radiogroup?: string | undefined | null;

package/svelte-shims.d.ts

@@ -3,9 +3,11 @@
 // are loaded and their declarations conflict each other
 // See https://github.com/sveltejs/language-tools/issues/1059 for an example bug that stems from it
 
+// -- start svelte-ls-remove --
 declare module '*.svelte' {
     export default Svelte2TsxComponent
 }
+// -- end svelte-ls-remove --
 
 declare class Svelte2TsxComponent<
     Props extends {} = {},
@@ -185,7 +187,7 @@ declare function __sveltets_1_mapElementTag<K extends keyof SVGElementTagNameMap
 ): SVGElementTagNameMap[K];
 declare function __sveltets_1_mapElementTag(
     tag: any
-): HTMLElement;
+): any; // needs to be any because used in context of <svelte:element>
 
 declare function __sveltets_1_bubbleEventDef<Events, K extends keyof Events>(
     events: Events, eventKey: K