fix(web,h): type data-* attributes in props objects (#4082)

.changeset/data-attribute-types.md

@@ -0,0 +1,6 @@
+---
+"@solidjs/web": patch
+"@solidjs/h": patch
+---
+
+`data-*` attributes type-check in props objects (`ComponentProps<"div">`, `JSX.HTMLAttributes<T>`), not only in JSX: a template-literal index signature on `ElementAttributes` (#4082).

packages/h/jsx-runtime/src/jsx.d.ts

@@ -892,6 +892,13 @@ export namespace JSX {
     extends CustomAttributes<T>, PropAttributes, EventHandlersElement<T>, AriaAttributes {
     // [key: ClassKeys]: boolean;
 
+    /**
+     * `data-*` attributes. JSX already accepts hyphenated names; this types
+     * them in props objects too (`ComponentProps<"div">`, a spread's source).
+     * `true` writes `""`; `false` and `undefined` remove the attribute.
+     */
+    [key: `data-${string}`]: FunctionMaybe<string | number | boolean | undefined>;
+
     // properties
     innerHTML?: FunctionMaybe<string>;
     textContent?: FunctionMaybe<string | number>;

packages/web/jsx/jsx-h.d.ts

@@ -893,6 +893,13 @@ export namespace JSX {
     extends CustomAttributes<T>, PropAttributes, EventHandlersElement<T>, AriaAttributes {
     // [key: ClassKeys]: boolean;
 
+    /**
+     * `data-*` attributes. JSX already accepts hyphenated names; this types
+     * them in props objects too (`ComponentProps<"div">`, a spread's source).
+     * `true` writes `""`; `false` and `undefined` remove the attribute.
+     */
+    [key: `data-${string}`]: FunctionMaybe<string | number | boolean | undefined>;
+
     // properties
     innerHTML?: FunctionMaybe<string>;
     textContent?: FunctionMaybe<string | number>;

packages/web/jsx/jsx.d.ts

@@ -896,6 +896,13 @@ export namespace JSX {
     extends CustomAttributes<T>, PropAttributes, EventHandlersElement<T>, AriaAttributes {
     // [key: ClassKeys]: boolean;
 
+    /**
+     * `data-*` attributes. JSX already accepts hyphenated names; this types
+     * them in props objects too (`ComponentProps<"div">`, a spread's source).
+     * `true` writes `""`; `false` and `undefined` remove the attribute.
+     */
+    [key: `data-${string}`]: string | number | boolean | undefined;
+
     // properties
     innerHTML?: string;
     textContent?: string | number;

packages/web/test/data-attributes.type-tests.ts

@@ -0,0 +1,20 @@
+// `data-*` attributes in props objects (#4082): JSX already accepts
+// hyphenated names on intrinsic elements, and an object typed with the same
+// element's props now accepts them too, so a function returning props to
+// spread type-checks without a cast.
+import type { ComponentProps, JSX } from "@solidjs/web";
+
+export const attrs: JSX.HTMLAttributes<HTMLDivElement> = { "data-state": "open" };
+export const props: ComponentProps<"div"> = { role: "button", "data-state": "open" };
+
+function disclosure(): ComponentProps<"button"> {
+  return { "aria-expanded": "false", "data-state": "closed", "data-count": 2, "data-open": false };
+}
+export const forwarded: ComponentProps<"button"> = { ...disclosure(), "data-extra": true };
+
+type P = Omit<ComponentProps<"div">, "ref">;
+export const withClass: P = { "data-x": "1", class: "a" };
+// @ts-expect-error unknown non-data keys are still rejected
+export const unknownKey: P = { foo: 1 };
+// @ts-expect-error data values stay primitive
+export const objectValue: P = { "data-x": {} };