From afda88c1bfe22730ec33a097d10e6c1645204228 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Thu, 31 Oct 2024 13:30:28 +0100 Subject: [PATCH 1/7] docs: more docs on TS types and a few related changes/enhancements closes #13940 --- documentation/docs/07-misc/03-typescript.md | 23 ++++++++++++++++++- .../docs/07-misc/07-v5-migration-guide.md | 19 +++++++++++++-- packages/svelte/src/index.d.ts | 3 ++- packages/svelte/types/index.d.ts | 3 ++- 4 files changed, 43 insertions(+), 5 deletions(-) diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md index 525ba51d2f59..a85032d04e4d 100644 --- a/documentation/docs/07-misc/03-typescript.md +++ b/documentation/docs/07-misc/03-typescript.md @@ -195,7 +195,13 @@ Using it together with dynamic components to restrict what kinds of component ca ``` -Closely related to the `Component` type is the `ComponentProps` type which extracts the properties a component expects. +> [!LEGACY] In Svelte 4, components were of type `SvelteComponent` + +## Component helper types + +### ComponentProps + +`ComponentProps` extracts the properties a component expects. ```ts import type { Component, ComponentProps } from 'svelte'; @@ -211,6 +217,21 @@ function withProps>( withProps(MyComponent, { foo: 'bar' }); ``` +### ComponentExports + +`ComponentExports` extracts the exports of a component, in other words you can use it to declare its instance type: + +```svelte + + + +``` + ## Enhancing built-in DOM types Svelte provides a best effort of all the HTML DOM types that exist. Sometimes you may want to use experimental attributes or custom events coming from an action. In these cases, TypeScript will throw a type error, saying that it does not know these types. If it's a non-experimental standard attribute/event, this may very well be a missing typing from our [HTML typings](https://github.com/sveltejs/svelte/blob/main/packages/svelte/elements.d.ts). In that case, you are welcome to open an issue and/or a PR fixing it. diff --git a/documentation/docs/07-misc/07-v5-migration-guide.md b/documentation/docs/07-misc/07-v5-migration-guide.md index 1624755a6b5e..c7c2ea5de7fe 100644 --- a/documentation/docs/07-misc/07-v5-migration-guide.md +++ b/documentation/docs/07-misc/07-v5-migration-guide.md @@ -599,13 +599,14 @@ To declare that a component of a certain type is required: ```svelte @@ -613,6 +614,20 @@ To declare that a component of a certain type is required: ``` +To declare the instance type of a component, or in other words its exports: + +```svelte + + + +``` + The two utility types `ComponentEvents` and `ComponentType` are also deprecated. `ComponentEvents` is obsolete because events are defined as callback props now, and `ComponentType` is obsolete because the new `Component` type is the component type already (e.g. `ComponentType>` == `Component<{ prop: string }>`). ### bind:this changes diff --git a/packages/svelte/src/index.d.ts b/packages/svelte/src/index.d.ts index 262337ef0aaf..0a46e3daa946 100644 --- a/packages/svelte/src/index.d.ts +++ b/packages/svelte/src/index.d.ts @@ -241,7 +241,8 @@ export type ComponentProps> = * Convenience type to get the properties that given component exports. * * Example: Typing the `bind:this` for a component named `MyComponent` - * ``` + * + * ```ts * - + ``` ## Enhancing built-in DOM types diff --git a/documentation/docs/07-misc/07-v5-migration-guide.md b/documentation/docs/07-misc/07-v5-migration-guide.md index c7c2ea5de7fe..e8d69b1d2c29 100644 --- a/documentation/docs/07-misc/07-v5-migration-guide.md +++ b/documentation/docs/07-misc/07-v5-migration-guide.md @@ -614,20 +614,6 @@ To declare that a component of a certain type is required: ``` -To declare the instance type of a component, or in other words its exports: - -```svelte - - - -``` - The two utility types `ComponentEvents` and `ComponentType` are also deprecated. `ComponentEvents` is obsolete because events are defined as callback props now, and `ComponentType` is obsolete because the new `Component` type is the component type already (e.g. `ComponentType>` == `Component<{ prop: string }>`). ### bind:this changes From 3e223c746c4c4808bed706460b22cb58149e9028 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 2 Nov 2024 20:53:04 -0400 Subject: [PATCH 4/7] Apply suggestions from code review --- documentation/docs/07-misc/03-typescript.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md index 5e16382187ac..d3e523e7540d 100644 --- a/documentation/docs/07-misc/03-typescript.md +++ b/documentation/docs/07-misc/03-typescript.md @@ -226,6 +226,8 @@ To declare that a variable expects the constructor or instance type of a compone ``` + + ## Enhancing built-in DOM types Svelte provides a best effort of all the HTML DOM types that exist. Sometimes you may want to use experimental attributes or custom events coming from an action. In these cases, TypeScript will throw a type error, saying that it does not know these types. If it's a non-experimental standard attribute/event, this may very well be a missing typing from our [HTML typings](https://github.com/sveltejs/svelte/blob/main/packages/svelte/elements.d.ts). In that case, you are welcome to open an issue and/or a PR fixing it. From 186e915d82f6ece96e926d5058a2277aeeef5ee5 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 2 Nov 2024 20:58:40 -0400 Subject: [PATCH 5/7] Update documentation/docs/07-misc/03-typescript.md --- documentation/docs/07-misc/03-typescript.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md index d3e523e7540d..5e16382187ac 100644 --- a/documentation/docs/07-misc/03-typescript.md +++ b/documentation/docs/07-misc/03-typescript.md @@ -226,8 +226,6 @@ To declare that a variable expects the constructor or instance type of a compone ``` - - ## Enhancing built-in DOM types Svelte provides a best effort of all the HTML DOM types that exist. Sometimes you may want to use experimental attributes or custom events coming from an action. In these cases, TypeScript will throw a type error, saying that it does not know these types. If it's a non-experimental standard attribute/event, this may very well be a missing typing from our [HTML typings](https://github.com/sveltejs/svelte/blob/main/packages/svelte/elements.d.ts). In that case, you are welcome to open an issue and/or a PR fixing it. From ff2a29fcdc086dbad267909a0a65ccbb300d7900 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 2 Nov 2024 21:00:12 -0400 Subject: [PATCH 6/7] Update documentation/docs/07-misc/03-typescript.md --- documentation/docs/07-misc/03-typescript.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md index 5e16382187ac..de8b0f3d4dda 100644 --- a/documentation/docs/07-misc/03-typescript.md +++ b/documentation/docs/07-misc/03-typescript.md @@ -199,6 +199,8 @@ Using it together with dynamic components to restrict what kinds of component ca To extract the properties from a component, use `ComponentProps`. + + ```ts import type { Component, ComponentProps } from 'svelte'; import MyComponent from './MyComponent.svelte'; From 5a7bd61a644591b68d75ec3490901d8b1d237894 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 2 Nov 2024 21:08:49 -0400 Subject: [PATCH 7/7] Update documentation/docs/07-misc/03-typescript.md --- documentation/docs/07-misc/03-typescript.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md index de8b0f3d4dda..5e16382187ac 100644 --- a/documentation/docs/07-misc/03-typescript.md +++ b/documentation/docs/07-misc/03-typescript.md @@ -199,8 +199,6 @@ Using it together with dynamic components to restrict what kinds of component ca To extract the properties from a component, use `ComponentProps`. - - ```ts import type { Component, ComponentProps } from 'svelte'; import MyComponent from './MyComponent.svelte';