Merge pull request #370 from titoBouzout/attrvalidationskip

HTML validation fixes

packages/babel-plugin-jsx-dom-expressions/package.json

@@ -23,7 +23,6 @@
     "@babel/plugin-syntax-jsx": "^7.18.6",
     "@babel/types": "^7.20.7",
     "html-entities": "2.3.3",
-    "jest-diff": "^29.7.0",
     "parse5": "^7.1.2",
     "validate-html-nesting": "^1.2.1"
   },

packages/babel-plugin-jsx-dom-expressions/src/dom/element.js

@@ -799,7 +799,8 @@ function transformAttributes(path, results) {
         } else {
           !isSVG && (key = key.toLowerCase());
           results.template += `${needsSpacing ? ' ' : ''}${key}`;
-          results.templateWithClosingTags += `${needsSpacing ? ' ' : ''}${key}`;
+          // https://github.com/solidjs/solid/issues/2338
+          // results.templateWithClosingTags += `${needsSpacing ? ' ' : ''}${key}`;
           if (!value) {
             needsSpacing = true;
             return;
@@ -819,7 +820,8 @@ function transformAttributes(path, results) {
           if (!text.length) {
             needsSpacing = false;
             results.template += `=""`;
-            results.templateWithClosingTags += `=""`;
+            // https://github.com/solidjs/solid/issues/2338
+            // results.templateWithClosingTags += `=""`;
             return;
           }
 
@@ -845,11 +847,13 @@ function transformAttributes(path, results) {
           if (needsQuoting) {
             needsSpacing = false;
             results.template += `="${escapeHTML(text, true)}"`;
-            results.templateWithClosingTags += `="${escapeHTML(text, true)}"`;
+            // https://github.com/solidjs/solid/issues/2338
+            // results.templateWithClosingTags += `="${escapeHTML(text, true)}"`;
           } else {
             needsSpacing = true;
             results.template += `=${escapeHTML(text, true)}`;
-            results.templateWithClosingTags += `=${escapeHTML(text, true)}`;
+            // https://github.com/solidjs/solid/issues/2338
+            // results.templateWithClosingTags += `=${escapeHTML(text, true)}`;
           }
         }
       }
@@ -918,7 +922,7 @@ function transformChildren(path, results, config) {
     results.template += child.template;
     results.templateWithClosingTags += child.templateWithClosingTags || child.template ;
     results.isImportNode = results.isImportNode || child.isImportNode;
-    
+
     if (child.id) {
       if (child.tagName === "head") {
         if (config.hydratable) {

packages/babel-plugin-jsx-dom-expressions/src/shared/postprocess.js

@@ -3,7 +3,6 @@ import { getRendererConfig, registerImportMethod } from "./utils";
 import { appendTemplates as appendTemplatesDOM } from "../dom/template";
 import { appendTemplates as appendTemplatesSSR } from "../ssr/template";
 import { isInvalidMarkup } from "./validate.js";
-const { diff } = require("jest-diff");
 
 // add to the top/bottom of the module.
 export default path => {
@@ -28,7 +27,8 @@ export default path => {
             const message =
               "\nThe HTML provided is malformed and will yield unexpected output when evaluated by a browser.\n";
             console.warn(message);
-            console.log(diff(result.html, result.browser));
+            console.warn("User HTML:\n", result.html);
+            console.warn("Browser HTML:\n", result.browser);
             console.warn("Original HTML:\n", html);
             // throw path.buildCodeFrameError();
           }

packages/babel-plugin-jsx-dom-expressions/src/shared/validate.js

@@ -43,7 +43,9 @@ export function isInvalidMarkup(html) {
     .replace(/>[^<]+</gi, ">#text<")
 
     // remove attributes (the lack of quotes will make it mismatch)
-    .replace(/<([a-z0-9-:]+)\s+[^>]+>/gi, "<$1>")
+    // attributes are not longer added to `templateWithClosingTags`
+    // https://github.com/solidjs/solid/issues/2338
+    // .replace(/<([a-z0-9-:]+)\s+[^>]+>/gi, "<$1>")
 
     // fix escaping, so doesnt mess up the validation
     // `&lt;script>a();&lt;/script>` -> `&lt;script&gt;a();&lt;/script&gt;`
@@ -58,11 +60,19 @@ export function isInvalidMarkup(html) {
     .replace(/<\/td>$/i, "</td></tr></tbody></table>")
     .replace(/^<th>/i, "<table><thead><tr><th>")
     .replace(/<\/th>$/i, "</th></tr></thead></table>")
+    // col/colgroup
+    .replace(/^<col>/i, "<table><colgroup><col>")
+    .replace(/<\/col>$/i, "</col></colgroup></table>")
+    .replace(/^<colgroup>/i, "<table><colgroup>")
+    .replace(/<\/colgroup>$/i, "</colgroup></table>")
+
     // fix table components
     .replace(/^<thead>/i, "<table><thead>")
     .replace(/<\/thead>$/i, "</thead></table>")
     .replace(/^<tbody>/i, "<table><tbody>")
-    .replace(/<\/tbody>$/i, "</tbody></table>");
+    .replace(/<\/tbody>$/i, "</tbody></table>")
+    .replace(/^<tfoot>/i, "<table><tfoot>")
+    .replace(/<\/tfoot>$/i, "</tfoot></table>");
 
   // skip when equal to:
   switch (html) {

packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/code.js

@@ -247,9 +247,11 @@ const template68 = <div><iframe src=""></iframe></div>;
 const template69 = <iframe src="" loading="lazy"></iframe>;
 const template70 = <div><iframe src="" loading="lazy"></iframe></div>;
 
-const template71 = <div ref={binding} />;
-const template72 = <div ref={binding.prop} />;
-const template73 = <div ref={refFn} />
-const template74 = <div ref={refConst} />
+const template71 = <div title="<u>data</u>"/>
 
-const template75 = <div ref={refUnknown} />
+const template72 = <div ref={binding} />;
+const template73 = <div ref={binding.prop} />;
+const template74 = <div ref={refFn} />
+const template75 = <div ref={refConst} />
+
+const template76 = <div ref={refUnknown} />

packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js

@@ -61,7 +61,8 @@ var _tmpl$ = /*#__PURE__*/ _$template(`<div id=main><h1 class=base id=my-h1><a h
   _tmpl$45 = /*#__PURE__*/ _$template(`<iframe src="">`),
   _tmpl$46 = /*#__PURE__*/ _$template(`<div><iframe src="">`),
   _tmpl$47 = /*#__PURE__*/ _$template(`<iframe src=""loading=lazy>`, true, false),
-  _tmpl$48 = /*#__PURE__*/ _$template(`<div><iframe src=""loading=lazy>`, true, false);
+  _tmpl$48 = /*#__PURE__*/ _$template(`<div><iframe src=""loading=lazy>`, true, false),
+  _tmpl$49 = /*#__PURE__*/ _$template(`<div title="<u>data</u>">`);
 import * as styles from "./styles.module.css";
 import { binding } from "somewhere";
 function refFn() {}
@@ -517,29 +518,32 @@ const template67 = _tmpl$45();
 const template68 = _tmpl$46();
 const template69 = _tmpl$47();
 const template70 = _tmpl$48();
-const template71 = (() => {
+
+const template71 = _tmpl$49();
+
+const template72 = (() => {
   var _el$88 = _tmpl$4();
   _$use(binding, _el$88);
   return _el$88;
 })();
-const template72 = (() => {
+const template73 = (() => {
   var _el$89 = _tmpl$4();
   var _ref$8 = binding.prop;
   typeof _ref$8 === "function" ? _$use(_ref$8, _el$89) : (binding.prop = _el$89);
   return _el$89;
 })();
-const template73 = (() => {
+const template74 = (() => {
   var _el$90 = _tmpl$4();
   var _ref$9 = refFn;
   typeof _ref$9 === "function" ? _$use(_ref$9, _el$90) : (refFn = _el$90);
   return _el$90;
 })();
-const template74 = (() => {
+const template75 = (() => {
   var _el$91 = _tmpl$4();
   _$use(refConst, _el$91);
   return _el$91;
 })();
-const template75 = (() => {
+const template76 = (() => {
   var _el$92 = _tmpl$4();
   var _ref$10 = refUnknown;
   typeof _ref$10 === "function" ? _$use(_ref$10, _el$92) : (refUnknown = _el$92);