feat(html): improve template parameters

LingyuCoder · LingyuCoder · commit 47468a4c6bc0 · 2024-08-28T15:54:35.000+08:00
diff --git a/crates/rspack_plugin_html/src/plugin.rs b/crates/rspack_plugin_html/src/plugin.rs
@@ -377,7 +377,7 @@ async fn process_assets(&self, compilation: &mut Compilation) -> Result<()> {
   }
 
   if !matches!(self.config.inject, HtmlInject::False) {
-    let mut visitor = AssetWriter::new(config, &tags);
+    let mut visitor = AssetWriter::new(&tags);
     current_ast.visit_mut_with(&mut visitor);
   }
 
diff --git a/crates/rspack_plugin_html/src/visitors/asset.rs b/crates/rspack_plugin_html/src/visitors/asset.rs
@@ -1,11 +1,11 @@
 use serde::{Deserialize, Serialize};
 use swc_core::{common::DUMMY_SP, ecma::atoms::Atom};
-use swc_html::ast::{Child, Element, Namespace, Text};
+use swc_html::ast::{Child, Element, Text};
 use swc_html::visit::{VisitMut, VisitMutWith};
 
 use super::tag::HTMLPluginTag;
 use super::utils::create_element;
-use crate::config::{HtmlInject, HtmlRspackPluginOptions};
+use crate::config::HtmlInject;
 
 // attributes are presented as plain string.
 // namespace is not supported currently.
