fix: expose types for all TS resolution modes, fix SvelteComponent export (#8721)

also add some legacy import paths which should be changed in usage sites ASAP

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>

Author: gtm-nayan

.changeset/mighty-suns-occur.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure types are loaded with all TS settings

.changeset/tame-peaches-destroy.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: export correct SvelteComponent type

packages/svelte/.gitignore

@@ -7,3 +7,12 @@
 _actual*.*
 _output
 /types
+
+action.d.ts
+animate.d.ts
+compiler.d.ts
+easing.d.ts
+index.d.ts
+motion.d.ts
+store.d.ts
+transition.d.ts

packages/svelte/package.json

@@ -11,7 +11,6 @@
     "compiler.*",
     "register.js",
     "index.d.ts",
-    "internal.d.ts",
     "store.d.ts",
     "animate.d.ts",
     "transition.d.ts",
@@ -47,7 +46,6 @@
       "import": "./src/runtime/easing/index.js"
     },
     "./internal": {
-      "types": "./types/index.d.ts",
       "import": "./src/runtime/internal/index.js"
     },
     "./motion": {

packages/svelte/scripts/generate-dts.js

@@ -1,11 +1,26 @@
+import * as fs from 'fs';
 import { createBundle } from 'dts-buddy';
 
+// It may look weird, but the imports MUST be ending with index.js to be properly resolved in all TS modes
+for (const name of ['action', 'animate', 'easing', 'motion', 'store', 'transition']) {
+	fs.writeFileSync(`${name}.d.ts`, `import './types/index.js';`);
+}
+
+fs.writeFileSync('index.d.ts', `import './types/index.js';`);
+fs.writeFileSync('compiler.d.ts', `import './types/index.js';`);
+
+// TODO: some way to mark these as deprecated
+fs.mkdirSync('./types/compiler', { recursive: true });
+fs.writeFileSync('./types/compiler/preprocess.d.ts', `import '../index.js';`);
+fs.writeFileSync('./types/compiler/interfaces.d.ts', `import '../index.js';`);
+
 await createBundle({
 	output: 'types/index.d.ts',
 	modules: {
 		svelte: 'src/runtime/public.d.ts',
 		'svelte/compiler': 'src/compiler/public.d.ts',
 		'svelte/types/compiler/preprocess': 'src/compiler/preprocess/public.d.ts',
+		'svelte/types/compiler/interfaces': 'src/compiler/interfaces.d.ts',
 		'svelte/action': 'src/runtime/action/public.d.ts',
 		'svelte/animate': 'src/runtime/animate/public.d.ts',
 		'svelte/easing': 'src/runtime/easing/index.js',
@@ -14,3 +29,11 @@ await createBundle({
 		'svelte/transition': 'src/runtime/transition/public.d.ts'
 	}
 });
+
+// There's no way to tell in JS that a class can have arbitrary properties, so we need to add that manually
+const types = fs.readFileSync('types/index.d.ts', 'utf-8');
+fs.writeFileSync(
+	'types/index.d.ts',
+	// same line to not affect source map
+	types.replace(/export class SvelteComponent<[^{]*{/, '$& [prop: string]: any;')
+);

packages/svelte/src/runtime/ambient.d.ts

@@ -1,3 +1,3 @@
 declare module '*.svelte' {
-	export { SvelteComponentDev as default } from 'svelte/internal';
+	export { SvelteComponent as default } from 'svelte';
 }

packages/svelte/src/runtime/index.js

@@ -1,4 +1,5 @@
 export {
+	SvelteComponentDev as SvelteComponent,
 	onMount,
 	onDestroy,
 	beforeUpdate,
@@ -9,6 +10,5 @@ export {
 	hasContext,
 	tick,
 	createEventDispatcher,
-	SvelteComponentDev as SvelteComponent,
 	SvelteComponentTyped
 } from './internal/index.js';

packages/svelte/src/runtime/internal/Component.js

@@ -424,7 +424,6 @@ export function create_custom_element(
  *
  * @template {Record<string, any>} [Props=any]
  * @template {Record<string, any>} [Events=any]
- * @implements Record<string, any>
  */
 export class SvelteComponent {
 	/**

packages/svelte/src/runtime/internal/dev.js

@@ -295,7 +295,7 @@ export function construct_svelte_component_dev(component, props) {
  * @template {Record<string, any>} [Props=any]
  * @template {Record<string, any>} [Events=any]
  * @template {Record<string, any>} [Slots=any]
- * @extends SvelteComponent<Props, Events>
+ * @extends {SvelteComponent<Props, Events>}
  */
 export class SvelteComponentDev extends SvelteComponent {
 	/**
@@ -350,7 +350,7 @@ export class SvelteComponentDev extends SvelteComponent {
  * @template {Record<string, any>} [Events=any]
  * @template {Record<string, any>} [Slots=any]
  * @deprecated Use `SvelteComponent` instead. See PR for more information: https://github.com/sveltejs/svelte/pull/8512
- * @extends SvelteComponentDev<Props, Events, Slots>
+ * @extends {SvelteComponentDev<Props, Events, Slots>}
  */
 export class SvelteComponentTyped extends SvelteComponentDev {}
 

packages/svelte/src/runtime/internal/public.d.ts

@@ -91,5 +91,3 @@ export interface EventDispatcher<EventMap extends Record<string, any>> {
 			: [type: Type, parameter: EventMap[Type], options?: DispatchOptions]
 	): boolean;
 }
-
-export * from './index.js';

packages/svelte/src/runtime/public.d.ts

@@ -1,10 +1,27 @@
 import './ambient.js';
 
+// Types written in this particular order to work around a dts-buddy bug where it doesn't handle the
+// SvelteComponentDev as SvelteComponent alias correctly.
+// If that's fixed, we  can do export * from './index.js' instead.
+
+export {
+	SvelteComponent,
+	SvelteComponentTyped,
+	onMount,
+	onDestroy,
+	beforeUpdate,
+	afterUpdate,
+	setContext,
+	getContext,
+	getAllContexts,
+	hasContext,
+	tick,
+	createEventDispatcher
+} from './index.js';
+
 export type {
 	ComponentConstructorOptions,
 	ComponentEvents,
 	ComponentProps,
 	ComponentType
 } from './internal/public.js';
-
-export * from './index.js';

packages/svelte/src/runtime/tsconfig.json

@@ -9,6 +9,7 @@
 
 		"baseUrl": ".",
 		"paths": {
+			"svelte": ["."],
 			"svelte/*": ["*"]
 		},
 		"allowJs": true,