Skip to content

Commit 65e5249

Browse files
authored
docs: remove mention of deprecated way to enhance typings (#16416)
Since #9070 it's prefered to use the "enhance svelte elements" way of doing things. That's so long ago that we can now remove the other option from the docs, and eventually remove the backwards compatibility that still allows the old way of doing things.
1 parent bdf6adb commit 65e5249

File tree

2 files changed

+11
-23
lines changed

2 files changed

+11
-23
lines changed

documentation/docs/07-misc/03-typescript.md

Lines changed: 10 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -254,43 +254,30 @@ To declare that a variable expects the constructor or instance type of a compone
254254

255255
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.
256256

257-
In case this is a custom or experimental attribute/event, you can enhance the typings like this:
258-
259-
```ts
260-
/// file: additional-svelte-typings.d.ts
261-
declare namespace svelteHTML {
262-
// enhance elements
263-
interface IntrinsicElements {
264-
'my-custom-element': { someattribute: string; 'on:event': (e: CustomEvent<any>) => void };
265-
}
266-
// enhance attributes
267-
interface HTMLAttributes<T> {
268-
// If you want to use the beforeinstallprompt event
269-
onbeforeinstallprompt?: (event: any) => any;
270-
// If you want to use myCustomAttribute={..} (note: all lowercase)
271-
mycustomattribute?: any; // You can replace any with something more specific if you like
272-
}
273-
}
274-
```
275-
276-
Then make sure that `d.ts` file is referenced in your `tsconfig.json`. If it reads something like `"include": ["src/**/*"]` and your `d.ts` file is inside `src`, it should work. You may need to reload for the changes to take effect.
277-
278-
You can also declare the typings by augmenting the `svelte/elements` module like this:
257+
In case this is a custom or experimental attribute/event, you can enhance the typings by augmenting the `svelte/elements` module like this:
279258

280259
```ts
281260
/// file: additional-svelte-typings.d.ts
282261
import { HTMLButtonAttributes } from 'svelte/elements';
283262

284263
declare module 'svelte/elements' {
264+
// add a new element
285265
export interface SvelteHTMLElements {
286266
'custom-button': HTMLButtonAttributes;
287267
}
288268

289-
// allows for more granular control over what element to add the typings to
269+
// add a new global attribute that is available on all html elements
270+
export interface HTMLAttributes<T> {
271+
globalattribute?: string;
272+
}
273+
274+
// add a new attribute for button elements
290275
export interface HTMLButtonAttributes {
291276
veryexperimentalattribute?: string;
292277
}
293278
}
294279

295280
export {}; // ensure this is not an ambient module, else types will be overridden instead of augmented
296281
```
282+
283+
Then make sure that the `d.ts` file is referenced in your `tsconfig.json`. If it reads something like `"include": ["src/**/*"]` and your `d.ts` file is inside `src`, it should work. You may need to reload for the changes to take effect.

packages/svelte/svelte-html.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ declare global {
5050
? SVGElementTagNameMap[Key]
5151
: any;
5252

53+
// TODO remove HTMLAttributes/SVGAttributes/IntrinsicElements in Svelte 6
5354
// For backwards-compatibility and ease-of-use, in case someone enhanced the typings from import('svelte/elements').HTMLAttributes/SVGAttributes
5455
// eslint-disable-next-line @typescript-eslint/no-unused-vars
5556
interface HTMLAttributes<T extends EventTarget = any> {}

0 commit comments

Comments
 (0)