0.39.0 Updates

.github/workflows/main-ci.yml

@@ -40,7 +40,7 @@ jobs:
         github-token: ${{ secrets.GITHUB_TOKEN }}
 
     - name: Archive production artifacts
-      uses: actions/upload-artifact@v2
+      uses: actions/upload-artifact@v4
       with:
         name: dist-folder
         path: |

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

@@ -23,6 +23,8 @@
     "@babel/plugin-syntax-jsx": "^7.18.6",
     "@babel/types": "^7.20.7",
     "html-entities": "2.3.3",
+    "jest-diff": "^29.7.0",
+    "jsdom": "^25.0.0",
     "validate-html-nesting": "^1.2.1"
   },
   "peerDependencies": {

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

@@ -61,15 +61,19 @@ export function transformElement(path, info) {
     config = getConfig(path),
     wrapSVG = info.topLevel && tagName != "svg" && SVGElements.has(tagName),
     voidTag = VoidElements.indexOf(tagName) > -1,
-    isCustomElement = tagName.indexOf("-") > -1 || !!path.get("openingElement").get("attributes").find(a => a.node.name?.name === "is"),
+    isCustomElement = tagName.indexOf("-") > -1 || path.get("openingElement").get("attributes").some(a => a.node?.name?.name === "is" || a.name?.name === "is"),
+    isImportNode = (tagName === 'img'||tagName === 'iframe') && path.get("openingElement").get("attributes").some(a =>  a.node.name?.name === "loading" && a.node.value?.value === "lazy"
+     ),
     results = {
       template: `<${tagName}`,
+      templateWithClosingTags: `<${tagName}`,
       declarations: [],
       exprs: [],
       dynamics: [],
       postExprs: [],
       isSVG: wrapSVG,
       hasCustomElement: isCustomElement,
+      isImportNode,
       tagName,
       renderer: "dom",
       skipTemplate: false
@@ -95,13 +99,17 @@ export function transformElement(path, info) {
       return results;
     }
   }
-  if (wrapSVG) results.template = "<svg>" + results.template;
+  if (wrapSVG) {
+    results.template = "<svg>" + results.template;
+    results.templateWithClosingTags = "<svg>" + results.templateWithClosingTags;
+  }
   if (!info.skipId) results.id = path.scope.generateUidIdentifier("el$");
   transformAttributes(path, results);
   if (config.contextToCustomElements && (tagName === "slot" || isCustomElement)) {
     contextToCustomElement(path, results);
   }
   results.template += ">";
+  results.templateWithClosingTags += ">";
   if (!voidTag) {
     // always close tags can still be skipped if they have no closing parents and are the last element
     const toBeClosed =
@@ -114,6 +122,7 @@ export function transformElement(path, info) {
     } else results.toBeClosed = info.toBeClosed;
     if (tagName !== "noscript") transformChildren(path, results, config);
     if (toBeClosed) results.template += `</${tagName}>`;
+    results.templateWithClosingTags += `</${tagName}>`;
   }
   if (info.topLevel && config.hydratable && results.hasHydratableEvent) {
     let runHydrationEvents = registerImportMethod(
@@ -123,7 +132,10 @@ export function transformElement(path, info) {
     );
     results.postExprs.push(t.expressionStatement(t.callExpression(runHydrationEvents, [])));
   }
-  if (wrapSVG) results.template += "</svg>";
+  if (wrapSVG) {
+    results.template += "</svg>";
+    results.templateWithClosingTags += "</svg>";
+  }
   return results;
 }
 
@@ -216,6 +228,13 @@ export function setAttr(path, elem, name, value, { isSVG, dynamic, prevId, isCE,
     return t.assignmentExpression("=", t.memberExpression(elem, t.identifier("data")), value);
   }
 
+  if(namespace === 'bool') {
+    return t.callExpression(
+      registerImportMethod(path, "setBoolAttribute", getRendererConfig(path, "dom").moduleName),
+      [elem, t.stringLiteral(name), value]
+    );
+  }
+
   const isChildProp = ChildProperties.has(name);
   const isProp = Properties.has(name);
   const alias = getPropAlias(name, tagName.toUpperCase());
@@ -270,7 +289,7 @@ function transformAttributes(path, results) {
     attributes = path.get("openingElement").get("attributes");
   const tagName = getTagName(path.node),
     isSVG = SVGElements.has(tagName),
-    isCE = tagName.includes("-"),
+    isCE = tagName.includes("-") || attributes.some(a => a.node.name?.name === 'is'),
     hasChildren = path.node.children.length > 0,
     config = getConfig(path);
 
@@ -542,15 +561,29 @@ function transformAttributes(path, results) {
           children = value;
         } else if (key.startsWith("on")) {
           const ev = toEventName(key);
-          if (key.startsWith("on:") || key.startsWith("oncapture:")) {
-            const listenerOptions = [t.stringLiteral(key.split(":")[1]), value.expression];
+          if (key.startsWith("on:")) {
+            const args = [elem, t.stringLiteral(key.split(":")[1]), value.expression];
+
+            results.exprs.unshift(
+              t.expressionStatement(
+                t.callExpression(
+                  registerImportMethod(
+                    path,
+                    "addEventListener",
+                    getRendererConfig(path, "dom").moduleName,
+                  ),
+                  args,
+                ),
+              ),
+            );
+          } else if (key.startsWith("oncapture:")) {
+            // deprecated see above condition
+            const args = [t.stringLiteral(key.split(":")[1]), value.expression, t.booleanLiteral(true)];
             results.exprs.push(
               t.expressionStatement(
                 t.callExpression(
                   t.memberExpression(elem, t.identifier("addEventListener")),
-                  key.startsWith("oncapture:")
-                    ? listenerOptions.concat(t.booleanLiteral(true))
-                    : listenerOptions
+                  args
                 )
               )
             );
@@ -697,6 +730,54 @@ function transformAttributes(path, results) {
             isCE,
             tagName
           });
+        } else if(key.slice(0, 5) === 'bool:'){
+
+            // inline it on the template when possible
+            let content = value;
+
+            if (t.isJSXExpressionContainer(content)) content = content.expression;
+
+            function addBoolAttribute() {
+              results.template += `${needsSpacing ? " " : ""}${key.slice(5)}`;
+              needsSpacing = true;
+            }
+
+            switch (content.type) {
+              case "StringLiteral": {
+                if (content.value.length && content.value !== "0") {
+                  addBoolAttribute();
+                }
+                return;
+              }
+              case "NullLiteral": {
+                return;
+              }
+              case "BooleanLiteral": {
+                if (content.value) {
+                  addBoolAttribute();
+                }
+                return;
+              }
+              case "Identifier": {
+                if (content.name === "undefined") {
+                  return;
+                }
+                break;
+              }
+            }
+
+            // when not possible to inline it in the template
+            results.exprs.push(
+              t.expressionStatement(
+                setAttr(
+                  attribute,
+                  elem,
+                  key,
+                  t.isJSXExpressionContainer(value) ? value.expression : value,
+                  { isSVG, isCE, tagName },
+                ),
+              ),
+            );
         } else {
           results.exprs.push(
             t.expressionStatement(
@@ -718,6 +799,7 @@ function transformAttributes(path, results) {
         } else {
           !isSVG && (key = key.toLowerCase());
           results.template += `${needsSpacing ? ' ' : ''}${key}`;
+          results.templateWithClosingTags += `${needsSpacing ? ' ' : ''}${key}`;
           if (!value) {
             needsSpacing = true;
             return;
@@ -737,6 +819,7 @@ function transformAttributes(path, results) {
           if (!text.length) {
             needsSpacing = false;
             results.template += `=""`;
+            results.templateWithClosingTags += `=""`;
             return;
           }
 
@@ -762,9 +845,11 @@ function transformAttributes(path, results) {
           if (needsQuoting) {
             needsSpacing = false;
             results.template += `="${escapeHTML(text, true)}"`;
+            results.templateWithClosingTags += `="${escapeHTML(text, true)}"`;
           } else {
             needsSpacing = true;
             results.template += `=${escapeHTML(text, true)}`;
+            results.templateWithClosingTags += `=${escapeHTML(text, true)}`;
           }
         }
       }
@@ -818,6 +903,7 @@ function transformChildren(path, results, config) {
       const i = memo.length;
       if (transformed.text && i && memo[i - 1].text) {
         memo[i - 1].template += transformed.template;
+        memo[i - 1].templateWithClosingTags += transformed.templateWithClosingTags || transformed.template;
       } else memo.push(transformed);
       return memo;
     }, []);
@@ -830,6 +916,9 @@ 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) {
@@ -878,6 +967,7 @@ function transformChildren(path, results, config) {
       childPostExprs.push(...child.postExprs);
       results.hasHydratableEvent = results.hasHydratableEvent || child.hasHydratableEvent;
       results.hasCustomElement = results.hasCustomElement || child.hasCustomElement;
+      results.isImportNode = results.isImportNode || child.isImportNode;
       tempPath = child.id.name;
       nextPlaceholder = null;
       i++;
@@ -931,6 +1021,7 @@ function createPlaceholder(path, results, tempPath, i, char) {
     config = getConfig(path);
   let contentId;
   results.template += `<!${char}>`;
+  results.templateWithClosingTags += `<!${char}>`;
   if (config.hydratable && char === "/") {
     contentId = path.scope.generateUidIdentifier("co$");
     results.declarations.push(
@@ -980,7 +1071,7 @@ function detectExpressions(children, index, config) {
     } else if (t.isJSXElement(child)) {
       const tagName = getTagName(child);
       if (isComponent(tagName)) return true;
-      if (config.contextToCustomElements && (tagName === "slot" || tagName.indexOf("-") > -1))
+      if (config.contextToCustomElements && (tagName === "slot" || tagName.indexOf("-") > -1 || child.openingElement.attributes.some(a => a.name?.name === 'is')))
         return true;
       if (
         child.openingElement.attributes.some(

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

@@ -40,14 +40,17 @@ export function appendTemplates(path, templates) {
       cooked: template.template,
       raw: escapeStringForTemplate(template.template)
     };
+
+    const shouldUseImportNode = template.isCE || template.isImportNode
+
     return t.variableDeclarator(
       template.id,
       t.addComment(
         t.callExpression(
           registerImportMethod(path, "template", getRendererConfig(path, "dom").moduleName),
           [t.templateLiteral([t.templateElement(tmpl, true)], [])].concat(
-            template.isSVG || template.isCE
-              ? [t.booleanLiteral(template.isCE), t.booleanLiteral(template.isSVG)]
+            template.isSVG || shouldUseImportNode
+              ? [t.booleanLiteral(!!shouldUseImportNode), t.booleanLiteral(template.isSVG)]
               : []
           )
         ),
@@ -75,8 +78,10 @@ function registerTemplate(path, results) {
         templates.push({
           id: templateId,
           template: results.template,
+          templateWithClosingTags: results.templateWithClosingTags,
           isSVG: results.isSVG,
           isCE: results.hasCustomElement,
+          isImportNode: results.isImportNode,
           renderer: "dom"
         });
       }

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

@@ -2,6 +2,8 @@ import * as t from "@babel/types";
 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 => {
@@ -16,6 +18,21 @@ export default path => {
     );
   }
   if (path.scope.data.templates?.length) {
+    for (const template of path.scope.data.templates) {
+      const html = template.templateWithClosingTags;
+      // not sure when/why this is not a string
+      if (typeof html === "string") {
+        const result = isInvalidMarkup(html);
+        if (result) {
+          const message =
+            "The 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("Original HTML:\n", html);
+          // throw path.buildCodeFrameError();
+        }
+      }
+    }
     let domTemplates = path.scope.data.templates.filter(temp => temp.renderer === "dom");
     let ssrTemplates = path.scope.data.templates.filter(temp => temp.renderer === "ssr");
     domTemplates.length > 0 && appendTemplatesDOM(path, domTemplates);

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

@@ -8,6 +8,7 @@ const JSXValidator = {
   JSXElement(path) {
     const elName = path.node.openingElement.name;
     const parent = path.parent;
+
     if (!t.isJSXElement(parent) || !t.isJSXIdentifier(elName)) return;
     const elTagName = elName.name;
     if (isComponent(elTagName)) return;

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

@@ -8,10 +8,11 @@ export const reservedNameSpaces = new Set([
   "style",
   "use",
   "prop",
-  "attr"
+  "attr",
+  "bool"
 ]);
 
-export const nonSpreadNameSpaces = new Set(["class", "style", "use", "prop", "attr"]);
+export const nonSpreadNameSpaces = new Set(["class", "style", "use", "prop", "attr", "bool"]);
 
 export function getConfig(path) {
   return path.hub.file.metadata.config;