svelte2tsx 0.7.21 → 0.7.23

package/index.d.ts

@@ -134,6 +134,13 @@ export function emitDts(config: EmitDtsConfig): Promise<void>;
  * static top level `ts` namespace, it must be passed as a parameter.
  */
 export const internalHelpers: {
+    get_global_types: (
+        tsSystem: ts.System,
+        isSvelte3: boolean,
+        sveltePath: string,
+        typesPath: string,
+        hiddenFolderPath?: string,
+    ) => string[],
     isKitFile: (
         fileName: string,
         options: InternalHelpers.KitFilesSettings

package/index.js

@@ -4161,6 +4161,65 @@ function eventMapEntryToString([eventName, expression]) {
     return `'${eventName}':${Array.isArray(expression) ? `__sveltets_2_unionType(${expression.join(',')})` : expression}`;
 }
 
+/**
+ * Returns the path to the global svelte2tsx files that should be included in the project.
+ * 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 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);
+        }
+    }
+    svelteTsxFiles = svelteTsxFiles.map((f) => tsSystem.resolvePath(path.resolve(typesPath, f)));
+    if (hiddenFolderPath) {
+        try {
+            // IDE context - the `import('svelte')` statements inside the d.ts files will load the Svelte version of
+            // the extension, which can cause all sorts of problems. Therefore put the files into a hidden folder in
+            // the user's node_modules, preferably next to the Svelte package.
+            let path$1 = path.dirname(sveltePath);
+            if (!tsSystem.directoryExists(path.resolve(path$1, 'node_modules'))) {
+                path$1 = hiddenFolderPath;
+                while (path$1 && !tsSystem.directoryExists(path.resolve(path$1, 'node_modules'))) {
+                    const parent = path.dirname(path$1);
+                    if (path$1 === parent) {
+                        path$1 = '';
+                        break;
+                    }
+                    path$1 = parent;
+                }
+            }
+            if (path$1) {
+                const hiddenPath = path.resolve(path$1, 'node_modules/.svelte2tsx-language-server-files');
+                const newFiles = [];
+                for (const f of svelteTsxFiles) {
+                    const hiddenFile = path.resolve(hiddenPath, path.basename(f));
+                    const existing = tsSystem.readFile(hiddenFile);
+                    const toWrite = tsSystem.readFile(f) || '';
+                    if (existing !== toWrite) {
+                        tsSystem.writeFile(hiddenFile, toWrite);
+                    }
+                    newFiles.push(hiddenFile);
+                }
+                svelteTsxFiles = newFiles;
+            }
+        }
+        catch (e) { }
+    }
+    if (svelteHtmlPathExists) {
+        svelteTsxFiles.push(tsSystem.resolvePath(path.resolve(typesPath, svelteHtmlFile)));
+    }
+    return svelteTsxFiles;
+}
+
 /**
  * Finds the top level const/let/function exports of a source file.
  */
@@ -4209,7 +4268,8 @@ function findExports(ts, source, isTsFile) {
                     hasTypeDefinition: hasTypeDefinition || hasTypedParameter(ts, node, isTsFile)
                 });
             }
