Component inheritance

[pournasserian]

While developing a component library, there are some properties and functionalities which are shared between many components.

Here are some examples:

• class
• if
• on:click
• id
• etc.

Read this Svelte Issue first.

<script lang="ts">
    import type { ComponentProps } from 'svelte';
    interface $$Props extends  ComponentProps<Button> {}
</script>


<Button whateverButtonProp={...} {...$$restProps} on:click on:any-action-you-wanna-forward>
	<slot />
</Button>

There are some options:

• Using above code
• Using/refactoring external library here
• Using context
• Developing a custom preprocessor
• Using Svelte native: here is a draft: Repl
• Using Svelte native: here is a draft: Repl
• Using Svelte native: here is a draft: Repl
• Using Svelte native: here is a draft: Repl

[TheHadiAhmadi]

It would be great if we can find a way to also extend HTML props in above code

for example Input component should extend HTMLProps<HTMLInputElement> type and FormInput component extend from ComponentProps<Input>

this is definition of jsx-dom types which svelte.JSX namespace also supports it
https://github.com/alex-kinokon/jsx-dom/blob/be06937ba16908d87bf8aa4372a3583133e02b8a/index.d.ts

[TheHadiAhmadi]

FormInput

<script lang="ts">
	import type { ComponentProps } from 'svelte/internal'
	import { Input } from '$lib/components'
	
	// interface $$Props extends ComponentProps<Input>, ComponentProps<FormInput> {} <- cannot find FormInput
        interface $$Props extends ComponentProps<Input> {}
        export let myProp: string = 'default' 
</script>
{myProp}
<Input {...$$restProps} />

+page.svelte

<FormInput placeholder="this prop works" myProp="VSCode does not suggest this prop"/>

[TheHadiAhmadi]

github.com/sveltepackages/svelteui-core/src/components/Grid/Grid.svelte related to $$Props interface and props