feat: add prop codemod - FE-3330

bin/cli.js

@@ -123,6 +123,13 @@ function Cli() {
     )
     .action((target, command) => runTransform(target, command, program));
 
+  program
+    .command("add-prop <target> <component> <prop> <value>")
+    .description("adds a new prop and value to the specified component")
+    .action((target, component, prop, value, command) =>
+      runTransform(target, command, program, { component, prop, value })
+    );
+
   program
     .command("rename-prop <target> <component> <old> <replacement>")
     .description(

transforms/add-prop/README.md

@@ -0,0 +1,46 @@
+# add-prop
+
+This universal codemod provides possibility to add any prop to any component.
+
+```diff
+- <Component />
++ <Component newProp="info" />
+
+```
+## Usage
+
+`npx carbon-codemod add-prop <target> <component-import-path> <prop> <value>`
+
+### Examples
+
+### String
+`npx carbon-codemod add-prop src carbon-react/lib/components/button ml "16px"`
+
+```diff
+- <Button>Button</Button>
++ <Button ml="16px">Button</Button>
+```
+
+### Number
+`npx carbon-codemod add-prop src carbon-react/lib/components/button ml 2`
+
+```diff
+- <Button>Button</Button>
++ <Button ml={2}>Button</Button>
+```
+
+### Boolean - True
+`npx carbon-codemod add-prop src carbon-react/lib/components/button hasBorder true`
+
+```diff
+- <Button>Button</Button>
++ <Button hasBorder>Button</Button>
+```
+
+### Boolean - False
+`npx carbon-codemod add-prop src carbon-react/lib/components/button hasBorder false`
+
+```diff
+- <Button>Button</Button>
++ <Button hasBorder={false}>Button</Button>
+```

transforms/add-prop/__testfixtures__/BooleanFalse.input.js

@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asFalse = () => <Button />

transforms/add-prop/__testfixtures__/BooleanFalse.output.js

@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asFalse = () => <Button hasBorder={false} />

transforms/add-prop/__testfixtures__/BooleanTrue.input.js

@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asTrue = () => <Button />

transforms/add-prop/__testfixtures__/BooleanTrue.output.js

@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asTrue = () => <Button hasBorder />

transforms/add-prop/__testfixtures__/NoImport.input.js

@@ -0,0 +1,3 @@
+// Wrong Import
+import Tile from "carbon-react/lib/components/NotTile";
+export default () => <Tile />;

transforms/add-prop/__testfixtures__/NoTransformRequired.input.js

@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const App = () => <Button ml="2" />

transforms/add-prop/__testfixtures__/Node.input.js

@@ -0,0 +1,4 @@
+import Button from "carbon-react/lib/components/button";
+import Link from "carbon-react/lib/components/link";
+
+export const asNode = () => <Button hasLink={<Link />} />

transforms/add-prop/__testfixtures__/Number.input.js

@@ -0,0 +1,4 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asNumber = () => <Button />
+

transforms/add-prop/__testfixtures__/Number.output.js

@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asNumber = () => <Button ml={2} />

transforms/add-prop/__testfixtures__/Object.input.js

@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asObject = () => <Button info={{prop: 1, prop: 2, prop:3}} />

transforms/add-prop/__testfixtures__/String.input.js

@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asString = () => <Button />

transforms/add-prop/__testfixtures__/String.output.js

@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asString = () => <Button ml="16px" />

transforms/add-prop/__tests__/add-prop.js

@@ -0,0 +1,89 @@
+import defineTest from "../../../defineTest";
+
+defineTest(
+  __dirname,
+  "add-prop",
+  {
+    component: "carbon-react/lib/components/button",
+    prop: "ml",
+    value: 2,
+  },
+  "Number"
+);
+
+defineTest(
+  __dirname,
+  "add-prop",
+  {
+    component: "carbon-react/lib/components/button",
+    prop: "ml",
+    value: "16px",
+  },
+  "String"
+);
+
+defineTest(
+  __dirname,
+  "add-prop",
+  {
+    component: "carbon-react/lib/components/button",
+    prop: "hasBorder",
+    value: true,
+  },
+  "BooleanTrue"
+);
+
+defineTest(
+  __dirname,
+  "add-prop",
+  {
+    component: "carbon-react/lib/components/button",
+    prop: "hasBorder",
+    value: false,
+  },
+  "BooleanFalse"
+);
+
+defineTest(
+  __dirname,
+  "add-prop",
+  {
+    component: "carbon-react/lib/components/component",
+    prop: "newProp",
+    value: "value",
+  },
+  "NoImport"
+);
+
+defineTest(
+  __dirname,
+  "add-prop",
+  {
+    component: "carbon-react/lib/components/button",
+    prop: "ml",
+    value: "2",
+  },
+  "NoTransformRequired"
+);
+
+defineTest(
+  __dirname,
+  "add-prop",
+  {
+    component: "carbon-react/lib/components/button",
+    prop: "hasLink",
+    value: "test foo bar",
+  },
+  "Node"
+);
+
+defineTest(
+  __dirname,
+  "add-prop",
+  {
+    component: "carbon-react/lib/components/button",
+    prop: "info",
+    value: "test foo bar",
+  },
+  "Object"
+);

transforms/add-prop/add-prop.js

@@ -0,0 +1,27 @@
+/*
+ * Add a prop to a component <Component /> to <Component prop=value/>
+ */
+import { addAttribute } from "../builder";
+import registerMethods from "../registerMethods";
+
+const transformer = (fileInfo, api, options) => {
+  const j = api.jscodeshift;
+  registerMethods(j);
+  const root = j(fileInfo.source);
+
+  const { component, prop, value } = options;
+
+  const result = addAttribute(component, prop, value)(
+    fileInfo,
+    api,
+    options,
+    j,
+    root
+  );
+
+  if (result) {
+    return root.toSource();
+  }
+};
+
+module.exports = transformer;

transforms/builder/addAttribute.js

@@ -0,0 +1,57 @@
+const addAttribute = (path, attribute, value) => (
+  fileInfo,
+  api,
+  options,
+  j,
+  root
+) => {
+  const components = root.findJSXElementsByImport(path);
+
+  // If the component is not imported, skip this file
+  if (components.size() === 0) {
+    return;
+  }
+  if (!components) {
+    return false;
+  }
+
+  let didUpdate = false;
+  components.forEach((component) => {
+    if (
+      !j(component.value.openingElement.attributes)
+        .find(j.JSXIdentifier, { name: attribute })
+        .size()
+    ) {
+      if (typeof value === "string") {
+        component.value.openingElement.attributes.push(
+          j.jsxAttribute(j.jsxIdentifier(attribute), j.literal(value))
+        );
+        didUpdate = true;
+      }
+
+      if (
+        typeof value === "number" ||
+        (typeof value === "boolean" && value === false)
+      ) {
+        component.value.openingElement.attributes.push(
+          j.jsxAttribute(
+            j.jsxIdentifier(attribute),
+            j.jsxExpressionContainer(j.literal(value))
+          )
+        );
+        didUpdate = true;
+      }
+
+      if (typeof value === "boolean" && value === true) {
+        component.value.openingElement.attributes.push(
+          j.jsxAttribute(j.jsxIdentifier(attribute))
+        );
+        didUpdate = true;
+      }
+    }
+  });
+
+  return didUpdate;
+};
+
+export default addAttribute;

transforms/builder/index.js

@@ -1,11 +1,13 @@
 import run from "./run";
 import renameAttribute from "./renameAttribute";
 import removeAttribute from "./removeAttribute";
+import addAttribute from "./addAttribute";
 import replaceAttributeValue from "./replaceAttributeValue";
 
 module.exports = {
   run,
   renameAttribute,
   removeAttribute,
+  addAttribute,
   replaceAttributeValue,
 };

transforms/registerMethods.js

@@ -38,14 +38,23 @@ export default once((j) => {
         "findJSXElementsByImport(...) needs a name to look for"
       );
 
-      return this.find(j.ImportDeclaration, {
-        source: { value: importName },
-      })
+      let root = this;
+
+      // We want to find the ImportDeclaration from the root
+      while (root._parent) {
+        root = root._parent;
+      }
+
+      return root
+        .find(j.ImportDeclaration, {
+          source: { value: importName },
+        })
         .find(j.ImportDefaultSpecifier)
         .map((path) => {
           const id = path.node.local.name;
           if (id) {
-            return j([path]).closestScope().findJSXElements(id).paths();
+            // We want to find the JSXElements that are descendants of the current path
+            return this.findJSXElements(id).paths();
           }
         });
     },