fix(babel-plugin): handle special chars in file names (#279)

gregberge · Mar 19, 2019 · 4da39ff · 4da39ff
1 parent 3767f28
commit 4da39ff
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 30 deletions.
diff --git a/packages/babel-plugin/src/__snapshots__/index.test.js.snap b/packages/babel-plugin/src/__snapshots__/index.test.js.snap
@@ -488,6 +488,45 @@ exports[`plugin simple import should transform path into "chunk-friendly" name 1
 });"
 `;
 
+exports[`plugin simple import should work with custom name 1`] = `
+"loadable({
+  chunkName() {
+    return \`foo\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
+  },
+
+  isReady(props) {
+    if (typeof __webpack_modules__ !== 'undefined') {
+      return !!__webpack_modules__[this.resolve(props)];
+    }
+
+    return false;
+  },
+
+  requireAsync: () => import(
+  /* webpackChunkName: \\"foo\\" */
+  \`./foo*\`),
+
+  requireSync(props) {
+    const id = this.resolve(props);
+
+    if (typeof __webpack_require__ !== 'undefined') {
+      return __webpack_require__(id);
+    }
+
+    return eval('module.require')(id);
+  },
+
+  resolve() {
+    if (require.resolveWeak) {
+      return require.resolveWeak(\`./foo*\`);
+    }
+
+    return require('path').resolve(__dirname, \`./foo*\`);
+  }
+
+});"
+`;
+
 exports[`plugin simple import should work with template literal 1`] = `
 "loadable({
   chunkName() {

diff --git a/packages/babel-plugin/src/index.test.js b/packages/babel-plugin/src/index.test.js
@@ -21,6 +21,14 @@ describe('plugin', () => {
       expect(result).toMatchSnapshot()
     })
 
+    it('should work with custom name', () => {
+      const result = testPlugin(`
+        loadable(() => import(\`./foo*\`))
+      `)
+
+      expect(result).toMatchSnapshot()
+    })
+
     it('should transform path into "chunk-friendly" name', () => {
       const result = testPlugin(`
         loadable(() => import('../foo/bar'))

diff --git a/packages/babel-plugin/src/properties/chunkName.js b/packages/babel-plugin/src/properties/chunkName.js
@@ -1,9 +1,12 @@
 import vm from 'vm'
 import { getImportArg } from '../util'
 
-const WEBPACK_CHUNK_NAME_REGEXP = /webpackChunkName/
+const JS_PATH_REGEXP = /^[./]+|(\.js$)/g
+const MATCH_LEFT_HYPHENS_REPLACE_REGEX = /^-/g
 // https://github.com/webpack/webpack/blob/master/lib/Template.js
+const WEBPACK_CHUNK_NAME_REGEXP = /webpackChunkName/
 const WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX = /[^a-zA-Z0-9_!§$()=\-^°]+/g
+const WEBPACK_MATCH_PADDED_HYPHENS_REPLACE_REGEX = /^-|-$/g
 
 function readWebpackCommentValues(str) {
   try {
@@ -41,29 +44,30 @@ function getRawChunkNameFromCommments(importArg) {
 }
 
 function moduleToChunk(str) {
-  return str ? str.replace(/^[./]+|(\.js$)/g, '').replace(WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX, '-') : ''
+  if (typeof str !== 'string') return ''
+  return str
+    .replace(JS_PATH_REGEXP, '')
+    .replace(WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX, '-')
+    .replace(WEBPACK_MATCH_PADDED_HYPHENS_REPLACE_REGEX, '')
 }
 
-function replaceQuasiValue(str) {
-  return str ? str.replace(WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX, '-') : str
+function replaceQuasi(str, stripLeftHyphen) {
+  if (!str) return ''
+  const result = str.replace(WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX, '-')
+  if (!stripLeftHyphen) return result
+  return result.replace(MATCH_LEFT_HYPHENS_REPLACE_REGEX, '')
 }
 
 export default function chunkNameProperty({ types: t }) {
-  function transformQuasi(quasi, index) {
-    if (index === 0) {
-      return t.templateElement(
-        {
-          raw: moduleToChunk(quasi.value.raw),
-          cooked: moduleToChunk(quasi.value.cooked),
-        },
-        quasi.tail,
-      )
-    }
-
+  function transformQuasi(quasi, first, single) {
     return t.templateElement(
       {
-        raw: replaceQuasiValue(quasi.value.raw),
-        cooked: replaceQuasiValue(quasi.value.cooked),
+        raw: single
+          ? moduleToChunk(quasi.value.raw)
+          : replaceQuasi(quasi.value.raw, first),
+        cooked: single
+          ? moduleToChunk(quasi.value.cooked)
+          : replaceQuasi(quasi.value.cooked, first),
       },
       quasi.tail,
     )
@@ -73,7 +77,13 @@ export default function chunkNameProperty({ types: t }) {
     const importArg = getImportArg(callPath)
     if (importArg.isTemplateLiteral()) {
       return t.templateLiteral(
-        importArg.node.quasis.map(transformQuasi),
+        importArg.node.quasis.map((quasi, index) =>
+          transformQuasi(
+            quasi,
+            index === 0,
+            importArg.node.quasis.length === 1,
+          ),
+        ),
         importArg.node.expressions,
       )
     }
@@ -112,16 +122,10 @@ export default function chunkNameProperty({ types: t }) {
   }
 
   function sanitizeChunkNameTemplateLiteral(node) {
-    return t.callExpression(
-      t.memberExpression(
-        node,
-        t.identifier('replace')
-      ),
-      [
-        t.regExpLiteral(WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX.source, 'g'),
-        t.stringLiteral('-')
-      ]
-    )
+    return t.callExpression(t.memberExpression(node, t.identifier('replace')), [
+      t.regExpLiteral(WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX.source, 'g'),
+      t.stringLiteral('-'),
+    ])
   }
 
   function replaceChunkName(callPath) {
@@ -147,8 +151,6 @@ export default function chunkNameProperty({ types: t }) {
     return chunkNameNode
   }
 
-
-
   return ({ callPath, funcPath }) => {
     const chunkName = replaceChunkName(callPath)