Add TypeScript for extending JSX types with custom elements

package.json

@@ -230,7 +230,7 @@
     "prop-types": "^15.7.2",
     "sinon": "^6.1.3",
     "sinon-chai": "^3.0.0",
-    "typescript": "^3.0.1",
+    "typescript": "3.5.3",
     "webpack": "^4.3.0"
   }
 }

src/index.d.ts

@@ -15,7 +15,7 @@ declare namespace preact {
 		props: P & { children: ComponentChildren };
 		key: Key;
 		/**
-		 * ref is not guaranteed by React.ReactElement, for compatiblity reasons
+		 * ref is not guaranteed by React.ReactElement, for compatibility reasons
 		 * with popular react libs we define it as optional too
 		 */
 		ref?: Ref<any> | null;

test/ts/Component-test.tsx

@@ -1,11 +1,6 @@
 import 'mocha';
 import { expect } from 'chai';
-import {
-	createElement,
-	Component,
-	RenderableProps,
-	Fragment
-} from '../../src/';
+import { createElement, Component, RenderableProps, Fragment } from '../../';
 
 // Test `this` binding on event handlers
 function onHandler(this: HTMLInputElement, event: any) {

test/ts/VNode-test.tsx

@@ -10,7 +10,7 @@ import {
 	VNode,
 	ComponentChildren,
 	cloneElement
-} from '../../src';
+} from '../../';
 
 function getDisplayType(vnode: VNode | string | number) {
 	if (typeof vnode === 'string' || typeof vnode == 'number') {

test/ts/custom-elements.tsx

@@ -0,0 +1,85 @@
+import { createElement, Component, createContext } from '../../';
+
+declare module '../../' {
+	namespace createElement.JSX {
+		interface IntrinsicElements {
+			// Custom element can use JSX EventHandler definitions
+			'clickable-ce': {
+				optionalAttr?: string;
+				onClick?: MouseEventHandler<HTMLElement>;
+			};
+
+			// Custom Element that extends HTML attributes
+			'color-picker': HTMLAttributes & {
+				// Required attribute
+				space: 'rgb' | 'hsl' | 'hsv';
+				// Optional attribute
+				alpha?: boolean;
+			};
+
+			// Custom Element with custom interface definition
+			'custom-whatever': WhateveElAttributes;
+		}
+	}
+}
+
+// Whatever Element definition
+
+interface WhateverElement {
+	instanceProp: string;
+}
+
+interface WhateverElementEvent {
+	eventProp: number;
+}
+
+// preact.JSX.HTMLAttributes also appears to work here but for consistency,
+// let's use createElement.JSX
+interface WhateveElAttributes extends createElement.JSX.HTMLAttributes {
+	someattribute?: string;
+	onsomeevent?: (this: WhateverElement, ev: WhateverElementEvent) => void;
+}
+
+// Ensure context still works
+const { Provider, Consumer } = createContext({ contextValue: '' });
+
+// Sample component that uses custom elements
+
+class SimpleComponent extends Component {
+	componentProp = 'componentProp';
+	render() {
+		// Render inside div to ensure standard JSX elements still work
+		return (
+			<Provider value={{ contextValue: 'value' }}>
+				<div>
+					<clickable-ce
+						onClick={e => {
+							// `this` should be instance of SimpleComponent since this is an
+							// arrow function
+							console.log(this.componentProp);
+
+							// Validate `currentTarget` is HTMLElement
+							console.log('clicked ', e.currentTarget.style.display);
+						}}
+					></clickable-ce>
+					<color-picker space="rgb" dir="rtl"></color-picker>
+					<custom-whatever
+						dir="auto" // Inherited prop from HTMLAttributes
+						someattribute="string"
+						onsomeevent={function(e) {
+							// Validate `this` and `e` are the right type
+							console.log('clicked', this.instanceProp, e.eventProp);
+						}}
+					></custom-whatever>
+
+					{/* Ensure context still works */}
+					<Consumer>
+						{({ contextValue }) => contextValue.toLowerCase()}
+					</Consumer>
+				</div>
+			</Provider>
+		);
+	}
+}
+
+const component = <SimpleComponent />;

test/ts/hoc-test.tsx

@@ -4,7 +4,7 @@ import {
 	ComponentFactory,
 	ComponentConstructor,
 	Component
-} from '../../src';
+} from '../../';
 import { SimpleComponent, SimpleComponentProps } from './Component-test';
 
 export interface highlightedProps {

test/ts/jsx-namespacce-test.tsx

@@ -1,4 +1,4 @@
-import { createElement, Component } from '../../src';
+import { createElement, Component } from '../../';
 
 // declare global JSX types that should not be mixed with preact's internal types
 declare global {

test/ts/preact.tsx

@@ -5,7 +5,7 @@ import {
 	FunctionalComponent,
 	AnyComponent,
 	h
-} from '../../src';
+} from '../../';
 
 interface DummyProps {
 	initialInput: string;
@@ -207,7 +207,8 @@ class DefaultPropsWithUnion extends Component<
 		| {
 				type: 'number';
 				num: number;
-		  })
+		  }
+	)
 > {
 	static defaultProps = {
 		default: true

test/ts/refs.tsx

@@ -6,7 +6,7 @@ import {
 	Fragment,
 	RefObject,
 	RefCallback
-} from '../../src';
+} from '../../';
 
 // Test Fixtures
 const Foo: FunctionalComponent = () => <span>Foo</span>;