Upgrade to React 19, Next.js 15 & Motion 12

DustinBrett · Dec 7, 2024 · f19b22b · f19b22b
1 parent e0a7939
commit f19b22b
Show file tree

Hide file tree

Showing 72 changed files with 455 additions and 460 deletions.
diff --git a/components/apps/BoxedWine/useBoxedWine.ts b/components/apps/BoxedWine/useBoxedWine.ts
@@ -40,8 +40,8 @@ const useBoxedWine = ({
   const { processes: { [id]: { libs = [] } = {} } = {} } = useProcesses();
   const { readFile } = useFileSystem();
   const mountEmFs = useEmscriptenMount();
-  const loadedUrl = useRef<string>();
-  const blankCanvasCheckerTimer = useRef<number | undefined>();
+  const loadedUrl = useRef("");
+  const blankCanvasCheckerTimer = useRef(0);
   const loadEmulator = useCallback(async (): Promise<void> => {
     let dynamicConfig = {};
     let appPayload = url ? await readFile(url) : Buffer.from("");
@@ -75,7 +75,7 @@ const useBoxedWine = ({
       blankCanvasCheckerTimer.current = window.setInterval(() => {
         if (isCanvasDrawn(containerRef.current?.querySelector("canvas"))) {
           clearInterval(blankCanvasCheckerTimer.current);
-          blankCanvasCheckerTimer.current = undefined;
+          blankCanvasCheckerTimer.current = 0;
           containerRef.current?.querySelector("ol")?.remove();
         }
       }, 100);

diff --git a/components/apps/DX-Ball/useDXBall.ts b/components/apps/DX-Ball/useDXBall.ts
@@ -26,7 +26,7 @@ const useDXBall = ({ id, setLoading }: ContainerHookProps): void => {
     processes: { [id]: process },
   } = useProcesses();
   const { closing, libs = [] } = process || {};
-  const records = useRef<string>();
+  const records = useRef("");
   const libLoadingRef = useRef(true);
 
   useEffect(() => {

diff --git a/components/apps/Emulator/useEmulator.ts b/components/apps/Emulator/useEmulator.ts
@@ -32,7 +32,7 @@ const useEmulator = ({
     processes: { [id]: { closing = false, libs = [] } = {} } = {},
   } = useProcesses();
   const { prependFileToTitle } = useTitle(id);
-  const emulatorRef = useRef<Emulator>();
+  const emulatorRef = useRef<Emulator>(undefined);
   const loadedUrlRef = useRef<string>("");
   const loadRom = useCallback(async () => {
     if (!url) return;

diff --git a/components/apps/FileExplorer/AddressBar.tsx b/components/apps/FileExplorer/AddressBar.tsx
@@ -1,12 +1,5 @@
 import { basename } from "path";
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { GoTo, Refresh } from "components/apps/FileExplorer/NavigationIcons";
 import StyledAddressBar from "components/apps/FileExplorer/StyledAddressBar";
 import useAddressBarContextMenu from "components/apps/FileExplorer/useAddressBarContextMenu";
@@ -38,111 +31,111 @@ export const ADDRESS_INPUT_PROPS = {
   HTMLInputElement
 >;
 
-const AddressBar = forwardRef<HTMLInputElement, AddressBarProps>(
-  ({ id }, ref) => {
-    const addressBarRef =
-      ref as React.MutableRefObject<HTMLInputElement | null>;
-    const actionButtonRef = useRef<HTMLButtonElement | null>(null);
-    const {
-      open,
-      url: changeUrl,
-      processes: {
-        [id]: { icon, url = "" },
-      },
-    } = useProcesses();
-    const displayName = useMemo(() => basename(url) || ROOT_NAME, [url]);
-    const [addressBar, setAddressBar] = useState(displayName);
-    const { exists, stat, updateFolder } = useFileSystem();
-    const { updateRecentFiles } = useSession();
-    const inputing = useMemo(
-      () =>
-        addressBar !== displayName &&
-        addressBar !== url &&
-        document.activeElement === addressBarRef.current,
-      [addressBar, addressBarRef, displayName, url]
-    );
-    const goToAddress = useCallback(async () => {
-      if (addressBar && (await exists(addressBar))) {
-        if ((await stat(addressBar)).isDirectory()) changeUrl(id, addressBar);
-        else {
-          const openPid = getProcessByFileExtension(getExtension(addressBar));
+const AddressBar: FCWithRef<HTMLInputElement, AddressBarProps> = ({
+  id,
+  ref: addressBarRef,
+}) => {
+  const actionButtonRef = useRef<HTMLButtonElement | null>(null);
+  const {
+    open,
+    url: changeUrl,
+    processes: {
+      [id]: { icon, url = "" },
+    },
+  } = useProcesses();
+  const displayName = useMemo(() => basename(url) || ROOT_NAME, [url]);
+  const [addressBar, setAddressBar] = useState(displayName);
+  const { exists, stat, updateFolder } = useFileSystem();
+  const { updateRecentFiles } = useSession();
+  const inputing = useMemo(
+    () =>
+      addressBar !== displayName &&
+      addressBar !== url &&
+      addressBarRef &&
+      document.activeElement === addressBarRef.current,
+    [addressBar, addressBarRef, displayName, url]
+  );
+  const goToAddress = useCallback(async () => {
+    if (addressBar && (await exists(addressBar))) {
+      if ((await stat(addressBar)).isDirectory()) changeUrl(id, addressBar);
+      else {
+        const openPid = getProcessByFileExtension(getExtension(addressBar));
 
-          open(openPid || "OpenWith", { url: addressBar });
+        open(openPid || "OpenWith", { url: addressBar });
 
-          if (openPid) {
-            updateRecentFiles(addressBar, openPid);
-          }
+        if (openPid) {
+          updateRecentFiles(addressBar, openPid);
         }
       }
+    }
 
-      addressBarRef.current?.blur();
-    }, [
-      addressBar,
-      addressBarRef,
-      changeUrl,
-      exists,
-      id,
-      open,
-      stat,
-      updateRecentFiles,
-    ]);
+    addressBarRef?.current?.blur();
+  }, [
+    addressBar,
+    addressBarRef,
+    changeUrl,
+    exists,
+    id,
+    open,
+    stat,
+    updateRecentFiles,
+  ]);
 
-    useEffect(() => {
-      if (addressBarRef.current) {
-        if (addressBar === url) {
-          addressBarRef.current.select();
-        } else if (addressBar === displayName) {
-          window.getSelection()?.removeAllRanges();
-        } else if (document.activeElement !== addressBarRef.current) {
-          setAddressBar(displayName);
-        }
+  useEffect(() => {
+    if (addressBarRef?.current) {
+      if (addressBar === url) {
+        addressBarRef.current.select();
+      } else if (addressBar === displayName) {
+        window.getSelection()?.removeAllRanges();
+      } else if (document.activeElement !== addressBarRef.current) {
+        setAddressBar(displayName);
       }
-    }, [addressBar, addressBarRef, displayName, url]);
+    }
+  }, [addressBar, addressBarRef, displayName, url]);
 
-    return (
-      <StyledAddressBar>
-        <Icon alt={displayName} imgSize={16} src={icon} />
-        <input
-          ref={addressBarRef}
-          className={inputing ? "inputing" : ""}
-          onBlurCapture={({ relatedTarget }) => {
-            if (actionButtonRef.current !== relatedTarget) {
-              setAddressBar(displayName);
-            }
-          }}
-          onChange={({ target }) => setAddressBar(target.value)}
-          onFocusCapture={() => setAddressBar(url)}
-          onKeyDown={({ key }) => {
-            if (key === "Enter") goToAddress();
-          }}
-          value={addressBar}
-          {...ADDRESS_INPUT_PROPS}
-          {...useAddressBarContextMenu(url)}
-        />
-        <Button
-          ref={actionButtonRef}
-          className="action"
-          onClick={() => {
+  return (
+    <StyledAddressBar>
+      <Icon alt={displayName} imgSize={16} src={icon} />
+      <input
+        ref={addressBarRef}
+        className={inputing ? "inputing" : ""}
+        onBlurCapture={({ relatedTarget }) => {
+          if (actionButtonRef.current !== relatedTarget) {
             setAddressBar(displayName);
-
-            if (inputing) goToAddress();
-            else updateFolder(url);
-          }}
-          onFocusCapture={() =>
-            setTimeout(
-              () => setAddressBar(displayName),
-              TRANSITIONS_IN_MILLISECONDS.DOUBLE_CLICK / 2
-            )
           }
-          {...label(
-            inputing ? `Go to "${addressBar}"` : `Refresh "${displayName}" (F5)`
-          )}
-        >
-          {inputing ? <GoTo /> : <Refresh />}
-        </Button>
-      </StyledAddressBar>
-    );
-  }
-);
+        }}
+        onChange={({ target }) => setAddressBar(target.value)}
+        onFocusCapture={() => setAddressBar(url)}
+        onKeyDown={({ key }) => {
+          if (key === "Enter") goToAddress();
+        }}
+        value={addressBar}
+        {...ADDRESS_INPUT_PROPS}
+        {...useAddressBarContextMenu(url)}
+      />
+      <Button
+        ref={actionButtonRef}
+        className="action"
+        onClick={() => {
+          setAddressBar(displayName);
+
+          if (inputing) goToAddress();
+          else updateFolder(url);
+        }}
+        onFocusCapture={() =>
+          setTimeout(
+            () => setAddressBar(displayName),
+            TRANSITIONS_IN_MILLISECONDS.DOUBLE_CLICK / 2
+          )
+        }
+        {...label(
+          inputing ? `Go to "${addressBar}"` : `Refresh "${displayName}" (F5)`
+        )}
+      >
+        {inputing ? <GoTo /> : <Refresh />}
+      </Button>
+    </StyledAddressBar>
+  );
+};
 
 export default AddressBar;