Skip to content

Commit 7173569

Browse files
amsardesaiamsardesai
committed
add eslint suggestions for removing chunk name or mode
1 parent f9aa295 commit 7173569

File tree

4 files changed

+157
-7
lines changed

4 files changed

+157
-7
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, a
7373
| Name                            | Description | 💼 | ⚠️ | 🚫 | 🔧 | 💡 | ❌ |
7474
| :------------------------------------------------------------------------------- | :------------------------------------------------------------------------- | :- | :---- | :- | :- | :- | :- |
7575
| [consistent-type-specifier-style](docs/rules/consistent-type-specifier-style.md) | Enforce or ban the use of inline type-only markers for named imports. | | | | 🔧 | | |
76-
| [dynamic-import-chunkname](docs/rules/dynamic-import-chunkname.md) | Enforce a leading comment with the webpackChunkName for dynamic imports. | | | | | | |
76+
| [dynamic-import-chunkname](docs/rules/dynamic-import-chunkname.md) | Enforce a leading comment with the webpackChunkName for dynamic imports. | | | | | 💡 | |
7777
| [exports-last](docs/rules/exports-last.md) | Ensure all exports appear after other statements. | | | | | | |
7878
| [extensions](docs/rules/extensions.md) | Ensure consistent use of file extension within the import path. | | | | | | |
7979
| [first](docs/rules/first.md) | Ensure all imports appear before other statements. | | | | 🔧 | | |

‎docs/rules/dynamic-import-chunkname.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# import/dynamic-import-chunkname
22

3+
💡 This rule is manually fixable by [editor suggestions](https://eslint.org/docs/latest/use/core-concepts#rule-suggestions).
4+
35
<!-- end auto-generated rule header -->
46

57
This rule reports any dynamic imports without a webpackChunkName specified in a leading block comment in the proper format.

‎src/rules/dynamic-import-chunkname.js‎

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ module.exports = {
2727
},
2828
},
2929
}],
30+
hasSuggestions: true,
3031
},
3132

