feat: don't use deprecated SvelteComponentTyped import if shims path hints at v4

Author: dummdidumm

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;
     /**

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,20 +73,24 @@ class __sveltets_Render${genericsDef} {
 }
 `;
 
+    const svelteComponentClass = noSvelteComponentTyped
+        ? 'SvelteComponent'
+        : 'SvelteComponentTyped';
+
     if (mode === 'dts') {
         statement +=
             `export type ${className}Props${genericsDef} = ${returnType('props')};\n` +
             `export type ${className}Events${genericsDef} = ${returnType('events')};\n` +
             `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,14 +142,18 @@ 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') +
             addTypeExport('Events') +
             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}';

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,15 +419,20 @@ export function svelte2tsx(
         fileName: options?.filename,
         componentDocumentation,
         mode: options.mode,
-        generics
+        generics,
+        noSvelteComponentTyped: options.noSvelteComponentTyped
     });
 
     if (options.mode === 'dts') {
         // Prepend the import which is used for TS files
         // 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