svelte2tsx 0.7.46 → 0.7.48

package/index.d.ts

@@ -84,6 +84,12 @@ export function svelte2tsx(
          * Transpiled output may vary between versions.
          */
         version?: string;
+        /**
+         * If true, emits JSDoc annotations for types in JS files instead of TypeScript syntax.
+         * This is useful for svelte-check's incremental mode where the output needs to be
+         * valid JS that tsc can process without errors.
+         */
+        emitJsDoc?: boolean;
     }
 ): SvelteCompiledToTsx
 

package/index.js

@@ -2839,7 +2839,7 @@ const supportsBindThis = [
 /**
  * Transform bind:xxx into something that conforms to JS/TS
  */
-function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus) {
+function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus, emitJsDoc, isTsFile) {
     const isGetSetBinding = attr.expression.type === 'SequenceExpression';
     const [get, set] = isGetSetBinding ? attr.expression.expressions : [];
     // bind this
@@ -2871,9 +2871,14 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus)
         }
         // one way binding whose property is not on the element
         if (oneWayBindingAttributesNotOnElement.has(attr.name) && element instanceof Element) {
+            const useTypescriptSyntax = isTsFile || !emitJsDoc;
+            const bindingType = oneWayBindingAttributesNotOnElement.get(attr.name);
+            const bindingValue = useTypescriptSyntax
+                ? `null as ${bindingType}`
+                : `/** @type {${bindingType}} */ (null)`;
             element.appendToStartEnd([
                 [attr.expression.start, getEnd(attr.expression)],
-                `= ${surroundWithIgnoreComments(`null as ${oneWayBindingAttributesNotOnElement.get(attr.name)}`)};`
+                `= ${surroundWithIgnoreComments(bindingValue)};`
             ]);
             return;
         }
