mirror of https://github.com/sveltejs/svelte
breaking: remove Component type, keep using SvelteComponent instead (#9413)
I came to the conclusion that when we're making up arbitrary types, we might as well keep the old class. That way:
- one less thing to worry about (language tools and other tooling basically can continue to spit out SvelteComponent )
- we can more clearly mark $set , the constructor etc as being deprecated and no longer functioning unless you use that legacy compatibility mode
- much more ergonomic to type for the user:
- const someInstance: SvelteComponent<..> instead of const someInstance: ReturnType<typeof Component<..>>
- If you're using generics, you can do export class MyComponent<T> extends SvelteComponent<{ prop: T }> {} instead of having to type out the whole function in a way that I'm not even sure how to do with generics
pull/9424/head
Simon H
1 year ago
committed by
GitHub
parent
2ae953934d
commit
9a99554379
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
breaking: remove Component type, keep using SvelteComponent instead
|
||||||
@ -1,93 +0,0 @@
|
|||||||
/**
|
|
||||||
* @deprecated Use `Component` instead. See TODO for more information.
|
|
||||||
*/
|
|
||||||
export interface ComponentConstructorOptions<
|
|
||||||
Props extends Record<string, any> = Record<string, any>
|
|
||||||
> {
|
|
||||||
target: Element | Document | ShadowRoot;
|
|
||||||
anchor?: Element;
|
|
||||||
props?: Props;
|
|
||||||
context?: Map<any, any>;
|
|
||||||
hydrate?: boolean;
|
|
||||||
intro?: boolean;
|
|
||||||
$$inline?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @deprecated use `Component` instead. See TODO for more information.
|
|
||||||
*
|
|
||||||
* Base class for Svelte components in Svelte 4. Svelte 5+ components implement
|
|
||||||
* the `Component` interface instead. This class is only provided for backwards
|
|
||||||
* compatibility with Svelte 4 typings and doesn't have any runtime equivalent.
|
|
||||||
*
|
|
||||||
* 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
|
|
||||||
* <script lang="ts">
|
|
||||||
* import { MyComponent } from "component-library";
|
|
||||||
* </script>
|
|
||||||
* <MyComponent foo={'bar'} />
|
|
||||||
* ```
|
|
||||||
*/
|
|
||||||
export class SvelteComponent<
|
|
||||||
Props extends Record<string, any> = any,
|
|
||||||
Events extends Record<string, any> = any,
|
|
||||||
Slots extends Record<string, any> = any
|
|
||||||
> {
|
|
||||||
[prop: string]: any;
|
|
||||||
|
|
||||||
constructor(options: ComponentConstructorOptions<Props>);
|
|
||||||
/**
|
|
||||||
* For type checking capabilities only.
|
|
||||||
* Does not exist at runtime.
|
|
||||||
* ### DO NOT USE!
|
|
||||||
*
|
|
||||||
* */
|
|
||||||
$$prop_def: Props;
|
|
||||||
/**
|
|
||||||
* 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;
|
|
||||||
|
|
||||||
$destroy(): void;
|
|
||||||
|
|
||||||
$on<K extends Extract<keyof Events, string>>(
|
|
||||||
type: K,
|
|
||||||
callback: (e: Events[K]) => void
|
|
||||||
): () => void;
|
|
||||||
|
|
||||||
$set(props: Partial<Props>): void;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @deprecated Use `Component` instead. See TODO for more information.
|
|
||||||
*/
|
|
||||||
export class SvelteComponentTyped<
|
|
||||||
Props extends Record<string, any> = any,
|
|
||||||
Events extends Record<string, any> = any,
|
|
||||||
Slots extends Record<string, any> = any
|
|
||||||
> extends SvelteComponent<Props, Events, Slots> {}
|
|
||||||
|
|
||||||
export * from './legacy-client.js';
|
|
||||||
Loading…
Reference in new issue