TASK: Upgrade React to 18

neos · Jan 31, 2023 · 104107f · 104107f
1 parent 63fbfab
commit 104107f
Show file tree

Hide file tree

Showing 6 changed files with 252 additions and 907 deletions.
diff --git a/Resources/Private/JavaScript/index.tsx b/Resources/Private/JavaScript/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { RedirectList } from './components';
 import { RedirectProvider, IntlProvider } from './providers';
@@ -44,7 +44,8 @@ window.addEventListener(
             return I18n.translate(id, label, 'Neos.RedirectHandler.Ui', 'Modules', args);
         };
 
-        ReactDOM.render(
+        const root = createRoot(redirectsList);
+        root.render(
             <RedirectProvider
                 value={{
                     hostOptions,
@@ -65,8 +66,7 @@ window.addEventListener(
                         initialStatusCodeFilter={initialStatusCodeFilter}
                     />
                 </IntlProvider>
-            </RedirectProvider>,
-            redirectsList
+            </RedirectProvider>
         );
     },
     true

diff --git a/Resources/Private/JavaScript/package.json b/Resources/Private/JavaScript/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "@neos-project/redirecthandler-ui-app",
+  "version": "1.0.0",
+  "license": "GNU GPLv3",
+  "private": true,
+  "source": "index.tsx",
+  "app": "../../Public/Assets/main.bundle.js",
+  "targets": {
+    "app": {}
+  },
+  "scripts": {
+    "watch": "parcel watch",
+    "build": "parcel build"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-datepicker": "^2.10.1",
+    "react-dom": "^18.2.0"
+  }
+}
diff --git a/Resources/Private/JavaScript/tsconfig.json b/Resources/Private/JavaScript/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./",
+    "module": "esnext",
+    "jsx": "react"
+  }
+}
diff --git a/package.json b/package.json
@@ -1,20 +1,16 @@
 {
-  "name": "neos.redirecthandler.ui",
+  "name": "@neos-project/redirecthandler-ui",
   "version": "1.0.0",
   "description": "React UI for managing redirects in Neos CMS",
   "license": "GNU GPLv3",
   "author": "Contributors of the Neos Project - www.neos.io",
   "private": true,
-  "source": "Resources/Private/JavaScript/index.tsx",
-  "app": "Resources/Public/Assets/main.bundle.js",
-  "targets": {
-    "app": {
-      "publicUrl": "."
-    }
+  "engines": {
+    "node": ">=16"
   },
   "scripts": {
-    "watch": "parcel watch",
-    "build": "parcel build",
+    "watch": "yarn workspace @neos-project/redirecthandler-ui-app watch",
+    "build": "yarn workspace @neos-project/redirecthandler-ui-app build",
     "lint": "eslint Resources/Private/JavaScript/**/* && stylelint Resources/Private/Styles/**/*.scss"
   },
   "repository": {
@@ -25,13 +21,22 @@
     "url": "https://github.com/neos/redirecthandler-ui/issues"
   },
   "homepage": "https://github.com/neos/redirecthandler-ui#readme",
+  "workspaces": [
+    "Resources/Private/JavaScript"
+  ],
+  "dependencies": {
+    "@neos-project/redirecthandler-ui-app": "*"
+  },
   "devDependencies": {
     "@neos-project/eslint-config-neos": "^2.3.0",
+    "@parcel/reporter-bundle-analyzer": "^2.8.3",
+    "@parcel/transformer-typescript-tsc": "^2.8.2",
+    "@parcel/transformer-typescript-types": "2.8.3",
     "@parcel/transformer-sass": "2.8.3",
     "@types/node": "^18.11.15",
-    "@types/react": "^17.0.15",
+    "@types/react": "^18.0.27",
     "@types/react-datepicker": "^2.9.5",
-    "@types/react-dom": "^17.0.9",
+    "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "^5.46.1",
     "@typescript-eslint/parser": "^5.46.1",
     "eslint": "^8.29.0",
@@ -41,19 +46,12 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "parcel": "^2.8.3",
     "prettier": "^2.8.1",
-    "process": "^0.11.10",
-    "sass": "^1.36.0",
-    "stylelint": "^13.13.1",
-    "stylelint-config-recommended-scss": "^4.3.0",
-    "stylelint-prettier": "^1.2.0",
-    "stylelint-scss": "^3.20.1",
+    "stylelint": "^14.16.1",
+    "stylelint-config-recommended-scss": "^8.0.0",
+    "stylelint-prettier": "^2.0.0",
+    "stylelint-scss": "^4.3.0",
     "typescript": "^4.9.4"
   },
-  "dependencies": {
-    "react": "^17.0.2",
-    "react-datepicker": "^2.10.1",
-    "react-dom": "^17.0.2"
-  },
   "browserslist": [
     "> 0.5%",
     "last 2 versions",

diff --git a/tsconfig.json b/tsconfig.json
@@ -7,10 +7,11 @@
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
     "jsx": "react",
+    "rootDir": "./Resources/Private/JavaScript",
     "typeRoots": ["./Resources/Private/JavaScript/typings"]
   },
   "include": [
-    "Resources/Private/JavaScript/**/*"
+    "./Resources/Private/JavaScript/**/*"
   ],
   "exclude": [
     "node_modules"