@@ -3338,10 +3343,11 @@ function handleTransitionDirective(str, attr, element) {
  * }
  * ```
  */
-function handleSnippet(str, snippetBlock, component) {
+function handleSnippet(str, snippetBlock, component, emitJsDoc = false, isTsFile = false) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const isImplicitProp = component !== undefined;
     const endSnippet = str.original.lastIndexOf('{', snippetBlock.end - 1);
+    const usTSSyntax = isTsFile || !emitJsDoc;
     const afterSnippet = isImplicitProp
         ? `};return __sveltets_2_any(0)}`
         : `};return __sveltets_2_any(0)};`;
@@ -3407,13 +3413,14 @@ function handleSnippet(str, snippetBlock, component) {
             'const ',
             [snippetBlock.expression.start, snippetBlock.expression.end],
             IGNORE_POSITION_COMMENT,
-            ` = ${snippetBlock.typeParams ? `<${snippetBlock.typeParams}>` : ''}(`
+            ` = ${usTSSyntax ? '' : "/** @returns {ReturnType<import('svelte').Snippet>} */ "}${usTSSyntax && snippetBlock.typeParams ? `<${snippetBlock.typeParams}>` : ''}(`
         ];
         if (parameters) {
             transforms.push(parameters);
         }
-        transforms.push(')', surroundWithIgnoreComments(`: ReturnType<import('svelte').Snippet>`), // shows up nicely preserved on hover, other alternatives don't
-        afterParameters);
+        transforms.push(')', usTSSyntax
+            ? surroundWithIgnoreComments(`: ReturnType<import('svelte').Snippet>`) // shows up nicely preserved on hover, other alternatives don't
+            : '', afterParameters);
         transform(str, snippetBlock.start, startEnd, transforms);
     }
 }
@@ -4895,8 +4902,11 @@ function handleAttachTag(tag, element) {
  * and converts it to JSX
  */
 function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
+    var _a, _b;
     options.typingsNamespace = options.typingsNamespace || 'svelteHTML';
     const preserveAttributeCase = options.namespace === 'foreign';
+    const emitJsDoc = (_a = options.emitJsDoc) !== null && _a !== void 0 ? _a : false;
+    const isTsFile = (_b = options.isTsFile) !== null && _b !== void 0 ? _b : false;
     const rootSnippets = [];
     let element;
     const pendingSnippetHoistCheck = new Set();
@@ -5032,7 +5042,7 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                             (element instanceof Element &&
                                 element.tagName === 'svelte:boundary')
                             ? element
-                            : undefined);
+                            : undefined, emitJsDoc, isTsFile);
                         if (parent === ast) {
                             // root snippet -> move to instance script or possibly even module script
                             const result = analyze({
@@ -5128,7 +5138,7 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                         handleComment(str, node);
                         break;
                     case 'Binding':
-                        handleBinding(str, node, parent, element, options.typingsNamespace === 'svelteHTML', options.svelte5Plus);
+                        handleBinding(str, node, parent, element, options.typingsNamespace === 'svelteHTML', options.svelte5Plus, emitJsDoc, isTsFile);
                         break;
                     case 'Class':
                         handleClassDirective(str, node, element);
@@ -5711,21 +5721,33 @@ function addComponentExport(params) {
         addSimpleComponentExport(params);
     }
 }
-function addGenericsComponentExport({ events, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, generics, usesSlots, isSvelte5, noSvelteComponentTyped, hasTopLevelAwait }) {
+function addGenericsComponentExport({ events, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, isTsFile, generics, usesSlots, isSvelte5, noSvelteComponentTyped, hasTopLevelAwait, emitJsDoc }) {
     const genericsDef = generics.toDefinitionString();
     const genericsRef = generics.toReferencesString();
+    const useTSSyntax = isTsFile || !emitJsDoc;
+    const templateNames = !useTSSyntax && genericsDef
+        ? genericsDef
+            .slice(1, -1)
+            .split(',')
+            .map((part) => part.trim())
+            .map((part) => part.split(/\s|=/)[0])
+            .filter(Boolean)
+        : [];
+    const templateComment = templateNames.length
+        ? `/** @template ${templateNames.join(', ')} */\n`
+        : '';
     const doc = componentDocumentation.getFormatted();
     const className = fileName && classNameFromFilename(fileName, mode !== 'dts');
     function returnType(forPart) {
         return `ReturnType<__sveltets_Render${genericsRef}['${forPart}']>`;
     }
     const renderCall = hasTopLevelAwait
-        ? `(await ${internalHelpers.renderName}${genericsRef}())`
-        : `${internalHelpers.renderName}${genericsRef}()`;
+        ? `(await ${internalHelpers.renderName}${useTSSyntax ? genericsRef : ''}())`
+        : `${internalHelpers.renderName}${useTSSyntax ? 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} {
+${templateComment}class __sveltets_Render${useTSSyntax ? genericsDef : ''} {
     props() {
         return ${props(true, canHaveAnyProp, exportedNames, renderCall)}.props;
     }
@@ -5741,12 +5763,25 @@ class __sveltets_Render${genericsDef} {
         const renderType = hasTopLevelAwait
             ? `Awaited<ReturnType<typeof ${internalHelpers.renderName}${genericsRef}>>`
             : `ReturnType<typeof ${internalHelpers.renderName}${genericsRef}>`;
-        statement = `
+        if (useTSSyntax) {
+            statement = `
 class __sveltets_Render${genericsDef} {
     props(): ${renderType}['props'] { return null as any; }
     events(): ${renderType}['events'] { return null as any; }
     slots(): ${renderType}['slots'] { return null as any; }
 `;
+        }
+        else {
+            statement = `
+${templateComment}class __sveltets_Render {
+    /** @returns {${renderType}['props']} */
+    props() { return /** @type {any} */ (null); }
+    /** @returns {${renderType}['events']} */
+    events() { return /** @type {any} */ (null); }
+    /** @returns {${renderType}['slots']} */
+    slots() { return /** @type {any} */ (null); }
+`;
+        }
     }
     statement += isSvelte5
         ? `    bindings() { return ${exportedNames.createBindingsStr()}; }
@@ -5778,15 +5813,29 @@ class __sveltets_Render${genericsDef} {
         // - Constraints: Need to support Svelte 4 class component types, therefore we need to use __sveltets_2_ensureComponent to transform function components to classes
         // - Limitations: TypeScript is not able to preserve generics during said transformation (i.e. there's no way to express keeping the generic etc)
         // TODO Svelte 6/7: Switch this around and not use new Component in svelte2tsx anymore, which means we can remove the legacy class component. We need something like _ensureFnComponent then.
-        statement +=
-            `\ninterface $$IsomorphicComponent {\n` +
-                `    new ${genericsDef}(options: import('svelte').ComponentConstructorOptions<${returnType('props') + (usesSlots ? '& {children?: any}' : '')}>): import('svelte').SvelteComponent<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> & { $$bindings?: ${returnType('bindings')} } & ${returnType('exports')};\n` +
-                `    ${genericsDef}(internal: unknown, props: ${propsType}): ${returnType('exports')};\n` +
-                `    z_$$bindings?: ${bindingsType};\n` +
-                `}\n` +
-                `${doc}const ${className || '$$Component'}: $$IsomorphicComponent = null as any;\n` +
-                surroundWithIgnoreComments(`type ${className || '$$Component'}${genericsDef} = InstanceType<typeof ${className || '$$Component'}${genericsRef}>;\n`) +
-                `export default ${className || '$$Component'};`;
+        if (useTSSyntax) {
+            statement +=
+                `\ninterface $$IsomorphicComponent {\n` +
+                    `    new ${genericsDef}(options: import('svelte').ComponentConstructorOptions<${returnType('props') + (usesSlots ? '& {children?: any}' : '')}>): import('svelte').SvelteComponent<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> & { $$bindings?: ${returnType('bindings')} } & ${returnType('exports')};\n` +
+                    `    ${genericsDef}(internal: unknown, props: ${propsType}): ${returnType('exports')};\n` +
+                    `    z_$$bindings?: ${bindingsType};\n` +
+                    `}\n` +
+                    `${doc}const ${className || '$$Component'}: $$IsomorphicComponent = null as any;\n` +
+                    surroundWithIgnoreComments(`type ${className || '$$Component'}${genericsDef} = InstanceType<typeof ${className || '$$Component'}${genericsRef}>;\n`) +
+                    `export default ${className || '$$Component'};`;
+        }
+        else {
+            const componentName = className || '$$Component';
+            const componentType = `(new ${genericsDef}(options: import('svelte').ComponentConstructorOptions<${returnType('props') + (usesSlots ? '& {children?: any}' : '')}>) => import('svelte').SvelteComponent<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> & { $$bindings?: ${returnType('bindings')} } & ${returnType('exports')}) & ` +
+                `(${genericsDef}(internal: unknown, props: ${propsType}) => ${returnType('exports')}) & ` +
+                `{z_$$bindings?: ${bindingsType}}`;
+            statement +=
+                `\n${templateComment}` +
+                    `/** @typedef {${componentType}} $$IsomorphicComponent */\n` +
+                    `${doc}/** @type {$$IsomorphicComponent} */ export const ${componentName} = /** @type {any} */(null);\n` +
+                    `/** @typedef {InstanceType<typeof ${componentName}>} ${componentName} */\n` +
+                    `export default ${componentName};`;
+        }
     }
     else if (mode === 'dts') {
         statement +=
@@ -5799,16 +5848,30 @@ class __sveltets_Render${genericsDef} {
                 '\n}';
     }
     else {
-        statement +=
-            `\n\nimport { ${svelteComponentClass} as __SvelteComponentTyped__ } from "svelte" \n` +
-                `${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends __SvelteComponentTyped__<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> {` +
-                exportedNames.createClassGetters(genericsRef) +
-                (usesAccessors ? exportedNames.createClassAccessors() : '') +
-                '\n}';
+        if (useTSSyntax) {
+            statement +=
+                `\n\nimport { ${svelteComponentClass} as __SvelteComponentTyped__ } from "svelte" \n` +
+                    `${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends __SvelteComponentTyped__<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> {` +
+                    exportedNames.createClassGetters(genericsRef) +
+                    (usesAccessors ? exportedNames.createClassAccessors() : '') +
+                    '\n}';
+        }
+        else {
+            statement +=
+                `\n\nimport { ${svelteComponentClass} as __SvelteComponentTyped__ } from "svelte" \n` +
+                    `/**` +
+                    templateNames.map((t) => ` * @template ${t}\n`).join('') +
+                    ` * @extends {__SvelteComponentTyped__<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}>}\n` +
+                    ` */\n` +
+                    `export default class${className ? ` ${className}` : ''} extends __SvelteComponentTyped__ {` +
+                    exportedNames.createClassGetters(genericsRef) +
+                    (usesAccessors ? exportedNames.createClassAccessors() : '') +
+                    '\n}';
+        }
     }
     str.append(statement);
 }
-function addSimpleComponentExport({ events, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, usesSlots, noSvelteComponentTyped, isSvelte5, hasTopLevelAwait }) {
+function addSimpleComponentExport({ events, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, usesSlots, noSvelteComponentTyped, isSvelte5, hasTopLevelAwait, emitJsDoc }) {
     const renderCall = hasTopLevelAwait
         ? `$${internalHelpers.renderName}`
         : `${internalHelpers.renderName}()`;
@@ -5885,18 +5948,25 @@ declare function $$__sveltets_2_isomorphic_component<
     }
     else {
         if (isSvelte5) {
+            // When emitting JSDoc (JS files in incremental mode), we use @typedef instead of
+            // TS type syntax, and must export the const so declaration-merging with @typedef works.
+            const useTypeScriptSyntax = isTsFile || !emitJsDoc;
             if (exportedNames.isRunesMode() && !usesSlots && !events.hasEvents()) {
                 statement =
-                    `\n${awaitDeclaration}${doc}const ${componentName} = __sveltets_2_fn_component(${renderCall});\n` +
+                    `\n${awaitDeclaration}${doc}${useTypeScriptSyntax ? '' : 'export '}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`) +
+                        surroundWithIgnoreComments(useTypeScriptSyntax
+                            ? `type ${componentName} = ReturnType<typeof ${componentName}>;\n`
+                            : `/** @typedef {ReturnType<typeof ${componentName}>} ${componentName} */\n`) +
                         `export default ${componentName};`;
             }
             else {
                 statement =
-                    `\n${awaitDeclaration}${doc}const ${componentName} = __sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
-                        surroundWithIgnoreComments(`type ${componentName} = InstanceType<typeof ${componentName}>;\n`) +
+                    `\n${awaitDeclaration}${doc}${useTypeScriptSyntax ? '' : 'export '}const ${componentName} = __sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
+                        surroundWithIgnoreComments(useTypeScriptSyntax
+                            ? `type ${componentName} = InstanceType<typeof ${componentName}>;\n`
+                            : `/** @typedef {InstanceType<typeof ${componentName}>} ${componentName} */\n`) +
                         `export default ${componentName};`;
             }
         }
@@ -5987,9 +6057,14 @@ function classNameFromFilename(filename, appendSuffix) {
     }
 }
 
-function createRenderFunction({ str, scriptTag, scriptDestination, slots, events, exportedNames, uses$$props, uses$$restProps, uses$$slots, uses$$SlotsInterface, generics, hasTopLevelAwait, isTsFile, mode }) {
+function createRenderFunction({ str, scriptTag, scriptDestination, slots, events, exportedNames, uses$$props, uses$$restProps, uses$$slots, uses$$SlotsInterface, generics, hasTopLevelAwait, isTsFile, mode, emitJsDoc = false }) {
     const htmlx = str.original;
     let propsDecl = '';
+    const useTypescriptSyntax = isTsFile || !emitJsDoc;
+    const templateNames = useTypescriptSyntax ? [] : generics.getReferences();
+    const templateComment = !useTypescriptSyntax && templateNames.length
+        ? `\n/** @template ${templateNames.join(', ')} */\n`
+        : '';
     if (uses$$props) {
         propsDecl += ' let $$props = __sveltets_2_allPropsType();';
     }
@@ -6004,12 +6079,11 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
                     .join(', ') +
                 '});';
     }
-    const slotsDeclaration = slots.size > 0 && mode !== 'dts'
-        ? '\n' +
-            surroundWithIgnoreComments(';const __sveltets_createSlot = __sveltets_2_createCreateSlot' +
-                (uses$$SlotsInterface ? '<$$Slots>' : '') +
-                '();')
-        : '';
+    const slotTypeReference = uses$$SlotsInterface ? '<$$Slots>' : '';
+    const slotDeclaration = useTypescriptSyntax || !slotTypeReference
+        ? `;const __sveltets_createSlot = __sveltets_2_createCreateSlot${slotTypeReference}();`
+        : `/** @type {ReturnType<typeof __sveltets_2_createCreateSlot${slotTypeReference}>} */ const __sveltets_createSlot = __sveltets_2_createCreateSlot();`;
+    const slotsDeclaration = slots.size > 0 && mode !== 'dts' ? '\n' + surroundWithIgnoreComments(slotDeclaration) : '';
     if (scriptTag) {
         //I couldn't get magicstring to let me put the script before the <> we prepend during conversion of the template to jsx, so we just close it instead
         const scriptTagEnd = htmlx.lastIndexOf('>', scriptTag.content.start) + 1;
@@ -6021,12 +6095,19 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
                 start++;
                 end--;
             }
-            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`);
+            str.overwrite(scriptTag.start + 1, start - 1, `${templateComment}${hasTopLevelAwait ? 'async ' : ''}function ${internalHelpers.renderName}`);
+            if (useTypescriptSyntax) {
+                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(start - 1, start, '');
+                str.overwrite(start, end, '');
+                str.overwrite(end, scriptTagEnd, `() {${propsDecl}\n`);
+            }
         }
         else {
-            str.overwrite(scriptTag.start + 1, scriptTagEnd, `${hasTopLevelAwait ? 'async ' : ''}function ${internalHelpers.renderName}${generics.toDefinitionString(true)}() {${propsDecl}\n`);
+            str.overwrite(scriptTag.start + 1, scriptTagEnd, `${templateComment}${hasTopLevelAwait ? 'async ' : ''}function ${internalHelpers.renderName}${useTypescriptSyntax ? generics.toDefinitionString(true) : ''}() {${propsDecl}\n`);
         }
         const scriptEndTagStart = htmlx.lastIndexOf('<', scriptTag.end - 1);
         // wrap template with callback
@@ -6035,7 +6116,7 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
         });
     }
     else {
-        str.prependRight(scriptDestination, `;${hasTopLevelAwait ? 'async ' : ''}function ${internalHelpers.renderName}() {` +
+        str.prependRight(scriptDestination, `;${templateComment}${hasTopLevelAwait ? 'async ' : ''}function ${internalHelpers.renderName}${useTypescriptSyntax ? generics.toDefinitionString(true) : ''}() {` +
             `${propsDecl}${slotsDeclaration}\nasync () => {`);
     }
     const slotsAsDef = uses$$SlotsInterface
@@ -6316,6 +6397,11 @@ class HoistableInterfaces {
             }
         }
     }
+    addDisallowed(names) {
+        for (const name of names) {
+            this.disallowed_values.add(name);
+        }
+    }
     /**
      * Traverses the AST to collect import statements and top-level interfaces,
      * then determines which interfaces can be hoisted.
@@ -6455,13 +6541,14 @@ function is$$PropsDeclaration(node) {
     return isInterfaceOrTypeDeclaration(node) && node.name.text === '$$Props';
 }
 class ExportedNames {
-    constructor(str, astOffset, basename, isTsFile, isSvelte5Plus, isRunes) {
+    constructor(str, astOffset, basename, isTsFile, isSvelte5Plus, isRunes, emitJsDoc) {
         this.str = str;
         this.astOffset = astOffset;
         this.basename = basename;
         this.isTsFile = isTsFile;
         this.isSvelte5Plus = isSvelte5Plus;
         this.isRunes = isRunes;
+        this.emitJsDoc = emitJsDoc;
         this.hoistableInterfaces = new HoistableInterfaces();
         this.usesAccessors = false;
         /**
@@ -6489,6 +6576,22 @@ class ExportedNames {
         this.doneDeclarationTransformation = new Set();
         this.getters = new Set();
     }
+    /**
+     * Emits a Kit type annotation (e.g. `: import('./$types.js').PageData`) either as a
+     * JSDoc @type comment (for JS files in emitJsDoc mode) or as a TS type annotation
+     * wrapped in ignore comments.
+     */
+    emitKitType(kitType, nameStart, nameEnd) {
+        if (!kitType)
+            return;
+        if (this.emitJsDoc && !this.isTsFile) {
+            const kitTypeRef = kitType.slice(2); // strip leading ": "
+            preprendStr(this.str, nameStart, `/** @type {${kitTypeRef}} */ `);
+        }
+        else {
+            preprendStr(this.str, nameEnd, surroundWithIgnoreComments(kitType));
+        }
+    }
     handleVariableStatement(node, parent) {
         const exportModifier = findExportKeyword(node);
         if (exportModifier) {
@@ -6507,10 +6610,7 @@ class ExportedNames {
                             n.name.getText() === 'snapshot';
                         // TS types are not allowed in JS files, but TS will still pick it up and the ignore comment will filter out the error
                         const kitType = isKitExport && !type ? `: import('./$types.js').Snapshot` : '';
-                        const nameEnd = n.name.end + this.astOffset;
-                        if (kitType) {
-                            preprendStr(this.str, nameEnd, surroundWithIgnoreComments(kitType));
-                        }
+                        this.emitKitType(kitType, n.name.getStart() + this.astOffset, n.name.end + this.astOffset);
                     }
                 });
             }
@@ -6794,17 +6894,20 @@ class ExportedNames {
                         [ts.SyntaxKind.FalseKeyword, ts.SyntaxKind.TrueKeyword].includes(declaration.initializer.kind)))) {
                 const name = identifier.getText();
                 if (nameEnd === end) {
-                    preprendStr(this.str, end, surroundWithIgnoreComments(`${kitType};${name} = __sveltets_2_any(${name});`));
+                    if (kitType && this.emitJsDoc && !this.isTsFile) {
+                        const kitTypeRef = kitType.slice(2);
+                        const nameStart = identifier.getStart() + this.astOffset;
+                        preprendStr(this.str, nameStart, `/** @type {${kitTypeRef}} */ `);
+                    }
+                    preprendStr(this.str, end, surroundWithIgnoreComments(`${(this.isTsFile || !this.emitJsDoc) && kitType ? kitType : ''};${name} = __sveltets_2_any(${name});`));
                 }
                 else {
-                    if (kitType) {
-                        preprendStr(this.str, nameEnd, surroundWithIgnoreComments(kitType));
-                    }
+                    this.emitKitType(kitType, identifier.getStart() + this.astOffset, nameEnd);
                     preprendStr(this.str, end, surroundWithIgnoreComments(`;${name} = __sveltets_2_any(${name});`));
                 }
             }
-            else if (kitType) {
-                preprendStr(this.str, nameEnd, surroundWithIgnoreComments(kitType));
+            else {
+                this.emitKitType(kitType, identifier.getStart() + this.astOffset, nameEnd);
             }
         };
         const findComma = (target) => target.getChildren().filter((child) => child.kind === ts.SyntaxKind.CommaToken);
@@ -7583,12 +7686,12 @@ class InterfacesAndTypes {
     }
 }
 
-function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, moduleAst, isTSFile, basename, isSvelte5Plus, isRunes) {
+function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, moduleAst, isTSFile, basename, isSvelte5Plus, isRunes, emitJsDoc) {
     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, isRunes);
+    const exportedNames = new ExportedNames(str, astOffset, basename, isTSFile, isSvelte5Plus, isRunes, emitJsDoc);
     const generics = new Generics(str, astOffset, script);
     const interfacesAndTypes = new InterfacesAndTypes();
     if (moduleAst) {
@@ -7821,6 +7924,7 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
     for (const node of nodesToMove) {
         moveNode(node, str, astOffset, script.start, tsAst);
     }
+    exportedNames.hoistableInterfaces.addDisallowed(implicitStoreValues.getAccessedStores());
     const hoisted = exportedNames.hoistableInterfaces.moveHoistableInterfaces(str, astOffset, script.start + 1, // +1 because imports are also moved at that position, and we want to move interfaces after imports
     generics.getReferences());
     if (mode === 'dts') {
@@ -7944,12 +8048,14 @@ function processSvelteTemplate(str, parse, options) {
     return convertHtmlxToJsx(str, htmlxAst, tags, options);
 }
 function svelte2tsx(svelte, options = { parse: compiler.parse }) {
+    var _a;
     options.mode = options.mode || 'ts';
     options.version = options.version || compiler.VERSION;
     const str = new MagicString(svelte);
     const basename = path.basename(options.filename || '');
     const svelte5Plus = Number(options.version[0]) > 4;
     const isTsFile = options === null || options === void 0 ? void 0 : options.isTsFile;
+    const emitJsDoc = (_a = options === null || options === void 0 ? void 0 : options.emitJsDoc) !== null && _a !== void 0 ? _a : false;
     // process the htmlx as a svelte template
     let { htmlAst, moduleScriptTag, scriptTag, rootSnippets, slots, uses$$props, uses$$slots, uses$$restProps, events, componentDocumentation, resolvedStores, usesAccessors, isRunes } = processSvelteTemplate(str, options.parse || compiler.parse, {
         ...options,
@@ -7978,7 +8084,7 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
         : instanceScriptTarget;
     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 exportedNames = new ExportedNames(str, 0, basename, isTsFile, svelte5Plus, isRunes, emitJsDoc);
     let generics = new Generics(str, 0, { attributes: [] });
     let uses$$SlotsInterface = false;
     let hasTopLevelAwait = false;
@@ -7987,7 +8093,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, moduleAst, isTsFile, basename, svelte5Plus, isRunes);
+        const res = processInstanceScriptContent(str, scriptTag, events, implicitStoreValues, options.mode, moduleAst, isTsFile, basename, svelte5Plus, isRunes, emitJsDoc);
         uses$$props = uses$$props || res.uses$$props;
         uses$$restProps = uses$$restProps || res.uses$$restProps;
         uses$$slots = uses$$slots || res.uses$$slots;
@@ -8016,7 +8122,8 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
         hasTopLevelAwait,
         svelte5Plus,
         isTsFile,
-        mode: options.mode
+        mode: options.mode,
+        emitJsDoc
     });
     // we need to process the module script after the instance script has moved otherwise we get warnings about moving edited items
     if (moduleScriptTag) {
@@ -8069,7 +8176,8 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
         generics,
         isSvelte5: svelte5Plus,
         hasTopLevelAwait,
-        noSvelteComponentTyped: options.noSvelteComponentTyped
+        noSvelteComponentTyped: options.noSvelteComponentTyped,
+        emitJsDoc
     });
     if (options.mode === 'dts') {
         // Prepend the import which is used for TS files

package/index.mjs

@@ -2819,7 +2819,7 @@ const supportsBindThis = [
 /**
  * Transform bind:xxx into something that conforms to JS/TS
  */
-function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus) {
+function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus, emitJsDoc, isTsFile) {
     const isGetSetBinding = attr.expression.type === 'SequenceExpression';
     const [get, set] = isGetSetBinding ? attr.expression.expressions : [];
     // bind this
@@ -2851,9 +2851,14 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus)
         }
         // one way binding whose property is not on the element
         if (oneWayBindingAttributesNotOnElement.has(attr.name) && element instanceof Element) {
+            const useTypescriptSyntax = isTsFile || !emitJsDoc;
+            const bindingType = oneWayBindingAttributesNotOnElement.get(attr.name);
+            const bindingValue = useTypescriptSyntax
+                ? `null as ${bindingType}`
+                : `/** @type {${bindingType}} */ (null)`;
             element.appendToStartEnd([
                 [attr.expression.start, getEnd(attr.expression)],
-                `= ${surroundWithIgnoreComments(`null as ${oneWayBindingAttributesNotOnElement.get(attr.name)}`)};`
+                `= ${surroundWithIgnoreComments(bindingValue)};`
             ]);
             return;
         }
@@ -3318,10 +3323,11 @@ function handleTransitionDirective(str, attr, element) {
  * }
  * ```
  */
-function handleSnippet(str, snippetBlock, component) {
+function handleSnippet(str, snippetBlock, component, emitJsDoc = false, isTsFile = false) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const isImplicitProp = component !== undefined;
     const endSnippet = str.original.lastIndexOf('{', snippetBlock.end - 1);
+    const usTSSyntax = isTsFile || !emitJsDoc;
     const afterSnippet = isImplicitProp
         ? `};return __sveltets_2_any(0)}`
         : `};return __sveltets_2_any(0)};`;
@@ -3387,13 +3393,14 @@ function handleSnippet(str, snippetBlock, component) {
             'const ',
             [snippetBlock.expression.start, snippetBlock.expression.end],
             IGNORE_POSITION_COMMENT,
-            ` = ${snippetBlock.typeParams ? `<${snippetBlock.typeParams}>` : ''}(`
+            ` = ${usTSSyntax ? '' : "/** @returns {ReturnType<import('svelte').Snippet>} */ "}${usTSSyntax && snippetBlock.typeParams ? `<${snippetBlock.typeParams}>` : ''}(`
         ];
         if (parameters) {
             transforms.push(parameters);
         }
-        transforms.push(')', surroundWithIgnoreComments(`: ReturnType<import('svelte').Snippet>`), // shows up nicely preserved on hover, other alternatives don't
-        afterParameters);
+        transforms.push(')', usTSSyntax
+            ? surroundWithIgnoreComments(`: ReturnType<import('svelte').Snippet>`) // shows up nicely preserved on hover, other alternatives don't
+            : '', afterParameters);
         transform(str, snippetBlock.start, startEnd, transforms);
     }
 }
@@ -4875,8 +4882,11 @@ function handleAttachTag(tag, element) {
  * and converts it to JSX
  */
 function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
+    var _a, _b;
     options.typingsNamespace = options.typingsNamespace || 'svelteHTML';
     const preserveAttributeCase = options.namespace === 'foreign';
+    const emitJsDoc = (_a = options.emitJsDoc) !== null && _a !== void 0 ? _a : false;
+    const isTsFile = (_b = options.isTsFile) !== null && _b !== void 0 ? _b : false;
     const rootSnippets = [];
     let element;
     const pendingSnippetHoistCheck = new Set();
@@ -5012,7 +5022,7 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                             (element instanceof Element &&
                                 element.tagName === 'svelte:boundary')
                             ? element
-                            : undefined);
+                            : undefined, emitJsDoc, isTsFile);
                         if (parent === ast) {
                             // root snippet -> move to instance script or possibly even module script
                             const result = analyze({
@@ -5108,7 +5118,7 @@ function convertHtmlxToJsx(str, ast, tags, options = { svelte5Plus: false }) {
                         handleComment(str, node);
                         break;
                     case 'Binding':
-                        handleBinding(str, node, parent, element, options.typingsNamespace === 'svelteHTML', options.svelte5Plus);
+                        handleBinding(str, node, parent, element, options.typingsNamespace === 'svelteHTML', options.svelte5Plus, emitJsDoc, isTsFile);
                         break;
                     case 'Class':
                         handleClassDirective(str, node, element);
@@ -5691,21 +5701,33 @@ function addComponentExport(params) {
         addSimpleComponentExport(params);
     }
 }
-function addGenericsComponentExport({ events, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, generics, usesSlots, isSvelte5, noSvelteComponentTyped, hasTopLevelAwait }) {
+function addGenericsComponentExport({ events, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, isTsFile, generics, usesSlots, isSvelte5, noSvelteComponentTyped, hasTopLevelAwait, emitJsDoc }) {
     const genericsDef = generics.toDefinitionString();
     const genericsRef = generics.toReferencesString();
+    const useTSSyntax = isTsFile || !emitJsDoc;
+    const templateNames = !useTSSyntax && genericsDef
+        ? genericsDef
+            .slice(1, -1)
+            .split(',')
+            .map((part) => part.trim())
+            .map((part) => part.split(/\s|=/)[0])
+            .filter(Boolean)
+        : [];
+    const templateComment = templateNames.length
+        ? `/** @template ${templateNames.join(', ')} */\n`
+        : '';
     const doc = componentDocumentation.getFormatted();
     const className = fileName && classNameFromFilename(fileName, mode !== 'dts');
     function returnType(forPart) {
         return `ReturnType<__sveltets_Render${genericsRef}['${forPart}']>`;
     }
     const renderCall = hasTopLevelAwait
-        ? `(await ${internalHelpers.renderName}${genericsRef}())`
-        : `${internalHelpers.renderName}${genericsRef}()`;
+        ? `(await ${internalHelpers.renderName}${useTSSyntax ? genericsRef : ''}())`
+        : `${internalHelpers.renderName}${useTSSyntax ? 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} {
+${templateComment}class __sveltets_Render${useTSSyntax ? genericsDef : ''} {
     props() {
         return ${props(true, canHaveAnyProp, exportedNames, renderCall)}.props;
     }
@@ -5721,12 +5743,25 @@ class __sveltets_Render${genericsDef} {
         const renderType = hasTopLevelAwait
             ? `Awaited<ReturnType<typeof ${internalHelpers.renderName}${genericsRef}>>`
             : `ReturnType<typeof ${internalHelpers.renderName}${genericsRef}>`;
-        statement = `
+        if (useTSSyntax) {
+            statement = `
 class __sveltets_Render${genericsDef} {
     props(): ${renderType}['props'] { return null as any; }
     events(): ${renderType}['events'] { return null as any; }
     slots(): ${renderType}['slots'] { return null as any; }
 `;
+        }
+        else {
+            statement = `
+${templateComment}class __sveltets_Render {
+    /** @returns {${renderType}['props']} */
+    props() { return /** @type {any} */ (null); }
+    /** @returns {${renderType}['events']} */
+    events() { return /** @type {any} */ (null); }
+    /** @returns {${renderType}['slots']} */
+    slots() { return /** @type {any} */ (null); }
+`;
+        }
     }
     statement += isSvelte5
         ? `    bindings() { return ${exportedNames.createBindingsStr()}; }
@@ -5758,15 +5793,29 @@ class __sveltets_Render${genericsDef} {
         // - Constraints: Need to support Svelte 4 class component types, therefore we need to use __sveltets_2_ensureComponent to transform function components to classes
         // - Limitations: TypeScript is not able to preserve generics during said transformation (i.e. there's no way to express keeping the generic etc)
         // TODO Svelte 6/7: Switch this around and not use new Component in svelte2tsx anymore, which means we can remove the legacy class component. We need something like _ensureFnComponent then.
-        statement +=
-            `\ninterface $$IsomorphicComponent {\n` +
-                `    new ${genericsDef}(options: import('svelte').ComponentConstructorOptions<${returnType('props') + (usesSlots ? '& {children?: any}' : '')}>): import('svelte').SvelteComponent<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> & { $$bindings?: ${returnType('bindings')} } & ${returnType('exports')};\n` +
-                `    ${genericsDef}(internal: unknown, props: ${propsType}): ${returnType('exports')};\n` +
-                `    z_$$bindings?: ${bindingsType};\n` +
-                `}\n` +
-                `${doc}const ${className || '$$Component'}: $$IsomorphicComponent = null as any;\n` +
-                surroundWithIgnoreComments(`type ${className || '$$Component'}${genericsDef} = InstanceType<typeof ${className || '$$Component'}${genericsRef}>;\n`) +
-                `export default ${className || '$$Component'};`;
+        if (useTSSyntax) {
+            statement +=
+                `\ninterface $$IsomorphicComponent {\n` +
+                    `    new ${genericsDef}(options: import('svelte').ComponentConstructorOptions<${returnType('props') + (usesSlots ? '& {children?: any}' : '')}>): import('svelte').SvelteComponent<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> & { $$bindings?: ${returnType('bindings')} } & ${returnType('exports')};\n` +
+                    `    ${genericsDef}(internal: unknown, props: ${propsType}): ${returnType('exports')};\n` +
+                    `    z_$$bindings?: ${bindingsType};\n` +
+                    `}\n` +
+                    `${doc}const ${className || '$$Component'}: $$IsomorphicComponent = null as any;\n` +
+                    surroundWithIgnoreComments(`type ${className || '$$Component'}${genericsDef} = InstanceType<typeof ${className || '$$Component'}${genericsRef}>;\n`) +
+                    `export default ${className || '$$Component'};`;
+        }
+        else {
+            const componentName = className || '$$Component';
+            const componentType = `(new ${genericsDef}(options: import('svelte').ComponentConstructorOptions<${returnType('props') + (usesSlots ? '& {children?: any}' : '')}>) => import('svelte').SvelteComponent<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> & { $$bindings?: ${returnType('bindings')} } & ${returnType('exports')}) & ` +
+                `(${genericsDef}(internal: unknown, props: ${propsType}) => ${returnType('exports')}) & ` +
+                `{z_$$bindings?: ${bindingsType}}`;
+            statement +=
+                `\n${templateComment}` +
+                    `/** @typedef {${componentType}} $$IsomorphicComponent */\n` +
+                    `${doc}/** @type {$$IsomorphicComponent} */ export const ${componentName} = /** @type {any} */(null);\n` +
+                    `/** @typedef {InstanceType<typeof ${componentName}>} ${componentName} */\n` +
+                    `export default ${componentName};`;
+        }
     }
     else if (mode === 'dts') {
         statement +=
@@ -5779,16 +5828,30 @@ class __sveltets_Render${genericsDef} {
                 '\n}';
     }
     else {
-        statement +=
-            `\n\nimport { ${svelteComponentClass} as __SvelteComponentTyped__ } from "svelte" \n` +
-                `${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends __SvelteComponentTyped__<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> {` +
-                exportedNames.createClassGetters(genericsRef) +
-                (usesAccessors ? exportedNames.createClassAccessors() : '') +
-                '\n}';
+        if (useTSSyntax) {
+            statement +=
+                `\n\nimport { ${svelteComponentClass} as __SvelteComponentTyped__ } from "svelte" \n` +
+                    `${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends __SvelteComponentTyped__<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> {` +
+                    exportedNames.createClassGetters(genericsRef) +
+                    (usesAccessors ? exportedNames.createClassAccessors() : '') +
+                    '\n}';
+        }
+        else {
+            statement +=
+                `\n\nimport { ${svelteComponentClass} as __SvelteComponentTyped__ } from "svelte" \n` +
+                    `/**` +
+                    templateNames.map((t) => ` * @template ${t}\n`).join('') +
+                    ` * @extends {__SvelteComponentTyped__<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}>}\n` +
+                    ` */\n` +
+                    `export default class${className ? ` ${className}` : ''} extends __SvelteComponentTyped__ {` +
+                    exportedNames.createClassGetters(genericsRef) +
+                    (usesAccessors ? exportedNames.createClassAccessors() : '') +
+                    '\n}';
+        }
     }
     str.append(statement);
 }
-function addSimpleComponentExport({ events, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, usesSlots, noSvelteComponentTyped, isSvelte5, hasTopLevelAwait }) {
+function addSimpleComponentExport({ events, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, usesSlots, noSvelteComponentTyped, isSvelte5, hasTopLevelAwait, emitJsDoc }) {
     const renderCall = hasTopLevelAwait
         ? `$${internalHelpers.renderName}`
         : `${internalHelpers.renderName}()`;
@@ -5865,18 +5928,25 @@ declare function $$__sveltets_2_isomorphic_component<
     }
     else {
         if (isSvelte5) {
+            // When emitting JSDoc (JS files in incremental mode), we use @typedef instead of
+            // TS type syntax, and must export the const so declaration-merging with @typedef works.
+            const useTypeScriptSyntax = isTsFile || !emitJsDoc;
             if (exportedNames.isRunesMode() && !usesSlots && !events.hasEvents()) {
                 statement =
-                    `\n${awaitDeclaration}${doc}const ${componentName} = __sveltets_2_fn_component(${renderCall});\n` +
+                    `\n${awaitDeclaration}${doc}${useTypeScriptSyntax ? '' : 'export '}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`) +
+                        surroundWithIgnoreComments(useTypeScriptSyntax
+                            ? `type ${componentName} = ReturnType<typeof ${componentName}>;\n`
+                            : `/** @typedef {ReturnType<typeof ${componentName}>} ${componentName} */\n`) +
                         `export default ${componentName};`;
             }
             else {
                 statement =
-                    `\n${awaitDeclaration}${doc}const ${componentName} = __sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
-                        surroundWithIgnoreComments(`type ${componentName} = InstanceType<typeof ${componentName}>;\n`) +
+                    `\n${awaitDeclaration}${doc}${useTypeScriptSyntax ? '' : 'export '}const ${componentName} = __sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
+                        surroundWithIgnoreComments(useTypeScriptSyntax
+                            ? `type ${componentName} = InstanceType<typeof ${componentName}>;\n`
+                            : `/** @typedef {InstanceType<typeof ${componentName}>} ${componentName} */\n`) +
                         `export default ${componentName};`;
             }
         }
@@ -5967,9 +6037,14 @@ function classNameFromFilename(filename, appendSuffix) {
     }
 }
 
-function createRenderFunction({ str, scriptTag, scriptDestination, slots, events, exportedNames, uses$$props, uses$$restProps, uses$$slots, uses$$SlotsInterface, generics, hasTopLevelAwait, isTsFile, mode }) {
+function createRenderFunction({ str, scriptTag, scriptDestination, slots, events, exportedNames, uses$$props, uses$$restProps, uses$$slots, uses$$SlotsInterface, generics, hasTopLevelAwait, isTsFile, mode, emitJsDoc = false }) {
     const htmlx = str.original;
     let propsDecl = '';
+    const useTypescriptSyntax = isTsFile || !emitJsDoc;
+    const templateNames = useTypescriptSyntax ? [] : generics.getReferences();
+    const templateComment = !useTypescriptSyntax && templateNames.length
+        ? `\n/** @template ${templateNames.join(', ')} */\n`
+        : '';
     if (uses$$props) {
         propsDecl += ' let $$props = __sveltets_2_allPropsType();';
     }
@@ -5984,12 +6059,11 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
                     .join(', ') +
                 '});';
     }
-    const slotsDeclaration = slots.size > 0 && mode !== 'dts'
-        ? '\n' +
-            surroundWithIgnoreComments(';const __sveltets_createSlot = __sveltets_2_createCreateSlot' +
-                (uses$$SlotsInterface ? '<$$Slots>' : '') +
-                '();')
-        : '';
+    const slotTypeReference = uses$$SlotsInterface ? '<$$Slots>' : '';
+    const slotDeclaration = useTypescriptSyntax || !slotTypeReference
+        ? `;const __sveltets_createSlot = __sveltets_2_createCreateSlot${slotTypeReference}();`
+        : `/** @type {ReturnType<typeof __sveltets_2_createCreateSlot${slotTypeReference}>} */ const __sveltets_createSlot = __sveltets_2_createCreateSlot();`;
+    const slotsDeclaration = slots.size > 0 && mode !== 'dts' ? '\n' + surroundWithIgnoreComments(slotDeclaration) : '';
     if (scriptTag) {
         //I couldn't get magicstring to let me put the script before the <> we prepend during conversion of the template to jsx, so we just close it instead
         const scriptTagEnd = htmlx.lastIndexOf('>', scriptTag.content.start) + 1;
@@ -6001,12 +6075,19 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
                 start++;
                 end--;
             }
-            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`);
+            str.overwrite(scriptTag.start + 1, start - 1, `${templateComment}${hasTopLevelAwait ? 'async ' : ''}function ${internalHelpers.renderName}`);
+            if (useTypescriptSyntax) {
+                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(start - 1, start, '');
+                str.overwrite(start, end, '');
+                str.overwrite(end, scriptTagEnd, `() {${propsDecl}\n`);
+            }
         }
         else {
-            str.overwrite(scriptTag.start + 1, scriptTagEnd, `${hasTopLevelAwait ? 'async ' : ''}function ${internalHelpers.renderName}${generics.toDefinitionString(true)}() {${propsDecl}\n`);
+            str.overwrite(scriptTag.start + 1, scriptTagEnd, `${templateComment}${hasTopLevelAwait ? 'async ' : ''}function ${internalHelpers.renderName}${useTypescriptSyntax ? generics.toDefinitionString(true) : ''}() {${propsDecl}\n`);
         }
         const scriptEndTagStart = htmlx.lastIndexOf('<', scriptTag.end - 1);
         // wrap template with callback
@@ -6015,7 +6096,7 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
         });
     }
     else {
-        str.prependRight(scriptDestination, `;${hasTopLevelAwait ? 'async ' : ''}function ${internalHelpers.renderName}() {` +
+        str.prependRight(scriptDestination, `;${templateComment}${hasTopLevelAwait ? 'async ' : ''}function ${internalHelpers.renderName}${useTypescriptSyntax ? generics.toDefinitionString(true) : ''}() {` +
             `${propsDecl}${slotsDeclaration}\nasync () => {`);
     }
     const slotsAsDef = uses$$SlotsInterface
@@ -6296,6 +6377,11 @@ class HoistableInterfaces {
             }
         }
     }
+    addDisallowed(names) {
+        for (const name of names) {
+            this.disallowed_values.add(name);
+        }
+    }
     /**
      * Traverses the AST to collect import statements and top-level interfaces,
      * then determines which interfaces can be hoisted.
@@ -6435,13 +6521,14 @@ function is$$PropsDeclaration(node) {
     return isInterfaceOrTypeDeclaration(node) && node.name.text === '$$Props';
 }
 class ExportedNames {
-    constructor(str, astOffset, basename, isTsFile, isSvelte5Plus, isRunes) {
+    constructor(str, astOffset, basename, isTsFile, isSvelte5Plus, isRunes, emitJsDoc) {
         this.str = str;
         this.astOffset = astOffset;
         this.basename = basename;
         this.isTsFile = isTsFile;
         this.isSvelte5Plus = isSvelte5Plus;
         this.isRunes = isRunes;
+        this.emitJsDoc = emitJsDoc;
         this.hoistableInterfaces = new HoistableInterfaces();
         this.usesAccessors = false;
         /**
@@ -6469,6 +6556,22 @@ class ExportedNames {
         this.doneDeclarationTransformation = new Set();
         this.getters = new Set();
     }
+    /**
+     * Emits a Kit type annotation (e.g. `: import('./$types.js').PageData`) either as a
+     * JSDoc @type comment (for JS files in emitJsDoc mode) or as a TS type annotation
+     * wrapped in ignore comments.
+     */
+    emitKitType(kitType, nameStart, nameEnd) {
+        if (!kitType)
+            return;
+        if (this.emitJsDoc && !this.isTsFile) {
+            const kitTypeRef = kitType.slice(2); // strip leading ": "
+            preprendStr(this.str, nameStart, `/** @type {${kitTypeRef}} */ `);
+        }
+        else {
+            preprendStr(this.str, nameEnd, surroundWithIgnoreComments(kitType));
+        }
+    }
     handleVariableStatement(node, parent) {
         const exportModifier = findExportKeyword(node);
         if (exportModifier) {
@@ -6487,10 +6590,7 @@ class ExportedNames {
                             n.name.getText() === 'snapshot';
                         // TS types are not allowed in JS files, but TS will still pick it up and the ignore comment will filter out the error
                         const kitType = isKitExport && !type ? `: import('./$types.js').Snapshot` : '';
-                        const nameEnd = n.name.end + this.astOffset;
-                        if (kitType) {
-                            preprendStr(this.str, nameEnd, surroundWithIgnoreComments(kitType));
-                        }
+                        this.emitKitType(kitType, n.name.getStart() + this.astOffset, n.name.end + this.astOffset);
                     }
                 });
             }
@@ -6774,17 +6874,20 @@ class ExportedNames {
                         [ts.SyntaxKind.FalseKeyword, ts.SyntaxKind.TrueKeyword].includes(declaration.initializer.kind)))) {
                 const name = identifier.getText();
                 if (nameEnd === end) {
-                    preprendStr(this.str, end, surroundWithIgnoreComments(`${kitType};${name} = __sveltets_2_any(${name});`));
+                    if (kitType && this.emitJsDoc && !this.isTsFile) {
+                        const kitTypeRef = kitType.slice(2);
+                        const nameStart = identifier.getStart() + this.astOffset;
+                        preprendStr(this.str, nameStart, `/** @type {${kitTypeRef}} */ `);
+                    }
+                    preprendStr(this.str, end, surroundWithIgnoreComments(`${(this.isTsFile || !this.emitJsDoc) && kitType ? kitType : ''};${name} = __sveltets_2_any(${name});`));
                 }
                 else {
-                    if (kitType) {
-                        preprendStr(this.str, nameEnd, surroundWithIgnoreComments(kitType));
-                    }
+                    this.emitKitType(kitType, identifier.getStart() + this.astOffset, nameEnd);
                     preprendStr(this.str, end, surroundWithIgnoreComments(`;${name} = __sveltets_2_any(${name});`));
                 }
             }
-            else if (kitType) {
-                preprendStr(this.str, nameEnd, surroundWithIgnoreComments(kitType));
+            else {
+                this.emitKitType(kitType, identifier.getStart() + this.astOffset, nameEnd);
             }
         };
         const findComma = (target) => target.getChildren().filter((child) => child.kind === ts.SyntaxKind.CommaToken);
@@ -7563,12 +7666,12 @@ class InterfacesAndTypes {
     }
 }
 
-function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, moduleAst, isTSFile, basename, isSvelte5Plus, isRunes) {
+function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, moduleAst, isTSFile, basename, isSvelte5Plus, isRunes, emitJsDoc) {
     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, isRunes);
+    const exportedNames = new ExportedNames(str, astOffset, basename, isTSFile, isSvelte5Plus, isRunes, emitJsDoc);
     const generics = new Generics(str, astOffset, script);
     const interfacesAndTypes = new InterfacesAndTypes();
     if (moduleAst) {
@@ -7801,6 +7904,7 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
     for (const node of nodesToMove) {
         moveNode(node, str, astOffset, script.start, tsAst);
     }
+    exportedNames.hoistableInterfaces.addDisallowed(implicitStoreValues.getAccessedStores());
     const hoisted = exportedNames.hoistableInterfaces.moveHoistableInterfaces(str, astOffset, script.start + 1, // +1 because imports are also moved at that position, and we want to move interfaces after imports
     generics.getReferences());
     if (mode === 'dts') {
@@ -7924,12 +8028,14 @@ function processSvelteTemplate(str, parse, options) {
     return convertHtmlxToJsx(str, htmlxAst, tags, options);
 }
 function svelte2tsx(svelte, options = { parse }) {
+    var _a;
     options.mode = options.mode || 'ts';
     options.version = options.version || VERSION;
     const str = new MagicString(svelte);
     const basename = path__default.basename(options.filename || '');
     const svelte5Plus = Number(options.version[0]) > 4;
     const isTsFile = options === null || options === void 0 ? void 0 : options.isTsFile;
+    const emitJsDoc = (_a = options === null || options === void 0 ? void 0 : options.emitJsDoc) !== null && _a !== void 0 ? _a : false;
     // process the htmlx as a svelte template
     let { htmlAst, moduleScriptTag, scriptTag, rootSnippets, slots, uses$$props, uses$$slots, uses$$restProps, events, componentDocumentation, resolvedStores, usesAccessors, isRunes } = processSvelteTemplate(str, options.parse || parse, {
         ...options,
@@ -7958,7 +8064,7 @@ function svelte2tsx(svelte, options = { parse }) {
         : instanceScriptTarget;
     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 exportedNames = new ExportedNames(str, 0, basename, isTsFile, svelte5Plus, isRunes, emitJsDoc);
     let generics = new Generics(str, 0, { attributes: [] });
     let uses$$SlotsInterface = false;
     let hasTopLevelAwait = false;
@@ -7967,7 +8073,7 @@ function svelte2tsx(svelte, options = { parse }) {
         if (scriptTag.start != instanceScriptTarget) {
             str.move(scriptTag.start, scriptTag.end, instanceScriptTarget);
         }
-        const res = processInstanceScriptContent(str, scriptTag, events, implicitStoreValues, options.mode, moduleAst, isTsFile, basename, svelte5Plus, isRunes);
+        const res = processInstanceScriptContent(str, scriptTag, events, implicitStoreValues, options.mode, moduleAst, isTsFile, basename, svelte5Plus, isRunes, emitJsDoc);
         uses$$props = uses$$props || res.uses$$props;
         uses$$restProps = uses$$restProps || res.uses$$restProps;
         uses$$slots = uses$$slots || res.uses$$slots;
@@ -7996,7 +8102,8 @@ function svelte2tsx(svelte, options = { parse }) {
         hasTopLevelAwait,
         svelte5Plus,
         isTsFile,
-        mode: options.mode
+        mode: options.mode,
+        emitJsDoc
     });
     // we need to process the module script after the instance script has moved otherwise we get warnings about moving edited items
     if (moduleScriptTag) {
@@ -8049,7 +8156,8 @@ function svelte2tsx(svelte, options = { parse }) {
         generics,
         isSvelte5: svelte5Plus,
         hasTopLevelAwait,
-        noSvelteComponentTyped: options.noSvelteComponentTyped
+        noSvelteComponentTyped: options.noSvelteComponentTyped,
+        emitJsDoc
     });
     if (options.mode === 'dts') {
         // Prepend the import which is used for TS files

package/package.json

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