= + | React.ComponentType
+ | React.StatelessComponent
+ | React.ComponentClass
+ | React.Component
; + + type Info = { + /** Whether the component just mounted */ + isMount: boolean; + + /** Whether the imported component is already available from previous usage and required synchronsouly */ + isSync: boolean; + + /* + * Very rarely will you want to do stuff on the server; + * Note: server will always be sync) + */ + isServer: boolean; + }; + + type UniversalProps = { + isLoading: boolean; + error: Error | undefined; + + /** + * `onBefore`/`onAfter` are callbacks called before and after the wrapped component + * loads/changes on both `componentWillMount` and `componentWillReceiveProps`. + * This enables you to display loading indicators elsewhere in the UI. + */ + onBefore(info: Info): void; + + /** + * `onBefore`/`onAfter` are callbacks called before and after the wrapped component + * loads/changes on both `componentWillMount` and `componentWillReceiveProps`. + * This enables you to display loading indicators elsewhere in the UI. + */ + onAfter(info: Info, Component): void; + + /** + * onError is similar to the onError static option, except it operates at the component + * level. Therefore you can bind to this of the parent component and call + * `this.setState()` or `this.props.dispatch()`. + * Again, it's use case is for when you want to show error information elsewhere in the + * UI besides just the place that the universal component would otherwise render. + */ + onError(error: Error): void; + }; + + type UniversalComponent
= React.StatelessComponent<
+ P & Partial =
+ | {
+ default?: P;
+ [x: string]: any;
+ }
+ | {
+ exports?: P;
+ [x: string]: any;
+ };
+
+ type Options = Partial<{
+ /**
+ * The component class or function corresponding to your stateless component
+ * that displays while the primary import is loading.
+ * While testing out this package, you can leave it out as a simple default one is used.
+ */
+ loading(p: P): JSX.Element | ComponentType ;
+
+ /**
+ * The component that displays if there are any errors that occur during
+ * your aynschronous import. While testing out this package,
+ * you can leave it out as a simple default one is used.
+ */
+ error(p: P): JSX.Element | ComponentType ;
+
+ /**
+ * Lets you specify the export from the module you want to be your component
+ * if it's not `default` in ES6 or `module.exports` in ES5.
+ * It can be a string corresponding to the export key, or a function that's
+ * passed the entire module and returns the export that will become the component.
+ */
+ key: string | ((module: Module );
+
+ /**
+ * Allows you to specify a maximum amount of time before the error component
+ * is displayed. The default is 15 seconds.
+ */
+ timeout: number;
+
+ /**
+ * `minDelay` is essentially the minimum amount of time the loading component
+ * will always show for. It's good for enforcing silky smooth animations, such as
+ * during a 500ms sliding transition. It insures the re-render won't happen
+ * until the animation is complete. It's often a good idea to set this to something
+ * like 300ms even if you don't have a transition, just so the loading spinner
+ * shows for an appropriate amount of time without jank.
+ */
+ minDelay: number;
+
+ /**
+ * alwaysDelay is a boolean you can set to true (default: false) to guarantee the
+ * minDelay is always used (i.e. even when components cached from previous imports
+ * and therefore synchronously and instantly required). This can be useful for
+ * guaranteeing animations operate as you want without having to wire up other
+ * components to perform the task.
+ * _Note: this only applies to the client when
+ * your `UniversalComponent` uses dynamic expressions to switch between multiple
+ * components._
+ *
+ * default: `false`
+ */
+ alwaysDelay: boolean;
+
+ /**
+ * When set to false allows you to keep showing the current component when the
+ * loading component would otherwise show during transitions from one component to
+ * the next.
+ */
+ loadingTransition: boolean;
+
+ /**
+ * A callback called if async imports fail.
+ * It does not apply to sync requires.
+ */
+ onError(error: Error, options: { isServer: boolean }): void;
+
+ /**
+ * A callback function that receives the entire module.
+ * It allows you to export and put to use things other than your
+ * default component export, like reducers, sagas, etc.
+ *
+ * `onLoad` is fired directly before the component is rendered so you can setup
+ * any reducers/etc it depends on. Unlike the `onAfter` prop, this option to the
+ * `universal` HOC is only fired the first time the module is received. Also
+ * note: it will fire on the server, so do if (!isServer) if you have to.
+ * But also keep in mind you will need to do things like replace reducers on
+ * both the server + client for the imported component that uses new reducers
+ * to render identically in both places.
+ */
+ onLoad(
+ module: Export,
+ options: { isSync: boolean; isServer: boolean },
+ ): void;
+ }>;
+
+ export default function universal<
+ P,
+ C extends ComponentType = ComponentType ,
+ Export extends Module = Module
+ >(
+ asyncComponent:
+ | PromiseLike ,
+ ): UniversalComponent ;
+
+ export default function universal<
+ P,
+ C extends ComponentType = ComponentType ,
+ Export extends Module = Module
+ >(
+ loadSpec: {
+ load(props: P): PromiseLike ,
+ ): UniversalComponent ;
+}
+
+declare module 'react-universal-component/server' {
+ const flushChunkNames: () => string[];
+
+ export { flushChunkNames };
+}
diff --git a/package.json b/package.json
index 14b6803..fbd522b 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
"version": "0.0.0-development",
"description": "A higher order component for loading components with promises",
"main": "dist/index.js",
+ "typings": "index.d.ts",
"author": "James FaceySpacey Gillmore