3233
create(context) {
@@ -36,9 +37,10 @@ module.exports = {
3637

3738
const paddedCommentRegex = /^ (\S[\s\S]+\S) $/;
3839
const commentStyleRegex = /^( ((webpackChunkName: .+)|((webpackPrefetch|webpackPreload): (true|false|-?[0-9]+))|(webpackIgnore: (true|false))|((webpackInclude|webpackExclude): \/.*\/)|(webpackMode: ["'](lazy|lazy-once|eager|weak)["'])|(webpackExports: (['"]\w+['"]|\[(['"]\w+['"], *)+(['"]\w+['"]*)\]))),?)+ $/;
39-
const chunkSubstrFormat = ` webpackChunkName: ["']${webpackChunknameFormat}["'],? `;
40+
const chunkSubstrFormat = `webpackChunkName: ["']${webpackChunknameFormat}["'],? `;
4041
const chunkSubstrRegex = new RegExp(chunkSubstrFormat);
41-
const eagerModeRegex = /webpackMode: ["']eager["']/;
42+
const eagerModeFormat = `webpackMode: ["']eager["'],? `;
43+
const eagerModeRegex = new RegExp(eagerModeFormat);
4244

4345
function run(node, arg) {
4446
const sourceCode = context.getSourceCode();
@@ -106,7 +108,39 @@ module.exports = {
106108
if (isChunknamePresent && isEagerModePresent) {
107109
context.report({
108110
node,
109-
message: 'dynamic imports should not have both webpackChunkName and webpackMode: "eager". Consider using webpackMode: "lazy" or removing the webpackChunkName.',
111+
message: 'dynamic imports using eager mode do not need a webpackChunkName',
112+
suggest: [
113+
{
114+
desc: 'Remove webpackChunkName',
115+
fix(fixer) {
116+
for (const comment of leadingComments) {
117+
if (chunkSubstrRegex.test(comment.value)) {
118+
const replacement = comment.value.replace(chunkSubstrRegex, '').trim().replace(/,$/, '');
119+
if (replacement === '') {
120+
return fixer.remove(comment);
121+
} else {
122+
return fixer.replaceText(comment, `/* ${replacement} */`);
123+
}
124+
}
125+
}
126+
},
127+
},
128+
{
129+
desc: 'Remove webpackMode',
130+
fix(fixer) {
131+
for (const comment of leadingComments) {
132+
if (eagerModeRegex.test(comment.value)) {
133+
const replacement = comment.value.replace(eagerModeRegex, '').trim().replace(/,$/, '');
134+
if (replacement === '') {
135+
return fixer.remove(comment);
136+
} else {
137+
return fixer.replaceText(comment, `/* ${replacement} */`);
138+
}
139+
}
140+
}
141+
},
142+
},
143+
],
110144
});
111145
}
112146

‎tests/src/rules/dynamic-import-chunkname.js‎

Lines changed: 117 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ const nonBlockCommentError = 'dynamic imports require a /* foo */ style comment,
2626
const noPaddingCommentError = 'dynamic imports require a block comment padded with spaces - /* foo */';
2727
const invalidSyntaxCommentError = 'dynamic imports require a "webpack" comment with valid syntax';
2828
const commentFormatError = `dynamic imports require a "webpack" comment with valid syntax`;
29-
const chunkNameFormatError = `dynamic imports require a leading comment in the form /* webpackChunkName: ["']${commentFormat}["'],? */`;
30-
const pickyChunkNameFormatError = `dynamic imports require a leading comment in the form /* webpackChunkName: ["']${pickyCommentFormat}["'],? */`;
31-
const eagerModeError = `dynamic imports should not have both webpackChunkName and webpackMode: "eager"`;
29+
const chunkNameFormatError = `dynamic imports require a leading comment in the form /*webpackChunkName: ["']${commentFormat}["'],? */`;
30+
const pickyChunkNameFormatError = `dynamic imports require a leading comment in the form /*webpackChunkName: ["']${pickyCommentFormat}["'],? */`;
31+
const eagerModeError = `dynamic imports using eager mode do not need a webpackChunkName`;
3232

3333
ruleTester.run('dynamic-import-chunkname', rule, {
3434
valid: [
@@ -1785,6 +1785,120 @@ context('TypeScript', () => {
17851785
errors: [{
17861786
message: eagerModeError,
17871787
type: nodeType,
1788+
suggestions: [
1789+
{
1790+
desc: 'Remove webpackChunkName',
1791+
output: `import(
1792+
1793+
/* webpackMode: "eager" */
1794+
'someModule'
1795+
)`,
1796+
},
1797+
{
1798+
desc: 'Remove webpackMode',
1799+
output: `import(
1800+
/* webpackChunkName: "someModule" */
1801+
1802+
'someModule'
1803+
)`,
1804+
},
1805+
],
1806+
}],
1807+
},
1808+
{
1809+
code: `import(
1810+
/* webpackChunkName: "someModule", webpackMode: "eager" */
1811+
'someModule'
1812+
)`,
1813+
options,
1814+
parser: typescriptParser,
1815+
output: `import(
1816+
/* webpackChunkName: "someModule", webpackMode: "eager" */
1817+
'someModule'
1818+
)`,
1819+
errors: [{
1820+
message: eagerModeError,
1821+
type: nodeType,
1822+
suggestions: [
1823+
{
1824+
desc: 'Remove webpackChunkName',
1825+
output: `import(
1826+
/* webpackMode: "eager" */
1827+
'someModule'
1828+
)`,
1829+
},
1830+
{
1831+
desc: 'Remove webpackMode',
1832+
output: `import(
1833+
/* webpackChunkName: "someModule" */
1834+
'someModule'
1835+
)`,
1836+
},
1837+
],
1838+
}],
1839+
},
1840+
{
1841+
code: `import(
1842+
/* webpackMode: "eager", webpackChunkName: "someModule" */
1843+
'someModule'
1844+
)`,
1845+
options,
1846+
parser: typescriptParser,
1847+
output: `import(
1848+
/* webpackMode: "eager", webpackChunkName: "someModule" */
1849+
'someModule'
1850+
)`,
1851+
errors: [{
1852+
message: eagerModeError,
1853+
type: nodeType,
1854+
suggestions: [
1855+
{
1856+
desc: 'Remove webpackChunkName',
1857+
output: `import(
1858+
/* webpackMode: "eager" */
1859+
'someModule'
1860+
)`,
1861+
},
1862+
{
1863+
desc: 'Remove webpackMode',
1864+
output: `import(
1865+
/* webpackChunkName: "someModule" */
1866+
'someModule'
1867+
)`,
1868+
},
1869+
],
1870+
}],
1871+
},
1872+
{
1873+
code: `import(
1874+
/* webpackMode: "eager", webpackPrefetch: true, webpackChunkName: "someModule" */
1875+
'someModule'
1876+
)`,
1877+
options,
1878+
parser: typescriptParser,
1879+
output: `import(
1880+
/* webpackMode: "eager", webpackPrefetch: true, webpackChunkName: "someModule" */
1881+
'someModule'
1882+
)`,
1883+
errors: [{
1884+
message: eagerModeError,
1885+
type: nodeType,
1886+
suggestions: [
1887+
{
1888+
desc: 'Remove webpackChunkName',
1889+
output: `import(
1890+
/* webpackMode: "eager", webpackPrefetch: true */
1891+
'someModule'
1892+
)`,
1893+
},
1894+
{
1895+
desc: 'Remove webpackMode',
1896+
output: `import(
1897+
/* webpackPrefetch: true, webpackChunkName: "someModule" */
1898+
'someModule'
1899+
)`,
1900+
},
1901+
],
17881902
}],
17891903
},
17901904
],

0 commit comments

Comments
 (0)