Add allowEagerMode option to allow webpackMode: 'eager' comments

import-js · Apr 24, 2024 · db3c637 · db3c637
1 parent f77ceb6
commit db3c637
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 2 deletions.
diff --git a/docs/rules/dynamic-import-chunkname.md b/docs/rules/dynamic-import-chunkname.md
@@ -120,6 +120,30 @@ import(
 );
 ```
 
+### `allowEagerMode: true`
+
+If you want chunk names to be optional when `webpackMode: "eager"` is set, you can set `allowEagerMode: true` in the rule config.
+
+Given `{ "allowEagerMode": true }`:
+
+<!-- markdownlint-disable-next-line MD024 -- duplicate header -->
+### valid
+
+The following patterns are valid:
+
+```javascript
+import('someModule');
+
+import(
+  /* webpackMode: "eager" */
+  'someModule',
+);
+import(
+  /* webpackMode: "eager", 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.
diff --git a/src/rules/dynamic-import-chunkname.js b/src/rules/dynamic-import-chunkname.js
@@ -25,19 +25,23 @@ module.exports = {
         webpackChunknameFormat: {
           type: 'string',
         },
+        allowEagerMode: {
+          type: 'boolean',
+        },
       },
     }],
   },
 
   create(context) {
     const config = context.options[0];
-    const { importFunctions = [], allowEmpty = false } = config || {};
+    const { importFunctions = [], allowEmpty = false, allowEagerMode = false } = config || {};
     const { webpackChunknameFormat = '([0-9a-zA-Z-_/.]|\\[(request|index)\\])+' } = config || {};
 
     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 chunkSubstrRegex = new RegExp(chunkSubstrFormat);
+    const eagerModeRegex = /webpackMode: ["']eager["']/;
 
     function run(node, arg) {
       const sourceCode = context.getSourceCode();
@@ -54,6 +58,7 @@ module.exports = {
       }
 
       let isChunknamePresent = false;
+      let isEagerModePresent = false;
 
       for (const comment of leadingComments) {
         if (comment.type !== 'Block') {
@@ -92,12 +97,20 @@ module.exports = {
           return;
         }
 
+        if (eagerModeRegex.test(comment.value)) {
+          isEagerModePresent = true;
+        }
+
         if (chunkSubstrRegex.test(comment.value)) {
           isChunknamePresent = true;
         }
       }
 
-      if (!isChunknamePresent && !allowEmpty) {
+      if (
+        !isChunknamePresent
+          && !allowEmpty
+          && (allowEagerMode ? !isEagerModePresent : true)
+      ) {
         context.report({
           node,
           message:

diff --git a/tests/src/rules/dynamic-import-chunkname.js b/tests/src/rules/dynamic-import-chunkname.js
@@ -19,6 +19,9 @@ const allowEmptyOptions = [{
 const multipleImportFunctionOptions = [{
   importFunctions: ['dynamicImport', 'definitelyNotStaticImport'],
 }];
+const allowEagerModeOptions = [{
+  allowEagerMode: true,
+}];
 const parser = parsers.BABEL_OLD;
 
 const noLeadingCommentError = 'dynamic imports require a leading comment with the webpack chunkname';
@@ -419,6 +422,14 @@ ruleTester.run('dynamic-import-chunkname', rule, {
       options,
       parser,
     },
+    {
+      code: `import(
+        /* webpackMode: 'eager' */
+        'someModule'
+      )`,
+      options: allowEagerModeOptions,
+      parser,
+    },
     ...SYNTAX_CASES,
   ],
 
@@ -867,6 +878,22 @@ ruleTester.run('dynamic-import-chunkname', rule, {
         type: 'CallExpression',
       }],
     },
+    {
+      code: `import(
+        /* webpackMode: "eager" */
+        'someModule'
+      )`,
+      options,
+      parser,
+      output: `import(
+        /* webpackMode: "eager" */
+        'someModule'
+      )`,
+      errors: [{
+        message: chunkNameFormatError,
+        type: 'CallExpression',
+      }],
+    },
     {
       code: `dynamicImport(
         /* webpackChunkName "someModule" */