Use syncpack to verify consistent versions for react and react-dom (#34397)

* Add GitHub action and pre-push hook for syncpack for react and react-dom

* Fix typo in pre-push script

* Don't execute suggested command to fix mismatches automatically.

* Update react and react-dom to 17.0.2

* Move changelog check to last, so that pre-push still fails if check isn't successful

* Add changelog files

* Correct issue with syncpack.yml referencing an internal action

* Add command to top-level package.json for fixing mismatches

* Update syncpack action to only run when package.json files are affected

* Update workflow to just run syncpack list-mismatches

* Add version pinning to syncpackrc

.github/workflows/syncpack.yml

@@ -0,0 +1,33 @@
+name: Syncronize Dependencies with syncpack
+on:
+  # Run whenever a pull request is updated
+  pull_request:
+    branches:
+      - trunk
+    paths:
+      - '**/package.json'
+jobs:
+  syncpack:
+    runs-on: ubuntu-latest
+    name: syncpack
+    steps:
+      - name: 'Checkout'
+        uses: actions/checkout@v3
+      
+      - name: 'Setup node'
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: 'Install Syncpack'
+        run: npm install -g syncpack@^8.2.4
+        
+      - name: 'List Mismatches'
+        run: syncpack list-mismatches
+        
+      - name: 'Explain Remedy'
+        if: failure()
+        run: |
+          echo "Dependency version mismatch detected. This can usually be fixed automatically by updating the pinned version in \`.syncpackrc` and then running: \`pnpm run 
+sync-dependencies\`"
+          exit 1

.syncpackrc

@@ -0,0 +1,18 @@
+{
+	"dev": true,
+	"filter": "^(?:react|react-dom)$",
+	"indent": "\t",
+	"overrides": true,
+	"peer": true,
+	"pnpmOverrides": true,
+	"prod": true,
+	"semverRange": "^",
+	"workspace": true,
+	"versionGroups": [
+		{
+			"dependencies": [ "react", "react-dom" ],
+			"packages": [ "**" ],
+			"pinVersion": "^17.0.2"
+		}
+	]
+}

bin/pre-push.sh

@@ -23,4 +23,12 @@ if [ $PROTECTED_BRANCH = $CURRENT_BRANCH ]; then
 	exit 1
 fi
 
+pnpm exec syncpack -- list-mismatches
+
+if [ $? -ne 0 ]; then
+	echo "You must sync the dependencies listed above before you can push this branch."
+	echo "This can usually be accomplished automatically by updating the pinned version in `.syncpackrc` and then running \`pnpm run sync-dependencies\`."
+	exit 1
+fi
+
 php tools/monorepo/check-changelogger-use.php $PROTECTED_BRANCH $CURRENT_BRANCH

package.json

@@ -23,7 +23,8 @@
 		"storybook": "./tools/storybook/import-wp-css-storybook.sh && BABEL_ENV=storybook STORYBOOK=true start-storybook -c ./tools/storybook/.storybook -p 6007 --ci",
 		"storybook-rtl": "USE_RTL_STYLE=true pnpm run storybook",
 		"create-extension": "node ./tools/create-extension/index.js",
-		"cherry-pick": "node ./tools/cherry-pick/bin/run"
+		"cherry-pick": "node ./tools/cherry-pick/bin/run",
+		"sync-dependencies": "pnpm exec syncpack -- fix-mismatches"
 	},
 	"devDependencies": {
 		"@babel/preset-env": "^7.16.11",
@@ -68,6 +69,7 @@
 		"request": "^2.88.2",
 		"sass": "^1.49.9",
 		"sass-loader": "^10.2.1",
+		"syncpack": "^8.2.4",
 		"turbo": "^1.2.16",
 		"typescript": "4.2.4",
 		"url-loader": "^1.1.2",

packages/js/components/changelog/fix-34112

@@ -0,0 +1,5 @@
+Significance: patch
+Type: tweak
+Comment: Minor update of react and react-dom to 17.0.2.
+
+

packages/js/components/package.json

@@ -72,8 +72,8 @@
 	"peerDependencies": {
 		"@wordpress/data": "^6.2.1",
 		"lodash": "^4.17.0",
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -111,7 +111,7 @@
 		"jest": "^27.5.1",
 		"jest-cli": "^27.5.1",
 		"postcss-loader": "^3.0.0",
-		"react": "^17.0.0",
+		"react": "^17.0.2",
 		"rimraf": "^3.0.2",
 		"sass-loader": "^10.2.1",
 		"ts-jest": "^27.1.3",

packages/js/customer-effort-score/changelog/fix-34112

@@ -0,0 +1,5 @@
+Significance: patch
+Type: tweak
+Comment: Minor update of react and react-dom to 17.0.2.
+
+

packages/js/customer-effort-score/package.json

@@ -58,8 +58,8 @@
 		"webpack-cli": "^3.3.12"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2"
 	},
 	"scripts": {
 		"turbo:build": "pnpm run build:js && pnpm run build:css",

packages/js/data/changelog/fix-34112

@@ -0,0 +1,5 @@
+Significance: patch
+Type: tweak
+Comment: Minor update of react and react-dom to 17.0.2.
+
+

packages/js/data/package.json

@@ -68,8 +68,8 @@
 	"peerDependencies": {
 		"@wordpress/core-data": "^4.1.0",
 		"moment": "^2.18.1",
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2"
 	},
 	"scripts": {
 		"turbo:build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",

packages/js/experimental/changelog/fix-34112

@@ -0,0 +1,5 @@
+Significance: patch
+Type: tweak
+Comment: Minor update of react and react-dom to 17.0.2.
+
+

packages/js/experimental/package.json

@@ -71,8 +71,8 @@
 		"webpack-cli": "^3.3.12"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2"
 	},
 	"scripts": {
 		"turbo:build": "pnpm run build:js && pnpm run build:css",

packages/js/notices/package.json

@@ -29,8 +29,8 @@
 	},
 	"peerDependencies": {
 		"lodash": "^4.17.0",
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2"
 	},
 	"publishConfig": {
 		"access": "public"