chore(web): Bump to React 19 (#307)

Closes #306 Changes: * Bump React * Bump all Radix packages * Replace all `forwardRef`s to using `ref` as a prop (see https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop)
munshkr · Dec 24, 2024 · 26bd408 · 26bd408
2 parents 1b53ab6 + 4623d28
commit 26bd408
Show file tree

Hide file tree

Showing 16 changed files with 2,428 additions and 836 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -22,14 +22,14 @@
   },
   "dependencies": {
     "@flok-editor/server-middleware": "^1.0.1",
+    "@strudel/draw": "^1.1.0",
     "@uiw/codemirror-theme-andromeda": "^4.22.1",
     "@uiw/codemirror-theme-bespin": "^4.22.1",
     "@uiw/codemirror-theme-console": "^4.22.1",
     "@uiw/codemirror-theme-github": "^4.22.1",
     "@uiw/codemirror-theme-monokai": "^4.22.1",
     "@uiw/codemirror-theme-solarized": "^4.22.1",
     "@uiw/codemirror-theme-xcode": "^4.22.1",
-    "@strudel/draw": "^1.1.0",
     "commander": "^10.0.0",
     "compression": "^1.7.4",
     "express": "^4.18.2",
@@ -43,15 +43,15 @@
     "@flok-editor/cm-eval": "^1.0.1",
     "@flok-editor/lang-tidal": "^1.0.1",
     "@flok-editor/session": "^1.1.0",
-    "@radix-ui/react-dialog": "^1.0.3",
-    "@radix-ui/react-dropdown-menu": "^2.0.4",
-    "@radix-ui/react-label": "^2.0.1",
-    "@radix-ui/react-menubar": "^1.0.2",
-    "@radix-ui/react-popover": "^1.0.5",
-    "@radix-ui/react-select": "^1.2.1",
-    "@radix-ui/react-toast": "^1.1.3",
-    "@radix-ui/react-toggle": "^1.0.2",
-    "@radix-ui/react-tooltip": "^1.0.5",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-menubar": "^1.1.4",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-toast": "^1.2.4",
+    "@radix-ui/react-toggle": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.6",
     "@replit/codemirror-vim": "^6.2.1",
     "@strudel/codemirror": "^1.1.0",
     "@strudel/core": "^1.1.0",
@@ -86,8 +86,8 @@
     "mercury-engine": "^1.2.2",
     "p5": "^1.9.0",
     "postcss": "^8.4.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-helmet-async": "^1.3.0",
     "react-router-dom": "^6.9.0",
     "tailwind-merge": "^1.10.0",

diff --git a/packages/web/src/components/editor.tsx b/packages/web/src/components/editor.tsx
@@ -108,101 +108,97 @@ export interface EditorProps extends ReactCodeMirrorProps {
   document?: Document;
   extensionSettings?: any;
   settings?: EditorSettings;
+  ref: React.RefObject<ReactCodeMirrorRef>;
 }
 
-export const Editor = React.forwardRef(
-  (
-    { document, settings, ...props }: EditorProps,
-    ref: React.ForwardedRef<ReactCodeMirrorRef>
-  ) => {
-    const [mounted, setMounted] = useState(false);
-    const query = useQuery();
+export const Editor = ({ document, settings, ref, ...props }: EditorProps) => {
+  const [mounted, setMounted] = useState(false);
+  const query = useQuery();
 
-    // useEffect only runs on the client, so now we can safely show the UI
-    useEffect(() => {
-      // Make sure query parameters are set before loading the editor
-      if (!query) return;
-      setMounted(true);
-    }, [query]);
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    // Make sure query parameters are set before loading the editor
+    if (!query) return;
+    setMounted(true);
+  }, [query]);
 
-    if (!mounted || !document) {
-      return null;
-    }
+  if (!mounted || !document) {
+    return null;
+  }
 
-    const { theme, fontFamily, lineNumbers, wrapText, vimMode } = {
-      theme: "dracula",
-      fontFamily: "IBM Plex Mono",
-      lineNumbers: false,
-      wrapText: false,
-      vimMode: false,
-      ...settings,
-    };
+  const { theme, fontFamily, lineNumbers, wrapText, vimMode } = {
+    theme: "dracula",
+    fontFamily: "IBM Plex Mono",
+    lineNumbers: false,
+    wrapText: false,
+    vimMode: false,
+    ...settings,
+  };
 
-    const readOnly = !!query.get("readOnly");
-    const language: string = langByTarget[document.target] || defaultLanguage;
-    const languageExtension = langExtensionsByLanguage[language] || javascript;
-    const extensions = [
-      EditorView.theme({
-        "&": {
-          fontFamily: fontFamily,
-        },
-        ".cm-content": {
-          fontFamily: fontFamily,
-        },
-        ".cm-gutters": {
-          fontFamily: fontFamily,
-          "margin-right": "10px",
-        },
-        ".cm-line": {
-          "font-size": "105%",
-          "font-weight": "600",
-          background: "rgba(0, 0, 0, 0.7)",
-          "max-width": "fit-content",
-          padding: "0px",
-        },
-        ".cm-activeLine": {
-          "background-color": "rgba(0, 0, 0, 1) !important",
-        },
-        "& .cm-scroller": {
-          minHeight: "100vh",
-        },
-        ".cm-ySelectionInfo": {
-          opacity: "1",
-          fontFamily: fontFamily,
-          color: "black",
-          padding: "3px 4px",
-          fontSize: "0.8rem",
-          "font-weight": "bold",
-          top: "1.25em",
-          "z-index": "1000",
-        },
-      }),
-      flokSetup(document, { readOnly }),
-      languageExtension(),
-      highlightExtension,
-      readOnly ? EditorState.readOnly.of(true) : [],
-      lineNumbers ? lineNumbersExtension() : [],
-      vimMode ? vim() : [],
-      wrapText ? EditorView.lineWrapping : [],
-    ];
+  const readOnly = !!query.get("readOnly");
+  const language: string = langByTarget[document.target] || defaultLanguage;
+  const languageExtension = langExtensionsByLanguage[language] || javascript;
+  const extensions = [
+    EditorView.theme({
+      "&": {
+        fontFamily: fontFamily,
+      },
+      ".cm-content": {
+        fontFamily: fontFamily,
+      },
+      ".cm-gutters": {
+        fontFamily: fontFamily,
+        "margin-right": "10px",
+      },
+      ".cm-line": {
+        "font-size": "105%",
+        "font-weight": "600",
+        background: "rgba(0, 0, 0, 0.7)",
+        "max-width": "fit-content",
+        padding: "0px",
+      },
+      ".cm-activeLine": {
+        "background-color": "rgba(0, 0, 0, 1) !important",
+      },
+      "& .cm-scroller": {
+        minHeight: "100vh",
+      },
+      ".cm-ySelectionInfo": {
+        opacity: "1",
+        fontFamily: fontFamily,
+        color: "black",
+        padding: "3px 4px",
+        fontSize: "0.8rem",
+        "font-weight": "bold",
+        top: "1.25em",
+        "z-index": "1000",
+      },
+    }),
+    flokSetup(document, { readOnly }),
+    languageExtension(),
+    highlightExtension,
+    readOnly ? EditorState.readOnly.of(true) : [],
+    lineNumbers ? lineNumbersExtension() : [],
+    vimMode ? vim() : [],
+    wrapText ? EditorView.lineWrapping : [],
+  ];
 
-    // If it's read-only, put a div in front of the editor so that the user
-    // can't interact with it.
-    return (
-      <>
-        {readOnly && <div className="absolute inset-0 z-10" />}
-        <CodeMirror
-          ref={ref}
-          value={document.content}
-          theme={themes[theme]?.ext || themes["dracula"]?.ext}
-          extensions={extensions}
-          basicSetup={{
-            foldGutter: false,
-            lineNumbers: false,
-          }}
-          {...props}
-        />
-      </>
-    );
-  }
-);
+  // If it's read-only, put a div in front of the editor so that the user
+  // can't interact with it.
+  return (
+    <>
+      {readOnly && <div className="absolute inset-0 z-10" />}
+      <CodeMirror
+        ref={ref}
+        value={document.content}
+        theme={themes[theme]?.ext || themes["dracula"]?.ext}
+        extensions={extensions}
+        basicSetup={{
+          foldGutter: false,
+          lineNumbers: false,
+        }}
+        {...props}
+      />
+    </>
+  );
+};
diff --git a/packages/web/src/components/hydra-canvas.tsx b/packages/web/src/components/hydra-canvas.tsx
@@ -5,24 +5,27 @@ import { DisplaySettings } from "@/lib/display-settings";
 interface HydraCanvasProps {
   fullscreen?: boolean;
   displaySettings: DisplaySettings;
+  ref: React.RefObject<HTMLCanvasElement>;
 }
 
