Merge pull request #75 from forabi/patch-1

Add TypeScript definitions

index.d.ts

@@ -0,0 +1,180 @@
+declare module 'react-universal-component' {
+  import * as React from 'react';
+
+  type ComponentType<P> =
+    | React.ComponentType<P>
+    | React.StatelessComponent<P>
+    | React.ComponentClass<P>
+    | React.Component<P>;
+
+  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<P> = React.StatelessComponent<
+    P & Partial<UniversalProps>
+  > & {
+    preload(): void;
+  };
+
+  type Module<P> =
+    | {
+        default?: P;
+        [x: string]: any;
+      }
+    | {
+        exports?: P;
+        [x: string]: any;
+      };
+
+  type Options<P> = 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<P>;
+
+    /**
+     * 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<P & { error: Error }>;
+
+    /**
+     * 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<C>) => ComponentType<P>);
+
+    /**
+     * 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<P> = ComponentType<P>,
+    Export extends Module<P> = Module<P>
+  >(
+    asyncComponent:
+      | PromiseLike<Module<C>>
+      | ((props: P) => PromiseLike<Module<C>>),
+    options?: Options<P>,
+  ): UniversalComponent<P>;
+
+  export default function universal<
+    P,
+    C extends ComponentType<P> = ComponentType<P>,
+    Export extends Module<P> = Module<P>
+  >(
+    loadSpec: {
+      load(props: P): PromiseLike<Module<C>>;
+    },
+    options?: Options<P>,
+  ): UniversalComponent<P>;
+}
+
+declare module 'react-universal-component/server' {
+  const flushChunkNames: () => string[];
+
+  export { flushChunkNames };
+}

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 <[email protected]> (http://www.faceyspacey.com)",
   "license": "MIT",
   "bugs": {