npm - svelte2tsx - Versions diffs - 0.7.7 → 0.7.9 - Mend

svelte2tsx 0.7.7 → 0.7.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/index.js CHANGED Viewed

@@ -2686,18 +2686,12 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus)
     const value = isShorthand
         ? preserveBind && element instanceof Element
             ? [rangeWithTrailingPropertyAccess(str.original, attr.expression)]
-            : isSvelte5Plus
-                ? [
-                    `__sveltets_2_binding(${str.original.substring(attr.expression.start, attr.expression.end)})`
-                ]
-                : undefined
-        : element instanceof Element || !isSvelte5Plus
-            ? [rangeWithTrailingPropertyAccess(str.original, attr.expression)]
-            : [
-                '__sveltets_2_binding(',
-                rangeWithTrailingPropertyAccess(str.original, attr.expression),
-                ')'
-            ];
+            : undefined
+        : [rangeWithTrailingPropertyAccess(str.original, attr.expression)];
+    if (isSvelte5Plus && element instanceof InlineComponent) {
+        // To check if property is actually bindable
+        element.appendToStartEnd([`${element.name}.$$bindings = '${attr.name}';`]);
+    }
     if (element instanceof Element) {
         element.addAttribute(name, value);
     }
@@ -3131,10 +3125,13 @@ function handleSnippet(str, snippetBlock, component) {
         let generic = '';
         if ((_e = snippetBlock.parameters) === null || _e === void 0 ? void 0 : _e.length) {
             generic = `<[${snippetBlock.parameters
-                .map((p) => p.typeAnnotation
-                ? str.original.slice(p.typeAnnotation.start + 1, p.typeAnnotation.end)
-                : // slap any on to it to silence "implicit any" errors; JSDoc people can't add types to snippets
-                    'any')
+                .map((p) => {
+                var _a;
+                return ((_a = p.typeAnnotation) === null || _a === void 0 ? void 0 : _a.typeAnnotation)
+                    ? str.original.slice(p.typeAnnotation.typeAnnotation.start, p.typeAnnotation.typeAnnotation.end)
+                    : // slap any on to it to silence "implicit any" errors; JSDoc people can't add types to snippets
+                        'any';
+            })
                 .join(', ')}]>`;
         }
         const typeAnnotation = surroundWithIgnoreComments(`: import('svelte').Snippet${generic}`);
@@ -4384,11 +4381,13 @@ function is$$PropsDeclaration(node) {
     return isInterfaceOrTypeDeclaration(node) && node.name.text === '$$Props';
 }
 class ExportedNames {
-    constructor(str, astOffset, basename, isTsFile) {
+    constructor(str, astOffset, basename, isTsFile, isSvelte5Plus) {
         this.str = str;
         this.astOffset = astOffset;
         this.basename = basename;
         this.isTsFile = isTsFile;
+        this.isSvelte5Plus = isSvelte5Plus;
+        this.usesAccessors = false;
         /**
          * Uses the `$$Props` type
          */
@@ -4491,7 +4490,12 @@ class ExportedNames {
                         ? element.propertyName.text
                         : element.name.text;
                     if (element.initializer) {
-                        const call = element.initializer;
+                        let call = element.initializer;
+                        // if it's an as expression we need to check wether the as
+                        // expression expression is a call
+                        if (ts.isAsExpression(call)) {
+                            call = call.expression;
+                        }
                         if (ts.isCallExpression(call) && ts.isIdentifier(call.expression)) {
                             if (call.expression.text === '$bindable') {
                                 this.$props.bindings.push(name);
@@ -4514,7 +4518,9 @@ class ExportedNames {
                 preprendStr(this.str, generic_arg.pos + this.astOffset, `;type ${this.$props.type} = `);
                 this.str.appendLeft(generic_arg.end + this.astOffset, ';');
                 this.str.move(generic_arg.pos + this.astOffset, generic_arg.end + this.astOffset, node.parent.pos + this.astOffset);
-                this.str.appendRight(generic_arg.end + this.astOffset, this.$props.type);
+                this.str.appendRight(generic_arg.end + this.astOffset,
+                // so that semantic tokens ignore it, preventing an overlap of tokens
+                surroundWithIgnoreComments(this.$props.type));
             }
         }
         else {
@@ -4859,38 +4865,13 @@ class ExportedNames {
      */
     createPropsStr(uses$$propsOr$$restProps) {
         const names = Array.from(this.exports.entries());
-        if (this.$props.type) {
-            return ('{} as any as ' +
-                (this.$props.bindings.length
-                    ? `__sveltets_2_Bindings<${this.$props.type}, ${this.$props.bindings.map((b) => `"${b}"`).join('|')}>`
-                    : this.$props.type));
-        }
-        if (this.$props.comment) {
-            let result = this.$props.comment + '({})';
-            // Try our best to incorporate __sveltets_2_Bindings here
-            let idx = this.$props.comment.indexOf('@type');
-            if (idx !== -1 && /[\s{]/.test(this.$props.comment[idx + 5])) {
-                idx = this.$props.comment.indexOf('{', idx);
-                const end = this.$props.comment.lastIndexOf('}');
-                if (idx !== -1 && end !== -1 && idx < end) {
-                    const has_bindings = this.$props.bindings.length;
-                    if (has_bindings) {
-                        idx++;
-                        result =
-                            this.$props.comment.slice(0, idx) +
-                                (has_bindings ? '__sveltets_2_Bindings<' : '') +
-                                this.$props.comment.slice(idx, end) +
-                                (has_bindings
-                                    ? `, ${this.$props.bindings.map((b) => `"${b}"`).join('|')}>`
-                                    : '') +
-                                this.$props.comment.slice(end) +
-                                '({})';
-                    }
-                }
-            }
-            return result;
-        }
         if (this.usesRunes()) {
+            if (this.$props.type) {
+                return '{} as any as ' + this.$props.type;
+            }
+            if (this.$props.comment) {
+                return this.$props.comment + '({})';
+            }
             // Necessary, because {} roughly equals to any
             return this.isTsFile
                 ? '{} as Record<string, never>'
@@ -4931,22 +4912,48 @@ class ExportedNames {
         const returnElementsType = this.createReturnElementsType(names);
         return `{${returnElements.join(' , ')}} as {${returnElementsType.join(', ')}}`;
     }
+    hasNoProps() {
+        if (this.usesRunes()) {
+            return !this.$props.type && !this.$props.comment;
+        }
+        const names = Array.from(this.exports.entries());
+        return names.length === 0;
+    }
+    createBindingsStr() {
+        if (this.usesRunes()) {
+            // will be just the empty strings for zero bindings, which is impossible to create a binding for, so it works out fine
+            return `__sveltets_$$bindings('${this.$props.bindings.join("', '")}')`;
+        }
+        else {
+            return '""';
+        }
+    }
     /**
      * In runes mode, exports are no longer part of props because you cannot `bind:` to them,
-     * which is why we need a separate return type for them.
+     * which is why we need a separate return type for them. In Svelte 5, the isomorphic component
+     * needs them separate, too.
      */
     createExportsStr() {
         const names = Array.from(this.exports.entries());
         const others = names.filter(([, { isLet }]) => !isLet);
-        if (this.usesRunes() && others.length > 0) {
-            if (this.isTsFile) {
-                return (', exports: {} as any as { ' +
-                    this.createReturnElementsType(others, undefined, true).join(',') +
-                    ' }');
+        const needsAccessors = this.usesAccessors && names.length > 0 && !this.usesRunes(); // runes mode doesn't support accessors
+        if (this.isSvelte5Plus && (others.length > 0 || this.usesRunes() || needsAccessors)) {
+            let str = '';
+            if (others.length > 0 || needsAccessors) {
+                if (this.isTsFile) {
+                    str +=
+                        ', exports: {} as any as { ' +
+                            this.createReturnElementsType(needsAccessors ? names : others, undefined, true).join(',') +
+                            ' }';
+                }
+                else {
+                    str += `, exports: /** @type {{${this.createReturnElementsType(needsAccessors ? names : others, false, true)}}} */ ({})`;
+                }
             }
-            else {
-                return `, exports: /** @type {${this.createReturnElementsType(others, false, true)}} */ ({})`;
+            if (this.usesRunes()) {
+                str += `, bindings: ${this.createBindingsStr()}`;
             }
+            return str;
         }
         return '';
     }
@@ -4978,12 +4985,17 @@ class ExportedNames {
     getExportsMap() {
         return this.exports;
     }
+    hasExports() {
+        const names = Array.from(this.exports.entries());
+        return this.usesAccessors ? names.length > 0 : names.some(([, { isLet }]) => !isLet);
+    }
     hasPropsRune() {
-        return this.$props.type || this.$props.comment;
+        return this.isSvelte5Plus && (this.$props.type || this.$props.comment);
     }
     checkGlobalsForRunes(globals) {
         const runes = ['$state', '$derived', '$effect']; // no need to check for props, already handled through other means in here
-        this.hasRunesGlobals = globals.some((global) => runes.includes(global));
+        this.hasRunesGlobals =
+            this.isSvelte5Plus && globals.some((global) => runes.includes(global));
     }
     usesRunes() {
         return this.hasRunesGlobals || this.hasPropsRune();
@@ -5860,6 +5872,9 @@ class Generics {
     toReferencesString() {
         return this.references.length ? `<${this.references.join(',')}>` : '';
     }
+    toReferencesAnyString() {
+        return this.references.length ? `<${this.references.map(() => 'any').join(',')}>` : '';
+    }
     has() {
         return this.definitions.length > 0;
     }
@@ -5940,12 +5955,12 @@ class InterfacesAndTypes {
     }
 }
-function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, hasModuleScript, isTSFile, basename) {
+function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, hasModuleScript, isTSFile, basename, isSvelte5Plus) {
     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);
+    const exportedNames = new ExportedNames(str, astOffset, basename, isTSFile, isSvelte5Plus);
     const generics = new Generics(str, astOffset, script);
     const interfacesAndTypes = new InterfacesAndTypes();
     const implicitTopLevelNames = new ImplicitTopLevelNames(str, astOffset);
@@ -6254,7 +6269,7 @@ function addComponentExport(params) {
         addSimpleComponentExport(params);
     }
 }
-function addGenericsComponentExport({ strictEvents, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, generics, noSvelteComponentTyped }) {
+function addGenericsComponentExport({ strictEvents, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, generics, usesSlots, isSvelte5, noSvelteComponentTyped }) {
     const genericsDef = generics.toDefinitionString();
     const genericsRef = generics.toReferencesString();
     const doc = componentDocumentation.getFormatted();
@@ -6273,7 +6288,11 @@ class __sveltets_Render${genericsDef} {
     slots() {
         return render${genericsRef}().slots;
     }
-}
+${isSvelte5
+        ? `    bindings() { return ${exportedNames.createBindingsStr()}; }
+    exports() { return ${exportedNames.hasExports() ? `render${genericsRef}().exports` : '{}'}; }
+}`
+        : '}'}
 `;
     const svelteComponentClass = noSvelteComponentTyped
         ? 'SvelteComponent'
@@ -6281,21 +6300,28 @@ class __sveltets_Render${genericsDef} {
     const [PropsName] = addTypeExport(str, className, 'Props');
     const [EventsName] = addTypeExport(str, className, 'Events');
     const [SlotsName] = addTypeExport(str, className, 'Slots');
-    /**
-     * In Svelte 5 runes mode we add a custom constructor to override the default one which implicitly makes all properties bindable.
-     * Remove this once Svelte typings no longer do that (Svelte 6 or 7)
-     */
-    let customConstructor = '';
-    if (exportedNames.hasPropsRune()) {
-        customConstructor = `\n    constructor(options: import('svelte').ComponentConstructorOptions<__sveltets_2_PropsWithChildren<${returnType('props')}, ${returnType('slots')}>>) { super(options); }`;
-    }
-    if (mode === 'dts') {
+    if (isSvelte5) {
+        // Don't add props/events/slots type exports in dts mode for now, maybe someone asks for it to be back,
+        // but it's safer to not do it for now to have more flexibility in the future.
+        const propsType = !canHaveAnyProp && exportedNames.hasNoProps()
+            ? `{$$events?: ${returnType('events')}${usesSlots ? `, $$slots?: ${returnType('slots')}, children?: any` : ''}}`
+            : `${returnType('props')} & {$$events?: ${returnType('events')}${usesSlots ? `, $$slots?: ${returnType('slots')}, children?: any` : ''}}`;
+        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?: ReturnType<__sveltets_Render${generics.toReferencesAnyString()}['bindings']>;\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 if (mode === 'dts') {
         statement +=
             `export type ${PropsName}${genericsDef} = ${returnType('props')};\n` +
                 `export type ${EventsName}${genericsDef} = ${returnType('events')};\n` +
                 `export type ${SlotsName}${genericsDef} = ${returnType('slots')};\n` +
                 `\n${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends ${svelteComponentClass}<${PropsName}${genericsRef}, ${EventsName}${genericsRef}, ${SlotsName}${genericsRef}> {` +
-                customConstructor +
                 exportedNames.createClassGetters(genericsRef) +
                 (usesAccessors ? exportedNames.createClassAccessors() : '') +
                 '\n}';
@@ -6304,63 +6330,87 @@ class __sveltets_Render${genericsDef} {
         statement +=
             `\n\nimport { ${svelteComponentClass} as __SvelteComponentTyped__ } from "svelte" \n` +
                 `${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends __SvelteComponentTyped__<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> {` +
-                customConstructor +
                 exportedNames.createClassGetters(genericsRef) +
                 (usesAccessors ? exportedNames.createClassAccessors() : '') +
                 '\n}';
     }
     str.append(statement);
 }
-function addSimpleComponentExport({ strictEvents, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, noSvelteComponentTyped }) {
+function addSimpleComponentExport({ strictEvents, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, usesSlots, noSvelteComponentTyped, isSvelte5 }) {
     const propDef = props(isTsFile, canHaveAnyProp, exportedNames, events(strictEvents, 'render()'));
     const doc = componentDocumentation.getFormatted();
     const className = fileName && classNameFromFilename(fileName, mode !== 'dts');
-    /**
-     * In Svelte 5 runes mode we add a custom constructor to override the default one which implicitly makes all properties bindable.
-     * Remove this once Svelte typings no longer do that (Svelte 6 or 7)
-     */
-    let customConstructor = '';
-    if (exportedNames.hasPropsRune()) {
-        customConstructor = `\n    constructor(options = __sveltets_2_runes_constructor(${propDef})) { super(options); }`;
-    }
     let statement;
-    if (mode === 'dts' && isTsFile) {
-        const svelteComponentClass = noSvelteComponentTyped
-            ? 'SvelteComponent'
-            : 'SvelteComponentTyped';
-        const [PropsName, PropsExport] = addTypeExport(str, className, 'Props');
-        const [EventsName, EventsExport] = addTypeExport(str, className, 'Events');
-        const [SlotsName, SlotsExport] = addTypeExport(str, className, 'Slots');
-        statement =
-            `\nconst __propDef = ${propDef};\n` +
-                PropsExport +
-                EventsExport +
-                SlotsExport +
-                `\n${doc}export default class${className ? ` ${className}` : ''} extends ${svelteComponentClass}<${PropsName}, ${EventsName}, ${SlotsName}> {` +
-                customConstructor +
-                exportedNames.createClassGetters() +
-                (usesAccessors ? exportedNames.createClassAccessors() : '') +
-                '\n}';
-    }
-    else if (mode === 'dts' && !isTsFile) {
-        statement =
-            `\nconst __propDef = ${propDef};\n` +
-                `/** @typedef {typeof __propDef.props}  ${className}Props */\n` +
-                `/** @typedef {typeof __propDef.events}  ${className}Events */\n` +
-                `/** @typedef {typeof __propDef.slots}  ${className}Slots */\n` +
-                `\n${doc}export default class${className ? ` ${className}` : ''} extends __sveltets_2_createSvelte2TsxComponent(${propDef}) {` +
-                customConstructor +
-                exportedNames.createClassGetters() +
-                (usesAccessors ? exportedNames.createClassAccessors() : '') +
-                '\n}';
+    if (mode === 'dts') {
+        if (isSvelte5) {
+            // Inline definitions from Svelte shims; else dts files will reference the globals which will be unresolved
+            statement =
+                `\ninterface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & { $$bindings?: Bindings } & Exports;
+    (internal: unknown, props: ${!canHaveAnyProp && exportedNames.hasNoProps() ? '{$$events?: Events, $$slots?: Slots}' : 'Props & {$$events?: Events, $$slots?: Slots}'}): Exports;
+    z_$$bindings?: Bindings;
+}\n` +
+                    (usesSlots
+                        ? `type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props &
+    (Slots extends { default: any }
+        ? Props extends Record<string, never>
+        ? any
+        : { children?: any }
+        : {});
+        declare function $$__sveltets_2_isomorphic_component_slots<
+            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<$$__sveltets_2_PropsWithChildren<Props, Slots>, Events, Slots, Exports, Bindings>;\n`
+                        : `
+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'};`;
+        }
+        else if (isTsFile) {
+            const svelteComponentClass = noSvelteComponentTyped
+                ? 'SvelteComponent'
+                : 'SvelteComponentTyped';
+            const [PropsName, PropsExport] = addTypeExport(str, className, 'Props');
+            const [EventsName, EventsExport] = addTypeExport(str, className, 'Events');
+            const [SlotsName, SlotsExport] = addTypeExport(str, className, 'Slots');
+            statement =
+                `\nconst __propDef = ${propDef};\n` +
+                    PropsExport +
+                    EventsExport +
+                    SlotsExport +
+                    `\n${doc}export default class${className ? ` ${className}` : ''} extends ${svelteComponentClass}<${PropsName}, ${EventsName}, ${SlotsName}> {` +
+                    exportedNames.createClassGetters() +
+                    (usesAccessors ? exportedNames.createClassAccessors() : '') +
+                    '\n}';
+        }
+        else {
+            statement =
+                `\nconst __propDef = ${propDef};\n` +
+                    `/** @typedef {typeof __propDef.props}  ${className}Props */\n` +
+                    `/** @typedef {typeof __propDef.events}  ${className}Events */\n` +
+                    `/** @typedef {typeof __propDef.slots}  ${className}Slots */\n` +
+                    `\n${doc}export default class${className ? ` ${className}` : ''} extends __sveltets_2_createSvelte2TsxComponent(${propDef}) {` +
+                    exportedNames.createClassGetters() +
+                    (usesAccessors ? exportedNames.createClassAccessors() : '') +
+                    '\n}';
+        }
     }
     else {
-        statement =
-            `\n\n${doc}export default class${className ? ` ${className}` : ''} extends __sveltets_2_createSvelte2TsxComponent(${propDef}) {` +
-                customConstructor +
-                exportedNames.createClassGetters() +
-                (usesAccessors ? exportedNames.createClassAccessors() : '') +
-                '\n}';
+        if (isSvelte5) {
+            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'};`;
+        }
+        else {
+            statement =
+                `\n\n${doc}export default class${className ? ` ${className}` : ''} extends __sveltets_2_createSvelte2TsxComponent(${propDef}) {` +
+                    exportedNames.createClassGetters() +
+                    (usesAccessors ? exportedNames.createClassAccessors() : '') +
+                    '\n}';
+        }
     }
     str.append(statement);
 }
@@ -6396,7 +6446,10 @@ function events(strictEvents, renderStr) {
     return strictEvents ? renderStr : `__sveltets_2_with_any_event(${renderStr})`;
 }
 function props(isTsFile, canHaveAnyProp, exportedNames, renderStr) {
-    if (isTsFile) {
+    if (exportedNames.usesRunes()) {
+        return renderStr;
+    }
+    else if (isTsFile) {
         return canHaveAnyProp ? `__sveltets_2_with_any(${renderStr})` : renderStr;
     }
     else {
@@ -6757,7 +6810,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);
+    let exportedNames = new ExportedNames(str, 0, basename, options === null || options === void 0 ? void 0 : options.isTsFile, svelte5Plus);
     let generics = new Generics(str, 0, { attributes: [] });
     let uses$$SlotsInterface = false;
     if (scriptTag) {
@@ -6766,12 +6819,13 @@ 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);
+        /**hasModuleScripts */ !!moduleScriptTag, options === null || options === void 0 ? void 0 : options.isTsFile, basename, svelte5Plus);
         uses$$props = uses$$props || res.uses$$props;
         uses$$restProps = uses$$restProps || res.uses$$restProps;
         uses$$slots = uses$$slots || res.uses$$slots;
         ({ exportedNames, events, generics, uses$$SlotsInterface } = res);
     }
+    exportedNames.usesAccessors = usesAccessors;
     if (svelte5Plus) {
         exportedNames.checkGlobalsForRunes(implicitStoreValues.getGlobals());
     }
@@ -6799,14 +6853,16 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
     addComponentExport({
         str,
         canHaveAnyProp: !exportedNames.uses$$Props && (uses$$props || uses$$restProps),
-        strictEvents: events.hasStrictEvents(),
+        strictEvents: events.hasStrictEvents(), // TODO in Svelte 6 we should also apply strictEvents in runes mode
         isTsFile: options === null || options === void 0 ? void 0 : options.isTsFile,
         exportedNames,
         usesAccessors,
+        usesSlots: slots.size > 0,
         fileName: options === null || options === void 0 ? void 0 : options.filename,
         componentDocumentation,
         mode: options.mode,
         generics,
+        isSvelte5: svelte5Plus,
         noSvelteComponentTyped: options.noSvelteComponentTyped
     });
     if (options.mode === 'dts') {
@@ -7024,6 +7080,11 @@ async function createTsCompilerHost(options, svelteMap) {
  */
 async function createSvelteMap(config) {
     const svelteFiles = new Map();
+    // TODO detect Svelte version in here and set shimsPath accordingly if not given from above
+    const noSvelteComponentTyped = config.svelteShimsPath
+        .replace(/\\/g, '/')
+        .endsWith('svelte2tsx/svelte-shims-v4.d.ts');
+    const version = noSvelteComponentTyped ? undefined : '3.42.0';
     function add(path) {
         const code = ts.sys.readFile(path, 'utf-8');
         const isTsFile = /<script\s+[^>]*?lang=('|")(ts|typescript)('|")/.test(code);
@@ -7031,9 +7092,8 @@ async function createSvelteMap(config) {
             filename: path,
             isTsFile,
             mode: 'dts',
-            noSvelteComponentTyped: config.svelteShimsPath
-                .replace(/\\/g, '/')
-                .endsWith('svelte2tsx/svelte-shims-v4.d.ts')
+            version,
+            noSvelteComponentTyped: noSvelteComponentTyped
         }).code;
         svelteFiles.set(path, transformed);
         return isTsFile;

package/index.mjs CHANGED Viewed

@@ -2666,18 +2666,12 @@ function handleBinding(str, attr, parent, element, preserveBind, isSvelte5Plus)
     const value = isShorthand
         ? preserveBind && element instanceof Element
             ? [rangeWithTrailingPropertyAccess(str.original, attr.expression)]
-            : isSvelte5Plus
-                ? [
-                    `__sveltets_2_binding(${str.original.substring(attr.expression.start, attr.expression.end)})`
-                ]
-                : undefined
-        : element instanceof Element || !isSvelte5Plus
-            ? [rangeWithTrailingPropertyAccess(str.original, attr.expression)]
-            : [
-                '__sveltets_2_binding(',
-                rangeWithTrailingPropertyAccess(str.original, attr.expression),
-                ')'
-            ];
+            : undefined
+        : [rangeWithTrailingPropertyAccess(str.original, attr.expression)];
+    if (isSvelte5Plus && element instanceof InlineComponent) {
+        // To check if property is actually bindable
+        element.appendToStartEnd([`${element.name}.$$bindings = '${attr.name}';`]);
+    }
     if (element instanceof Element) {
         element.addAttribute(name, value);
     }
@@ -3111,10 +3105,13 @@ function handleSnippet(str, snippetBlock, component) {
         let generic = '';
         if ((_e = snippetBlock.parameters) === null || _e === void 0 ? void 0 : _e.length) {
             generic = `<[${snippetBlock.parameters
-                .map((p) => p.typeAnnotation
-                ? str.original.slice(p.typeAnnotation.start + 1, p.typeAnnotation.end)
-                : // slap any on to it to silence "implicit any" errors; JSDoc people can't add types to snippets
-                    'any')
+                .map((p) => {
+                var _a;
+                return ((_a = p.typeAnnotation) === null || _a === void 0 ? void 0 : _a.typeAnnotation)
+                    ? str.original.slice(p.typeAnnotation.typeAnnotation.start, p.typeAnnotation.typeAnnotation.end)
+                    : // slap any on to it to silence "implicit any" errors; JSDoc people can't add types to snippets
+                        'any';
+            })
                 .join(', ')}]>`;
         }
         const typeAnnotation = surroundWithIgnoreComments(`: import('svelte').Snippet${generic}`);
@@ -4364,11 +4361,13 @@ function is$$PropsDeclaration(node) {
     return isInterfaceOrTypeDeclaration(node) && node.name.text === '$$Props';
 }
 class ExportedNames {
-    constructor(str, astOffset, basename, isTsFile) {
+    constructor(str, astOffset, basename, isTsFile, isSvelte5Plus) {
         this.str = str;
         this.astOffset = astOffset;
         this.basename = basename;
         this.isTsFile = isTsFile;
+        this.isSvelte5Plus = isSvelte5Plus;
+        this.usesAccessors = false;
         /**
          * Uses the `$$Props` type
          */
@@ -4471,7 +4470,12 @@ class ExportedNames {
                         ? element.propertyName.text
                         : element.name.text;
                     if (element.initializer) {
-                        const call = element.initializer;
+                        let call = element.initializer;
+                        // if it's an as expression we need to check wether the as
+                        // expression expression is a call
+                        if (ts.isAsExpression(call)) {
+                            call = call.expression;
+                        }
                         if (ts.isCallExpression(call) && ts.isIdentifier(call.expression)) {
                             if (call.expression.text === '$bindable') {
                                 this.$props.bindings.push(name);
@@ -4494,7 +4498,9 @@ class ExportedNames {
                 preprendStr(this.str, generic_arg.pos + this.astOffset, `;type ${this.$props.type} = `);
                 this.str.appendLeft(generic_arg.end + this.astOffset, ';');
                 this.str.move(generic_arg.pos + this.astOffset, generic_arg.end + this.astOffset, node.parent.pos + this.astOffset);
-                this.str.appendRight(generic_arg.end + this.astOffset, this.$props.type);
+                this.str.appendRight(generic_arg.end + this.astOffset,
+                // so that semantic tokens ignore it, preventing an overlap of tokens
+                surroundWithIgnoreComments(this.$props.type));
             }
         }
         else {
@@ -4839,38 +4845,13 @@ class ExportedNames {
      */
     createPropsStr(uses$$propsOr$$restProps) {
         const names = Array.from(this.exports.entries());
-        if (this.$props.type) {
-            return ('{} as any as ' +
-                (this.$props.bindings.length
-                    ? `__sveltets_2_Bindings<${this.$props.type}, ${this.$props.bindings.map((b) => `"${b}"`).join('|')}>`
-                    : this.$props.type));
-        }
-        if (this.$props.comment) {
-            let result = this.$props.comment + '({})';
-            // Try our best to incorporate __sveltets_2_Bindings here
-            let idx = this.$props.comment.indexOf('@type');
-            if (idx !== -1 && /[\s{]/.test(this.$props.comment[idx + 5])) {
-                idx = this.$props.comment.indexOf('{', idx);
-                const end = this.$props.comment.lastIndexOf('}');
-                if (idx !== -1 && end !== -1 && idx < end) {
-                    const has_bindings = this.$props.bindings.length;
-                    if (has_bindings) {
-                        idx++;
-                        result =
-                            this.$props.comment.slice(0, idx) +
-                                (has_bindings ? '__sveltets_2_Bindings<' : '') +
-                                this.$props.comment.slice(idx, end) +
-                                (has_bindings
-                                    ? `, ${this.$props.bindings.map((b) => `"${b}"`).join('|')}>`
-                                    : '') +
-                                this.$props.comment.slice(end) +
-                                '({})';
-                    }
-                }
-            }
-            return result;
-        }
         if (this.usesRunes()) {
+            if (this.$props.type) {
+                return '{} as any as ' + this.$props.type;
+            }
+            if (this.$props.comment) {
+                return this.$props.comment + '({})';
+            }
             // Necessary, because {} roughly equals to any
             return this.isTsFile
                 ? '{} as Record<string, never>'
@@ -4911,22 +4892,48 @@ class ExportedNames {
         const returnElementsType = this.createReturnElementsType(names);
         return `{${returnElements.join(' , ')}} as {${returnElementsType.join(', ')}}`;
     }
+    hasNoProps() {
+        if (this.usesRunes()) {
+            return !this.$props.type && !this.$props.comment;
+        }
+        const names = Array.from(this.exports.entries());
+        return names.length === 0;
+    }
+    createBindingsStr() {
+        if (this.usesRunes()) {
+            // will be just the empty strings for zero bindings, which is impossible to create a binding for, so it works out fine
+            return `__sveltets_$$bindings('${this.$props.bindings.join("', '")}')`;
+        }
+        else {
+            return '""';
+        }
+    }
     /**
      * In runes mode, exports are no longer part of props because you cannot `bind:` to them,
-     * which is why we need a separate return type for them.
+     * which is why we need a separate return type for them. In Svelte 5, the isomorphic component
+     * needs them separate, too.
      */
     createExportsStr() {
         const names = Array.from(this.exports.entries());
         const others = names.filter(([, { isLet }]) => !isLet);
-        if (this.usesRunes() && others.length > 0) {
-            if (this.isTsFile) {
-                return (', exports: {} as any as { ' +
-                    this.createReturnElementsType(others, undefined, true).join(',') +
-                    ' }');
+        const needsAccessors = this.usesAccessors && names.length > 0 && !this.usesRunes(); // runes mode doesn't support accessors
+        if (this.isSvelte5Plus && (others.length > 0 || this.usesRunes() || needsAccessors)) {
+            let str = '';
+            if (others.length > 0 || needsAccessors) {
+                if (this.isTsFile) {
+                    str +=
+                        ', exports: {} as any as { ' +
+                            this.createReturnElementsType(needsAccessors ? names : others, undefined, true).join(',') +
+                            ' }';
+                }
+                else {
+                    str += `, exports: /** @type {{${this.createReturnElementsType(needsAccessors ? names : others, false, true)}}} */ ({})`;
+                }
             }
-            else {
-                return `, exports: /** @type {${this.createReturnElementsType(others, false, true)}} */ ({})`;
+            if (this.usesRunes()) {
+                str += `, bindings: ${this.createBindingsStr()}`;
             }
+            return str;
         }
         return '';
     }
@@ -4958,12 +4965,17 @@ class ExportedNames {
     getExportsMap() {
         return this.exports;
     }
+    hasExports() {
+        const names = Array.from(this.exports.entries());
+        return this.usesAccessors ? names.length > 0 : names.some(([, { isLet }]) => !isLet);
+    }
     hasPropsRune() {
-        return this.$props.type || this.$props.comment;
+        return this.isSvelte5Plus && (this.$props.type || this.$props.comment);
     }
     checkGlobalsForRunes(globals) {
         const runes = ['$state', '$derived', '$effect']; // no need to check for props, already handled through other means in here
-        this.hasRunesGlobals = globals.some((global) => runes.includes(global));
+        this.hasRunesGlobals =
+            this.isSvelte5Plus && globals.some((global) => runes.includes(global));
     }
     usesRunes() {
         return this.hasRunesGlobals || this.hasPropsRune();
@@ -5840,6 +5852,9 @@ class Generics {
     toReferencesString() {
         return this.references.length ? `<${this.references.join(',')}>` : '';
     }
+    toReferencesAnyString() {
+        return this.references.length ? `<${this.references.map(() => 'any').join(',')}>` : '';
+    }
     has() {
         return this.definitions.length > 0;
     }
@@ -5920,12 +5935,12 @@ class InterfacesAndTypes {
     }
 }
-function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, hasModuleScript, isTSFile, basename) {
+function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, hasModuleScript, isTSFile, basename, isSvelte5Plus) {
     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);
+    const exportedNames = new ExportedNames(str, astOffset, basename, isTSFile, isSvelte5Plus);
     const generics = new Generics(str, astOffset, script);
     const interfacesAndTypes = new InterfacesAndTypes();
     const implicitTopLevelNames = new ImplicitTopLevelNames(str, astOffset);
@@ -6234,7 +6249,7 @@ function addComponentExport(params) {
         addSimpleComponentExport(params);
     }
 }
-function addGenericsComponentExport({ strictEvents, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, generics, noSvelteComponentTyped }) {
+function addGenericsComponentExport({ strictEvents, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, generics, usesSlots, isSvelte5, noSvelteComponentTyped }) {
     const genericsDef = generics.toDefinitionString();
     const genericsRef = generics.toReferencesString();
     const doc = componentDocumentation.getFormatted();
@@ -6253,7 +6268,11 @@ class __sveltets_Render${genericsDef} {
     slots() {
         return render${genericsRef}().slots;
     }
-}
+${isSvelte5
+        ? `    bindings() { return ${exportedNames.createBindingsStr()}; }
+    exports() { return ${exportedNames.hasExports() ? `render${genericsRef}().exports` : '{}'}; }
+}`
+        : '}'}
 `;
     const svelteComponentClass = noSvelteComponentTyped
         ? 'SvelteComponent'
@@ -6261,21 +6280,28 @@ class __sveltets_Render${genericsDef} {
     const [PropsName] = addTypeExport(str, className, 'Props');
     const [EventsName] = addTypeExport(str, className, 'Events');
     const [SlotsName] = addTypeExport(str, className, 'Slots');
-    /**
-     * In Svelte 5 runes mode we add a custom constructor to override the default one which implicitly makes all properties bindable.
-     * Remove this once Svelte typings no longer do that (Svelte 6 or 7)
-     */
-    let customConstructor = '';
-    if (exportedNames.hasPropsRune()) {
-        customConstructor = `\n    constructor(options: import('svelte').ComponentConstructorOptions<__sveltets_2_PropsWithChildren<${returnType('props')}, ${returnType('slots')}>>) { super(options); }`;
-    }
-    if (mode === 'dts') {
+    if (isSvelte5) {
+        // Don't add props/events/slots type exports in dts mode for now, maybe someone asks for it to be back,
+        // but it's safer to not do it for now to have more flexibility in the future.
+        const propsType = !canHaveAnyProp && exportedNames.hasNoProps()
+            ? `{$$events?: ${returnType('events')}${usesSlots ? `, $$slots?: ${returnType('slots')}, children?: any` : ''}}`
+            : `${returnType('props')} & {$$events?: ${returnType('events')}${usesSlots ? `, $$slots?: ${returnType('slots')}, children?: any` : ''}}`;
+        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?: ReturnType<__sveltets_Render${generics.toReferencesAnyString()}['bindings']>;\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 if (mode === 'dts') {
         statement +=
             `export type ${PropsName}${genericsDef} = ${returnType('props')};\n` +
                 `export type ${EventsName}${genericsDef} = ${returnType('events')};\n` +
                 `export type ${SlotsName}${genericsDef} = ${returnType('slots')};\n` +
                 `\n${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends ${svelteComponentClass}<${PropsName}${genericsRef}, ${EventsName}${genericsRef}, ${SlotsName}${genericsRef}> {` +
-                customConstructor +
                 exportedNames.createClassGetters(genericsRef) +
                 (usesAccessors ? exportedNames.createClassAccessors() : '') +
                 '\n}';
@@ -6284,63 +6310,87 @@ class __sveltets_Render${genericsDef} {
         statement +=
             `\n\nimport { ${svelteComponentClass} as __SvelteComponentTyped__ } from "svelte" \n` +
                 `${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends __SvelteComponentTyped__<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> {` +
-                customConstructor +
                 exportedNames.createClassGetters(genericsRef) +
                 (usesAccessors ? exportedNames.createClassAccessors() : '') +
                 '\n}';
     }
     str.append(statement);
 }
-function addSimpleComponentExport({ strictEvents, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, noSvelteComponentTyped }) {
+function addSimpleComponentExport({ strictEvents, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, usesSlots, noSvelteComponentTyped, isSvelte5 }) {
     const propDef = props(isTsFile, canHaveAnyProp, exportedNames, events(strictEvents, 'render()'));
     const doc = componentDocumentation.getFormatted();
     const className = fileName && classNameFromFilename(fileName, mode !== 'dts');
-    /**
-     * In Svelte 5 runes mode we add a custom constructor to override the default one which implicitly makes all properties bindable.
-     * Remove this once Svelte typings no longer do that (Svelte 6 or 7)
-     */
-    let customConstructor = '';
-    if (exportedNames.hasPropsRune()) {
-        customConstructor = `\n    constructor(options = __sveltets_2_runes_constructor(${propDef})) { super(options); }`;
-    }
     let statement;
-    if (mode === 'dts' && isTsFile) {
-        const svelteComponentClass = noSvelteComponentTyped
-            ? 'SvelteComponent'
-            : 'SvelteComponentTyped';
-        const [PropsName, PropsExport] = addTypeExport(str, className, 'Props');
-        const [EventsName, EventsExport] = addTypeExport(str, className, 'Events');
-        const [SlotsName, SlotsExport] = addTypeExport(str, className, 'Slots');
-        statement =
-            `\nconst __propDef = ${propDef};\n` +
-                PropsExport +
-                EventsExport +
-                SlotsExport +
-                `\n${doc}export default class${className ? ` ${className}` : ''} extends ${svelteComponentClass}<${PropsName}, ${EventsName}, ${SlotsName}> {` +
-                customConstructor +
-                exportedNames.createClassGetters() +
-                (usesAccessors ? exportedNames.createClassAccessors() : '') +
-                '\n}';
-    }
-    else if (mode === 'dts' && !isTsFile) {
-        statement =
-            `\nconst __propDef = ${propDef};\n` +
-                `/** @typedef {typeof __propDef.props}  ${className}Props */\n` +
-                `/** @typedef {typeof __propDef.events}  ${className}Events */\n` +
-                `/** @typedef {typeof __propDef.slots}  ${className}Slots */\n` +
-                `\n${doc}export default class${className ? ` ${className}` : ''} extends __sveltets_2_createSvelte2TsxComponent(${propDef}) {` +
-                customConstructor +
-                exportedNames.createClassGetters() +
-                (usesAccessors ? exportedNames.createClassAccessors() : '') +
-                '\n}';
+    if (mode === 'dts') {
+        if (isSvelte5) {
+            // Inline definitions from Svelte shims; else dts files will reference the globals which will be unresolved
+            statement =
+                `\ninterface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & { $$bindings?: Bindings } & Exports;
+    (internal: unknown, props: ${!canHaveAnyProp && exportedNames.hasNoProps() ? '{$$events?: Events, $$slots?: Slots}' : 'Props & {$$events?: Events, $$slots?: Slots}'}): Exports;
+    z_$$bindings?: Bindings;
+}\n` +
+                    (usesSlots
+                        ? `type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props &
+    (Slots extends { default: any }
+        ? Props extends Record<string, never>
+        ? any
+        : { children?: any }
+        : {});
+        declare function $$__sveltets_2_isomorphic_component_slots<
+            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<$$__sveltets_2_PropsWithChildren<Props, Slots>, Events, Slots, Exports, Bindings>;\n`
+                        : `
+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'};`;
+        }
+        else if (isTsFile) {
+            const svelteComponentClass = noSvelteComponentTyped
+                ? 'SvelteComponent'
+                : 'SvelteComponentTyped';
+            const [PropsName, PropsExport] = addTypeExport(str, className, 'Props');
+            const [EventsName, EventsExport] = addTypeExport(str, className, 'Events');
+            const [SlotsName, SlotsExport] = addTypeExport(str, className, 'Slots');
+            statement =
+                `\nconst __propDef = ${propDef};\n` +
+                    PropsExport +
+                    EventsExport +
+                    SlotsExport +
+                    `\n${doc}export default class${className ? ` ${className}` : ''} extends ${svelteComponentClass}<${PropsName}, ${EventsName}, ${SlotsName}> {` +
+                    exportedNames.createClassGetters() +
+                    (usesAccessors ? exportedNames.createClassAccessors() : '') +
+                    '\n}';
+        }
+        else {
+            statement =
+                `\nconst __propDef = ${propDef};\n` +
+                    `/** @typedef {typeof __propDef.props}  ${className}Props */\n` +
+                    `/** @typedef {typeof __propDef.events}  ${className}Events */\n` +
+                    `/** @typedef {typeof __propDef.slots}  ${className}Slots */\n` +
+                    `\n${doc}export default class${className ? ` ${className}` : ''} extends __sveltets_2_createSvelte2TsxComponent(${propDef}) {` +
+                    exportedNames.createClassGetters() +
+                    (usesAccessors ? exportedNames.createClassAccessors() : '') +
+                    '\n}';
+        }
     }
     else {
-        statement =
-            `\n\n${doc}export default class${className ? ` ${className}` : ''} extends __sveltets_2_createSvelte2TsxComponent(${propDef}) {` +
-                customConstructor +
-                exportedNames.createClassGetters() +
-                (usesAccessors ? exportedNames.createClassAccessors() : '') +
-                '\n}';
+        if (isSvelte5) {
+            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'};`;
+        }
+        else {
+            statement =
+                `\n\n${doc}export default class${className ? ` ${className}` : ''} extends __sveltets_2_createSvelte2TsxComponent(${propDef}) {` +
+                    exportedNames.createClassGetters() +
+                    (usesAccessors ? exportedNames.createClassAccessors() : '') +
+                    '\n}';
+        }
     }
     str.append(statement);
 }
@@ -6376,7 +6426,10 @@ function events(strictEvents, renderStr) {
     return strictEvents ? renderStr : `__sveltets_2_with_any_event(${renderStr})`;
 }
 function props(isTsFile, canHaveAnyProp, exportedNames, renderStr) {
-    if (isTsFile) {
+    if (exportedNames.usesRunes()) {
+        return renderStr;
+    }
+    else if (isTsFile) {
         return canHaveAnyProp ? `__sveltets_2_with_any(${renderStr})` : renderStr;
     }
     else {
@@ -6737,7 +6790,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);
+    let exportedNames = new ExportedNames(str, 0, basename, options === null || options === void 0 ? void 0 : options.isTsFile, svelte5Plus);
     let generics = new Generics(str, 0, { attributes: [] });
     let uses$$SlotsInterface = false;
     if (scriptTag) {
@@ -6746,12 +6799,13 @@ 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);
+        /**hasModuleScripts */ !!moduleScriptTag, options === null || options === void 0 ? void 0 : options.isTsFile, basename, svelte5Plus);
         uses$$props = uses$$props || res.uses$$props;
         uses$$restProps = uses$$restProps || res.uses$$restProps;
         uses$$slots = uses$$slots || res.uses$$slots;
         ({ exportedNames, events, generics, uses$$SlotsInterface } = res);
     }
+    exportedNames.usesAccessors = usesAccessors;
     if (svelte5Plus) {
         exportedNames.checkGlobalsForRunes(implicitStoreValues.getGlobals());
     }
@@ -6779,14 +6833,16 @@ function svelte2tsx(svelte, options = { parse }) {
     addComponentExport({
         str,
         canHaveAnyProp: !exportedNames.uses$$Props && (uses$$props || uses$$restProps),
-        strictEvents: events.hasStrictEvents(),
+        strictEvents: events.hasStrictEvents(), // TODO in Svelte 6 we should also apply strictEvents in runes mode
         isTsFile: options === null || options === void 0 ? void 0 : options.isTsFile,
         exportedNames,
         usesAccessors,
+        usesSlots: slots.size > 0,
         fileName: options === null || options === void 0 ? void 0 : options.filename,
         componentDocumentation,
         mode: options.mode,
         generics,
+        isSvelte5: svelte5Plus,
         noSvelteComponentTyped: options.noSvelteComponentTyped
     });
     if (options.mode === 'dts') {
@@ -7004,6 +7060,11 @@ async function createTsCompilerHost(options, svelteMap) {
  */
 async function createSvelteMap(config) {
     const svelteFiles = new Map();
+    // TODO detect Svelte version in here and set shimsPath accordingly if not given from above
+    const noSvelteComponentTyped = config.svelteShimsPath
+        .replace(/\\/g, '/')
+        .endsWith('svelte2tsx/svelte-shims-v4.d.ts');
+    const version = noSvelteComponentTyped ? undefined : '3.42.0';
     function add(path) {
         const code = ts.sys.readFile(path, 'utf-8');
         const isTsFile = /<script\s+[^>]*?lang=('|")(ts|typescript)('|")/.test(code);
@@ -7011,9 +7072,8 @@ async function createSvelteMap(config) {
             filename: path,
             isTsFile,
             mode: 'dts',
-            noSvelteComponentTyped: config.svelteShimsPath
-                .replace(/\\/g, '/')
-                .endsWith('svelte2tsx/svelte-shims-v4.d.ts')
+            version,
+            noSvelteComponentTyped: noSvelteComponentTyped
         }).code;
         svelteFiles.set(path, transformed);
         return isTsFile;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "svelte2tsx",
-  "version": "0.7.7",
+  "version": "0.7.9",
   "description": "Convert Svelte components to TSX for type checking",
   "author": "David Pershouse",
   "license": "MIT",

package/svelte-shims-v4.d.ts CHANGED Viewed

@@ -70,30 +70,30 @@ declare function __sveltets_2_slotsType<Slots, Key extends keyof Slots>(slots: S
 // An empty array of optionalProps makes OptionalProps type any, which means we lose the prop typing.
 // optionalProps need to be first or its type cannot be infered correctly.
-declare function __sveltets_2_partial<Props = {}, Events = {}, Slots = {}>(
-    render: {props: Props, events: Events, slots: Slots }
-): {props: Expand<SveltePropsAnyFallback<Props>>, events: Events, slots: Expand<SvelteSlotsAnyFallback<Slots>> }
-declare function __sveltets_2_partial<Props = {}, Events = {}, Slots = {}, OptionalProps extends keyof Props = any>(
+declare function __sveltets_2_partial<Props = {}, Events = {}, Slots = {}, Exports = {}, Bindings = string>(
+    render: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }
+): {props: Expand<SveltePropsAnyFallback<Props>>, events: Events, slots: Expand<SvelteSlotsAnyFallback<Slots>>, exports?: Exports, bindings?: Bindings }
+declare function __sveltets_2_partial<Props = {}, Events = {}, Slots = {}, Exports = {}, Bindings = string, OptionalProps extends keyof Props = any>(
     optionalProps: OptionalProps[],
-    render: {props: Props, events: Events, slots: Slots }
-): {props: Expand<SvelteWithOptionalProps<SveltePropsAnyFallback<Props>, OptionalProps>>, events: Events, slots: Expand<SvelteSlotsAnyFallback<Slots>> }
+    render: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }
+): {props: Expand<SvelteWithOptionalProps<SveltePropsAnyFallback<Props>, OptionalProps>>, events: Events, slots: Expand<SvelteSlotsAnyFallback<Slots>>, exports?: Exports, bindings?: Bindings }
-declare function __sveltets_2_partial_with_any<Props = {}, Events = {}, Slots = {}>(
-    render: {props: Props, events: Events, slots: Slots }
-): {props: Expand<SveltePropsAnyFallback<Props> & SvelteAllProps>, events: Events, slots: Expand<SvelteSlotsAnyFallback<Slots>> }
-declare function __sveltets_2_partial_with_any<Props = {}, Events = {}, Slots = {}, OptionalProps extends keyof Props = any>(
+declare function __sveltets_2_partial_with_any<Props = {}, Events = {}, Slots = {}, Exports = {}, Bindings = string>(
+    render: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }
+): {props: Expand<SveltePropsAnyFallback<Props> & SvelteAllProps>, events: Events, slots: Expand<SvelteSlotsAnyFallback<Slots>>, exports?: Exports, bindings?: Bindings }
+declare function __sveltets_2_partial_with_any<Props = {}, Events = {}, Slots = {}, Exports = {}, Bindings = string, OptionalProps extends keyof Props = any>(
     optionalProps: OptionalProps[],
-    render: {props: Props, events: Events, slots: Slots }
-): {props: Expand<SvelteWithOptionalProps<SveltePropsAnyFallback<Props>, OptionalProps> & SvelteAllProps>, events: Events, slots: Expand<SvelteSlotsAnyFallback<Slots>> }
+    render: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }
+): {props: Expand<SvelteWithOptionalProps<SveltePropsAnyFallback<Props>, OptionalProps> & SvelteAllProps>, events: Events, slots: Expand<SvelteSlotsAnyFallback<Slots>>, exports?: Exports, bindings?: Bindings }
-declare function __sveltets_2_with_any<Props = {}, Events = {}, Slots = {}>(
-    render: {props: Props, events: Events, slots: Slots }
-): {props: Expand<Props & SvelteAllProps>, events: Events, slots: Slots }
+declare function __sveltets_2_with_any<Props = {}, Events = {}, Slots = {}, Exports = {}, Bindings = string>(
+    render: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }
+): {props: Expand<Props & SvelteAllProps>, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }
-declare function __sveltets_2_with_any_event<Props = {}, Events = {}, Slots = {}>(
-    render: {props: Props, events: Events, slots: Slots }
-): {props: Expand<Props>, events: Events & {[evt: string]: CustomEvent<any>;}, slots: Slots }
+declare function __sveltets_2_with_any_event<Props = {}, Events = {}, Slots = {}, Exports = {}, Bindings = string>(
+    render: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }
+): {props: Props, events: Events & {[evt: string]: CustomEvent<any>;}, slots: Slots, exports?: Exports, bindings?: Bindings }
 declare function __sveltets_2_store_get<T = any>(store: SvelteStore<T>): T
 declare function __sveltets_2_store_get<Store extends SvelteStore<any> | undefined | null>(store: Store): Store extends SvelteStore<infer T> ? T : Store;
@@ -225,20 +225,13 @@ declare type ATypedSvelteComponent = {
  * ```
  */
 declare type ConstructorOfATypedSvelteComponent = new (args: {target: any, props?: any}) => ATypedSvelteComponent
-declare function __sveltets_2_ensureComponent<T extends ConstructorOfATypedSvelteComponent | null | undefined>(type: T): NonNullable<T>;
+declare function __sveltets_2_ensureComponent<
+    // @ts-ignore svelte.Component doesn't exist in Svelte 4
+    T extends ConstructorOfATypedSvelteComponent | (0 extends (1 & import('svelte').Component) ? never : import('svelte').Component<any, any, any>) | null | undefined
+    // @ts-ignore svelte.Component doesn't exist in Svelte 4
+>(type: T): NonNullable<T extends ConstructorOfATypedSvelteComponent ? T : 0 extends (1 & import('svelte').Component) ? T : T extends import('svelte').Component<infer Props> ? typeof import('svelte').SvelteComponent<Props, Props['$$events'], Props['$$slots']> : T>;
 declare function __sveltets_2_ensureArray<T extends ArrayLike<unknown> | Iterable<unknown>>(array: T): T extends ArrayLike<infer U> ? U[] : T extends Iterable<infer U> ? Iterable<U> : any[];
-declare type __sveltets_2_Bindings<Props extends Record<string, any>, Bindings extends string> = {
-    [K in keyof Props]: K extends Bindings ?
-        // @ts-ignore not available in Svelte 4
-        import('svelte').Bindable<Props[K]> :
-        Props[K]
-    };
-declare function __sveltets_2_binding<T>(prop: T):
-    // @ts-ignore not available in Svelte 4
-    import('svelte').Binding<T>;
 type __sveltets_2_PropsWithChildren<Props, Slots> = Props &
     (Slots extends { default: any }
         // This is unfortunate because it means "accepts no props" turns into "accepts any prop"
@@ -248,4 +241,20 @@ type __sveltets_2_PropsWithChildren<Props, Slots> = Props &
         ? any
         : { children?: any }
         : {});
-declare function __sveltets_2_runes_constructor<Props extends {}, Events extends {}, Slots extends {}>(render: {props: Props, events: Events, slots: Slots }): import("svelte").ComponentConstructorOptions<__sveltets_2_PropsWithChildren<Props, Slots>>;
+declare function __sveltets_2_runes_constructor<Props extends {}>(render: {props: Props }): import("svelte").ComponentConstructorOptions<Props>;
+declare function __sveltets_$$bindings<Bindings extends string[]>(...bindings: Bindings): Bindings[number];
+interface __sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & { $$bindings?: Bindings } & Exports;
+    (internal: unknown, props: Props extends Record<string, never> ? {$$events?: Events, $$slots?: Slots} : Props & {$$events?: Events, $$slots?: Slots}): Exports;
+    z_$$bindings?: Bindings;
+}
+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>;
+declare function __sveltets_2_isomorphic_component_slots<
+    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<__sveltets_2_PropsWithChildren<Props, Slots>, Events, Slots, Exports, Bindings>;