Upgrade to React 18

datarhei · Nov 4, 2022 · 1fffde2 · 1fffde2
1 parent 157d06c
commit 1fffde2
Show file tree

Hide file tree

Showing 6 changed files with 1,387 additions and 759 deletions.
diff --git a/Caddyfile b/Caddyfile
@@ -1,4 +1,4 @@
-http://127.0.0.1:3000
+:3000
 
 encode zstd gzip
 file_server {

diff --git a/Dockerfile b/Dockerfile
@@ -1,5 +1,5 @@
-ARG NODE_IMAGE=node:18.6.0-alpine3.15
-ARG CADDY_IMAGE=caddy:2.5.2-alpine
+ARG NODE_IMAGE=node:19.0-alpine3.16
+ARG CADDY_IMAGE=caddy:2.6.2-alpine
 
 FROM $NODE_IMAGE as builder
 
@@ -13,13 +13,8 @@ COPY . /ui
 WORKDIR /ui
 
 RUN cd /ui && \
-	npm config set fetch-retries 10 && \
-	npm config set fetch-retry-mintimeout 100000 && \
-	npm config set fetch-retry-maxtimeout 600000 && \
-	npm config set cache-min 3600 && \
-	npm config ls -l && \
-	npm install && \
-	npm run build
+ 	yarn install && \
+ 	yarn run build
 
 FROM $CADDY_IMAGE
 
@@ -30,4 +25,4 @@ WORKDIR /ui
 
 EXPOSE 3000
 
-CMD [ "caddy", "run", "-config", "/ui/Caddyfile" ]
+CMD [ "caddy", "run", "--config", "/ui/Caddyfile" ]
diff --git a/README.md b/README.md
@@ -27,21 +27,14 @@ $ npm run i18n-compile
 ```
 
 ### Known outdated dependencies
-Requires MUI 5.2+ & React 18 compatibility. Clappr-Player upgrade (or removal).
-
 ```sh
-@mui/material                             5.1.1  →            5.9.0     
-@mui/styles                              ^5.1.1  →           ^5.9.0     
-@testing-library/dom                    ^8.13.0  →          ^8.16.0     
-@testing-library/jest-dom                ^4.2.4  →          ^5.16.4     
-@testing-library/react                  ^12.1.5  →          ^13.3.0     
-@testing-library/user-event             ^13.5.0  →          ^14.2.5     
-eslint                                  ^7.32.0  →          ^8.19.0     
-hls.js                                 ^0.14.17  →           ^1.1.5     
-react                                   ^17.0.2  →          ^18.2.0     
-react-dom                               ^17.0.2  →          ^18.2.0     
-react-scripts                            ^4.0.3  →           ^5.0.1     
-typescript                               ^3.9.7  →           ^4.7.4 
+@testing-library/dom          ^8.13.0  →  ^8.19.0
+@testing-library/jest-dom      ^4.2.4  →  ^5.16.5
+@testing-library/user-event   ^13.5.0  →  ^14.4.3
+eslint                        ^7.32.0  →  ^8.26.0
+hls.js                       ^0.14.17  →   ^1.2.4
+react-router-dom               ^6.3.0  →   ^6.4.3
+react-scripts                  ^4.0.3  →   ^5.0.1
 ```
 
 ## License

diff --git a/package.json b/package.json
@@ -5,47 +5,47 @@
 	"private": false,
 	"license": "Apache-2.0",
 	"dependencies": {
-		"@auth0/auth0-spa-js": "^1.22.3",
-		"@clappr/core": "^0.4.21",
+		"@auth0/auth0-spa-js": "^2.0.0",
+		"@clappr/core": "^0.4.22",
 		"@clappr/hlsjs-playback": "^0.6.0",
 		"@clappr/plugins": "^0.4.16",
 		"@clappr/stats-plugin": "^0.2.0",
-		"@emotion/react": "^11.10.0",
-		"@emotion/styled": "^11.10.0",
-		"@fontsource/dosis": "^4.5.9",
+		"@emotion/react": "^11.10.5",
+		"@emotion/styled": "^11.10.5",
+		"@fontsource/dosis": "^4.5.10",
 		"@fontsource/roboto": "^4.5.8",
-		"@fortawesome/fontawesome-svg-core": "^6.1.2",
-		"@fortawesome/free-brands-svg-icons": "^6.1.2",
-		"@fortawesome/free-solid-svg-icons": "^6.1.2",
+		"@fortawesome/fontawesome-svg-core": "^6.2.0",
+		"@fortawesome/free-brands-svg-icons": "^6.2.0",
+		"@fortawesome/free-solid-svg-icons": "^6.2.0",
 		"@fortawesome/react-fontawesome": "^0.2.0",
 		"@lingui/core": "^3.14.0",
 		"@lingui/macro": "^3.14.0",
 		"@lingui/react": "^3.14.0",
-		"@mui/icons-material": "^5.10.2",
-		"@mui/lab": "^5.0.0-alpha.96",
-		"@mui/material": "5.1.1",
-		"@mui/styles": "^5.1.1",
+		"@mui/icons-material": "^5.10.9",
+		"@mui/lab": "^5.0.0-alpha.106",
+		"@mui/material": "^5.10.12",
+		"@mui/styles": "^5.10.10",
 		"@testing-library/dom": "^8.13.0",
 		"@testing-library/jest-dom": "^4.2.4",
-		"@testing-library/react": "^12.1.5",
+		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^13.5.0",
 		"babel-plugin-macros": "^3.1.0",
 		"eslint": "^7.32.0",
 		"handlebars": "^4.7.7",
 		"hls.js": "^0.14.17",
 		"jwt-decode": "^3.1.2",
 		"make-plural": "^7.1.0",
-		"react": "^17.0.2",
+		"react": "^18.2.0",
 		"react-colorful": "^5.6.1",
 		"react-device-detect": "^2.2.2",
-		"react-dom": "^17.0.2",
+		"react-dom": "^18.2.0",
 		"react-router-dom": "^6.3.0",
 		"react-scripts": "^4.0.3",
-		"semver": "^7.3.7",
-		"typescript": "^3.9.7",
+		"semver": "^7.3.8",
+		"typescript": "^4.8.4",
 		"url-parse": "^1.5.10",
-		"uuid": "^8.3.2",
-		"video.js": "^7.20.2",
+		"uuid": "^9.0.0",
+		"video.js": "^7.20.3",
 		"videojs-overlay": "^2.1.5"
 	},
 	"scripts": {
@@ -82,7 +82,7 @@
 		]
 	},
 	"devDependencies": {
-		"@babel/core": "^7.18.13",
+		"@babel/core": "^7.19.6",
 		"@lingui/cli": "^3.14.0",
 		"babel-core": "^7.0.0-bridge.0",
 		"prettier": "^2.7.1",

diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
 import '@fontsource/dosis';
@@ -16,12 +16,11 @@ if (urlParams.has('address') === true) {
 	address = urlParams.get('address');
 }
 
-ReactDOM.render(
+createRoot(document.getElementById('root')).render(
 	<StyledEngineProvider injectFirst>
 		<ThemeProvider theme={theme}>
 			<CssBaseline />
 			<RestreamerUI address={address} />
 		</ThemeProvider>
-	</StyledEngineProvider>,
-	document.getElementById('root')
+	</StyledEngineProvider>
 );