Skip to content

feat(rollup-plugin-html): suport transform on input html #3003

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 26, 2025
Merged

feat(rollup-plugin-html): suport transform on input html #3003

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/light-comics-provide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@web/rollup-plugin-html': minor
---

support transform on input html
12 changes: 8 additions & 4 deletions packages/rollup-plugin-html/src/output/createHTMLOutput.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ export interface CreateHTMLAssetParams {
input: InputData;
emittedAssets: EmittedAssets;
generatedBundles: GeneratedBundle[];
externalTransformHtmlFns: TransformHtmlFunction[];
inputExternalTransformHtmlFns: TransformHtmlFunction[];
outputExternalTransformHtmlFns: TransformHtmlFunction[];
pluginOptions: RollupPluginHTMLOptions;
defaultInjectDisabled: boolean;
serviceWorkerPath: string;
Expand All @@ -30,7 +31,8 @@ export async function createHTMLAsset(params: CreateHTMLAssetParams): Promise<Em
input,
emittedAssets,
generatedBundles,
externalTransformHtmlFns,
inputExternalTransformHtmlFns,
outputExternalTransformHtmlFns,
pluginOptions,
defaultInjectDisabled,
serviceWorkerPath,
Expand All @@ -57,7 +59,8 @@ export async function createHTMLAsset(params: CreateHTMLAssetParams): Promise<Em
input,
outputDir,
emittedAssets,
externalTransformHtmlFns,
inputExternalTransformHtmlFns,
outputExternalTransformHtmlFns,
defaultInjectDisabled,
serviceWorkerPath,
injectServiceWorker,
Expand All @@ -73,7 +76,8 @@ export interface CreateHTMLAssetsParams {
inputs: InputData[];
emittedAssets: EmittedAssets;
generatedBundles: GeneratedBundle[];
externalTransformHtmlFns: TransformHtmlFunction[];
inputExternalTransformHtmlFns: TransformHtmlFunction[];
outputExternalTransformHtmlFns: TransformHtmlFunction[];
pluginOptions: RollupPluginHTMLOptions;
defaultInjectDisabled: boolean;
serviceWorkerPath: string;
Expand Down
28 changes: 21 additions & 7 deletions packages/rollup-plugin-html/src/output/getOutputHTML.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ export interface GetOutputHTMLParams {
emittedAssets: EmittedAssets;
pluginOptions: RollupPluginHTMLOptions;
entrypointBundles: Record<string, EntrypointBundle>;
externalTransformHtmlFns?: TransformHtmlFunction[];
inputExternalTransformHtmlFns?: TransformHtmlFunction[];
outputExternalTransformHtmlFns?: TransformHtmlFunction[];
defaultInjectDisabled: boolean;
serviceWorkerPath: string;
injectServiceWorker: boolean;
Expand All @@ -31,7 +32,8 @@ export async function getOutputHTML(params: GetOutputHTMLParams) {
const {
pluginOptions,
entrypointBundles,
externalTransformHtmlFns,
inputExternalTransformHtmlFns,
outputExternalTransformHtmlFns,
input,
outputDir,
emittedAssets,
Expand All @@ -44,8 +46,20 @@ export async function getOutputHTML(params: GetOutputHTMLParams) {
const { default: defaultBundle, ...multiBundles } = entrypointBundles;
const { absoluteSocialMediaUrls = true, rootDir = process.cwd() } = pluginOptions;

let inputHtml = input.html;

// run transform functions on input HTML
const inputTransforms = [...(inputExternalTransformHtmlFns ?? [])];
for (const transform of inputTransforms) {
inputHtml = await transform(inputHtml, {
Copy link
Member

@thepassle thepassle Nov 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we add some error handling here?

Copy link
Member Author

@bashmish bashmish Nov 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good one, in general the exception will be associated with a particular plugin, so locating the problem should be easy enough, but it can be improved always but making it more specific, just maybe logical not to mix up here with this change since the behavior mimics that of the output html transform
or do you want to do it in this PR?

Copy link
Member

@thepassle thepassle Nov 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think even just a nice readable error message "transform hook threw an error" or something would be fine, can indeed improve in the future.

(not for this PR, but) Typically when I implement plugin systems in my tooling I require them to have a name, e.g.:

const fooPlugin = {
  name: 'foo-plugin',
  someHook: () => {}
}

That way you can throw really helpful error messages that include the name of the plugin it threw on

bundle: defaultBundle,
bundles: multiBundles,
htmlFileName: input.name,
});
}

// inject rollup output into HTML
let document = parse(input.html);
let document = parse(inputHtml);
if (pluginOptions.extractAssets !== false) {
injectedUpdatedAssetPaths({
document,
Expand Down Expand Up @@ -75,17 +89,17 @@ export async function getOutputHTML(params: GetOutputHTMLParams) {

let outputHtml = serialize(document);

const transforms = [...(externalTransformHtmlFns ?? [])];
const outputTransforms = [...(outputExternalTransformHtmlFns ?? [])];
if (pluginOptions.transformHtml) {
if (Array.isArray(pluginOptions.transformHtml)) {
transforms.push(...pluginOptions.transformHtml);
outputTransforms.push(...pluginOptions.transformHtml);
} else {
transforms.push(pluginOptions.transformHtml);
outputTransforms.push(pluginOptions.transformHtml);
}
}

// run transform functions on output HTML
for (const transform of transforms) {
for (const transform of outputTransforms) {
outputHtml = await transform(outputHtml, {
bundle: defaultBundle,
bundles: multiBundles,
Expand Down
28 changes: 21 additions & 7 deletions packages/rollup-plugin-html/src/rollupPluginHTML.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,10 @@ import { emitAssets } from './output/emitAssets.js';
export interface RollupPluginHtml extends Plugin {
api: {
getInputs(): InputData[];
addHtmlTransformer(transformHtmlFunction: TransformHtmlFunction): void;
addHtmlTransformer(
transformHtmlFunction: TransformHtmlFunction,
transformStage?: 'input' | 'output',
): void;
disableDefaultInject(): void;
addOutput(name: string): Plugin;
};
Expand All @@ -28,7 +31,8 @@ export function rollupPluginHTML(pluginOptions: RollupPluginHTMLOptions = {}): R
const multiOutputNames: string[] = [];
let inputs: InputData[] = [];
let generatedBundles: GeneratedBundle[] = [];
let externalTransformHtmlFns: TransformHtmlFunction[] = [];
let inputExternalTransformHtmlFns: TransformHtmlFunction[] = [];
let outputExternalTransformHtmlFns: TransformHtmlFunction[] = [];
let defaultInjectDisabled = false;
let serviceWorkerPath = '';
let injectServiceWorker = false;
Expand All @@ -38,7 +42,8 @@ export function rollupPluginHTML(pluginOptions: RollupPluginHTMLOptions = {}): R
function reset() {
inputs = [];
generatedBundles = [];
externalTransformHtmlFns = [];
inputExternalTransformHtmlFns = [];
outputExternalTransformHtmlFns = [];
}

return {
Expand Down Expand Up @@ -146,7 +151,8 @@ export function rollupPluginHTML(pluginOptions: RollupPluginHTMLOptions = {}): R
inputs,
emittedAssets,
generatedBundles,
externalTransformHtmlFns,
inputExternalTransformHtmlFns,
outputExternalTransformHtmlFns,
pluginOptions,
defaultInjectDisabled,
serviceWorkerPath,
Expand All @@ -165,8 +171,15 @@ export function rollupPluginHTML(pluginOptions: RollupPluginHTMLOptions = {}): R
return inputs;
},

addHtmlTransformer(transformHtmlFunction: TransformHtmlFunction) {
externalTransformHtmlFns.push(transformHtmlFunction);
addHtmlTransformer(
transformHtmlFunction: TransformHtmlFunction,
transformStage: 'input' | 'output' = 'output',
) {
if (transformStage === 'input') {
inputExternalTransformHtmlFns.push(transformHtmlFunction);
} else {
outputExternalTransformHtmlFns.push(transformHtmlFunction);
}
},

disableDefaultInject() {
Expand Down Expand Up @@ -205,7 +218,8 @@ export function rollupPluginHTML(pluginOptions: RollupPluginHTMLOptions = {}): R
inputs,
emittedAssets,
generatedBundles,
externalTransformHtmlFns,
inputExternalTransformHtmlFns,
outputExternalTransformHtmlFns,
pluginOptions,
defaultInjectDisabled,
serviceWorkerPath,
Expand Down
14 changes: 12 additions & 2 deletions packages/rollup-plugin-html/test/rollup-plugin-html.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -626,7 +626,16 @@ describe('rollup-plugin-html', () => {
return false;
});
plugin!.api.addHtmlTransformer((html: string) =>
html.replace('</body>', '<!-- injected --></body>'),
html.replace('</body>', '<!-- injected to output --></body>'),
);
plugin!.api.addHtmlTransformer(
(html: string) =>
html.replace('<!-- injected to output -->', '<!-- injected to output 2 -->'),
'output',
);
plugin!.api.addHtmlTransformer(
(html: string) => html.replace('</body>', '<!-- injected to input --></body>'),
'input',
);
},
} as Plugin,
Expand All @@ -641,9 +650,10 @@ describe('rollup-plugin-html', () => {
expect(entryB).to.include("console.log('entrypoint-b.js');");
expect(stripNewlines(getAsset(output, 'index.html').source)).to.equal(
'<html><head></head><body><h1>hello world</h1>' +
'<!-- injected to input -->' +
'<script type="module" src="./entrypoint-a.js"></script>' +
'<script type="module" src="./entrypoint-b.js"></script>' +
'<!-- injected --></body></html>',
'<!-- injected to output 2 --></body></html>',
);
});

Expand Down
4 changes: 2 additions & 2 deletions packages/rollup-plugin-html/test/src/output/getOutputHTML.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,14 +105,14 @@ describe('getOutputHTML()', () => {
);
});

it('can combine external and regular transform functions', async () => {
it('can combine external and regular output transform functions', async () => {
const output = await getOutputHTML({
...defaultOptions,
pluginOptions: {
...defaultOptions.pluginOptions,
transformHtml: html => html.replace('Input HTML', 'Transformed Input HTML'),
},
externalTransformHtmlFns: [html => html.replace(/h1/g, 'h2')],
outputExternalTransformHtmlFns: [html => html.replace(/h1/g, 'h2')],
});

expect(output).to.equal(
Expand Down
Loading