add react-19-codemods

Author: hbjORbj

README.md

@@ -11,9 +11,47 @@ APIs.
    * use the `--dry` option for a dry-run and use `--print` to print the output for comparison
 
 This will start an interactive wizard, and then run the specified transform.
+#### Running with `codemod` CLI
+`npx codemod <transform> --target <path> [...options]`
+   * `transform` - name of transform, see available transforms below.
+   * `path` - directory to transform
+
+Check [codemod docs](https://docs.codemod.com/deploying-codemods/cli]) for the full list of available commands.
 
 ### Included Transforms
 
+#### `remove-context-provider`
+
+Converts `Context.Provider` JSX opening and closing elements into `Context`.
+
+```sh
+npx react-codemod remove-context-provider <path>
+```
+
+#### `remove-forward-ref`
+
+Removes usages of `forwardRef`.
+
+```sh
+npx react-codemod remove-forward-ref <path>
+```
+
+#### `remove-memoization-hooks`
+
+Removes usages of `useCallback`, `useMemo` and `memo`.
+
+```sh
+npx react-codemod remove-memoization-hooks <path>
+```
+
+#### `use-context-hook`
+
+Replaces usages of `React.useContext(...)` with `React.use(...)`.
+
+```sh
+npx react-codemod use-context-hook <path>
+```
+
 #### `create-element-to-jsx`
 
 Converts calls to `React.createElement` into JSX elements.

bin/__tests__/react-codemod-test.js

@@ -96,20 +96,20 @@ describe('runTransform', () => {
     fs.lstatSync(jscodeshiftExecutable);
   });
 
-  it('runs jscodeshift for the given transformer', () => {
+  it('runs jscodeshift for the given existing transformer', () => {
     execaReturnValue = { error: null };
     console.log = jest.fn();
     runTransform({
       files: 'src',
       flags: {},
       parser: 'flow',
-      transformer: 'rename-unsafe-xyz'
+      transformer: 'rename-unsafe-lifecycles'
     });
     expect(console.log).toBeCalledWith(
       // eslint-disable-next-line max-len
       `Executing command: jscodeshift --verbose=2 --ignore-pattern=**/node_modules/** --parser flow --extensions=jsx,js --transform ${path.join(
         transformerDirectory,
-        'rename-unsafe-xyz.js'
+        'rename-unsafe-lifecycles.js'
       )} src`
     );
   });
@@ -184,4 +184,21 @@ describe('runTransform', () => {
       });
     }).toThrowError(transformerError);
   });
+
+  it('should correctly resolve typescript transform files', () => {
+    execaReturnValue = { error: null };
+    console.log = jest.fn();
+    runTransform({
+      files: 'src',
+      flags: {}, 
+      parser: 'flow',
+      transformer: 'remove-context-provider'
+    });
+    expect(console.log).toBeCalledWith(
+      `Executing command: jscodeshift --verbose=2 --ignore-pattern=**/node_modules/** --parser flow --extensions=jsx,js --transform ${path.join(
+        transformerDirectory,
+        'remove-context-provider.ts'
+      )} src`
+    );
+  });
 });

bin/cli.js

@@ -49,8 +49,13 @@ function checkGitStatus(force) {
   }
 }
 
