babel-plugin-jsx-dom-expressions 0.34.1 → 0.34.7

package/index.js

@@ -1416,9 +1416,18 @@ function registerTemplate(path, results) {
             templateId ? [templateId] : []
           )
         : results.hasCustomElement
-        ? t__namespace.callExpression(t__namespace.memberExpression(t__namespace.identifier("document"), t__namespace.identifier("importNode")), [
-            templateId, t__namespace.booleanLiteral(true)
-          ])
+        ? 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)
           ])
@@ -1439,9 +1448,14 @@ function wrapDynamics$1(path, dynamics) {
       dynamics[0].key === "classList" || dynamics[0].key === "style"
         ? t__namespace.identifier("_$p")
         : undefined;
-    if (dynamics[0].key.startsWith("class:") && !t__namespace.isBooleanLiteral(dynamics[0].value) && !t__namespace.isUnaryExpression(dynamics[0].value)) {
+    if (
+      dynamics[0].key.startsWith("class:") &&
+      !t__namespace.isBooleanLiteral(dynamics[0].value) &&
+      !t__namespace.isUnaryExpression(dynamics[0].value)
+    ) {
       dynamics[0].value = t__namespace.unaryExpression("!", t__namespace.unaryExpression("!", dynamics[0].value));
     }
+
     return t__namespace.expressionStatement(
       t__namespace.callExpression(effectWrapperId, [
         t__namespace.arrowFunctionExpression(
@@ -1464,7 +1478,8 @@ function wrapDynamics$1(path, dynamics) {
     const identifier = path.scope.generateUidIdentifier("v$");
     if (key.startsWith("class:") && !t__namespace.isBooleanLiteral(value) && !t__namespace.isUnaryExpression(value)) {
       value = t__namespace.unaryExpression("!", t__namespace.unaryExpression("!", value));
-    }    identifiers.push(identifier);
+    }
+    identifiers.push(identifier);
     decls.push(t__namespace.variableDeclarator(identifier, value));
     if (key === "classList" || key === "style") {
       const prev = t__namespace.memberExpression(prevId, identifier);
@@ -1593,7 +1608,7 @@ function transformElement$2(path, info) {
       t__namespace.callExpression(registerImportMethod(path, "ssrHydrationKey"), [])
     );
   }
-  transformAttributes$1(path, results);
+  transformAttributes$1(path, results, { ...config, ...info });
   appendToTemplate(results.template, ">");
   if (!voidTag) {
     transformChildren$1(path, results, { ...config, ...info });
@@ -1761,7 +1776,7 @@ function normalizeAttributes(path) {
   return attributes;
 }
 
-function transformAttributes$1(path, results) {
+function transformAttributes$1(path, results, info) {
   const tagName = getTagName(path.node),
     isSVG = SVGElements.has(tagName),
     hasChildren = path.node.children.length > 0,
@@ -1798,8 +1813,11 @@ function transformAttributes$1(path, results) {
       )
         return;
       else if (ChildProperties.has(key)) {
-        children = value;
+        if (info.hydratable && key === "textContent" && value && value.expression) {
+          value.expression = t__namespace.logicalExpression("||", value.expression, t__namespace.stringLiteral(" "));
+        }
         if (key === "innerHTML") path.doNotEscape = true;
+        children = value;
       } else {
         let doEscape = true;
         if (BooleanAttributes.has(key)) {
@@ -1972,6 +1990,9 @@ function createElement(path, { topLevel, hydratable }) {
   const tagName = getTagName(path.node),
     config = getConfig(path),
     attributes = normalizeAttributes(path);
+    isDynamic(path, {
+      checkMember: true
+    });
 
   const filteredChildren = filterChildren(path.get("children")),
     multi = checkLength(filteredChildren),
@@ -1983,7 +2004,6 @@ function createElement(path, { topLevel, hydratable }) {
       } else {
         const child = transformNode(path);
         if (markers && child.exprs.length) memo.push(t__namespace.stringLiteral("<!--#-->"));
-        if (hydratable && child.exprs.length) child.exprs[0] = t__namespace.arrowFunctionExpression([], child.exprs[0]);
         memo.push(getCreateTemplate(config, path, child)(path, child, true));
         if (markers && child.exprs.length) memo.push(t__namespace.stringLiteral("<!--/-->"));
       }
@@ -2046,7 +2066,12 @@ function createElement(path, { topLevel, hydratable }) {
       t__namespace.stringLiteral(tagName),
       transformed,
       childNodes.length
-        ? childNodes.length === 1
+        ? hydratable
+          ? t__namespace.arrowFunctionExpression(
+              [],
+              childNodes.length === 1 ? childNodes[0] : t__namespace.arrayExpression(childNodes)
+            )
+          : childNodes.length === 1
           ? childNodes[0]
           : t__namespace.arrayExpression(childNodes)
         : t__namespace.identifier("undefined"),

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.34.1",
+  "version": "0.34.7",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -27,5 +27,5 @@
   "peerDependencies": {
     "@babel/core": "^7.0.0"
   },
-  "gitHead": "5e49406921a4fde147b9b64edbfa8fc8c096fbda"
+  "gitHead": "df8d6142fe3d73ef2895f4bf54731eb514fb72ab"
 }