babel-plugin-jsx-dom-expressions 0.36.0-beta.2 → 0.36.0-beta.4

package/index.js

@@ -600,6 +600,45 @@ function canNativeSpread(key, { checkNameSpaces } = {}) {
   return true;
 }
 
+const BlockElements = [
+  "address",
+  "article",
+  "aside",
+  "blockquote",
+  "canvas",
+  "dd",
+  "div",
+  "dl",
+  "dt",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "header",
+  "hgroup",
+  "hr",
+  "li",
+  "main",
+  "nav",
+  "noscript",
+  "ol",
+  "output",
+  "p",
+  "pre",
+  "section",
+  "table",
+  "tfoot",
+  "ul",
+  "video"
+];
+
 function transformElement$3(path, info) {
   let tagName = getTagName(path.node),
     config = getConfig(path),
@@ -646,8 +685,14 @@ function transformElement$3(path, info) {
   }
   results.template += ">";
   if (!voidTag) {
+    const toBeClosed = !info.lastElement || (info.toBeClosed && info.toBeClosed.includes(tagName));
+    if (toBeClosed) {
+      results.toBeClosed = info.toBeClosed || [];
+      results.toBeClosed.push(tagName);
+      if (tagName === "a") results.toBeClosed.push(...BlockElements);
+    }
     transformChildren$2(path, results, config);
-    results.template += `</${tagName}>`;
+    if (toBeClosed) results.template += `</${tagName}>`;
   }
   if (info.topLevel && config.hydratable && results.hasHydratableEvent) {
     let runHydrationEvents = registerImportMethod(
@@ -1185,10 +1230,19 @@ function transformAttributes$2(path, results) {
               t__namespace.variableDeclarator(nextElem, t__namespace.memberExpression(elem, t__namespace.identifier("firstChild")))
             );
           }
-          results.dynamics.push({ elem: nextElem, key, value: value.expression, isSVG, isCE, tagName });
+          results.dynamics.push({
+            elem: nextElem,
+            key,
+            value: value.expression,
+            isSVG,
+            isCE,
+            tagName
+          });
         } else {
           results.exprs.push(
-            t__namespace.expressionStatement(setAttr$2(attribute, elem, key, value.expression, { isSVG, isCE, tagName }))
+            t__namespace.expressionStatement(
+              setAttr$2(attribute, elem, key, value.expression, { isSVG, isCE, tagName })
+            )
           );
         }
       } else {
@@ -1230,6 +1284,8 @@ function transformChildren$2(path, results, config) {
         );
       }
       const transformed = transformNode(child, {
+        toBeClosed: results.toBeClosed,
+        lastElement: index === filteredChildren.length - 1,
         skipId: !results.id || !detectExpressions(filteredChildren, index, config)
       });
       if (!transformed) return memo;
@@ -1496,7 +1552,9 @@ function processSpreads$1(path, attributes, { elem, isSVG, hasChildren, wrapCond
         runningObject.push(
           t__namespace.objectProperty(
             t__namespace.stringLiteral(key),
-            isContainer ? node.value.expression : node.value || (Properties.has(key) ? t__namespace.booleanLiteral(true) : t__namespace.stringLiteral(""))
+            isContainer
+              ? node.value.expression
+              : node.value || (Properties.has(key) ? t__namespace.booleanLiteral(true) : t__namespace.stringLiteral(""))
           )
         );
       }
@@ -1566,10 +1624,11 @@ function appendTemplates$1(path, templates) {
       t__namespace.addComment(
         t__namespace.callExpression(
           registerImportMethod(path, "template", getRendererConfig(path, "dom").moduleName),
-          [
-            t__namespace.templateLiteral([t__namespace.templateElement(tmpl, true)], []),
-            t__namespace.numericLiteral(template.elementCount)
-          ].concat(template.isSVG ? t__namespace.booleanLiteral(template.isSVG) : [])
+          [t__namespace.templateLiteral([t__namespace.templateElement(tmpl, true)], [])].concat(
+            template.isSVG || template.isCE
+              ? [t__namespace.booleanLiteral(template.isSVG), t__namespace.booleanLiteral(template.isCE)]
+              : []
+          )
         ),
         "leading",
         "#__PURE__"
@@ -1595,8 +1654,8 @@ function registerTemplate(path, results) {
         templates.push({
           id: templateId,
           template: results.template,
-          elementCount: results.template.split("<").length - 1,
           isSVG: results.isSVG,
+          isCE: results.hasCustomElement,
           renderer: "dom"
         });
       }
@@ -1608,22 +1667,7 @@ function registerTemplate(path, results) {
             registerImportMethod(path, "getNextElement", getRendererConfig(path, "dom").moduleName),
             templateId ? [templateId] : []
           )
-        : results.hasCustomElement
-        ? t__namespace.callExpression(
-            registerImportMethod(path, "untrack", getRendererConfig(path, "dom").moduleName),
-            [
-              t__namespace.arrowFunctionExpression(
-                [],
-                t__namespace.callExpression(
-                  t__namespace.memberExpression(t__namespace.identifier("document"), t__namespace.identifier("importNode")),
-                  [templateId, t__namespace.booleanLiteral(true)]
-                )
-              )
-            ]
-          )
-        : t__namespace.callExpression(t__namespace.memberExpression(templateId, t__namespace.identifier("cloneNode")), [
-            t__namespace.booleanLiteral(true)
-          ])
+        : t__namespace.callExpression(templateId, [])
     );
   }
   results.declarations.unshift(decl);
@@ -1682,7 +1726,13 @@ function wrapDynamics$1(path, dynamics) {
           t__namespace.assignmentExpression(
             "=",
             prev,
-            setAttr$2(path, elem, key, identifier, { isSVG, isCE, tagName, dynamic: true, prevId: prev })
+            setAttr$2(path, elem, key, identifier, {
+              isSVG,
+              isCE,
+              tagName,
+              dynamic: true,
+              prevId: prev
+            })
           )
         )
       );
