react codemod package

Author: danieldelcore

community/react/add-react-import/README.md

@@ -0,0 +1,12 @@
+# add-react-import
+
+Import React if it is missing from a file which uses JSX.
+
+```jsx
+/* INPUT */
+export const Component = () => <div />
+
+/* OUTPUT */
+import React from "react";
+export const Component = () => <div />
+```

community/react/add-react-import/transform.spec.ts

@@ -0,0 +1,17 @@
+import { applyTransform } from '@codeshift/test-utils';
+import * as transformer from './transform';
+
+describe('react@1.0.0 transform', () => {
+  it('should transform correctly', () => {
+    const result = applyTransform(
+      transformer,
+      `
+        import foo from '<% packageName %>';
+        console.log(foo);
+      `,
+      { parser: 'tsx' },
+    );
+
+    expect(result).toMatchInlineSnapshot();
+  });
+});

community/react/add-react-import/transform.ts

@@ -0,0 +1,41 @@
+import { API, FileInfo, Options } from 'jscodeshift';
+
+export default function transformer(
+  file: FileInfo,
+  { jscodeshift: j }: API,
+  options: Options,
+) {
+  const source = j(file.source);
+  const containsJsx = source.find(j.JSXIdentifier).length > 0;
+
+  const containsReactPackageImport =
+    source
+      .find(j.ImportDeclaration)
+      .filter(
+        importDeclaration => importDeclaration.node.source.value === 'react',
+      ).length > 0;
+
+  const containsReactDefaultImport =
+    source
+      .find(j.ImportDefaultSpecifier)
+      .filter(
+        importDefaultSpecifier =>
+          importDefaultSpecifier.node.local!.name === 'React',
+      ).length > 0;
+
+  if (
+    containsJsx &&
+    !(containsReactPackageImport && containsReactDefaultImport)
+  ) {
+    source
+      .get()
+      .node.program.body.unshift(
+        j.importDeclaration(
+          [j.importDefaultSpecifier(j.identifier('React'))],
+          j.literal('react'),
+        ),
+      );
+  }
+
+  return source.toSource(options.printOptions);
+}

community/react/codeshift.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  maintainers: [],
+  targets: ['react', 'react-dom'],
+  description: 'Codemods for react',
+  transforms: {},
+  presets: {
+    'add-react-import': require.resolve('./add-react-import/transform'),
+    'remove-default-props': require.resolve('./remove-default-props/transform'),
+    'remove-prop-types': require.resolve('./remove-prop-types/transform'),
+    'sort-jsx-props': require.resolve('./sort-jsx-props/transform'),
+    'use-string-literal-props': require.resolve(
+      './use-string-literal-props/transform',
+    ),
+  },
+};

community/react/remove-default-props/README.md

@@ -0,0 +1,15 @@
+# remove-default-props
+
+Remove use of React defaultProps.
+
+```jsx
+/* INPUT */
+import React from 'react'
+
+export const Greet = ({ name }) => <span>Hi {name}</span>
+Greet.defaultProps = { name: 'Stranger' }
+/* OUTPUT */
+import React from 'react'
+
+export const Greet = ({ name }) => <span>Hi {name}</span>
+```

community/react/remove-default-props/transform.spec.ts

@@ -0,0 +1,17 @@
+import { applyTransform } from '@codeshift/test-utils';
+import * as transformer from './transform';
+
+describe('react@1.0.0 transform', () => {
+  it('should transform correctly', () => {
+    const result = applyTransform(
+      transformer,
+      `
+        import foo from '<% packageName %>';
+        console.log(foo);
+      `,
+      { parser: 'tsx' },
+    );
+
+    expect(result).toMatchInlineSnapshot();
+  });
+});

community/react/remove-default-props/transform.ts

