Bump html-rewriter-wasm to 0.4.0

- Add support for `Element#onEndTag`
- Add support for the
  [`html_rewriter_treats_esi_include_as_void_tag`](https://developers.cloudflare.com/workers/platform/compatibility-dates#htmlrewriter-handling-of-esiinclude)
  compatibility flag
- Throw a `TypeError` instead of a `string` when a content token is
  used outside the relevant content handler

Author: mrbbot

package-lock.json

@@ -37,7 +37,7 @@
   "dependencies": {
     "@miniflare/core": "2.1.0",
     "@miniflare/shared": "2.1.0",
-    "html-rewriter-wasm": "^0.3.2",
+    "html-rewriter-wasm": "^0.4.0",
     "undici": "4.12.1"
   },
   "devDependencies": {

packages/html-rewriter/package.json

@@ -1,12 +1,23 @@
 import { Plugin, PluginContext, SetupResult } from "@miniflare/shared";
-import { HTMLRewriter } from "./rewriter";
+import { HTMLRewriter, withEnableEsiTags } from "./rewriter";
+
+const ESIHTMLRewriter = new Proxy(HTMLRewriter, {
+  construct(target, args, newTarget) {
+    const value = Reflect.construct(target, args, newTarget);
+    return withEnableEsiTags(value);
+  },
+});
 
 export class HTMLRewriterPlugin extends Plugin {
   constructor(ctx: PluginContext) {
     super(ctx);
   }
 
   setup(): SetupResult {
-    return { globals: { HTMLRewriter } };
+    const enableEsiFlags = this.ctx.compat.isEnabled(
+      "html_rewriter_treats_esi_include_as_void_tag"
+    );
+    const impl = enableEsiFlags ? ESIHTMLRewriter : HTMLRewriter;
+    return { globals: { HTMLRewriter: impl } };
   }
 }

packages/html-rewriter/src/plugin.ts

@@ -9,10 +9,13 @@ import { Response as BaseResponse } from "undici";
 
 type SelectorElementHandlers = [selector: string, handlers: ElementHandlers];
 
+const kEnableEsiTags = Symbol("kEnableEsiTags");
+
 // noinspection SuspiciousTypeOfGuard
 export class HTMLRewriter {
   readonly #elementHandlers: SelectorElementHandlers[] = [];
   readonly #documentHandlers: DocumentHandlers[] = [];
+  [kEnableEsiTags] = false;
 
   on(selector: string, handlers: ElementHandlers): this {
     this.#elementHandlers.push([selector, handlers]);
@@ -48,10 +51,13 @@ export class HTMLRewriter {
         const {
           HTMLRewriter: BaseHTMLRewriter,
         }: typeof import("html-rewriter-wasm") = require("html-rewriter-wasm");
-        rewriter = new BaseHTMLRewriter((output) => {
-          // enqueue will throw on empty chunks
-          if (output.length !== 0) controller.enqueue(output);
-        });
+        rewriter = new BaseHTMLRewriter(
+          (output) => {
+            // enqueue will throw on empty chunks
+            if (output.length !== 0) controller.enqueue(output);
+          },
+          { enableEsiTags: this[kEnableEsiTags] }
+        );
         // Add all registered handlers
         for (const [selector, handlers] of this.#elementHandlers) {
           rewriter.on(selector, handlers);
@@ -77,3 +83,8 @@ export class HTMLRewriter {
     return res;
   }
 }
+
+export function withEnableEsiTags(rewriter: HTMLRewriter): HTMLRewriter {
+  rewriter[kEnableEsiTags] = true;
+  return rewriter;
+}

packages/html-rewriter/src/rewriter.ts

@@ -1,13 +1,44 @@
+import { Response } from "@miniflare/core";
 import { HTMLRewriter, HTMLRewriterPlugin } from "@miniflare/html-rewriter";
-import { Compatibility, NoOpLog } from "@miniflare/shared";
+import { Compatibility, NoOpLog, PluginContext } from "@miniflare/shared";
 import test from "ava";
+import type { ElementHandlers } from "html-rewriter-wasm";
+
+const log = new NoOpLog();
+const compat = new Compatibility();
+const rootPath = process.cwd();
+const ctx: PluginContext = { log, compat, rootPath };
 
 test("HTMLRewriterPlugin: setup: includes HTMLRewriter in globals", (t) => {
-  const plugin = new HTMLRewriterPlugin({
-    log: new NoOpLog(),
-    compat: new Compatibility(),
-    rootPath: process.cwd(),
-  });
+  const plugin = new HTMLRewriterPlugin(ctx);
   const result = plugin.setup();
   t.is(result.globals?.HTMLRewriter, HTMLRewriter);
 });
+
+test("HTMLRewriterPlugin: setup: treats esi tags as void only if compatibility flag enabled", async (t) => {
+  const handlers: ElementHandlers = {
+    element(element) {
+      element.replace("replacement");
+    },
+  };
+  const input = '<span><esi:include src="a" /> text<span>';
+
+  // Check with flag disabled
+  let plugin = new HTMLRewriterPlugin(ctx);
+  let result = plugin.setup();
+  let impl: typeof HTMLRewriter = result.globals?.HTMLRewriter;
+  let res = new impl()
+    .on("esi\\:include", handlers)
+    .transform(new Response(input));
+  t.is(await res.text(), "<span>replacement");
+
+  // Check with flag enabled
+  const compat = new Compatibility(undefined, [
+    "html_rewriter_treats_esi_include_as_void_tag",
+  ]);
+  plugin = new HTMLRewriterPlugin({ ...ctx, compat });
+  result = plugin.setup();
+  impl = result.globals?.HTMLRewriter;
+  res = new impl().on("esi\\:include", handlers).transform(new Response(input));
+  t.is(await res.text(), "<span>replacement text<span>");
+});

packages/html-rewriter/test/plugin.spec.ts

@@ -221,6 +221,77 @@ test("HTMLRewriter: handles element class handler", async (t) => {
     .transform(new Response("<p>test</p>"));
   t.is(await res.text(), "<p>new</p>");
 });
+
+test("HTMLRewriter: handles end tag properties", async (t) => {
+  const res = new HTMLRewriter()
+    .on("p", {
+      element(element) {
+        element.onEndTag(function (end) {
+          t.is(this, element);
+          t.is(end.name, "p");
+          end.name = "h1";
+        });
+      },
+    })
+    .transform(new Response("<p>test</p>"));
+  t.is(await res.text(), "<p>test</h1>");
+});
+test("HTMLRewriter: handles end tag mutations", async (t) => {
+  const input = "<p>test</p>";
+  const beforeAfterExpected = [
+    "<p>",
+    "test",
+    "&lt;span&gt;before&lt;/span&gt;",
+    "<span>before html</span>",
+    "</p>",
+    "<span>after html</span>",
+    "&lt;span&gt;after&lt;/span&gt;",
+  ].join("");
+  const removeExpected = "<p>test";
+
+  // before/after
+  let res = new HTMLRewriter()
+    .on("p", {
+      element(element) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const that = this;
+        element.onEndTag((end) => {
+          t.is(this, that);
+          end.before("<span>before</span>");
+          end.before("<span>before html</span>", { html: true });
+          end.after("<span>after</span>");
+          end.after("<span>after html</span>", { html: true });
+        });
+      },
+    })
+    .transform(new Response(input));
+  t.is(await res.text(), beforeAfterExpected);
+
+  // remove
+  res = new HTMLRewriter()
+    .on("p", {
+      element(element) {
+        element.onEndTag((end) => {
+          end.remove();
+        });
+      },
+    })
+    .transform(new Response(input));
+  t.is(await res.text(), removeExpected);
+});
+test.serial("HTMLRewriter: handles end tag async handler", async (t) => {
+  const res = new HTMLRewriter()
+    .on("p", {
+      element(element) {
+        element.onEndTag(async (end) => {
+          await setTimeout(50);
+          end.before("!");
+        });
+      },
+    })
+    .transform(new Response("<p>test</p>"));
+  t.is(await res.text(), "<p>test!</p>");
+});
 // endregion: element
 
 // region: comments

packages/html-rewriter/test/rewriter.spec.ts

@@ -11,7 +11,8 @@ export interface CompatibilityFeature {
 export type CompatibilityEnableFlag =
   | "durable_object_fetch_requires_full_url"
   | "fetch_refuses_unknown_protocols"
-  | "formdata_parser_supports_files";
+  | "formdata_parser_supports_files"
+  | "html_rewriter_treats_esi_include_as_void_tag";
 export type CompatibilityDisableFlag =
   | "durable_object_fetch_allows_relative_url"
   | "fetch_treats_unknown_protocols_as_http"
@@ -36,6 +37,9 @@ const FEATURES: CompatibilityFeature[] = [
     enableFlag: "formdata_parser_supports_files",
     disableFlag: "formdata_parser_converts_files_to_strings",
   },
+  {
+    enableFlag: "html_rewriter_treats_esi_include_as_void_tag",
+  },
 ];
 
 const collator = new Intl.Collator(undefined, { numeric: true });