chore: upgrade to react@19 (excalidraw#9182)

dev-docs/package.json

@@ -23,8 +23,8 @@
     "clsx": "^1.2.1",
     "docusaurus-plugin-sass": "0.2.3",
     "prism-react-renderer": "^1.3.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "sass": "1.57.1"
   },
   "devDependencies": {

examples/excalidraw/package.json

@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "@excalidraw/excalidraw": "*"
   },
   "devDependencies": {

examples/excalidraw/with-nextjs/package.json

@@ -13,13 +13,13 @@
   "dependencies": {
     "@excalidraw/excalidraw": "*",
     "next": "14.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
     "@types/node": "^20",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.0",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "path2d-polyfill": "2.0.1",
     "typescript": "^5"
   }

examples/excalidraw/with-script-in-browser/package.json

@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "@excalidraw/excalidraw": "*"
   },
   "devDependencies": {

excalidraw-app/collab/CollabError.tsx

@@ -19,16 +19,16 @@ export const collabErrorIndicatorAtom = atom<ErrorIndicator>({
 
 const CollabError = ({ collabError }: { collabError: ErrorIndicator }) => {
   const [isAnimating, setIsAnimating] = useState(false);
-  const clearAnimationRef = useRef<string | number | NodeJS.Timeout>();
+  const clearAnimationRef = useRef<string | number>(0);
 
   useEffect(() => {
     setIsAnimating(true);
-    clearAnimationRef.current = setTimeout(() => {
+    clearAnimationRef.current = window.setTimeout(() => {
       setIsAnimating(false);
     }, 1000);
 
     return () => {
-      clearTimeout(clearAnimationRef.current);
+      window.clearTimeout(clearAnimationRef.current);
     };
   }, [collabError.message, collabError.nonce]);
 

excalidraw-app/components/DebugCanvas.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { useCallback, useImperativeHandle, useRef } from "react";
 import { type AppState } from "../../packages/excalidraw/types";
 import { throttleRAF } from "../../packages/excalidraw/utils";
 import {
@@ -276,36 +276,35 @@ export const DebugFooter = ({ onChange }: { onChange: () => void }) => {
 interface DebugCanvasProps {
   appState: AppState;
   scale: number;
+  ref?: React.Ref<HTMLCanvasElement>;
 }
 
-const DebugCanvas = forwardRef<HTMLCanvasElement, DebugCanvasProps>(
-  ({ appState, scale }, ref) => {
-    const { width, height } = appState;
+const DebugCanvas = ({ appState, scale, ref }: DebugCanvasProps) => {
+  const { width, height } = appState;
 
-    const canvasRef = useRef<HTMLCanvasElement>(null);
-    useImperativeHandle<HTMLCanvasElement | null, HTMLCanvasElement | null>(
-      ref,
-      () => canvasRef.current,
-      [canvasRef],
-    );
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  useImperativeHandle<HTMLCanvasElement | null, HTMLCanvasElement | null>(
+    ref,
+    () => canvasRef.current,
+    [canvasRef],
+  );
 
-    return (
-      <canvas
-        style={{
-          width,
-          height,
-          position: "absolute",
-          zIndex: 2,
-          pointerEvents: "none",
-        }}
-        width={width * scale}
-        height={height * scale}
-        ref={canvasRef}
-      >
-        Debug Canvas
-      </canvas>
-    );
-  },
-);
+  return (
+    <canvas
+      style={{
+        width,
+        height,
+        position: "absolute",
+        zIndex: 2,
+        pointerEvents: "none",
+      }}
+      width={width * scale}
+      height={height * scale}
+      ref={canvasRef}
+    >
+      Debug Canvas
+    </canvas>
+  );
+};
 
 export default DebugCanvas;

excalidraw-app/package.json

@@ -33,8 +33,8 @@
     "i18next-browser-languagedetector": "6.1.4",
     "idb-keyval": "6.0.3",
     "jotai": "2.11.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "socket.io-client": "4.7.2",
     "vite-plugin-html": "3.2.2"
   },

package.json

@@ -17,11 +17,11 @@
     "@types/chai": "4.3.0",
     "@types/jest": "27.4.0",
     "@types/lodash.throttle": "4.1.7",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.0",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "@types/socket.io-client": "3.0.0",
     "@vitejs/plugin-react": "3.1.0",
-    "@vitest/coverage-v8": "2.0.5",
+    "@vitest/coverage-v8": "3.0.7",
     "@vitest/ui": "2.0.5",
     "chai": "4.3.6",
     "dotenv": "16.0.1",
@@ -39,9 +39,9 @@
     "vite": "5.0.12",
     "vite-plugin-checker": "0.7.2",
     "vite-plugin-ejs": "1.7.0",
-    "vite-plugin-pwa": "0.17.4",
+    "vite-plugin-pwa": "0.21.1",
     "vite-plugin-svgr": "4.2.0",
-    "vitest": "2.0.5",
+    "vitest": "3.0.6",
     "vitest-canvas-mock": "0.3.3"
   },
   "engines": {
@@ -83,7 +83,6 @@
     "clean-install": "yarn rm:node_modules && yarn install"
   },
   "resolutions": {
-    "@types/react": "18.2.0",
     "strip-ansi": "6.0.1"
   }
 }

packages/excalidraw/components/ButtonIcon.tsx

@@ -1,4 +1,5 @@
 import { forwardRef } from "react";
+import type { JSX } from "react";
 import clsx from "clsx";
 
 import "./ButtonIcon.scss";

packages/excalidraw/components/ButtonIconCycle.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import clsx from "clsx";
 
 export const ButtonIconCycle = <T extends any>({

packages/excalidraw/components/ButtonIconSelect.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import clsx from "clsx";
 import { ButtonIcon } from "./ButtonIcon";
 

packages/excalidraw/components/FontPicker/FontPickerList.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import React, {
   useMemo,
   useState,

packages/excalidraw/components/FontPicker/keyboardNavHandlers.ts

@@ -4,7 +4,7 @@ import { type FontDescriptor } from "./FontPickerList";
 
 interface FontPickerKeyNavHandlerProps {
   event: React.KeyboardEvent<HTMLDivElement>;
-  inputRef: React.RefObject<HTMLInputElement>;
+  inputRef: React.RefObject<HTMLInputElement | null>;
   hoveredFont: Node<FontDescriptor> | undefined;
   filteredFonts: Node<FontDescriptor>[];
   onClose: () => void;

packages/excalidraw/components/HelpDialog.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import React from "react";
 import { t } from "../i18n";
 import { KEYS } from "../keys";

packages/excalidraw/components/IconPicker.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import React, { useEffect } from "react";
 import * as Popover from "@radix-ui/react-popover";
 import { isArrowKey, KEYS } from "../keys";

packages/excalidraw/components/MagicButton.tsx

@@ -1,8 +1,9 @@
-import "./ToolIcon.scss";
-
+import type { JSX } from "react";
 import clsx from "clsx";
 import type { ToolButtonSize } from "./ToolButton";
 
+import "./ToolIcon.scss";
+
 const DEFAULT_SIZE: ToolButtonSize = "small";
 
 export const ElementCanvasButton = (props: {

packages/excalidraw/components/MobileMenu.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import React from "react";
 import type {
   AppClassProperties,

packages/excalidraw/components/Sidebar/common.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import React from "react";
 import type { AppState, SidebarName, SidebarTabName } from "../../types";
 

packages/excalidraw/components/Stack.tsx

@@ -10,7 +10,6 @@ type StackProps = {
   justifyContent?: "center" | "space-around" | "space-between";
   className?: string | boolean;
   style?: React.CSSProperties;
-  ref: React.RefObject<HTMLDivElement>;
 };
 
 const RowStack = forwardRef(

packages/excalidraw/components/TTDDialog/TTDDialogOutput.tsx

@@ -13,7 +13,7 @@ const ErrorComp = ({ error }: { error: string }) => {
 
 interface TTDDialogOutputProps {
   error: Error | null;
-  canvasRef: React.RefObject<HTMLDivElement>;
+  canvasRef: React.RefObject<HTMLDivElement | null>;
   loaded: boolean;
 }
 

packages/excalidraw/components/TTDDialog/TTDDialogTrigger.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import type { ReactNode } from "react";
 import { useTunnels } from "../../context/tunnels";
 import DropdownMenu from "../dropdownMenu/DropdownMenu";

packages/excalidraw/components/TTDDialog/common.ts

@@ -12,7 +12,7 @@ const resetPreview = ({
   canvasRef,
   setError,
 }: {
-  canvasRef: React.RefObject<HTMLDivElement>;
+  canvasRef: React.RefObject<HTMLDivElement | null>;
   setError: (error: Error | null) => void;
 }) => {
   const canvasNode = canvasRef.current;
@@ -40,7 +40,7 @@ export interface MermaidToExcalidrawLibProps {
 }
 
 interface ConvertMermaidToExcalidrawFormatProps {
-  canvasRef: React.RefObject<HTMLDivElement>;
+  canvasRef: React.RefObject<HTMLDivElement | null>;
   mermaidToExcalidrawLib: MermaidToExcalidrawLibProps;
   mermaidDefinition: string;
   setError: (error: Error | null) => void;

packages/excalidraw/components/canvases/InteractiveCanvas.tsx

@@ -17,7 +17,7 @@ import { isRenderThrottlingEnabled } from "../../reactUtils";
 import { renderInteractiveScene } from "../../renderer/interactiveScene";
 
 type InteractiveCanvasProps = {
-  containerRef: React.RefObject<HTMLDivElement>;
+  containerRef: React.RefObject<HTMLDivElement | null>;
   canvas: HTMLCanvasElement | null;
   elementsMap: RenderableElementsMap;
   visibleElements: readonly NonDeletedExcalidrawElement[];

packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import React, { useEffect, useRef } from "react";
 import {
   getDropdownMenuItemClassName,

packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import { useDevice } from "../App";
 
 const MenuItemContent = ({

packages/excalidraw/components/dropdownMenu/DropdownMenuItemLink.tsx

@@ -1,4 +1,5 @@
 import MenuItemContent from "./DropdownMenuItemContent";
+import type { JSX } from "react";
 import React from "react";
 import {
   getDropdownMenuItemClassName,

packages/excalidraw/components/welcome-screen/WelcomeScreen.Center.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import { actionLoadScene, actionShortcuts } from "../../actions";
 import { getShortcutFromShortcutName } from "../../actions/shortcuts";
 import { t, useI18n } from "../../i18n";

packages/excalidraw/element/flowchart.test.tsx

@@ -1,12 +1,11 @@
-import ReactDOM from "react-dom";
-import { render } from "../tests/test-utils";
+import { render, unmountComponent } from "../tests/test-utils";
 import { reseed } from "../random";
 import { UI, Keyboard, Pointer } from "../tests/helpers/ui";
 import { Excalidraw } from "../index";
 import { API } from "../tests/helpers/api";
 import { KEYS } from "../keys";
 
-ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+unmountComponent();
 
 const { h } = window;
 const mouse = new Pointer("mouse");

packages/excalidraw/element/textWysiwyg.test.tsx

@@ -1,7 +1,11 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import { Excalidraw } from "../index";
-import { GlobalTestState, render, screen } from "../tests/test-utils";
+import {
+  GlobalTestState,
+  render,
+  screen,
+  unmountComponent,
+} from "../tests/test-utils";
 import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
 import { CODES, KEYS } from "../keys";
 import {
@@ -21,8 +25,7 @@ import { getOriginalContainerHeightFromCache } from "./containerCache";
 import { getTextEditor, updateTextEditor } from "../tests/queries/dom";
 import { pointFrom } from "../../math";
 
-// Unmount ReactDOM from root
-ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+unmountComponent();
 
 const tab = "    ";
 const mouse = new Pointer("mouse");

packages/excalidraw/fonts/FontMetadata.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import {
   FreedrawIcon,
   FontFamilyNormalIcon,

packages/excalidraw/global.d.ts

@@ -99,8 +99,12 @@ declare module "image-blob-reduce" {
   export = reduce;
 }
 
+interface CustomMatchers {
+  toBeNonNaNNumber(): void;
+  toCloselyEqualPoints(points: readonly [number, number][]): void;
+}
+
 declare namespace jest {
-  interface Expect {
-    toBeNonNaNNumber(): void;
-  }
+  interface Expect extends CustomMatchers {}
+  interface Matchers extends CustomMatchers {}
 }

packages/excalidraw/hooks/useOutsideClick.ts

@@ -2,7 +2,7 @@ import { useEffect } from "react";
 import { EVENT } from "../constants";
 
 export function useOutsideClick<T extends HTMLElement>(
-  ref: React.RefObject<T>,
+  ref: React.RefObject<T | null>,
   /** if performance is of concern, memoize the callback */
   callback: (event: Event) => void,
   /**

packages/excalidraw/hooks/useScrollPosition.ts

@@ -5,7 +5,7 @@ import throttle from "lodash.throttle";
 const scrollPositionAtom = atom<number>(0);
 
 export const useScrollPosition = <T extends HTMLElement>(
-  elementRef: React.RefObject<T>,
+  elementRef: React.RefObject<T | null>,
 ) => {
   const [scrollPosition, setScrollPosition] = useAtom(scrollPositionAtom);