feat: react v19 codemods

.circleci/config.yml

@@ -501,6 +501,9 @@ workflows:
                 - "-r=www-modern --env=development --variant=true"
                 - "-r=www-modern --env=production --variant=true"
 
+                # Codemods
+                - "--project=codemods -r=experimental"
+
                 # TODO: Test more persistent configurations?
                 - '-r=stable --env=development --persistent'
                 - '-r=experimental --env=development --persistent'

.gitignore

@@ -1,4 +1,5 @@
 .DS_STORE
+dist
 node_modules
 scripts/flow/*/.flowconfig
 .flowconfig

babel.config.js

@@ -1,6 +1,10 @@
 'use strict';
 
 module.exports = {
+  presets: [
+    ['@babel/preset-env', {targets: {node: 'current'}}],
+    '@babel/preset-typescript',
+  ],
   plugins: [
     '@babel/plugin-syntax-jsx',
     '@babel/plugin-transform-flow-strip-types',

codemods/ref-to-arrow-function-ref/.codemodrc.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://codemod-utils.s3.us-west-1.amazonaws.com/configuration_schema.json",
+	"version": "1.0.3",
+	"private": false,
+	"name": "react/19/ref-to-arrow-function",
+	"engine": "jscodeshift",
+	"meta": {
+		"tags": ["react", "migration"],
+		"git": "https://github.com/codemod-com/react/tree/codemods-v19/codemods/ref-to-arrow-function-ref"
+	},
+	"applicability": {
+		"from": [["react", "<=", "18"]],
+		"to": [["react", "=", "19"]]
+	}
+}

codemods/ref-to-arrow-function-ref/README.md

@@ -0,0 +1,14 @@
+This codemod migrates string refs (deprecated) to callback refs.
+
+## Before
+
+```ts
+< div ref = 'refName' / > ;
+```
+
+## After
+
+```ts
+< div ref = { ref => this.refs.refName = ref }
+/>
+```

codemods/ref-to-arrow-function-ref/__testfixtures__/fixture1.input.tsx

@@ -0,0 +1 @@
+<div ref="refName" />;

codemods/ref-to-arrow-function-ref/__testfixtures__/fixture1.output.tsx

@@ -0,0 +1,5 @@
+<div
+	ref={(ref) => {
+		this.refs.refName = ref;
+	}}
+/>;

codemods/ref-to-arrow-function-ref/__tests__/test.ts

@@ -0,0 +1,47 @@
+import assert from "node:assert";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import jscodeshift, { type API } from "jscodeshift";
+import { describe, it } from "vitest";
+import transform from "../src/index.js";
+
+const buildApi = (parser: string | undefined): API => ({
+	j: parser ? jscodeshift.withParser(parser) : jscodeshift,
+	jscodeshift: parser ? jscodeshift.withParser(parser) : jscodeshift,
+	stats: () => {
+		console.error(
+			"The stats function was called, which is not supported on purpose",
+		);
+	},
+	report: () => {
+		console.error(
+			"The report function was called, which is not supported on purpose",
+		);
+	},
+});
+
+describe("react/19/ref-to-arrow-function", () => {
+	it("test #1", async () => {
+		const INPUT = await readFile(
+			join(__dirname, "..", "__testfixtures__/fixture1.input.tsx"),
+			"utf-8",
+		);
+		const OUTPUT = await readFile(
+			join(__dirname, "..", "__testfixtures__/fixture1.output.tsx"),
+			"utf-8",
+		);
+
+		const actualOutput = transform(
+			{
+				path: "index.js",
+				source: INPUT,
+			},
+			buildApi("tsx"),
+		);
+
+		assert.deepEqual(
+			actualOutput?.replace(/\s/gm, ""),
+			OUTPUT.replace(/\s/gm, ""),
+		);
+	});
+});

codemods/ref-to-arrow-function-ref/package.json

@@ -0,0 +1,19 @@
+{
+	"name": "ref-to-arrow-function",
+	"author": "codemod",
+	"dependencies": {},
+	"devDependencies": {
+		"@types/node": "20.9.0",
+		"typescript": "5.2.2",
+		"vitest": "^1.0.1",
+		"jscodeshift": "^0.15.1",
+		"@types/jscodeshift": "^0.11.10"
+	},
+	"scripts": {
+		"test": "vitest run",
+		"test:watch": "vitest watch"
+	},
+	"license": "MIT",
+	"files": ["README.md", ".codemodrc.json", "./dist/index.cjs"],
+	"type": "module"
+}

codemods/ref-to-arrow-function-ref/src/index.ts

@@ -0,0 +1,81 @@
+import type { API, FileInfo, Options } from "jscodeshift";
+export default function transform(
+	file: FileInfo,
+	api: API,
+	options?: Options,
+): string | undefined {
+	const j = api.jscodeshift;
+	const root = j(file.source);
+
+	// Helper function to preserve comments
+	function replaceWithComments(path, newNode) {
+		// If the original node had comments, add them to the new node
+		if (path.node.comments) {
+			newNode.comments = path.node.comments;
+		}
+
+		// Replace the node
+		j(path).replaceWith(newNode);
+	}
+
+	// Find JSX elements with ref attribute
+	root
+		// Find JSX elements with a ref attribute
+		.find(j.JSXElement)
+		.forEach((path) => {
+			// Get the ref name
+			const refName = path.node.openingElement.attributes.find(
+				(attr) => attr?.name?.name === "ref",
+			)?.value?.value;
+
+			if (typeof refName !== "string") {
+				return;
+			}
+
+			// Create new ref attribute
+			const newRefAttr = j.jsxAttribute(
+				j.jsxIdentifier("ref"),
+				j.jsxExpressionContainer(
+					j.arrowFunctionExpression(
+						[j.jsxIdentifier("ref")],
+						j.blockStatement([
+							j.expressionStatement(
+								j.assignmentExpression(
+									"=",
+									j.memberExpression(
+										j.memberExpression(
+											j.thisExpression(),
+											j.identifier("refs"),
+										),
+										j.identifier(refName),
+									),
+									j.identifier("ref"),
+								),
+							),
+						]),
+					),
+				),
+			);
+
+			// Replace old ref attribute with new one
+			const newAttributes = path.node.openingElement.attributes.map((attr) =>
+				attr?.name?.name === "ref" ? newRefAttr : attr,
+			);
+			const newOpeningElement = j.jsxOpeningElement(
+				path.node.openingElement.name,
+				newAttributes,
+				path.node.openingElement.selfClosing,
+			);
+			const newElement = j.jsxElement(
+				newOpeningElement,
+				path.node.closingElement,
+				path.node.children,
+				path.node.selfClosing,
+			);
+
+			// Replace old element with new one, preserving comments
+			replaceWithComments(path, newElement);
+		});
+
+	return root.toSource();
+}

codemods/ref-to-arrow-function-ref/tsconfig.json

@@ -0,0 +1,23 @@
+{
+	"compilerOptions": {
+		"outDir": "./dist",
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"isolatedModules": true,
+		"module": "NodeNext",
+		"skipLibCheck": true,
+		"strict": true,
+		"target": "ES6",
+		"allowJs": true
+	},
+	"include": [
+		"./src/**/*.ts",
+		"./src/**/*.js",
+		"./test/**/*.ts",
+		"./test/**/*.js"
+	],
+	"exclude": ["node_modules", "./dist/**/*"],
+	"ts-node": {
+		"transpileOnly": true
+	}
+}

