feat: Add deprecated-react-text and preset-19 (#44)

* wip

* f

* f

* docs

* Add prompt for react-19 preset

Author: eps1lon

.changeset/selfish-jars-film.md

@@ -0,0 +1,5 @@
+---
+"types-react-codemod": patch
+---
+
+Add `deprecated-react-text` and `preset-19`.

CONTRIBUTING.md

@@ -0,0 +1,5 @@
+# Contributing
+
+## Developing a codemod
+
+[Base ASTExplorer config for JSCodeshift for TypeScript](https://astexplorer.net/#/gist/90d789c2762cd9a13f7e3164e464a2c7/8530b091d0fc90ecc84448c924e3ea4d929bf6ab).

README.md

@@ -34,9 +34,10 @@ $ npx types-react-codemod --help
 types-react-codemod <codemod> <paths...>
 
 Positionals:
-  codemod  [string] [required] [choices: "context-any", "deprecated-react-type",
-   "deprecated-sfc-element", "deprecated-sfc", "deprecated-stateless-component",
-                   "implicit-children", "preset-18", "useCallback-implicit-any"]
+  codemod  [string] [required] [choices: "context-any", "deprecated-react-text",
+            "deprecated-react-type", "deprecated-sfc-element", "deprecated-sfc",
+             "deprecated-stateless-component", "implicit-children", "preset-18",
+                                        "preset-19", "useCallback-implicit-any"]
   paths                                                      [string] [required]
 
 Options:
@@ -67,6 +68,8 @@ The reason being that a false-positive can be reverted easily (assuming you have
 - `context-any`
 - `implicit-children`
 - `useCallback-implicit-any`
+- `preset-19`
+- `deprecated-react-text`
 
 ### `preset-18`
 
@@ -193,3 +196,33 @@ type CreateCallback = () => (event: Event) => void;
 -const createCallback: CreateCallback = () => useCallback((event) => {}, [])
 +const createCallback: CreateCallback = () => useCallback((event: any) => {}, [])
 ```
+
+### `preset-19`
+
+This codemod combines all codemods for React 19 types.
+You can interactively pick the codemods included.
+By default, the codemods that are definitely required to upgrade to `@types/react@^19.0.0` are selected.
+The other codemods may or may not be required.
+You should select all and audit the changed files regardless.
+
+### `deprecated-react-text`
+
+```diff
+ import * as React from "react";
+ interface Props {
+-  label?: React.ReactText;
++  label?: number | string;
+ }
+```
+
+#### `deprecated-react-text` false-negative pattern A
+
+Importing `ReactText` via aliased named import will result in the transform being skipped.
+
+```tsx
+import { ReactText as MyReactText } from "react";
+interface Props {
+	// not transformed
+	label?: MyReactText;
+}
+```

bin/__tests__/__snapshots__/types-react-codemod.js.snap

@@ -6,9 +6,10 @@ Object {
   "stdout": "types-react-codemod <codemod> <paths...>
 
 Positionals:
-  codemod  [string] [required] [choices: \\"context-any\\", \\"deprecated-react-type\\",
-   \\"deprecated-sfc-element\\", \\"deprecated-sfc\\", \\"deprecated-stateless-component\\",
-                   \\"implicit-children\\", \\"preset-18\\", \\"useCallback-implicit-any\\"]
+  codemod  [string] [required] [choices: \\"context-any\\", \\"deprecated-react-text\\",
+            \\"deprecated-react-type\\", \\"deprecated-sfc-element\\", \\"deprecated-sfc\\",
+             \\"deprecated-stateless-component\\", \\"implicit-children\\", \\"preset-18\\",
+                                        \\"preset-19\\", \\"useCallback-implicit-any\\"]
   paths                                                      [string] [required]
 
 Options:

bin/types-react-codemod.cjs

@@ -85,6 +85,16 @@ async function main() {
 						},
 					]);
 					args.push(`--preset18Transforms="${presets.join(",")}"`);
+				} else if (codemod === "preset-19") {
+					const { presets } = await inquirer.prompt([
+						{
+							message: "Pick transforms to apply",
+							name: "presets",
+							type: "checkbox",
+							choices: [{ checked: true, value: "deprecated-react-text" }],
+						},
+					]);
+					args.push(`--preset19Transforms="${presets.join(",")}"`);
 				}
 
 				if (dry) {

transforms/__tests__/deprecated-react-text.js

@@ -0,0 +1,81 @@
+import { describe, expect, test } from "@jest/globals";
+import dedent from "dedent";
+import * as JscodeshiftTestUtils from "jscodeshift/dist/testUtils";
+import deprecatedReactTextTransform from "../deprecated-react-text";
+
+function applyTransform(source, options = {}) {
+	return JscodeshiftTestUtils.applyTransform(
+		deprecatedReactTextTransform,
+		options,
+		{
+			path: "test.d.ts",
+			source: dedent(source),
+		}
+	);
+}
+
+describe("transform deprecated-react-text", () => {
+	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 { ReactText } from 'react';
+		interface Props {
+				children?: ReactText;
+			}
+    `)
+		).toMatchInlineSnapshot(`
+		"import { ReactText } from 'react';
+				interface Props {
+						children?: number | string;
+					}"
+	`);
+	});
+
+	test("false-negative named renamed import", () => {
+		expect(
+			applyTransform(`
+      import { ReactText as MyReactText } from 'react';
+      interface Props {
+				children?: MyReactText;
+			}
+    `)
+		).toMatchInlineSnapshot(`
+		"import { ReactText as MyReactText } from 'react';
+		   interface Props {
+						children?: MyReactText;
+					}"
+	`);
+	});
+
+	test("namespace import", () => {
+		expect(
+			applyTransform(`
+      import * as React from 'react';
+      interface Props {
+				children?: React.ReactText;
+			}
+    `)
+		).toMatchInlineSnapshot(`
+		"import * as React from 'react';
+		   interface Props {
+						children?: number | string;
+					}"
+	`);
+	});
+});