+function resolveTransformer(transformerDirectory, transformer) {
+  return globby.sync(`${transformerDirectory}/${transformer}.{js,ts}`)[0] || null;
+}
+
 function runTransform({ files, flags, parser, transformer, answers }) {
-  const transformerPath = path.join(transformerDirectory, `${transformer}.js`);
+
+  const transformerPath = resolveTransformer(transformerDirectory, transformer);
 
   let args = [];
 
@@ -191,7 +196,27 @@ const TRANSFORMER_INQUIRER_CHOICES = [
   {
     name: 'update-react-imports: Removes redundant import statements from explicitly importing React to compile JSX and converts default imports to destructured named imports',
     value: 'update-react-imports',
-  }
+  },
+  {
+    name:
+      'remove-context-provider: Replaces Context.Provider with Context',
+    value: 'remove-context-provider'
+  },
+  {
+    name:
+      'remove-forward-ref: Removes forwardRef form functional components and passes ref as prop',
+    value: 'remove-forward-ref'
+  },
+  {
+    name:
+      'remove-memoization-hooks: Removes memo, useCallback, useMemo',
+    value: 'remove-memoization-hooks'
+  },
+  {
+    name:
+      'use-context-hook: Replaces useContext with React.use',
+    value: 'use-context-hook'
+  },
 ];
 
 const PARSER_INQUIRER_CHOICES = [

package.json

@@ -28,18 +28,25 @@
     "roots": [
       "transforms",
       "bin"
-    ]
+    ],
+    "transform": {
+      "^.+\\.jsx?$": "babel-jest", 
+      "^.+\\.tsx?$": "ts-jest"
+    }
   },
   "devDependencies": {
     "@babel/core": "^7.6.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
     "@babel/preset-env": "^7.6.3",
+    "@types/jest": "^24.9.0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
     "eslint": "^6.6.0",
     "eslint-plugin-react": "^7.16.0",
     "fbjs-scripts": "^0.7.1",
-    "jest": "^24.9.0"
+    "jest": "^24.9.0",
+    "ts-jest": "^24.3.0",
+    "typescript": "4.8.4"
   },
   "resolutions": {
     "colors": "1.3.3"

transforms/__testfixtures__/remove-context-provider/no-provider.input.js

@@ -0,0 +1,9 @@
+function App() {
+  const [theme, setTheme] = useState('light');
+
+  return (
+    <Context value={theme}>
+    <Page />
+    </Context>
+  );
+}

transforms/__testfixtures__/remove-context-provider/no-provider.output.js

@@ -0,0 +1,9 @@
+function App({ url }: { url: string }) {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+
+  return (
+    <Context value={theme}>
+      <Page />
+    </Context>
+  );
+}

transforms/__testfixtures__/remove-context-provider/typescript/no-provider.input.js

@@ -0,0 +1,9 @@
+function App({ url }: { url: string }) {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+
+  return (
+    <Context.Provider value={theme}>
+      <Page />
+    </Context.Provider>
+  );
+}

transforms/__testfixtures__/remove-context-provider/typescript/no-provider.output.js

@@ -0,0 +1,9 @@
+function App({ url }: { url: string }) {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+
+  return (
+    <Context value={theme}>
+      <Page />
+    </Context>
+  );
+}

transforms/__testfixtures__/remove-context-provider/typescript/with-provider-2.input.js

@@ -0,0 +1,9 @@
+function App({ url }: { url: string }) {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+
+  return (
+    <ThemeContext.Provider value={theme}>
+      <Page />
+    </ThemeContext.Provider>
+  );
+}

transforms/__testfixtures__/remove-context-provider/typescript/with-provider-2.output.js

@@ -0,0 +1,9 @@
+function App({ url }: { url: string }) {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+
+  return (
+    <ThemeContext value={theme}>
+      <Page />
+    </ThemeContext>
+  );
+}

transforms/__testfixtures__/remove-context-provider/typescript/with-provider.input.js

@@ -0,0 +1,9 @@
+function App() {
+  const [theme, setTheme] = useState('light');
+
+  return (
+    <Context.Provider value={theme}>
+    <Page />
+    </Context.Provider>
+  );
+}

transforms/__testfixtures__/remove-context-provider/typescript/with-provider.output.js

@@ -0,0 +1,9 @@
+function App() {
+  const [theme, setTheme] = useState('light');
+
+  return (
+    <Context value={theme}>
+    <Page />
+    </Context>
+  );
+}

transforms/__testfixtures__/remove-context-provider/with-provider-2.input.js

@@ -0,0 +1,9 @@
+function App() {
+  const [theme, setTheme] = useState('light');
+
+  return (
+    <ThemeContext.Provider value={theme}>
+      <Page />
+    </ThemeContext.Provider>
+  );
+}

transforms/__testfixtures__/remove-context-provider/with-provider-2.output.js

@@ -0,0 +1,9 @@
+function App() {
+  const [theme, setTheme] = useState('light');
+
+  return (
+    <ThemeContext value={theme}>
+      <Page />
+    </ThemeContext>
+  );
+}

transforms/__testfixtures__/remove-context-provider/with-provider.input.js

@@ -0,0 +1,5 @@
+import { forwardRef } from 'react';
+
+const MyInput = forwardRef((props, ref) => {
+  return null;
+});

transforms/__testfixtures__/remove-context-provider/with-provider.output.js

@@ -0,0 +1,8 @@
+const MyInput = (
+  {
+    ref,
+    ...props
+  }
+) => {
+  return null;
+};

transforms/__testfixtures__/remove-forward-ref/arrow-function-expression.input.js

@@ -0,0 +1,5 @@
+import { forwardRef, useState } from 'react';
+
+const MyInput = forwardRef(function MyInput(props, ref) {
+  return null;
+});

transforms/__testfixtures__/remove-forward-ref/arrow-function-expression.output.js

@@ -0,0 +1,10 @@
+import { useState } from 'react';
+
+const MyInput = function MyInput(
+  {
+    ref,
+    ...props
+  }
+) {
+  return null;
+};

transforms/__testfixtures__/remove-forward-ref/forward-ref-import-2.input.js

@@ -0,0 +1,5 @@
+import { forwardRef } from 'react';
+
+const MyInput = forwardRef(function MyInput(props, ref) {
+  return null;
+});

transforms/__testfixtures__/remove-forward-ref/forward-ref-import-2.output.js

@@ -0,0 +1,8 @@
+const MyInput = function MyInput(
+  {
+    ref,
+    ...props
+  }
+) {
+  return null;
+};

transforms/__testfixtures__/remove-forward-ref/forward-ref-import.input.js

@@ -0,0 +1,5 @@
+import { forwardRef } from 'react';
+
+const MyInput = forwardRef(function A(props, ref) {
+  return null;
+});

transforms/__testfixtures__/remove-forward-ref/forward-ref-import.output.js

@@ -0,0 +1,8 @@
+const MyInput = function A(
+  {
+    ref,
+    ...props
+  }
+) {
+  return null;
+};

transforms/__testfixtures__/remove-forward-ref/function-expression.input.js

@@ -0,0 +1,5 @@
+import { forwardRef } from 'react';
+
+const MyInput = forwardRef(function MyInput(props, ref) {
+  return <input ref={ref} onChange={props.onChange} />
+});

transforms/__testfixtures__/remove-forward-ref/function-expression.output.js

@@ -0,0 +1,8 @@
+const MyInput = function MyInput(
+  {
+    ref,
+    ...props
+  }
+) {
+  return <input ref={ref} onChange={props.onChange} />
+};

transforms/__testfixtures__/remove-forward-ref/props-identifier.input.js

@@ -0,0 +1,5 @@
+import { forwardRef } from 'react';
+
+const MyInput = forwardRef(function MyInput({ onChange }, ref) {
+  return <input ref={ref} onChange={onChange} />
+});

transforms/__testfixtures__/remove-forward-ref/props-identifier.output.js

@@ -0,0 +1,8 @@
+const MyInput = function MyInput(
+  {
+    ref,
+    onChange
+  }
+) {
+  return <input ref={ref} onChange={onChange} />
+};

transforms/__testfixtures__/remove-forward-ref/props-object-pattern.input.js

@@ -0,0 +1,8 @@
+import { forwardRef } from 'react';
+
+const MyComponent = forwardRef(function Component(
+  myProps: Props,
+  myRef: React.ForwardedRef<HTMLButtonElement>
+) {
+  return null;
+});