[Feature Request] An alternative way to create component props with an interface

[D-Marc1]

Describe the problem

There's times when the same interface you're using for a component's props, is used in multiple other places in the application.

I hate that you can't use interfaces with Svelte props, since you have you declare props one by one. Example:

export let count: number = 0
export let name: string = ''

It would be nice if you could pass in interfaces, like the following:

interface Props {
  count: number
  name: string
}

Obviously a contrived example, as the type can be inferred, but please ignore that for this sake.

Describe the proposed solution

Something like Vue 3 Reactivity Transform (which incidentally won't be supported natively to destructure, despite being an experimental feature):

interface Props {
  count: number
  name: string
}

const { count = 0, name = '' } = defineProps<Props>()

The interface would then control whether or not a prop is optional, like so:

interface Props {
  count?: number
  name?: string
}

Alternatives considered

I'm not aware of any alternatives that currently exist to solve this issue. It's one of the rare things I feel like Svelte is lacking, which is an otherwise delightful library to use.

Importance

would make my life easier

[brunnerh]

It would be possible to do this via a preprocessor but the tooling support is not there.
I.e. no properly generated type definitions or property completions, combined with errors for missing variable declarations.

It runs, though.

A sketch that does not handle imports

import ts from 'typescript';

/** @returns {import('svelte/types/compiler/preprocess').PreprocessorGroup} */
export function tsPropsPreprocessor() {
	return {
		script: ({ filename, content, attributes }) => {
			if (!attributes.lang || attributes.lang !== 'ts' || content == null)
				return;

			try {
				return process(filename, content);
			}
			catch (e) {
				console.error(`Failed to parse ${filename}.`, e);
			}
		},
	}
}

/** @param {string} filename */
/** @param {string} content */
function process(filename, content) {
	const file = ts.createSourceFile(
		filename, content,
		ts.ScriptTarget.Latest,
	);

	/** @type {ts.Node} */
	let propsNode = null;
	const props = {};

	/** @param {ts.Node} node */
	function visit(node) {
		if (node.kind == ts.SyntaxKind.InterfaceDeclaration &&
			node.name.text === 'Props') {
			for (const member of node.members) {
				if (member.kind == ts.SyntaxKind.PropertySignature) {
					const { name, type } = member;
					props[name.text] = content.substring(type.pos, type.end);
				}
			}

			if (propsNode != null)
				throw new Error('Multiple Props interfaces found.');

			propsNode = node;
			return;
		}

		node.forEachChild(visit);
	}

	visit(file);

	if (propsNode == null || Object.keys(props).length === 0)
		return;

	const code =
		content.substring(0, propsNode.pos) +
		Object.entries(props)
			.map(([name, type]) => `export let ${name}:${type};`)
			.join('\n') +
		content.substring(propsNode.end);

	return { code };
}

That turns this:

<script lang="ts">
	interface Props {
		name: string;
		age: number;
	}
</script>

Into something like this:

<script lang="ts">
	export let name: string;
	export let age: number;
</script>

(Manually formatted; white space will be garbled.)

[wiwa]

+1 to something like this (new to Svelte/Typescript, from Scala).

Personally, I would love to see something like a function declaration.

A component definition is (Props, others...) => Component, maybe something like satisfies ((Props, Reactives, Events, etc) => Component).

Maybe we could even have a special variable

<script lang="ts">
$$def.props = { name: string, age: number}
<script />

or

<script lang="ts">
interface Props {
		name: string;
		age: number;
	}
$$def.props satistfies Props
<script />

Not sure if these make sense, but I think that having Svelte's special sauces link closer into Typescript's typing is a good direction.

Personally, it would be cool if Svelte could export some predefined "components", allowing syntax like:

// top of SomeComponent.svelte
<Def component
    props={name: string, age: number}
    reactives={}
/>

// top of SomeComponent.svelte
<script>
interface Props {
    ...
}
</script>
<Def component {Props} />

[D-Marc1]

Hey @Rich-Harris, any chance something like this could be considered? I know you're not the biggest fan of TypeScript, anyway, but even in normal JavaScript, this proposal could potentially be useful. Destructuring an object that's the return value of a function, like defineProps(), feels much more idiomatic in web development than exporting variables, to represent component props.

const { count = 0, name = '' } = defineProps()

export let count = 0
export let name = ''

The former example feels like it would be much more natural to a beginner who just learned JavaScript.

[D-Marc1]

I see this is actually implemented in Svelte 5. Yay!

Now I'm curious, is it because of my suggestion or just a mere coincidence? Anyone know?

In any case, this is an absolute game-changer!