feat: upgrade React 16 to 18

Upgrade react/react-dom to ^18.3.1, react-mosaic-component to ^6.1.1,
and @testing-library/react to ^16.1.0. Migrate ReactDOM.render() to
createRoot(). Add Blueprint v3 type augmentations for React 18
children prop compatibility. Fix controlled input behavior in
settings-electron.tsx and null-safe context access in output.tsx.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: felixrieseberg

package.json

@@ -67,9 +67,9 @@
     "package-json": "^7.0.0",
     "parse-env-string": "^1.0.1",
     "prettier": "^3.6.2",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-mosaic-component": "^4.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-mosaic-component": "^6.1.1",
     "react-window": "^1.8.10",
     "semver": "^7.3.4",
     "shell-env": "^3.0.1",
@@ -94,16 +94,16 @@
     "@reforged/maker-appimage": "^5.1.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@tsconfig/node22": "^22.0.2",
     "@types/classnames": "^2.2.11",
     "@types/fs-extra": "^9.0.7",
     "@types/getos": "^3.0.1",
     "@types/node": "^22.19.1",
     "@types/parse-env-string": "^1.0.2",
-    "@types/react": "^16.14.0",
-    "@types/react-dom": "^16.9.11",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "@types/react-window": "^1.8.8",
     "@types/semver": "^7.3.4",
     "@types/tmp": "0.2.0",
@@ -162,7 +162,8 @@
   },
   "resolutions": {
     "@electron-forge/maker-base": "8.0.0-alpha.3",
-    "@electron-forge/shared-types": "8.0.0-alpha.3"
+    "@electron-forge/shared-types": "8.0.0-alpha.3",
+    "@types/react": "^18.3.0"
   },
   "packageManager": "yarn@4.10.3+sha512.c38cafb5c7bb273f3926d04e55e1d8c9dfa7d9c3ea1f36a4868fa028b9e5f72298f0b7f401ad5eb921749eb012eb1c3bb74bf7503df3ee43fd600d14a018266f",
   "dependenciesMeta": {

rtl-spec/components/commands-address-bar.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { runInAction } from 'mobx';
 import { beforeEach, describe, expect, it } from 'vitest';
@@ -76,7 +76,9 @@ describe('AddressBar component', () => {
     runInAction(() => {
       store.activeGistAction = action;
     });
-    const btn = getByRole('button');
-    expect(btn).toBeDisabled();
+    await waitFor(() => {
+      const btn = getByRole('button');
+      expect(btn).toBeDisabled();
+    });
   });
 });

rtl-spec/components/commands-publish-button.spec.tsx

@@ -1,4 +1,5 @@
 import { Octokit } from '@octokit/rest';
