From c35f0c16af0426b829882be8efe6ac9f7684aa5f Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Thu, 14 Mar 2024 13:49:42 +0100 Subject: [PATCH] fix: deduplicate module declaration, adjust type (#10801) - the `component` parameter expects a component constructor type, not an instance type - use `import('svelte')` instead of relative paths to not inline all types that are already present in the sibiling module declaration --- packages/svelte/src/legacy/legacy-client.js | 12 +- packages/svelte/tests/types/component.ts | 2 +- packages/svelte/types/index.d.ts | 173 +------------------- 3 files changed, 11 insertions(+), 176 deletions(-) diff --git a/packages/svelte/src/legacy/legacy-client.js b/packages/svelte/src/legacy/legacy-client.js index 09f122e370..12c6c61b39 100644 --- a/packages/svelte/src/legacy/legacy-client.js +++ b/packages/svelte/src/legacy/legacy-client.js @@ -11,13 +11,13 @@ import * as $ from '../internal/index.js'; * @template {Record} Events * @template {Record} Slots * - * @param {import('../main/public.js').ComponentConstructorOptions & { - * component: import('../main/public.js').SvelteComponent; + * @param {import('svelte').ComponentConstructorOptions & { + * component: import('svelte').ComponentType>; * immutable?: boolean; * hydrate?: boolean; * recover?: boolean; * }} options - * @returns {import('../main/public.js').SvelteComponent & Exports} + * @returns {import('svelte').SvelteComponent & Exports} */ export function createClassComponent(options) { // @ts-expect-error $$prop_def etc are not actually defined @@ -34,8 +34,8 @@ export function createClassComponent(options) { * @template {Record} Events * @template {Record} Slots * - * @param {import('../main/public.js').SvelteComponent} component - * @returns {import('../main/public.js').ComponentType & Exports>} + * @param {import('svelte').SvelteComponent} component + * @returns {import('svelte').ComponentType & Exports>} */ export function asClassComponent(component) { // @ts-expect-error $$prop_def etc are not actually defined @@ -58,7 +58,7 @@ class Svelte4Component { #instance; /** - * @param {import('../main/public.js').ComponentConstructorOptions & { + * @param {import('svelte').ComponentConstructorOptions & { * component: any; * immutable?: boolean; * hydrate?: boolean; diff --git a/packages/svelte/tests/types/component.ts b/packages/svelte/tests/types/component.ts index e2fc094bab..8ef5274016 100644 --- a/packages/svelte/tests/types/component.ts +++ b/packages/svelte/tests/types/component.ts @@ -170,5 +170,5 @@ asLegacyComponent.anExport; const x: typeof asLegacyComponent = createClassComponent({ target: null as any, hydrate: true, - component: newComponent + component: NewComponent }); diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 567f0b0dcf..f3325cfad0 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -1728,184 +1728,19 @@ declare module 'svelte/legacy' { * @deprecated Use this only as a temporary solution to migrate your imperative component code to Svelte 5. * * */ - export function createClassComponent, Exports extends Record, Events extends Record, Slots extends Record>(options: ComponentConstructorOptions & { - component: SvelteComponent; + export function createClassComponent, Exports extends Record, Events extends Record, Slots extends Record>(options: import("svelte").ComponentConstructorOptions & { + component: import("svelte").ComponentType>; immutable?: boolean | undefined; hydrate?: boolean | undefined; recover?: boolean | undefined; - }): SvelteComponent & Exports; + }): import("svelte").SvelteComponent & Exports; /** * Takes the component function and returns a Svelte 4 compatible component constructor. * * @deprecated Use this only as a temporary solution to migrate your imperative component code to Svelte 5. * * */ - export function asClassComponent, Exports extends Record, Events extends Record, Slots extends Record>(component: SvelteComponent): ComponentType & Exports>; - // This should contain all the public interfaces (not all of them are actually importable, check current Svelte for which ones are). - - /** - * @deprecated Svelte components were classes in Svelte 4. In Svelte 5, thy are not anymore. - * Use `mount` or `createRoot` instead to instantiate components. - * See [breaking changes](https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes) - * for more info. - */ - interface ComponentConstructorOptions< - Props extends Record = Record - > { - target: Element | Document | ShadowRoot; - anchor?: Element; - props?: Props; - context?: Map; - hydrate?: boolean; - intro?: boolean; - $$inline?: boolean; - } - - // Utility type for ensuring backwards compatibility on a type level: If there's a default slot, add 'children' to the props if it doesn't exist there already - type PropsWithChildren = Props & - (Props extends { children?: any } - ? {} - : Slots extends { default: any } - ? { children?: Snippet } - : {}); - - /** - * Can be used to create strongly typed Svelte components. - * - * #### Example: - * - * You have component library on npm called `component-library`, from which - * you export a component called `MyComponent`. For Svelte+TypeScript users, - * you want to provide typings. Therefore you create a `index.d.ts`: - * ```ts - * import { SvelteComponent } from "svelte"; - * export class MyComponent extends SvelteComponent<{foo: string}> {} - * ``` - * Typing this makes it possible for IDEs like VS Code with the Svelte extension - * to provide intellisense and to use the component like this in a Svelte file - * with TypeScript: - * ```svelte - * - * - * ``` - * - * This was the base class for Svelte components in Svelte 4. Svelte 5+ components - * are completely different under the hood. You should only use this type for typing, - * not actually instantiate components with `new` - use `mount` or `createRoot` instead. - * See [breaking changes](https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes) - * for more info. - */ - class SvelteComponent< - Props extends Record = any, - Events extends Record = any, - Slots extends Record = any - > { - [prop: string]: any; - /** - * @deprecated This constructor only exists when using the `asClassComponent` compatibility helper, which - * is a stop-gap solution. Migrate towards using `mount` or `createRoot` instead. See - * https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more info. - */ - constructor(options: ComponentConstructorOptions>); - /** - * For type checking capabilities only. - * Does not exist at runtime. - * ### DO NOT USE! - * */ - $$prop_def: PropsWithChildren; - /** - * For type checking capabilities only. - * Does not exist at runtime. - * ### DO NOT USE! - * - * */ - $$events_def: Events; - /** - * For type checking capabilities only. - * Does not exist at runtime. - * ### DO NOT USE! - * - * */ - $$slot_def: Slots; - - /** - * @deprecated This method only exists when using one of the legacy compatibility helpers, which - * is a stop-gap solution. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes - * for more info. - */ - $destroy(): void; - - /** - * @deprecated This method only exists when using one of the legacy compatibility helpers, which - * is a stop-gap solution. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes - * for more info. - */ - $on>( - type: K, - callback: (e: Events[K]) => void - ): () => void; - - /** - * @deprecated This method only exists when using one of the legacy compatibility helpers, which - * is a stop-gap solution. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes - * for more info. - */ - $set(props: Partial): void; - } - - /** - * Convenience type to get the type of a Svelte component. Useful for example in combination with - * dynamic components using ``. - * - * Example: - * ```html - * - * - * - * - * ``` - */ - type ComponentType = (new ( - options: ComponentConstructorOptions< - Comp extends SvelteComponent ? Props : Record - > - ) => Comp) & { - /** The custom element version of the component. Only present if compiled with the `customElement` compiler option */ - element?: typeof HTMLElement; - }; - - const SnippetReturn: unique symbol; - - /** - * The type of a `#snippet` block. You can use it to (for example) express that your component expects a snippet of a certain type: - * ```ts - * let { banner }: { banner: Snippet<{ text: string }> } = $props(); - * ``` - * You can only call a snippet through the `{@render ...}` tag. - */ - type Snippet = - // this conditional allows tuples but not arrays. Arrays would indicate a - // rest parameter type, which is not supported. If rest parameters are added - // in the future, the condition can be removed. - number extends T['length'] - ? never - : { - ( - this: void, - ...args: T - ): typeof SnippetReturn & { - _: 'functions passed to {@render ...} tags must use the `Snippet` type imported from "svelte"'; - }; - }; + export function asClassComponent, Exports extends Record, Events extends Record, Slots extends Record>(component: import("svelte").SvelteComponent): import("svelte").ComponentType & Exports>; } declare module 'svelte/motion' {