svelte2tsx 0.7.24 → 0.7.25

package/index.js

@@ -4166,17 +4166,17 @@ function eventMapEntryToString([eventName, expression]) {
  * Creates a hidden folder in the user's node_modules if `hiddenFolderPath` is provided.
  */
 function get_global_types(tsSystem, isSvelte3, sveltePath, typesPath, hiddenFolderPath) {
-    const svelteHtmlPath = isSvelte3 ? undefined : path.join(sveltePath, 'svelte-html.d.ts');
-    const svelteHtmlPathExists = svelteHtmlPath && tsSystem.fileExists(svelteHtmlPath);
-    const svelteHtmlFile = svelteHtmlPathExists ? svelteHtmlPath : './svelte-jsx-v4.d.ts';
+    let svelteHtmlPath = isSvelte3 ? undefined : path.join(sveltePath, 'svelte-html.d.ts');
+    svelteHtmlPath =
+        svelteHtmlPath && tsSystem.fileExists(svelteHtmlPath) ? svelteHtmlPath : undefined;
     let svelteTsxFiles;
     if (isSvelte3) {
         svelteTsxFiles = ['./svelte-shims.d.ts', './svelte-jsx.d.ts', './svelte-native-jsx.d.ts'];
     }
     else {
         svelteTsxFiles = ['./svelte-shims-v4.d.ts', './svelte-native-jsx.d.ts'];
-        if (!svelteHtmlPathExists) {
-            svelteTsxFiles.push(svelteHtmlPath);
+        if (!svelteHtmlPath) {
+            svelteTsxFiles.push('./svelte-jsx-v4.d.ts');
         }
     }
     svelteTsxFiles = svelteTsxFiles.map((f) => tsSystem.resolvePath(path.resolve(typesPath, f)));
@@ -4203,9 +4203,16 @@ function get_global_types(tsSystem, isSvelte3, sveltePath, typesPath, hiddenFold
                 for (const f of svelteTsxFiles) {
                     const hiddenFile = path.resolve(hiddenPath, path.basename(f));
                     const existing = tsSystem.readFile(hiddenFile);
-                    const toWrite = tsSystem.readFile(f) || '';
+                    const toWrite = tsSystem.readFile(f);
+                    if (!toWrite) {
+                        throw new Error(`Could not read file: ${f}`);
+                    }
                     if (existing !== toWrite) {
                         tsSystem.writeFile(hiddenFile, toWrite);
+                        // TS doesn't throw an error if the file wasn't written
+                        if (!tsSystem.fileExists(hiddenFile)) {
+                            throw new Error(`Could not write file: ${hiddenFile}`);
+                        }
                     }
                     newFiles.push(hiddenFile);
                 }
@@ -4214,8 +4221,8 @@ function get_global_types(tsSystem, isSvelte3, sveltePath, typesPath, hiddenFold
         }
         catch (e) { }
     }
-    if (svelteHtmlPathExists) {
-        svelteTsxFiles.push(tsSystem.resolvePath(path.resolve(typesPath, svelteHtmlFile)));
+    if (svelteHtmlPath) {
+        svelteTsxFiles.push(tsSystem.resolvePath(path.resolve(typesPath, svelteHtmlPath)));
     }
     return svelteTsxFiles;
 }
@@ -4612,6 +4619,270 @@ function getCurrentPrepends(str, index) {
     return ((_a = str.__prepends__) === null || _a === void 0 ? void 0 : _a.get(index)) || [];
 }
 
+/**
+ * Collects all imports and module-level declarations to then find out which interfaces/types are hoistable.
+ */
+class HoistableInterfaces {
+    constructor() {
+        this.import_value_set = new Set();
+        this.import_type_set = new Set();
+        this.interface_map = new Map();
+        this.props_interface = {
+            name: '',
+            node: null,
+            type_deps: new Set(),
+            value_deps: new Set()
+        };
+    }
+    analyzeModuleScriptNode(node) {
+        // Handle Import Declarations
+        if (ts.isImportDeclaration(node) && node.importClause) {
+            const is_type_only = node.importClause.isTypeOnly;
+            if (node.importClause.namedBindings &&
+                ts.isNamedImports(node.importClause.namedBindings)) {
+                node.importClause.namedBindings.elements.forEach((element) => {
+                    const import_name = element.name.text;
+                    if (is_type_only || element.isTypeOnly) {
+                        this.import_type_set.add(import_name);
+                    }
+                    else {
+                        this.import_value_set.add(import_name);
+                    }
+                });
+            }
+            // Handle default imports
+            if (node.importClause.name) {
+                const default_import = node.importClause.name.text;
+                if (is_type_only) {
+                    this.import_type_set.add(default_import);
+                }
+                else {
+                    this.import_value_set.add(default_import);
+                }
+            }
+            // Handle namespace imports
+            if (node.importClause.namedBindings &&
+                ts.isNamespaceImport(node.importClause.namedBindings)) {
+                const namespace_import = node.importClause.namedBindings.name.text;
+                if (is_type_only) {
+                    this.import_type_set.add(namespace_import);
+                }
+                else {
+                    this.import_value_set.add(namespace_import);
+                }
+            }
+        }
+        // Handle top-level declarations
+        if (ts.isVariableStatement(node)) {
+            node.declarationList.declarations.forEach((declaration) => {
+                if (ts.isIdentifier(declaration.name)) {
+                    this.import_value_set.add(declaration.name.text);
+                }
+            });
+        }
+        if (ts.isFunctionDeclaration(node) && node.name) {
+            this.import_value_set.add(node.name.text);
+        }
+        if (ts.isClassDeclaration(node) && node.name) {
+            this.import_value_set.add(node.name.text);
+        }
+        if (ts.isEnumDeclaration(node)) {
+            this.import_value_set.add(node.name.text);
+        }
+        if (ts.isTypeAliasDeclaration(node)) {
+            this.import_type_set.add(node.name.text);
+        }
+        if (ts.isInterfaceDeclaration(node)) {
+            this.import_type_set.add(node.name.text);
+        }
+    }
+    analyzeInstanceScriptNode(node) {
+        var _a, _b, _c, _d;
+        // Handle Import Declarations
+        if (ts.isImportDeclaration(node) && node.importClause) {
+            const is_type_only = node.importClause.isTypeOnly;
+            if (node.importClause.namedBindings &&
+                ts.isNamedImports(node.importClause.namedBindings)) {
+                node.importClause.namedBindings.elements.forEach((element) => {
+                    const import_name = element.name.text;
+                    if (is_type_only) {
+                        this.import_type_set.add(import_name);
+                    }
+                    else {
+                        this.import_value_set.add(import_name);
+                    }
+                });
+            }
+            // Handle default imports
+            if (node.importClause.name) {
+                const default_import = node.importClause.name.text;
+                if (is_type_only) {
+                    this.import_type_set.add(default_import);
+                }
+                else {
+                    this.import_value_set.add(default_import);
+                }
+            }
+            // Handle namespace imports
+            if (node.importClause.namedBindings &&
+                ts.isNamespaceImport(node.importClause.namedBindings)) {
+                const namespace_import = node.importClause.namedBindings.name.text;
+                if (is_type_only) {
+                    this.import_type_set.add(namespace_import);
+                }
+                else {
+                    this.import_value_set.add(namespace_import);
+                }
+            }
+        }
+        // Handle Interface Declarations
+        if (ts.isInterfaceDeclaration(node)) {
+            const interface_name = node.name.text;
+            const type_dependencies = new Set();
+            const value_dependencies = new Set();
+            const generics = (_b = (_a = node.typeParameters) === null || _a === void 0 ? void 0 : _a.map((param) => param.name.text)) !== null && _b !== void 0 ? _b : [];
+            node.members.forEach((member) => {
+                if (ts.isPropertySignature(member) && member.type) {
+                    this.collectTypeDependencies(member.type, type_dependencies, value_dependencies, generics);
+                }
+                else if (ts.isIndexSignatureDeclaration(member)) {
+                    this.collectTypeDependencies(member.type, type_dependencies, value_dependencies, generics);
+                    member.parameters.forEach((param) => {
+                        this.collectTypeDependencies(param.type, type_dependencies, value_dependencies, generics);
+                    });
+                }
+            });
+            this.interface_map.set(interface_name, {
+                type_deps: type_dependencies,
+                value_deps: value_dependencies,
+                node
+            });
+        }
+        // Handle Type Alias Declarations
+        if (ts.isTypeAliasDeclaration(node)) {
+            const alias_name = node.name.text;
+            const type_dependencies = new Set();
+            const value_dependencies = new Set();
+            const generics = (_d = (_c = node.typeParameters) === null || _c === void 0 ? void 0 : _c.map((param) => param.name.text)) !== null && _d !== void 0 ? _d : [];
+            this.collectTypeDependencies(node.type, type_dependencies, value_dependencies, generics);
+            this.interface_map.set(alias_name, {
+                type_deps: type_dependencies,
+                value_deps: value_dependencies,
+                node
+            });
+        }
+    }
+    analyze$propsRune(node) {
+        var _a, _b;
+        if (((_a = node.initializer.typeArguments) === null || _a === void 0 ? void 0 : _a.length) > 0 || node.type) {
+            const generic_arg = ((_b = node.initializer.typeArguments) === null || _b === void 0 ? void 0 : _b[0]) || node.type;
+            if (ts.isTypeReferenceNode(generic_arg)) {
+                const name = this.getEntityNameText(generic_arg.typeName);
+                const interface_node = this.interface_map.get(name);
+                if (interface_node) {
+                    this.props_interface.name = name;
+                    this.props_interface.type_deps = interface_node.type_deps;
+                    this.props_interface.value_deps = interface_node.value_deps;
+                }
+            }
+            else {
+                this.props_interface.name = '$$ComponentProps';
+                this.props_interface.node = generic_arg;
+                this.collectTypeDependencies(generic_arg, this.props_interface.type_deps, this.props_interface.value_deps, []);
+            }
+        }
+    }
+    /**
+     * Traverses the AST to collect import statements and top-level interfaces,
+     * then determines which interfaces can be hoisted.
+     * @param source_file The TypeScript source file to analyze.
+     * @returns An object containing sets of value imports, type imports, and hoistable interfaces.
+     */
+    determineHoistableInterfaces() {
+        const hoistable_interfaces = new Map();
+        let progress = true;
+        while (progress) {
+            progress = false;
+            for (const [interface_name, deps] of this.interface_map.entries()) {
+                if (hoistable_interfaces.has(interface_name)) {
+                    continue;
+                }
+                const can_hoist = [...deps.type_deps, ...deps.value_deps].every((dep) => {
+                    return (this.import_type_set.has(dep) ||
+                        this.import_value_set.has(dep) ||
+                        hoistable_interfaces.has(dep));
+                });
+                if (can_hoist) {
+                    hoistable_interfaces.set(interface_name, deps.node);
+                    progress = true;
+                }
+            }
+        }
+        if (this.props_interface.name === '$$ComponentProps') {
+            const can_hoist = [
+                ...this.props_interface.type_deps,
+                ...this.props_interface.value_deps
+            ].every((dep) => {
+                return (this.import_type_set.has(dep) ||
+                    this.import_value_set.has(dep) ||
+                    hoistable_interfaces.has(dep));
+            });
+            if (can_hoist) {
+                hoistable_interfaces.set(this.props_interface.name, this.props_interface.node);
+            }
+        }
+        return hoistable_interfaces;
+    }
+    /**
+     * Moves all interfaces that can be hoisted to the top of the script, if the $props rune's type is hoistable.
+     */
+    moveHoistableInterfaces(str, astOffset, scriptStart) {
+        if (!this.props_interface.name)
+            return;
+        const hoistable = this.determineHoistableInterfaces();
+        if (hoistable.has(this.props_interface.name)) {
+            for (const [, node] of hoistable) {
+                str.move(node.pos + astOffset, node.end + astOffset, scriptStart);
+            }
+        }
+    }
+    /**
+     * Collects type and value dependencies from a given TypeNode.
+     * @param type_node The TypeNode to analyze.
+     * @param type_dependencies The set to collect type dependencies into.
+     * @param value_dependencies The set to collect value dependencies into.
+     */
+    collectTypeDependencies(type_node, type_dependencies, value_dependencies, generics) {
+        const walk = (node) => {
+            if (ts.isTypeReferenceNode(node)) {
+                const type_name = this.getEntityNameText(node.typeName);
+                if (!generics.includes(type_name)) {
+                    type_dependencies.add(type_name);
+                }
+            }
+            else if (ts.isTypeQueryNode(node)) {
+                // Handle 'typeof' expressions: e.g., foo: typeof bar
+                value_dependencies.add(this.getEntityNameText(node.exprName));
+            }
+            ts.forEachChild(node, walk);
+        };
+        walk(type_node);
+    }
+    /**
+     * Retrieves the full text of an EntityName (handles nested names).
+     * @param entity_name The EntityName to extract text from.
+     * @returns The full name as a string.
+     */
+    getEntityNameText(entity_name) {
+        if (ts.isIdentifier(entity_name)) {
+            return entity_name.text;
+        }
+        else {
+            return this.getEntityNameText(entity_name.left) + '.' + entity_name.right.text;
+        }
+    }
+}
+
 function is$$PropsDeclaration(node) {
     return isInterfaceOrTypeDeclaration(node) && node.name.text === '$$Props';
 }
@@ -4623,6 +4894,7 @@ class ExportedNames {
         this.isTsFile = isTsFile;
         this.isSvelte5Plus = isSvelte5Plus;
         this.isRunes = isRunes;
+        this.hoistableInterfaces = new HoistableInterfaces();
         this.usesAccessors = false;
         /**
          * Uses the `$$Props` type
@@ -4637,7 +4909,9 @@ class ExportedNames {
          * If using TS, this returns the generic string, if using JS, returns the `@type {..}` string.
          */
         this.$props = {
+            /** The JSDoc type; not set when TS type exists */
             comment: '',
+            /** The TS type */
             type: '',
             bindings: []
         };
@@ -4741,10 +5015,12 @@ class ExportedNames {
                 }
             }
         }
+        // Easy mode: User uses TypeScript and typed the $props() rune
         if (((_a = node.initializer.typeArguments) === null || _a === void 0 ? void 0 : _a.length) > 0 || node.type) {
+            this.hoistableInterfaces.analyze$propsRune(node);
             const generic_arg = ((_b = node.initializer.typeArguments) === null || _b === void 0 ? void 0 : _b[0]) || node.type;
             const generic = generic_arg.getText();
-            if (!generic.includes('{')) {
+            if (ts.isTypeReferenceNode(generic_arg)) {
                 this.$props.type = generic;
             }
             else {
@@ -4758,14 +5034,26 @@ class ExportedNames {
                 // so that semantic tokens ignore it, preventing an overlap of tokens
                 surroundWithIgnoreComments(this.$props.type));
             }
+            return;
         }
-        else {
-            if (!this.isTsFile) {
-                const text = node.getSourceFile().getFullText();
-                let start = -1;
-                let comment;
-                // reverse because we want to look at the last comment before the node first
-                for (const c of [...(ts.getLeadingCommentRanges(text, node.pos) || [])].reverse()) {
+        // Hard mode: User uses JSDoc or didn't type the $props() rune
+        if (!this.isTsFile) {
+            const text = node.getSourceFile().getFullText();
+            let start = -1;
+            let comment;
+            // reverse because we want to look at the last comment before the node first
+            for (const c of [...(ts.getLeadingCommentRanges(text, node.pos) || [])].reverse()) {
+                const potential_match = text.substring(c.pos, c.end);
+                if (/@type\b/.test(potential_match)) {
+                    comment = potential_match;
+                    start = c.pos + this.astOffset;
+                    break;
+                }
+            }
+            if (!comment) {
+                for (const c of [
+                    ...(ts.getLeadingCommentRanges(text, node.parent.pos) || []).reverse()
+                ]) {
                     const potential_match = text.substring(c.pos, c.end);
                     if (/@type\b/.test(potential_match)) {
                         comment = potential_match;
@@ -4773,127 +5061,115 @@ class ExportedNames {
                         break;
                     }
                 }
-                if (!comment) {
-                    for (const c of [
-                        ...(ts.getLeadingCommentRanges(text, node.parent.pos) || []).reverse()
-                    ]) {
-                        const potential_match = text.substring(c.pos, c.end);
-                        if (/@type\b/.test(potential_match)) {
-                            comment = potential_match;
-                            start = c.pos + this.astOffset;
-                            break;
-                        }
-                    }
-                }
-                if (comment && /\/\*\*[^@]*?@type\s*{\s*{.*}\s*}\s*\*\//.test(comment)) {
-                    // Create a virtual type alias for the unnamed generic and reuse it for the props return type
-                    // so that rename, find references etc works seamlessly across components
-                    this.$props.comment = '/** @type {$$ComponentProps} */';
-                    const type_start = this.str.original.indexOf('@type', start);
-                    this.str.overwrite(type_start, type_start + 5, '@typedef');
-                    const end = this.str.original.indexOf('*/', start);
-                    this.str.overwrite(end, end + 2, ' $$ComponentProps */' + this.$props.comment);
-                }
-                else {
-                    // Complex comment or simple `@type {AType}` comment which we just use as-is.
-                    // For the former this means things like rename won't work properly across components.
-                    this.$props.comment = comment || '';
-                }
             }
-            if (this.$props.comment) {
-                return;
+            if (comment && /\/\*\*[^@]*?@type\s*{\s*{.*}\s*}\s*\*\//.test(comment)) {
+                // Create a virtual type alias for the unnamed generic and reuse it for the props return type
+                // so that rename, find references etc works seamlessly across components
+                this.$props.comment = '/** @type {$$ComponentProps} */';
+                const type_start = this.str.original.indexOf('@type', start);
+                this.str.overwrite(type_start, type_start + 5, '@typedef');
+                const end = this.str.original.indexOf('*/', start);
+                this.str.overwrite(end, end + 2, ' $$ComponentProps */' + this.$props.comment);
             }
-            // Do a best-effort to extract the props from the object literal
-            let propsStr = '';
-            let withUnknown = false;
-            let props = [];
-            const isKitRouteFile = internalHelpers.isKitRouteFile(this.basename);
-            const isKitLayoutFile = isKitRouteFile && this.basename.includes('layout');
-            if (ts.isObjectBindingPattern(node.name)) {
-                for (const element of node.name.elements) {
-                    if (!ts.isIdentifier(element.name) ||
-                        (element.propertyName && !ts.isIdentifier(element.propertyName)) ||
-                        !!element.dotDotDotToken) {
-                        withUnknown = true;
-                    }
-                    else {
-                        const name = element.propertyName
-                            ? element.propertyName.text
-                            : element.name.text;
-                        if (isKitRouteFile) {
-                            if (name === 'data') {
-                                props.push(`data: import('./$types.js').${isKitLayoutFile ? 'LayoutData' : 'PageData'}`);
-                            }
-                            if (name === 'form' && !isKitLayoutFile) {
-                                props.push(`form: import('./$types.js').ActionData`);
-                            }
-                        }
-                        else if (element.initializer) {
-                            const initializer = ts.isCallExpression(element.initializer) &&
-                                ts.isIdentifier(element.initializer.expression) &&
-                                element.initializer.expression.text === '$bindable'
-                                ? element.initializer.arguments[0]
-                                : element.initializer;
-                            const type = !initializer
-                                ? 'unknown'
-                                : ts.isAsExpression(initializer)
-                                    ? initializer.type.getText()
-                                    : ts.isStringLiteral(initializer)
-                                        ? 'string'
-                                        : ts.isNumericLiteral(initializer)
-                                            ? 'number'
-                                            : initializer.kind === ts.SyntaxKind.TrueKeyword ||
-                                                initializer.kind === ts.SyntaxKind.FalseKeyword
-                                                ? 'boolean'
-                                                : ts.isIdentifier(initializer) &&
-                                                    initializer.text !== 'undefined'
-                                                    ? `typeof ${initializer.text}`
-                                                    : ts.isArrowFunction(initializer)
-                                                        ? 'Function'
-                                                        : ts.isObjectLiteralExpression(initializer)
-                                                            ? 'Record<string, unknown>'
-                                                            : ts.isArrayLiteralExpression(initializer)
-                                                                ? 'unknown[]'
-                                                                : 'unknown';
-                            props.push(`${name}?: ${type}`);
+            else {
+                // Complex comment or simple `@type {AType}` comment which we just use as-is.
+                // For the former this means things like rename won't work properly across components.
+                this.$props.comment = comment || '';
+            }
+        }
+        if (this.$props.comment) {
+            // User uses JsDoc
+            return;
+        }
+        // Do a best-effort to extract the props from the object literal
+        let propsStr = '';
+        let withUnknown = false;
+        let props = [];
+        const isKitRouteFile = internalHelpers.isKitRouteFile(this.basename);
+        const isKitLayoutFile = isKitRouteFile && this.basename.includes('layout');
+        if (ts.isObjectBindingPattern(node.name)) {
+            for (const element of node.name.elements) {
+                if (!ts.isIdentifier(element.name) ||
+                    (element.propertyName && !ts.isIdentifier(element.propertyName)) ||
+                    !!element.dotDotDotToken) {
+                    withUnknown = true;
+                }
+                else {
+                    const name = element.propertyName
+                        ? element.propertyName.text
+                        : element.name.text;
+                    if (isKitRouteFile) {
+                        if (name === 'data') {
+                            props.push(`data: import('./$types.js').${isKitLayoutFile ? 'LayoutData' : 'PageData'}`);
                         }
-                        else {
-                            props.push(`${name}: unknown`);
+                        if (name === 'form' && !isKitLayoutFile) {
+                            props.push(`form: import('./$types.js').ActionData`);
                         }
                     }
-                }
-                if (isKitLayoutFile) {
-                    props.push(`children: import('svelte').Snippet`);
-                }
-                if (props.length > 0) {
-                    propsStr =
-                        `{ ${props.join(', ')} }` +
-                            (withUnknown ? ' & Record<string, unknown>' : '');
-                }
-                else if (withUnknown) {
-                    propsStr = 'Record<string, unknown>';
-                }
-                else {
-                    propsStr = 'Record<string, never>';
+                    else if (element.initializer) {
+                        const initializer = ts.isCallExpression(element.initializer) &&
+                            ts.isIdentifier(element.initializer.expression) &&
+                            element.initializer.expression.text === '$bindable'
+                            ? element.initializer.arguments[0]
+                            : element.initializer;
+                        const type = !initializer
+                            ? 'any'
+                            : ts.isAsExpression(initializer)
+                                ? initializer.type.getText()
+                                : ts.isStringLiteral(initializer)
+                                    ? 'string'
+                                    : ts.isNumericLiteral(initializer)
+                                        ? 'number'
+                                        : initializer.kind === ts.SyntaxKind.TrueKeyword ||
+                                            initializer.kind === ts.SyntaxKind.FalseKeyword
+                                            ? 'boolean'
+                                            : ts.isIdentifier(initializer) &&
+                                                initializer.text !== 'undefined'
+                                                ? `typeof ${initializer.text}`
+                                                : ts.isArrowFunction(initializer)
+                                                    ? 'Function'
+                                                    : ts.isObjectLiteralExpression(initializer)
+                                                        ? 'Record<string, any>'
+                                                        : ts.isArrayLiteralExpression(initializer)
+                                                            ? 'any[]'
+                                                            : 'any';
+                        props.push(`${name}?: ${type}`);
+                    }
+                    else {
+                        props.push(`${name}: any`);
+                    }
                 }
             }
-            else {
-                propsStr = 'Record<string, unknown>';
+            if (isKitLayoutFile) {
+                props.push(`children: import('svelte').Snippet`);
             }
-            // Create a virtual type alias for the unnamed generic and reuse it for the props return type
-            // so that rename, find references etc works seamlessly across components
-            if (this.isTsFile) {
-                this.$props.type = '$$ComponentProps';
-                if (props.length > 0 || withUnknown) {
-                    preprendStr(this.str, node.parent.pos + this.astOffset, surroundWithIgnoreComments(`;type $$ComponentProps = ${propsStr};`));
-                    preprendStr(this.str, node.name.end + this.astOffset, `: ${this.$props.type}`);
-                }
+            if (props.length > 0) {
+                propsStr =
+                    `{ ${props.join(', ')} }` + (withUnknown ? ' & Record<string, any>' : '');
+            }
+            else if (withUnknown) {
+                propsStr = 'Record<string, any>';
             }
             else {
-                this.$props.comment = '/** @type {$$ComponentProps} */';
-                if (props.length > 0 || withUnknown) {
-                    preprendStr(this.str, node.pos + this.astOffset, `/** @typedef {${propsStr}} $$ComponentProps */${this.$props.comment}`);
-                }
+                propsStr = 'Record<string, never>';
+            }
+        }
+        else {
+            propsStr = 'Record<string, any>';
+        }
+        // Create a virtual type alias for the unnamed generic and reuse it for the props return type
+        // so that rename, find references etc works seamlessly across components
+        if (this.isTsFile) {
+            this.$props.type = '$$ComponentProps';
+            if (props.length > 0 || withUnknown) {
+                preprendStr(this.str, node.parent.pos + this.astOffset, surroundWithIgnoreComments(`;type $$ComponentProps = ${propsStr};`));
+                preprendStr(this.str, node.name.end + this.astOffset, `: ${this.$props.type}`);
+            }
+        }
+        else {
+            this.$props.comment = '/** @type {$$ComponentProps} */';
+            if (props.length > 0 || withUnknown) {
+                preprendStr(this.str, node.pos + this.astOffset, `/** @typedef {${propsStr}} $$ComponentProps */${this.$props.comment}`);
             }
         }
     }
@@ -6219,7 +6495,7 @@ class InterfacesAndTypes {
     }
 }
 
-function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, hasModuleScript, isTSFile, basename, isSvelte5Plus, isRunes) {
+function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, moduleAst, isTSFile, basename, isSvelte5Plus, isRunes) {
     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);
@@ -6227,6 +6503,9 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
     const exportedNames = new ExportedNames(str, astOffset, basename, isTSFile, isSvelte5Plus, isRunes);
     const generics = new Generics(str, astOffset, script);
     const interfacesAndTypes = new InterfacesAndTypes();
+    if (moduleAst) {
+        moduleAst.tsAst.forEachChild((n) => exportedNames.hoistableInterfaces.analyzeModuleScriptNode(n));
+    }
     const implicitTopLevelNames = new ImplicitTopLevelNames(str, astOffset);
     let uses$$props = false;
     let uses$$restProps = false;
@@ -6306,6 +6585,9 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
     const walk = (node, parent) => {
         var _a, _b, _c;
         const onLeaveCallbacks = [];
+        if (parent === tsAst) {
+            exportedNames.hoistableInterfaces.analyzeInstanceScriptNode(node);
+        }
         generics.addIfIsGeneric(node);
         if (is$$EventsDeclaration(node)) {
             events.setComponentEventsInterface(node, astOffset);
@@ -6410,7 +6692,7 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
     // declare implicit reactive variables we found in the script
     implicitTopLevelNames.modifyCode(rootScope.declared);
     implicitStoreValues.modifyCode(astOffset, str);
-    handleFirstInstanceImport(tsAst, astOffset, hasModuleScript, str);
+    handleFirstInstanceImport(tsAst, astOffset, !!moduleAst, str);
     // move interfaces and types out of the render function if they are referenced
     // by a $$Generic, otherwise it will be used before being defined after the transformation
     const nodesToMove = interfacesAndTypes.getNodesWithNames(generics.getTypeReferences());
@@ -6424,6 +6706,7 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
         // break dts generation (file will not be generated).
         transformInterfacesToTypes(tsAst, str, astOffset, nodesToMove);
     }
+    exportedNames.hoistableInterfaces.moveHoistableInterfaces(str, astOffset, script.start);
     return {
         exportedNames,
         events,
@@ -6458,11 +6741,15 @@ function transformInterfacesToTypes(tsAst, str, astOffset, movedNodes) {
     });
 }
 
-function processModuleScriptTag(str, script, implicitStoreValues) {
+function createModuleAst(str, script) {
     const htmlx = str.original;
     const scriptContent = htmlx.substring(script.content.start, script.content.end);
     const tsAst = ts.createSourceFile('component.module.ts.svelte', scriptContent, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
     const astOffset = script.content.start;
+    return { htmlx, tsAst, astOffset };
+}
+function processModuleScriptTag(str, script, implicitStoreValues, moduleAst) {
+    const { htmlx, tsAst, astOffset } = moduleAst;
     const generics = new Generics(str, astOffset, script);
     if (generics.genericsAttr) {
         const start = htmlx.indexOf('generics', script.start);
@@ -7095,7 +7382,9 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
      * In this case we instead have to move it to moduleScriptTag.end. We track the location for the script move in the MoveInstanceScriptTarget var
      */
     let instanceScriptTarget = 0;
+    let moduleAst;
     if (moduleScriptTag) {
+        moduleAst = createModuleAst(str, moduleScriptTag);
         if (moduleScriptTag.start != 0) {
             //move our module tag to the top
             str.move(moduleScriptTag.start, moduleScriptTag.end, 0);
@@ -7118,8 +7407,7 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
         if (scriptTag.start != instanceScriptTarget) {
             str.move(scriptTag.start, scriptTag.end, instanceScriptTarget);
         }
-        const res = processInstanceScriptContent(str, scriptTag, events, implicitStoreValues, options.mode, 
-        /**hasModuleScripts */ !!moduleScriptTag, options === null || options === void 0 ? void 0 : options.isTsFile, basename, svelte5Plus, isRunes);
+        const res = processInstanceScriptContent(str, scriptTag, events, implicitStoreValues, options.mode, moduleAst, options === null || options === void 0 ? void 0 : options.isTsFile, basename, svelte5Plus, isRunes);
         uses$$props = uses$$props || res.uses$$props;
         uses$$restProps = uses$$restProps || res.uses$$restProps;
         uses$$slots = uses$$slots || res.uses$$slots;
@@ -7148,7 +7436,7 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
     });
     // 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}<>`));
+        processModuleScriptTag(str, moduleScriptTag, new ImplicitStoreValues(implicitStoreValues.getAccessedStores(), renderFunctionStart, scriptTag || options.mode === 'ts' ? undefined : (input) => `</>;${input}<>`), moduleAst);
     }
     addComponentExport({
         str,