fix: when using the integrity option, leaves the original attributes …

…in the script tag as is
webdiscus · Aug 1, 2024 · 9f8a7c5 · 9f8a7c5
1 parent 72bd2c3
commit 9f8a7c5
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change log
 
+## 3.17.1 (2024-08-01)
+
+- fix: when using the integrity option, leaves the original attributes in the script tag as is
+
 ## 3.17.0 (2024-07-23)
 
 - feat: add support the `?inline` query for styles imported in JavaScript:

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "3.17.0",
+  "version": "3.17.1",
   "description": "HTML bundler plugin for webpack handles a template as an entry point, extracts CSS and JS from their sources referenced in HTML, supports template engines like Eta, EJS, Handlebars, Nunjucks.",
   "keywords": [
     "html",

diff --git a/src/Plugin/Collection.js b/src/Plugin/Collection.js
@@ -1028,7 +1028,8 @@ class Collection {
 
               let attrsStr = '';
               for (const attrName in attrs) {
-                attrsStr += ` ${attrName}="${attrs[attrName]}"`;
+                let value = attrs[attrName];
+                attrsStr += value == null ? ` ${attrName}` : ` ${attrName}="${value}"`;
               }
 
               output += content.slice(pos, startPos) + `<${tag}${attrsStr}>`;

diff --git a/test/cases/integrity-script-async-prod/expected/index.html b/test/cases/integrity-script-async-prod/expected/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test</title>
+  <script async src="main.js" integrity="sha384-E4IoJ3Xutt/6tUVDjvtPwDTTlCfU5oG199UoqWShFCNx6mb4tdpcPLu7sLzNc8Pe" crossorigin="anonymous"></script>
+</head>
+<body>
+  <h1>Hello World!</h1>
+</body>
+</html>
diff --git a/test/cases/integrity-script-async-prod/expected/main.js b/test/cases/integrity-script-async-prod/expected/main.js
@@ -0,0 +1 @@
+console.log(">> main");
diff --git a/test/cases/integrity-script-async-prod/src/index.html b/test/cases/integrity-script-async-prod/src/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test</title>
+  <script async src="./main.js"></script>
+</head>
+<body>
+  <h1>Hello World!</h1>
+</body>
+</html>
diff --git a/test/cases/integrity-script-async-prod/src/main.js b/test/cases/integrity-script-async-prod/src/main.js
@@ -0,0 +1 @@
+console.log('>> main');
diff --git a/test/cases/integrity-script-async-prod/webpack.config.js b/test/cases/integrity-script-async-prod/webpack.config.js
@@ -0,0 +1,20 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+    crossOriginLoading: 'anonymous', // required for test Subresource Integrity
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: './src/index.html',
+      },
+      integrity: 'auto',
+    }),
+  ],
+};
diff --git a/test/integration.test.js b/test/integration.test.js
@@ -468,6 +468,9 @@ describe('integrity, common use cases', () => {
   test('script, link, publicPath="auto"', () => compareFiles('integrity-publicPath-auto'));
   test('script, link, publicPath=""', () => compareFiles('integrity-publicPath-empty'));
   test('script, link, publicPath="/"', () => compareFiles('integrity-publicPath-root'));
+
+
+  test('script async, prod', () => compareFiles('integrity-script-async-prod'));
 
   test('split chunks', () => compareFiles('integrity-split-chunks'));
   test('import css', () => compareFiles('integrity-import-css-in-js'));