Update react-loadable types for v4.

Changes: https://github.com/thejameskyle/react-loadable/pull/46

types/react-loadable/babel.d.ts

@@ -1,3 +0,0 @@
-import * as babel from 'babel-core';
-
-export default function(context: Pick<typeof babel, 'types'|'template'>): { visitor: any };

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 <https://github.com/Kovensky>
+// Definitions by: Diogo Franco <https://github.com/Kovensky>, Oden S. <https://github.com/odensc>
 // 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<Props> = React.ComponentClass<Props> | React.SFC<Pro
 export interface LoadingComponentProps {
     isLoading: boolean;
     pastDelay: boolean;
+    timedOut: boolean;
     error: any;
 }
 
-export type Options<Props, T extends object> = OptionsWithoutResolve<Props> | OptionsWithResolve<Props, T>;
+export type Options<Props, Exports extends object> = OptionsWithoutRender<Props> | OptionsWithRender<Props, Exports>;
 
 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<LoadingComponentProps> | React.SFC<LoadingComponentProps> | (() => null);
+    loading: React.ComponentClass<LoadingComponentProps> | React.SFC<LoadingComponentProps> | (() => 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<Props> 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<LoadedComponent<Props> | { [key: string]: LoadedComponent<Props> }>;
+}
+
+export interface OptionsWithRender<Props, Exports extends object> extends CommonOptions {
+    /**
+     * Function returning a promise which returns an object to be passed to `render` on success.
+     */
+    loader(): Promise<Exports>;
+    /**
+     * 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 <Component {...props} />
+     *     }
      * });
      * ```
-     *
-     * 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<Props> extends CommonOptions {
+export interface OptionsWithMap<Props, Exports extends { [key: string]: any }> 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<LoadedComponent<Props> | { default: LoadedComponent<Props> }>;
-}
-
-export interface OptionsWithResolve<Props, T extends object> extends CommonOptions {
+    loader: {
+        [P in keyof Exports]: () => Promise<Exports[P]>
+    };
     /**
-     * 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<T>;
-    /**
-     * 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 <Component {...props} />
+     *     }
      * });
      * ```
      */
-    resolveModule(obj: T): LoadedComponent<Props>;
+    render(loaded: Exports, props: Props): React.ReactNode;
 }
 
 export interface LoadableComponent {
@@ -96,22 +109,10 @@ export interface LoadableComponent {
     preload(): void;
 }
 
-export default function Loadable<Props, T extends object>(options: Options<Props, T>): LoadedComponent<Props> & LoadableComponent;
+export interface Loadable {
+    <Props, Exports extends object>(options: Options<Props, Exports>): LoadedComponent<Props> & LoadableComponent;
+    Map<Props, Exports extends { [key: string]: any }>(options: OptionsWithMap<Props, Exports>): LoadedComponent<Props> & 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;

types/react-loadable/react-loadable-tests.tsx

@@ -3,7 +3,14 @@ import Loadable, { LoadingComponentProps } from 'react-loadable';
 
 class LoadingComponent extends React.Component<LoadingComponentProps, {}> {
   render() {
-    return <div>{this.props.isLoading}</div>;
+    return (
+      <div>
+        {this.props.error}
+        {this.props.isLoading}
+        {this.props.pastDelay}
+        {this.props.timedOut}
+      </div>
+    );
   }
 }
 
@@ -16,36 +23,62 @@ const Component: React.SFC<ComponentProps> = ({ text }) => <div>{text}</div>;
 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 <Component {...props} />;
+  }
 });
 
 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 (
+      <Component {...props}>
+        <NamedComponent {...props} />
+      </Component>
+    );
+  }
 });
 
-const used100 = <Loadable100 text='100'/>;
-const used200 = <Loadable200 text='200'/>;
-const used300 = <Loadable300 text='300'/>;
-const used400 = <Loadable400 text='400'/>;
+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 <Component {...props} text={loaded.text} />;
+  }
+});
+
+const used100 = <Loadable100 text='100' />;
+const used200 = <Loadable200 text='200' />;
+const used300 = <Loadable300 text='300' />;
+const used400 = <Loadable400 text='400' />;
 
 Loadable100.preload();

types/react-loadable/tsconfig.json

@@ -18,7 +18,6 @@
     },
     "files": [
         "index.d.ts",
-        "babel.d.ts",
         "react-loadable-tests.tsx"
     ]
 }