Typing Data Attributes with Discriminated Union

[rawrmonstar]

I'm exploring heavily using data attributes, mostly for applying styles, but I would like to type them. Is it possible to type data attributes such that they are a discriminated union?

declare global {
	namespace preact.JSX {
		type TextData =
			| {
					"data-text-variant": "body"
					"data-text-size"?: "xl" | "lg" | "md" | "sm" | "xs" | undefined
			  }
			| {
					"data-text-variant": "heading"
					"data-text-size"?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
			  }

		// This doesn't work
		interface HTMLAttributes extends TextData {}
	}
}

// This empty export is important! It tells TS to treat this as a module
export {}

I have two attributes: data-text-variant and data-text-size if data-text-variant is "body" data-text-size accepts one set of values, if "heading" it takes a different set of values.

Since HTMLAttributes are an interface and we add typings through interface merging I'm not seeing a way to actually do this...

Has anyone done something like this before? How did you?

[rschristian]

I don't think it's possible, sorry. We have a number of interfaces that must extend HTMLAttributes too, so even if you could switch it to a type, it'd break everything else.

I switched some of our per-element types (ButtonHTMLAttributes, AudioHTMLAttributes, etc) to type a while ago to support ARIA roles but even that I'm a bit worried about; switching everything to type seems like it might have some problematic perf characteristics and break compat.

FWIW, React & other JSX libs should generally work the same so if you do find a solution that applies to them, try it & let us know if we need to adjust something.