-const HydraCanvas = React.forwardRef(
-  (
-    { fullscreen, displaySettings }: HydraCanvasProps,
-    ref: React.ForwardedRef<HTMLCanvasElement>
-  ) => (
-    <canvas
-      ref={ref}
-      className={cn(
-        "absolute top-0 left-0",
-        fullscreen && "h-full w-full block overflow-hidden"
-      )}
-      style={{ imageRendering: "pixelated", display: displaySettings.showCanvas ? "" : "none" }}
-      width={window.innerWidth / displaySettings.canvasPixelSize}
-      height={window.innerHeight / displaySettings.canvasPixelSize}
-    />
-  )
+const HydraCanvas = ({
+  fullscreen,
+  displaySettings,
+  ref,
+}: HydraCanvasProps) => (
+  <canvas
+    ref={ref}
+    className={cn(
+      "absolute top-0 left-0",
+      fullscreen && "h-full w-full block overflow-hidden"
+    )}
+    style={{
+      imageRendering: "pixelated",
+      display: displaySettings.showCanvas ? "" : "none",
+    }}
+    width={window.innerWidth / displaySettings.canvasPixelSize}
+    height={window.innerHeight / displaySettings.canvasPixelSize}
+  />
 );
 
 export default React.memo(HydraCanvas);
diff --git a/packages/web/src/components/ui/button.tsx b/packages/web/src/components/ui/button.tsx
@@ -34,19 +34,20 @@ const buttonVariants = cva(
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {}
+    VariantProps<typeof buttonVariants> {
+  ref?: React.Ref<HTMLButtonElement>;
+}
+
+const Button = ({ className, variant, size, ref, ...props }: ButtonProps) => {
+  return (
+    <button
+      className={cn(buttonVariants({ variant, size, className }))}
+      ref={ref}
+      {...props}
+    />
+  );
+};
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, ...props }, ref) => {
-    return (
-      <button
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
 Button.displayName = "Button";
 
 export { Button, buttonVariants };