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.

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

[New] dynamic-import-chunkname: add allowEmpty option to allow empty leading comments #2942

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
35 changes: 34 additions & 1 deletion docs/rules/dynamic-import-chunkname.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ You can also configure the regex format you'd like to accept for the webpackChun
{
"dynamic-import-chunkname": [2, {
importFunctions: ["dynamicImport"],
webpackChunknameFormat: "[a-zA-Z0-57-9-/_]+"
webpackChunknameFormat: "[a-zA-Z0-57-9-/_]+",
allowEmpty: false
}]
}
```
Expand Down Expand Up @@ -87,6 +88,38 @@ The following patterns are valid:
);
```

### `allowEmpty: true`

If you want to allow dynamic imports without a webpackChunkName, you can set `allowEmpty: true` in the rule config. This will allow dynamic imports without a leading comment, or with a leading comment that does not contain a webpackChunkName.

Given `{ "allowEmpty": true }`:

<!-- markdownlint-disable-next-line MD024 -- duplicate header -->
### valid

The following patterns are valid:

```javascript
import('someModule');

import(
/* webpackChunkName: "someModule" */
'someModule',
);
```
<!-- markdownlint-disable-next-line MD024 -- duplicate header -->
### invalid

The following patterns are invalid:

```javascript
// incorrectly formatted comment
import(
/*webpackChunkName:"someModule"*/
'someModule',
);
```

## When Not To Use It

If you don't care that webpack will autogenerate chunk names and may blow up browser caches and bundle size reports.
9 changes: 6 additions & 3 deletions src/rules/dynamic-import-chunkname.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ module.exports = {
type: 'string',
},
},
allowEmpty: {
type: 'boolean',
},
webpackChunknameFormat: {
type: 'string',
},
Expand All @@ -28,7 +31,7 @@ module.exports = {

create(context) {
const config = context.options[0];
const { importFunctions = [] } = config || {};
const { importFunctions = [], allowEmpty = false } = config || {};
const { webpackChunknameFormat = '([0-9a-zA-Z-_/.]|\\[(request|index)\\])+' } = config || {};

const paddedCommentRegex = /^ (\S[\s\S]+\S) $/;
Expand All @@ -42,7 +45,7 @@ module.exports = {
? sourceCode.getCommentsBefore(arg) // This method is available in ESLint >= 4.
: sourceCode.getComments(arg).leading; // This method is deprecated in ESLint 7.

if (!leadingComments || leadingComments.length === 0) {
if ((!leadingComments || leadingComments.length === 0) && !allowEmpty) {
context.report({
node,
message: 'dynamic imports require a leading comment with the webpack chunkname',
Expand Down Expand Up @@ -94,7 +97,7 @@ module.exports = {
}
}

if (!isChunknamePresent) {
if (!isChunknamePresent && !allowEmpty) {
context.report({
node,
message:
Expand Down
30 changes: 30 additions & 0 deletions tests/src/rules/dynamic-import-chunkname.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ const pickyCommentOptions = [{
importFunctions: ['dynamicImport'],
webpackChunknameFormat: pickyCommentFormat,
}];
const allowEmptyOptions = [{
importFunctions: ['dynamicImport'],
allowEmpty: true,
}];
const multipleImportFunctionOptions = [{
importFunctions: ['dynamicImport', 'definitelyNotStaticImport'],
}];
Expand Down Expand Up @@ -83,6 +87,19 @@ ruleTester.run('dynamic-import-chunkname', rule, {
)`,
options,
},
{
code: `import('test')`,
options: allowEmptyOptions,
parser,
},
{
code: `import(
/* webpackMode: "lazy" */
'test'
)`,
options: allowEmptyOptions,
parser,
},
{
code: `import(
/* webpackChunkName: "someModule" */
Expand Down Expand Up @@ -975,6 +992,19 @@ context('TypeScript', () => {

ruleTester.run('dynamic-import-chunkname', rule, {
valid: [
{
code: `import('test')`,
options: allowEmptyOptions,
parser: typescriptParser,
},
{
code: `import(
/* webpackMode: "lazy" */
'test'
)`,
options: allowEmptyOptions,
parser: typescriptParser,
},
{
code: `import(
/* webpackChunkName: "someModule" */
Expand Down
Loading