fix(babel-plugin): fix chunkName with aggressive code splitting

Closes #182

Author: gregberge

examples/server-side-rendering/src/client/App.js

@@ -7,6 +7,7 @@ const A = loadable(() => import('./letters/A'))
 const B = loadable(() => import('./letters/B'))
 const C = loadable(() => import(/* webpackPreload: true */ './letters/C'))
 const D = loadable(() => import(/* webpackPrefetch: true */ './letters/D'))
+const X = loadable(props => import(`./letters/${props.letter}`))
 
 // We keep some references to prevent uglify remove
 A.C = C
@@ -18,6 +19,7 @@ const App = () => (
   <div>
     <A />
     <B />
+    <X letter="A" />
     <Moment>{moment => moment().format('HH:mm')}</Moment>
   </div>
 )

packages/babel-plugin/src/__snapshots__/index.test.js.snap

@@ -84,7 +84,91 @@ exports[`plugin aggressive import with "webpackChunkName" should replace it 1`]
 });"
 `;
 
-exports[`plugin aggressive import without "webpackChunkName" should add it 1`] = `
+exports[`plugin aggressive import without "webpackChunkName" should support complex request 1`] = `
+"loadable({
+  chunkName(props) {
+    return \`dir-\${props.foo}-test\`;
+  },
+
+  isReady(props) {
+    if (typeof __webpack_modules__ !== 'undefined') {
+      return !!__webpack_modules__[this.resolve(props)];
+    }
+
+    return false;
+  },
+
+  requireAsync: props => import(
+  /* webpackChunkName: \\"dir-[request]-test\\" */
+  \`./dir/\${props.foo}/test\`),
+
+  requireSync(props) {
+    const id = this.resolve(props);
+
+    if (typeof __webpack_require__ !== 'undefined') {
+      return __webpack_require__(id);
+    }
+
+    return eval('module.require')(id);
+  },
+
+  resolve(props) {
+    if (require.resolveWeak) {
+      return require.resolveWeak(\`./dir/\${props.foo}/test\`);
+    }
+
+    return require('path').resolve(__dirname, \`./dir/\${props.foo}/test\`);
+  }
+
+});"
+`;
+
+exports[`plugin aggressive import without "webpackChunkName" should support destructuring 1`] = `
+"loadable({
+  chunkName({
+    foo
+  }) {
+    return \`dir-\${foo}-test\`;
+  },
+
+  isReady(props) {
+    if (typeof __webpack_modules__ !== 'undefined') {
+      return !!__webpack_modules__[this.resolve(props)];
+    }
+
+    return false;
+  },
+
+  requireAsync: ({
+    foo
+  }) => import(
+  /* webpackChunkName: \\"dir-[request]-test\\" */
+  \`./dir/\${foo}/test\`),
+
+  requireSync(props) {
+    const id = this.resolve(props);
+
+    if (typeof __webpack_require__ !== 'undefined') {
+      return __webpack_require__(id);
+    }
+
+    return eval('module.require')(id);
+  },
+
+  resolve({
+    foo
+  }) {
+    if (require.resolveWeak) {
+      return require.resolveWeak(\`./dir/\${foo}/test\`);
+    }
+
+    return require('path').resolve(__dirname, \`./dir/\${foo}/test\`);
+  }
+
+});"
+`;
+
+exports[`plugin aggressive import without "webpackChunkName" should support simple request 1`] = `
 "loadable({
   chunkName(props) {
     return \`\${props.foo}\`;

packages/babel-plugin/src/index.test.js

@@ -87,13 +87,29 @@ describe('plugin', () => {
     })
 
     describe('without "webpackChunkName"', () => {
-      it('should add it', () => {
+      it('should support simple request', () => {
         const result = testPlugin(`
           loadable(props => import(\`./\${props.foo}\`))
         `)
 
         expect(result).toMatchSnapshot()
       })
+
+      it('should support complex request', () => {
+        const result = testPlugin(`
+          loadable(props => import(\`./dir/\${props.foo}/test\`))
+        `)
+
+        expect(result).toMatchSnapshot()
+      })
+
+      it('should support destructuring', () => {
+        const result = testPlugin(`
+          loadable(({ foo }) => import(\`./dir/\${foo}/test\`))
+        `)
+
+        expect(result).toMatchSnapshot()
+      })
     })
   })
 

packages/babel-plugin/src/properties/chunkName.js

@@ -98,17 +98,17 @@ export default function chunkNameProperty({ types: t }) {
       chunkNameComment.remove()
     }
 
-    if (isAgressiveImport(callPath)) {
-      values.webpackChunkName = '[request]'
-    }
-
-    // const value = t.isTemplateLiteral(chunkName)
-    // ? chunkName.quasis[0].value.cooked
-    // : chunkName.value
-
     importArg.addComment('leading', writeWebpackCommentValues(values))
   }
 
+  function chunkNameFromTemplateLiteral(node) {
+    const [q1, q2] = node.quasis
+    const v1 = q1 ? q1.value.cooked : ''
+    const v2 = q2 ? q2.value.cooked : ''
+    if (!node.expressions.length) return v1
+    return `${v1}[request]${v2}`
+  }
+
   function replaceChunkName(callPath) {
     const agressiveImport = isAgressiveImport(callPath)
     const values = getExistingChunkNameComment(callPath)
@@ -120,7 +120,7 @@ export default function chunkNameProperty({ types: t }) {
 
     const chunkNameNode = generateChunkNameNode(callPath)
     const webpackChunkName = t.isTemplateLiteral(chunkNameNode)
-      ? chunkNameNode.quasis[0].value.cooked
+      ? chunkNameFromTemplateLiteral(chunkNameNode)
       : chunkNameNode.value
     addOrReplaceChunkNameComment(callPath, { webpackChunkName })
     return chunkNameNode