svelte2tsx 0.7.39 → 0.7.41

package/index.js

@@ -2829,6 +2829,22 @@ const supportsBindThis = [
  */
 function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus) {
     const isGetSetBinding = attr.expression.type === 'SequenceExpression';
+    const [get, set] = isGetSetBinding ? attr.expression.expressions : [];
+    // bind this
+    if (attr.name === 'this' && supportsBindThis.includes(parent.type)) {
+        // bind:this is effectively only works bottom up - the variable is updated by the element, not
+        // the other way round. So we check if the instance is assignable to the variable.
+        // Note: If the component unmounts (it's inside an if block, or svelte:component this={null},
+        // the value becomes null, but we don't add it to the clause because it would introduce
+        // worse DX for the 99% use case, and because null !== undefined which others might use to type the declaration.
+        if (isGetSetBinding) {
+            element.appendToStartEnd(['(', [set.start, getEnd(set)], `)(${element.name});`]);
+        }
+        else {
+            appendOneWayBinding(attr, ` = ${element.name}`, element);
+        }
+        return;
+    }
     if (!isGetSetBinding) {
         // bind group on input
         if (element instanceof Element && attr.name == 'group' && parent.name == 'input') {
@@ -2836,16 +2852,6 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus)
             appendOneWayBinding(attr, ' = __sveltets_2_any(null)', element);
             return;
         }
-        // bind this
-        if (attr.name === 'this' && supportsBindThis.includes(parent.type)) {
-            // bind:this is effectively only works bottom up - the variable is updated by the element, not
-            // the other way round. So we check if the instance is assignable to the variable.
-            // Note: If the component unmounts (it's inside an if block, or svelte:component this={null},
-            // the value becomes null, but we don't add it to the clause because it would introduce
-            // worse DX for the 99% use case, and because null !== undefined which others might use to type the declaration.
-            appendOneWayBinding(attr, ` = ${element.name}`, element);
-            return;
-        }
         // one way binding
         if (oneWayBindingAttributes.has(attr.name) && element instanceof Element) {
             appendOneWayBinding(attr, `= ${element.name}.${attr.name}`, element);
@@ -2881,7 +2887,6 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus)
                         str.original.lastIndexOf('=', attr.expression.start)
                     ]
                 ];
-    const [get, set] = isGetSetBinding ? attr.expression.expressions : [];
     const value = isShorthand
         ? preserveBind && element instanceof Element
             ? [rangeWithTrailingPropertyAccess(str.original, attr.expression)]
@@ -3111,18 +3116,18 @@ function handleElse(str, elseBlock, parent) {
 }
 
 /**
- * {#key expr}content{/key}   --->   expr; content
+ * {#key expr}content{/key}   --->   expr; {content}
  */
 function handleKey(str, keyBlock) {
-    // {#key expr}   ->   expr;
+    // {#key expr}   ->   expr;{
     str.overwrite(keyBlock.start, keyBlock.expression.start, '', { contentOnly: true });
     const expressionEnd = withTrailingPropertyAccess(str.original, keyBlock.expression.end);
     const end = str.original.indexOf('}', expressionEnd);
-    str.overwrite(expressionEnd, end + 1, '; ');
-    // {/key}   ->
+    str.overwrite(expressionEnd, end + 1, '; {');
+    // {/key}   -> }
     const endKey = str.original.lastIndexOf('{', keyBlock.end - 1);
     if (!isImplicitlyClosedBlock(endKey, keyBlock)) {
-        str.overwrite(endKey, keyBlock.end, '', { contentOnly: true });
+        str.overwrite(endKey, keyBlock.end, '}', { contentOnly: true });
     }
 }
 
@@ -4866,13 +4871,6 @@ function handleAttachTag(tag, element) {
     }
 }
 
