diff --git a/.changeset/mighty-suns-occur.md b/.changeset/mighty-suns-occur.md new file mode 100644 index 000000000000..64d184f29628 --- /dev/null +++ b/.changeset/mighty-suns-occur.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: ensure types are loaded with all TS settings diff --git a/.changeset/tame-peaches-destroy.md b/.changeset/tame-peaches-destroy.md new file mode 100644 index 000000000000..b5ba04e842c5 --- /dev/null +++ b/.changeset/tame-peaches-destroy.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: export correct SvelteComponent type diff --git a/packages/svelte/.gitignore b/packages/svelte/.gitignore index 13a9e4099990..2f5d67e7ded7 100644 --- a/packages/svelte/.gitignore +++ b/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 diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 691d3351a7a2..3bfd9234dda0 100644 --- a/packages/svelte/package.json +++ b/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": { diff --git a/packages/svelte/scripts/generate-dts.js b/packages/svelte/scripts/generate-dts.js index 2139118de240..fe4b70e09a61 100644 --- a/packages/svelte/scripts/generate-dts.js +++ b/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;') +); diff --git a/packages/svelte/src/runtime/ambient.d.ts b/packages/svelte/src/runtime/ambient.d.ts index 09cd9b72f21e..622c974b442a 100644 --- a/packages/svelte/src/runtime/ambient.d.ts +++ b/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'; } diff --git a/packages/svelte/src/runtime/index.js b/packages/svelte/src/runtime/index.js index 9d17708fe461..7df6896b3bd8 100644 --- a/packages/svelte/src/runtime/index.js +++ b/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'; diff --git a/packages/svelte/src/runtime/internal/Component.js b/packages/svelte/src/runtime/internal/Component.js index 878251e08a38..a1da213da3bd 100644 --- a/packages/svelte/src/runtime/internal/Component.js +++ b/packages/svelte/src/runtime/internal/Component.js @@ -424,7 +424,6 @@ export function create_custom_element( * * @template {Record} [Props=any] * @template {Record} [Events=any] - * @implements Record */ export class SvelteComponent { /** diff --git a/packages/svelte/src/runtime/internal/dev.js b/packages/svelte/src/runtime/internal/dev.js index 049fced285bd..b1d89add3341 100644 --- a/packages/svelte/src/runtime/internal/dev.js +++ b/packages/svelte/src/runtime/internal/dev.js @@ -295,7 +295,7 @@ export function construct_svelte_component_dev(component, props) { * @template {Record} [Props=any] * @template {Record} [Events=any] * @template {Record} [Slots=any] - * @extends SvelteComponent + * @extends {SvelteComponent} */ export class SvelteComponentDev extends SvelteComponent { /** @@ -350,7 +350,7 @@ export class SvelteComponentDev extends SvelteComponent { * @template {Record} [Events=any] * @template {Record} [Slots=any] * @deprecated Use `SvelteComponent` instead. See PR for more information: https://github.com/sveltejs/svelte/pull/8512 - * @extends SvelteComponentDev + * @extends {SvelteComponentDev} */ export class SvelteComponentTyped extends SvelteComponentDev {} diff --git a/packages/svelte/src/runtime/internal/public.d.ts b/packages/svelte/src/runtime/internal/public.d.ts index 64a9a04675e1..6eab766077b6 100644 --- a/packages/svelte/src/runtime/internal/public.d.ts +++ b/packages/svelte/src/runtime/internal/public.d.ts @@ -91,5 +91,3 @@ export interface EventDispatcher> { : [type: Type, parameter: EventMap[Type], options?: DispatchOptions] ): boolean; } - -export * from './index.js'; diff --git a/packages/svelte/src/runtime/public.d.ts b/packages/svelte/src/runtime/public.d.ts index 47bd1e8371d9..aa7457de5849 100644 --- a/packages/svelte/src/runtime/public.d.ts +++ b/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'; diff --git a/packages/svelte/src/runtime/tsconfig.json b/packages/svelte/src/runtime/tsconfig.json index 9da06d7d2e71..97efc7acb011 100644 --- a/packages/svelte/src/runtime/tsconfig.json +++ b/packages/svelte/src/runtime/tsconfig.json @@ -9,6 +9,7 @@ "baseUrl": ".", "paths": { + "svelte": ["."], "svelte/*": ["*"] }, "allowJs": true,