Allow to set custom types from data-attributes

[raythurnvoid]

Describe the problem

I would like to restrict the values allowed in a data-attribute similarly to what is already possible with completely non-standard attributes using the svelteHTML namespace.

Today svelte will accept any value in any data-attribute and there seems to be no way to restrict it, even overriding the svelte's internal .d.ts (like non-ambient.d.ts and elements.d.ts) files seems to not have any effect.

Describe the proposed solution

Allow this:

// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
	namespace App {
		// interface Error {}
		// interface Locals {}
		// interface PageData {}
		// interface PageState {}
		// interface Platform {}
	}

	namespace svelteHTML {
		// enhance elements
		interface IntrinsicElements {
			// 'my-custom-element': { someattribute: string; 'on:event': (e: CustomEvent<any>) => void };
		}
		// enhance attributes
		interface HTMLAttributes<T> {
			// If you want to use the beforeinstallprompt event
			// onbeforeinstallprompt?: (event: any) => any;
			// If you want to use myCustomAttribute={..} (note: all lowercase)
			// mycustomattribute?: any; // You can replace any with something more specific if you like

			'data-hello'?: 'hello';
		}
	}
}

export {};

Importance

nice to have

[webJose]

Are you trying to type props for a component? The following works for me:

<script lang="ts">
    import type { HTMLAttributes } from "svelte/elements";

    type Props = HTMLAttributes<HTMLDivElement> & {
        'data-hello'?: 'hello' | undefined;
    }

    let props: Props = $props();
</script>

<div {...props}></div>

Attribute prediction:

Possible value list:

Error when the value is not in the list:

[webJose]

Ah ok, I see. Not for components, just to extend the interface.

I tried this in src/x.d.ts:

declare namespace svelteHTML {
    interface HTMLAttributes<T> {
        'data-yellow'?: 'yellow' | undefined;
        'data-id'?: number;
    }
}

Both attributes start to appear in Intellisense, but Intellisense says they are of type Boolean. Weird.