Add more JSX intrinsic element types

Adds JSX intrinsic element types for React 19, Preact and SolidJS. This
enables using the web component in JSX in projects with TypeScript using
these libraries, without having to manually augment the corresponding
module.

Only JSX augmentations are added because other libraries (like Svelte)
support custom elements out of the box with TypeScript.

Author: ingmarh

eslint.config.js

@@ -25,6 +25,8 @@ export default tseslint.config(
 					this: { before: false },
 				},
 			}],
+			'@typescript-eslint/no-empty-object-type': 'off',
+			'@typescript-eslint/no-explicit-any': 'off',
 			'@typescript-eslint/no-namespace': ['error', {
 				allowDeclarations: true,
 			}],

src/index.ts

@@ -1,23 +1,14 @@
 import { ScrollShadowElement } from './ScrollShadowElement.js'
-
-type IntrinsicBase = JSX.IntrinsicElements extends { span: infer SpanElement }
-	? SpanElement
-	: Record<string, unknown>
+import './jsx-augmentations.d.ts'
 
 declare global {
 	interface HTMLElementTagNameMap {
 		'scroll-shadow': ScrollShadowElement
 	}
-
-	namespace JSX {
-		interface IntrinsicElements {
-			'scroll-shadow': IntrinsicBase & { class?: string }
-		}
-	}
 }
 
-export { ScrollShadowElement }
-
 if ('customElements' in window && 'ResizeObserver' in window) {
 	customElements.define('scroll-shadow', ScrollShadowElement)
 }
+
+export { ScrollShadowElement }

src/jsx-augmentations.d.ts

@@ -0,0 +1,42 @@
+type Augmentation<T extends Record<string, any>, ExtraProps = {}> = {
+	'scroll-shadow': T['span'] & ExtraProps
+}
+
+declare global {
+	// React < 19
+	namespace JSX {
+		interface IntrinsicElements extends Augmentation<IntrinsicElements, { class?: string }> {}
+	}
+}
+
+declare module 'react' {
+	namespace JSX {
+		interface IntrinsicElements extends Augmentation<IntrinsicElements> {}
+	}
+}
+
+declare module 'react/jsx-runtime' {
+	namespace JSX {
+		interface IntrinsicElements extends Augmentation<IntrinsicElements> {}
+	}
+}
+
+declare module 'preact' {
+	namespace JSX {
+		interface IntrinsicElements extends Augmentation<IntrinsicElements> {}
+	}
+}
+
+declare module 'preact/jsx-runtime' {
+	namespace JSX {
+		interface IntrinsicElements extends Augmentation<IntrinsicElements> {}
+	}
+}
+
+declare module 'solid-js' {
+	namespace JSX {
+		interface IntrinsicElements extends Augmentation<IntrinsicElements> {}
+	}
+}
+
+export {}