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/remove-context-provider/.codemodrc.json

@@ -0,0 +1,13 @@
+{
+	"version": "1.0.0",
+	"name": "react/19/remove-context-provider",
+	"private": false,
+	"engine": "jscodeshift",
+	"meta": {
+		"tags": ["react"],
+		"useCaseCategory": "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>
+  );
+}

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

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

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

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

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

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

codemods/remove-context-provider/__tests__/test.ts

@@ -0,0 +1,164 @@
+import assert from 'node:assert/strict';
+import {readFile} from 'node:fs/promises';
+import {join} from 'node:path';
+import jscodeshift, {API, FileInfo} from 'jscodeshift';
+import transform from '../src/index.ts';
+
+export 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('Context.Provider -> Context', () => {
+  describe('javascript code', () => {
+    it('should replace ThemeContext.Provider with ThemeContext', async () => {
+      const INPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture1.input.js'),
+        'utf-8'
+      );
+      const OUTPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture1.output.js'),
+        'utf-8'
+      );
+
+      const fileInfo: FileInfo = {
+        path: 'index.ts',
+        source: INPUT,
+      };
+
+      const actualOutput = transform(fileInfo, buildApi('js'));
+
+      assert.deepEqual(
+        actualOutput?.replace(/\W/gm, ''),
+        OUTPUT.replace(/\W/gm, '')
+      );
+    });
+
+    it('should replace Context.Provider with Context', async () => {
+      const INPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture2.input.js'),
+        'utf-8'
+      );
+      const OUTPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture2.output.js'),
+        'utf-8'
+      );
+
+      const fileInfo: FileInfo = {
+        path: 'index.ts',
+        source: INPUT,
+      };
+
+      const actualOutput = transform(fileInfo, buildApi('js'));
+
+      assert.deepEqual(
+        actualOutput?.replace(/\W/gm, ''),
+        OUTPUT.replace(/\W/gm, '')
+      );
+    });
+
+    it('should do nothing if .Provider does not exist', async () => {
+      const INPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture3.input.js'),
+        'utf-8'
+      );
+      const OUTPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture3.output.js'),
+        'utf-8'
+      );
+
+      const fileInfo: FileInfo = {
+        path: 'index.ts',
+        source: INPUT,
+      };
+
+      const actualOutput = transform(fileInfo, buildApi('js'));
+
+      assert.deepEqual(
+        actualOutput?.replace(/\W/gm, ''),
+        OUTPUT.replace(/\W/gm, '')
+      );
+    });
+  });
+
+  describe('typescript code', () => {
+    it('should replace ThemeContext.Provider with ThemeContext', async () => {
+      const INPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture4.input.ts'),
+        'utf-8'
+      );
+      const OUTPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture4.output.ts'),
+        'utf-8'
+      );
+
+      const fileInfo: FileInfo = {
+        path: 'index.ts',
+        source: INPUT,
+      };
+
+      const actualOutput = transform(fileInfo, buildApi('tsx'));
+
+      assert.deepEqual(
+        actualOutput?.replace(/\W/gm, ''),
+        OUTPUT.replace(/\W/gm, '')
+      );
+    });
+
+    it('should replace Context.Provider with Context', async () => {
+      const INPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture5.input.ts'),
+        'utf-8'
+      );
+      const OUTPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture5.output.ts'),
+        'utf-8'
+      );
+
+      const fileInfo: FileInfo = {
+        path: 'index.ts',
+        source: INPUT,
+      };
+
+      const actualOutput = transform(fileInfo, buildApi('tsx'));
+
+      assert.deepEqual(
+        actualOutput?.replace(/\W/gm, ''),
+        OUTPUT.replace(/\W/gm, '')
+      );
+    });
+
+    it('should do nothing if .Provider does not exist', async () => {
+      const INPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture6.input.ts'),
+        'utf-8'
+      );
+      const OUTPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture6.output.ts'),
+        'utf-8'
+      );
+
+      const fileInfo: FileInfo = {
+        path: 'index.ts',
+        source: INPUT,
+      };
+
+      const actualOutput = transform(fileInfo, buildApi('tsx'));
+
+      assert.deepEqual(
+        actualOutput?.replace(/\W/gm, ''),
+        OUTPUT.replace(/\W/gm, '')
+      );
+    });
+  });
+});

codemods/remove-context-provider/package.json

@@ -0,0 +1,17 @@
+{
+	"name": "remove-context-provider",
+  "version": "1.0.0",
+	"dependencies": {},
+	"devDependencies": {
+    "@types/node": "^20.12.3",
+		"@types/jscodeshift": "^0.11.10",
+		"jscodeshift": "^0.15.1",
+		"typescript": "^5.2.2"
+	},
+	"files": [
+		"./README.md",
+		"./.codemodrc.json",
+		"./dist/index.cjs"
+	],
+	"type": "module"
+}