-            else {
+            else if (ts.isIdentifier(declaration.name)) {
+                // TODO support `export const { x, y } = ...` ?
                 exports.set(declaration.name.getText(), {
                     type: 'var',
                     node: declaration,
@@ -4306,6 +4366,12 @@ function upsertKitRouteFile(ts, basename, getSource, surround) {
         const inserted = surround(`: import('./$types.js').${basename.includes('layout') ? 'Layout' : 'Page'}${basename.includes('server') ? 'Server' : ''}LoadEvent`);
         insert(pos, inserted);
     }
+    else if ((load === null || load === void 0 ? void 0 : load.type) === 'var' && !load.hasTypeDefinition) {
+        // "const load = ..." will be transformed into
+        // "const load = (...) satisfies PageLoad"
+        insert(load.node.initializer.getStart(), surround('('));
+        insert(load.node.initializer.getEnd(), surround(`) satisfies import('./$types.js').${basename.includes('layout') ? 'Layout' : 'Page'}${basename.includes('server') ? 'Server' : ''}Load`));
+    }
     // add type to entries function if not explicitly typed
     const entries = exports.get('entries');
     if ((entries === null || entries === void 0 ? void 0 : entries.type) === 'function' &&
@@ -4507,7 +4573,8 @@ const internalHelpers = {
     upsertKitFile,
     toVirtualPos,
     toOriginalPos,
-    findExports
+    findExports,
+    get_global_types
 };
 
 /**
@@ -4549,12 +4616,13 @@ function is$$PropsDeclaration(node) {
     return isInterfaceOrTypeDeclaration(node) && node.name.text === '$$Props';
 }
 class ExportedNames {
-    constructor(str, astOffset, basename, isTsFile, isSvelte5Plus) {
+    constructor(str, astOffset, basename, isTsFile, isSvelte5Plus, isRunes) {
         this.str = str;
         this.astOffset = astOffset;
         this.basename = basename;
         this.isTsFile = isTsFile;
         this.isSvelte5Plus = isSvelte5Plus;
+        this.isRunes = isRunes;
         this.usesAccessors = false;
         /**
          * Uses the `$$Props` type
@@ -4636,10 +4704,10 @@ class ExportedNames {
         if (ts.isNamedExports(exportClause)) {
             for (const ne of exportClause.elements) {
                 if (ne.propertyName) {
-                    this.addExport(ne.propertyName, false, ne.name);
+                    this.addExport(ne.propertyName, false, ne.name, undefined, undefined, true);
                 }
                 else {
-                    this.addExport(ne.name, false);
+                    this.addExport(ne.name, false, undefined, undefined, undefined, true);
                 }
             }
             //we can remove entire statement
@@ -4772,7 +4840,11 @@ class ExportedNames {
                                             ? 'boolean'
                                             : ts.isIdentifier(element.initializer)
                                                 ? `typeof ${element.initializer.text}`
-                                                : 'unknown';
+                                                : ts.isObjectLiteralExpression(element.initializer)
+                                                    ? 'Record<string, unknown>'
+                                                    : ts.isArrayLiteralExpression(element.initializer)
+                                                        ? 'unknown[]'
+                                                        : 'unknown';
                             props.push(`${name}?: ${type}`);
                         }
                         else {
@@ -4976,7 +5048,7 @@ class ExportedNames {
     /**
      * Adds export to map
      */
-    addExport(name, isLet, target = null, type = null, required = false) {
+    addExport(name, isLet, target = null, type = null, required = false, isNamedExport = false) {
         const existingDeclaration = this.possibleExports.get(name.text);
         if (target) {
             this.exports.set(name.text, {
@@ -4984,7 +5056,8 @@ class ExportedNames {
                 type: (type === null || type === void 0 ? void 0 : type.getText()) || (existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.type),
                 identifierText: target.text,
                 required: required || (existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.required),
-                doc: this.getDoc(target) || (existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.doc)
+                doc: this.getDoc(target) || (existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.doc),
+                isNamedExport
             });
         }
         else {
@@ -4992,7 +5065,8 @@ class ExportedNames {
                 isLet: isLet || (existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.isLet),
                 type: existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.type,
                 required: existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.required,
-                doc: existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.doc
+                doc: existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.doc,
+                isNamedExport
             });
         }
         if (existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.isLet) {
@@ -5103,7 +5177,7 @@ class ExportedNames {
      */
     createExportsStr() {
         const names = Array.from(this.exports.entries());
-        const others = names.filter(([, { isLet }]) => !isLet);
+        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
         if (this.isSvelte5Plus) {
             let str = '';
@@ -5175,7 +5249,7 @@ class ExportedNames {
             this.isSvelte5Plus && globals.some((global) => runes.includes(global));
     }
     usesRunes() {
-        return this.hasRunesGlobals || this.hasPropsRune();
+        return this.hasRunesGlobals || this.hasPropsRune() || this.isRunes;
     }
 }
 
@@ -6135,12 +6209,12 @@ class InterfacesAndTypes {
     }
 }
 
-function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, hasModuleScript, isTSFile, basename, isSvelte5Plus) {
+function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, hasModuleScript, 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);
     const astOffset = script.content.start;
-    const exportedNames = new ExportedNames(str, astOffset, basename, isTSFile, isSvelte5Plus);
+    const exportedNames = new ExportedNames(str, astOffset, basename, isTSFile, isSvelte5Plus, isRunes);
     const generics = new Generics(str, astOffset, script);
     const interfacesAndTypes = new InterfacesAndTypes();
     const implicitTopLevelNames = new ImplicitTopLevelNames(str, astOffset);
@@ -6536,12 +6610,14 @@ function addSimpleComponentExport({ events, isTsFile, canHaveAnyProp, exportedNa
     const propDef = props(isTsFile, canHaveAnyProp, exportedNames, _events(events.hasStrictEvents(), 'render()'));
     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()) {
             statement =
-                `\n${doc}const ${className || '$$Component'} = __sveltets_2_fn_component(render());\n` +
-                    `export default ${className || '$$Component'};`;
+                `\n${doc}const ${componentName} = __sveltets_2_fn_component(render());\n` +
+                    `type ${componentName} = ReturnType<typeof ${componentName}>;\n` +
+                    `export default ${componentName};`;
         }
         else if (isSvelte5) {
             // Inline definitions from Svelte shims; else dts files will reference the globals which will be unresolved
@@ -6565,9 +6641,9 @@ 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 ${className || '$$Component'} = $$__sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
-                    surroundWithIgnoreComments(`type ${className || '$$Component'} = InstanceType<typeof ${className || '$$Component'}>;\n`) +
-                    `export default ${className || '$$Component'};`;
+                    `${doc}const ${componentName} = $$__sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
+                    surroundWithIgnoreComments(`type ${componentName} = InstanceType<typeof ${componentName}>;\n`) +
+                    `export default ${componentName};`;
         }
         else if (isTsFile) {
             const svelteComponentClass = noSvelteComponentTyped
@@ -6602,14 +6678,15 @@ declare function $$__sveltets_2_isomorphic_component<
         if (isSvelte5) {
             if (exportedNames.usesRunes() && !usesSlots && !events.hasEvents()) {
                 statement =
-                    `\n${doc}const ${className || '$$Component'} = __sveltets_2_fn_component(render());\n` +
-                        `export default ${className || '$$Component'};`;
+                    `\n${doc}const ${componentName} = __sveltets_2_fn_component(render());\n` +
+                        `type ${componentName} = ReturnType<typeof ${componentName}>;\n` +
+                        `export default ${componentName};`;
             }
             else {
                 statement =
-                    `\n${doc}const ${className || '$$Component'} = __sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
-                        surroundWithIgnoreComments(`type ${className || '$$Component'} = InstanceType<typeof ${className || '$$Component'}>;\n`) +
-                        `export default ${className || '$$Component'};`;
+                    `\n${doc}const ${componentName} = __sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
+                        surroundWithIgnoreComments(`type ${componentName} = InstanceType<typeof ${componentName}>;\n`) +
+                        `export default ${componentName};`;
             }
         }
         else {
@@ -6781,6 +6858,7 @@ function processSvelteTemplate(str, parse, options) {
     let uses$$restProps = false;
     let uses$$slots = false;
     let usesAccessors = !!options.accessors;
+    let isRunes = false;
     const componentDocumentation = new ComponentDocumentation();
     //track if we are in a declaration scope
     const isDeclaration = { value: false };
@@ -6804,6 +6882,9 @@ function processSvelteTemplate(str, parse, options) {
                         usesAccessors = true;
                     }
                     break;
+                case 'runes':
+                    isRunes = true;
+                    break;
             }
         }
     };
@@ -6983,7 +7064,8 @@ function processSvelteTemplate(str, parse, options) {
         uses$$slots,
         componentDocumentation,
         resolvedStores,
-        usesAccessors
+        usesAccessors,
+        isRunes
     };
 }
 function svelte2tsx(svelte, options = { parse: compiler.parse }) {
@@ -6993,7 +7075,7 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
     const basename = path.basename(options.filename || '');
     const svelte5Plus = Number(options.version[0]) > 4;
     // process the htmlx as a svelte template
-    let { htmlAst, moduleScriptTag, scriptTag, rootSnippets, slots, uses$$props, uses$$slots, uses$$restProps, events, componentDocumentation, resolvedStores, usesAccessors } = processSvelteTemplate(str, options.parse || compiler.parse, {
+    let { htmlAst, moduleScriptTag, scriptTag, rootSnippets, slots, uses$$props, uses$$slots, uses$$restProps, events, componentDocumentation, resolvedStores, usesAccessors, isRunes } = processSvelteTemplate(str, options.parse || compiler.parse, {
         ...options,
         svelte5Plus
     });
@@ -7018,7 +7100,7 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
         : instanceScriptTarget;
     const implicitStoreValues = new ImplicitStoreValues(resolvedStores, renderFunctionStart);
     //move the instance script and process the content
-    let exportedNames = new ExportedNames(str, 0, basename, options === null || options === void 0 ? void 0 : options.isTsFile, svelte5Plus);
+    let exportedNames = new ExportedNames(str, 0, basename, options === null || options === void 0 ? void 0 : options.isTsFile, svelte5Plus, isRunes);
     let generics = new Generics(str, 0, { attributes: [] });
     let uses$$SlotsInterface = false;
     if (scriptTag) {
@@ -7027,7 +7109,7 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
             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);
+        /**hasModuleScripts */ !!moduleScriptTag, 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;

package/index.mjs

@@ -1,7 +1,7 @@
 import dedent from 'dedent-js';
 import ts from 'typescript';
 import * as path from 'path';
-import path__default from 'path';
+import path__default, { join, resolve, dirname, basename } from 'path';
 import { pascalCase } from 'pascal-case';
 import { VERSION, parse } from 'svelte/compiler';
 
@@ -4141,6 +4141,65 @@ function eventMapEntryToString([eventName, expression]) {
     return `'${eventName}':${Array.isArray(expression) ? `__sveltets_2_unionType(${expression.join(',')})` : expression}`;
 }
 
+/**
+ * Returns the path to the global svelte2tsx files that should be included in the project.
+ * 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 : join(sveltePath, 'svelte-html.d.ts');
+    const svelteHtmlPathExists = svelteHtmlPath && tsSystem.fileExists(svelteHtmlPath);
+    const svelteHtmlFile = svelteHtmlPathExists ? svelteHtmlPath : './svelte-jsx-v4.d.ts';
+    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);
+        }
+    }
+    svelteTsxFiles = svelteTsxFiles.map((f) => tsSystem.resolvePath(resolve(typesPath, f)));
+    if (hiddenFolderPath) {
+        try {
+            // IDE context - the `import('svelte')` statements inside the d.ts files will load the Svelte version of
+            // the extension, which can cause all sorts of problems. Therefore put the files into a hidden folder in
+            // the user's node_modules, preferably next to the Svelte package.
+            let path = dirname(sveltePath);
+            if (!tsSystem.directoryExists(resolve(path, 'node_modules'))) {
+                path = hiddenFolderPath;
+                while (path && !tsSystem.directoryExists(resolve(path, 'node_modules'))) {
+                    const parent = dirname(path);
+                    if (path === parent) {
+                        path = '';
+                        break;
+                    }
+                    path = parent;
+                }
+            }
+            if (path) {
+                const hiddenPath = resolve(path, 'node_modules/.svelte2tsx-language-server-files');
+                const newFiles = [];
+                for (const f of svelteTsxFiles) {
+                    const hiddenFile = resolve(hiddenPath, basename(f));
+                    const existing = tsSystem.readFile(hiddenFile);
+                    const toWrite = tsSystem.readFile(f) || '';
+                    if (existing !== toWrite) {
+                        tsSystem.writeFile(hiddenFile, toWrite);
+                    }
+                    newFiles.push(hiddenFile);
+                }
+                svelteTsxFiles = newFiles;
+            }
+        }
+        catch (e) { }
+    }
+    if (svelteHtmlPathExists) {
+        svelteTsxFiles.push(tsSystem.resolvePath(resolve(typesPath, svelteHtmlFile)));
+    }
+    return svelteTsxFiles;
+}
+
 /**
  * Finds the top level const/let/function exports of a source file.
  */
@@ -4189,7 +4248,8 @@ function findExports(ts, source, isTsFile) {
                     hasTypeDefinition: hasTypeDefinition || hasTypedParameter(ts, node, isTsFile)
                 });
             }
-            else {
+            else if (ts.isIdentifier(declaration.name)) {
+                // TODO support `export const { x, y } = ...` ?
                 exports.set(declaration.name.getText(), {
                     type: 'var',
                     node: declaration,
@@ -4286,6 +4346,12 @@ function upsertKitRouteFile(ts, basename, getSource, surround) {
         const inserted = surround(`: import('./$types.js').${basename.includes('layout') ? 'Layout' : 'Page'}${basename.includes('server') ? 'Server' : ''}LoadEvent`);
         insert(pos, inserted);
     }
+    else if ((load === null || load === void 0 ? void 0 : load.type) === 'var' && !load.hasTypeDefinition) {
+        // "const load = ..." will be transformed into
+        // "const load = (...) satisfies PageLoad"
+        insert(load.node.initializer.getStart(), surround('('));
+        insert(load.node.initializer.getEnd(), surround(`) satisfies import('./$types.js').${basename.includes('layout') ? 'Layout' : 'Page'}${basename.includes('server') ? 'Server' : ''}Load`));
+    }
     // add type to entries function if not explicitly typed
     const entries = exports.get('entries');
     if ((entries === null || entries === void 0 ? void 0 : entries.type) === 'function' &&
@@ -4487,7 +4553,8 @@ const internalHelpers = {
     upsertKitFile,
     toVirtualPos,
     toOriginalPos,
-    findExports
+    findExports,
+    get_global_types
 };
 
 /**
@@ -4529,12 +4596,13 @@ function is$$PropsDeclaration(node) {
     return isInterfaceOrTypeDeclaration(node) && node.name.text === '$$Props';
 }
 class ExportedNames {
-    constructor(str, astOffset, basename, isTsFile, isSvelte5Plus) {
+    constructor(str, astOffset, basename, isTsFile, isSvelte5Plus, isRunes) {
         this.str = str;
         this.astOffset = astOffset;
         this.basename = basename;
         this.isTsFile = isTsFile;
         this.isSvelte5Plus = isSvelte5Plus;
+        this.isRunes = isRunes;
         this.usesAccessors = false;
         /**
          * Uses the `$$Props` type
@@ -4616,10 +4684,10 @@ class ExportedNames {
         if (ts.isNamedExports(exportClause)) {
             for (const ne of exportClause.elements) {
                 if (ne.propertyName) {
-                    this.addExport(ne.propertyName, false, ne.name);
+                    this.addExport(ne.propertyName, false, ne.name, undefined, undefined, true);
                 }
                 else {
-                    this.addExport(ne.name, false);
+                    this.addExport(ne.name, false, undefined, undefined, undefined, true);
                 }
             }
             //we can remove entire statement
@@ -4752,7 +4820,11 @@ class ExportedNames {
                                             ? 'boolean'
                                             : ts.isIdentifier(element.initializer)
                                                 ? `typeof ${element.initializer.text}`
-                                                : 'unknown';
+                                                : ts.isObjectLiteralExpression(element.initializer)
+                                                    ? 'Record<string, unknown>'
+                                                    : ts.isArrayLiteralExpression(element.initializer)
+                                                        ? 'unknown[]'
+                                                        : 'unknown';
                             props.push(`${name}?: ${type}`);
                         }
                         else {
@@ -4956,7 +5028,7 @@ class ExportedNames {
     /**
      * Adds export to map
      */
-    addExport(name, isLet, target = null, type = null, required = false) {
+    addExport(name, isLet, target = null, type = null, required = false, isNamedExport = false) {
         const existingDeclaration = this.possibleExports.get(name.text);
         if (target) {
             this.exports.set(name.text, {
@@ -4964,7 +5036,8 @@ class ExportedNames {
                 type: (type === null || type === void 0 ? void 0 : type.getText()) || (existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.type),
                 identifierText: target.text,
                 required: required || (existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.required),
-                doc: this.getDoc(target) || (existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.doc)
+                doc: this.getDoc(target) || (existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.doc),
+                isNamedExport
             });
         }
         else {
@@ -4972,7 +5045,8 @@ class ExportedNames {
                 isLet: isLet || (existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.isLet),
                 type: existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.type,
                 required: existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.required,
-                doc: existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.doc
+                doc: existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.doc,
+                isNamedExport
             });
         }
         if (existingDeclaration === null || existingDeclaration === void 0 ? void 0 : existingDeclaration.isLet) {
@@ -5083,7 +5157,7 @@ class ExportedNames {
      */
     createExportsStr() {
         const names = Array.from(this.exports.entries());
-        const others = names.filter(([, { isLet }]) => !isLet);
+        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
         if (this.isSvelte5Plus) {
             let str = '';
@@ -5155,7 +5229,7 @@ class ExportedNames {
             this.isSvelte5Plus && globals.some((global) => runes.includes(global));
     }
     usesRunes() {
-        return this.hasRunesGlobals || this.hasPropsRune();
+        return this.hasRunesGlobals || this.hasPropsRune() || this.isRunes;
     }
 }
 
@@ -6115,12 +6189,12 @@ class InterfacesAndTypes {
     }
 }
 
-function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, hasModuleScript, isTSFile, basename, isSvelte5Plus) {
+function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, hasModuleScript, 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);
     const astOffset = script.content.start;
-    const exportedNames = new ExportedNames(str, astOffset, basename, isTSFile, isSvelte5Plus);
+    const exportedNames = new ExportedNames(str, astOffset, basename, isTSFile, isSvelte5Plus, isRunes);
     const generics = new Generics(str, astOffset, script);
     const interfacesAndTypes = new InterfacesAndTypes();
     const implicitTopLevelNames = new ImplicitTopLevelNames(str, astOffset);
@@ -6516,12 +6590,14 @@ function addSimpleComponentExport({ events, isTsFile, canHaveAnyProp, exportedNa
     const propDef = props(isTsFile, canHaveAnyProp, exportedNames, _events(events.hasStrictEvents(), 'render()'));
     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()) {
             statement =
-                `\n${doc}const ${className || '$$Component'} = __sveltets_2_fn_component(render());\n` +
-                    `export default ${className || '$$Component'};`;
+                `\n${doc}const ${componentName} = __sveltets_2_fn_component(render());\n` +
+                    `type ${componentName} = ReturnType<typeof ${componentName}>;\n` +
+                    `export default ${componentName};`;
         }
         else if (isSvelte5) {
             // Inline definitions from Svelte shims; else dts files will reference the globals which will be unresolved
@@ -6545,9 +6621,9 @@ 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 ${className || '$$Component'} = $$__sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
-                    surroundWithIgnoreComments(`type ${className || '$$Component'} = InstanceType<typeof ${className || '$$Component'}>;\n`) +
-                    `export default ${className || '$$Component'};`;
+                    `${doc}const ${componentName} = $$__sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
+                    surroundWithIgnoreComments(`type ${componentName} = InstanceType<typeof ${componentName}>;\n`) +
+                    `export default ${componentName};`;
         }
         else if (isTsFile) {
             const svelteComponentClass = noSvelteComponentTyped
@@ -6582,14 +6658,15 @@ declare function $$__sveltets_2_isomorphic_component<
         if (isSvelte5) {
             if (exportedNames.usesRunes() && !usesSlots && !events.hasEvents()) {
                 statement =
-                    `\n${doc}const ${className || '$$Component'} = __sveltets_2_fn_component(render());\n` +
-                        `export default ${className || '$$Component'};`;
+                    `\n${doc}const ${componentName} = __sveltets_2_fn_component(render());\n` +
+                        `type ${componentName} = ReturnType<typeof ${componentName}>;\n` +
+                        `export default ${componentName};`;
             }
             else {
                 statement =
-                    `\n${doc}const ${className || '$$Component'} = __sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
-                        surroundWithIgnoreComments(`type ${className || '$$Component'} = InstanceType<typeof ${className || '$$Component'}>;\n`) +
-                        `export default ${className || '$$Component'};`;
+                    `\n${doc}const ${componentName} = __sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
+                        surroundWithIgnoreComments(`type ${componentName} = InstanceType<typeof ${componentName}>;\n`) +
+                        `export default ${componentName};`;
             }
         }
         else {
@@ -6761,6 +6838,7 @@ function processSvelteTemplate(str, parse, options) {
     let uses$$restProps = false;
     let uses$$slots = false;
     let usesAccessors = !!options.accessors;
+    let isRunes = false;
     const componentDocumentation = new ComponentDocumentation();
     //track if we are in a declaration scope
     const isDeclaration = { value: false };
@@ -6784,6 +6862,9 @@ function processSvelteTemplate(str, parse, options) {
                         usesAccessors = true;
                     }
                     break;
+                case 'runes':
+                    isRunes = true;
+                    break;
             }
         }
     };
@@ -6963,7 +7044,8 @@ function processSvelteTemplate(str, parse, options) {
         uses$$slots,
         componentDocumentation,
         resolvedStores,
-        usesAccessors
+        usesAccessors,
+        isRunes
     };
 }
 function svelte2tsx(svelte, options = { parse }) {
@@ -6973,7 +7055,7 @@ function svelte2tsx(svelte, options = { parse }) {
     const basename = path__default.basename(options.filename || '');
     const svelte5Plus = Number(options.version[0]) > 4;
     // process the htmlx as a svelte template
-    let { htmlAst, moduleScriptTag, scriptTag, rootSnippets, slots, uses$$props, uses$$slots, uses$$restProps, events, componentDocumentation, resolvedStores, usesAccessors } = processSvelteTemplate(str, options.parse || parse, {
+    let { htmlAst, moduleScriptTag, scriptTag, rootSnippets, slots, uses$$props, uses$$slots, uses$$restProps, events, componentDocumentation, resolvedStores, usesAccessors, isRunes } = processSvelteTemplate(str, options.parse || parse, {
         ...options,
         svelte5Plus
     });
@@ -6998,7 +7080,7 @@ function svelte2tsx(svelte, options = { parse }) {
         : instanceScriptTarget;
     const implicitStoreValues = new ImplicitStoreValues(resolvedStores, renderFunctionStart);
     //move the instance script and process the content
-    let exportedNames = new ExportedNames(str, 0, basename, options === null || options === void 0 ? void 0 : options.isTsFile, svelte5Plus);
+    let exportedNames = new ExportedNames(str, 0, basename, options === null || options === void 0 ? void 0 : options.isTsFile, svelte5Plus, isRunes);
     let generics = new Generics(str, 0, { attributes: [] });
     let uses$$SlotsInterface = false;
     if (scriptTag) {
@@ -7007,7 +7089,7 @@ function svelte2tsx(svelte, options = { parse }) {
             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);
+        /**hasModuleScripts */ !!moduleScriptTag, 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte2tsx",
-  "version": "0.7.21",
+  "version": "0.7.23",
   "description": "Convert Svelte components to TSX for type checking",
   "author": "David Pershouse",
   "license": "MIT",
@@ -40,7 +40,7 @@
     "svelte": "~4.2.19",
     "tiny-glob": "^0.2.6",
     "tslib": "^2.4.0",
-    "typescript": "^5.5.2"
+    "typescript": "^5.6.3"
   },
   "peerDependencies": {
     "svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0",