babel-plugin-jsx-dom-expressions 0.35.14 → 0.35.16

package/index.js

@@ -1911,7 +1911,7 @@ function escapeExpression(path, expression, attr, escapeLiterals) {
     } else
       expression.callee.body = escapeExpression(path, expression.callee.body, attr, escapeLiterals);
     return expression;
-  } else if(t__namespace.isJSXElement(expression) && !isComponent(getTagName(expression))) {
+  } else if (t__namespace.isJSXElement(expression) && !isComponent(getTagName(expression))) {
     expression.wontEscape = true;
     return expression;
   }
@@ -2240,66 +2240,133 @@ function createElement(path, { topLevel, hydratable }) {
       return memo;
     }, []);
 
-  let transformed;
+  let props;
   if (attributes.length === 1) {
-    transformed = attributes[0].node.argument;
+    props = [attributes[0].node.argument];
   } else {
-    transformed = t__namespace.arrowFunctionExpression(
-      [],
-      t__namespace.objectExpression(
-        attributes.reduce((memo, attribute) => {
-          const node = attribute.node;
-
-          if (t__namespace.isJSXSpreadAttribute(node)) {
-            const expr = node.argument;
-            memo.push(t__namespace.spreadElement(expr));
-            return memo;
-          }
-          let value = node.value,
-            key = t__namespace.isJSXNamespacedName(node.name)
-              ? `${node.name.namespace.name}:${node.name.name.name}`
-              : node.name.name,
-            reservedNameSpace =
-              t__namespace.isJSXNamespacedName(node.name) && reservedNameSpaces.has(node.name.namespace.name);
-          if (
-            ((t__namespace.isJSXNamespacedName(node.name) && reservedNameSpace) || ChildProperties.has(key)) &&
-            !t__namespace.isJSXExpressionContainer(value)
-          ) {
-            node.value = value = t__namespace.JSXExpressionContainer(value || t__namespace.JSXEmptyExpression());
-          }
+    props = [];
+    let runningObject = [],
+      dynamicSpread = false,
+      hasChildren = path.node.children.length > 0;
 
+    attributes.forEach(attribute => {
+      const node = attribute.node;
+      if (t__namespace.isJSXSpreadAttribute(node)) {
+        if (runningObject.length) {
+          props.push(t__namespace.objectExpression(runningObject));
+          runningObject = [];
+        }
+        props.push(
+          isDynamic(attribute.get("argument"), {
+            checkMember: true
+          }) && (dynamicSpread = true)
+            ? t__namespace.isCallExpression(node.argument) &&
+              !node.argument.arguments.length &&
+              !t__namespace.isCallExpression(node.argument.callee) &&
+              !t__namespace.isMemberExpression(node.argument.callee)
+              ? node.argument.callee
+              : t__namespace.arrowFunctionExpression([], node.argument)
+            : node.argument
+        );
+      } else {
+        const value = node.value || t__namespace.booleanLiteral(true),
+          id = convertJSXIdentifier(node.name),
+          key = t__namespace.isJSXNamespacedName(node.name)
+            ? `${node.name.namespace.name}:${node.name.name.name}`
+            : node.name.name;
+
+        if (hasChildren && key === "children") return;
+        if (
+          key === "ref" ||
+          key.startsWith("use:") ||
+          key.startsWith("prop:") ||
+          key.startsWith("on")
+        )
+          return;
+        if (t__namespace.isJSXExpressionContainer(value))
           if (
-            t__namespace.isJSXExpressionContainer(value) &&
-            (reservedNameSpace ||
-              ChildProperties.has(key) ||
-              !(t__namespace.isStringLiteral(value.expression) || t__namespace.isNumericLiteral(value.expression)))
+            isDynamic(attribute.get("value").get("expression"), {
+              checkMember: true,
+              checkTags: true
+            })
           ) {
-            if (
-              key === "ref" ||
-              key.startsWith("use:") ||
-              key.startsWith("prop:") ||
-              key.startsWith("on")
-            )
-              return memo;
-
-            memo.push(t__namespace.objectProperty(t__namespace.stringLiteral(key), value.expression));
-          } else {
-            if (key === "$ServerOnly") return memo;
-            if (t__namespace.isJSXExpressionContainer(value)) value = value.expression;
-            memo.push(
-              t__namespace.objectProperty(t__namespace.stringLiteral(key), value ? value : t__namespace.booleanLiteral(true))
+            let expr = t__namespace.arrowFunctionExpression([], value.expression);
+            runningObject.push(
+              t__namespace.objectMethod(
+                "get",
+                id,
+                [],
+                t__namespace.blockStatement([t__namespace.returnStatement(expr.body)]),
+                !t__namespace.isValidIdentifier(key)
+              )
             );
-          }
-          return memo;
-        }, [])
-      )
-    );
+          } else runningObject.push(t__namespace.objectProperty(id, value.expression));
+        else runningObject.push(t__namespace.objectProperty(id, value));
+      }
+    });
+
+    if (runningObject.length || !props.length) props.push(t__namespace.objectExpression(runningObject));
+
+    if (props.length > 1 || dynamicSpread) {
+      props = [t__namespace.callExpression(registerImportMethod(path, "mergeProps"), props)];
+    }
+
+    // transformed = t.arrowFunctionExpression(
+    //   [],
+    //   t.objectExpression(
+    //     attributes.reduce((memo, attribute) => {
+    //       const node = attribute.node;
+
+    //       if (t.isJSXSpreadAttribute(node)) {
+    //         const expr = node.argument;
+    //         memo.push(t.spreadElement(expr));
+    //         return memo;
+    //       }
+    //       let value = node.value,
+    //         key = t.isJSXNamespacedName(node.name)
+    //           ? `${node.name.namespace.name}:${node.name.name.name}`
+    //           : node.name.name,
+    //         reservedNameSpace =
+    //           t.isJSXNamespacedName(node.name) && reservedNameSpaces.has(node.name.namespace.name);
+    //       if (
+    //         ((t.isJSXNamespacedName(node.name) && reservedNameSpace) || ChildProperties.has(key)) &&
+    //         !t.isJSXExpressionContainer(value)
+    //       ) {
+    //         node.value = value = t.JSXExpressionContainer(value || t.JSXEmptyExpression());
+    //       }
+
+    //       if (
+    //         t.isJSXExpressionContainer(value) &&
+    //         (reservedNameSpace ||
+    //           ChildProperties.has(key) ||
+    //           !(t.isStringLiteral(value.expression) || t.isNumericLiteral(value.expression)))
+    //       ) {
+    //         if (
+    //           key === "ref" ||
+    //           key.startsWith("use:") ||
+    //           key.startsWith("prop:") ||
+    //           key.startsWith("on")
+    //         )
+    //           return memo;
+
+    //         memo.push(t.objectProperty(t.stringLiteral(key), value.expression));
+    //       } else {
+    //         if (key === "$ServerOnly") return memo;
+    //         if (t.isJSXExpressionContainer(value)) value = value.expression;
+    //         memo.push(
+    //           t.objectProperty(t.stringLiteral(key), value ? value : t.booleanLiteral(true))
+    //         );
+    //       }
+    //       return memo;
+    //     }, [])
+    //   )
+    // );
   }
 
   const exprs = [
     t__namespace.callExpression(registerImportMethod(path, "ssrElement"), [
       t__namespace.stringLiteral(tagName),
-      transformed,
+      props[0],
       childNodes.length
         ? hydratable
           ? t__namespace.arrowFunctionExpression(

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.35.14",
+  "version": "0.35.16",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -23,7 +23,7 @@
     "@babel/plugin-syntax-jsx": "^7.18.6",
     "@babel/types": "^7.20.7",
     "html-entities": "2.3.3",
-    "validate-html-nesting": "^1.2.0"
+    "validate-html-nesting": "^1.2.1"
   },
   "peerDependencies": {
     "@babel/core": "^7.20.12"
@@ -31,5 +31,5 @@
   "devDependencies": {
     "@babel/core": "^7.20.12"
   },
-  "gitHead": "4b32c4922f0294e01dc218475d342287abc3a215"
+  "gitHead": "764c717918d199a630bb0c7f85c7b8f772ef9e07"
 }