Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix agressive code splitting when passing props containing "." #219

Merged
merged 1 commit into from
Feb 4, 2019
Merged

Fix agressive code splitting when passing props containing "." #219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/babel-plugin/src/__snapshots__/index.test.js.snap
View file
Open in desktop
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
View file
Open in desktop
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