add backwards compat for react 17

wcpos · Jun 28, 2023 · d075594 · d075594
1 parent 639ab16
commit d075594
Show file tree

Hide file tree

Showing 6 changed files with 527 additions and 224 deletions.
diff --git a/package.json b/package.json
@@ -44,8 +44,8 @@
   },
   "homepage": "https://wcpos.com",
   "devDependencies": {
-    "@wordpress/babel-plugin-makepot": "5.19.0",
-    "@wordpress/env": "8.1.1",
+    "@wordpress/babel-plugin-makepot": "5.20.0",
+    "@wordpress/env": "8.2.0",
     "husky": "8.0.3",
     "jsdoc": "^4.0.2",
     "npm-run-all": "4.1.5",

diff --git a/packages/analytics/package.json b/packages/analytics/package.json
@@ -5,15 +5,15 @@
     "start": "../../node_modules/.bin/webpack --watch"
   },
   "dependencies": {
-    "@tanstack/react-query": "^4.29.15",
+    "@tanstack/react-query": "^4.29.19",
     "@transifex/native": "^5.3.0",
     "@transifex/react": "^5.3.0",
     "@woocommerce/components": "^12.0.0",
-    "@wordpress/api-fetch": "6.32.0",
-    "@wordpress/components": "^25.1.0",
-    "@wordpress/element": "5.12.0",
-    "@wordpress/hooks": "^3.35.0",
-    "@wordpress/url": "3.36.0",
+    "@wordpress/api-fetch": "6.33.0",
+    "@wordpress/components": "^25.1.3",
+    "@wordpress/element": "5.13.0",
+    "@wordpress/hooks": "^3.36.0",
+    "@wordpress/url": "3.37.0",
     "classnames": "2.3.2",
     "lodash": "4.17.21",
     "react": "18.2.0",
@@ -28,18 +28,18 @@
     "@babel/preset-typescript": "7.22.5",
     "@babel/runtime": "7.22.5",
     "@svgr/webpack": "8.0.1",
-    "@tanstack/react-query-devtools": "^4.29.15",
+    "@tanstack/react-query-devtools": "^4.29.19",
     "@transifex/cli": "^5.3.0",
     "@types/jest": "29.5.2",
     "@types/lodash": "4.14.195",
-    "@types/react": "18.2.13",
+    "@types/react": "18.2.14",
     "@types/react-beautiful-dnd": "13.1.4",
     "@types/react-dom": "18.2.6",
     "@types/wordpress__components": "^23.0.1",
-    "@typescript-eslint/eslint-plugin": "5.60.0",
-    "@typescript-eslint/parser": "5.60.0",
+    "@typescript-eslint/eslint-plugin": "5.60.1",
+    "@typescript-eslint/parser": "5.60.1",
     "@wcpos/eslint-config": "*",
-    "@wordpress/env": "8.1.1",
+    "@wordpress/env": "8.2.0",
     "autoprefixer": "10.4.14",
     "babel-loader": "9.1.2",
     "css-loader": "6.8.1",
@@ -61,8 +61,8 @@
     "style-loader": "3.3.3",
     "terser-webpack-plugin": "5.3.9",
     "ts-loader": "^9.4.3",
-    "typescript": "5.1.3",
-    "webpack": "5.87.0",
+    "typescript": "5.1.5",
+    "webpack": "5.88.0",
     "webpack-bundle-analyzer": "^4.9.0",
     "webpack-cli": "5.1.4",
     "webpack-livereload-plugin": "3.0.2",

diff --git a/packages/eslint/package.json b/packages/eslint/package.json
@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "@rushstack/eslint-patch": "^1.3.2",
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
-    "@typescript-eslint/parser": "5.60.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "5.60.1",
     "@wcpos/tsconfig": "*",
     "eslint": "8.43.0",
     "eslint-config-airbnb": "19.0.4",
@@ -27,6 +27,6 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-react-native": "4.0.0",
     "prettier": "2.8.8",
-    "typescript": "^5.1.3"
+    "typescript": "^5.1.5"
   }
 }
