From 898ce3bb6be2ce32d33d41deb3bc5be38b9df26c Mon Sep 17 00:00:00 2001 From: Ankit Sardesai Date: Tue, 23 Apr 2024 21:40:29 -0700 Subject: [PATCH] [New] `dynamic-import-chunkname`: Allow empty chunk name when webpackMode: 'eager' is set; add suggestions to remove name in eager mode' --- CHANGELOG.md | 3 + README.md | 2 +- docs/rules/dynamic-import-chunkname.md | 9 + src/rules/dynamic-import-chunkname.js | 51 ++++- tests/src/rules/dynamic-import-chunkname.js | 205 ++++++++++++++++++-- 5 files changed, 251 insertions(+), 19 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a07647c82d..c7cd6c4431 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange ### Added - [`dynamic-import-chunkname`]: add `allowEmpty` option to allow empty leading comments ([#2942], thanks [@JiangWeixian]) +- [`dynamic-import-chunkname`]: Allow empty chunk name when webpackMode: 'eager' is set; add suggestions to remove name in eager mode ([#3004], thanks [@amsardesai]) ### Changed - [Docs] `no-extraneous-dependencies`: Make glob pattern description more explicit ([#2944], thanks [@mulztob]) @@ -1115,6 +1116,7 @@ for info on changes for earlier releases. [`memo-parser`]: ./memo-parser/README.md +[#3004]: https://github.com/import-js/eslint-plugin-import/pull/3004 [#2991]: https://github.com/import-js/eslint-plugin-import/pull/2991 [#2989]: https://github.com/import-js/eslint-plugin-import/pull/2989 [#2987]: https://github.com/import-js/eslint-plugin-import/pull/2987 @@ -1701,6 +1703,7 @@ for info on changes for earlier releases. [@aladdin-add]: https://github.com/aladdin-add [@alex-page]: https://github.com/alex-page [@alexgorbatchev]: https://github.com/alexgorbatchev +[@amsardesai]: https://github.com/amsardesai [@andreubotella]: https://github.com/andreubotella [@AndrewLeedham]: https://github.com/AndrewLeedham [@andyogo]: https://github.com/andyogo diff --git a/README.md b/README.md index d6f107d1c9..1fd113c7d0 100644 --- a/README.md +++ b/README.md @@ -73,7 +73,7 @@ This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, a | Name                            | Description | 💼 | ⚠️ | 🚫 | 🔧 | 💡 | ❌ | | :------------------------------------------------------------------------------- | :------------------------------------------------------------------------- | :- | :---- | :- | :- | :- | :- | | [consistent-type-specifier-style](docs/rules/consistent-type-specifier-style.md) | Enforce or ban the use of inline type-only markers for named imports. | | | | 🔧 | | | -| [dynamic-import-chunkname](docs/rules/dynamic-import-chunkname.md) | Enforce a leading comment with the webpackChunkName for dynamic imports. | | | | | | | +| [dynamic-import-chunkname](docs/rules/dynamic-import-chunkname.md) | Enforce a leading comment with the webpackChunkName for dynamic imports. | | | | | 💡 | | | [exports-last](docs/rules/exports-last.md) | Ensure all exports appear after other statements. | | | | | | | | [extensions](docs/rules/extensions.md) | Ensure consistent use of file extension within the import path. | | | | | | | | [first](docs/rules/first.md) | Ensure all imports appear before other statements. | | | | 🔧 | | | diff --git a/docs/rules/dynamic-import-chunkname.md b/docs/rules/dynamic-import-chunkname.md index dd526c8913..de554148ee 100644 --- a/docs/rules/dynamic-import-chunkname.md +++ b/docs/rules/dynamic-import-chunkname.md @@ -1,5 +1,7 @@ # import/dynamic-import-chunkname +💡 This rule is manually fixable by [editor suggestions](https://eslint.org/docs/latest/use/core-concepts#rule-suggestions). + This rule reports any dynamic imports without a webpackChunkName specified in a leading block comment in the proper format. @@ -56,6 +58,13 @@ import( // webpackChunkName: "someModule" 'someModule', ); + +// chunk names are disallowed when eager mode is set +import( + /* webpackMode: "eager" */ + /* webpackChunkName: "someModule" */ + 'someModule', +) ``` ### valid diff --git a/src/rules/dynamic-import-chunkname.js b/src/rules/dynamic-import-chunkname.js index a62e5c6c12..a72b04d123 100644 --- a/src/rules/dynamic-import-chunkname.js +++ b/src/rules/dynamic-import-chunkname.js @@ -27,6 +27,7 @@ module.exports = { }, }, }], + hasSuggestions: true, }, create(context) { @@ -36,8 +37,10 @@ module.exports = { const paddedCommentRegex = /^ (\S[\s\S]+\S) $/; const commentStyleRegex = /^( ((webpackChunkName: .+)|((webpackPrefetch|webpackPreload): (true|false|-?[0-9]+))|(webpackIgnore: (true|false))|((webpackInclude|webpackExclude): \/.*\/)|(webpackMode: ["'](lazy|lazy-once|eager|weak)["'])|(webpackExports: (['"]\w+['"]|\[(['"]\w+['"], *)+(['"]\w+['"]*)\]))),?)+ $/; - const chunkSubstrFormat = ` webpackChunkName: ["']${webpackChunknameFormat}["'],? `; + const chunkSubstrFormat = `webpackChunkName: ["']${webpackChunknameFormat}["'],? `; const chunkSubstrRegex = new RegExp(chunkSubstrFormat); + const eagerModeFormat = `webpackMode: ["']eager["'],? `; + const eagerModeRegex = new RegExp(eagerModeFormat); function run(node, arg) { const sourceCode = context.getSourceCode(); @@ -54,6 +57,7 @@ module.exports = { } let isChunknamePresent = false; + let isEagerModePresent = false; for (const comment of leadingComments) { if (comment.type !== 'Block') { @@ -92,12 +96,55 @@ module.exports = { return; } + if (eagerModeRegex.test(comment.value)) { + isEagerModePresent = true; + } + if (chunkSubstrRegex.test(comment.value)) { isChunknamePresent = true; } } - if (!isChunknamePresent && !allowEmpty) { + if (isChunknamePresent && isEagerModePresent) { + context.report({ + node, + message: 'dynamic imports using eager mode do not need a webpackChunkName', + suggest: [ + { + desc: 'Remove webpackChunkName', + fix(fixer) { + for (const comment of leadingComments) { + if (chunkSubstrRegex.test(comment.value)) { + const replacement = comment.value.replace(chunkSubstrRegex, '').trim().replace(/,$/, ''); + if (replacement === '') { + return fixer.remove(comment); + } else { + return fixer.replaceText(comment, `/* ${replacement} */`); + } + } + } + }, + }, + { + desc: 'Remove webpackMode', + fix(fixer) { + for (const comment of leadingComments) { + if (eagerModeRegex.test(comment.value)) { + const replacement = comment.value.replace(eagerModeRegex, '').trim().replace(/,$/, ''); + if (replacement === '') { + return fixer.remove(comment); + } else { + return fixer.replaceText(comment, `/* ${replacement} */`); + } + } + } + }, + }, + ], + }); + } + + if (!isChunknamePresent && !allowEmpty && !isEagerModePresent) { context.report({ node, message: diff --git a/tests/src/rules/dynamic-import-chunkname.js b/tests/src/rules/dynamic-import-chunkname.js index c710507b26..b5a68597ae 100644 --- a/tests/src/rules/dynamic-import-chunkname.js +++ b/tests/src/rules/dynamic-import-chunkname.js @@ -26,8 +26,9 @@ const nonBlockCommentError = 'dynamic imports require a /* foo */ style comment, const noPaddingCommentError = 'dynamic imports require a block comment padded with spaces - /* foo */'; const invalidSyntaxCommentError = 'dynamic imports require a "webpack" comment with valid syntax'; const commentFormatError = `dynamic imports require a "webpack" comment with valid syntax`; -const chunkNameFormatError = `dynamic imports require a leading comment in the form /* webpackChunkName: ["']${commentFormat}["'],? */`; -const pickyChunkNameFormatError = `dynamic imports require a leading comment in the form /* webpackChunkName: ["']${pickyCommentFormat}["'],? */`; +const chunkNameFormatError = `dynamic imports require a leading comment in the form /*webpackChunkName: ["']${commentFormat}["'],? */`; +const pickyChunkNameFormatError = `dynamic imports require a leading comment in the form /*webpackChunkName: ["']${pickyCommentFormat}["'],? */`; +const eagerModeError = `dynamic imports using eager mode do not need a webpackChunkName`; ruleTester.run('dynamic-import-chunkname', rule, { valid: [ @@ -354,8 +355,7 @@ ruleTester.run('dynamic-import-chunkname', rule, { }, { code: `import( - /* webpackChunkName: "someModule" */ - /* webpackMode: "eager" */ + /* webpackMode: 'eager' */ 'someModule' )`, options, @@ -412,7 +412,7 @@ ruleTester.run('dynamic-import-chunkname', rule, { /* webpackPrefetch: true */ /* webpackPreload: true */ /* webpackIgnore: false */ - /* webpackMode: "eager" */ + /* webpackMode: "lazy" */ /* webpackExports: ["default", "named"] */ 'someModule' )`, @@ -981,6 +981,24 @@ ruleTester.run('dynamic-import-chunkname', rule, { type: 'CallExpression', }], }, + { + code: `import( + /* webpackChunkName: "someModule" */ + /* webpackMode: "eager" */ + 'someModule' + )`, + options, + parser, + output: `import( + /* webpackChunkName: "someModule" */ + /* webpackMode: "eager" */ + 'someModule' + )`, + errors: [{ + message: eagerModeError, + type: 'CallExpression', + }], + }, ], }); @@ -1213,15 +1231,6 @@ context('TypeScript', () => { options, parser: typescriptParser, }, - { - code: `import( - /* webpackChunkName: "someModule" */ - /* webpackMode: "lazy" */ - 'someModule' - )`, - options, - parser: typescriptParser, - }, { code: `import( /* webpackChunkName: 'someModule', webpackMode: 'lazy' */ @@ -1242,7 +1251,7 @@ context('TypeScript', () => { { code: `import( /* webpackChunkName: "someModule" */ - /* webpackMode: "eager" */ + /* webpackMode: "lazy" */ 'someModule' )`, options, @@ -1299,13 +1308,21 @@ context('TypeScript', () => { /* webpackPrefetch: true */ /* webpackPreload: true */ /* webpackIgnore: false */ - /* webpackMode: "eager" */ + /* webpackMode: "lazy" */ /* webpackExports: ["default", "named"] */ 'someModule' )`, options, parser: typescriptParser, }, + { + code: `import( + /* webpackMode: 'eager' */ + 'someModule' + )`, + options, + parser: typescriptParser, + }, ], invalid: [ { @@ -1752,6 +1769,162 @@ context('TypeScript', () => { type: nodeType, }], }, + { + code: `import( + /* webpackChunkName: "someModule", webpackMode: "eager" */ + 'someModule' + )`, + options, + parser: typescriptParser, + output: `import( + /* webpackChunkName: "someModule", webpackMode: "eager" */ + 'someModule' + )`, + errors: [{ + message: eagerModeError, + type: nodeType, + suggestions: [ + { + desc: 'Remove webpackChunkName', + output: `import( + /* webpackMode: "eager" */ + 'someModule' + )`, + }, + { + desc: 'Remove webpackMode', + output: `import( + /* webpackChunkName: "someModule" */ + 'someModule' + )`, + }, + ], + }], + }, + { + code: ` + import( + /* webpackMode: "eager", webpackChunkName: "someModule" */ + 'someModule' + ) + `, + options, + parser: typescriptParser, + output: ` + import( + /* webpackMode: "eager", webpackChunkName: "someModule" */ + 'someModule' + ) + `, + errors: [{ + message: eagerModeError, + type: nodeType, + suggestions: [ + { + desc: 'Remove webpackChunkName', + output: ` + import( + /* webpackMode: "eager" */ + 'someModule' + ) + `, + }, + { + desc: 'Remove webpackMode', + output: ` + import( + /* webpackChunkName: "someModule" */ + 'someModule' + ) + `, + }, + ], + }], + }, + { + code: ` + import( + /* webpackMode: "eager", webpackPrefetch: true, webpackChunkName: "someModule" */ + 'someModule' + ) + `, + options, + parser: typescriptParser, + output: ` + import( + /* webpackMode: "eager", webpackPrefetch: true, webpackChunkName: "someModule" */ + 'someModule' + ) + `, + errors: [{ + message: eagerModeError, + type: nodeType, + suggestions: [ + { + desc: 'Remove webpackChunkName', + output: ` + import( + /* webpackMode: "eager", webpackPrefetch: true */ + 'someModule' + ) + `, + }, + { + desc: 'Remove webpackMode', + output: ` + import( + /* webpackPrefetch: true, webpackChunkName: "someModule" */ + 'someModule' + ) + `, + }, + ], + }], + }, + { + code: ` + import( + /* webpackChunkName: "someModule" */ + /* webpackMode: "eager" */ + 'someModule' + ) + `, + options, + parser: typescriptParser, + output: ` + import( + /* webpackChunkName: "someModule" */ + /* webpackMode: "eager" */ + 'someModule' + ) + `, + errors: [{ + message: eagerModeError, + type: nodeType, + suggestions: [ + { + desc: 'Remove webpackChunkName', + output: ` + import( + ${''} + /* webpackMode: "eager" */ + 'someModule' + ) + `, + }, + { + desc: 'Remove webpackMode', + output: ` + import( + /* webpackChunkName: "someModule" */ + ${''} + 'someModule' + ) + `, + }, + ], + }], + }, ], }); });