backport #3690

preactjs · Sep 2, 2022 · 8af20c0 · 8af20c0
1 parent dbed283
commit 8af20c0
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 8 deletions.
diff --git a/follow-ups.md b/follow-ups.md
@@ -21,6 +21,7 @@ PR's that weren't backported yet, do they work?
 - https://github.com/preactjs/preact/pull/3280 Not merged yet need some input
 - https://github.com/preactjs/preact/pull/3222 Same as above
 - Make this work https://github.com/preactjs/preact/pull/3306
+- https://github.com/preactjs/preact/pull/3696
 
 ## Root node follow ups
 

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -183,11 +183,35 @@ export abstract class Component<P, S> {
 // -----------------------------------
 
 export function createElement(
+	type: 'input',
+	props:
+		| (JSXInternal.DOMAttributes<HTMLInputElement> &
+				ClassAttributes<HTMLInputElement>)
+		| null,
+	...children: ComponentChildren[]
+): VNode<any>;
+export function createElement<
+	P extends JSXInternal.HTMLAttributes<T>,
+	T extends HTMLElement
+>(
+	type: keyof JSXInternal.IntrinsicElements,
+	props: (ClassAttributes<T> & P) | null,
+	...children: ComponentChildren[]
+): VNode<any>;
+export function createElement<
+	P extends JSXInternal.SVGAttributes<T>,
+	T extends HTMLElement
+>(
+	type: keyof JSXInternal.IntrinsicElements,
+	props: (ClassAttributes<T> & P) | null,
+	...children: ComponentChildren[]
+): VNode<any>;
+export function createElement<T extends HTMLElement>(
 	type: string,
 	props:
-		| (JSXInternal.HTMLAttributes &
-				JSXInternal.SVGAttributes &
-				Record<string, any>)
+		| (ClassAttributes<T> &
+				JSXInternal.HTMLAttributes &
+				JSXInternal.SVGAttributes)
 		| null,
 	...children: ComponentChildren[]
 ): VNode<any>;
@@ -201,11 +225,35 @@ export namespace createElement {
 }
 
 export function h(
+	type: 'input',
+	props:
+		| (JSXInternal.DOMAttributes<HTMLInputElement> &
+				ClassAttributes<HTMLInputElement>)
+		| null,
+	...children: ComponentChildren[]
+): VNode<any>;
+export function h<
+	P extends JSXInternal.HTMLAttributes<T>,
+	T extends HTMLElement
+>(
+	type: keyof JSXInternal.IntrinsicElements,
+	props: (ClassAttributes<T> & P) | null,
+	...children: ComponentChildren[]
+): VNode<any>;
+export function h<
+	P extends JSXInternal.SVGAttributes<T>,
+	T extends HTMLElement
+>(
+	type: keyof JSXInternal.IntrinsicElements,
+	props: (ClassAttributes<T> & P) | null,
+	...children: ComponentChildren[]
+): VNode<any>;
+export function h<T extends HTMLElement>(
 	type: string,
 	props:
-		| (JSXInternal.HTMLAttributes &
-				JSXInternal.SVGAttributes &
-				Record<string, any>)
+		| (ClassAttributes<T> &
+				JSXInternal.HTMLAttributes &
+				JSXInternal.SVGAttributes)
 		| null,
 	...children: ComponentChildren[]
 ): VNode<any>;
@@ -224,7 +272,7 @@ export namespace h {
 
 export function render(
 	vnode: ComponentChild,
-	parent: Element | Document | ShadowRoot | DocumentFragment,
+	parent: Element | Document | ShadowRoot | DocumentFragment
 ): void;
 export function hydrate(
 	vnode: ComponentChild,

diff --git a/test/ts/preact.tsx b/test/ts/preact.tsx
@@ -5,7 +5,8 @@ import {
 	ComponentProps,
 	FunctionalComponent,
 	AnyComponent,
-	h
+	h,
+	createRef
 } from '../../';
 
 interface DummyProps {
@@ -295,3 +296,20 @@ let elementProps: ComponentProps<'button'> = {
 // Typing of style property
 const acceptsNumberAsLength = <div style={{ marginTop: 20 }} />;
 const acceptsStringAsLength = <div style={{ marginTop: '20px' }} />;
+
+// Refs should work on elements
+const ref = createRef<HTMLDivElement>();
+createElement('div', { ref: ref }, 'hi');
+h('div', { ref: ref }, 'hi');
+
+// Refs should work on functions
+const functionRef = createRef();
+const RefComponentTest = () => <p>hi</p>;
+createElement(RefComponentTest, { ref: functionRef }, 'hi');
+h(RefComponentTest, { ref: functionRef }, 'hi');
+
+// Should accept onInput
+const onInput = (e: h.JSX.TargetedEvent<HTMLInputElement>) => {};
+<input onInput={onInput} />;
+createElement('input', { onInput: onInput });
+h('input', { onInput: onInput });