Update react monorepo to v19 (major) (#503)

* Update react monorepo to v19

* Reformat and remove `JSX` namespace usage

* Update docs and peer dependencies range

* Fix ref type breaking changes

* Drop React 18 from peer deps

* Fix devserver compile error

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>

Author: renovate[bot]

devserver/package.json

@@ -19,16 +19,16 @@
     "commander": "^14.0.0",
     "js-slang": "^1.0.85",
     "re-resizable": "^6.9.11",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "react-ace": "^14.0.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
     "vite": "^8.0.5",
     "vite-plugin-node-polyfills": "^0.26.0"
   },
   "devDependencies": {
     "@sourceacademy/modules-buildtools": "workspace:^",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@vitest/browser-playwright": "4.1.0",
     "eslint": "^9.35.0",
     "playwright": "^1.55.1",

devserver/src/components/controlBar/ControlBar.tsx

@@ -1,11 +1,11 @@
 import { Classes } from '@blueprintjs/core';
 import classNames from 'classnames';
-import React, { type JSX } from 'react';
+import React from 'react';
 
 export type ControlBarProps = {
-  editorButtons: Array<JSX.Element | null>;
-  flowButtons?: Array<JSX.Element | null>;
-  editingWorkspaceButtons?: Array<JSX.Element | null>;
+  editorButtons: Array<React.ReactElement | null>;
+  flowButtons?: Array<React.ReactElement | null>;
+  editingWorkspaceButtons?: Array<React.ReactElement | null>;
 };
 
 const ControlBar: React.FC<ControlBarProps> = (props) => {

devserver/src/components/repl/Repl.tsx

@@ -68,7 +68,6 @@ const Output: React.FC<OutputProps> = (props: OutputProps) => {
 };
 
 export type ReplProps = {
-  // replButtons: Array<JSX.Element | null>;
   output: InterpreterOutput | null;
   hidden?: boolean;
   inputHidden?: boolean;
@@ -80,7 +79,7 @@ const Repl: React.FC<ReplProps> = (props: ReplProps) => (
     <div className="repl-output-parent">
       {props.output === null
         ? <Card />
-        : <Output output={props.output}/>}
+        : <Output output={props.output} />}
       {/* {cards.length > 0 ? cards : (<Card />)} */}
     </div>
   </div>

devserver/src/components/sideContent/SideContent.tsx

@@ -59,7 +59,7 @@ const renderTab = (
     return <Tab key={tab.id} {...tabProps} />;
   }
 
-  const tabPanel: React.JSX.Element = <div className="side-content-text">{tab.body}</div>;
+  const tabPanel: React.ReactElement = <div className="side-content-text">{tab.body}</div>;
 
   return <Tab key={tab.id} {...tabProps} panel={tabPanel} />;
 };

devserver/src/components/sideContent/types.ts

@@ -11,14 +11,14 @@ export type SideContentTab = {
   id: string;
   label: string;
   iconName: IconName;
-  body: React.JSX.Element;
+  body: React.ReactElement;
 };
 
 export type ModuleSideContent = {
   label: string;
   iconName: IconName;
   toSpawn?: (context: DebuggerContext) => boolean;
-  body: (context: DebuggerContext) => React.JSX.Element;
+  body: (context: DebuggerContext) => React.ReactElement;
 };
 
 export type RawTab = (provider: ReturnType<typeof requireProvider>, react: typeof React) => Promise<{ default: ModuleSideContent }>;

devserver/src/components/utils/Hooks.ts

@@ -7,7 +7,7 @@
 
 import React, { type RefObject } from 'react';
 
-export const useDimensions = (ref: RefObject<HTMLElement>): [width: number, height: number] => {
+export const useDimensions = (ref: RefObject<HTMLElement | null>): [width: number, height: number] => {
   const [width, setWidth] = React.useState<number>(0);
   const [height, setHeight] = React.useState<number>(0);
 

docs/src/modules/2-bundle/3-editing.md

@@ -43,7 +43,7 @@ This adds the dependency to `devDependencies` instead.
 > specified in the root repository `package.json`:
 >
 > ```sh
-> yarn add react@^18.3.1
+> yarn add react@^19.0.0
 > ```
 >
 > You can also use the command `yarn constraints`  to check if you have incorrectly specified the version of a dependency. You can view all

docs/src/modules/3-tabs/1-overview.md

@@ -67,7 +67,7 @@ The Frontend expects each tab's entry point to provide a default export of an ob
 ```ts
 interface ModuleSideContent {
   toSpawn: ((context: DebuggerContext) => boolean) | undefined;
-  body: (context: DebuggerContext) => JSX.Element;
+  body: (context: DebuggerContext) => React.ReactElement;
   label: string;
   iconName: string;
 }

docs/src/modules/3-tabs/3-editing.md

@@ -43,7 +43,7 @@ This adds the dependency to `devDependencies` instead.
 > specified in the root repository `package.json`:
 >
 > ```sh
-> yarn add react@^18.3.1
+> yarn add react@^19.0.0
 > ```
 >
 > You can also use the command `yarn constraints`  to check if you have incorrectly specified the version of a dependency. You can view all

docs/src/repotools/5-yarn.md

@@ -28,7 +28,7 @@ As part of ensuring consistency, everything in this repository has been designed
 Tabs, for example, should all be using the same versions of `react` and `react-dom`: the one in use by the frontend. If a dependency is specified in the root `package.json`, then the constraints file
 requires that all child workspaces use the version of that dependency.
 
-For example, the root package specifies `react@^18.3.1` as a dependency, so all workspaces that require React must also use that version spec.
+For example, the root package specifies `react@^19.0.0` as a dependency, so all workspaces that require React must also use that version spec.
 
 This validation is not carried out across child workspaces, however. Two different bundles could use two different versions of the same package. This should not cause an issue **unless** the bundles are somehow dependent on each other.