@@ -19,13 +19,12 @@ pub struct HtmlPluginAttribute {
 
 #[derive(Debug)]
 pub struct AssetWriter<'a> {
-  config: &'a HtmlRspackPluginOptions,
   head_tags: Vec<&'a HTMLPluginTag>,
   body_tags: Vec<&'a HTMLPluginTag>,
 }
 
 impl<'a> AssetWriter<'a> {
-  pub fn new(config: &'a HtmlRspackPluginOptions, tags: &'a [HTMLPluginTag]) -> AssetWriter<'a> {
+  pub fn new(tags: &'a [HTMLPluginTag]) -> AssetWriter<'a> {
     let mut head_tags: Vec<&HTMLPluginTag> = vec![];
     let mut body_tags: Vec<&HTMLPluginTag> = vec![];
     for ele in tags.iter() {
@@ -40,7 +39,6 @@ impl<'a> AssetWriter<'a> {
       }
     }
     AssetWriter {
-      config,
       head_tags,
       body_tags,
     }
@@ -54,38 +52,6 @@ impl VisitMut for AssetWriter<'_> {
 
     match &*n.tag_name {
       "head" => {
-        // add title
-        if let Some(title) = &self.config.title {
-          let title_ele = n.children.iter_mut().find(|child| {
-            if let Child::Element(ele) = child {
-              return ele.tag_name.eq("title");
-            }
-            false
-          });
-
-          if let Some(Child::Element(title_ele)) = title_ele {
-            title_ele.children = vec![Child::Text(Text {
-              span: DUMMY_SP,
-              data: Atom::from(title.as_str()),
-              raw: None,
-            })];
-          } else {
-            n.children.push(Child::Element(Element {
-              tag_name: Atom::from("title"),
-              children: vec![Child::Text(Text {
-                span: DUMMY_SP,
-                data: Atom::from(title.as_str()),
-                raw: None,
-              })],
-              is_self_closing: false,
-              namespace: Namespace::HTML,
-              span: DUMMY_SP,
-              attributes: vec![],
-              content: None,
-            }));
-          }
-        }
-
         for tag in head_tags.iter() {
           if tag.tag_name == "title" {
             if let Some(Child::Element(title_ele)) = n.children.iter_mut().find(|child| {
@@ -105,6 +71,7 @@ impl VisitMut for AssetWriter<'_> {
                 ),
                 raw: None,
               })];
+              continue;
             }
           }
 
diff --git a/packages/rspack-test-tools/tests/configCases/builtins/html-template-parameters/favicon.ico b/packages/rspack-test-tools/tests/configCases/builtins/html-template-parameters/favicon.ico
diff --git a/packages/rspack-test-tools/tests/configCases/builtins/html-template-parameters/index.css b/packages/rspack-test-tools/tests/configCases/builtins/html-template-parameters/index.css
diff --git a/packages/rspack-test-tools/tests/configCases/builtins/html-template-parameters/index.html b/packages/rspack-test-tools/tests/configCases/builtins/html-template-parameters/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <%= toHtml(htmlRspackPlugin.tags.headTags) %>
+  
+  <% for tag in htmlRspackPlugin.tags.headTags { %>
+    <% if tag.tagName=="script" { %>
+      <%= toHtml(tag) %>
+    <% } %>
+  <% } %>
+</head>
+
+<body>
+  <div>favicon: "<%= htmlRspackPlugin.files.favicon %>"</div>
+  <div>publicpath: "<%= htmlRspackPlugin.files.publicPath %>"</div>
+  <div>scripts: "<% for script in htmlRspackPlugin.files.js { %><%= script %><% } %>"</div>
+  <div>styles: "<% for style in htmlRspackPlugin.files.css { %><%= style %><% } %>"</div>
+  <div>config title: "<%= htmlRspackPlugin.options.title %>"</div>
+  <div>rspack config publicpath: "<%= rspackConfig.output.publicPath %>"</div>
+  <div>rspack config mode: "<%= rspackConfig.mode %>"</div>
+</body>
+
+</html>
diff --git a/packages/rspack-test-tools/tests/configCases/builtins/html-template-parameters/index.js b/packages/rspack-test-tools/tests/configCases/builtins/html-template-parameters/index.js
@@ -0,0 +1,50 @@
+require('./index.css');
+const fs = require("fs");
+const path = require("path");
+
+const htmlPath = path.join(__dirname, "./index.html");
+const htmlContent = fs.readFileSync(htmlPath, "utf-8");
+
+it("should inject title", () => {
+	expect(htmlContent).toContain("<title>i am title</title>");
+});
+
+it("should have only one title", () => {
+	expect(htmlContent.split("<title>").length - 1).toBe(1);
+});
+
+it("should inject htmlRspackPlugin.tags.headTags", () => {
+	expect(htmlContent).toContain(`<title>i am title</title><link rel="icon" href="http://cdn.com/favicon.ico"><meta content="meta-value" name="meta-name"><script defer src="http://cdn.com/bundle0.js"></script><link href="http://cdn.com/main.css" rel="stylesheet">`);
+});
+
+it("should inject filtered htmlRspackPlugin.tags.headTags", () => {
+	expect(htmlContent.split(`<script defer src="http://cdn.com/bundle0.js"></script>`).length - 1).toBe(2);
+});
+
+it("should inject htmlRspackPlugin.files.publicPath", () => {
+	expect(htmlContent).toContain(`publicpath: "http://cdn.com/"`);
+});
+
+it("should inject htmlRspackPlugin.files.favicon", () => {
+	expect(htmlContent).toContain(`favicon: "http://cdn.com/favicon.ico"`);
+});
+
+it("should inject htmlRspackPlugin.files.js", () => {
+	expect(htmlContent).toContain(`scripts: "http://cdn.com/bundle0.js"`);
+});
+
+it("should inject htmlRspackPlugin.files.css", () => {
+	expect(htmlContent).toContain(`styles: "http://cdn.com/main.css"`);
+});
+
+it("should inject htmlRspackPlugin.options.title", () => {
+	expect(htmlContent).toContain(`config title: "i am title"`);
+});
+
+it("should inject rspackConfig.mode", () => {
+	expect(htmlContent).toContain(`rspack config mode: "production"`);
+});
+
+it("should inject rspackConfig.output.publicPath", () => {
+	expect(htmlContent).toContain(`rspack config publicpath: "http://cdn.com/"`);
+});
diff --git a/packages/rspack-test-tools/tests/configCases/builtins/html-template-parameters/rspack.config.js b/packages/rspack-test-tools/tests/configCases/builtins/html-template-parameters/rspack.config.js
@@ -0,0 +1,36 @@
+const { rspack } = require("@rspack/core");
+const { CssExtractRspackPlugin, HtmlRspackPlugin } = rspack;
+
+/** @type {import("@rspack/core").Configuration} */
+module.exports = {
+	output: {
+		publicPath: "http://cdn.com/"
+	},
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				use: [CssExtractRspackPlugin.loader, "css-loader"],
+			},
+		],
+	},
+	experiments: {
+		css: false,
+	},
+	plugins: [
+		new CssExtractRspackPlugin(),
+		new HtmlRspackPlugin({
+			minify: false,
+			template: "./index.html",
+			title: "i am title",
+			meta: {
+				"meta-name": "meta-value"
+			},
+			inject: false,
+			favicon: "./favicon.ico",
+			templateParameters: {
+				foo: "bar",
+			},
+		})
+	]
+};

Original file line number	Diff line number	Diff line change
`@@ -377,7 +377,7 @@ async fn process_assets(&self, compilation: &mut Compilation) -> Result<()> {`
`377`	`377`	`}`
`378`	`378`
`379`	`379`	`if !matches!(self.config.inject, HtmlInject::False) {`
`380`		`- let mut visitor = AssetWriter::new(config, &tags);`
	`380`	`+ let mut visitor = AssetWriter::new(&tags);`
`381`	`381`	`current_ast.visit_mut_with(&mut visitor);`
`382`	`382`	`}`
`383`	`383`