Upgrade to React 18 (+associated fixes)

package.json

@@ -158,19 +158,20 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.13.8",
-    "@babel/plugin-proposal-class-properties": "^7.12.13",
-    "@babel/preset-env": "^7.13.8",
-    "@babel/preset-react": "^7.12.13",
+    "@babel/core": "^7.23.6",
+    "@babel/preset-env": "^7.23.6",
+    "@babel/runtime": "^7.23.6",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-react": "^7.23.3",
     "concurrently": "^5.3.0",
     "cross-env": "^7.0.3",
     "electron": "^26.6.2",
     "electron-builder": "^24.9.1",
     "node-gyp": "^9.4.0",
     "parcel-bundler": "^1.12.5",
-    "react": "^17.0.0",
+    "react": "18.2.0",
     "react-beautiful-dnd": "^13.1.0",
-    "react-dom": "^17.0.0",
+    "react-dom": "18.2.0",
     "sass": "^1.54.0",
     "wait-on": "^5.3.0"
   },

src/components/BrightnessPanel.jsx

@@ -400,6 +400,9 @@ export default class BrightnessPanel extends PureComponent {
     // Update brightness every interval, if changed
     this.resetBrightnessInterval()
 
+    window.requestSettings()
+    window.requestMonitors()
+    window.reactReady = true
   }
 
   componentDidUpdate() {

src/components/IntroWindow.jsx

@@ -13,6 +13,7 @@ export default class IntroWindow extends PureComponent {
 
     componentDidMount() {
         window.addEventListener("localizationUpdated", (e) => { T.setLocalizationData(e.detail.desired, e.detail.default); this.forceUpdate() })
+        window.ipc.send('request-localization')
     }
 
     render() {

src/components/SettingsWindow.jsx

@@ -195,6 +195,9 @@ export default class SettingsWindow extends PureComponent {
             window.checkForUpdates()
         }
         window.ipc.send('get-window-history')
+        window.ipc.send("sendSettingsWindowPos")
+        window.ipc.send('request-localization')
+        window.reactReady = true
     }
 
 

src/intro.js

@@ -1,7 +1,5 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
 import IntroWindow from "./components/IntroWindow";
 
-window.ipc.send('request-localization')
-
-ReactDOM.render(<IntroWindow />, document.getElementById("root"));
+createRoot(document.getElementById("root")).render(<IntroWindow />)

src/panel-preload.js

@@ -93,6 +93,7 @@ function updateBrightness(index, level) {
 }
 
 function detectSunValley() {
+    if(!window.reactReady) return false;
     try {
         // Detect new Fluent Icons (Windows build 21327+)
         if(window.settings.enableSunValley && document.fonts.check("12px Segoe Fluent Icons")) {
@@ -442,6 +443,7 @@ window.allMonitors = []
 window.lastUpdate = Date.now()
 window.showPanel = false
 window.isAcrylic = false
+window.reactReady = false
 window.theme = "dark"
 window.settings = {}
 window.jsVars = getArgumentVars()

src/panel.js

@@ -1,15 +1,12 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
 import BrightnessPanel from "./components/BrightnessPanel";
 
 if (window.settings == undefined) window.settings = {}
 
 window.ipc.send('request-localization')
 
-ReactDOM.render(<BrightnessPanel monitors={window.allMonitors} lastUpdate={window.lastUpdate} />, document.getElementById("root"), () => {
-    requestSettings()
-    requestMonitors()
-});
+createRoot(document.getElementById("root")).render(<BrightnessPanel monitors={window.allMonitors} lastUpdate={window.lastUpdate} />)
 
 window.updateMica = () => {
     const pos = [window.winPosition[0], window.winPosition[1]]

src/settings-preload.js

@@ -73,6 +73,7 @@ function resetSettings() {
 }
 
 function detectSunValley() {
+    if(!window.reactReady) return false;
     try {
         // Detect new Fluent Icons (Windows build 21327+)
         if(window.settings.enableSunValley && document.fonts.check("12px Segoe Fluent Icons")) {
@@ -254,6 +255,7 @@ window.openURL = openURL
 window.allMonitors = []
 window.lastUpdate = Date.now()
 window.showPanel = false
+window.reactReady = false
 window.settings = getArgumentVars().settings
 window.accent = "cyan"
 window.getSunCalcTimes = getSunCalcTimes

src/settings.js

@@ -1,9 +1,7 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
 import SettingsWindow from "./Components/SettingsWindow";
 
-window.ipc.send('request-localization')
-
 const micaDisplays = document.querySelector("#mica .displays")
 
 function updateMicaPosition(pos = [0, 0]) {
@@ -21,6 +19,4 @@ window.addEventListener("focus", () => {
     document.body.dataset.focused = "true"
 })
 
-ReactDOM.render(<SettingsWindow theme={window.settings.theme} />, document.getElementById("settings"));
-
-window.ipc.send("sendSettingsWindowPos")
+createRoot(document.getElementById("settings")).render(<SettingsWindow theme={window.settings.theme} />)