feat: Add codemod to transform string refs to arrow-functions

Author: eps1lon

README.md

@@ -143,6 +143,76 @@ guide](https://github.com/airbnb/javascript/blob/7684892951ef663e1c4e62ad57d662e
 npx react-codemod sort-comp <path>
 ```
 
+#### `string-refs`
+
+WARNING: Only apply this codemod if you've fixed all warnings like this:
+
+```
+Warning: Component "div" contains the string ref "inner". Support for string refs will be removed in a future major release. We recommend using useRef() or createRef() instead. 
+```
+
+This codemod will convert deprecated string refs to callback refs.
+
+Input:
+
+```jsx
+import * as React from "react";
+
+class ParentComponent extends React.Component {
+  render() {
+    return <div ref="refComponent" />;
+  }
+}
+```
+
+Output:
+
+```jsx
+import * as React from "react";
+
+class ParentComponent extends React.Component {
+  render() {
+    return (
+      <div
+        ref={(current) => {
+          this.refs["refComponent"] = current;
+        }}
+      />
+    );
+  }
+}
+```
+
+Note that this only works for string literals.
+Referring to the ref with a variable will not trigger the transform:
+Input:
+
+```jsx
+import * as React from "react";
+
+const refName = "refComponent";
+
+class ParentComponent extends React.Component {
+  render() {
+    return <div ref={refName} />;
+  }
+}
+```
+
+Output (nothing changed):
+
+```jsx
+import * as React from "react";
+
+const refName = "refComponent";
+
+class ParentComponent extends React.Component {
+  render() {
+    return <div ref={refName} />;
+  }
+}
+```
+
 #### `update-react-imports`
 
 [As of Babel 7.9.0](https://babeljs.io/blog/2020/03/16/7.9.0#a-new-jsx-transform-11154-https-githubcom-babel-babel-pull-11154), when using `runtime: automatic` in `@babel/preset-react` or `@babel/plugin-transform-react-jsx`, you will not need to explicitly import React for compiling jsx. This codemod removes the redundant import statements. It also converts default imports (`import React from 'react'`) to named imports (e.g. `import { useState } from 'react'`).

bin/cli.js

@@ -188,6 +188,11 @@ const TRANSFORMER_INQUIRER_CHOICES = [
       'Reorders React component methods to match the ESLint react/sort-comp rule.',
     value: 'sort-comp'
   },
+  {
+    name:
+      'string-refs: Converts deprecated string refs to callback refs.',
+    value: 'string-refs'
+  },
   {
     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',

transforms/__testfixtures__/string-refs/literal-with-owner.input.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+class ParentComponent extends React.Component {
+  render() {
+    return (
+      <div ref="P" id="P">
+        <div ref="P_P1" id="P_P1">
+          <span ref="P_P1_C1" id="P_P1_C1" />
+          <span ref="P_P1_C2" id="P_P1_C2" />
+        </div>
+        <div ref="P_OneOff" id="P_OneOff" />
+      </div>
+    );
+  }
+}

transforms/__testfixtures__/string-refs/literal-with-owner.output.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+class ParentComponent extends React.Component {
+  render() {
+    return (
+      <div ref={current => {
+        this.refs['P'] = current;
+      }} id="P">
+        <div ref={current => {
+          this.refs['P_P1'] = current;
+        }} id="P_P1">
+          <span ref={current => {
+            this.refs['P_P1_C1'] = current;
+          }} id="P_P1_C1" />
+          <span ref={current => {
+            this.refs['P_P1_C2'] = current;
+          }} id="P_P1_C2" />
+        </div>
+        <div ref={current => {
+          this.refs['P_OneOff'] = current;
+        }} id="P_OneOff" />
+      </div>
+    );
+  }
+}

transforms/__testfixtures__/string-refs/literal-without-owner.input.js

@@ -0,0 +1,3 @@
+import * as React from "react";
+
+<div ref="bad" />;

transforms/__testfixtures__/string-refs/literal-without-owner.output.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+<div ref={current => {
+  this.refs['bad'] = current;
+}} />;

transforms/__testfixtures__/string-refs/typescript/literal-with-owner.input.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+class ParentComponent extends React.Component {
+  // Actual code probably has more accurate types.
+  // Codemod might cause TypeScript errors but these are good errors since they reveal unsound code.
+  refs: Record<string, any>;
+
+  render() {
+    return (
+      <div ref="P" id="P">
+        <div ref="P_P1" id="P_P1">
+          <span ref="P_P1_C1" id="P_P1_C1" />
+          <span ref="P_P1_C2" id="P_P1_C2" />
+        </div>
+        <div ref="P_OneOff" id="P_OneOff" />
+      </div>
+    );
+  }
+}

transforms/__testfixtures__/string-refs/typescript/literal-with-owner.output.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+class ParentComponent extends React.Component {
+  // Actual code probably has more accurate types.
+  // Codemod might cause TypeScript errors but these are good errors since they reveal unsound code.
+  refs: Record<string, any>;
+
+  render() {
+    return (
+      <div ref={current => {
+        this.refs['P'] = current;
+      }} id="P">
+        <div ref={current => {
+          this.refs['P_P1'] = current;
+        }} id="P_P1">
+          <span ref={current => {
+            this.refs['P_P1_C1'] = current;
+          }} id="P_P1_C1" />
+          <span ref={current => {
+            this.refs['P_P1_C2'] = current;
+          }} id="P_P1_C2" />
+        </div>
+        <div ref={current => {
+          this.refs['P_OneOff'] = current;
+        }} id="P_OneOff" />
+      </div>
+    );
+  }
+}

transforms/__testfixtures__/string-refs/value-with-owner.input.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+
+class ParentComponent extends React.Component {
+  render() {
+    const refName = "P";
+    // Giving up. Would need to implement scope tracking.
+    return <div ref={refName} id="P"></div>;
+  }
+}

transforms/__testfixtures__/string-refs/value-with-owner.output.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+
+class ParentComponent extends React.Component {
+  render() {
+    const refName = "P";
+    // Giving up. Would need to implement scope tracking.
+    return <div ref={refName} id="P"></div>;
+  }
+}