+import { act, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import {
@@ -273,7 +274,7 @@ describe('Action button component', () => {
       // create a button that's primed to update gistId
       state.gistId = gistId;
       ({ instance } = createActionButton());
-      instance.setState({ actionType: GistActionType.update });
+      act(() => instance.setState({ actionType: GistActionType.update }));
 
       mocktokit.gists.get.mockImplementation(() => {
         return {
@@ -316,7 +317,7 @@ describe('Action button component', () => {
 
       // create a button primed to delete gistId
       ({ instance } = createActionButton());
-      instance.setState({ actionType: GistActionType.delete });
+      act(() => instance.setState({ actionType: GistActionType.delete }));
     });
 
     it('attempts to delete an existing Gist', async () => {
@@ -349,11 +350,19 @@ describe('Action button component', () => {
       } = createActionButton();
       expect(container.querySelector('fieldset')).not.toBeDisabled();
 
-      state.activeGistAction = gistActionState;
-      expect(container.querySelector('fieldset')).toBeDisabled();
+      act(() => {
+        state.activeGistAction = gistActionState;
+      });
+      await waitFor(() => {
+        expect(container.querySelector('fieldset')).toBeDisabled();
+      });
 
-      state.activeGistAction = GistActionState.none;
-      expect(container.querySelector('fieldset')).not.toBeDisabled();
+      act(() => {
+        state.activeGistAction = GistActionState.none;
+      });
+      await waitFor(() => {
+        expect(container.querySelector('fieldset')).not.toBeDisabled();
+      });
     }
 
     it('while publishing', async () => {

rtl-spec/components/editors-toolbar-button.spec.tsx

@@ -46,6 +46,7 @@ describe('Editor toolbar button component', () => {
         getRoot: vi.fn(),
       },
       mosaicId: 'test',
+      blueprintNamespace: 'bp3',
     };
 
     ({ state: store } = window.app);

src/blueprint-react18.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Type augmentations for Blueprint.js v3 components to work with React 18.
+ *
+ * React 18 removed implicit `children` from React.Component props.
+ * Blueprint v3 class components don't declare `children` in their prop types,
+ * so they fail type-checking with \@types/react 18.
+ *
+ * This file adds `children` to the affected Blueprint component props.
+ * It can be removed when Blueprint is replaced with shadcn/ui.
+ */
+
+import { ReactNode } from 'react';
+
+declare module '@blueprintjs/core' {
+  interface IAlertProps {
+    children?: ReactNode;
+  }
+  interface IDialogProps {
+    children?: ReactNode;
+  }
+  interface IFormGroupProps {
+    children?: ReactNode;
+  }
+  interface IRadioGroupProps {
+    children?: ReactNode;
+  }
+}
+
+declare module '@blueprintjs/select' {
+  interface ISelectProps<T> {
+    children?: ReactNode;
+  }
+}
+
+declare module '@blueprintjs/popover2' {
+  interface IPopover2Props<T> {
+    children?: ReactNode;
+  }
+  interface ITooltip2Props<T> {
+    children?: ReactNode;
+  }
+}

src/renderer/app.tsx

@@ -114,7 +114,7 @@ export class App {
    * Initial setup call, loading Monaco and kicking off the React
    * render process.
    */
-  public async setup(): Promise<void | Element | React.Component> {
+  public async setup(): Promise<void> {
     if (this.state.isUsingSystemTheme) {
       await this.loadTheme(getCurrentTheme().file);
     } else {
@@ -123,13 +123,13 @@ export class App {
 
     const [
       { default: React },
-      { render },
+      { createRoot },
       { Dialogs },
       { OutputEditorsWrapper },
       { Header },
     ] = await Promise.all([
       import('react'),
-      import('react-dom'),
+      import('react-dom/client'),
       import('./components/dialogs.js'),
       import('./components/output-editors-wrapper.js'),
       import('./components/header.js'),
@@ -147,7 +147,8 @@ export class App {
       </div>
     );
 
-    const rendered = render(app, document.getElementById('app'));
+    const root = createRoot(document.getElementById('app')!);
+    root.render(app);
 
     this.setupResizeListener();
     this.setupOfflineListener();
@@ -161,8 +162,6 @@ export class App {
     window.ElectronFiddle.addEventListener('set-show-me-template', () => {
       window.ElectronFiddle.setShowMeTemplate(this.state.templateName);
     });
-
-    return rendered;
   }
 
   private setupTypeListeners() {

src/renderer/components/output.tsx

@@ -133,7 +133,7 @@ export const Output = observer(
 
       const { isConsoleShowing } = this.props.appState;
 
-      if (this.context.mosaicActions) {
+      if (this.context?.mosaicActions) {
         const mosaicTree = this.context.mosaicActions.getRoot();
         if (isParentNode(mosaicTree)) {
           // splitPercentage defines the percentage of space the first panel takes

src/renderer/components/settings-electron.tsx

@@ -204,13 +204,14 @@ export const ElectronSettings = observer(
      * Handles a change in which channels should be displayed.
      */
     public handleChannelChange(event: React.FormEvent<HTMLInputElement>) {
-      const { id, checked } = event.currentTarget;
+      const { id } = event.currentTarget;
       const { appState } = this.props;
+      const channel = id as ElectronReleaseChannel;
 
-      if (!checked) {
-        appState.hideChannels([id as ElectronReleaseChannel]);
+      if (appState.channelsToShow.includes(channel)) {
+        appState.hideChannels([channel]);
       } else {
-        appState.showChannels([id as ElectronReleaseChannel]);
+        appState.showChannels([channel]);
       }
     }
 

tests/renderer/app-spec.tsx

@@ -1,3 +1,4 @@
+import { act } from '@testing-library/react';
 import * as semver from 'semver';
 import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -59,10 +60,15 @@ describe('App component', () => {
     it('renders the app', async () => {
       vi.useFakeTimers();
 
-      const result = (await app.setup()) as HTMLDivElement;
-      vi.runAllTimers();
+      await act(async () => {
+        await app.setup();
+        await vi.advanceTimersByTimeAsync(100);
+      });
 
-      expect(result.innerHTML).toBe('Header;OutputEditorsWrapper;Dialogs;');
+      const appEl = document.getElementById('app')!;
+      expect(appEl.innerHTML).toContain('Header;');
+      expect(appEl.innerHTML).toContain('OutputEditorsWrapper;');
+      expect(appEl.innerHTML).toContain('Dialogs;');
 
       vi.useRealTimers();
     });