feat: Add deprecated-react-fragment transform

.changeset/chilly-lamps-greet.md

@@ -0,0 +1,12 @@
+---
+"types-react-codemod": minor
+---
+
+Add codemod to replace deprecated `ReactFragment` by inlining its actual type
+
+```diff
+import * as React from 'react';
+
+-const node: React.ReactFragment
++const node: Iterable<React.ReactNode>
+```

README.md

@@ -34,11 +34,12 @@ $ npx types-react-codemod <codemod> <paths...>
 
 Positionals:
   codemod [string] [required] [choices: "context-any", "deprecated-react-child",
-                         "deprecated-react-node-array", "deprecated-react-text",
-            "deprecated-react-type", "deprecated-sfc-element", "deprecated-sfc",
-         "deprecated-stateless-component", "deprecated-void-function-component",
-            "implicit-children", "preset-18", "preset-19", "refobject-defaults",
-            "scoped-jsx", "useCallback-implicit-any", "useRef-required-initial"]
+                     "deprecated-react-fragment", "deprecated-react-node-array",
+     "deprecated-react-text", "deprecated-react-type", "deprecated-sfc-element",
+                             "deprecated-sfc", "deprecated-stateless-component",
+         "deprecated-void-function-component", "implicit-children", "preset-18",
+    "preset-19", "refobject-defaults", "scoped-jsx", "useCallback-implicit-any",
+                                                      "useRef-required-initial"]
   paths                                                      [string] [required]
 
 Options:
@@ -255,6 +256,28 @@ interface Props {
 }
 ```
 
+### `deprecated-react-fragment`
+
+```diff
+ import * as React from "react";
+ interface Props {
+-  children?: React.ReactFragment;
++  children?: Iterable<React.ReactNode>;
+ }
+```
+
+#### `deprecated-react-fragment` false-negative pattern A
+
+Importing `ReactFragment` via aliased named import will result in the transform being skipped.
+
+```tsx
+import { ReactFragment as MyReactFragment } from "react";
+interface Props {
+	// not transformed
+	children?: MyReactFragment;
+}
+```
+
 ### `deprecated-react-text`
 
 ```diff

bin/__tests__/types-react-codemod.js

