Merge pull request #1619 from pmkroeker/master

Add types for Suspense/lazy

compat/src/index.d.ts

@@ -9,6 +9,8 @@ export import createRef = preact.createRef;
 export import Fragment = preact.Fragment;
 export import createElement = preact.createElement
 export import cloneElement = preact.cloneElement
+export import Suspense = preact.Suspense;
+export import lazy = preact.lazy;
 
 export declare const version: string;
 
@@ -66,6 +68,8 @@ declare const _default: {
   forwardRef: typeof forwardRef,
   unstable_batchedUpdates: typeof unstable_batchedUpdates,
   Children: Children,
+  Suspense: typeof Suspense,
+  lazy: typeof lazy,
 };
 
 export default _default;

src/index.d.ts

@@ -231,4 +231,16 @@ declare namespace preact {
 	interface PreactContext<T> extends Context<T> {}
 
 	function createContext<T>(defaultValue: T): Context<T>;
+
+	//
+	// Suspense/lazy
+	// -----------------------------------
+	function lazy<T>(loader: () => Promise<{default: T}>): T;
+
+	interface SuspenseProps {
+		children?: ComponentChildren;
+		fallback: ComponentChildren;
+	}
+
+	abstract class Suspense extends Component<SuspenseProps> {}
 }

test/ts/lazy.tsx

@@ -0,0 +1,23 @@
+import {
+	createElement,
+	Component,
+} from "../..";
+
+export interface LazyProps {
+	isProp: boolean;
+}
+
+interface LazyState {
+	forState: string;
+}
+export default class IsLazyComponent extends Component<LazyProps, LazyState> {
+	render ({ isProp }: LazyProps) {
+		return (
+			<div>{
+				isProp ?
+				'Super Lazy TRUE' :
+				'Super Lazy FALSE'
+			}</div>
+		)
+	}
+}

test/ts/suspense-test.tsx

@@ -0,0 +1,42 @@
+import "mocha";
+import { expect } from "chai";
+import {
+	createElement,
+	Component,
+	Suspense,
+	lazy,
+} from "../..";
+
+interface LazyProps {
+	isProp: boolean;
+}
+
+const IsLazyFunctional = (props: LazyProps) =>
+	<div>{
+		props.isProp ?
+		'Super Lazy TRUE' :
+		'Super Lazy FALSE'
+	}</div>
+
+const FallBack = () => <div>Still working...</div>;
+/**
+ * Have to mock dynamic import as import() throws a syntax error in the test runner
+ */
+const componentPromise = new Promise<{default: typeof IsLazyFunctional}>(resolve=>{
+	setTimeout(()=>{
+		resolve({ default: IsLazyFunctional});
+	},800);
+});
+
+/**
+ * For usage with import:
+ * const IsLazyComp = lazy(() => import('./lazy'));
+*/
+const IsLazyFunc = lazy(() => componentPromise);
+
+// Suspense using lazy component
+class SuspensefulFunc extends Component {
+	render() {
+		return <Suspense fallback={<FallBack/>}><IsLazyFunc isProp={false} /></Suspense>
+	}
+}