diff --git a/packages/svelte2tsx/index.d.ts b/packages/svelte2tsx/index.d.ts index 4749fce01..11e5becad 100644 --- a/packages/svelte2tsx/index.d.ts +++ b/packages/svelte2tsx/index.d.ts @@ -86,6 +86,10 @@ export interface EmitDtsConfig { /** * Path to `svelte-shims.d.ts` of `svelte2tsx`. * Example: `require.resolve('svelte2tsx/svelte-shims.d.ts')` + * + * If a path is given that points to `svelte-shims-v4.d.ts`, + * the `SvelteComponent` import is used instead of + * `SvelteComponentTyped` which is deprecated in Svelte v4. */ svelteShimsPath: string; /** diff --git a/packages/svelte2tsx/src/svelte2tsx/addComponentExport.ts b/packages/svelte2tsx/src/svelte2tsx/addComponentExport.ts index bbde7abe5..505703448 100644 --- a/packages/svelte2tsx/src/svelte2tsx/addComponentExport.ts +++ b/packages/svelte2tsx/src/svelte2tsx/addComponentExport.ts @@ -20,6 +20,7 @@ export interface AddComponentExportPara { componentDocumentation: ComponentDocumentation; mode: 'ts' | 'dts' | 'tsx'; generics: Generics; + noSvelteComponentTyped?: boolean; } /** @@ -45,7 +46,8 @@ function addGenericsComponentExport({ mode, usesAccessors, str, - generics + generics, + noSvelteComponentTyped }: AddComponentExportPara) { const genericsDef = generics.toDefinitionString(); const genericsRef = generics.toReferencesString(); @@ -71,6 +73,10 @@ class __sveltets_Render${genericsDef} { } `; + const svelteComponentClass = noSvelteComponentTyped + ? 'SvelteComponent' + : 'SvelteComponentTyped'; + if (mode === 'dts') { statement += `export type ${className}Props${genericsDef} = ${returnType('props')};\n` + @@ -78,13 +84,13 @@ class __sveltets_Render${genericsDef} { `export type ${className}Slots${genericsDef} = ${returnType('slots')};\n` + `\n${doc}export default class${ className ? ` ${className}` : '' - }${genericsDef} extends SvelteComponentTyped<${className}Props${genericsRef}, ${className}Events${genericsRef}, ${className}Slots${genericsRef}> {` + + }${genericsDef} extends ${svelteComponentClass}<${className}Props${genericsRef}, ${className}Events${genericsRef}, ${className}Slots${genericsRef}> {` + exportedNames.createClassGetters() + (usesAccessors ? exportedNames.createClassAccessors() : '') + '\n}'; } else { statement += - '\n\nimport { SvelteComponentTyped as __SvelteComponentTyped__ } from "svelte" \n' + + `\n\nimport { ${svelteComponentClass} as __SvelteComponentTyped__ } from "svelte" \n` + `${doc}export default class${ className ? ` ${className}` : '' }${genericsDef} extends __SvelteComponentTyped__<${returnType('props')}, ${returnType( @@ -107,7 +113,8 @@ function addSimpleComponentExport({ fileName, mode, usesAccessors, - str + str, + noSvelteComponentTyped }: AddComponentExportPara) { const propDef = props( isTsFile, @@ -135,6 +142,10 @@ function addSimpleComponentExport({ return `type ${replacement} = typeof __propDef.${type.toLowerCase()};\nexport { ${replacement} as ${exportName} };\n`; }; + const svelteComponentClass = noSvelteComponentTyped + ? 'SvelteComponent' + : 'SvelteComponentTyped'; + statement = `\nconst __propDef = ${propDef};\n` + addTypeExport('Props') + @@ -142,7 +153,7 @@ function addSimpleComponentExport({ addTypeExport('Slots') + `\n${doc}export default class${ className ? ` ${className}` : '' - } extends SvelteComponentTyped<${className}Props, ${className}Events, ${className}Slots> {` + + } extends ${svelteComponentClass}<${className}Props, ${className}Events, ${className}Slots> {` + exportedNames.createClassGetters() + (usesAccessors ? exportedNames.createClassAccessors() : '') + '\n}'; diff --git a/packages/svelte2tsx/src/svelte2tsx/index.ts b/packages/svelte2tsx/src/svelte2tsx/index.ts index 5badb6e35..7e26c5f0f 100644 --- a/packages/svelte2tsx/src/svelte2tsx/index.ts +++ b/packages/svelte2tsx/src/svelte2tsx/index.ts @@ -311,6 +311,7 @@ export function svelte2tsx( mode?: 'ts' | 'dts'; accessors?: boolean; typingsNamespace?: string; + noSvelteComponentTyped?: boolean; } = {} ) { options.mode = options.mode || 'ts'; @@ -418,7 +419,8 @@ export function svelte2tsx( fileName: options?.filename, componentDocumentation, mode: options.mode, - generics + generics, + noSvelteComponentTyped: options.noSvelteComponentTyped }); if (options.mode === 'dts') { @@ -426,7 +428,11 @@ export function svelte2tsx( // The other shims need to be provided by the user ambient-style, // for example through filenames.push(require.resolve('svelte2tsx/svelte-shims.d.ts')) // TODO replace with SvelteComponent for Svelte 5, keep old for backwards compatibility with Svelte 3 - str.prepend('import { SvelteComponentTyped } from "svelte"\n' + '\n'); + if (options.noSvelteComponentTyped) { + str.prepend('import { SvelteComponent } from "svelte"\n' + '\n'); + } else { + str.prepend('import { SvelteComponentTyped } from "svelte"\n' + '\n'); + } let code = str.toString(); // Remove all tsx occurences and the template part from the output code = code