svelte2tsx 0.5.9 → 0.5.12

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;
@@ -3455,8 +3495,8 @@ class Element {
                 // remove the colon: svelte:xxx -> sveltexxx
                 const nodeName = `svelte${this.node.name.substring(7)}`;
                 this._name = '$$_' + nodeName + this.computeDepth();
-                this.startTransformation.push(`{ ${createElement}("${nodeName}", {`);
-                this.addNameConstDeclaration = () => (this.startTransformation[0] = `{ const ${this._name} = ${createElement}("${nodeName}", {`);
+                this.startTransformation.push(`{ ${createElement}("${this.node.name}", {`);
+                this.addNameConstDeclaration = () => (this.startTransformation[0] = `{ const ${this._name} = ${createElement}("${this.node.name}", {`);
                 break;
             }
             case 'svelte:element': {
@@ -3925,7 +3965,7 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
         return;
     }
     if (attr.value.length == 0) {
-        // attr=""
+        // shouldn't happen
         addAttribute(attributeName, ['""']);
         return;
     }
@@ -3933,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;
@@ -4813,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';
@@ -5933,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) {
@@ -6006,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
@@ -6030,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);
@@ -6332,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);
@@ -6347,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);
@@ -6369,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)) {
@@ -6466,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);
     };
@@ -6544,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);
         }
@@ -6617,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
@@ -6941,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++) {
@@ -7128,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,
@@ -7178,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;
@@ -3425,8 +3465,8 @@ class Element {
                 // remove the colon: svelte:xxx -> sveltexxx
                 const nodeName = `svelte${this.node.name.substring(7)}`;
                 this._name = '$$_' + nodeName + this.computeDepth();
-                this.startTransformation.push(`{ ${createElement}("${nodeName}", {`);
-                this.addNameConstDeclaration = () => (this.startTransformation[0] = `{ const ${this._name} = ${createElement}("${nodeName}", {`);
+                this.startTransformation.push(`{ ${createElement}("${this.node.name}", {`);
+                this.addNameConstDeclaration = () => (this.startTransformation[0] = `{ const ${this._name} = ${createElement}("${this.node.name}", {`);
                 break;
             }
             case 'svelte:element': {
@@ -3895,7 +3935,7 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
         return;
     }
     if (attr.value.length == 0) {
-        // attr=""
+        // shouldn't happen
         addAttribute(attributeName, ['""']);
         return;
     }
@@ -3903,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;
@@ -4783,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';
@@ -5903,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) {
@@ -5976,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
@@ -6000,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);
@@ -6302,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);
@@ -6317,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);
@@ -6339,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)) {
@@ -6436,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);
     };
@@ -6514,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);
         }
@@ -6587,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
@@ -6911,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++) {
@@ -7098,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,
@@ -7148,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.9",
+  "version": "0.5.12",
   "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.49.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

@@ -294,11 +294,11 @@ declare namespace svelteHTML {
     view: SVGProps<SVGViewElement>;
 
     // Svelte specific
-    sveltewindow: HTMLProps<Window> & SvelteWindowProps;
-    sveltebody: HTMLProps<HTMLElement>;
-    sveltefragment: { slot?: string; };
-    svelteoptions: { [name: string]: any };
-    sveltehead: { [name: string]: any };
+    'svelte:window': HTMLProps<Window> & SvelteWindowProps;
+    'svelte:body': HTMLProps<HTMLElement>;
+    'svelte:fragment': { slot?: string; };
+    'svelte:options': { [name: string]: any };
+    'svelte:head': { [name: string]: any };
 
     [name: string]: { [name: string]: any };
   }

package/svelte-shims.d.ts

@@ -5,7 +5,7 @@
 
 // -- start svelte-ls-remove --
 declare module '*.svelte' {
-    export default Svelte2TsxComponent
+    export default _SvelteComponent
 }
 // -- end svelte-ls-remove --
 
@@ -53,6 +53,8 @@ declare class Svelte2TsxComponent<
     $inject_state(): void;
 }
 
