fix: babel plugin ignoring jsx spread attributes

Dev-Elevate · Feb 22, 2024 · 4c40e25 · 4c40e25
1 parent e905462
commit 4c40e25
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 44 deletions.
diff --git a/babel-plugin/index.js b/babel-plugin/index.js
@@ -81,38 +81,42 @@ module.exports = function (babel) {
 
     const obj = {};
     attributes.forEach((attribute) => {
-      const key = resolver(attribute.name.name);
-      let value;
-      if (attribute.value.type === 'JSXExpressionContainer') {
-        if (attribute.value.expression.type === 'ObjectExpression') {
-          value = {};
-          attribute.value.expression.properties.forEach((prop) => {
-            const propName =
-              prop.key.type === 'StringLiteral'
-                ? prop.key.value
-                : prop.key.name;
-            if (prop.value.value !== undefined) {
-              value[propName] = prop.value.value;
-            }
-          });
+      if (t.isJSXSpreadAttribute(attribute)) {
+        return;
+      } else {
+        const key = resolver(attribute.name.name);
+        let value;
+        if (attribute.value.type === 'JSXExpressionContainer') {
+          if (attribute.value.expression.type === 'ObjectExpression') {
+            value = {};
+            attribute.value.expression.properties.forEach((prop) => {
+              const propName =
+                prop.key.type === 'StringLiteral'
+                  ? prop.key.value
+                  : prop.key.name;
+              if (prop.value.value !== undefined) {
+                value[propName] = prop.value.value;
+              }
+            });
+          } else {
+            value = attribute.value.expression.value;
+          }
+        } else if (attribute.value.type === 'JSXElement') {
+          value = attributesToObject(attribute.value.openingElement.attributes);
         } else {
-          value = attribute.value.expression.value;
+          value = attribute.value.value;
         }
-      } else if (attribute.value.type === 'JSXElement') {
-        value = attributesToObject(attribute.value.openingElement.attributes);
-      } else {
-        value = attribute.value.value;
-      }
 
-      if (value !== undefined) {
-        obj[key] = value;
+        if (value !== undefined) {
+          obj[key] = value;
+        }
       }
     });
     return obj;
   }
   function addRnuStyleIdInStyleArrayOfCOmponent(jsxAttrArray, styleId) {
     // find the style attribute
-    let styleAttr = jsxAttrArray.find((attr) => attr.name.name === 'style');
+    let styleAttr = jsxAttrArray.find((attr) => attr.name?.name === 'style');
     // insert the styleId in the style array
     // style can be an array or a single object
     if (styleAttr) {

diff --git a/babel-plugin/out.js b/babel-plugin/out.js
@@ -59,33 +59,37 @@ module.exports = function(babel) {
     }
     const obj = {};
     attributes.forEach((attribute) => {
-      const key = resolver(attribute.name.name);
-      let value;
-      if (attribute.value.type === "JSXExpressionContainer") {
-        if (attribute.value.expression.type === "ObjectExpression") {
-          value = {};
-          attribute.value.expression.properties.forEach((prop) => {
-            const propName = prop.key.type === "StringLiteral" ? prop.key.value : prop.key.name;
-            if (prop.value.value !== void 0) {
-              value[propName] = prop.value.value;
-            }
-          });
+      if (t.isJSXSpreadAttribute(attribute)) {
+        return;
+      } else {
+        const key = resolver(attribute.name.name);
+        let value;
+        if (attribute.value.type === "JSXExpressionContainer") {
+          if (attribute.value.expression.type === "ObjectExpression") {
+            value = {};
+            attribute.value.expression.properties.forEach((prop) => {
+              const propName = prop.key.type === "StringLiteral" ? prop.key.value : prop.key.name;
+              if (prop.value.value !== void 0) {
+                value[propName] = prop.value.value;
+              }
+            });
+          } else {
+            value = attribute.value.expression.value;
+          }
+        } else if (attribute.value.type === "JSXElement") {
+          value = attributesToObject(attribute.value.openingElement.attributes);
         } else {
-          value = attribute.value.expression.value;
+          value = attribute.value.value;
+        }
+        if (value !== void 0) {
+          obj[key] = value;
         }
-      } else if (attribute.value.type === "JSXElement") {
-        value = attributesToObject(attribute.value.openingElement.attributes);
-      } else {
-        value = attribute.value.value;
-      }
-      if (value !== void 0) {
-        obj[key] = value;
       }
     });
     return obj;
   }
   function addRnuStyleIdInStyleArrayOfCOmponent(jsxAttrArray, styleId2) {
-    let styleAttr = jsxAttrArray.find((attr) => attr.name.name === "style");
+    let styleAttr = jsxAttrArray.find((attr) => attr.name?.name === "style");
     if (styleAttr) {
       if (styleAttr.value.expression.type !== "ArrayExpression") {
         styleAttr.value.expression = t.arrayExpression([

diff --git a/babel-plugin/package.json b/babel-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-react-native-ustyle",
-  "version": "0.7.2",
+  "version": "1.0.0",
   "description": "Official support babel plugin for react-native-ustyle",
   "main": "out.js",
   "module": "out.js",