feat: Add deprecated-void-function-component transform

.changeset/young-panthers-swim.md

@@ -0,0 +1,7 @@
+---
+"types-react-codemod": minor
+---
+
+Add `deprecated-void-function-component` transform.
+
+Part of `preset-19`.

README.md

@@ -248,3 +248,16 @@ interface Props {
 	label?: MyReactText;
 }
 ```
+
+### `deprecated-void-function-component`
+
+WARNING: Only apply to codebases using `@types/react@^18.0.0`.
+In earlier versions of `@types/react` this codemod would change the typings.
+
+```diff
+ import * as React from "react";
+-const Component: React.VFC = () => {}
++const Component: React.FC = () => {}
+-const Component: React.VoidFunctionComponent = () => {}
++const Component: React.FunctionComponent = () => {}
+```

bin/__tests__/types-react-codemod.js

@@ -23,8 +23,9 @@ describe("types-react-codemod", () => {
 					Positionals:
 					  codemod [string] [required] [choices: \\"context-any\\", \\"deprecated-react-child\\",
 					     \\"deprecated-react-text\\", \\"deprecated-react-type\\", \\"deprecated-sfc-element\\",
-					        \\"deprecated-sfc\\", \\"deprecated-stateless-component\\", \\"implicit-children\\",
-					                           \\"preset-18\\", \\"preset-19\\", \\"useCallback-implicit-any\\"]
+					                             \\"deprecated-sfc\\", \\"deprecated-stateless-component\\",
+					         \\"deprecated-void-function-component\\", \\"implicit-children\\", \\"preset-18\\",
+					                                        \\"preset-19\\", \\"useCallback-implicit-any\\"]
 					  paths                                                      [string] [required]
 
 					Options:

bin/types-react-codemod.cjs

@@ -94,6 +94,7 @@ async function main() {
 							choices: [
 								{ checked: true, value: "deprecated-react-child" },
 								{ checked: true, value: "deprecated-react-text" },
+								{ checked: true, value: "deprecated-void-function-component" },
 							],
 						},
 					]);

transforms/__tests__/deprecated-void-function-component.js

@@ -0,0 +1,85 @@
+import { describe, expect, test } from "@jest/globals";
+import dedent from "dedent";
+import * as JscodeshiftTestUtils from "jscodeshift/dist/testUtils";
+import deprecatedVoidFunctionComponentTransform from "../deprecated-void-function-component";
+
+function applyTransform(source, options = {}) {
+	return JscodeshiftTestUtils.applyTransform(
+		deprecatedVoidFunctionComponentTransform,
+		options,
+		{
+			path: "test.d.ts",
+			source: dedent(source),
+		}
+	);
+}
+
+describe("transform deprecated-void-function-component", () => {
+	test("not modified", () => {
+		expect(
+			applyTransform(`
+				import { FC } from 'react';
+				FC;
+    `)
+		).toMatchInlineSnapshot(`
+		"import { FC } from 'react';
+						FC;"
+	`);
+	});
+
+	test("named import", () => {
+		expect(
+			applyTransform(`
+				import { VFC, VoidFunctionComponent } from 'react';
+				VFC;
+				VoidFunctionComponent;
+    `)
+		).toMatchInlineSnapshot(`
+		"import { FC, FunctionComponent } from 'react';
+						FC;
+						FunctionComponent;"
+	`);
+	});
+
+	test("named renamed import", () => {
+		expect(
+			applyTransform(`
+				import { VFC as MyVFC, VoidFunctionComponent as MyVoidFunctionComponent } from 'react';
+				MyVFC;
+				MyVoidFunctionComponent;
+    `)
+		).toMatchInlineSnapshot(`
+		"import { FC as MyVFC, FunctionComponent as MyVoidFunctionComponent } from 'react';
+						MyVFC;
+						MyVoidFunctionComponent;"
+	`);
+	});
+
+	test("namespace import", () => {
+		expect(
+			applyTransform(`
+				import * as React from 'react';
+				React.VFC;
+				React.VoidFunctionComponent;
+    `)
+		).toMatchInlineSnapshot(`
+		"import * as React from 'react';
+						React.FC;
+						React.FunctionComponent;"
+	`);
+	});
+
+	test("false-positive rename on different namespace", () => {
+		expect(
+			applyTransform(`
+				import * as Preact from 'preact';
+				Preact.VFC;
+				Preact.VoidFunctionComponent;
+    `)
+		).toMatchInlineSnapshot(`
+		"import * as Preact from 'preact';
+						Preact.FC;
+						Preact.FunctionComponent;"
+	`);
+	});
+});

transforms/__tests__/preset-19.js

@@ -6,6 +6,7 @@ describe("preset-19", () => {
 	let preset19Transform;
 	let deprecatedReactChildTransform;
 	let deprecatedReactTextTransform;
+	let deprecatedVoidFunctionComponentTransform;
 
 	function applyTransform(source, options = {}) {
 		return JscodeshiftTestUtils.applyTransform(preset19Transform, options, {
@@ -32,6 +33,9 @@ describe("preset-19", () => {
 
 		deprecatedReactChildTransform = mockTransform("../deprecated-react-child");
 		deprecatedReactTextTransform = mockTransform("../deprecated-react-text");
+		deprecatedVoidFunctionComponentTransform = mockTransform(
+			"../deprecated-void-function-component"
+		);
 
 		preset19Transform = require("../preset-19");
 	});
@@ -43,17 +47,20 @@ describe("preset-19", () => {
 
 		expect(deprecatedReactChildTransform).not.toHaveBeenCalled();
 		expect(deprecatedReactTextTransform).toHaveBeenCalled();
+		expect(deprecatedVoidFunctionComponentTransform).not.toHaveBeenCalled();
 	});
 
 	test("applies all", () => {
 		applyTransform("", {
 			preset19Transforms: [
 				"deprecated-react-child",
 				"deprecated-react-text",
+				"deprecated-void-function-component",
 			].join(","),
 		});
 
 		expect(deprecatedReactChildTransform).toHaveBeenCalled();
 		expect(deprecatedReactTextTransform).toHaveBeenCalled();
+		expect(deprecatedVoidFunctionComponentTransform).toHaveBeenCalled();
 	});
 });

transforms/deprecated-void-function-component.js

@@ -0,0 +1,27 @@
+const parseSync = require("./utils/parseSync");
+
+/**
+ * @type {import('jscodeshift').Transform}
+ */
+const deprecatedVoidFunctionComponentTransform = (file, api) => {
+	const j = api.jscodeshift;
+	const ast = parseSync(file);
+
+	const changedIdentifiers = ast
+		.find(j.Identifier, (node) => {
+			return node.name === "VFC" || node.name === "VoidFunctionComponent";
+		})
+		.replaceWith((path) => {
+			return j.identifier(
+				path.node.name === "VFC" ? "FC" : "FunctionComponent"
+			);
+		});
+
+	// Otherwise some files will be marked as "modified" because formatting changed
+	if (changedIdentifiers.length > 0) {
+		return ast.toSource();
+	}
+	return file.source;
+};
+
+export default deprecatedVoidFunctionComponentTransform;

transforms/preset-19.js

@@ -1,5 +1,6 @@
 import deprecatedReactChildTransform from "./deprecated-react-child";
 import deprecatedReactTextTransform from "./deprecated-react-text";
+import deprecatedVoidFunctionComponentTransform from "./deprecated-void-function-component";
 
 /**
  * @type {import('jscodeshift').Transform}
@@ -18,6 +19,9 @@ const transform = (file, api, options) => {
 	if (transformNames.has("deprecated-react-text")) {
 		transforms.push(deprecatedReactTextTransform);
 	}
+	if (transformNames.has("deprecated-void-function-component")) {
+		transforms.push(deprecatedVoidFunctionComponentTransform);
+	}
 
 	let wasAlwaysSkipped = true;
 	const newSource = transforms.reduce((currentFileSource, transform) => {