babel-plugin-jsx-dom-expressions 0.31.5 → 0.32.0

package/index.js

@@ -551,6 +551,7 @@ function transformElement$2(path, info) {
 
 function setAttr$2(path, elem, name, value, { isSVG, dynamic, prevId, isCE }) {
   // pull out namespace
+  const config = getConfig(path);
   let parts, namespace;
   if ((parts = name.split(":")) && parts[1] && reservedNameSpaces.has(parts[0])) {
     name = parts[1];
@@ -595,6 +596,13 @@ function setAttr$2(path, elem, name, value, { isSVG, dynamic, prevId, isCE }) {
     );
   }
 
+  if (config.hydratable && name === "innerHTML") {
+    return t__namespace.callExpression(
+      registerImportMethod(path, "innerHTML"),
+      [elem, value]
+    );
+  }
+
   if (dynamic && name === "textContent") {
     return t__namespace.assignmentExpression("=", t__namespace.memberExpression(elem, t__namespace.identifier("data")), value);
   }
@@ -808,7 +816,7 @@ function transformAttributes$2(path, results) {
           : node.name.name,
         reservedNameSpace =
           t__namespace.isJSXNamespacedName(node.name) && reservedNameSpaces.has(node.name.namespace.name);
-      if (t__namespace.isJSXExpressionContainer(value)) {
+      if (t__namespace.isJSXExpressionContainer(value) && !key.startsWith("use:")) {
         const evaluated = attribute.get("value").get("expression").evaluate().value;
         let type;
         if (
@@ -1150,26 +1158,7 @@ function transformChildren$2(path, results, config) {
           t__namespace.expressionStatement(
             t__namespace.callExpression(
               insert,
-              config.hydratable
-                ? [
-                    results.id,
-                    child.exprs[0],
-                    t__namespace.identifier("undefined"),
-                    t__namespace.callExpression(
-                      t__namespace.memberExpression(
-                        t__namespace.memberExpression(
-                          t__namespace.memberExpression(t__namespace.identifier("Array"), t__namespace.identifier("prototype")),
-                          t__namespace.identifier("slice")
-                        ),
-                        t__namespace.identifier("call")
-                      ),
-                      [
-                        t__namespace.memberExpression(results.id, t__namespace.identifier("childNodes")),
-                        t__namespace.numericLiteral(0)
-                      ]
-                    )
-                  ]
-                : [results.id, child.exprs[0]]
+              [results.id, child.exprs[0]]
             )
           )
         );
@@ -2216,18 +2205,21 @@ function wrapDynamics(path, dynamics) {
 
 function convertComponentIdentifier(node) {
   if (t__namespace.isJSXIdentifier(node)) {
-    node.type = "Identifier";
+    if (t__namespace.isValidIdentifier(node.name)) node.type = "Identifier";
+    else return t__namespace.stringLiteral(node.name);
   } else if (t__namespace.isJSXMemberExpression(node)) {
+    const prop = convertComponentIdentifier(node.property);
+    const computed = t__namespace.isStringLiteral(prop);
     return t__namespace.memberExpression(
       convertComponentIdentifier(node.object),
-      convertComponentIdentifier(node.property),
+      prop,
+      computed
     );
   }
 
   return node;
 }
 
-
 function convertJSXIdentifier(node) {
   if (t__namespace.isJSXIdentifier(node)) {
     if (t__namespace.isValidIdentifier(node.name)) {
@@ -2238,7 +2230,7 @@ function convertJSXIdentifier(node) {
   } else if (t__namespace.isJSXMemberExpression(node)) {
     return t__namespace.memberExpression(
       convertJSXIdentifier(node.object),
-      convertJSXIdentifier(node.property),
+      convertJSXIdentifier(node.property)
     );
   } else if (t__namespace.isJSXNamespacedName(node)) {
     return t__namespace.stringLiteral(`${node.namespace.name}:${node.name.name}`);
@@ -2444,7 +2436,7 @@ function transformComponentChildren(children, config) {
     return memo;
   }, []);
 
-  if (filteredChildren.length === 1) {
+  if (transformedChildren.length === 1) {
     transformedChildren = transformedChildren[0];
     if (
       !t__namespace.isJSXExpressionContainer(filteredChildren[0]) &&
@@ -2474,7 +2466,6 @@ function transformFragmentChildren(children, results, config) {
         ? createTemplate$1
         : createTemplate$2,
     filteredChildren = filterChildren(children),
-    singleChild = filteredChildren.length === 1,
     childNodes = filteredChildren.reduce((memo, path) => {
       if (t__namespace.isJSXText(path.node)) {
         const v =  htmlEntities.decode(trimWhitespace(path.node.extra.raw));
@@ -2485,7 +2476,7 @@ function transformFragmentChildren(children, results, config) {
       }
       return memo;
     }, []);
-  results.exprs.push(singleChild ? childNodes[0] : t__namespace.arrayExpression(childNodes));
+  results.exprs.push(childNodes.length === 1 ? childNodes[0] : t__namespace.arrayExpression(childNodes));
 }
 
 function transformJSX(path) {

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.31.5",
+  "version": "0.32.0",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -23,5 +23,5 @@
     "@babel/types": "^7.16.0",
     "html-entities": "2.3.2"
   },
-  "gitHead": "4ef6930208d91931a87074733a134b0fcbebe428"
+  "gitHead": "6c6759c7f721d1e738b3aead7afb5c3cd0be04fc"
 }