From 24878ea21c2d7d900762a4c9730d91c08096ab3d Mon Sep 17 00:00:00 2001 From: Cory Deppen Date: Tue, 30 Jan 2018 12:19:27 -0500 Subject: [PATCH 1/3] Use slashes consistently across envs when testing paths --- __test-helpers__/index.js | 3 ++- package.json | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/__test-helpers__/index.js b/__test-helpers__/index.js index eef544d..2a6f930 100644 --- a/__test-helpers__/index.js +++ b/__test-helpers__/index.js @@ -1,11 +1,12 @@ import path from 'path' import React from 'react' +import slash from 'slash' // fake delay so we can test different stages of async loading lifecycle export const waitFor = ms => new Promise(resolve => setTimeout(resolve, ms)) // normalize the required path so tests pass in all environments -export const normalizePath = path => path.split('__fixtures__')[1] +export const normalizePath = path => slash(path.split('__fixtures__')[1]) export const createPath = name => path.join(__dirname, '../__fixtures__', name) diff --git a/package.json b/package.json index fbd522b..0dc0932 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "react-test-renderer": "^15.6.1", "rimraf": "^2.5.4", "semantic-release": "^6.3.6", + "slash": "^1.0.0", "travis-github-status": "^1.6.3" }, "peerDependencies": { From 68164b88828de3a6a356cb624a70ca385e0c5ba7 Mon Sep 17 00:00:00 2001 From: Cory Deppen Date: Tue, 30 Jan 2018 12:30:37 -0500 Subject: [PATCH 2/3] Add missing properties to Options TS type --- index.d.ts | 207 ++++++++++++++++++++++++++++++----------------------- 1 file changed, 117 insertions(+), 90 deletions(-) diff --git a/index.d.ts b/index.d.ts index 537e7ec..76dbf55 100644 --- a/index.d.ts +++ b/index.d.ts @@ -14,9 +14,9 @@ declare module 'react-universal-component' { /** 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; @@ -31,14 +31,18 @@ declare module 'react-universal-component' { * loads/changes on both `componentWillMount` and `componentWillReceiveProps`. * This enables you to display loading indicators elsewhere in the UI. */ - onBefore(info: Info): void; + 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): void; + onAfter( + info: Info + ): void; /** * `onError` is similar to the onError static option, except it operates at the component @@ -47,7 +51,9 @@ declare module 'react-universal-component' { * 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; + onError( + error: Error + ): void; }; type UniversalComponent

= React.StatelessComponent< @@ -66,90 +72,111 @@ declare module 'react-universal-component' { [x: string]: any; }; - type Options = Partial<{ - /** - * 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: keyof Export | ((module: Export) => ComponentType

); - - /** - * 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; - - /** - * 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

) | (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

) | (JSX.Element | ComponentType

); - }>; + type Options = Partial< + { + /** + * 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: keyof Export | ((module: Export) => ComponentType

); + + /** + * 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; + + testBabelPlugin: boolean; + + resolve: string | number | ((props: P) => number | string); + + path: string | ((props: P) => string); + + chunkName: string | ((props: P) => string); + + alwaysUpdate: boolean; + + id: string; + + /** + * 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; + + /** + * 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

) + | (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

) + | (JSX.Element | ComponentType

); + } + >; export default function universal< P, @@ -162,7 +189,7 @@ declare module 'react-universal-component' { | { load(props: P): PromiseLike; }, - options?: Options, + options?: Options ): UniversalComponent

; } From 1a3649cf38ffce6e2470adb8da9b0c56622a9648 Mon Sep 17 00:00:00 2001 From: Cory Deppen Date: Tue, 30 Jan 2018 18:58:18 -0500 Subject: [PATCH 3/3] style($flow): Fix LoadingComponent typo --- src/flowTypes.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/flowTypes.js b/src/flowTypes.js index a1e03ad..75609e2 100644 --- a/src/flowTypes.js +++ b/src/flowTypes.js @@ -41,7 +41,7 @@ export type ModuleOptions = { } export type ComponentOptions = { - loading?: LoadingCompponent, + loading?: LoadingComponent, error?: ErrorComponent, minDelay?: number, alwaysDelay?: boolean, @@ -110,7 +110,7 @@ export type GenericComponent = | React$Element export type Component = GenericComponent -export type LoadingCompponent = GenericComponent<{}> +export type LoadingComponent = GenericComponent<{}> export type ErrorComponent = GenericComponent<{}> // babel-plugin-universal-import