feat: v19 codemods with yarn workspaces management

.gitignore

@@ -1,3 +1,4 @@
 .DS_STORE
 node_modules
+dist
 npm-debug.log

codemods-v2/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-v2/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-v2/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-v2/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-v2/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-v2/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-v2/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-v2/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-v2/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-v2/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-v2/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-v2/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-v2/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-v2/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-v2/remove-context-provider/index.d.ts

@@ -0,0 +1,3 @@
+import type { API, FileInfo } from "jscodeshift";
+
+export default function transform(file: FileInfo, api: API): string;

codemods-v2/remove-context-provider/package.json

@@ -0,0 +1,27 @@
+{
+	"name": "remove-context-provider",
+  "version": "1.0.0",
+	"dependencies": {},
+	"devDependencies": {
+		"typescript": "^5.2.2",
+		"ts-node": "^10.9.1",
+		"jscodeshift": "^0.15.1",
+		"@types/jscodeshift": "^0.11.10",
+		"vitest": "^1.0.1",
+		"@vitest/coverage-v8": "^1.0.1"
+	},
+	"main": "./dist/index.cjs",
+	"types": "/dist/index.d.ts",
+	"scripts": {
+		"test": "vitest run",
+		"test:watch": "vitest watch",
+		"coverage": "vitest run --coverage"
+	},
+	"files": [
+		"./README.md",
+		"./.codemodrc.json",
+		"./dist/index.cjs",
+		"./index.d.ts"
+	],
+	"type": "module"
+}

codemods-v2/remove-context-provider/src/index.ts

@@ -0,0 +1,37 @@
+import type { API, FileInfo } from 'jscodeshift';
+
+export default function transform(
+  file: FileInfo,
+  api: API,
+): string | undefined {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  root.findJSXElements().forEach((elementPath) => {
+    const { value } = elementPath;
+    const elements = [value.openingElement, value.closingElement];
+    elements.forEach((element) => {
+      if (!element) {
+        return;
+      }
+      if (
+        !j.JSXMemberExpression.check(element.name) ||
+				!j.JSXIdentifier.check(element.name.object)
+      ) {
+        return;
+      }
+
+      const objectName = element.name.object.name;
+      const propertyName = element.name.property.name;
+
+      if (
+        objectName.toLocaleLowerCase().includes('context') &&
+				propertyName === 'Provider'
+      ) {
+        element.name = element.name.object;
+      }
+    });
+  });
+
+  return root.toSource();
+}

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

@@ -0,0 +1,129 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import jscodeshift, { API, FileInfo } from 'jscodeshift';
+import { describe, it } from 'vitest';
+import transform from '../src/index.js';
+
+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, '')
+      );
+    });
+  });
+});