@@ -22,11 +22,12 @@ describe("types-react-codemod", () => {
 
 		Positionals:
 		  codemod [string] [required] [choices: "context-any", "deprecated-react-child",
-		                         "deprecated-react-node-array", "deprecated-react-text",
-		            "deprecated-react-type", "deprecated-sfc-element", "deprecated-sfc",
-		         "deprecated-stateless-component", "deprecated-void-function-component",
-		            "implicit-children", "preset-18", "preset-19", "refobject-defaults",
-		            "scoped-jsx", "useCallback-implicit-any", "useRef-required-initial"]
+		                     "deprecated-react-fragment", "deprecated-react-node-array",
+		     "deprecated-react-text", "deprecated-react-type", "deprecated-sfc-element",
+		                             "deprecated-sfc", "deprecated-stateless-component",
+		         "deprecated-void-function-component", "implicit-children", "preset-18",
+		    "preset-19", "refobject-defaults", "scoped-jsx", "useCallback-implicit-any",
+		                                                      "useRef-required-initial"]
 		  paths                                                      [string] [required]
 
 		Options:

transforms/__tests__/deprecated-react-fragment.js

@@ -0,0 +1,97 @@
+const { describe, expect, test } = require("@jest/globals");
+const dedent = require("dedent");
+const JscodeshiftTestUtils = require("jscodeshift/dist/testUtils");
+const deprecatedReactFragmentTransform = require("../deprecated-react-fragment");
+
+function applyTransform(source, options = {}) {
+	return JscodeshiftTestUtils.applyTransform(
+		deprecatedReactFragmentTransform,
+		options,
+		{
+			path: "test.d.ts",
+			source: dedent(source),
+		},
+	);
+}
+
+describe("transform deprecated-react-node-array", () => {
+	test("not modified", () => {
+		expect(
+			applyTransform(`
+			import * as React from 'react';
+			interface Props {
+				children?: ReactNode;
+			}
+    `),
+		).toMatchInlineSnapshot(`
+		"import * as React from 'react';
+		interface Props {
+			children?: ReactNode;
+		}"
+	`);
+	});
+
+	test("named import", () => {
+		expect(
+			applyTransform(`
+      import { ReactFragment } from 'react';
+		interface Props {
+				children?: ReactFragment;
+			}
+    `),
+		).toMatchInlineSnapshot(`
+		"import { ReactNode } from 'react';
+		interface Props {
+				children?: Iterable<ReactNode>;
+			}"
+	`);
+	});
+
+	test("named import with existing ReactNode import", () => {
+		expect(
+			applyTransform(`
+      import { ReactFragment, ReactNode } from 'react';
+		interface Props {
+				children?: ReactFragment;
+			}
+    `),
+		).toMatchInlineSnapshot(`
+		"import { ReactNode } from 'react';
+		interface Props {
+				children?: Iterable<ReactNode>;
+			}"
+	`);
+	});
+
+	test("false-negative named renamed import", () => {
+		expect(
+			applyTransform(`
+      import { ReactFragment as MyReactFragment } from 'react';
+      interface Props {
+				children?: MyReactFragment;
+			}
+    `),
+		).toMatchInlineSnapshot(`
+		"import { ReactFragment as MyReactFragment } from 'react';
+		   interface Props {
+			children?: MyReactFragment;
+		}"
+	`);
+	});
+
+	test("namespace import", () => {
+		expect(
+			applyTransform(`
+      import * as React from 'react';
+      interface Props {
+				children?: React.ReactFragment;
+			}
+    `),
+		).toMatchInlineSnapshot(`
+		"import * as React from 'react';
+		   interface Props {
+			children?: Iterable<React.ReactNode>;
+		}"
+	`);
+	});
+});

transforms/__tests__/preset-19.js

@@ -6,6 +6,7 @@ describe("preset-19", () => {
 	let preset19Transform;
 	let deprecatedReactChildTransform;
 	let deprecatedReactNodeArrayTransform;
+	let deprecatedReactFragmentTransform;
 	let deprecatedReactTextTransform;
 	let deprecatedVoidFunctionComponentTransform;
 	let refobjectDefaultsTransform;
@@ -36,6 +37,9 @@ describe("preset-19", () => {
 		deprecatedReactNodeArrayTransform = mockTransform(
 			"../deprecated-react-node-array",
 		);
+		deprecatedReactFragmentTransform = mockTransform(
+			"../deprecated-react-fragment",
+		);
 		deprecatedReactTextTransform = mockTransform("../deprecated-react-text");
 		deprecatedVoidFunctionComponentTransform = mockTransform(
 			"../deprecated-void-function-component",
@@ -63,6 +67,7 @@ describe("preset-19", () => {
 		applyTransform("", {
 			preset19Transforms: [
 				"deprecated-react-child",
+				"deprecated-react-fragment",
 				"deprecated-react-node-array",
 				"deprecated-react-text",
 				"deprecated-void-function-component",
@@ -74,6 +79,7 @@ describe("preset-19", () => {
 
 		expect(deprecatedReactChildTransform).toHaveBeenCalled();
 		expect(deprecatedReactNodeArrayTransform).toHaveBeenCalled();
+		expect(deprecatedReactFragmentTransform).toHaveBeenCalled();
 		expect(deprecatedReactTextTransform).toHaveBeenCalled();
 		expect(deprecatedVoidFunctionComponentTransform).toHaveBeenCalled();
 		expect(refobjectDefaultsTransform).toHaveBeenCalled();

transforms/deprecated-react-fragment.js

@@ -0,0 +1,92 @@
+const parseSync = require("./utils/parseSync");
+
+/**
+ * @type {import('jscodeshift').Transform}
+ */
+const deprecatedReactFragmentTransform = (file, api) => {
+	const j = api.jscodeshift;
+	const ast = parseSync(file);
+
+	const hasReactNodeImport = ast.find(j.ImportSpecifier, (node) => {
+		const { imported, local } = node;
+		return (
+			imported.type === "Identifier" &&
+			imported.name === "ReactNode" &&
+			// We don't support renames generally, so we don't handle them here
+			(local == null || local.name === "ReactNode")
+		);
+	});
+	const reactFragmentImports = ast.find(j.ImportSpecifier, (node) => {
+		const { imported, local } = node;
+		return (
+			imported.type === "Identifier" &&
+			imported.name === "ReactFragment" &&
+			// We don't support renames generally, so we don't handle them here
+			(local == null || local.name === "ReactFragment")
+		);
+	});
+
+	if (hasReactNodeImport.length > 0) {
+		reactFragmentImports.remove();
+	} else {
+		reactFragmentImports.replaceWith(() => {
+			return j.importSpecifier(j.identifier("ReactNode"));
+		});
+	}
+
+	const changedIdentifiers = ast
+		.find(j.TSTypeReference, (node) => {
+			const { typeName } = node;
+
+			return (
+				typeName.type === "Identifier" && typeName.name === "ReactFragment"
+			);
+		})
+		.replaceWith(() => {
+			// `Iterable<ReactNode>`
+			return j.tsTypeReference(
+				j.identifier("Iterable"),
+				j.tsTypeParameterInstantiation([
+					j.tsTypeReference(j.identifier("ReactNode")),
+				]),
+			);
+		});
+
+	const changedQualifiedNames = ast
+		.find(j.TSTypeReference, (node) => {
+			const { typeName } = node;
+
+			return (
+				typeName.type === "TSQualifiedName" &&
+				typeName.right.type === "Identifier" &&
+				typeName.right.name === "ReactFragment"
+			);
+		})
+		.replaceWith((path) => {
+			const { node } = path;
+			const typeName = /** @type {import('jscodeshift').TSQualifiedName} */ (
+				node.typeName
+			);
+			// `Iterable<*.ReactNode>`
+			return j.tsTypeReference(
+				j.identifier("Iterable"),
+				j.tsTypeParameterInstantiation([
+					j.tsTypeReference(
+						j.tsQualifiedName(typeName.left, j.identifier("ReactNode")),
+					),
+				]),
+			);
+		});
+
+	// Otherwise some files will be marked as "modified" because formatting changed
+	if (
+		changedIdentifiers.length > 0 ||
+		changedQualifiedNames.length > 0 ||
+		reactFragmentImports.length > 0
+	) {
+		return ast.toSource();
+	}
+	return file.source;
+};
+
+module.exports = deprecatedReactFragmentTransform;

transforms/preset-19.js

@@ -1,5 +1,6 @@
 const deprecatedReactChildTransform = require("./deprecated-react-child");
 const deprecatedReactNodeArrayTransform = require("./deprecated-react-node-array");
+const deprecatedReactFragmentTransform = require("./deprecated-react-fragment");
 const deprecatedReactTextTransform = require("./deprecated-react-text");
 const deprecatedVoidFunctionComponentTransform = require("./deprecated-void-function-component");
 const refobjectDefaultsTransform = require("./refobject-defaults");
@@ -23,6 +24,9 @@ const transform = (file, api, options) => {
 	if (transformNames.has("deprecated-react-node-array")) {
 		transforms.push(deprecatedReactNodeArrayTransform);
 	}
+	if (transformNames.has("deprecated-react-fragment")) {
+		transforms.push(deprecatedReactFragmentTransform);
+	}
 	if (transformNames.has("deprecated-react-text")) {
 		transforms.push(deprecatedReactTextTransform);
 	}