Merge pull request #3003 from modernweb-dev/feat/transform-input-html

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

Author: bashmish

.changeset/light-comics-provide.md

@@ -0,0 +1,5 @@
+---
+'@web/rollup-plugin-html': minor
+---
+
+support transform on input html

packages/rollup-plugin-html/src/output/createHTMLOutput.ts

@@ -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;
@@ -30,7 +31,8 @@ export async function createHTMLAsset(params: CreateHTMLAssetParams): Promise<Em
     input,
     emittedAssets,
     generatedBundles,
-    externalTransformHtmlFns,
+    inputExternalTransformHtmlFns,
+    outputExternalTransformHtmlFns,
     pluginOptions,
     defaultInjectDisabled,
     serviceWorkerPath,
@@ -57,7 +59,8 @@ export async function createHTMLAsset(params: CreateHTMLAssetParams): Promise<Em
     input,
     outputDir,
     emittedAssets,
-    externalTransformHtmlFns,
+    inputExternalTransformHtmlFns,
+    outputExternalTransformHtmlFns,
     defaultInjectDisabled,
     serviceWorkerPath,
     injectServiceWorker,
@@ -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;

packages/rollup-plugin-html/src/output/getOutputHTML.ts

@@ -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;
@@ -31,7 +32,8 @@ export async function getOutputHTML(params: GetOutputHTMLParams) {
   const {
     pluginOptions,
     entrypointBundles,
-    externalTransformHtmlFns,
+    inputExternalTransformHtmlFns,
+    outputExternalTransformHtmlFns,
     input,
     outputDir,
     emittedAssets,
@@ -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, {
+      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,
@@ -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,

packages/rollup-plugin-html/src/rollupPluginHTML.ts

@@ -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;
   };
@@ -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;
@@ -38,7 +42,8 @@ export function rollupPluginHTML(pluginOptions: RollupPluginHTMLOptions = {}): R
   function reset() {
     inputs = [];
     generatedBundles = [];
-    externalTransformHtmlFns = [];
+    inputExternalTransformHtmlFns = [];
+    outputExternalTransformHtmlFns = [];
   }
 
   return {
@@ -146,7 +151,8 @@ export function rollupPluginHTML(pluginOptions: RollupPluginHTMLOptions = {}): R
         inputs,
         emittedAssets,
         generatedBundles,
-        externalTransformHtmlFns,
+        inputExternalTransformHtmlFns,
+        outputExternalTransformHtmlFns,
         pluginOptions,
         defaultInjectDisabled,
         serviceWorkerPath,
@@ -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() {
@@ -205,7 +218,8 @@ export function rollupPluginHTML(pluginOptions: RollupPluginHTMLOptions = {}): R
                 inputs,
                 emittedAssets,
                 generatedBundles,
-                externalTransformHtmlFns,
+                inputExternalTransformHtmlFns,
+                outputExternalTransformHtmlFns,
                 pluginOptions,
                 defaultInjectDisabled,
                 serviceWorkerPath,

packages/rollup-plugin-html/test/rollup-plugin-html.test.ts

@@ -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,
@@ -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>',
     );
   });
 

packages/rollup-plugin-html/test/src/output/getOutputHTML.test.ts

@@ -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(