@@ -0,0 +1,19 @@
+import { API, FileInfo, Options } from 'jscodeshift';
+
+export default function transformer(
+  file: FileInfo,
+  { jscodeshift: j }: API,
+  options: Options,
+) {
+  const removePath = path => j(path).remove();
+  const isAssigningDefaultProps = e =>
+    e.node.left &&
+    e.node.left.property &&
+    e.node.left.property.name === 'defaultProps';
+
+  return j(file.source)
+    .find(j.AssignmentExpression)
+    .filter(isAssigningDefaultProps)
+    .forEach(removePath)
+    .toSource(options.printOptions);
+}

community/react/remove-prop-types/README.md

@@ -0,0 +1,16 @@
+# remove-prop-types
+
+Remove use of React PropTypes.
+
+```jsx
+/* INPUT */
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export const Greet = ({ name }) => <span>Hi {name}</span>
+Greet.propTypes = { name: PropTypes.string }
+/* OUTPUT */
+import React from 'react'
+
+export const Greet = ({ name }) => <span>Hi {name}</span>
+```

community/react/remove-prop-types/transform.spec.ts

@@ -0,0 +1,17 @@
+import { applyTransform } from '@codeshift/test-utils';
+import * as transformer from './transform';
+
+describe('react@1.0.0 transform', () => {
+  it('should transform correctly', () => {
+    const result = applyTransform(
+      transformer,
+      `
+        import foo from '<% packageName %>';
+        console.log(foo);
+      `,
+      { parser: 'tsx' },
+    );
+
+    expect(result).toMatchInlineSnapshot();
+  });
+});

community/react/remove-prop-types/transform.ts

@@ -0,0 +1,74 @@
+import { API, FileInfo, Options } from 'jscodeshift';
+
+export default function transformer(
+  file: FileInfo,
+  { jscodeshift: j }: API,
+  options: Options,
+) {
+  const removePath = path => j(path).remove();
+
+  // Obj.proptypes = { ... };
+  const isAssigningPropTypes = e =>
+    e.node.left &&
+    e.node.left.property &&
+    e.node.left.property.name === 'propTypes';
+
+  // import PropTypes from 'prop-types';
+  const isImportingFromPropTypes = e =>
+    e.node.source && e.node.source.value === 'prop-types';
+
+  // require('prop-types');
+  const isRequiringFromPropTypes = e =>
+    e.node.init &&
+    e.node.init.callee &&
+    e.node.init.callee.name === 'require' &&
+    e.node.init.arguments[0].value === 'prop-types';
+
+  // _defineProperty(obj, 'propTypes', { ... });
+  const isDefiningPropType = e =>
+    e.node.expression &&
+    e.node.expression.callee &&
+    e.node.expression.callee.name === '_defineProperty' &&
+    e.node.expression.arguments &&
+    e.node.expression.arguments[1] &&
+    e.node.expression.arguments[1].original &&
+    e.node.expression.arguments[1].original.value === 'propTypes';
+
+  // { propTypes: { foo: PropTypes.string } };
+  const isObjectProperty = e =>
+    e.node.key &&
+    e.node.key.name === 'propTypes' &&
+    e.node.value &&
+    e.node.value.type === 'ObjectExpression';
+
+  const withoutAssignment = j(file.source)
+    .find(j.AssignmentExpression)
+    .filter(isAssigningPropTypes)
+    .forEach(removePath)
+    .toSource();
+
+  const withoutImport = j(withoutAssignment)
+    .find(j.ImportDeclaration)
+    .filter(isImportingFromPropTypes)
+    .forEach(removePath)
+    .toSource();
+
+  const withoutRequire = j(withoutImport)
+    .find(j.VariableDeclarator)
+    .filter(isRequiringFromPropTypes)
+    .forEach(removePath)
+    .toSource();
+
+  const withoutDefineProperty = j(withoutRequire)
+    .find(j.ExpressionStatement)
+    .filter(isDefiningPropType)
+    .forEach(removePath)
+    .toSource();
+
+  const withoutObjectProperty = j(withoutDefineProperty)
+    .find(j.Property)
+    .filter(isObjectProperty)
+    .forEach(removePath);
+
+  return withoutObjectProperty.toSource(options.printOptions);
+}