Update to createRoot for React 18

package.json

@@ -60,8 +60,8 @@
     "@types/pako": "^2.0.0",
     "@types/parse-git-config": "^3.0.1",
     "@types/parse-path": "^7.0.0",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.3",
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
     "@types/react-transition-group": "^4.4.5",
     "@types/redux-logger": "^3.0.9",
     "@types/redux-mock-store": "^1.0.3",
@@ -124,12 +124,12 @@
     "parse-path": "^7.0.0",
     "parse-url": "^8.1.0",
     "re-reselect": "^4.0.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-ace": "^10.1.0",
     "react-dnd": "^15.1.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dnd-preview": "^7.1.3",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-redux": "^8.0.5",
     "react-transition-group": "^4.4.5",
     "reactflow": "^11.7.0",

src/app.tsx

@@ -1,22 +1,40 @@
+/**
+ * This file will automatically be loaded by webpack and run in the "renderer" context.
+ * To learn more about the differences between the "main" and the "renderer" context in
+ * Electron, visit:
+ *
+ * https://electronjs.org/docs/tutorial/application-architecture#main-and-renderer-processes
+ *
+ * By default, Node.js integration in this file is disabled. When enabling Node.js integration
+ * in a renderer process, please be aware of potential security implications.
+ */
 import React, { useEffect } from 'react';
-import { Provider } from 'react-redux';
-import ReactDOM from 'react-dom';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import './index.css';
+import { createRoot } from 'react-dom/client';
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import { version } from '../package.json';
 import './assets/style.css';
-import redux from './store/store';
-import { importFiletypes } from './store/thunks/filetypes';
+import Canvas from './components/Canvas/Canvas';
 import filetypesJson from './containers/filetypes.json';
-import { PersistGate } from 'redux-persist/integration/react';
+import './index.css';
 import { FSCacheProvider } from './store/cache/FSCache';
-import Canvas from './components/Canvas';
 import { Filetype } from './store/slices/filetypes';
+import redux from './store/store';
+import { importFiletypes } from './store/thunks/filetypes';
 
