Merge pull request #49 from zackljackson/nested-chunknames

feat(loadOption): Nested chunknames as major release
faceyspacey · May 8, 2018 · 161713a · 161713a
2 parents 0f77ffd + c1bb186
commit 161713a
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ coverage
 node_modules
 *.log
 .idea
+.DS_Store
diff --git a/__tests__/__snapshots__/index.js.snap b/__tests__/__snapshots__/index.js.snap
@@ -233,6 +233,64 @@ _universalImport({
 "
 `;
 
+exports[`static import (import as function with relative paths + nested folder) 1`] = `
+"
+const obj = {component:()=>import(\`../components/nestedComponent\`)}; ()=> obj.component()
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+var _path = _interopRequireDefault(require(\\"path\\")).default;
+
+var _importCss = _interopRequireDefault(require(\\"babel-plugin-universal-import/importCss\\")).default;
+
+var _universalImport = _interopRequireDefault(require(\\"babel-plugin-universal-import/universalImport\\")).default;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const obj = {
+  component: () => _universalImport({
+    id: \\"../components/nestedComponent\\",
+    file: \\"currentFile.js\\",
+    load: () => Promise.all([import(
+    /* webpackChunkName: 'components-nestedComponent' */
+    \`../components/nestedComponent\`), _importCss(\\"components/nestedComponent\\", {})]).then(proms => proms[0]),
+    path: () => _path.join(__dirname, \`../components/nestedComponent\`),
+    resolve: () => require.resolveWeak(\`../components/nestedComponent\`),
+    chunkName: () => \\"components-nestedComponent\\"
+  })
+};
+
+() => obj.component();
+"
+`;
+
+exports[`static import (relative paths + nested folder) 1`] = `
+"
+import(\`../components/nestedComponent\`)
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+var _path = _interopRequireDefault(require(\\"path\\")).default;
+
+var _importCss = _interopRequireDefault(require(\\"babel-plugin-universal-import/importCss\\")).default;
+
+var _universalImport = _interopRequireDefault(require(\\"babel-plugin-universal-import/universalImport\\")).default;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_universalImport({
+  id: \\"../components/nestedComponent\\",
+  file: \\"currentFile.js\\",
+  load: () => Promise.all([import(
+  /* webpackChunkName: 'components-nestedComponent' */
+  \`../components/nestedComponent\`), _importCss(\\"components/nestedComponent\\", {})]).then(proms => proms[0]),
+  path: () => _path.join(__dirname, \`../components/nestedComponent\`),
+  resolve: () => require.resolveWeak(\`../components/nestedComponent\`),
+  chunkName: () => \\"components-nestedComponent\\"
+});
+"
+`;
+
 exports[`static import (string template + relative paths) 1`] = `
 "
 import(\`../../base\`)

diff --git a/__tests__/index.js b/__tests__/index.js
@@ -25,6 +25,10 @@ pluginTester({
     'static import (with file extension)': 'import("./Foo.js")',
     'static import (string template)': 'import(`./base`)',
     'static import (string template + relative paths)': 'import(`../../base`)',
+    'static import (import as function with relative paths + nested folder)':
+      'const obj = {component:()=>import(`../components/nestedComponent`)}; ()=> obj.component()',
+    'static import (relative paths + nested folder)':
+      'import(`../components/nestedComponent`)',
     'dynamic import (string template)': 'import(`./base/${page}`)',
     'dynamic import (string template with nested folder)':
       'import(`./base/${page}/nested/folder`)',

diff --git a/index.js b/index.js
@@ -197,6 +197,14 @@ function chunkNameOption(t, chunkNameTemplate, importArgNode) {
   return t.objectProperty(t.identifier('chunkName'), chunkName)
 }
 
+function checkForNestedChunkName(node) {
+  const generatedChunkName = getMagicCommentChunkName(node)
+  const isNested =
+    generatedChunkName.indexOf('[request]') === -1 &&
+    generatedChunkName.indexOf('/') > -1
+  return isNested && prepareChunkNamePath(generatedChunkName)
+}
+
 module.exports = function universalImportPlugin({ types: t, template }) {
   const chunkNameTemplate = template('() => MODULE')
   const pathTemplate = template('() => PATH.join(__dirname, MODULE)')
@@ -214,6 +222,10 @@ module.exports = function universalImportPlugin({ types: t, template }) {
 
         const importArgNode = getImportArgPath(p).node
         t.existingChunkName = existingMagicCommentChunkName(importArgNode)
+        // no existing chunkname, no problem - we will reuse that for fixing nested chunk names
+        if (!t.existingChunkName) {
+          t.existingChunkName = checkForNestedChunkName(importArgNode)
+        }
         const universalImport = getImport(p, IMPORT_UNIVERSAL_DEFAULT)
 
         const cssOptions = {