[New] dynamic-import-chunkname: add allowEmpty option to allow em…

…pty leading comments
ljharb · Dec 17, 2023 · e9489d8 · e9489d8
1 parent 6f0668c
commit e9489d8
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 4 deletions.
diff --git a/docs/rules/dynamic-import-chunkname.md b/docs/rules/dynamic-import-chunkname.md
@@ -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
   }]
 }
 ```
@@ -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.
diff --git a/src/rules/dynamic-import-chunkname.js b/src/rules/dynamic-import-chunkname.js
@@ -19,6 +19,9 @@ module.exports = {
             type: 'string',
           },
         },
+        allowEmpty: {
+          type: 'boolean',
+        },
         webpackChunknameFormat: {
           type: 'string',
         },
@@ -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) $/;
@@ -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',
@@ -94,7 +97,7 @@ module.exports = {
         }
       }
 
-      if (!isChunknamePresent) {
+      if (!isChunknamePresent && !allowEmpty) {
         context.report({
           node,
           message:

diff --git a/tests/src/rules/dynamic-import-chunkname.js b/tests/src/rules/dynamic-import-chunkname.js
@@ -12,6 +12,10 @@ const pickyCommentOptions = [{
   importFunctions: ['dynamicImport'],
   webpackChunknameFormat: pickyCommentFormat,
 }];
+const allowEmptyOptions = [{
+  importFunctions: ['dynamicImport'],
+  allowEmpty: true,
+}];
 const multipleImportFunctionOptions = [{
   importFunctions: ['dynamicImport', 'definitelyNotStaticImport'],
 }];
@@ -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" */
@@ -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" */