diff --git a/compat/src/index.d.ts b/compat/src/index.d.ts index c1af07f6eb6..8f3c3d618fe 100644 --- a/compat/src/index.d.ts +++ b/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; diff --git a/src/index.d.ts b/src/index.d.ts index 565b8767328..0a0a9a3cd4e 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -231,4 +231,17 @@ declare namespace preact { interface PreactContext extends Context {} function createContext(defaultValue: T): Context; + + // + // Suspense/lazy + // ----------------------------------- + + function lazy(loader: () => Promise): (props: P) => VNode

; + + interface SuspenseProps { + children?: ComponentChildren; + fallback: ComponentChildren; + } + + abstract class Suspense extends Component {} } diff --git a/test/ts/lazy.tsx b/test/ts/lazy.tsx new file mode 100644 index 00000000000..de564c37ae2 --- /dev/null +++ b/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 { + render ({ isProp }: LazyProps) { + return ( +

{ + isProp ? + 'Super Lazy TRUE' : + 'Super Lazy FALSE' + }
+ ) + } +} diff --git a/test/ts/suspense-test.tsx b/test/ts/suspense-test.tsx new file mode 100644 index 00000000000..b301b2a37ae --- /dev/null +++ b/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) => +
{ + props.isProp ? + 'Super Lazy TRUE' : + 'Super Lazy FALSE' + }
+ +const FallBack = () =>
Still working...
; +/** + * Have to mock dynamic import as import() throws a syntax error in the test runner + */ +const componentPromise = new Promise(resolve=>{ + setTimeout(()=>{ + resolve(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 }> + } +}