fix(types): reflect html standard in propNames type

src/index.d.ts

@@ -1,5 +1,18 @@
 import { h, AnyComponent } from 'preact';
 
+export type Kebab<
+	T extends string,
+	A extends string = ''
+> = T extends `${infer F}${infer R}`
+	? Kebab<R, `${A}${F extends Lowercase<F> ? '' : '-'}${Lowercase<F>}`>
+	: A;
+
+export type KebabKeys<T> = {
+	[K in keyof T as K extends string ? Kebab<K> : K]: T[K];
+};
+
+export type ObservedAttributeKeys<T> = Array<keyof KebabKeys<T>>;
+
 type PreactCustomElement = HTMLElement & {
 	_root: ShadowRoot | HTMLElement;
 	_vdomComponent: AnyComponent;
@@ -49,6 +62,6 @@ type Options =
 export default function register<P = {}, S = {}>(
 	Component: AnyComponent<P, S>,
 	tagName?: string,
-	propNames?: (keyof P)[],
+	propNames?: ObservedAttributeKeys<P>,
 	options?: Options
 ): HTMLElement;

test/types.test.tsx

@@ -1,20 +1,28 @@
-import { h } from 'preact';
+import { FunctionComponent, h } from 'preact';
 import registerElement from '../src/index';
 
 interface AppProps {
-	name: string;
+	firstName: string;
+	lastName: string;
 }
 
 function App(props: AppProps) {
-	return <h1>Hello {props.name}!</h1>;
+	return (
+		<h1>
+			Hello {props.firstName} {props.lastName}!
+		</h1>
+	);
 }
 
-registerElement(App, 'my-app', ['name']);
+registerElement(App, 'my-app', ['first-name', 'last-name']);
 
 // @ts-expect-error `bar` is not a valid prop, so it should not be an observed attribute
-registerElement(App, 'my-app', ['name', 'bar']);
+registerElement(App, 'my-app', ['first-name', 'last-name', 'bar']);
 
-registerElement(App, 'my-app-shadow', ['name'], {
+// @ts-expect-error props in camelcase are not valid
+registerElement(App, 'my-app', ['firstName', 'lastName']);
+
+registerElement(App, 'my-app-shadow', ['first-name', 'last-name'], {
 	shadow: false,
 	// @ts-expect-error should not set shadow DOM mode when `shadow` is false
 	mode: 'open',