Replace jsdom with parse5 for html transformation (#124)

ptrdom · Feb 13, 2024 · 7ca4b6c · 7ca4b6c
1 parent 078303b
commit 7ca4b6c
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 39 deletions.
diff --git a/...ctron/src/sbt-test/sbt-scalajs-esbuild-electron/electron-project/app/esbuild/package.json b/...ctron/src/sbt-test/sbt-scalajs-esbuild-electron/electron-project/app/esbuild/package.json
@@ -10,7 +10,7 @@
     "esbuild": "0.20.0",
     "electron-builder": "24.9.1",
     "electron-chromedriver": "28.2.2",
-    "jsdom": "24.0.0",
+    "parse5": "7.1.2",
     "electron": "28.2.2",
     "playwright": "1.41.2"
   }

diff --git a/sbt-scalajs-esbuild-web/src/main/scala/scalajsesbuild/EsbuildWebScripts.scala b/sbt-scalajs-esbuild-web/src/main/scala/scalajsesbuild/EsbuildWebScripts.scala
@@ -4,14 +4,14 @@ object EsbuildWebScripts {
 
   private[scalajsesbuild] def htmlTransform = {
     // language=JS
-    """const htmlTransform = (
+    """
+      |const htmlTransform = (
       |  htmlString,
       |  outDirectory,
       |  meta
       |) => {
       |  const path = require('path');
-      |  const jsdom = require("jsdom")
-      |  const { JSDOM } = jsdom;
+      |  const parse5 = require("parse5");
       |
       |  if (!meta.outputs) {
       |    throw new Error('Meta file missing output metadata');
@@ -21,31 +21,55 @@ object EsbuildWebScripts {
       |
       |  const toHtmlPath = (filePath) => filePath.split(path.sep).join(path.posix.sep);
       |
-      |  const dom = new JSDOM(htmlString);
-      |  dom.window.document.querySelectorAll("script").forEach((el) => {
-      |    let output;
-      |    let outputBundle;
-      |    Object.keys(meta.outputs).every((key) => {
-      |      const maybeOutput = meta.outputs[key];
-      |      if (el.src.endsWith(maybeOutput.entryPoint)) {
-      |        output = maybeOutput;
-      |        outputBundle = key;
-      |        return false;
+      |  const html = parse5.parse(htmlString.toString());
+      |
+      |  const walkHtml = (node) => {
+      |    (node.childNodes ? node.childNodes : []).forEach((childNode, idx, theseChildNodes) => {
+      |      if (childNode.tagName === 'script') {
+      |        const srcAttr = childNode.attrs.find((attr) => attr.name === 'src');
+      |        if (srcAttr) {
+      |          let output;
+      |          let outputBundle;
+      |          Object.keys(meta.outputs).every((key) => {
+      |            const maybeOutput = meta.outputs[key];
+      |            if (srcAttr.value.endsWith(maybeOutput.entryPoint)) {
+      |              output = maybeOutput;
+      |              outputBundle = key;
+      |              return false;
+      |            }
+      |            return true;
+      |          });
+      |          if (output) {
+      |            srcAttr.value = toHtmlPath(srcAttr.value.replace(output.entryPoint, path.relative(outDirectory, path.join(workingDirectory, outputBundle))));
+      |            if (output.cssBundle) {
+      |              const absolute = srcAttr.value.startsWith("/");
+      |              const link = {
+      |                tagName: 'link',
+      |                namespaceURI: parse5.html.NS['HTML'],
+      |                attrs: [
+      |                  {
+      |                    name: 'rel',
+      |                    value: 'stylesheet'
+      |                  },
+      |                  {
+      |                    name: 'href',
+      |                    value: (absolute ? "/" : "") + toHtmlPath(path.relative(outDirectory, path.join(workingDirectory, output.cssBundle)))
+      |                  }
+      |                ]
+      |              }
+      |              theseChildNodes.splice(idx + 1, 0, link);
+      |            }
+      |          }
+      |        }
+      |      }
+      |      if (childNode.childNodes) {
+      |        walkHtml(childNode);
       |      }
-      |      return true;
       |    })
-      |    if (output) {
-      |     let absolute = el.src.startsWith("/");
-      |     el.src = toHtmlPath(el.src.replace(output.entryPoint, path.relative(outDirectory, path.join(workingDirectory, outputBundle))));
-      |     if (output.cssBundle) {
-      |       const link = dom.window.document.createElement("link");
-      |       link.rel = "stylesheet";
-      |       link.href = (absolute ? "/" : "") + toHtmlPath(path.relative(outDirectory, path.join(workingDirectory, output.cssBundle)));
-      |       el.parentNode.insertBefore(link, el.nextSibling);
-      |     }
-      |    }
-      |  });
-      |  return dom.serialize();
+      |  };
+      |  walkHtml(html);
+      |
+      |  return parse5.serialize(html);
       |}""".stripMargin
   }
 

diff --git a/...s-esbuild-web/src/sbt-test/sbt-scalajs-esbuild-web/basic-web-project/esbuild/package.json b/...s-esbuild-web/src/sbt-test/sbt-scalajs-esbuild-web/basic-web-project/esbuild/package.json
@@ -3,11 +3,10 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  "dependencies": {
-    "lodash": "4.17.21"
-  },
   "devDependencies": {
     "esbuild": "0.20.0",
-    "jsdom": "24.0.0"
+    "parse5": "7.1.2",
+    "jsdom": "24.0.0",
+    "lodash": "4.17.21"
   }
 }
diff --git a/...build-web/src/sbt-test/sbt-scalajs-esbuild-web/multiple-entry-points/esbuild/package.json b/...build-web/src/sbt-test/sbt-scalajs-esbuild-web/multiple-entry-points/esbuild/package.json
@@ -3,11 +3,10 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  "dependencies": {
-    "lodash": "4.17.21"
-  },
   "devDependencies": {
     "esbuild": "0.20.0",
-    "jsdom": "24.0.0"
+    "parse5": "7.1.2",
+    "jsdom": "24.0.0",
+    "lodash": "4.17.21"
   }
 }
diff --git a/...js-esbuild/src/sbt-test/sbt-web-scalajs-esbuild/basic-project/client/esbuild/package.json b/...js-esbuild/src/sbt-test/sbt-web-scalajs-esbuild/basic-project/client/esbuild/package.json
@@ -3,11 +3,9 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  "dependencies": {
-    "lodash": "4.17.21"
-  },
   "devDependencies": {
     "esbuild": "0.20.0",
-    "jsdom": "24.0.0"
+    "parse5": "7.1.2",
+    "lodash": "4.17.21"
   }
 }