feat: omit html tag attribute with null/undefined/false value

Refs #1598
jantimon · Feb 12, 2021 · aa6e78d · aa6e78d
1 parent 33d69f4
commit aa6e78d
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 6 deletions.
diff --git a/lib/html-tags.js b/lib/html-tags.js
@@ -25,12 +25,12 @@ const voidTags = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'k
  *  A tag element according to the htmlWebpackPlugin object notation
  *
  * @param xhtml {boolean}
- *   Wether the generated html should add closing slashes to be xhtml compliant
+ *   Whether the generated html should add closing slashes to be xhtml compliant
  */
 function htmlTagObjectToString (tagDefinition, xhtml) {
   const attributes = Object.keys(tagDefinition.attributes || {})
     .filter(function (attributeName) {
-      return tagDefinition.attributes[attributeName] !== false;
+      return tagDefinition.attributes[attributeName] === '' || tagDefinition.attributes[attributeName];
     })
     .map(function (attributeName) {
       if (tagDefinition.attributes[attributeName] === true) {
@@ -49,13 +49,13 @@ function htmlTagObjectToString (tagDefinition, xhtml) {
  * @param {string} tagName
  * the name of the tag e.g. 'div'
  *
- * @param {{[attributeName: string]: string|boolean}} [attributes]
+ * @param {{[attributeName: string]: string|boolean|null|undefined}} [attributes]
  * tag attributes e.g. `{ 'class': 'example', disabled: true }`
  *
  * @param {string} [innerHTML]
  *
- * @param {{[attributeName: string]: string|boolean}} [meta]
- * meta information about the tag e.g. `{ 'pluhin': 'html-webpack-plugin' }`
+ * @param {{[attributeName: string]: string|boolean|null|undefined}} [meta]
+ * meta information about the tag e.g. `{ 'plugin': 'html-webpack-plugin' }`
  *
  * @returns {HtmlTagObject}
  */

diff --git a/spec/basic.spec.js b/spec/basic.spec.js
@@ -1232,6 +1232,74 @@ describe('HtmlWebpackPlugin', () => {
     null, done, false, false);
   });
 
+  it('allows events to remove an attribute by setting it to null', done => {
+    const examplePlugin = {
+      apply: function (compiler) {
+        compiler.hooks.compilation.tap('HtmlWebpackPlugin', compilation => {
+          HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tapAsync('HtmlWebpackPluginTest', (pluginArgs, callback) => {
+            pluginArgs.assetTags.scripts = pluginArgs.assetTags.scripts.map(tag => {
+              if (tag.tagName === 'script') {
+                tag.attributes.async = null;
+              }
+              return tag;
+            });
+            callback(null, pluginArgs);
+          });
+        });
+      }
+    };
+    testHtmlPlugin({
+      mode: 'production',
+      entry: {
+        app: path.join(__dirname, 'fixtures/index.js')
+      },
+      output: {
+        path: OUTPUT_DIR,
+        filename: '[name]_bundle.js'
+      },
+      plugins: [
+        new HtmlWebpackPlugin(),
+        examplePlugin
+      ]
+    },
+    [/<script defer="defer" src="app_bundle.js"><\/script>[\s]*<\/head>/],
+    null, done, false, false);
+  });
+
+  it('allows events to remove an attribute by setting it to undefined', done => {
+    const examplePlugin = {
+      apply: function (compiler) {
+        compiler.hooks.compilation.tap('HtmlWebpackPlugin', compilation => {
+          HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tapAsync('HtmlWebpackPluginTest', (pluginArgs, callback) => {
+            pluginArgs.assetTags.scripts = pluginArgs.assetTags.scripts.map(tag => {
+              if (tag.tagName === 'script') {
+                tag.attributes.async = undefined;
+              }
+              return tag;
+            });
+            callback(null, pluginArgs);
+          });
+        });
+      }
+    };
+    testHtmlPlugin({
+      mode: 'production',
+      entry: {
+        app: path.join(__dirname, 'fixtures/index.js')
+      },
+      output: {
+        path: OUTPUT_DIR,
+        filename: '[name]_bundle.js'
+      },
+      plugins: [
+        new HtmlWebpackPlugin(),
+        examplePlugin
+      ]
+    },
+    [/<script defer="defer" src="app_bundle.js"><\/script>[\s]*<\/head>/],
+    null, done, false, false);
+  });
+
   it('provides the options to the afterEmit event', done => {
     let eventArgs;
     const examplePlugin = {

diff --git a/typings.d.ts b/typings.d.ts
@@ -263,7 +263,7 @@ declare namespace HtmlWebpackPlugin {
      * E.g. `{'disabled': true, 'value': 'demo'}`
      */
     attributes: {
-      [attributeName: string]: string | boolean;
+      [attributeName: string]: string | boolean | null | undefined;
     };
     /**
      * The tag name e.g. `'div'`