Merge pull request #691 from rofrischmann/fix/codemods

Fix FelaComponent codemod bugs

Author: robinweser

CHANGELOG.md

@@ -5,6 +5,12 @@ If you're searching for older logs, please check the [old changelog](https://git
 
 ## 10.0
 
+### 10.2.3
+| Package | Changes |
+| --- | --- |
+| fela-codemods | ([#691](https://github.com/rofrischmann/fela/pull/691)) Fix `render` -> `as` conversion edge cases. Don't convert args of callbacks _inside_ an inline `style` function, only the args to the `style` callback itself. |
+
+
 ### 10.2.2
 | Package | Changes |
 | --- | --- |

packages/fela-codemods/src/v10/FelaComponent.js

@@ -14,27 +14,28 @@ export default function transformer(file, api) {
       .find(j.JSXElement)
       .forEach(path => {
         if (path.node.openingElement.name.name === importName) {
-          const styleProp = path.node.openingElement.attributes.find(
+          const openingElement = path.node.openingElement
+
+          const styleProp = openingElement.attributes.find(
             prop => prop.name.name === 'style'
           )
-
-          const ruleProp = path.node.openingElement.attributes.find(
+          const ruleProp = openingElement.attributes.find(
             prop => prop.name.name === 'rule'
           )
-
-          const renderProp = path.node.openingElement.attributes.find(
+          const renderProp = openingElement.attributes.find(
             prop => prop.name.name === 'render'
           )
 
           // handle render/as transformation to children/as
           if (renderProp) {
-            if (
-              renderProp.value.type === 'Literal' ||
-              (renderProp.value.type === 'JSXExpressionContainer' &&
-                renderProp.value.expression.type === 'Literal')
-            ) {
-              renderProp.name.name = 'as'
-            } else {
+            const hasChildren =
+              path.node.children.length > 0 ||
+              !!openingElement.attributes.find(
+                prop => prop.name.name === 'children'
+              )
+
+            if (hasChildren) renderProp.name.name = 'as'
+            else {
               j(path).replaceWith(
                 j.jsxElement(
                   j.jsxOpeningElement(
@@ -54,27 +55,55 @@ export default function transformer(file, api) {
 
           // replace inline style expression from theme
           if (styleProp) {
-            j(styleProp)
-              .find(j.ArrowFunctionExpression)
-              .forEach(stylePath => {
-                const param = stylePath.node.params[0]
+            const { value } = styleProp
+            if (value && value.expression.type === 'Identifier') {
+              console.warn(
+                `The style value in line ${
+                  value.expression.loc.start.line
+                } is a reference to an external variable. ` +
+                  'We have no way to check and convert it to the new syntax. Please do so manually'
+              )
+            }
+            const styleIsArrowFn =
+              value && value.expression.type === 'ArrowFunctionExpression'
+            const styleIsFn =
+              value && value.expression.type === 'FunctionExpression'
+            const styleTransformer = (stylePath, i) => {
+              const param = stylePath.node.params[0]
 
-                if (param.type === 'Identifier') {
-                  j(stylePath).replaceWith(
-                    j.arrowFunctionExpression(
-                      [
-                        j.objectPattern([
-                          j.objectProperty(param, param, false, true),
-                        ]),
-                      ],
-                      stylePath.node.body
-                    )
+              if (param.type === 'Identifier' && i === 0) {
+                j(stylePath).replaceWith(
+                  j.arrowFunctionExpression(
+                    [
+                      j.objectPattern([
+                        j.objectProperty(param, param, false, true),
+                      ]),
+                    ],
+                    stylePath.node.body
                   )
+                )
+
+                // make property truly shorthand
+                stylePath.node.params[0].properties[0].shorthand = true
+              }
+            }
+            if (styleIsArrowFn) {
+              j(styleProp)
+                .find(j.ArrowFunctionExpression)
+                .forEach(styleTransformer)
+            }
 
-                  // make property truly shorthand
-                  stylePath.node.params[0].properties[0].shorthand = true
-                }
-              })
+            if (styleIsFn) {
+              // TODO: Don't convert to arrow function and remove the warning
+              console.warn(
+                `Converting a function expression style function into an arrow function in line ${
+                  value.expression.loc.start.line
+                }`
+              )
+              j(styleProp)
+                .find(j.FunctionExpression)
+                .forEach(styleTransformer)
+            }
           }
 
           // rename rule to style