[Proposal] $Props — Define props with classes

[Refzlund]

Class props

The ability to re-use, type and extend component props — all in one go.

Introduction

Imagine you have a Base.svelte component

<script lang='ts' module>
    export interface BaseProps {
        value: unknown
        readonly required: false
    } 
</script>

<script lang='ts'>
    let {
        value = bindable(),
        required = false,
        ...
    }: BaseProps = $props()
</script>

...

And we make use of that for a bunch of other components such as Derived.svelte

<script lang='ts' module>
    import { type BaseProps, default as Base } from './Base.svelte'

    interface DerivedProps extends BaseProps { ... }
</script>

<script lang='ts'>
    let {
        value = bindable(),
        required = false,
        ...,
        ...rest
    }: DerivedProps & HTMLDivElementProps = $props()

    $effect(() => { value ... })

</script>

<Base
    bind:value,
    {required}
>
    <div {...rest}>
        ...

Two things are happening here:

1. We need to continously bind:value
2. We need to specify what properties are forwarded to <Base>

Another downside, is that if we want to "expose" these props via ex. setContext, or add them to a class that manages some logic we'd have to provide a new object;

<script lang='ts'>
    import { LogicHandler } from './logic-handler.svelte.ts'
    
    const {
        value = $bindable(),
        required = false,
        ...
    }: BaseProps = $props()

    const context = {
        get value() { return value },
        set value(v) { value = v },
        get required() { return required },
        ...
    }

    setContext('Base', context)
</script>

And so we repeat ourselves A LOT.

Proposal

I propose that we establish a $Props / SvelteProps class that can be extended to define a $Prop-interface.

<script lang='ts' module>
    class BaseProps<T> extends $Props {
        value: T // getter & setter 
        readonly required: boolean = false // getter
    }
</script>

Tip

Alternative syntax

<script lang='ts' module>
    class BaseProps<T> extends SvelteProps {
        value: T = $bindable()
        readonly required: boolean = false
    }
</script>

We'd use this as normal, but having props already be defined as readonly or $bindable.

<script lang='ts'>
    type T = $$Generic
    const {
        value,
        required
    }: BaseProps<T> = $props(BaseProps)
</script>

The idea, however. Is that $props(...) now returns an instance of BaseProps, which we can reference. This is where the power comes in:

<script lang='ts'>
    import { LogicHandler } from './logic-handler.svelte.ts'

    type T = $$Generic
    const props: BaseProps<T> = $props(BaseProps)

    const handler = new LogicHandler(props)
    $effect(() => { handler.reactiveProperty })
    
    setContext('Base', base)
</script>

A MAJOR shortcut!

That's not all. Let's extend this badboy

<script lang='ts' module>
    import { BaseProps, default as Base } from './Base.svelte'

    class DerivedProps extends BaseProps {
        readonly name: string
        ...
    }
</script>

We're simply extending the BaseProps, and we include $binding()'s just like that. We can then use a $Props static function to separate the BaseProps from everything else.

<script lang='ts'>

    const props: DerivedProps & HTMLDivElementProps = $props(DerivedProps)

    const baseProps = BaseProps.derived(props)
    /*
        equivalent to @example
        const baseProps = {
            get value() { return props.value },
            set value(v) { props.value = v },
            get required() { return props.required }
        }
    */
    baseProps instanceof BaseProps // true

</script>

<Base {...baseProps}>
    ...

By using additional utility functions target on which element @attach goes on (via .$attachments), and potentially keys not specified by the child classes of $Props.

<script lang='ts'>
    const props: DerivedProps & HTMLInputElementProps = $props(DerivedProps)

    const baseProps = BaseProps.derived(props)
    const inputProps = DerivedProps.rest(props) // extracts keys not defined within the classes
</script>

<div {...props.$attachments}>
    <Base {...baseProps}>
        <input bind:value={props.value} {...inputProps} />
    </Base>
</div>

We now have an impactful, systematically structured, reactive system relating to the props, that we can pass on to various logical classes.

It's easy to read, and in my experience levels up the props-game.

Further

Can we go further — should be go further?

As an additional sparkling idea, we could via the $Props handle the incoming and outgoing dataflow in the same mannerism, as bind:value={() => getter, (v) => setter}.

<script lang='ts' module>

    class Props extends $Props {

        // We can a `private` or `protected` property, that acts just like any other Component prop (as discussed so far)
        #creationDate: Date

        // We can then define custom getters and setters

        /** 
            Equivalent to @example
            
            $derived(
                this.#creationDate == undefined || this.#creationDate instanceof Date ? this.#creationDate : new Date(this.#creationDate.toString())
            )
        */
        get creationDate() {
            return this.#creationDate == undefined || this.#creationDate instanceof Date ? this.#creationDate : new Date(this.#creationDate.toString())
        }

        /** 
            Equivalent to @example
            
            bind:value={
                ...,
                (value) => value == undefined || value instanceof Date ? value : new Date(value.toString())
            }

        */
        set creationDate(value) {
            this.#creationDate = value == undefined || value instanceof Date ? value : new Date(value.toString())
        }
    }

</script>

This is last part for custom getters and setters is not core of this proposal. It's an additional way this methodology could benefit the developer with more control.