feat: convert jsx attributes and object properties in replacements

Author: jedwards1211

src/convertReplacement/convertJSXAttributeReplacement.ts

@@ -0,0 +1,19 @@
+import { Node } from '../types'
+import * as t from '@babel/types'
+import convertToJSXIdentifierNameExpressionPair from './convertToJSXIdentifierNameExpressionPair'
+import { ReplacementConverter } from '.'
+
+export default function convertJSXAttributeReplacement(): ReplacementConverter {
+  const convert = (node: Node): Node | Node[] => {
+    const converted = convertToJSXIdentifierNameExpressionPair(node)
+    if (converted) {
+      const [name, value] = converted
+      return t.jsxAttribute(
+        t.jsxIdentifier(name),
+        t.jsxExpressionContainer(value as any)
+      )
+    }
+    return node
+  }
+  return convert
+}

src/convertReplacement/convertToJSXIdentifierNameExpressionPair.ts

@@ -23,7 +23,9 @@ export default function convertToJSXIdentifierNameExpressionPair(
     }
     case 'JSXAttribute': {
       const key = convertToJSXIdentifierName(node.name)
-      const value = convertToExpression(node.value || node.name)
+      const value = node.value
+        ? convertToExpression(node.value)
+        : t.booleanLiteral(true)
       if (key && value) return [key, value]
       break
     }

src/convertReplacement/index.ts

@@ -1,5 +1,6 @@
 import { Node, NodePath } from '../types'
 import convertJSXChildReplacement from './convertJSXChildReplacement'
+import convertJSXAttributeReplacement from './convertJSXAttributeReplacement'
 import convertJSXAttributeValueReplacement from './convertJSXAttributeValueReplacement'
 import TypeParameter from './convertTypeParameterReplacement'
 import TSTypeParameter from './convertTSTypeParameterReplacement'
@@ -25,6 +26,7 @@ const nodeConverters: Record<string, (path: NodePath) => ReplacementConverter> =
     TSTypeParameter,
     ImportSpecifier: convertImportSpecifierReplacement,
     ImportDefaultSpecifier: convertImportSpecifierReplacement,
+    JSXAttribute: convertJSXAttributeReplacement,
   }
 
 export default function createReplacementConverter(

test/findReplace/propsJsxAttributesConversion.ts

@@ -0,0 +1,40 @@
+import { findReplaceTestcase } from '../findReplaceTestcase'
+import dedent from 'dedent-js'
+
+findReplaceTestcase({
+  file: __filename,
+  input: dedent`
+    expect(
+      new ReduxFormMaterialUICheckbox({
+        input: {
+          name: 'myCheckbox',
+          onChange: noop,
+          value: true,
+        },
+      }).render()
+    ).toEqualJSX(<Checkbox name="myCheckbox" checked onChange={noop} />)
+  `,
+  find: dedent`
+  expect(new $X({$$props}).render()).toEqualJSX(<$C $$props2 />)  
+  `,
+  replace: dedent`
+  expect(create(<$X $$props />).root.findByType($C).props).to.containSubset({ $$props2 }) 
+  `,
+  expectedReplace: dedent`
+    expect(
+      create(
+        <ReduxFormMaterialUICheckbox
+          input={{
+            name: 'myCheckbox',
+            onChange: noop,
+            value: true,
+          }}
+        />
+      ).root.findByType(Checkbox).props
+    ).to.containSubset({
+      name: "myCheckbox",
+      checked: true,
+      onChange: noop,
+    })
+  `,
+})