From 38071c2fb10e799abd81cdff1a0e2a56a5aead54 Mon Sep 17 00:00:00 2001 From: hardfist Date: Thu, 22 Aug 2024 23:36:44 +0800 Subject: [PATCH 01/13] feat(core): change dojang default escape|unescape to lodash.template --- Cargo.lock | 3 +-- crates/rspack_plugin_html/Cargo.toml | 2 +- crates/rspack_plugin_html/src/plugin.rs | 8 ++++++-- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index bf542e5ef410..6de4efa2cada 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -3271,8 +3271,7 @@ dependencies = [ [[package]] name = "rspack_dojang" version = "0.1.7" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "4fe9848582be010f76babbd87927bbb42966eeae4182b605b9ee98385cad2a7e" +source = "git+https://github.com/rspack-contrib/rspack-dojang?branch=support-option#56c8e1d2868c0287e954ac34a99db25d0870c51b" dependencies = [ "html-escape", "serde_json", diff --git a/crates/rspack_plugin_html/Cargo.toml b/crates/rspack_plugin_html/Cargo.toml index 36cd8ed5fff3..01d074f83e37 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 = { git = "https://github.com/rspack-contrib/rspack-dojang", branch = "support-option" } 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..9aeeaef7cec8 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,11 @@ async fn process_assets(&self, compilation: &mut Compilation) -> Result<()> { // process with template parameters let mut dj = Dojang::new(); - dj.add(url.clone(), content.clone()) + 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)) { From 208a321b6c4669bb7aeb5d8039d2848878a1a29f Mon Sep 17 00:00:00 2001 From: hardfist Date: Fri, 23 Aug 2024 00:38:34 +0800 Subject: [PATCH 02/13] docs: add doc and test about ejs change --- Cargo.lock | 2 +- crates/node_binding/binding.d.ts | 1 + crates/rspack_plugin_html/Cargo.toml | 2 +- crates/rspack_plugin_html/src/plugin.rs | 2 + tests/plugin-test/html-plugin/basic.test.js | 23 +++++++- .../en/plugins/rspack/html-rspack-plugin.mdx | 56 ++++++++++++++++++ .../zh/plugins/rspack/html-rspack-plugin.mdx | 58 ++++++++++++++++++- 7 files changed, 140 insertions(+), 4 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 6de4efa2cada..d6d635de2291 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -3271,7 +3271,7 @@ dependencies = [ [[package]] name = "rspack_dojang" version = "0.1.7" -source = "git+https://github.com/rspack-contrib/rspack-dojang?branch=support-option#56c8e1d2868c0287e954ac34a99db25d0870c51b" +source = "git+https://github.com/rspack-contrib/rspack-dojang?branch=support-options#82bfce3e7978e6a5d26795c5cc40efdcdc790fdf" dependencies = [ "html-escape", "serde_json", diff --git a/crates/node_binding/binding.d.ts b/crates/node_binding/binding.d.ts index a619025adf32..1c39cfcfae17 100644 --- a/crates/node_binding/binding.d.ts +++ b/crates/node_binding/binding.d.ts @@ -1830,3 +1830,4 @@ export interface ThreadsafeNodeFS { mkdirp: (name: string) => Promise | string | void removeDirAll: (name: string) => Promise | string | void } + diff --git a/crates/rspack_plugin_html/Cargo.toml b/crates/rspack_plugin_html/Cargo.toml index 01d074f83e37..7fbd52e08fd8 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 = { git = "https://github.com/rspack-contrib/rspack-dojang", branch = "support-option" } +rspack_dojang = { git = "https://github.com/rspack-contrib/rspack-dojang", branch = "support-options" } 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 9aeeaef7cec8..1bd1446a9399 100644 --- a/crates/rspack_plugin_html/src/plugin.rs +++ b/crates/rspack_plugin_html/src/plugin.rs @@ -102,10 +102,12 @@ async fn process_assets(&self, compilation: &mut Compilation) -> Result<()> { // process with template parameters let mut dj = Dojang::new(); + // 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 = 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..498ad451b73b 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 `html-webpack-plugin` default syntax implementation, Rspack change the default `ejs` escape | 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 产物对应的 `