diff --git a/packages/settings/package.json b/packages/settings/package.json
@@ -7,13 +7,13 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@headlessui/tailwindcss": "^0.1.3",
-    "@tanstack/react-query": "^4.29.15",
+    "@tanstack/react-query": "^4.29.19",
     "@transifex/native": "^5.3.0",
     "@transifex/react": "^5.3.0",
-    "@wordpress/api-fetch": "6.32.0",
-    "@wordpress/components": "^25.1.0",
-    "@wordpress/element": "5.12.0",
-    "@wordpress/url": "3.36.0",
+    "@wordpress/api-fetch": "6.33.0",
+    "@wordpress/components": "^25.1.3",
+    "@wordpress/element": "5.13.0",
+    "@wordpress/url": "3.37.0",
     "classnames": "2.3.2",
     "lodash": "4.17.21",
     "react": "18.2.0",
@@ -29,18 +29,18 @@
     "@babel/preset-typescript": "7.22.5",
     "@babel/runtime": "7.22.5",
     "@svgr/webpack": "8.0.1",
-    "@tanstack/react-query-devtools": "^4.29.15",
+    "@tanstack/react-query-devtools": "^4.29.19",
     "@transifex/cli": "^5.3.0",
     "@types/jest": "29.5.2",
     "@types/lodash": "4.14.195",
-    "@types/react": "18.2.13",
+    "@types/react": "18.2.14",
     "@types/react-beautiful-dnd": "13.1.4",
     "@types/react-dom": "18.2.6",
     "@types/wordpress__components": "^23.0.1",
-    "@typescript-eslint/eslint-plugin": "5.60.0",
-    "@typescript-eslint/parser": "5.60.0",
+    "@typescript-eslint/eslint-plugin": "5.60.1",
+    "@typescript-eslint/parser": "5.60.1",
     "@wcpos/eslint-config": "*",
-    "@wordpress/env": "8.1.1",
+    "@wordpress/env": "8.2.0",
     "autoprefixer": "10.4.14",
     "babel-loader": "9.1.2",
     "css-loader": "6.8.1",
@@ -63,8 +63,8 @@
     "tailwindcss": "3.3.2",
     "terser-webpack-plugin": "5.3.9",
     "ts-loader": "^9.4.3",
-    "typescript": "5.1.3",
-    "webpack": "5.87.0",
+    "typescript": "5.1.5",
+    "webpack": "5.88.0",
     "webpack-bundle-analyzer": "^4.9.0",
     "webpack-cli": "5.1.4",
     "webpack-livereload-plugin": "3.0.2",

diff --git a/packages/settings/src/index.tsx b/packages/settings/src/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { createRoot } from '@wordpress/element';
+import { createRoot, render } from '@wordpress/element';
 import { getFragment, isValidFragment } from '@wordpress/url';
 import { ErrorBoundary } from 'react-error-boundary';
 
@@ -47,13 +47,21 @@ const App = () => {
 	);
 };
 
+const Root = () => {
+	return (
+		<ErrorBoundary FallbackComponent={Error}>
+			<QueryClientProvider client={queryClient}>
+				<App />
+				<ReactQueryDevtools initialIsOpen={true} />
+			</QueryClientProvider>
+		</ErrorBoundary>
+	);
+};
+
 const el = document.getElementById('woocommerce-pos-settings');
-const root = createRoot(el);
-root.render(
-	<ErrorBoundary FallbackComponent={Error}>
-		<QueryClientProvider client={queryClient}>
-			<App />
-			<ReactQueryDevtools initialIsOpen={true} />
-		</QueryClientProvider>
-	</ErrorBoundary>
-);
+
+if (createRoot) {
+	createRoot(el).render(<Root />);
+} else {
+	render(<Root />, el);
+}