Revert "Remove modules option from dynamic (#7688)" (#7701)

This reverts commit 0fd7e685.

packages/next-server/lib/dynamic.tsx

@@ -113,6 +113,32 @@ export default function dynamic<P = {}>(
   // Support for passing options, eg: dynamic(import('../hello-world'), {loading: () => <p>Loading something</p>})
   loadableOptions = { ...loadableOptions, ...options }
 
+  if (
+    typeof dynamicOptions === 'object' &&
+    !(dynamicOptions instanceof Promise)
+  ) {
+    // Support for `render` when using a mapping, eg: `dynamic({ modules: () => {return {HelloWorld: import('../hello-world')}, render(props, loaded) {} } })
+    if (dynamicOptions.render) {
+      loadableOptions.render = (loaded, props) =>
+        dynamicOptions.render!(props, loaded)
+    }
+    // Support for `modules` when using a mapping, eg: `dynamic({ modules: () => {return {HelloWorld: import('../hello-world')}, render(props, loaded) {} } })
+    if (dynamicOptions.modules) {
+      loadableFn = Loadable.Map
+      const loadModules: LoaderMap = {}
+      const modules = dynamicOptions.modules()
+      Object.keys(modules).forEach(key => {
+        const value: any = modules[key]
+        if (typeof value.then === 'function') {
+          loadModules[key] = () => value.then((mod: any) => mod.default || mod)
+          return
+        }
+        loadModules[key] = value
+      })
+      loadableOptions.loader = loadModules
+    }
+  }
+
   // coming from build/babel/plugins/react-loadable-plugin.js
   if (loadableOptions.loadableGenerated) {
     loadableOptions = {

test/integration/basic/pages/dynamic/bundle.js

+import React from 'react'
+import dynamic from 'next/dynamic'
+import Router from 'next/router'
+import PropTypes from 'prop-types'
+
+const HelloBundle = dynamic({
+  modules: props => {
+    const components = {
+      HelloContext: import('../../components/hello-context'),
+      Hello1: import('../../components/hello1'),
+      Hello2: import('../../components/hello2'),
+    }
+
+    return components
+  },
+  render: (props, { HelloContext, Hello1, Hello2 }) => (
+    <div>
+      <h1>{props.title}</h1>
+      <HelloContext />
+      <Hello1 />
+      {props.showMore ? <Hello2 /> : null}
+    </div>
+  ),
+})
+
+export default class Bundle extends React.Component {
+  static childContextTypes = {
+    data: PropTypes.object,
+  }
+
+  static getInitialProps({ query }) {
+    return { showMore: Boolean(query.showMore) }
+  }
+
+  getChildContext() {
+    return {
+      data: { title: 'ZEIT Rocks' },
+    }
+  }
+
+  toggleShowMore() {
+    if (this.props.showMore) {
+      Router.push('/dynamic/bundle')
+      return
+    }
+
+    Router.push('/dynamic/bundle?showMore=1')
+  }
+
+  render() {
+    const { showMore } = this.props
+
+    return (
+      <div>
+        <HelloBundle showMore={showMore} title="Dynamic Bundle" />
+        <button id="toggle-show-more" onClick={() => this.toggleShowMore()}>
+          Toggle Show More
+        </button>
+      </div>
+    )
+  }
+}

test/integration/basic/test/dynamic.js

 /* eslint-env jest */
 import webdriver from 'next-webdriver'
 import cheerio from 'cheerio'
-import { check } from 'next-test-utils'
+import { waitFor, check } from 'next-test-utils'
 
 export default (context, render) => {
   async function get$ (path, query) {
@@ -227,5 +227,76 @@ export default (context, render) => {
         }
       })
     })
+
+    describe('Import mapping', () => {
+      it('should render dynamic imports bundle', async () => {
+        const $ = await get$('/dynamic/bundle')
+        const bodyText = $('body').text()
+        expect(/Dynamic Bundle/.test(bodyText)).toBe(true)
+        expect(/Hello World 1/.test(bodyText)).toBe(true)
+        expect(/Hello World 2/.test(bodyText)).toBe(false)
+      })
+
+      it('should render dynamic imports bundle with additional components', async () => {
+        const $ = await get$('/dynamic/bundle?showMore=1')
+        const bodyText = $('body').text()
+        expect(/Dynamic Bundle/.test(bodyText)).toBe(true)
+        expect(/Hello World 1/.test(bodyText)).toBe(true)
+        expect(/Hello World 2/.test(bodyText)).toBe(true)
+      })
+
+      it('should render components', async () => {
+        const browser = await webdriver(context.appPort, '/dynamic/bundle')
+
+        while (true) {
+          const bodyText = await browser.elementByCss('body').text()
+          if (
+            /Dynamic Bundle/.test(bodyText) &&
+            /Hello World 1/.test(bodyText) &&
+            !/Hello World 2/.test(bodyText)
+          ) {
+            break
+          }
+          await waitFor(1000)
+        }
+
+        await browser.close()
+      })
+
+      it('should render support React context', async () => {
+        const browser = await webdriver(context.appPort, '/dynamic/bundle')
+
+        while (true) {
+          const bodyText = await browser.elementByCss('body').text()
+          if (/ZEIT Rocks/.test(bodyText)) break
+          await waitFor(1000)
+        }
+
+        await browser.close()
+      })
+
+      it('should load new components and render for prop changes', async () => {
+        const browser = await webdriver(context.appPort, '/dynamic/bundle')
+
+        await browser
+          .waitForElementByCss('#toggle-show-more')
+          .elementByCss('#toggle-show-more')
+          .click()
+
+        while (true) {
+          const bodyText = await browser.elementByCss('body').text()
+          if (
+            /Dynamic Bundle/.test(bodyText) &&
+            /Hello World 1/.test(bodyText) &&
+            /Hello World 2/.test(bodyText)
+          ) {
+            break
+          }
+          await waitFor(1000)
+        }
+
+        await browser.close()
+      })
+    })
   })
 }

