From f10aa9bbdc8a1f33d6f9b37592ae20ff12182b05 Mon Sep 17 00:00:00 2001 From: Oden Date: Fri, 16 Jun 2017 19:47:49 -0700 Subject: [PATCH] Update react-loadable types for v4. Changes: https://github.com/thejameskyle/react-loadable/pull/46 --- types/react-loadable/babel.d.ts | 3 - types/react-loadable/index.d.ts | 105 +++++++++--------- types/react-loadable/react-loadable-tests.tsx | 61 +++++++--- types/react-loadable/tsconfig.json | 1 - 4 files changed, 100 insertions(+), 70 deletions(-) delete mode 100644 types/react-loadable/babel.d.ts diff --git a/types/react-loadable/babel.d.ts b/types/react-loadable/babel.d.ts deleted file mode 100644 index a9f18c2e00..0000000000 --- a/types/react-loadable/babel.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import * as babel from 'babel-core'; - -export default function(context: Pick): { visitor: any }; diff --git a/types/react-loadable/index.d.ts b/types/react-loadable/index.d.ts index bbe7d1aac4..1a77aa543c 100644 --- a/types/react-loadable/index.d.ts +++ b/types/react-loadable/index.d.ts @@ -1,8 +1,8 @@ -// Type definitions for react-loadable 3.3 +// Type definitions for react-loadable 4.0 // Project: https://github.com/thejameskyle/react-loadable#readme -// Definitions by: Diogo Franco +// Definitions by: Diogo Franco , Oden S. // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.2 +// TypeScript Version: 2.3 import * as React from 'react'; @@ -11,10 +11,11 @@ export type LoadedComponent = React.ComponentClass | React.SFC = OptionsWithoutResolve | OptionsWithResolve; +export type Options = OptionsWithoutRender | OptionsWithRender; export interface CommonOptions { /** @@ -24,64 +25,76 @@ export interface CommonOptions { * (this is considered a valid React component). */ // NOTE: () => null is only needed until React.SFC supports components returning null - LoadingComponent: React.ComponentClass | React.SFC | (() => null); + loading: React.ComponentClass | React.SFC | (() => null); /** - * Defaults to 200, in milliseconds + * Defaults to 200, in milliseconds. * * Only show the LoadingComponent if the loader() has taken this long to succeed or error. */ - delay?: number; + delay?: number | false | null; /** - * When rendering server-side, require() this path to load the component instead, this way it happens - * synchronously. If you are rendering server-side you should use this option. + * Disabled by default. * - * If you are using Babel, you might want to use the Babel plugin to add this option automatically. + * After the specified time in milliseconds passes, the component's `timedOut` prop will be set to true. */ - serverSideRequirePath?: string; + timeout?: number | false | null; +} + +export interface OptionsWithoutRender extends CommonOptions { /** - * In order for Loadable to require() a component synchronously (when possible) instead of waiting for - * the promise returned by import() to resolve. If you are using Webpack you should use this option. + * Function returning a promise which returns a React component displayed on success. + * + * Resulting React component receives all the props passed to the generated component. + */ + loader(): Promise | { [key: string]: LoadedComponent }>; +} + +export interface OptionsWithRender extends CommonOptions { + /** + * Function returning a promise which returns an object to be passed to `render` on success. + */ + loader(): Promise; + /** + * If you want to customize what gets rendered from your loader you can also pass `render`. + * + * Note: If you want to load multiple resources at once, you can also use `Loadable.Map`. * * ```ts * Loadable({ * // ... - * webpackRequireWeakId: () => require.resolveWeak('./MyComponent') + * render(loaded, props) { + * const Component = loaded.default; + * return + * } * }); * ``` - * - * If you are using Babel, you might want to use the Babel plugin to add this option automatically. */ - webpackRequireWeakId?(): number|string; + render(loaded: Exports, props: Props): React.ReactNode; } -export interface OptionsWithoutResolve extends CommonOptions { +export interface OptionsWithMap extends CommonOptions { /** - * Function returning promise returning a React component displayed on success. - * - * Resulting React component receives all the props passed to the generated component. + * Function returning a promise which returns an object to be passed to `render` on success. */ - loader(): Promise | { default: LoadedComponent }>; -} - -export interface OptionsWithResolve extends CommonOptions { + loader: { + [P in keyof Exports]: () => Promise + }; /** - * Function returning promise returning a React component displayed on success. + * If you want to customize what gets rendered from your loader you can also pass `render`. * - * Resulting React component receives all the props passed to the generated component. - */ - loader(): Promise; - /** - * If the component that you want to load is not the default exported from a module you can use this - * function to resolve it. + * Note: If you want to load multiple resources at once, you can also use `Loadable.Map`. * * ```ts * Loadable({ * // ... - * resolveModule: module => module.MyComponent + * render(loaded, props) { + * const Component = loaded.default; + * return + * } * }); * ``` */ - resolveModule(obj: T): LoadedComponent; + render(loaded: Exports, props: Props): React.ReactNode; } export interface LoadableComponent { @@ -96,22 +109,10 @@ export interface LoadableComponent { preload(): void; } -export default function Loadable(options: Options): LoadedComponent & LoadableComponent; +export interface Loadable { + (options: Options): LoadedComponent & LoadableComponent; + Map(options: OptionsWithMap): LoadedComponent & LoadableComponent; +} -/** - * In case you are rendering server-side and want to find out after a render cycle which - * serverSideRequirePath's and webpackRequireWeakId's were actually rendered, you can use - * flushServerSideRequirePaths or flushWebpackRequireWeakIds to get an array of them. - * - * Note: These are flushed individually, one does not affect the other. - */ -export function flushServerSideRequirePaths(): string[]; - -/** - * In case you are rendering server-side and want to find out after a render cycle which - * serverSideRequirePath's and webpackRequireWeakId's were actually rendered, you can use - * flushServerSideRequirePaths or flushWebpackRequireWeakIds to get an array of them. - * - * Note: These are flushed individually, one does not affect the other. - */ -export function flushWebpackRequireWeakIds(): string[]|number[]; +declare const LoadableExport: Loadable; +export default LoadableExport; diff --git a/types/react-loadable/react-loadable-tests.tsx b/types/react-loadable/react-loadable-tests.tsx index 3455a7b23a..981508292c 100644 --- a/types/react-loadable/react-loadable-tests.tsx +++ b/types/react-loadable/react-loadable-tests.tsx @@ -3,7 +3,14 @@ import Loadable, { LoadingComponentProps } from 'react-loadable'; class LoadingComponent extends React.Component { render() { - return
{this.props.isLoading}
; + return ( +
+ {this.props.error} + {this.props.isLoading} + {this.props.pastDelay} + {this.props.timedOut} +
+ ); } } @@ -16,36 +23,62 @@ const Component: React.SFC = ({ text }) =>
{text}
; const Loadable100 = Loadable({ // a module shape with 'export = Component' / 'module.exports = Component' loader: () => Promise.resolve(Component), - LoadingComponent, - delay: 100 + loading: LoadingComponent, + delay: 100, + timeout: 10000 }); const Loadable200 = Loadable({ // a module shape with 'export default Component' loader: () => Promise.resolve({ default: Component }), - LoadingComponent, - delay: 200 + loading: LoadingComponent, + delay: null, + timeout: null }); const Loadable300 = Loadable({ // a module shape with 'export { Component }' loader: () => Promise.resolve({ Component }), - LoadingComponent, - delay: 300, - resolveModule: shape => shape.Component + loading: LoadingComponent, + delay: false, + timeout: false, + render(loaded, props) { + const { Component } = loaded; + return ; + } }); const Loadable400 = Loadable({ // a module shape with both 'export default Component' and 'export { Component }' loader: () => Promise.resolve({ default: Component, Component }), - LoadingComponent: () => null, + loading: () => null, delay: 300, - resolveModule: shape => shape.Component + render(loaded, props) { + const Component = loaded.default; + const NamedComponent = loaded.Component; + return ( + + + + ); + } }); -const used100 = ; -const used200 = ; -const used300 = ; -const used400 = ; +const LoadableMap = Loadable.Map({ + loading: () => null, + loader: { + Component: () => Promise.resolve({ default: Component }), + text: () => Promise.resolve("test text") + }, + render(loaded, props) { + let Component = loaded.Component.default; + return ; + } +}); + +const used100 = ; +const used200 = ; +const used300 = ; +const used400 = ; Loadable100.preload(); diff --git a/types/react-loadable/tsconfig.json b/types/react-loadable/tsconfig.json index bf26cfdbc5..4f1cf2c0f0 100644 --- a/types/react-loadable/tsconfig.json +++ b/types/react-loadable/tsconfig.json @@ -18,7 +18,6 @@ }, "files": [ "index.d.ts", - "babel.d.ts", "react-loadable-tests.tsx" ] }