feat($dynamicExpressions): allow apps not using the babel-plugin to c…

…reate dynamic components just b

.eslintrc.js

@@ -57,6 +57,7 @@ module.exports = {
     'import/no-named-default': 1,
     'no-unused-vars': 1,
     'import/no-unresolved': 1,
+    'react/no-multi-comp': 1,
     'flowtype/no-weak-types': 0,
     camelcase: 0,
     'import/no-dynamic-require': 0,

__test-helpers__/index.js

@@ -86,3 +86,27 @@ export const dynamicBabelNodeComponent = ({ page }) => ({
   id: page,
   file: `${page}.js`
 })
+
+export const createDynamicComponentAndOptions = (
+  delay,
+  components,
+  error = new Error('test error')
+) => {
+  const asyncImport = async page => {
+    await waitFor(delay)
+    const Component = components[page]
+    if (Component) return Component
+    throw error
+  }
+
+  const load = ({ page }) =>
+    Promise.all([asyncImport(page), 'css']).then(prom => prom[0])
+
+  const options = {
+    chunkName: ({ page }) => page,
+    path: ({ page }) => createPath(page),
+    resolve: ({ page }) => createPath(page)
+  }
+
+  return { load, options }
+}

__tests__/__snapshots__/index.js.snap

@@ -33,6 +33,32 @@ exports[`advanced babel-plugin 2`] = `
 </p>
 `;
 
+exports[`advanced componentWillReceiveProps: changes component (dynamic require) (no babel plugin) 1`] = `
+<div>
+  Loading...
+</div>
+`;
+
+exports[`advanced componentWillReceiveProps: changes component (dynamic require) (no babel plugin) 2`] = `
+<p>
+  MyComponent 
+  {"page":"MyComponent"}
+</p>
+`;
+
+exports[`advanced componentWillReceiveProps: changes component (dynamic require) (no babel plugin) 3`] = `
+<div>
+  Loading...
+</div>
+`;
+
+exports[`advanced componentWillReceiveProps: changes component (dynamic require) (no babel plugin) 4`] = `
+<p>
+  MyComponent 
+  {"page":"MyComponent2"}
+</p>
+`;
+
 exports[`advanced componentWillReceiveProps: changes component (dynamic require) 1`] = `
 <div>
   Loading...

__tests__/index.js

@@ -25,7 +25,8 @@ import {
   createDynamicComponent,
   createBablePluginComponent,
   createDynamicBablePluginComponent,
-  dynamicBabelNodeComponent
+  dynamicBabelNodeComponent,
+  createDynamicComponentAndOptions
 } from '../__test-helpers__'
 
 describe('async lifecycle', () => {
@@ -676,4 +677,32 @@ describe('advanced', () => {
 
     expect(component.toJSON()).toMatchSnapshot() // loaded
   })
+
+  it('componentWillReceiveProps: changes component (dynamic require) (no babel plugin)', async () => {
+    const components = { MyComponent, MyComponent2 }
+    const { load, options } = createDynamicComponentAndOptions(0, components)
+
+    const Component = universal(load, options)
+
+    class Container extends React.Component {
+      render() {
+        const page = (this.state && this.state.page) || 'MyComponent'
+        return <Component page={page} />
+      }
+    }
+
+    let instance
+    const component = renderer.create(<Container ref={i => (instance = i)} />)
+    expect(component.toJSON()).toMatchSnapshot() // loading...
+
+    await waitFor(2)
+    expect(component.toJSON()).toMatchSnapshot() // loaded
+
+    instance.setState({ page: 'MyComponent2' })
+
+    expect(component.toJSON()).toMatchSnapshot() // loading...
+    await waitFor(2)
+
+    expect(component.toJSON()).toMatchSnapshot() // loaded
+  })
 })

src/requireUniversalModule.js

@@ -45,7 +45,7 @@ export default function requireUniversalModule<Props: Props>(
 
   const config = getConfig(isDynamic, universalConfig, options, props)
   const { chunkName, path, resolve, load } = config
-  const asyncOnly = !path && !resolve
+  const asyncOnly = (!path && !resolve) || typeof chunkName === 'function'
 
   const requireSync = (props: Object, context: Object): ?any => {
     let exp = loadFromCache(chunkName, props, modCache)
@@ -153,23 +153,10 @@ export default function requireUniversalModule<Props: Props>(
   }
 
   const shouldUpdate = (next, prev): boolean => {
-    if (asyncOnly) {
-      const cacheKey = callForString(chunkName, next)
+    const cacheKey = callForString(chunkName, next)
 
-      const config = getConfig(isDynamic, universalConfig, options, prev)
-      const prevCacheKey = callForString(config.chunkName, prev)
-
-      return cacheKey !== prevCacheKey
-    }
-
-    // below is what the babel-plugin triggers
-
-    if (!prevProps) return false
-
-    const cacheKey = callForString(chunkName, props)
-
-    const config = getConfig(isDynamic, universalConfig, options, prevProps)
-    const prevCacheKey = callForString(config.chunkName, prevProps)
+    const config = getConfig(isDynamic, universalConfig, options, prev)
+    const prevCacheKey = callForString(config.chunkName, prev)
 
     return cacheKey !== prevCacheKey
   }