RW projects: Add resolutions for @types/react 17 (redwoodjs#5112)

__fixtures__/test-project/package.json

@@ -28,5 +28,8 @@
   "scripts": {
     "postinstall": ""
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "resolutions": {
+    "@types/react": "17.0.40"
+  }
 }

packages/codemods/src/codemods/v1.1.x/addTypesReactResolution/README.md

@@ -0,0 +1,20 @@
+# Update node engine
+
+Node 18 was recently released, but we're not ready to upgrade yet. So we need to pin the React types to v17
+
+```diff
+diff --git a/package.json b/package.json
+index b22c4c0..bd018e5 100644
+--- a/package.json
++++ b/package.json
+@@ -21,5 +21,8 @@
+   "prisma": {
+     "seed": "yarn rw exec seed"
+   },
+-  "packageManager": "[email protected]"
++  "packageManager": "[email protected]",
++  "resolutions": {
++    "@types/react": "17.0.40"
++  }
+ }
+```

packages/codemods/src/codemods/v1.1.x/addTypesReactResolution/__testfixtures__/add/input/package.json

@@ -0,0 +1,25 @@
+{
+  "private": true,
+  "workspaces": {
+    "packages": [
+      "api",
+      "web",
+      "packages/*"
+    ]
+  },
+  "devDependencies": {
+    "@redwoodjs/core": "1.0.0"
+  },
+  "eslintConfig": {
+    "extends": "@redwoodjs/eslint-config",
+    "root": true
+  },
+  "engines": {
+    "node": ">=14.19 <=16.x",
+    "yarn": ">=1.15"
+  },
+  "prisma": {
+    "seed": "yarn rw exec seed"
+  },
+  "packageManager": "[email protected]"
+}

packages/codemods/src/codemods/v1.1.x/addTypesReactResolution/__testfixtures__/add/output/package.json

@@ -0,0 +1,28 @@
+{
+  "private": true,
+  "workspaces": {
+    "packages": [
+      "api",
+      "web",
+      "packages/*"
+    ]
+  },
+  "devDependencies": {
+    "@redwoodjs/core": "1.0.0"
+  },
+  "eslintConfig": {
+    "extends": "@redwoodjs/eslint-config",
+    "root": true
+  },
+  "engines": {
+    "node": ">=14.19 <=16.x",
+    "yarn": ">=1.15"
+  },
+  "prisma": {
+    "seed": "yarn rw exec seed"
+  },
+  "packageManager": "[email protected]",
+  "resolutions": {
+    "@types/react": "17.0.40"
+  }
+}

packages/codemods/src/codemods/v1.1.x/addTypesReactResolution/__testfixtures__/append/input/package.json

@@ -0,0 +1,28 @@
+{
+  "private": true,
+  "workspaces": {
+    "packages": [
+      "api",
+      "web",
+      "packages/*"
+    ]
+  },
+  "devDependencies": {
+    "@redwoodjs/core": "1.0.0"
+  },
+  "eslintConfig": {
+    "extends": "@redwoodjs/eslint-config",
+    "root": true
+  },
+  "engines": {
+    "node": ">=14.19 <=16.x",
+    "yarn": ">=1.15"
+  },
+  "prisma": {
+    "seed": "yarn rw exec seed"
+  },
+  "packageManager": "[email protected]",
+  "resolutions": {
+    "somePackage": "42.0.0"
+  }
+}

packages/codemods/src/codemods/v1.1.x/addTypesReactResolution/__testfixtures__/append/output/package.json

@@ -0,0 +1,29 @@
+{
+  "private": true,
+  "workspaces": {
+    "packages": [
+      "api",
+      "web",
+      "packages/*"
+    ]
+  },
+  "devDependencies": {
+    "@redwoodjs/core": "1.0.0"
+  },
+  "eslintConfig": {
+    "extends": "@redwoodjs/eslint-config",
+    "root": true
+  },
+  "engines": {
+    "node": ">=14.19 <=16.x",
+    "yarn": ">=1.15"
+  },
+  "prisma": {
+    "seed": "yarn rw exec seed"
+  },
+  "packageManager": "[email protected]",
+  "resolutions": {
+    "somePackage": "42.0.0",
+    "@types/react": "17.0.40"
+  }
+}

packages/codemods/src/codemods/v1.1.x/addTypesReactResolution/__tests__/addTypesReactResolution.test.ts

@@ -0,0 +1,10 @@
+import { addTypesReactResolution } from '../addTypesReactResolution'
+
+describe('addTypesReactResolution', () => {
+  it('adds resolutions', async () => {
+    await matchFolderTransform(addTypesReactResolution, 'add')
+  })
+  it('appends to existing resolutions', async () => {
+    await matchFolderTransform(addTypesReactResolution, 'append')
+  })
+})

packages/codemods/src/codemods/v1.1.x/addTypesReactResolution/addTypesReactResolution.ts

@@ -0,0 +1,15 @@
+import fs from 'fs'
+
+import getRootPackageJSON from '../../../lib/getRootPackageJSON'
+
+export const addTypesReactResolution = () => {
+  const [rootPackageJSON, rootPackageJSONPath] = getRootPackageJSON()
+
+  rootPackageJSON.resolutions = rootPackageJSON.resolutions || {}
+  rootPackageJSON.resolutions['@types/react'] = '17.0.40'
+
+  fs.writeFileSync(
+    rootPackageJSONPath,
+    JSON.stringify(rootPackageJSON, null, 2) + '\n'
+  )
+}

packages/codemods/src/codemods/v1.1.x/addTypesReactResolution/addTypesReactResolution.yargs.ts

@@ -0,0 +1,13 @@
+import task from 'tasuku'
+
+import { addTypesReactResolution } from './addTypesReactResolution'
+
+export const command = 'types-react-resolution'
+export const description =
+  '(v1.0->v1.1) Add @types/react resolution in the root package.json'
+
+export const handler = () => {
+  task('Add @types/react resolution', async () => {
+    addTypesReactResolution()
+  })
+}

packages/create-redwood-app/template/package.json

@@ -21,5 +21,8 @@
   "prisma": {
     "seed": "yarn rw exec seed"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "resolutions": {
+    "@types/react": "17.0.40"
+  }
 }