-const App = (): JSX.Element => {
+export const isRenderer = typeof process === 'undefined' || !process || process.type === 'renderer';
 
+const App = (): JSX.Element => {
   useEffect(() => {
-    console.log(`process.env.NODE_ENV: ${process.env.NODE_ENV}`);
+    if (process.env.NODE_ENV === 'development') {
+      console.log(
+        `🧪 Synectic: ${version}, NODE_ENV: ${process.env.NODE_ENV}, Electron: ${
+          isRenderer ? 'renderer' : 'main'
+        } 🧪`
+      );
+    }
     redux.store.dispatch(importFiletypes(filetypesJson as Omit<Filetype, 'id'>[])); // load all supported filetype handlers into Redux store
     // redux.persistor.purge(); // remove all cached Redux data
   }, []); // run the effect only once; after the first render
@@ -34,5 +52,6 @@ const App = (): JSX.Element => {
   );
 };
 
-const rootElement = document.getElementById('root');
-ReactDOM.render(<App />, rootElement);
+const container = document.getElementById('root');
+const root = createRoot(container!); // eslint-disable-line @typescript-eslint/no-non-null-assertion
+root.render(<App />);

src/store/store.ts

@@ -40,7 +40,7 @@ const persistConfig = {
 };
 
 const logger = createLogger({
-  predicate: (getState, action) =>
+  predicate: (_getState, action) =>
     !action.type.startsWith('filetypes/') && !action.type.startsWith('persist/'),
   duration: true,
   collapsed: true,

yarn.lock

@@ -2513,12 +2513,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^18.0.3":
-  version: 18.0.6
-  resolution: "@types/react-dom@npm:18.0.6"
+"@types/react-dom@npm:^18.0.11":
+  version: 18.0.11
+  resolution: "@types/react-dom@npm:18.0.11"
   dependencies:
     "@types/react": "*"
-  checksum: db571047af1a567631758700b9f7d143e566df939cfe5fbf7535347cc0c726a1cdbb5e3f8566d076e54cf708b6c1166689de194a9ba09ee35efc9e1d45911685
+  checksum: 579691e4d5ec09688087568037c35edf8cfb1ab3e07f6c60029280733ee7b5c06d66df6fcc90786702c93ac8cb13bc7ff16c79ddfc75d082938fbaa36e1cdbf4
   languageName: node
   linkType: hard
 
@@ -2531,7 +2531,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:^18.0.9":
+"@types/react@npm:*":
   version: 18.0.21
   resolution: "@types/react@npm:18.0.21"
   dependencies:
@@ -2553,6 +2553,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react@npm:^18.0.37":
+  version: 18.0.37
+  resolution: "@types/react@npm:18.0.37"
+  dependencies:
+    "@types/prop-types": "*"
+    "@types/scheduler": "*"
+    csstype: ^3.0.2
+  checksum: 6a6c8feada1d6aa2d01a38c44ce09598d93688e97ed21511d5e34fd7fe748b760dd957a5ac0725f5643d8d7e1a0ade6478ebd4be96c9605c5d6816b17ad35d2d
+  languageName: node
+  linkType: hard
+
 "@types/redux-logger@npm:^3.0.9":
   version: 3.0.9
   resolution: "@types/redux-logger@npm:3.0.9"
@@ -10614,16 +10625,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^17.0.2":
-  version: 17.0.2
-  resolution: "react-dom@npm:17.0.2"
+"react-dom@npm:^18.2.0":
+  version: 18.2.0
+  resolution: "react-dom@npm:18.2.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    scheduler: ^0.20.2
+    scheduler: ^0.23.0
   peerDependencies:
-    react: 17.0.2
-  checksum: 1c1eaa3bca7c7228d24b70932e3d7c99e70d1d04e13bb0843bbf321582bc25d7961d6b8a6978a58a598af2af496d1cedcfb1bf65f6b0960a0a8161cb8dab743c
+    react: ^18.2.0
+  checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc
   languageName: node
   linkType: hard
 
@@ -10706,13 +10716,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^17.0.2":
-  version: 17.0.2
-  resolution: "react@npm:17.0.2"
+"react@npm:^18.2.0":
+  version: 18.2.0
+  resolution: "react@npm:18.2.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: b254cc17ce3011788330f7bbf383ab653c6848902d7936a87b09d835d091e3f295f7e9dd1597c6daac5dc80f90e778c8230218ba8ad599f74adcc11e33b9d61b
+  checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b
   languageName: node
   linkType: hard
 
@@ -11198,13 +11207,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.20.2":
-  version: 0.20.2
-  resolution: "scheduler@npm:0.20.2"
+"scheduler@npm:^0.23.0":
+  version: 0.23.0
+  resolution: "scheduler@npm:0.23.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: c4b35cf967c8f0d3e65753252d0f260271f81a81e427241295c5a7b783abf4ea9e905f22f815ab66676f5313be0a25f47be582254db8f9241b259213e999b8fc
+  checksum: d79192eeaa12abef860c195ea45d37cbf2bbf5f66e3c4dcd16f54a7da53b17788a70d109ee3d3dde1a0fd50e6a8fc171f4300356c5aee4fc0171de526bf35f8a
   languageName: node
   linkType: hard
 
@@ -11955,8 +11963,8 @@ __metadata:
     "@types/pako": ^2.0.0
     "@types/parse-git-config": ^3.0.1
     "@types/parse-path": ^7.0.0
-    "@types/react": ^18.0.9
-    "@types/react-dom": ^18.0.3
+    "@types/react": ^18.0.37
+    "@types/react-dom": ^18.0.11
     "@types/react-transition-group": ^4.4.5
     "@types/redux-logger": ^3.0.9
     "@types/redux-mock-store": ^1.0.3
@@ -12002,14 +12010,14 @@ __metadata:
     parse-path: ^7.0.0
     parse-url: ^8.1.0
     re-reselect: ^4.0.1
-    react: ^17.0.2
+    react: ^18.2.0
     react-ace: ^10.1.0
     react-dnd: ^15.1.1
     react-dnd-html5-backend: ^16.0.1
     react-dnd-preview: ^7.1.3
     react-dnd-test-backend: ^16.0.1
     react-dnd-test-utils: ^16.0.1
-    react-dom: ^17.0.2
+    react-dom: ^18.2.0
     react-redux: ^8.0.5
     react-transition-group: ^4.4.5
     reactflow: ^11.7.0