Skip to content

Commit a7eb4c1

Browse files
authored
feat: add new modifyHTML hook (#5145)
1 parent 6c2a03e commit a7eb4c1

File tree

19 files changed

+237
-86
lines changed

19 files changed

+237
-86
lines changed

e2e/cases/plugin-api/plugin-hooks-environment/index.test.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ const createPlugin = () => {
2323
api.modifyBundlerChain((_chain, { environment }) => {
2424
names.push(`ModifyBundlerChain ${environment.name}`);
2525
});
26+
api.modifyHTML((html, { environment }) => {
27+
names.push(`ModifyHTML ${environment.name}`);
28+
return html;
29+
});
2630
api.modifyHTMLTags((tags, { environment }) => {
2731
names.push(`ModifyHTMLTags ${environment.name}`);
2832
return tags;
@@ -108,6 +112,7 @@ rspackOnlyTest(
108112
'BeforeBuild',
109113
'BeforeEnvironmentCompile web',
110114
'ModifyHTMLTags web',
115+
'ModifyHTML web',
111116
'AfterEnvironmentCompile web',
112117
'AfterBuild',
113118
]);
@@ -122,6 +127,7 @@ rspackOnlyTest(
122127
'BeforeBuild',
123128
'BeforeEnvironmentCompile node',
124129
'ModifyHTMLTags node',
130+
'ModifyHTML node',
125131
'AfterEnvironmentCompile node',
126132
'AfterBuild',
127133
]);
@@ -185,6 +191,7 @@ rspackOnlyTest(
185191
'AfterCreateCompiler',
186192
'BeforeEnvironmentCompile web',
187193
'ModifyHTMLTags web',
194+
'ModifyHTML web',
188195
'AfterEnvironmentCompile web',
189196
'OnDevCompileDone',
190197
'OnCloseDevServer',
@@ -204,6 +211,7 @@ rspackOnlyTest(
204211
'AfterCreateCompiler',
205212
'BeforeEnvironmentCompile node',
206213
'ModifyHTMLTags node',
214+
'ModifyHTML node',
207215
'AfterEnvironmentCompile node',
208216
'OnDevCompileDone',
209217
'OnCloseDevServer',

e2e/cases/plugin-api/plugin-hooks-watch/index.test.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ const createPlugin = () => {
2323
api.modifyBundlerChain(() => {
2424
names.push('ModifyBundlerChain');
2525
});
26+
api.modifyHTML((html) => {
27+
names.push('ModifyHTML');
28+
return html;
29+
});
2630
api.modifyHTMLTags((tags) => {
2731
names.push('ModifyHTMLTags');
2832
return tags;
@@ -110,10 +114,12 @@ rspackOnlyTest(
110114
'AfterCreateCompiler',
111115
'BeforeBuild',
112116
'ModifyHTMLTags',
117+
'ModifyHTML',
113118
'AfterBuild',
114119
// below hooks should called when rebuild
115120
'BeforeBuild',
116121
'ModifyHTMLTags',
122+
'ModifyHTML',
117123
'AfterBuild',
118124
]);
119125

e2e/cases/plugin-api/plugin-hooks/index.test.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ const createPlugin = () => {
2323
api.modifyBundlerChain(() => {
2424
names.push('ModifyBundlerChain');
2525
});
26+
api.modifyHTML((html) => {
27+
names.push('ModifyHTML');
28+
return html;
29+
});
2630
api.modifyHTMLTags((tags) => {
2731
names.push('ModifyHTMLTags');
2832
return tags;
@@ -100,6 +104,7 @@ rspackOnlyTest(
100104
'BeforeBuild',
101105
'BeforeEnvironmentCompile',
102106
'ModifyHTMLTags',
107+
'ModifyHTML',
103108
'AfterEnvironmentCompile',
104109
'AfterBuild',
105110
'OnCloseBuild',
@@ -136,6 +141,7 @@ rspackOnlyTest(
136141
'BeforeBuild',
137142
'BeforeEnvironmentCompile',
138143
'ModifyHTMLTags',
144+
'ModifyHTML',
139145
'AfterEnvironmentCompile',
140146
'AfterBuild',
141147
'OnCloseBuild',
@@ -183,6 +189,7 @@ rspackOnlyTest(
183189
'AfterCreateCompiler',
184190
'BeforeEnvironmentCompile',
185191
'ModifyHTMLTags',
192+
'ModifyHTML',
186193
'AfterEnvironmentCompile',
187194
'OnDevCompileDone',
188195
'OnCloseDevServer',
Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { build, rspackOnlyTest } from '@e2e/helper';
2+
import { expect } from '@playwright/test';
3+
import type { RsbuildPlugin } from '@rsbuild/core';
4+
5+
rspackOnlyTest('should allow plugin to modify HTML content', async () => {
6+
const myPlugin: RsbuildPlugin = {
7+
name: 'my-plugin',
8+
setup(api) {
9+
api.modifyHTML((html, { compilation, filename }) => {
10+
return html.replace(
11+
'<body>',
12+
`<body>
13+
<div>${filename}</div>
14+
<div>assets: ${Object.keys(compilation.assets).length}</div>
15+
`,
16+
);
17+
});
18+
},
19+
};
20+
21+
const rsbuild = await build({
22+
cwd: __dirname,
23+
rsbuildConfig: {
24+
plugins: [myPlugin],
25+
},
26+
});
27+
28+
const files = await rsbuild.getDistFiles();
29+
const indexHTML = Object.keys(files).find(
30+
(file) => file.includes('index') && file.endsWith('.html'),
31+
);
32+
33+
const html = files[indexHTML!];
34+
35+
expect(html.includes('<div>index.html</div>')).toBeTruthy();
36+
expect(html.includes('<div>assets: 2</div>')).toBeTruthy();
37+
});
38+
39+
rspackOnlyTest(
40+
'should run modifyHTML hook after modifyHTMLTags hook',
41+
async () => {
42+
const myPlugin: RsbuildPlugin = {
43+
name: 'my-plugin',
44+
setup(api) {
45+
api.modifyHTMLTags((tags) => {
46+
tags.bodyTags.push({
47+
tag: 'div',
48+
children: 'foo',
49+
});
50+
return tags;
51+
});
52+
api.modifyHTML((html) => {
53+
return html.replace('foo', 'bar');
54+
});
55+
},
56+
};
57+
58+
const rsbuild = await build({
59+
cwd: __dirname,
60+
rsbuildConfig: {
61+
plugins: [myPlugin],
62+
},
63+
});
64+
65+
const files = await rsbuild.getDistFiles();
66+
const indexHTML = Object.keys(files).find(
67+
(file) => file.includes('index') && file.endsWith('.html'),
68+
);
69+
70+
const html = files[indexHTML!];
71+
72+
expect(html.includes('foo')).toBeFalsy();
73+
expect(html.includes('bar')).toBeTruthy();
74+
},
75+
);
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
color: red;
3+
}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import './index.css';
2+
3+
console.log('hello');

packages/compat/webpack/tests/__snapshots__/default.test.ts.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -365,8 +365,8 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
365365
"version": 5,
366366
},
367367
RsbuildHtmlPlugin {
368+
"getContext": [Function],
368369
"getEnvironment": [Function],
369-
"modifyTagsFn": [Function],
370370
"name": "RsbuildHtmlPlugin",
371371
"options": {
372372
"index": {
@@ -818,8 +818,8 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when produ
818818
"version": 5,
819819
},
820820
RsbuildHtmlPlugin {
821+
"getContext": [Function],
821822
"getEnvironment": [Function],
822-
"modifyTagsFn": [Function],
823823
"name": "RsbuildHtmlPlugin",
824824
"options": {
825825
"index": {

packages/core/src/createRsbuild.ts

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -83,13 +83,7 @@ async function applyDefaultPlugins(
8383
// cleanOutput plugin should before the html plugin
8484
pluginCleanOutput(),
8585
pluginAsset(),
86-
pluginHtml((environment: string) => async (...args) => {
87-
const result = await context.hooks.modifyHTMLTags.callChain({
88-
environment,
89-
args,
90-
});
91-
return result[0];
92-
}),
86+
pluginHtml(context),
9387
pluginAppIcon(),
9488
pluginWasm(),
9589
pluginMoment(),

packages/core/src/hooks.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import type {
88
InternalContext,
99
ModifyBundlerChainFn,
1010
ModifyEnvironmentConfigFn,
11+
ModifyHTMLFn,
1112
ModifyHTMLTagsFn,
1213
ModifyRsbuildConfigFn,
1314
ModifyRspackConfigFn,
@@ -203,6 +204,7 @@ export function initHooks(): {
203204
onAfterCreateCompiler: AsyncHook<OnAfterCreateCompilerFn>;
204205
onBeforeCreateCompiler: AsyncHook<OnBeforeCreateCompilerFn>;
205206
/** The following hooks are related to the environment */
207+
modifyHTML: EnvironmentAsyncHook<ModifyHTMLFn>;
206208
modifyHTMLTags: EnvironmentAsyncHook<ModifyHTMLTagsFn>;
207209
modifyRspackConfig: EnvironmentAsyncHook<ModifyRspackConfigFn>;
208210
modifyBundlerChain: EnvironmentAsyncHook<ModifyBundlerChainFn>;
@@ -226,6 +228,7 @@ export function initHooks(): {
226228
onBeforeStartProdServer: createAsyncHook<OnBeforeStartProdServerFn>(),
227229
onAfterCreateCompiler: createAsyncHook<OnAfterCreateCompilerFn>(),
228230
onBeforeCreateCompiler: createAsyncHook<OnBeforeCreateCompilerFn>(),
231+
modifyHTML: createEnvironmentAsyncHook<ModifyHTMLFn>(),
229232
modifyHTMLTags: createEnvironmentAsyncHook<ModifyHTMLTagsFn>(),
230233
modifyRspackConfig: createEnvironmentAsyncHook<ModifyRspackConfigFn>(),
231234
modifyBundlerChain: createEnvironmentAsyncHook<ModifyBundlerChainFn>(),

packages/core/src/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,8 @@ export type {
8888
ModifyChainUtils,
8989
ModifyEnvironmentConfigFn,
9090
ModifyEnvironmentConfigUtils,
91+
ModifyHTMLContext,
92+
ModifyHTMLFn,
9193
ModifyHTMLTagsContext,
9294
ModifyHTMLTagsFn,
9395
ModifyRsbuildConfigUtils,

0 commit comments

Comments
 (0)