Require props to be bound

[ciscoheat]

Describe the problem

When creating a component, I notice that there are essentially three types of props:

1. Those that should be bound with bind:name, otherwise the component doesn't work properly
2. Those that could be bound with bind:name
3. Those that should be static data or configuration: key="configValue"

But when someone is consuming the component, they won't know which kind each prop should be, or at least if it should be type 1 or not.

Describe the proposed solution

It would be nice if Svelte provided a way to make component props required to be bound, to ensure that type 1 is used.

I understand it would be hard though to add this kind of metadata within the javascript syntax. For typescript, maybe it could be something like:

import type { Bound } from 'svelte';

export let data: Bound<string[]>

Alternatives considered

A convention like capitalized props for type 1 is my poor man's fix for now, but that requires people to know that convention, so of course a built-in language feature would be the best!

In the documentation for component libraries like this one, they added a "Reactive" tag to the props that could be reactive, so that covers types 1 and 2, but not just 1.

Importance

would make my life easier

[theetrain]

When creating a component, I notice that there are essentially three types of props:

1. Those that should be bound with bind:name, otherwise the component doesn't work properly
2. Those that could be bound with bind:name
3. Those that should be static data or configuration: key="configValue"

Given the following typed component example:

export default class Dropdown extends SvelteComponentTyped<{
    [x: string]: any;
    selectedId: any;
    invalid?: boolean;
    size?: "sm" | "xl" | "lg";
    // ...
}>

We know that:

1. selectedId is required, but we're not sure if the component writes to it (implied 2-way binding)
2. invalid is optional, but we're not sure if there's 2-way binding available

With Sveld, we collect and document "Reactive" props by determining which variables are writable and reassigned. Here's the logic for collecting reactive variables.

I don't know if there's a way to indicate reassigned with TypeScript. Perhaps as an idea to solve for 1-3 above, inferred types for 2-way-bound props could include a Supports 2-way binding message in the prop popover. I'm not sure about the i18n efforts involved, so if hard-coding this in English isn't appropriate, perhaps a non-standard @bound tag could be used instead. Here's how that might look:

[Prinzhorn]

#7525

[coryvirok]

Wouldn't it be more typescript-y to define non-reassignable variables the readonly type qualifier? That might also enable enforcement/hinting of the immutable component option.

https://svelte.dev/tutorial/svelte-options

[Rich-Harris]

In Svelte 5, props are only bindable if they are marked as such, so I'll close this as completed. (We don't differentiate between static and non-static props but I'm not sure how useful such a distinction would be.)

[ciscoheat]

It's always nice to see how you come up with clever solutions!