babel-plugin-jsx-dom-expressions 0.34.0-beta.2 → 0.34.2

package/index.js

@@ -1570,12 +1570,12 @@ function appendToTemplate(template, value) {
 }
 
 function transformElement$2(path, info) {
+  const config = getConfig(path);
   // contains spread attributes
   if (path.node.openingElement.attributes.some(a => t__namespace.isJSXSpreadAttribute(a)))
-    return createElement(path, info);
+    return createElement(path, { ...info, ...config });
 
   const tagName = getTagName(path.node),
-    config = getConfig(path),
     voidTag = VoidElements.indexOf(tagName) > -1,
     results = {
       template: [`<${tagName}`],
@@ -1593,7 +1593,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 +1761,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 +1798,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)) {
@@ -1926,6 +1929,8 @@ function transformClasslistObject(path, expr, values, quasis) {
 function transformChildren$1(path, results, { hydratable }) {
   const doNotEscape = path.doNotEscape;
   const filteredChildren = filterChildren(path.get("children"));
+  const multi = checkLength(filteredChildren),
+    markers = hydratable && multi;
   filteredChildren.forEach(node => {
     if (t__namespace.isJSXElement(node.node) && getTagName(node.node) === "head") {
       const child = transformNode(node, { doNotEscape, hydratable: false });
@@ -1950,9 +1955,6 @@ function transformChildren$1(path, results, { hydratable }) {
     appendToTemplate(results.template, child.template);
     results.templateValues.push.apply(results.templateValues, child.templateValues || []);
     if (child.exprs.length) {
-      const multi = checkLength(filteredChildren),
-        markers = hydratable && multi;
-
       if (!doNotEscape) child.exprs[0] = escapeExpression(path, child.exprs[0]);
 
       // boxed by textNodes
@@ -1969,19 +1971,24 @@ function transformChildren$1(path, results, { hydratable }) {
   });
 }
 
-function createElement(path, { topLevel }) {
+function createElement(path, { topLevel, hydratable }) {
   const tagName = getTagName(path.node),
     config = getConfig(path),
     attributes = normalizeAttributes(path);
 
   const filteredChildren = filterChildren(path.get("children")),
+    multi = checkLength(filteredChildren),
+    markers = hydratable && multi,
     childNodes = filteredChildren.reduce((memo, path) => {
       if (t__namespace.isJSXText(path.node)) {
         const v = htmlEntities.decode(trimWhitespace(path.node.extra.raw));
         if (v.length) memo.push(t__namespace.stringLiteral(v));
       } 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("<!--/-->"));
       }
       return memo;
     }, []);

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.0-beta.2",
+  "version": "0.34.2",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -27,5 +27,5 @@
   "peerDependencies": {
     "@babel/core": "^7.0.0"
   },
-  "gitHead": "80b54ffb1029d3fc735fd0604ead837758071fec"
+  "gitHead": "06b4f8106558dccae5071d4974b876b79e431b00"
 }