transforms/__tests__/preset-19.js

@@ -0,0 +1,56 @@
+import { beforeEach, describe, expect, jest, test } from "@jest/globals";
+import dedent from "dedent";
+import * as JscodeshiftTestUtils from "jscodeshift/dist/testUtils";
+
+describe("preset-19", () => {
+	let preset19Transform;
+	let deprecatedReactTextTransform;
+
+	function applyTransform(source, options = {}) {
+		return JscodeshiftTestUtils.applyTransform(preset19Transform, options, {
+			path: "test.d.ts",
+			source: dedent(source),
+		});
+	}
+
+	beforeEach(() => {
+		jest.resetModules();
+
+		function mockTransform(moduleName) {
+			const transform = jest.fn();
+
+			jest.doMock(moduleName, () => {
+				return {
+					__esModule: true,
+					default: transform,
+				};
+			});
+
+			return transform;
+		}
+
+		deprecatedReactTextTransform = mockTransform("../deprecated-react-text");
+
+		preset19Transform = require("../preset-19");
+	});
+
+	test("applies subset", () => {
+		applyTransform("", {
+			preset19Transforms: "deprecated-react-text",
+		});
+
+		expect(deprecatedReactTextTransform).toHaveBeenCalled();
+	});
+
+	test("applies all", () => {
+		applyTransform("", {
+			preset19Transforms: ["deprecated-react-text"].join(","),
+		});
+
+		applyTransform("", {
+			preset19Transforms: "deprecated-react-text",
+		});
+
+		expect(deprecatedReactTextTransform).toHaveBeenCalled();
+	});
+});

transforms/deprecated-react-text.js

@@ -0,0 +1,40 @@
+const parseSync = require("./utils/parseSync");
+
+/**
+ * @type {import('jscodeshift').Transform}
+ */
+const deprecatedReactTextTransform = (file, api) => {
+	const j = api.jscodeshift;
+	const ast = parseSync(file);
+
+	const changedIdentifiers = ast
+		.find(j.TSTypeReference, (node) => {
+			const { typeName } = node;
+			/**
+			 * @type {import('jscodeshift').Identifier | null}
+			 */
+			let identifier = null;
+			if (typeName.type === "Identifier") {
+				identifier = typeName;
+			} else if (
+				typeName.type === "TSQualifiedName" &&
+				typeName.right.type === "Identifier"
+			) {
+				identifier = typeName.right;
+			}
+
+			return identifier !== null && identifier.name === "ReactText";
+		})
+		.replaceWith(() => {
+			// `number | string`
+			return j.tsUnionType([j.tsNumberKeyword(), j.tsStringKeyword()]);
+		});
+
+	// Otherwise some files will be marked as "modified" because formatting changed
+	if (changedIdentifiers.length > 0) {
+		return ast.toSource();
+	}
+	return file.source;
+};
+
+export default deprecatedReactTextTransform;

transforms/preset-19.js

@@ -0,0 +1,42 @@
+import deprecatedReactTextTransform from "./deprecated-react-text";
+
+/**
+ * @type {import('jscodeshift').Transform}
+ */
+const transform = (file, api, options) => {
+	const { preset19Transforms } = options;
+
+	const transformNames = new Set(preset19Transforms.split(","));
+	/**
+	 * @type {import('jscodeshift').Transform[]}
+	 */
+	const transforms = [];
+	if (transformNames.has("deprecated-react-text")) {
+		transforms.push(deprecatedReactTextTransform);
+	}
+
+	let wasAlwaysSkipped = true;
+	const newSource = transforms.reduce((currentFileSource, transform) => {
+		// TODO: currently we parse -> transform -> print on every transform
+		// Instead, we could parse and prince once in the preset and the transformers just deal with an AST.
+		// That requires refactoring of every transform into source-transformer and ast-transformer
+		const transformResult = transform(
+			{ path: file.path, source: currentFileSource },
+			api,
+			options
+		);
+
+		if (transformResult == null) {
+			return currentFileSource;
+		} else {
+			wasAlwaysSkipped = false;
+			return transformResult;
+		}
+	}, file.source);
+
+	if (!wasAlwaysSkipped) {
+		return newSource;
+	}
+};
+
+export default transform;