test/integration/production/pages/dynamic/bundle.js

+import React from 'react'
+import dynamic from 'next/dynamic'
+import Router from 'next/router'
+import PropTypes from 'prop-types'
+
+const HelloBundle = dynamic({
+  modules: () => {
+    const components = {
+      HelloContext: import('../../components/hello-context'),
+      Hello1: import('../../components/hello1'),
+      Hello2: import('../../components/hello2'),
+    }
+    return components
+  },
+  render: (props, { HelloContext, Hello1, Hello2 }) => (
+    <div>
+      <h1>{props.title}</h1>
+      <HelloContext />
+      <Hello1 />
+      {props.showMore ? <Hello2 /> : null}
+    </div>
+  ),
+})
+
+export default class Bundle extends React.Component {
+  static childContextTypes = {
+    data: PropTypes.object,
+  }
+
+  static getInitialProps({ query }) {
+    return { showMore: Boolean(query.showMore) }
+  }
+
+  getChildContext() {
+    return {
+      data: { title: 'ZEIT Rocks' },
+    }
+  }
+
+  toggleShowMore() {
+    if (this.props.showMore) {
+      Router.push('/dynamic/bundle')
+      return
+    }
+
+    Router.push('/dynamic/bundle?showMore=1')
+  }
+
+  render() {
+    const { showMore } = this.props
+
+    return (
+      <div>
+        <HelloBundle showMore={showMore} title="Dynamic Bundle" />
+        <button id="toggle-show-more" onClick={() => this.toggleShowMore()}>
+          Toggle Show More
+        </button>
+      </div>
+    )
+  }
+}

test/integration/production/test/dynamic.js

 /* eslint-env jest */
 import webdriver from 'next-webdriver'
 import cheerio from 'cheerio'
-import { check } from 'next-test-utils'
+import { waitFor, check } from 'next-test-utils'
 
 // These tests are similar to ../../basic/test/dynamic.js
 export default (context, render) => {
@@ -103,5 +103,76 @@ export default (context, render) => {
         }
       })
     })
+
+    describe('Import mapping', () => {
+      it('should render dynamic imports bundle', async () => {
+        const $ = await get$('/dynamic/bundle')
+        const bodyText = $('body').text()
+        expect(/Dynamic Bundle/.test(bodyText)).toBe(true)
+        expect(/Hello World 1/.test(bodyText)).toBe(true)
+        expect(/Hello World 2/.test(bodyText)).toBe(false)
+      })
+
+      it('should render dynamic imports bundle with additional components', async () => {
+        const $ = await get$('/dynamic/bundle?showMore=1')
+        const bodyText = $('body').text()
+        expect(/Dynamic Bundle/.test(bodyText)).toBe(true)
+        expect(/Hello World 1/.test(bodyText)).toBe(true)
+        expect(/Hello World 2/.test(bodyText)).toBe(true)
+      })
+
+      it('should render components', async () => {
+        const browser = await webdriver(context.appPort, '/dynamic/bundle')
+
+        while (true) {
+          const bodyText = await browser.elementByCss('body').text()
+          if (
+            /Dynamic Bundle/.test(bodyText) &&
+            /Hello World 1/.test(bodyText) &&
+            !/Hello World 2/.test(bodyText)
+          ) {
+            break
+          }
+          await waitFor(1000)
+        }
+
+        await browser.close()
+      })
+
+      it('should render support React context', async () => {
+        const browser = await webdriver(context.appPort, '/dynamic/bundle')
+
+        while (true) {
+          const bodyText = await browser.elementByCss('body').text()
+          if (/ZEIT Rocks/.test(bodyText)) break
+          await waitFor(1000)
+        }
+
+        await browser.close()
+      })
+
+      it('should load new components and render for prop changes', async () => {
+        const browser = await webdriver(context.appPort, '/dynamic/bundle')
+
+        await browser
+          .waitForElementByCss('#toggle-show-more')
+          .elementByCss('#toggle-show-more')
+          .click()
+
+        while (true) {
+          const bodyText = await browser.elementByCss('body').text()
+          if (
+            /Dynamic Bundle/.test(bodyText) &&
+            /Hello World 1/.test(bodyText) &&
+            /Hello World 2/.test(bodyText)
+          ) {
+            break
+          }
+          await waitFor(1000)
+        }
+
+        await browser.close()
+      })
+    })
   })
 }