feat(ReactAdaptor): upgrade react to react 18

src/svelte-interface/components/ColourPicker.tsx

@@ -25,45 +25,52 @@ const defaultPresets = [
 ];
 
 function Picker() {
-  const [customThemeColor, setCustomThemeColor] = useState(() => {
-    return settingsState.selectedColor
-  });
-  const [presets, setPresets] = useState(() => {
-    const savedPresets = localStorage.getItem('colorPickerPresets');
-    return savedPresets ? JSON.parse(savedPresets) : defaultPresets;
-  });
+  const [customThemeColor, setCustomThemeColor] = useState<string | null>(null);
+  const [presets, setPresets] = useState<string[]>(defaultPresets);
+
+  useEffect(() => {
+    setCustomThemeColor(settingsState.selectedColor);
+    setPresets(() => {
+      const savedPresets = localStorage.getItem('colorPickerPresets');
+      return savedPresets ? JSON.parse(savedPresets) : defaultPresets;
+    });
+  }, []);
 
 
   useEffect(() => {
     // on component dismount, save the presets to local storage
     return () => {
-      // Check if the selected color is already in the presets
-      const existingIndex = presets.indexOf(customThemeColor);
+      if (customThemeColor) {
+        // Check if the selected color is already in the presets
+        const existingIndex = presets.indexOf(customThemeColor);
 
-      let updatedPresets;
-      if (existingIndex > -1) {
-        // If the color exists, move it to the front
-        updatedPresets = [
-          customThemeColor,
-          ...presets.slice(0, existingIndex),
-          ...presets.slice(existingIndex + 1)
-        ];
-      } else {
-        // If the color is new, add it to the front and slice the array
-        updatedPresets = [customThemeColor, ...presets].slice(0, 18);
+        let updatedPresets;
+        if (existingIndex > -1) {
+          // If the color exists, move it to the front
+          updatedPresets = [
+            customThemeColor,
+            ...presets.slice(0, existingIndex),
+            ...presets.slice(existingIndex + 1)
+          ];
+        } else {
+          // If the color is new, add it to the front and slice the array
+          updatedPresets = [customThemeColor, ...presets].slice(0, 18);
+        }
+
+        setPresets(updatedPresets);
+        localStorage.setItem('colorPickerPresets', JSON.stringify(updatedPresets));
       }
-
-      setPresets(updatedPresets);
-      localStorage.setItem('colorPickerPresets', JSON.stringify(updatedPresets));
     }
   }, []);
 
   useEffect(() => {
-    settingsState.selectedColor = customThemeColor;
+    if (customThemeColor) {
+      settingsState.selectedColor = customThemeColor;
+    }
   }, [customThemeColor]);
 
   return (
-    <ColorPicker disableDarkMode={true} presets={presets} hideInputs={true} value={customThemeColor} onChange={setCustomThemeColor} />
+    <ColorPicker disableDarkMode={true} presets={presets} hideInputs={true} value={customThemeColor ?? ''} onChange={setCustomThemeColor} />
   );
 }
 

src/svelte-interface/components/utils/ReactAdapter.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
   import React from "react";
-  import ReactDOM from "react-dom";
+  import { createRoot } from "react-dom/client";
   import { onDestroy, onMount } from "svelte";
 
   const e = React.createElement;
   let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
 
   onMount(() => {
     const { el, children, class: _, ...props } = $$props;
     try {
-      ReactDOM.render(e(el, props, children), container);
+      root = createRoot(container);
+      root.render(e(el, props, children));
     } catch (err) {
       console.warn(`react-adapter failed to mount.`, { err });
     }
@@ -17,7 +19,9 @@
 
   onDestroy(() => {
     try {
-      ReactDOM.unmountComponentAtNode(container);
+      if (root) {
+        root.unmount();
+      }
     } catch (err) {
       console.warn(`react-adapter failed to unmount.`, { err });
     }