diff --git a/Cargo.lock b/Cargo.lock index bf542e5ef410..e4ea7ed2b5f2 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -3270,9 +3270,9 @@ dependencies = [ [[package]] name = "rspack_dojang" -version = "0.1.7" +version = "0.1.8" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "4fe9848582be010f76babbd87927bbb42966eeae4182b605b9ee98385cad2a7e" +checksum = "c6c30cb28551082d3af8dd3250a04660d9f3be94eed10ba0bd78af50248f06e0" dependencies = [ "html-escape", "serde_json", diff --git a/Cargo.toml b/Cargo.toml index eebe8eb7003d..9cf68a6652b7 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -80,7 +80,7 @@ swc_html = { version = "=0.148.0" } swc_html_minifier = { version = "=0.145.0", default-features = false } swc_node_comments = { version = "=0.24.0" } - +rspack_dojang = { version = "0.1.8" } [workspace.metadata.release] rate-limit = { existing-packages = 70, new-packages = 70 } [profile.dev] diff --git a/crates/rspack_plugin_html/Cargo.toml b/crates/rspack_plugin_html/Cargo.toml index 36cd8ed5fff3..3b6489b37d26 100644 --- a/crates/rspack_plugin_html/Cargo.toml +++ b/crates/rspack_plugin_html/Cargo.toml @@ -17,7 +17,7 @@ rayon = { workspace = true } regex = { workspace = true } rspack_base64 = { version = "0.1.0", path = "../rspack_base64" } rspack_core = { version = "0.1.0", path = "../rspack_core" } -rspack_dojang = "0.1.7" +rspack_dojang = { workspace = true } rspack_error = { version = "0.1.0", path = "../rspack_error" } rspack_hook = { version = "0.1.0", path = "../rspack_hook" } rspack_paths = { version = "0.1.0", path = "../rspack_paths" } diff --git a/crates/rspack_plugin_html/src/plugin.rs b/crates/rspack_plugin_html/src/plugin.rs index 6c6a070ca891..1bd1446a9399 100644 --- a/crates/rspack_plugin_html/src/plugin.rs +++ b/crates/rspack_plugin_html/src/plugin.rs @@ -13,7 +13,7 @@ use rspack_core::{ rspack_sources::{RawSource, SourceExt}, Compilation, CompilationAsset, CompilationProcessAssets, FilenameTemplate, PathData, Plugin, }; -use rspack_dojang::dojang::Dojang; +use rspack_dojang::dojang::{Dojang, DojangOptions}; use rspack_error::{miette, AnyhowError, Diagnostic, Result}; use rspack_hook::{plugin, plugin_hook}; use rspack_paths::AssertUtf8; @@ -102,7 +102,13 @@ async fn process_assets(&self, compilation: &mut Compilation) -> Result<()> { // process with template parameters let mut dj = Dojang::new(); - dj.add(url.clone(), content.clone()) + // align escape | unescape with lodash.template syntax https://lodash.com/docs/4.17.15#template which is html-webpack-plugin's default behavior + dj.with_options(DojangOptions { + escape: "-".to_string(), + unescape: "=".to_string(), + }); + + dj.add_with_option(url.clone(), content.clone()) .expect("failed to add template"); let mut template_result = match dj.render(&url, serde_json::json!(&self.config.template_parameters)) { diff --git a/tests/plugin-test/html-plugin/basic.test.js b/tests/plugin-test/html-plugin/basic.test.js index e562400ef1e3..8cb92d0e33b2 100644 --- a/tests/plugin-test/html-plugin/basic.test.js +++ b/tests/plugin-test/html-plugin/basic.test.js @@ -3782,7 +3782,28 @@ describe("HtmlWebpackPlugin", () => { done, ); }); - + it('syntax-support', (done) => { + testHtmlPlugin( + { + entry: {}, + output: { + path: OUTPUT_DIR, + filename: "index_bundle.js", + assetModuleFilename: "assets/demo[ext]", + }, + plugins: [new HtmlWebpackPlugin( + { + minify:false, + templateContent: '<%= myHtml %><%- myHtml %>', + templateParameters: { + "myHtml": "Rspack" + } + })] + }, + [` + +Rspack<span>Rspack</span>`], null, done); + }); // TODO: html-webpack-plugin loader // it("allows to set custom loader interpolation settings", (done) => { // testHtmlPlugin( diff --git a/website/docs/en/plugins/rspack/html-rspack-plugin.mdx b/website/docs/en/plugins/rspack/html-rspack-plugin.mdx index 29ff5e1c6d53..c3f131942244 100644 --- a/website/docs/en/plugins/rspack/html-rspack-plugin.mdx +++ b/website/docs/en/plugins/rspack/html-rspack-plugin.mdx @@ -27,8 +27,64 @@ If its options do not meet your needs, you can also directly use the community [ :::warning `rspack.HtmlRspackPlugin` does not support the full `ejs` syntax; it only supports a subset of the `ejs` syntax. If you need full `ejs` syntax support, you can use `html-webpack-plugin` directly. +In order to align the default template syntax of `html-webpack-plugin`, Rspack changed the default EJS escape and unescape to be the same as `html-webpack-plugin`'s default syntax. ::: +### Supported EJS Syntax + +Only the following basic interpolation expressions are supported. Here, the interpolation expressions only support the most basic string types and do not support arbitrary JavaScript expressions. Other EJS syntaxes are currently not supported. + +#### \<%-: Escaped output + +Escapes the content within the interpolation: + +```html title="ejs" +

Hello, <%- name %>.

+

Hello, <%- 'the Most Honorable ' + name %>.

+``` + +```json title="locals" +{ + "name": "Rspack" +} +``` + +```html title="html" +

Hello, Rspack<y>.

+

Hello, the Most Honorable Rspack<y>.

+``` + +#### \<%=: Unescaped output + +Does not escape the content within the interpolation: + +```html title="ejs" +

Hello, <%- myHtml %>.

+

Hello, <%= myHtml %>.

+ +

Hello, <%- myMaliciousHtml %>.

+

Hello, <%= myMaliciousHtml %>.

+``` + +```json title="locals" +{ + "myHtml": "Rspack", + "myMaliciousHtml": "

" +} +``` + +```html title="html" +

Hello, <strong>Rspack</strong>.

+

Hello, Rspack.

+ +

Hello, </p><script>document.write()</script><p>.

+

Hello,

+ +

.

+``` + ## Usage The plugin will generate an HTML file for you that includes all your JS outputs in the head using `

" +} +``` + +```html title="html" +

Hello, <strong>Rspack</strong>.

+

Hello, Rspack.

+ +

Hello, </p><script>document.write()</script><p>.

+

Hello,

+ +

.

+``` + ## 用法 这个插件会为你生成一个 HTML 文件，该文件的 head 包含了所有 JS 产物对应的 `