feat($newVersion): add new babel plugin so you only call import(), su…

…pport for 2-file imports (js+cs

.babelrc

@@ -1,4 +1,4 @@
 {
   "presets": ["es2015", "react", "stage-0"],
-  "plugins": ["transform-flow-strip-types"]
+  "plugins": ["universal-import", "transform-flow-strip-types"]
 }

.eslintrc.js

@@ -48,19 +48,20 @@ module.exports = {
     'no-underscore-dangle': 0,
     'no-plusplus': 0,
     'new-parens': 0,
+    'global-require': 0,
     camelcase: 1,
     'prefer-template': 1,
     'react/no-array-index-key': 1,
-    'global-require': 1,
     'react/jsx-indent': 1,
     'dot-notation': 1,
     'import/no-named-default': 1,
     'no-unused-vars': 1,
     'import/no-unresolved': 1,
-    'flowtype/no-weak-types': 1,
+    'flowtype/no-weak-types': 0,
+    camelcase: 0,
+    'import/no-dynamic-require': 0,
     'consistent-return': 1,
     'no-empty': 1,
-    'import/no-dynamic-require': 1,
     'no-return-assign': 1,
     semi: [2, 'never'],
     'no-console': [2, { allow: ['warn', 'error'] }],

.flowconfig

@@ -17,4 +17,5 @@ module.system=haste
 
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
 suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
+suppress_comment=\\(.\\|\n\\)*\\$FlowIgnore
 suppress_comment=\\(.\\|\n\\)*\\$FlowGlobal

__fixtures__/component.js

@@ -1,3 +1,5 @@
 import React from 'react'
 
 export default () => <div>fixture1</div>
+
+export const foo = 'bar'

__fixtures__/es5.js

@@ -0,0 +1,3 @@
+module.exports = {
+  foo: 'bar-es5'
+}

__fixtures__/es6.js

@@ -0,0 +1,2 @@
+export default 'hello'
+export const foo = 'bar'

__test-helpers__/createApp.js

@@ -1,27 +1,88 @@
 import path from 'path'
 import React from 'react'
-import { createComponent } from './index'
-import universalComponent from '../src'
+import {
+  createComponent,
+  createBablePluginComponent,
+  createDynamicBablePluginComponent
+} from './index'
+import universal from '../src'
 
 export const createPath = name => path.join(__dirname, '../__fixtures__', name)
 
-export default isWebpack => {
-  const importAsync = createComponent(40, null, new Error('test error'))
+export const createApp = isWebpack => {
+  const importAsync = createComponent(40)
   const create = name =>
-    universalComponent(importAsync, {
-      path: path.join(__dirname, '..', '__fixtures__', name),
-      chunkName: name,
-      resolve: isWebpack && (() => createPath(name))
+    universal(importAsync, {
+      path: createPath(name),
+      resolve: isWebpack && createPath(name),
+      chunkName: name
     })
 
-  const Loadable1 = create('component')
-  const Loadable2 = create('component2')
-  const Loadable3 = create('component3')
+  const Component1 = create('component')
+  const Component2 = create('component2')
+  const Component3 = create('component3')
 
   return props =>
-    <div>
-      {props.one ? <Loadable1 /> : null}
-      {props.two ? <Loadable2 /> : null}
-      {props.three ? <Loadable3 /> : null}
-    </div>
+    (<div>
+      {props.one ? <Component1 /> : null}
+      {props.two ? <Component2 /> : null}
+      {props.three ? <Component3 /> : null}
+    </div>)
+}
+
+export const createDynamicApp = isWebpack => {
+  const importAsync = createComponent(40)
+  const Component = universal(importAsync, {
+    path: ({ page }) => createPath(page),
+    chunkName: ({ page }) => page,
+    resolve: isWebpack && (({ page }) => createPath(page))
+  })
+
+  return props =>
+    (<div>
+      {props.one ? <Component page='component' /> : null}
+      {props.two ? <Component page='component2' /> : null}
+      {props.three ? <Component page='component3' /> : null}
+    </div>)
+}
+
+export const createBablePluginApp = isWebpack => {
+  const create = name => {
+    const importAsync = createBablePluginComponent(
+      40,
+      null,
+      new Error('test error'),
+      createPath(name)
+    )
+    return universal(importAsync, { testBabelPlugin: true })
+  }
+
+  const Component1 = create('component')
+  const Component2 = create('component2')
+  const Component3 = create('component3')
+
+  return props =>
+    (<div>
+      {props.one ? <Component1 /> : null}
+      {props.two ? <Component2 /> : null}
+      {props.three ? <Component3 /> : null}
+    </div>)
+}
+
+export const createDynamicBablePluginApp = isWebpack => {
+  const create = name => {
+    const importAsync = createDynamicBablePluginComponent()
+    return universal(importAsync, { testBabelPlugin: true })
+  }
+
+  const Component1 = create('component')
+  const Component2 = create('component2')
+  const Component3 = create('component3')
+
+  return props =>
+    (<div>
+      {props.one ? <Component1 page='component' /> : null}
+      {props.two ? <Component2 page='component2' /> : null}
+      {props.three ? <Component3 page='component3' /> : null}
+    </div>)
 }

__test-helpers__/index.js

@@ -1,21 +1,80 @@
+import path from 'path'
 import React from 'react'
 
+// 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]
 
-// fake delay so we can test different stages of async loading lifecycle
-export const waitFor = ms => new Promise(resolve => setTimeout(resolve, ms))
+export const createPath = name => path.join(__dirname, '../__fixtures__', name)
 
 export const Loading = props => <p>Loading... {JSON.stringify(props)}</p>
 export const Err = props => <p>Error! {JSON.stringify(props)}</p>
 export const MyComponent = props => <p>MyComponent {JSON.stringify(props)}</p>
+export const MyComponent2 = props => <p>MyComponent {JSON.stringify(props)}</p>
 
-export const createComponent = (delay, Component, error) => async () => {
+export const createComponent = (
+  delay,
+  Component,
+  error = new Error('test error')
+) => async () => {
   await waitFor(delay)
+  if (Component) return Component
+  throw error
+}
 
-  if (Component) {
-    return Component
+export const createDynamicComponent = (
+  delay,
+  components,
+  error = new Error('test error')
+) => async (props, tools) => {
+  await waitFor(delay)
+  const Component = components[props.page]
+  if (Component) return Component
+  throw error
+}
+
+export const createBablePluginComponent = (
+  delay,
+  Component,
+  error = new Error('test error'),
+  name
+) => {
+  const asyncImport = async () => {
+    await waitFor(delay)
+    if (Component) return Component
+    throw error
   }
 
-  throw error
+  return {
+    chunkName: () => name,
+    path: () => name,
+    resolve: () => name,
+    load: () => Promise.all([asyncImport()]),
+    id: name,
+    file: `${name}.js`
+  }
+}
+
+export const createDynamicBablePluginComponent = (
+  delay,
+  components,
+  error = new Error('test error')
+) => {
+  const asyncImport = async page => {
+    await waitFor(delay)
+    const Component = components[page]
+    if (Component) return Component
+    throw error
+  }
+
+  return ({ page }) => ({
+    chunkName: () => page,
+    path: () => createPath(page),
+    resolve: () => createPath(page),
+    load: () => Promise.all([asyncImport(page)]),
+    id: page,
+    file: `${page}.js`
+  })
 }

__tests__/__snapshots__/index.js.snap

@@ -1,19 +1,78 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Component.preload: static preload method pre-fetches chunk 1`] = `
+exports[`advanced Component.preload: static preload method pre-fetches chunk 1`] = `
 <div>
   Loading...
 </div>
 `;
 
-exports[`Component.preload: static preload method pre-fetches chunk 2`] = `
+exports[`advanced Component.preload: static preload method pre-fetches chunk 2`] = `
 <p>
   MyComponent 
   {}
 </p>
 `;
 
-exports[`Component.preload: static preload method pre-fetches chunk 3`] = `
+exports[`advanced Component.preload: static preload method pre-fetches chunk 3`] = `
+<p>
+  MyComponent 
+  {}
+</p>
+`;
+
+exports[`advanced babel-plugin 1`] = `
+<div>
+  Loading...
+</div>
+`;
+
+exports[`advanced babel-plugin 2`] = `
+<p>
+  MyComponent 
+  {}
+</p>
+`;
+
+exports[`advanced componentWillReceiveProps: changes component (dynamic require) 1`] = `
+<div>
+  Loading...
+</div>
+`;
+
+exports[`advanced componentWillReceiveProps: changes component (dynamic require) 2`] = `
+<p>
+  MyComponent 
+  {"page":"MyComponent"}
+</p>
+`;
+
+exports[`advanced componentWillReceiveProps: changes component (dynamic require) 3`] = `
+<div>
+  Loading...
+</div>
+`;
+
+exports[`advanced componentWillReceiveProps: changes component (dynamic require) 4`] = `
+<p>
+  MyComponent 
+  {"page":"MyComponent2"}
+</p>
+`;
+
+exports[`advanced dynamic requires (async) 1`] = `
+<p>
+  MyComponent 
+  {"page":"MyComponent"}
+</p>
+`;
+
+exports[`advanced promise passed directly 1`] = `
+<div>
+  Loading...
+</div>
+`;
+
+exports[`advanced promise passed directly 2`] = `
 <p>
   MyComponent 
   {}
@@ -139,6 +198,20 @@ exports[`other options minDelay: loads for duration of minDelay even if componen
 </p>
 `;
 
+exports[`other options onLoad (async): is called and passed an es6 module 1`] = `
+<p>
+  MyComponent 
+  {}
+</p>
+`;
+
+exports[`other options onLoad (async): is called and passed entire module 1`] = `
+<p>
+  MyComponent 
+  {}
+</p>
+`;
+
 exports[`props: all components receive props <MyUniversalComponent error={new Error} /> - also displays error component 1`] = `
 <p>
   Error!