-function stripDoctype(str) {
-    const regex = /<!doctype(.+?)>(\n)?/i;
-    const result = regex.exec(str.original);
-    if (result) {
-        str.remove(result.index, result.index + result[0].length);
-    }
-}
 /**
  * Walks the HTMLx part of the Svelte component
  * and converts it to JSX
@@ -4880,7 +4878,6 @@ function stripDoctype(str) {
 function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
     options.typingsNamespace = options.typingsNamespace || 'svelteHTML';
     const preserveAttributeCase = options.namespace === 'foreign';
-    stripDoctype(str);
     const rootSnippets = [];
     let element;
     const pendingSnippetHoistCheck = new Set();
@@ -4960,11 +4957,13 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
         });
     };
     const eventHandler = new EventHandler();
+    const path = [];
     walk(ast, {
         enter: (estreeTypedNode, estreeTypedParent, prop) => {
             var _a;
             const node = estreeTypedNode;
             const parent = estreeTypedParent;
+            path.push(node);
             if (prop == 'params' &&
                 (parent.type == 'FunctionDeclaration' || parent.type == 'ArrowFunctionExpression')) {
                 isDeclaration.value = true;
@@ -5086,7 +5085,10 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                         else if (node.type === 'Slot') {
                             slotHandler.handleSlot(node, templateScope);
                         }
-                        if (node.name !== '!DOCTYPE') {
+                        if (node.name === '!DOCTYPE') {
+                            str.remove(node.start, node.end);
+                        }
+                        else {
                             if (element) {
                                 element.child = new Element(str, node, options.typingsNamespace, element);
                                 element = element.child;
@@ -5152,6 +5154,10 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                             handleScopeAndResolveForSlotInner(node.error, node.expression, node.catch);
                         }
                         break;
+                    case 'AwaitExpression':
+                        isRunes || (isRunes = path.every(({ type }) => type !== 'ArrowFunctionExpression' &&
+                            type !== 'FunctionExpression' &&
+                            type !== 'FunctionDeclaration'));
                 }
             }
             catch (e) {
@@ -5162,6 +5168,7 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
         leave: (estreeTypedNode, estreeTypedParent, prop) => {
             const node = estreeTypedNode;
             const parent = estreeTypedParent;
+            path.pop();
             if (prop == 'params' &&
                 (parent.type == 'FunctionDeclaration' || parent.type == 'ArrowFunctionExpression')) {
                 isDeclaration.value = false;
@@ -5680,7 +5687,7 @@ function addComponentExport(params) {
         addSimpleComponentExport(params);
     }
 }
-function addGenericsComponentExport({ events, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, isTsFile, str, generics, usesSlots, isSvelte5, noSvelteComponentTyped }) {
+function addGenericsComponentExport({ events, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, generics, usesSlots, isSvelte5, noSvelteComponentTyped, hasTopLevelAwait }) {
     const genericsDef = generics.toDefinitionString();
     const genericsRef = generics.toReferencesString();
     const doc = componentDocumentation.getFormatted();
@@ -5688,32 +5695,38 @@ function addGenericsComponentExport({ events, canHaveAnyProp, exportedNames, com
     function returnType(forPart) {
         return `ReturnType<__sveltets_Render${genericsRef}['${forPart}']>`;
     }
+    const renderCall = hasTopLevelAwait
+        ? `(await ${internalHelpers.renderName}${genericsRef}())`
+        : `${internalHelpers.renderName}${genericsRef}()`;
     // TODO once Svelte 4 compatibility is dropped, we can simplify this, because since TS 4.7 it is possible to use generics
     // like this: `typeof render<T>` - which wasn't possibly before, hence the class + methods workaround.
     let statement = `
 class __sveltets_Render${genericsDef} {
     props() {
-        return ${props(true, canHaveAnyProp, exportedNames, `${internalHelpers.renderName}${genericsRef}()`)}.props;
+        return ${props(true, canHaveAnyProp, exportedNames, renderCall)}.props;
     }
     events() {
-        return ${_events(events.hasStrictEvents() || exportedNames.usesRunes(), `${internalHelpers.renderName}${genericsRef}()`)}.events;
+        return ${_events(events.hasStrictEvents() || exportedNames.isRunesMode(), renderCall)}.events;
     }
     slots() {
-        return ${internalHelpers.renderName}${genericsRef}().slots;
+        return ${renderCall}.slots;
     }
 `;
     // For Svelte 5+ we assume TS > 4.7
-    if (isSvelte5 && !isTsFile && exportedNames.usesRunes()) {
+    if (isSvelte5 && exportedNames.isRunesMode()) {
+        const renderType = hasTopLevelAwait
+            ? `Awaited<ReturnType<typeof ${internalHelpers.renderName}${genericsRef}>>`
+            : `ReturnType<typeof ${internalHelpers.renderName}${genericsRef}>`;
         statement = `
 class __sveltets_Render${genericsDef} {
-    props(): ReturnType<typeof ${internalHelpers.renderName}${genericsRef}>['props'] { return null as any; }
-    events(): ReturnType<typeof ${internalHelpers.renderName}${genericsRef}>['events'] { return null as any; }
-    slots(): ReturnType<typeof ${internalHelpers.renderName}${genericsRef}>['slots'] { return null as any; }
+    props(): ${renderType}['props'] { return null as any; }
+    events(): ${renderType}['events'] { return null as any; }
+    slots(): ${renderType}['slots'] { return null as any; }
 `;
     }
     statement += isSvelte5
         ? `    bindings() { return ${exportedNames.createBindingsStr()}; }
-    exports() { return ${exportedNames.hasExports() ? `${internalHelpers.renderName}${genericsRef}().exports` : '{}'}; }
+    ${hasTopLevelAwait ? 'async ' : ''}exports() { return ${exportedNames.hasExports() ? `${renderCall}.exports` : '{}'}; }
 }\n`
         : '}\n';
     const svelteComponentClass = noSvelteComponentTyped
@@ -5726,7 +5739,7 @@ class __sveltets_Render${genericsDef} {
         // Don't add props/events/slots type exports in dts mode for now, maybe someone asks for it to be back,
         // but it's safer to not do it for now to have more flexibility in the future.
         let eventsSlotsType = [];
-        if (events.hasEvents() || !exportedNames.usesRunes()) {
+        if (events.hasEvents() || !exportedNames.isRunesMode()) {
             eventsSlotsType.push(`$$events?: ${returnType('events')}`);
         }
         if (usesSlots) {
@@ -5771,16 +5784,23 @@ class __sveltets_Render${genericsDef} {
     }
     str.append(statement);
 }
-function addSimpleComponentExport({ events, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, usesSlots, noSvelteComponentTyped, isSvelte5 }) {
-    const propDef = props(isTsFile, canHaveAnyProp, exportedNames, _events(events.hasStrictEvents(), `${internalHelpers.renderName}()`));
+function addSimpleComponentExport({ events, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, usesSlots, noSvelteComponentTyped, isSvelte5, hasTopLevelAwait }) {
+    const renderCall = hasTopLevelAwait
+        ? `$${internalHelpers.renderName}`
+        : `${internalHelpers.renderName}()`;
+    const awaitDeclaration = hasTopLevelAwait
+        ? // tsconfig could disallow top-level await, so we need to wrap it in ignore
+            surroundWithIgnoreComments(`const $${internalHelpers.renderName} = await ${internalHelpers.renderName}();`) + '\n'
+        : '';
+    const propDef = props(isTsFile, canHaveAnyProp, exportedNames, _events(events.hasStrictEvents(), renderCall));
     const doc = componentDocumentation.getFormatted();
     const className = fileName && classNameFromFilename(fileName, mode !== 'dts');
     const componentName = className || '$$Component';
     let statement;
     if (mode === 'dts') {
-        if (isSvelte5 && exportedNames.usesRunes() && !usesSlots && !events.hasEvents()) {
+        if (isSvelte5 && exportedNames.isRunesMode() && !usesSlots && !events.hasEvents()) {
             statement =
-                `\n${doc}const ${componentName} = __sveltets_2_fn_component(${internalHelpers.renderName}());\n` +
+                `\n${awaitDeclaration}${doc}const ${componentName} = __sveltets_2_fn_component(${renderCall});\n` +
                     `type ${componentName} = ReturnType<typeof ${componentName}>;\n` +
                     `export default ${componentName};`;
         }
@@ -5806,7 +5826,7 @@ function addSimpleComponentExport({ events, isTsFile, canHaveAnyProp, exportedNa
 declare function $$__sveltets_2_isomorphic_component<
     Props extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>, Exports extends Record<string, any>, Bindings extends string
 >(klass: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }): $$__sveltets_2_IsomorphicComponent<Props, Events, Slots, Exports, Bindings>;\n`) +
-                    `${doc}const ${componentName} = $$__sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
+                    `${awaitDeclaration}${doc}const ${componentName} = $$__sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
                     surroundWithIgnoreComments(`type ${componentName} = InstanceType<typeof ${componentName}>;\n`) +
                     `export default ${componentName};`;
         }
@@ -5841,9 +5861,9 @@ declare function $$__sveltets_2_isomorphic_component<
     }
     else {
         if (isSvelte5) {
-            if (exportedNames.usesRunes() && !usesSlots && !events.hasEvents()) {
+            if (exportedNames.isRunesMode() && !usesSlots && !events.hasEvents()) {
                 statement =
-                    `\n${doc}const ${componentName} = __sveltets_2_fn_component(${internalHelpers.renderName}());\n` +
+                    `\n${awaitDeclaration}${doc}const ${componentName} = __sveltets_2_fn_component(${renderCall});\n` +
                         // Surround the type with ignore comments so it is filtered out from go-to-definition etc,
                         // which for some editors can cause duplicates
                         surroundWithIgnoreComments(`type ${componentName} = ReturnType<typeof ${componentName}>;\n`) +
@@ -5851,7 +5871,7 @@ declare function $$__sveltets_2_isomorphic_component<
             }
             else {
                 statement =
-                    `\n${doc}const ${componentName} = __sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
+                    `\n${awaitDeclaration}${doc}const ${componentName} = __sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
                         surroundWithIgnoreComments(`type ${componentName} = InstanceType<typeof ${componentName}>;\n`) +
                         `export default ${componentName};`;
             }
@@ -5898,7 +5918,7 @@ function _events(strictEvents, renderStr) {
     return strictEvents ? renderStr : `__sveltets_2_with_any_event(${renderStr})`;
 }
 function props(isTsFile, canHaveAnyProp, exportedNames, renderStr) {
-    if (exportedNames.usesRunes()) {
+    if (exportedNames.isRunesMode()) {
         return renderStr;
     }
     else if (isTsFile) {
@@ -5943,7 +5963,7 @@ function classNameFromFilename(filename, appendSuffix) {
     }
 }
 
-function createRenderFunction({ str, scriptTag, scriptDestination, slots, events, exportedNames, uses$$props, uses$$restProps, uses$$slots, uses$$SlotsInterface, generics, isTsFile, mode }) {
+function createRenderFunction({ str, scriptTag, scriptDestination, slots, events, exportedNames, uses$$props, uses$$restProps, uses$$slots, uses$$SlotsInterface, generics, hasTopLevelAwait, isTsFile, mode }) {
     const htmlx = str.original;
     let propsDecl = '';
     if (uses$$props) {
@@ -5977,12 +5997,12 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
                 start++;
                 end--;
             }
-            str.overwrite(scriptTag.start + 1, start - 1, `function ${internalHelpers.renderName}`);
+            str.overwrite(scriptTag.start + 1, start - 1, `${hasTopLevelAwait ? 'async ' : ''}function ${internalHelpers.renderName}`);
             str.overwrite(start - 1, start, isTsFile ? '<' : `<${IGNORE_START_COMMENT}`); // if the generics are unused, only this char is colored opaque
             str.overwrite(end, scriptTagEnd, `>${isTsFile ? '' : IGNORE_END_COMMENT}() {${propsDecl}\n`);
         }
         else {
-            str.overwrite(scriptTag.start + 1, scriptTagEnd, `function ${internalHelpers.renderName}${generics.toDefinitionString(true)}() {${propsDecl}\n`);
+            str.overwrite(scriptTag.start + 1, scriptTagEnd, `${hasTopLevelAwait ? 'async ' : ''}function ${internalHelpers.renderName}${generics.toDefinitionString(true)}() {${propsDecl}\n`);
         }
         const scriptEndTagStart = htmlx.lastIndexOf('<', scriptTag.end - 1);
         // wrap template with callback
@@ -5991,7 +6011,7 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
         });
     }
     else {
-        str.prependRight(scriptDestination, `;function ${internalHelpers.renderName}() {` +
+        str.prependRight(scriptDestination, `;${hasTopLevelAwait ? 'async ' : ''}function ${internalHelpers.renderName}() {` +
             `${propsDecl}${slotsDeclaration}\nasync () => {`);
     }
     const slotsAsDef = uses$$SlotsInterface
@@ -6626,12 +6646,16 @@ class ExportedNames {
                         ? element.propertyName.text
                         : element.name.text;
                     if (isKitRouteFile) {
+                        // TODO once we know we can assume SvelteKit 2.16+, simplify this to always using LayoutProps/PageProps
                         if (name === 'data') {
                             props.push(`data: import('./$types.js').${isKitLayoutFile ? 'LayoutData' : 'PageData'}`);
                         }
                         if (name === 'form' && !isKitLayoutFile) {
                             props.push(`form: import('./$types.js').ActionData`);
                         }
+                        if (name === 'params') {
+                            props.push(`params: import('./$types.js').${isKitLayoutFile ? 'LayoutProps' : 'PageProps'}['params']`);
+                        }
                     }
                     else if (element.initializer) {
                         const initializer = ts.isCallExpression(element.initializer) &&
@@ -6804,7 +6828,7 @@ class ExportedNames {
         this.getters.add(node.text);
     }
     createClassGetters(generics = '') {
-        if (this.usesRunes()) {
+        if (this.isRunesMode()) {
             // In runes mode, exports are no longer part of props
             return Array.from(this.getters)
                 .map((name) => `\n    get ${name}() { return ${internalHelpers.renderName}${generics}().exports.${name} }`)
@@ -6920,7 +6944,7 @@ class ExportedNames {
      */
     createPropsStr(uses$$propsOr$$restProps) {
         const names = Array.from(this.exports.entries());
-        if (this.usesRunes()) {
+        if (this.isRunesMode()) {
             if (this.$props.type) {
                 return '{} as any as ' + this.$props.type;
             }
@@ -6968,14 +6992,14 @@ class ExportedNames {
         return `{${returnElements.join(' , ')}} as {${returnElementsType.join(', ')}}`;
     }
     hasNoProps() {
-        if (this.usesRunes()) {
+        if (this.isRunesMode()) {
             return !this.$props.type && !this.$props.comment;
         }
         const names = Array.from(this.exports.entries());
         return names.length === 0;
     }
     createBindingsStr() {
-        if (this.usesRunes()) {
+        if (this.isRunesMode()) {
             // will be just the empty strings for zero bindings, which is impossible to create a binding for, so it works out fine
             return `__sveltets_$$bindings('${this.$props.bindings.join("', '")}')`;
         }
@@ -6990,17 +7014,17 @@ class ExportedNames {
      */
     createExportsStr() {
         const names = Array.from(this.exports.entries());
-        const others = names.filter(([, { isLet, isNamedExport }]) => !isLet || (this.usesRunes() && isNamedExport));
-        const needsAccessors = this.usesAccessors && names.length > 0 && !this.usesRunes(); // runes mode doesn't support accessors
+        const others = names.filter(([, { isLet, isNamedExport }]) => !isLet || (this.isRunesMode() && isNamedExport));
+        const needsAccessors = this.usesAccessors && names.length > 0 && !this.isRunesMode(); // runes mode doesn't support accessors
         if (this.isSvelte5Plus) {
             let str = '';
-            if (others.length > 0 || this.usesRunes() || needsAccessors) {
+            if (others.length > 0 || this.isRunesMode() || needsAccessors) {
                 const exports = needsAccessors ? names : others;
                 if (others.length > 0 || needsAccessors) {
                     if (this.isTsFile) {
                         str +=
                             // Reference imports that have a type, else they are marked as unused if nothing in the component references them
-                            `, exports: {${this.createReturnElements(this.usesRunes() ? others : [], false, true)}} as any as { ` +
+                            `, exports: {${this.createReturnElements(this.isRunesMode() ? others : [], false, true)}} as any as { ` +
                                 this.createReturnElementsType(exports, undefined, true).join(',') +
                                 ' }';
                     }
@@ -7043,7 +7067,7 @@ class ExportedNames {
         });
     }
     createOptionalPropsArray() {
-        if (this.usesRunes()) {
+        if (this.isRunesMode()) {
             return [];
         }
         else {
@@ -7067,7 +7091,13 @@ class ExportedNames {
         this.hasRunesGlobals =
             this.isSvelte5Plus && globals.some((global) => runes.includes(global));
     }
-    usesRunes() {
+    enterRunesMode() {
+        this.isRunes = true;
+    }
+    /**
+     * True if uses runes or top level await or await in template expressions
+     */
+    isRunesMode() {
         return this.hasRunesGlobals || this.hasPropsRune() || this.isRunes;
     }
 }
@@ -7222,8 +7252,9 @@ class Generics {
  * were used as stores are appended with `let $xx = __sveltets_2_store_get(xx)` to create the store variables.
  */
 class ImplicitStoreValues {
-    constructor(storesResolvedInTemplate = [], renderFunctionStart, storeFromImportsWrapper = (input) => input) {
+    constructor(storesResolvedInTemplate = [], renderFunctionStart, isSvelte5Plus, storeFromImportsWrapper = (input) => input) {
         this.renderFunctionStart = renderFunctionStart;
+        this.isSvelte5Plus = isSvelte5Plus;
         this.storeFromImportsWrapper = storeFromImportsWrapper;
         this.accessedStores = new Set();
         this.variableDeclarations = [];
@@ -7296,7 +7327,9 @@ class ImplicitStoreValues {
     }
     attachStoreValueDeclarationOfImportsToRenderFn(str) {
         const storeNames = this.importStatements
-            .filter(({ name }) => name && this.accessedStores.has(name.getText()))
+            .filter((declaration) => declaration.name &&
+            (!this.isSvelte5Plus || !this.isSvelteStoreDerivedImport(declaration)) &&
+            this.accessedStores.has(declaration.name.getText()))
             .map(({ name }) => name.getText());
         if (!storeNames.length) {
             return;
@@ -7304,6 +7337,17 @@ class ImplicitStoreValues {
         const storeDeclarations = this.storeFromImportsWrapper(surroundWithIgnoreComments(this.createStoreDeclarations(storeNames)));
         str.appendRight(this.renderFunctionStart, storeDeclarations);
     }
+    isSvelteStoreDerivedImport(declaration) {
+        // named import of 'derived' from 'svelte/store'
+        if (!ts.isImportSpecifier(declaration) || declaration.name.text !== 'derived') {
+            return false;
+        }
+        const importDeclaration = declaration.parent.parent.parent;
+        return (ts.isImportDeclaration(importDeclaration) &&
+            importDeclaration.moduleSpecifier &&
+            ts.isStringLiteral(importDeclaration.moduleSpecifier) &&
+            importDeclaration.moduleSpecifier.text === 'svelte/store');
+    }
     createStoreDeclarations(storeNames) {
         let declarations = '';
         for (let i = 0; i < storeNames.length; i++) {
@@ -7531,6 +7575,7 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
     let uses$$restProps = false;
     let uses$$slots = false;
     let uses$$SlotsInterface = false;
+    let hasTopLevelAwait = false;
     //track if we are in a declaration scope
     let isDeclaration = false;
     //track the variable declaration node
@@ -7719,6 +7764,10 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
             }
             implicitTopLevelNames.handleReactiveStatement(node, binaryExpression);
         }
+        // Check for top-level await expressions
+        if (isSvelte5Plus && ts.isAwaitExpression(node) && scope === rootScope) {
+            hasTopLevelAwait = true;
+        }
         // Defensively call function (checking for undefined) because it got added only recently (TS 4.0)
         // and therefore might break people using older TS versions
         // Don't transform in ts mode because <type>value type assertions are valid in this case
@@ -7769,7 +7818,8 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
         uses$$restProps,
         uses$$slots,
         uses$$SlotsInterface,
-        generics
+        generics,
+        hasTopLevelAwait
     };
 }
 function transformInterfacesToTypes(tsAst, str, astOffset, movedNodes) {
@@ -7902,11 +7952,12 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
     const renderFunctionStart = scriptTag
         ? str.original.lastIndexOf('>', scriptTag.content.start) + 1
         : instanceScriptTarget;
-    const implicitStoreValues = new ImplicitStoreValues(resolvedStores, renderFunctionStart);
+    const implicitStoreValues = new ImplicitStoreValues(resolvedStores, renderFunctionStart, svelte5Plus);
     //move the instance script and process the content
     let exportedNames = new ExportedNames(str, 0, basename, isTsFile, svelte5Plus, isRunes);
     let generics = new Generics(str, 0, { attributes: [] });
     let uses$$SlotsInterface = false;
+    let hasTopLevelAwait = false;
     if (scriptTag) {
         //ensure it is between the module script and the rest of the template (the variables need to be declared before the jsx template)
         if (scriptTag.start != instanceScriptTarget) {
@@ -7916,11 +7967,14 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
         uses$$props = uses$$props || res.uses$$props;
         uses$$restProps = uses$$restProps || res.uses$$restProps;
         uses$$slots = uses$$slots || res.uses$$slots;
-        ({ exportedNames, events, generics, uses$$SlotsInterface } = res);
+        ({ exportedNames, events, generics, uses$$SlotsInterface, hasTopLevelAwait } = res);
     }
     exportedNames.usesAccessors = usesAccessors;
     if (svelte5Plus) {
         exportedNames.checkGlobalsForRunes(implicitStoreValues.getGlobals());
+        if (hasTopLevelAwait) {
+            exportedNames.enterRunesMode();
+        }
     }
     //wrap the script tag and template content in a function returning the slot and exports
     createRenderFunction({
@@ -7935,13 +7989,14 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
         uses$$slots,
         uses$$SlotsInterface,
         generics,
+        hasTopLevelAwait,
         svelte5Plus,
         isTsFile,
         mode: options.mode
     });
     // we need to process the module script after the instance script has moved otherwise we get warnings about moving edited items
     if (moduleScriptTag) {
-        processModuleScriptTag(str, moduleScriptTag, new ImplicitStoreValues(implicitStoreValues.getAccessedStores(), renderFunctionStart, scriptTag || options.mode === 'ts' ? undefined : (input) => `</>;${input}<>`), moduleAst);
+        processModuleScriptTag(str, moduleScriptTag, new ImplicitStoreValues(implicitStoreValues.getAccessedStores(), renderFunctionStart, svelte5Plus, scriptTag || options.mode === 'ts' ? undefined : (input) => `</>;${input}<>`), moduleAst);
         if (!scriptTag) {
             moduleAst.tsAst.forEachChild((node) => exportedNames.hoistableInterfaces.analyzeModuleScriptNode(node));
         }
@@ -7989,6 +8044,7 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
         mode: options.mode,
         generics,
         isSvelte5: svelte5Plus,
+        hasTopLevelAwait,
         noSvelteComponentTyped: options.noSvelteComponentTyped
     });
     if (options.mode === 'dts') {

package/index.mjs

@@ -2809,6 +2809,22 @@ const supportsBindThis = [
  */
 function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus) {
     const isGetSetBinding = attr.expression.type === 'SequenceExpression';
+    const [get, set] = isGetSetBinding ? attr.expression.expressions : [];
+    // bind this
+    if (attr.name === 'this' && supportsBindThis.includes(parent.type)) {
+        // bind:this is effectively only works bottom up - the variable is updated by the element, not
+        // the other way round. So we check if the instance is assignable to the variable.
+        // Note: If the component unmounts (it's inside an if block, or svelte:component this={null},
+        // the value becomes null, but we don't add it to the clause because it would introduce
+        // worse DX for the 99% use case, and because null !== undefined which others might use to type the declaration.
+        if (isGetSetBinding) {
+            element.appendToStartEnd(['(', [set.start, getEnd(set)], `)(${element.name});`]);
+        }
+        else {
+            appendOneWayBinding(attr, ` = ${element.name}`, element);
+        }
+        return;
+    }
     if (!isGetSetBinding) {
         // bind group on input
         if (element instanceof Element && attr.name == 'group' && parent.name == 'input') {
@@ -2816,16 +2832,6 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus)
             appendOneWayBinding(attr, ' = __sveltets_2_any(null)', element);
             return;
         }
-        // bind this
-        if (attr.name === 'this' && supportsBindThis.includes(parent.type)) {
-            // bind:this is effectively only works bottom up - the variable is updated by the element, not
-            // the other way round. So we check if the instance is assignable to the variable.
-            // Note: If the component unmounts (it's inside an if block, or svelte:component this={null},
-            // the value becomes null, but we don't add it to the clause because it would introduce
-            // worse DX for the 99% use case, and because null !== undefined which others might use to type the declaration.
-            appendOneWayBinding(attr, ` = ${element.name}`, element);
-            return;
-        }
         // one way binding
         if (oneWayBindingAttributes.has(attr.name) && element instanceof Element) {
             appendOneWayBinding(attr, `= ${element.name}.${attr.name}`, element);
@@ -2861,7 +2867,6 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus)
                         str.original.lastIndexOf('=', attr.expression.start)
                     ]
                 ];
-    const [get, set] = isGetSetBinding ? attr.expression.expressions : [];
     const value = isShorthand
         ? preserveBind && element instanceof Element
             ? [rangeWithTrailingPropertyAccess(str.original, attr.expression)]
@@ -3091,18 +3096,18 @@ function handleElse(str, elseBlock, parent) {
 }
 
 /**
- * {#key expr}content{/key}   --->   expr; content
+ * {#key expr}content{/key}   --->   expr; {content}
  */
 function handleKey(str, keyBlock) {
-    // {#key expr}   ->   expr;
+    // {#key expr}   ->   expr;{
     str.overwrite(keyBlock.start, keyBlock.expression.start, '', { contentOnly: true });
     const expressionEnd = withTrailingPropertyAccess(str.original, keyBlock.expression.end);
     const end = str.original.indexOf('}', expressionEnd);
-    str.overwrite(expressionEnd, end + 1, '; ');
-    // {/key}   ->
+    str.overwrite(expressionEnd, end + 1, '; {');
+    // {/key}   -> }
     const endKey = str.original.lastIndexOf('{', keyBlock.end - 1);
     if (!isImplicitlyClosedBlock(endKey, keyBlock)) {
-        str.overwrite(endKey, keyBlock.end, '', { contentOnly: true });
+        str.overwrite(endKey, keyBlock.end, '}', { contentOnly: true });
     }
 }
 
@@ -4846,13 +4851,6 @@ function handleAttachTag(tag, element) {
     }
 }
 
-function stripDoctype(str) {
-    const regex = /<!doctype(.+?)>(\n)?/i;
-    const result = regex.exec(str.original);
-    if (result) {
-        str.remove(result.index, result.index + result[0].length);
-    }
-}
 /**
  * Walks the HTMLx part of the Svelte component
  * and converts it to JSX
@@ -4860,7 +4858,6 @@ function stripDoctype(str) {
 function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
     options.typingsNamespace = options.typingsNamespace || 'svelteHTML';
     const preserveAttributeCase = options.namespace === 'foreign';
-    stripDoctype(str);
     const rootSnippets = [];
     let element;
     const pendingSnippetHoistCheck = new Set();
@@ -4940,11 +4937,13 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
         });
     };
     const eventHandler = new EventHandler();
+    const path = [];
     walk(ast, {
         enter: (estreeTypedNode, estreeTypedParent, prop) => {
             var _a;
             const node = estreeTypedNode;
             const parent = estreeTypedParent;
+            path.push(node);
             if (prop == 'params' &&
                 (parent.type == 'FunctionDeclaration' || parent.type == 'ArrowFunctionExpression')) {
                 isDeclaration.value = true;
@@ -5066,7 +5065,10 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                         else if (node.type === 'Slot') {
                             slotHandler.handleSlot(node, templateScope);
                         }
-                        if (node.name !== '!DOCTYPE') {
+                        if (node.name === '!DOCTYPE') {
+                            str.remove(node.start, node.end);
+                        }
+                        else {
                             if (element) {
                                 element.child = new Element(str, node, options.typingsNamespace, element);
                                 element = element.child;
@@ -5132,6 +5134,10 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                             handleScopeAndResolveForSlotInner(node.error, node.expression, node.catch);
                         }
                         break;
+                    case 'AwaitExpression':
+                        isRunes || (isRunes = path.every(({ type }) => type !== 'ArrowFunctionExpression' &&
+                            type !== 'FunctionExpression' &&
+                            type !== 'FunctionDeclaration'));
                 }
             }
             catch (e) {
@@ -5142,6 +5148,7 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
         leave: (estreeTypedNode, estreeTypedParent, prop) => {
             const node = estreeTypedNode;
             const parent = estreeTypedParent;
+            path.pop();
             if (prop == 'params' &&
                 (parent.type == 'FunctionDeclaration' || parent.type == 'ArrowFunctionExpression')) {
                 isDeclaration.value = false;
@@ -5660,7 +5667,7 @@ function addComponentExport(params) {
         addSimpleComponentExport(params);
     }
 }
-function addGenericsComponentExport({ events, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, isTsFile, str, generics, usesSlots, isSvelte5, noSvelteComponentTyped }) {
+function addGenericsComponentExport({ events, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, generics, usesSlots, isSvelte5, noSvelteComponentTyped, hasTopLevelAwait }) {
     const genericsDef = generics.toDefinitionString();
     const genericsRef = generics.toReferencesString();
     const doc = componentDocumentation.getFormatted();
@@ -5668,32 +5675,38 @@ function addGenericsComponentExport({ events, canHaveAnyProp, exportedNames, com
     function returnType(forPart) {
         return `ReturnType<__sveltets_Render${genericsRef}['${forPart}']>`;
     }
+    const renderCall = hasTopLevelAwait
+        ? `(await ${internalHelpers.renderName}${genericsRef}())`
+        : `${internalHelpers.renderName}${genericsRef}()`;
     // TODO once Svelte 4 compatibility is dropped, we can simplify this, because since TS 4.7 it is possible to use generics
     // like this: `typeof render<T>` - which wasn't possibly before, hence the class + methods workaround.
     let statement = `
 class __sveltets_Render${genericsDef} {
     props() {
-        return ${props(true, canHaveAnyProp, exportedNames, `${internalHelpers.renderName}${genericsRef}()`)}.props;
+        return ${props(true, canHaveAnyProp, exportedNames, renderCall)}.props;
     }
     events() {
-        return ${_events(events.hasStrictEvents() || exportedNames.usesRunes(), `${internalHelpers.renderName}${genericsRef}()`)}.events;
+        return ${_events(events.hasStrictEvents() || exportedNames.isRunesMode(), renderCall)}.events;
     }
     slots() {
-        return ${internalHelpers.renderName}${genericsRef}().slots;
+        return ${renderCall}.slots;
     }
 `;
     // For Svelte 5+ we assume TS > 4.7
-    if (isSvelte5 && !isTsFile && exportedNames.usesRunes()) {
+    if (isSvelte5 && exportedNames.isRunesMode()) {
+        const renderType = hasTopLevelAwait
+            ? `Awaited<ReturnType<typeof ${internalHelpers.renderName}${genericsRef}>>`
+            : `ReturnType<typeof ${internalHelpers.renderName}${genericsRef}>`;
         statement = `
 class __sveltets_Render${genericsDef} {
-    props(): ReturnType<typeof ${internalHelpers.renderName}${genericsRef}>['props'] { return null as any; }
-    events(): ReturnType<typeof ${internalHelpers.renderName}${genericsRef}>['events'] { return null as any; }
-    slots(): ReturnType<typeof ${internalHelpers.renderName}${genericsRef}>['slots'] { return null as any; }
+    props(): ${renderType}['props'] { return null as any; }
+    events(): ${renderType}['events'] { return null as any; }
+    slots(): ${renderType}['slots'] { return null as any; }
 `;
     }
     statement += isSvelte5
         ? `    bindings() { return ${exportedNames.createBindingsStr()}; }
-    exports() { return ${exportedNames.hasExports() ? `${internalHelpers.renderName}${genericsRef}().exports` : '{}'}; }
+    ${hasTopLevelAwait ? 'async ' : ''}exports() { return ${exportedNames.hasExports() ? `${renderCall}.exports` : '{}'}; }
 }\n`
         : '}\n';
     const svelteComponentClass = noSvelteComponentTyped
@@ -5706,7 +5719,7 @@ class __sveltets_Render${genericsDef} {
         // Don't add props/events/slots type exports in dts mode for now, maybe someone asks for it to be back,
         // but it's safer to not do it for now to have more flexibility in the future.
         let eventsSlotsType = [];
-        if (events.hasEvents() || !exportedNames.usesRunes()) {
+        if (events.hasEvents() || !exportedNames.isRunesMode()) {
             eventsSlotsType.push(`$$events?: ${returnType('events')}`);
         }
         if (usesSlots) {
@@ -5751,16 +5764,23 @@ class __sveltets_Render${genericsDef} {
     }
     str.append(statement);
 }
-function addSimpleComponentExport({ events, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, usesSlots, noSvelteComponentTyped, isSvelte5 }) {
-    const propDef = props(isTsFile, canHaveAnyProp, exportedNames, _events(events.hasStrictEvents(), `${internalHelpers.renderName}()`));
+function addSimpleComponentExport({ events, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, usesSlots, noSvelteComponentTyped, isSvelte5, hasTopLevelAwait }) {
+    const renderCall = hasTopLevelAwait
+        ? `$${internalHelpers.renderName}`
+        : `${internalHelpers.renderName}()`;
+    const awaitDeclaration = hasTopLevelAwait
+        ? // tsconfig could disallow top-level await, so we need to wrap it in ignore
+            surroundWithIgnoreComments(`const $${internalHelpers.renderName} = await ${internalHelpers.renderName}();`) + '\n'
+        : '';
+    const propDef = props(isTsFile, canHaveAnyProp, exportedNames, _events(events.hasStrictEvents(), renderCall));
     const doc = componentDocumentation.getFormatted();
     const className = fileName && classNameFromFilename(fileName, mode !== 'dts');
     const componentName = className || '$$Component';
     let statement;
     if (mode === 'dts') {
-        if (isSvelte5 && exportedNames.usesRunes() && !usesSlots && !events.hasEvents()) {
+        if (isSvelte5 && exportedNames.isRunesMode() && !usesSlots && !events.hasEvents()) {
             statement =
-                `\n${doc}const ${componentName} = __sveltets_2_fn_component(${internalHelpers.renderName}());\n` +
+                `\n${awaitDeclaration}${doc}const ${componentName} = __sveltets_2_fn_component(${renderCall});\n` +
                     `type ${componentName} = ReturnType<typeof ${componentName}>;\n` +
                     `export default ${componentName};`;
         }
@@ -5786,7 +5806,7 @@ function addSimpleComponentExport({ events, isTsFile, canHaveAnyProp, exportedNa
 declare function $$__sveltets_2_isomorphic_component<
     Props extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>, Exports extends Record<string, any>, Bindings extends string
 >(klass: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }): $$__sveltets_2_IsomorphicComponent<Props, Events, Slots, Exports, Bindings>;\n`) +
-                    `${doc}const ${componentName} = $$__sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
+                    `${awaitDeclaration}${doc}const ${componentName} = $$__sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
                     surroundWithIgnoreComments(`type ${componentName} = InstanceType<typeof ${componentName}>;\n`) +
                     `export default ${componentName};`;
         }
@@ -5821,9 +5841,9 @@ declare function $$__sveltets_2_isomorphic_component<
     }
     else {
         if (isSvelte5) {
-            if (exportedNames.usesRunes() && !usesSlots && !events.hasEvents()) {
+            if (exportedNames.isRunesMode() && !usesSlots && !events.hasEvents()) {
                 statement =
-                    `\n${doc}const ${componentName} = __sveltets_2_fn_component(${internalHelpers.renderName}());\n` +
+                    `\n${awaitDeclaration}${doc}const ${componentName} = __sveltets_2_fn_component(${renderCall});\n` +
                         // Surround the type with ignore comments so it is filtered out from go-to-definition etc,
                         // which for some editors can cause duplicates
                         surroundWithIgnoreComments(`type ${componentName} = ReturnType<typeof ${componentName}>;\n`) +
@@ -5831,7 +5851,7 @@ declare function $$__sveltets_2_isomorphic_component<
             }
             else {
                 statement =
-                    `\n${doc}const ${componentName} = __sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
+                    `\n${awaitDeclaration}${doc}const ${componentName} = __sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
                         surroundWithIgnoreComments(`type ${componentName} = InstanceType<typeof ${componentName}>;\n`) +
                         `export default ${componentName};`;
             }
@@ -5878,7 +5898,7 @@ function _events(strictEvents, renderStr) {
     return strictEvents ? renderStr : `__sveltets_2_with_any_event(${renderStr})`;
 }
 function props(isTsFile, canHaveAnyProp, exportedNames, renderStr) {
-    if (exportedNames.usesRunes()) {
+    if (exportedNames.isRunesMode()) {
         return renderStr;
     }
     else if (isTsFile) {
@@ -5923,7 +5943,7 @@ function classNameFromFilename(filename, appendSuffix) {
     }
 }
 
-function createRenderFunction({ str, scriptTag, scriptDestination, slots, events, exportedNames, uses$$props, uses$$restProps, uses$$slots, uses$$SlotsInterface, generics, isTsFile, mode }) {
+function createRenderFunction({ str, scriptTag, scriptDestination, slots, events, exportedNames, uses$$props, uses$$restProps, uses$$slots, uses$$SlotsInterface, generics, hasTopLevelAwait, isTsFile, mode }) {
     const htmlx = str.original;
     let propsDecl = '';
     if (uses$$props) {
@@ -5957,12 +5977,12 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
                 start++;
                 end--;
             }
-            str.overwrite(scriptTag.start + 1, start - 1, `function ${internalHelpers.renderName}`);
+            str.overwrite(scriptTag.start + 1, start - 1, `${hasTopLevelAwait ? 'async ' : ''}function ${internalHelpers.renderName}`);
             str.overwrite(start - 1, start, isTsFile ? '<' : `<${IGNORE_START_COMMENT}`); // if the generics are unused, only this char is colored opaque
             str.overwrite(end, scriptTagEnd, `>${isTsFile ? '' : IGNORE_END_COMMENT}() {${propsDecl}\n`);
         }
         else {
-            str.overwrite(scriptTag.start + 1, scriptTagEnd, `function ${internalHelpers.renderName}${generics.toDefinitionString(true)}() {${propsDecl}\n`);
+            str.overwrite(scriptTag.start + 1, scriptTagEnd, `${hasTopLevelAwait ? 'async ' : ''}function ${internalHelpers.renderName}${generics.toDefinitionString(true)}() {${propsDecl}\n`);
         }
         const scriptEndTagStart = htmlx.lastIndexOf('<', scriptTag.end - 1);
         // wrap template with callback
@@ -5971,7 +5991,7 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
         });
     }
     else {
-        str.prependRight(scriptDestination, `;function ${internalHelpers.renderName}() {` +
+        str.prependRight(scriptDestination, `;${hasTopLevelAwait ? 'async ' : ''}function ${internalHelpers.renderName}() {` +
             `${propsDecl}${slotsDeclaration}\nasync () => {`);
     }
     const slotsAsDef = uses$$SlotsInterface
@@ -6606,12 +6626,16 @@ class ExportedNames {
                         ? element.propertyName.text
                         : element.name.text;
                     if (isKitRouteFile) {
+                        // TODO once we know we can assume SvelteKit 2.16+, simplify this to always using LayoutProps/PageProps
                         if (name === 'data') {
                             props.push(`data: import('./$types.js').${isKitLayoutFile ? 'LayoutData' : 'PageData'}`);
                         }
                         if (name === 'form' && !isKitLayoutFile) {
                             props.push(`form: import('./$types.js').ActionData`);
                         }
+                        if (name === 'params') {
+                            props.push(`params: import('./$types.js').${isKitLayoutFile ? 'LayoutProps' : 'PageProps'}['params']`);
+                        }
                     }
                     else if (element.initializer) {
                         const initializer = ts.isCallExpression(element.initializer) &&
@@ -6784,7 +6808,7 @@ class ExportedNames {
         this.getters.add(node.text);
     }
     createClassGetters(generics = '') {
-        if (this.usesRunes()) {
+        if (this.isRunesMode()) {
             // In runes mode, exports are no longer part of props
             return Array.from(this.getters)
                 .map((name) => `\n    get ${name}() { return ${internalHelpers.renderName}${generics}().exports.${name} }`)
@@ -6900,7 +6924,7 @@ class ExportedNames {
      */
     createPropsStr(uses$$propsOr$$restProps) {
         const names = Array.from(this.exports.entries());
-        if (this.usesRunes()) {
+        if (this.isRunesMode()) {
             if (this.$props.type) {
                 return '{} as any as ' + this.$props.type;
             }
@@ -6948,14 +6972,14 @@ class ExportedNames {
         return `{${returnElements.join(' , ')}} as {${returnElementsType.join(', ')}}`;
     }
     hasNoProps() {
-        if (this.usesRunes()) {
+        if (this.isRunesMode()) {
             return !this.$props.type && !this.$props.comment;
         }
         const names = Array.from(this.exports.entries());
         return names.length === 0;
     }
     createBindingsStr() {
-        if (this.usesRunes()) {
+        if (this.isRunesMode()) {
             // will be just the empty strings for zero bindings, which is impossible to create a binding for, so it works out fine
             return `__sveltets_$$bindings('${this.$props.bindings.join("', '")}')`;
         }
@@ -6970,17 +6994,17 @@ class ExportedNames {
      */
     createExportsStr() {
         const names = Array.from(this.exports.entries());
-        const others = names.filter(([, { isLet, isNamedExport }]) => !isLet || (this.usesRunes() && isNamedExport));
-        const needsAccessors = this.usesAccessors && names.length > 0 && !this.usesRunes(); // runes mode doesn't support accessors
+        const others = names.filter(([, { isLet, isNamedExport }]) => !isLet || (this.isRunesMode() && isNamedExport));
+        const needsAccessors = this.usesAccessors && names.length > 0 && !this.isRunesMode(); // runes mode doesn't support accessors
         if (this.isSvelte5Plus) {
             let str = '';
-            if (others.length > 0 || this.usesRunes() || needsAccessors) {
+            if (others.length > 0 || this.isRunesMode() || needsAccessors) {
                 const exports = needsAccessors ? names : others;
                 if (others.length > 0 || needsAccessors) {
                     if (this.isTsFile) {
                         str +=
                             // Reference imports that have a type, else they are marked as unused if nothing in the component references them
-                            `, exports: {${this.createReturnElements(this.usesRunes() ? others : [], false, true)}} as any as { ` +
+                            `, exports: {${this.createReturnElements(this.isRunesMode() ? others : [], false, true)}} as any as { ` +
                                 this.createReturnElementsType(exports, undefined, true).join(',') +
                                 ' }';
                     }
@@ -7023,7 +7047,7 @@ class ExportedNames {
         });
     }
     createOptionalPropsArray() {
-        if (this.usesRunes()) {
+        if (this.isRunesMode()) {
             return [];
         }
         else {
@@ -7047,7 +7071,13 @@ class ExportedNames {
         this.hasRunesGlobals =
             this.isSvelte5Plus && globals.some((global) => runes.includes(global));
     }
-    usesRunes() {
+    enterRunesMode() {
+        this.isRunes = true;
+    }
+    /**
+     * True if uses runes or top level await or await in template expressions
+     */
+    isRunesMode() {
         return this.hasRunesGlobals || this.hasPropsRune() || this.isRunes;
     }
 }
@@ -7202,8 +7232,9 @@ class Generics {
  * were used as stores are appended with `let $xx = __sveltets_2_store_get(xx)` to create the store variables.
  */
 class ImplicitStoreValues {
-    constructor(storesResolvedInTemplate = [], renderFunctionStart, storeFromImportsWrapper = (input) => input) {
+    constructor(storesResolvedInTemplate = [], renderFunctionStart, isSvelte5Plus, storeFromImportsWrapper = (input) => input) {
         this.renderFunctionStart = renderFunctionStart;
+        this.isSvelte5Plus = isSvelte5Plus;
         this.storeFromImportsWrapper = storeFromImportsWrapper;
         this.accessedStores = new Set();
         this.variableDeclarations = [];
@@ -7276,7 +7307,9 @@ class ImplicitStoreValues {
     }
     attachStoreValueDeclarationOfImportsToRenderFn(str) {
         const storeNames = this.importStatements
-            .filter(({ name }) => name && this.accessedStores.has(name.getText()))
+            .filter((declaration) => declaration.name &&
+            (!this.isSvelte5Plus || !this.isSvelteStoreDerivedImport(declaration)) &&
+            this.accessedStores.has(declaration.name.getText()))
             .map(({ name }) => name.getText());
         if (!storeNames.length) {
             return;
@@ -7284,6 +7317,17 @@ class ImplicitStoreValues {
         const storeDeclarations = this.storeFromImportsWrapper(surroundWithIgnoreComments(this.createStoreDeclarations(storeNames)));
         str.appendRight(this.renderFunctionStart, storeDeclarations);
     }
+    isSvelteStoreDerivedImport(declaration) {
+        // named import of 'derived' from 'svelte/store'
+        if (!ts.isImportSpecifier(declaration) || declaration.name.text !== 'derived') {
+            return false;
+        }
+        const importDeclaration = declaration.parent.parent.parent;
+        return (ts.isImportDeclaration(importDeclaration) &&
+            importDeclaration.moduleSpecifier &&
+            ts.isStringLiteral(importDeclaration.moduleSpecifier) &&
+            importDeclaration.moduleSpecifier.text === 'svelte/store');
+    }
     createStoreDeclarations(storeNames) {
         let declarations = '';
         for (let i = 0; i < storeNames.length; i++) {
@@ -7511,6 +7555,7 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
     let uses$$restProps = false;
     let uses$$slots = false;
     let uses$$SlotsInterface = false;
+    let hasTopLevelAwait = false;
     //track if we are in a declaration scope
     let isDeclaration = false;
     //track the variable declaration node
@@ -7699,6 +7744,10 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
             }
             implicitTopLevelNames.handleReactiveStatement(node, binaryExpression);
         }
+        // Check for top-level await expressions
+        if (isSvelte5Plus && ts.isAwaitExpression(node) && scope === rootScope) {
+            hasTopLevelAwait = true;
+        }
         // Defensively call function (checking for undefined) because it got added only recently (TS 4.0)
         // and therefore might break people using older TS versions
         // Don't transform in ts mode because <type>value type assertions are valid in this case
@@ -7749,7 +7798,8 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
         uses$$restProps,
         uses$$slots,
         uses$$SlotsInterface,
-        generics
+        generics,
+        hasTopLevelAwait
     };
 }
 function transformInterfacesToTypes(tsAst, str, astOffset, movedNodes) {
@@ -7882,11 +7932,12 @@ function svelte2tsx(svelte, options = { parse }) {
     const renderFunctionStart = scriptTag
         ? str.original.lastIndexOf('>', scriptTag.content.start) + 1
         : instanceScriptTarget;
-    const implicitStoreValues = new ImplicitStoreValues(resolvedStores, renderFunctionStart);
+    const implicitStoreValues = new ImplicitStoreValues(resolvedStores, renderFunctionStart, svelte5Plus);
     //move the instance script and process the content
     let exportedNames = new ExportedNames(str, 0, basename, isTsFile, svelte5Plus, isRunes);
     let generics = new Generics(str, 0, { attributes: [] });
     let uses$$SlotsInterface = false;
+    let hasTopLevelAwait = false;
     if (scriptTag) {
         //ensure it is between the module script and the rest of the template (the variables need to be declared before the jsx template)
         if (scriptTag.start != instanceScriptTarget) {
@@ -7896,11 +7947,14 @@ function svelte2tsx(svelte, options = { parse }) {
         uses$$props = uses$$props || res.uses$$props;
         uses$$restProps = uses$$restProps || res.uses$$restProps;
         uses$$slots = uses$$slots || res.uses$$slots;
-        ({ exportedNames, events, generics, uses$$SlotsInterface } = res);
+        ({ exportedNames, events, generics, uses$$SlotsInterface, hasTopLevelAwait } = res);
     }
     exportedNames.usesAccessors = usesAccessors;
     if (svelte5Plus) {
         exportedNames.checkGlobalsForRunes(implicitStoreValues.getGlobals());
+        if (hasTopLevelAwait) {
+            exportedNames.enterRunesMode();
+        }
     }
     //wrap the script tag and template content in a function returning the slot and exports
     createRenderFunction({
@@ -7915,13 +7969,14 @@ function svelte2tsx(svelte, options = { parse }) {
         uses$$slots,
         uses$$SlotsInterface,
         generics,
+        hasTopLevelAwait,
         svelte5Plus,
         isTsFile,
         mode: options.mode
     });
     // we need to process the module script after the instance script has moved otherwise we get warnings about moving edited items
     if (moduleScriptTag) {
-        processModuleScriptTag(str, moduleScriptTag, new ImplicitStoreValues(implicitStoreValues.getAccessedStores(), renderFunctionStart, scriptTag || options.mode === 'ts' ? undefined : (input) => `</>;${input}<>`), moduleAst);
+        processModuleScriptTag(str, moduleScriptTag, new ImplicitStoreValues(implicitStoreValues.getAccessedStores(), renderFunctionStart, svelte5Plus, scriptTag || options.mode === 'ts' ? undefined : (input) => `</>;${input}<>`), moduleAst);
         if (!scriptTag) {
             moduleAst.tsAst.forEachChild((node) => exportedNames.hoistableInterfaces.analyzeModuleScriptNode(node));
         }
@@ -7969,6 +8024,7 @@ function svelte2tsx(svelte, options = { parse }) {
         mode: options.mode,
         generics,
         isSvelte5: svelte5Plus,
+        hasTopLevelAwait,
         noSvelteComponentTyped: options.noSvelteComponentTyped
     });
     if (options.mode === 'dts') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte2tsx",
-  "version": "0.7.39",
+  "version": "0.7.41",
   "description": "Convert Svelte components to TSX for type checking",
   "author": "The Svelte Community",
   "license": "MIT",