Skip to content

Commit

Permalink
fix(server): fix chunkName resolving (#219)
Browse files Browse the repository at this point in the history
  • Loading branch information
marcmrf authored and gregberge committed Feb 4, 2019
1 parent cfab31f commit ef11e11
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 12 deletions.
12 changes: 6 additions & 6 deletions packages/babel-plugin/src/__snapshots__/index.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`plugin aggressive import should work with destructuration 1`] = `
chunkName({
foo
}) {
return \`\${foo}\`;
return \`\${foo}\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
Expand Down Expand Up @@ -48,7 +48,7 @@ exports[`plugin aggressive import should work with destructuration 1`] = `
exports[`plugin aggressive import with "webpackChunkName" should replace it 1`] = `
"loadable({
chunkName(props) {
return \`\${props.foo}\`;
return \`\${props.foo}\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
Expand Down Expand Up @@ -87,7 +87,7 @@ exports[`plugin aggressive import with "webpackChunkName" should replace it 1`]
exports[`plugin aggressive import without "webpackChunkName" should support complex request 1`] = `
"loadable({
chunkName(props) {
return \`dir-\${props.foo}-test\`;
return \`dir-\${props.foo}-test\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
Expand Down Expand Up @@ -128,7 +128,7 @@ exports[`plugin aggressive import without "webpackChunkName" should support dest
chunkName({
foo
}) {
return \`dir-\${foo}-test\`;
return \`dir-\${foo}-test\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
Expand Down Expand Up @@ -171,7 +171,7 @@ exports[`plugin aggressive import without "webpackChunkName" should support dest
exports[`plugin aggressive import without "webpackChunkName" should support simple request 1`] = `
"loadable({
chunkName(props) {
return \`\${props.foo}\`;
return \`\${props.foo}\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
Expand Down Expand Up @@ -327,7 +327,7 @@ exports[`plugin simple import should transform path into "chunk-friendly" name 1
exports[`plugin simple import should work with template literal 1`] = `
"loadable({
chunkName() {
return \`ModA\`;
return \`ModA\`.replace(/[^a-zA-Z0-9_$()=\\\\-^°]+/g, \\"-\\");
},
isReady(props) {
Expand Down
35 changes: 29 additions & 6 deletions packages/babel-plugin/src/properties/chunkName.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import vm from 'vm'
import { getImportArg } from '../util'

const WEBPACK_CHUNK_NAME_REGEXP = /webpackChunkName/
// https://github.com/webpack/webpack/blob/master/lib/Template.js
const WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX = /[^a-zA-Z0-9_!§$()=\-^°]+/g

function readWebpackCommentValues(str) {
try {
Expand Down Expand Up @@ -39,11 +41,11 @@ function getRawChunkNameFromCommments(importArg) {
}

function moduleToChunk(str) {
return str ? str.replace(/^[./]+|(\.js$)/g, '').replace(/\//, '-') : ''
return str ? str.replace(/^[./]+|(\.js$)/g, '').replace(WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX, '-') : ''
}

function replaceQuasiValue(str) {
return str ? str.replace(/\//g, '-') : str
return str ? str.replace(WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX, '-') : str
}

export default function chunkNameProperty({ types: t }) {
Expand Down Expand Up @@ -109,6 +111,19 @@ export default function chunkNameProperty({ types: t }) {
return `${v1}[request]${v2}`
}

function sanitizeChunkNameTemplateLiteral(node) {
return t.callExpression(
t.memberExpression(
node,
t.identifier('replace')
),
[
t.regExpLiteral(WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX.source, 'g'),
t.stringLiteral('-')
]
)
}

function replaceChunkName(callPath) {
const agressiveImport = isAgressiveImport(callPath)
const values = getExistingChunkNameComment(callPath)
Expand All @@ -118,14 +133,22 @@ export default function chunkNameProperty({ types: t }) {
return t.stringLiteral(values.webpackChunkName)
}

const chunkNameNode = generateChunkNameNode(callPath)
const webpackChunkName = t.isTemplateLiteral(chunkNameNode)
? chunkNameFromTemplateLiteral(chunkNameNode)
: chunkNameNode.value
let chunkNameNode = generateChunkNameNode(callPath)
let webpackChunkName

if (t.isTemplateLiteral(chunkNameNode)) {
webpackChunkName = chunkNameFromTemplateLiteral(chunkNameNode)
chunkNameNode = sanitizeChunkNameTemplateLiteral(chunkNameNode)
} else {
webpackChunkName = chunkNameNode.value
}

addOrReplaceChunkNameComment(callPath, { webpackChunkName })
return chunkNameNode
}



return ({ callPath, funcPath }) => {
const chunkName = replaceChunkName(callPath)

Expand Down

0 comments on commit ef11e11

Please sign in to comment.