fix($promiseAll): resolve promise.all array from babel-plugin into si…

…ngle import

__test-helpers__/index.js

@@ -51,7 +51,7 @@ export const createBablePluginComponent = (
     chunkName: () => name,
     path: () => name,
     resolve: () => name,
-    load: () => Promise.all([asyncImport()]),
+    load: () => Promise.all([asyncImport(), 'css']).then(prom => prom[0]),
     id: name,
     file: `${name}.js`
   }
@@ -73,7 +73,7 @@ export const createDynamicBablePluginComponent = (
     chunkName: () => page,
     path: () => createPath(page),
     resolve: () => createPath(page),
-    load: () => Promise.all([asyncImport(page)]),
+    load: () => Promise.all([asyncImport(page), 'css']).then(prom => prom[0]),
     id: page,
     file: `${page}.js`
   })

__tests__/__snapshots__/index.js.snap

@@ -99,7 +99,8 @@ exports[`async lifecycle error 2`] = `
 
 exports[`async lifecycle error 3`] = `
 <div>
-  Error!
+  Error: 
+  test error
 </div>
 `;
 
@@ -137,7 +138,8 @@ exports[`async lifecycle timeout error 1`] = `
 
 exports[`async lifecycle timeout error 2`] = `
 <div>
-  Error!
+  Error: 
+  timeout exceeded
 </div>
 `;
 

__tests__/index.js

@@ -69,6 +69,7 @@ describe('async lifecycle', () => {
     expect(component.toJSON()).toMatchSnapshot() // initial
 
     await waitFor(20)
+
     expect(component.toJSON()).toMatchSnapshot() // error
   })
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-universal-component",
-  "version": "0.0.0-development",
+  "version": "2.0.1",
   "description": "A higher order component for loading components with promises",
   "main": "dist/index.js",
   "author": "James FaceySpacey Gillmore <[email protected]> (http://www.faceyspacey.com)",

src/flowTypes.js

@@ -12,10 +12,7 @@ export type Config = {
   file: string
 }
 
-export type Load = (
-  Object,
-  AsyncFuncTools
-) => Promise<[ImportModule]> | Promise<ImportModule>
+export type Load = (Object, AsyncFuncTools) => Promise<ImportModule>
 
 // function that returns config (babel-plugin-universal-import)
 // $FlowIssue

src/requireUniversalModule.js

@@ -81,43 +81,31 @@ export default function requireUniversalModule<Props: Props>(
     if (cachedPromise) return cachedPromise
 
     const prom = new Promise((res, rej) => {
-      const timer =
-        timeout &&
-        setTimeout(() => {
-          rej(new Error('timeout exceeded'))
-        }, timeout)
+      const reject = error => {
+        error = error || new Error('timeout exceeded')
+        clearTimeout(timer)
+        if (onError) onError(error)
+        rej(error)
+      }
+
+      // const timer = timeout && setTimeout(reject, timeout)
+      const timer = timeout && setTimeout(reject, timeout)
 
       const resolve = mod => {
         clearTimeout(timer)
 
         const exp = resolveExport(mod, key, onLoad, chunkName, props, modCache)
         if (exp) return res(exp)
 
-        rej(new Error('export not found'))
-      }
-
-      const reject = error => {
-        clearTimeout(timer)
-        rej(error)
+        reject(new Error('export not found'))
       }
 
       const request = load(props, { resolve, reject })
 
       // if load doesn't return a promise, it must call resolveImport
       // itself. Most common is the promise implementation below.
       if (!request || typeof request.then !== 'function') return
-
-      request
-        .then(mod => {
-          // babel-plugin-universal-import transforms promise to: Promise.all([import(), importcss()])
-          if (Array.isArray(mod)) mod = mod[0]
-          return resolve(mod)
-        })
-        .catch(error => {
-          clearTimeout(timer)
-          if (onError) onError(error)
-          reject(error)
-        })
+      request.then(resolve).catch(reject)
     })
 
     cacheProm(prom, chunkName, props, promCache)

src/utils.js

@@ -9,7 +9,8 @@ export const babelInterop = (mod: ?Mod) =>
   mod && typeof mod === 'object' && mod.__esModule ? mod.default : mod
 
 export const DefaultLoading = () => <div>Loading...</div>
-export const DefaultError = () => <div>Error!</div>
+export const DefaultError = ({ error }: { error: Object }) =>
+  <div>Error: {error && error.message}</div>
 
 export const tryRequire = (id: Id): ?any => {
   try {