@@ -3019,7 +3069,8 @@ function transformComponentChildren(children, config) {
     } else {
       const child = transformNode(path, {
         topLevel: true,
-        componentChild: true
+        componentChild: true,
+        lastElement: true
       });
       dynamic = dynamic || child.dynamic;
       if (
@@ -3058,43 +3109,15 @@ function transformComponentChildren(children, config) {
   return [transformedChildren, dynamic];
 }
 
-function insertMarker(path, config, result) {
-  if (config.generate === "ssr") {
-    const open = { template: "<!---->", exprs: [] };
-    result.push(getCreateTemplate(config, path, open)(path, open, true));
-  } else {
-    result.push(t__namespace.stringLiteral("<!>"));
-  }
-}
-
 function transformFragmentChildren(children, results, config) {
-  let prevResult;
   const filteredChildren = filterChildren(children),
     childNodes = filteredChildren.reduce((memo, path) => {
       if (t__namespace.isJSXText(path.node)) {
         const v = htmlEntities.decode(trimWhitespace(path.node.extra.raw));
-        if (v.length) {
-          if (config.hydratable &&
-            prevResult &&
-            !prevResult.tagName &&
-            !prevResult.component &&
-            prevResult.exprs.length &&
-            !prevResult.spreadElement) insertMarker(path, config, memo);
-          memo.push(t__namespace.stringLiteral(v));
-          prevResult = v;
-        }
+        if (v.length) memo.push(t__namespace.stringLiteral(v));
       } else {
-        const child = transformNode(path, { topLevel: true, fragmentChild: true });
-        const insertMarkers =
-          config.hydratable &&
-          !child.component &&
-          child.exprs.length &&
-          !child.spreadElement &&
-          prevResult &&
-          (typeof prevResult !== "object" || !(prevResult.tagName || prevResult.component));
-        if (insertMarkers) insertMarker(path, config, memo);
+        const child = transformNode(path, { topLevel: true, fragmentChild: true, lastElement: true });
         memo.push(getCreateTemplate(config, path, child)(path, child, true));
-        prevResult = child;
       }
       return memo;
     }, []);
@@ -3109,7 +3132,8 @@ function transformJSX(path) {
     t__namespace.isJSXFragment(path.node)
       ? {}
       : {
-          topLevel: true
+          topLevel: true,
+          lastElement: true
         }
   );
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "babel-plugin-jsx-dom-expressions",
   "description": "A JSX to DOM plugin that wraps expressions for fine grained change detection",
-  "version": "0.36.0-beta.2",
+  "version": "0.36.0-beta.4",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -31,5 +31,5 @@
   "devDependencies": {
     "@babel/core": "^7.20.12"
   },
-  "gitHead": "3afd7a16f14cae485c63e6227492bb6ed151d1b3"
+  "gitHead": "d2c4d6692be78ba505be59d77ac14aa215c7b232"
 }