test(plugin): test html plugin with basic cases of html-webpack-plugin (

#7571)
web-infra-dev · Aug 14, 2024 · 25732d9 · 25732d9 · rspack-bot · Aug 14, 2024
1 parent 98c0c13
commit 25732d9
Show file tree

Hide file tree

Showing 46 changed files with 4,111 additions and 29 deletions.
diff --git a/.gitignore b/.gitignore
@@ -221,6 +221,8 @@ tests/webpack-test/**/dev-defaults.webpack.lock
 tests/plugin-test/css-extract/js
 !tests/plugin-test/css-extract/**/node_modules
 
+tests/plugin-test/html-plugin/js
+
 /webpack-examples/**/dist
 
 smoke-example

diff --git a/.prettierignore b/.prettierignore
@@ -13,9 +13,8 @@ packages/**/etc/**/*
 packages/rspack-test-tools/template/**/*
 packages/rspack-test-tools/src/helper/legacy/**/*
 packages/rspack-test-tools/tests/**/*
-packages/rspack-plugin-mini-css-extract/test/cases/**/*
 
 crates/**/*
 target/**/*
-tests/**/*.*
+tests/**/*
 !tests/**/test.filter.js
diff --git a/biome.jsonc b/biome.jsonc
@@ -19,7 +19,6 @@
 			"packages/rspack-test-tools/template/**/*",
 			"packages/rspack-test-tools/tests/**/*",
 			"packages/rspack-test-tools/src/helper/legacy/**/*",
-			"packages/rspack-plugin-mini-css-extract/test/cases/**/*",
 			"packages/playground/**/*",
 			// --- ignore runtime code in browser
 			"packages/rspack/hot",

diff --git a/crates/rspack_plugin_html/src/visitors/asset.rs b/crates/rspack_plugin_html/src/visitors/asset.rs
@@ -45,10 +45,7 @@ impl HTMLPluginTag {
     append_to: HtmlInject,
     script_loading: &HtmlScriptLoading,
   ) -> HTMLPluginTag {
-    let mut attributes = vec![HtmlPluginAttribute {
-      attr_name: "src".to_string(),
-      attr_value: Some(src.to_string()),
-    }];
+    let mut attributes = vec![];
     match script_loading {
       HtmlScriptLoading::Defer => {
         attributes.push(HtmlPluginAttribute {
@@ -65,6 +62,11 @@ impl HTMLPluginTag {
       _ => {}
     }
 
+    attributes.push(HtmlPluginAttribute {
+      attr_name: "src".to_string(),
+      attr_value: Some(src.to_string()),
+    });
+
     HTMLPluginTag {
       tag_name: "script".to_string(),
       append_to,

diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "x": "zx x.mjs",
     "dev": "pnpm --filter @rspack/cli run dev",
     "clean": "pnpm --filter @rspack/cli run clean",
-    "check-dependency-version": "check-dependency-version-consistency . --ignore-dep typescript --ignore-dep @napi-rs/cli --ignore-dep chalk --ignore-package webpack-test --ignore-package webpack-examples",
+    "check-dependency-version": "check-dependency-version-consistency . --ignore-dep typescript --ignore-dep @napi-rs/cli --ignore-dep chalk --ignore-package webpack-test --ignore-package webpack-examples --ignore-package plugin-test",
     "build:js": "pnpm --filter \"@rspack/core\" build:force && pnpm --filter \"@rspack/*\" --filter \"!@rspack/core\" build",
     "build:cli:debug": "npm run build:binding:debug && npm run build:js",
     "build:cli:release": "npm run build:binding:release && npm run build:js",

diff --git a/...ages/rspack-test-tools/tests/builtinCases/plugin-html/basic/__snapshots__/output.snap.txt b/...ages/rspack-test-tools/tests/builtinCases/plugin-html/basic/__snapshots__/output.snap.txt
@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <title>rspack</title>
-  <script src="/runtime.js" defer></script><script src="/main.js" defer></script><link href="/main.css" rel="stylesheet" /></head>
+  <script defer src="/runtime.js"></script><script defer src="/main.js"></script><link href="/main.css" rel="stylesheet" /></head>
   <body>
 
 </body></html>

diff --git a/...ges/rspack-test-tools/tests/builtinCases/plugin-html/chunks/__snapshots__/output.snap.txt b/...ges/rspack-test-tools/tests/builtinCases/plugin-html/chunks/__snapshots__/output.snap.txt
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <title>Rspack App</title>
-<script src="/runtime.js" defer></script><script src="/chunk1.js" defer></script></head>
+<script defer src="/runtime.js"></script><script defer src="/chunk1.js"></script></head>
 
 <body>
 

diff --git a/...es/rspack-test-tools/tests/builtinCases/plugin-html/favicon/__snapshots__/output.snap.txt b/...es/rspack-test-tools/tests/builtinCases/plugin-html/favicon/__snapshots__/output.snap.txt
@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <title>rspack</title>
-  <link rel="icon" href="/favicon.ico" /><script src="/runtime.js" defer></script><script src="/index.js" defer></script></head>
+  <link rel="icon" href="/favicon.ico" /><script defer src="/runtime.js"></script><script defer src="/index.js"></script></head>
   <body>
 
 </body></html>

diff --git a/...s/rspack-test-tools/tests/builtinCases/plugin-html/filename/__snapshots__/output.snap.txt b/...s/rspack-test-tools/tests/builtinCases/plugin-html/filename/__snapshots__/output.snap.txt
@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <title>rspack</title>
-  <script src="/runtime.js" defer></script><script src="/main.js" defer></script><link href="/main.css" rel="stylesheet" /></head>
+  <script defer src="/runtime.js"></script><script defer src="/main.js"></script><link href="/main.css" rel="stylesheet" /></head>
   <body>
 
 </body></html>
@@ -16,7 +16,7 @@
 <head>
   <meta charset="UTF-8" />
   <title>Rspack App</title>
-<script src="/runtime.js" defer></script><script src="/main.js" defer></script><link href="/main.css" rel="stylesheet" /></head>
+<script defer src="/runtime.js"></script><script defer src="/main.js"></script><link href="/main.css" rel="stylesheet" /></head>
 
 <body>
 

diff --git a/...ges/rspack-test-tools/tests/builtinCases/plugin-html/inject/__snapshots__/output.snap.txt b/...ges/rspack-test-tools/tests/builtinCases/plugin-html/inject/__snapshots__/output.snap.txt
@@ -7,7 +7,7 @@
   <link href="/main.css" rel="stylesheet" /></head>
   <body>
 
-<script src="/runtime.js" defer></script><script src="/main.js" defer></script></body></html>
+<script defer src="/runtime.js"></script><script defer src="/main.js"></script></body></html>
 ```
 
 ```html title=inject_false.html
@@ -28,7 +28,7 @@
 <head>
     <meta charset="utf-8">
     <title>rspack</title>
-  <script src="/runtime.js" defer></script><script src="/main.js" defer></script><link href="/main.css" rel="stylesheet" /></head>
+  <script defer src="/runtime.js"></script><script defer src="/main.js"></script><link href="/main.css" rel="stylesheet" /></head>
   <body>
 
 </body></html>

diff --git a/packages/rspack-test-tools/tests/builtinCases/plugin-html/meta/__snapshots__/output.snap.txt b/packages/rspack-test-tools/tests/builtinCases/plugin-html/meta/__snapshots__/output.snap.txt
@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <title>rspack</title>
-  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport" /><script src="/runtime.js" defer></script><script src="/index.js" defer></script></head>
+  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport" /><script defer src="/runtime.js"></script><script defer src="/index.js"></script></head>
   <body>
 
 </body></html>

diff --git a/...ges/rspack-test-tools/tests/builtinCases/plugin-html/minify/__snapshots__/output.snap.txt b/...ges/rspack-test-tools/tests/builtinCases/plugin-html/minify/__snapshots__/output.snap.txt
@@ -1,3 +1,3 @@
 ```html title=index.html
-<!doctype html><meta charset=utf-8><title>rspack</title><script src=/runtime.js defer></script><script src=/index.js defer></script>
+<!doctype html><meta charset=utf-8><title>rspack</title><script defer src=/runtime.js></script><script defer src=/index.js></script>
 ```
diff --git a/packages/rspack-test-tools/tests/builtinCases/plugin-html/mpa/__snapshots__/output.snap.txt b/packages/rspack-test-tools/tests/builtinCases/plugin-html/mpa/__snapshots__/output.snap.txt
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <title>Rspack App</title>
-<script src="/runtime.js" defer></script><script src="/chunk1.js" defer></script></head>
+<script defer src="/runtime.js"></script><script defer src="/chunk1.js"></script></head>
 
 <body>
 
@@ -19,7 +19,7 @@
 <head>
   <meta charset="UTF-8" />
   <title>Rspack App</title>
-<script src="/runtime.js" defer></script><script src="/chunk2.js" defer></script></head>
+<script defer src="/runtime.js"></script><script defer src="/chunk2.js"></script></head>
 
 <body>
 
@@ -34,7 +34,7 @@
 <head>
   <meta charset="UTF-8" />
   <title>Rspack App</title>
-<script src="/runtime.js" defer></script><script src="/chunk3.js" defer></script></head>
+<script defer src="/runtime.js"></script><script defer src="/chunk3.js"></script></head>
 
 <body>
 

diff --git a/...spack-test-tools/tests/builtinCases/plugin-html/public-path/__snapshots__/output.snap.txt b/...spack-test-tools/tests/builtinCases/plugin-html/public-path/__snapshots__/output.snap.txt
@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <title>rspack</title>
-  <link rel="icon" href="/base/favicon.ico" /><script src="/base/runtime.js" defer></script><script src="/base/index.js" defer></script></head>
+  <link rel="icon" href="/base/favicon.ico" /><script defer src="/base/runtime.js"></script><script defer src="/base/index.js"></script></head>
   <body>
 
 </body></html>

diff --git a/.../tests/builtinCases/plugin-html/template+templateParameters/__snapshots__/output.snap.txt b/.../tests/builtinCases/plugin-html/template+templateParameters/__snapshots__/output.snap.txt
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <title>bar</title>
-<script src="/runtime.js" defer></script><script src="/index.js" defer></script></head>
+<script defer src="/runtime.js"></script><script defer src="/index.js"></script></head>
 
 <body>
 

diff --git a/...builtinCases/plugin-html/templateContent+templateParameters/__snapshots__/output.snap.txt b/...builtinCases/plugin-html/templateContent+templateParameters/__snapshots__/output.snap.txt
@@ -1,5 +1,5 @@
 ```html title=index.html
 <!DOCTYPE html>
 <html>
-<head><script src="/runtime.js" defer></script><script src="/index.js" defer></script></head><body><div>bar</div></body></html>
+<head><script defer src="/runtime.js"></script><script defer src="/index.js"></script></head><body><div>bar</div></body></html>
 ```
diff --git a/...ages/rspack-test-tools/tests/builtinCases/plugin-html/title/__snapshots__/output.snap.txt b/...ages/rspack-test-tools/tests/builtinCases/plugin-html/title/__snapshots__/output.snap.txt
@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <title>Rspack title</title>
-  <script src="/runtime.js" defer></script><script src="/index.js" defer></script></head>
+  <script defer src="/runtime.js"></script><script defer src="/index.js"></script></head>
   <body>
 
 </body></html>

diff --git a/packages/rspack-test-tools/tests/configCases/builtins/html-inject/index.js b/packages/rspack-test-tools/tests/configCases/builtins/html-inject/index.js
@@ -5,15 +5,15 @@ it("body-index.html inject", () => {
 	const htmlPath = path.join(__dirname, "./body-index.html");
 	const htmlContent = fs.readFileSync(htmlPath, "utf-8");
 	expect(
-		htmlContent.includes('<script src="bundle0.js" defer></script></body>')
+		htmlContent.includes('<script defer src="bundle0.js"></script></body>')
 	).toBe(true);
 });
 
 it("head-index.html inject", () => {
 	const htmlPath = path.join(__dirname, "./head-index.html");
 	const htmlContent = fs.readFileSync(htmlPath, "utf-8");
 	expect(
-		htmlContent.includes('<script src="bundle1.js" defer></script></head>')
+		htmlContent.includes('<script defer src="bundle1.js"></script></head>')
 	).toBe(true);
 });
 
@@ -29,7 +29,7 @@ it("true-defer-index.html inject", () => {
 	const htmlPath = path.join(__dirname, "./true-defer-index.html");
 	const htmlContent = fs.readFileSync(htmlPath, "utf-8");
 	expect(
-		htmlContent.includes('<script src="bundle3.js" defer></script></head>')
+		htmlContent.includes('<script defer src="bundle3.js"></script></head>')
 	).toBe(true);
 });
 

diff --git a/packages/rspack-test-tools/tests/configCases/builtins/html-public-path-auto/index.js b/packages/rspack-test-tools/tests/configCases/builtins/html-public-path-auto/index.js
@@ -4,5 +4,5 @@ const path = require("path");
 it("html plugin should public path auto works", () => {
 	const htmlPath = path.join(__dirname, "./main_page/index.html");
 	const htmlContent = fs.readFileSync(htmlPath, "utf-8");
-	expect(htmlContent.includes('<script src="../bundle0.js" defer>')).toBe(true);
+	expect(htmlContent.includes('<script defer src="../bundle0.js">')).toBe(true);
 });
diff --git a/packages/rspack-test-tools/tests/configCases/builtins/html-with-output-public-path/index.js b/packages/rspack-test-tools/tests/configCases/builtins/html-with-output-public-path/index.js
@@ -4,7 +4,7 @@ const path = require("path");
 it("html plugin should respect output.publicPath", () => {
 	const htmlPath = path.join(__dirname, "./index.html");
 	const htmlContent = fs.readFileSync(htmlPath, "utf-8");
-	expect(htmlContent.includes('<script src="/base/bundle0.js" defer>')).toBe(
+	expect(htmlContent.includes('<script defer src="/base/bundle0.js">')).toBe(
 		true
 	);
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tests/plugin-test/README.md b/tests/plugin-test/README.md
@@ -3,10 +3,12 @@
 >
 > - [mini-css-extract-plugin/test](https://github.com/webpack-contrib/mini-css-extract-plugin/tree/master/test)
 > - [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin/tree/master/test)
+> - [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin/tree/main/spec)
 
 ## Credits
 
 Thanks to:
 
 - The [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) project created by [@sokra](https://github.com/sokra)
 - The [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin) project created by [@kevlened](https://github.com/kevlened)
+- The [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) project created by [@jantimon](https://github.com/jantimon)
diff --git a/tests/plugin-test/html-plugin/README.md b/tests/plugin-test/html-plugin/README.md
@@ -0,0 +1,9 @@
+/**
+ * The test code is modified based on
+ * https://github.com/jantimon/html-webpack-plugin/tree/main/spec
+ *
+ * MIT Licensed
+ * Author Jan Nicklas @jantimon
+ * Copyright JS Foundation and other contributors
+ * https://github.com/jantimon/html-webpack-plugin/blob/main/LICENSE
+ */
suite	result
modernjs	❌ failure
_selftest	✅ success
nx	❌ failure
rspress	✅ success
rsbuild	✅ success
examples	✅ success
Name	Base (2024-08-14 496d277)	Current	Change
10000_development-mode + exec	2.3 s ± 22 ms	2.32 s ± 24 ms	+0.87 %
10000_development-mode_hmr + exec	695 ms ± 9.6 ms	700 ms ± 8.3 ms	+0.79 %
10000_production-mode + exec	2.86 s ± 30 ms	2.88 s ± 32 ms	+0.62 %
arco-pro_development-mode + exec	1.89 s ± 63 ms	1.87 s ± 94 ms	-0.99 %
arco-pro_development-mode_hmr + exec	435 ms ± 2.7 ms	435 ms ± 1.6 ms	-0.10 %
arco-pro_production-mode + exec	3.4 s ± 81 ms	3.41 s ± 71 ms	+0.19 %
arco-pro_production-mode_generate-package-json-webpack-plugin + exec	3.46 s ± 67 ms	3.5 s ± 98 ms	+1.19 %
threejs_development-mode_10x + exec	1.68 s ± 12 ms	1.68 s ± 17 ms	-0.19 %
threejs_development-mode_10x_hmr + exec	795 ms ± 12 ms	799 ms ± 12 ms	+0.48 %
threejs_production-mode_10x + exec	5.46 s ± 22 ms	5.5 s ± 30 ms	+0.61 %