diff --git a/packages/babel-plugin-jsx-dom-expressions/package.json b/packages/babel-plugin-jsx-dom-expressions/package.json index c005beee..2ec3b77a 100644 --- a/packages/babel-plugin-jsx-dom-expressions/package.json +++ b/packages/babel-plugin-jsx-dom-expressions/package.json @@ -24,7 +24,7 @@ "@babel/types": "^7.20.7", "html-entities": "2.3.3", "jest-diff": "^29.7.0", - "jsdom": "^25.0.0", + "parse5": "^7.1.2", "validate-html-nesting": "^1.2.1" }, "peerDependencies": { diff --git a/packages/babel-plugin-jsx-dom-expressions/src/shared/validate.js b/packages/babel-plugin-jsx-dom-expressions/src/shared/validate.js index c5db3a53..600f50b4 100644 --- a/packages/babel-plugin-jsx-dom-expressions/src/shared/validate.js +++ b/packages/babel-plugin-jsx-dom-expressions/src/shared/validate.js @@ -1,10 +1,19 @@ -// fix me: jsdom crashes without this -const util = require("util"); -const { TextEncoder, TextDecoder } = util; -Object.assign(global, { TextDecoder, TextEncoder }); +// import parse5 from "parse5"; +const parse5 = require("parse5"); -const JSDOM = require("jsdom").JSDOM; -const Element = new JSDOM(``).window.document.body; +/** `bodyElement` will be used as a `context` (The place where we run `innerHTML`) */ +const bodyElement = parse5.parse( + `` + // @ts-ignore +).childNodes[1].childNodes[1]; + +function innerHTML(htmlFragment) { + /** `htmlFragment` will be parsed as if it was set to the `bodyElement`'s `innerHTML` property. */ + const parsedFragment = parse5.parseFragment(bodyElement, htmlFragment); + + /** `serialize` returns back a string from the parsed nodes */ + return parse5.serialize(parsedFragment); +} /** * Returns an object with information when the markup is invalid @@ -48,10 +57,8 @@ export function isInvalidMarkup(html) { .replace(/^/i, "
") .replace(/<\/td>$/i, "
"); - // parse - Element.innerHTML = html; - // result - const browser = Element.innerHTML; + /** Parse HTML. `browser` is a string with the supposed resulting html of a real `innerHTML` call */ + const browser = innerHTML(html); if (html !== browser) { return {