codemods/ref-to-arrow-function-ref/vitest.config.ts

@@ -0,0 +1,7 @@
+import { configDefaults, defineConfig } from "vitest/config";
+
+export default defineConfig({
+	test: {
+		include: [...configDefaults.include, "**/test/*.ts"],
+	},
+});

codemods/remove-context-provider/.codemodrc.json

@@ -0,0 +1,12 @@
+{
+	"version": "1.0.0",
+	"name": "react/19/remove-context-provider",
+	"private": false,
+	"engine": "jscodeshift",
+	"meta": {
+    "tags": ["react", "migration"]
+	},
+	"applicability": {
+		"from": [["react", "<=", "^18.0.0"]]
+	}
+}

codemods/remove-context-provider/README.md

@@ -0,0 +1,35 @@
+# Change Context.Provider to Context
+
+## Description
+
+This codemod will remove the usage of `Provider` for contexts; e.g., Context.Provider to Context
+
+## Example
+
+### Before:
+
+```tsx
+function App() {
+  const [theme, setTheme] = useState('light');
+  // ...
+  return (
+    <ThemeContext.Provider value={theme}>
+      <Page />
+    </ThemeContext.Provider>
+  );
+}
+```
+
+### After:
+
+```tsx
+function App() {
+  const [theme, setTheme] = useState('light');
+  // ...
+  return (
+    <ThemeContext value={theme}>
+      <Page />
+    </ThemeContext>
+  );
+}
+```

codemods/remove-context-provider/__testfixtures__/fixture1.input.js

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

codemods/remove-context-provider/__testfixtures__/fixture1.output.js

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

codemods/remove-context-provider/__testfixtures__/fixture2.input.js

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

codemods/remove-context-provider/__testfixtures__/fixture2.output.js

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

codemods/remove-context-provider/__testfixtures__/fixture3.input.js

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

codemods/remove-context-provider/__testfixtures__/fixture3.output.js

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

codemods/remove-context-provider/__testfixtures__/fixture4.input.ts

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

codemods/remove-context-provider/__testfixtures__/fixture4.output.ts

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

codemods/remove-context-provider/__testfixtures__/fixture5.input.ts

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