+type _SvelteComponent<Props=any,Events=any,Slots=any> = typeof import("svelte") extends {SvelteComponentTyped: any} ? import("svelte").SvelteComponentTyped<Props,Events,Slots> : Svelte2TsxComponent<Props,Events,Slots>;
+
 interface Svelte2TsxComponentConstructorParameters<Props extends {}> {
     /**
      * An HTMLElement to render to. This option is required.
@@ -167,7 +169,7 @@ declare function __sveltets_1_store_get<T = any>(store: SvelteStore<T>): T
 declare function __sveltets_1_store_get<Store extends SvelteStore<any> | undefined | null>(store: Store): Store extends SvelteStore<infer T> ? T : Store;
 declare function __sveltets_1_any(dummy: any): any;
 declare function __sveltets_1_empty(...dummy: any[]): {};
-declare function __sveltets_1_componentType(): AConstructorTypeOf<Svelte2TsxComponent<any, any, any>>
+declare function __sveltets_1_componentType(): AConstructorTypeOf<_SvelteComponent<any, any, any>>
 declare function __sveltets_1_invalidate<T>(getValue: () => T): T
 
 declare function __sveltets_1_mapWindowEvent<K extends keyof HTMLBodyElementEventMap>(
@@ -217,17 +219,18 @@ declare function __sveltets_1_each<T extends ArrayLike<unknown>>(
 
 declare function __sveltets_1_createSvelte2TsxComponent<Props, Events, Slots>(
     render: {props: Props, events: Events, slots: Slots }
-): SvelteComponentConstructor<Svelte2TsxComponent<Props, Events, Slots>,Svelte2TsxComponentConstructorParameters<Props>>;
+): SvelteComponentConstructor<_SvelteComponent<Props, Events, Slots>,Svelte2TsxComponentConstructorParameters<Props>>;
 
 declare function __sveltets_1_unwrapArr<T>(arr: ArrayLike<T>): T
 declare function __sveltets_1_unwrapPromiseLike<T>(promise: PromiseLike<T> | T): T
 
 // v2
 declare function __sveltets_2_createCreateSlot<Slots = Record<string, Record<string, any>>>(): <SlotName extends keyof Slots>(slotName: SlotName, attrs: Slots[SlotName]) => Record<string, any>;
-declare function __sveltets_2_createComponentAny(props: Record<string, any>): Svelte2TsxComponent<any, any, any>;
+declare function __sveltets_2_createComponentAny(props: Record<string, any>): _SvelteComponent<any, any, any>;
 
 declare function __sveltets_2_any(...dummy: any[]): any;
 declare function __sveltets_2_empty(...dummy: any[]): {};
+declare function __sveltets_2_union<T1,T2,T3,T4,T5>(t1:T1,t2?:T2,t3?:T3,t4?:T4,t5?:T5): T1 & T2 & T3 & T4 & T5;
 
 declare function __sveltets_2_cssProp(prop: Record<string, any>): {};
 
@@ -263,7 +266,7 @@ declare function __sveltets_2_ensureType<T1, T2>(type1: AConstructorTypeOf<T1>,
 
 // The following is necessary because there are two clashing errors that can't be solved at the same time
 // when using Svelte2TsxComponent, more precisely the event typings in
-// __sveltets_2_ensureComponent<T extends new (..) => Svelte2TsxComponent<any,||any||<-this,any>>(type: T): T;
+// __sveltets_2_ensureComponent<T extends new (..) => _SvelteComponent<any,||any||<-this,any>>(type: T): T;
 // If we type it as "any", we have an error when using sth like {a: CustomEvent<any>}
 // If we type it as "{}", we have an error when using sth like {[evt: string]: CustomEvent<any>}
 // If we type it as "unknown", we get all kinds of follow up errors which we want to avoid