migrate to react 19 (#2272)

sawka · web-flow · commit a85b658cd7b7 · 2025-08-25T21:17:15.000-07:00
migrate to react 19 + fix lingering typescript errors and weirdness.
diff --git a/frontend/app/block/block.tsx b/frontend/app/block/block.tsx
@@ -63,7 +63,7 @@ function getViewElem(
     contentRef: React.RefObject<HTMLDivElement>,
     blockView: string,
     viewModel: ViewModel
-): JSX.Element {
+): React.ReactElement {
     if (isBlank(blockView)) {
         return <CenteredDiv>No View</CenteredDiv>;
     }
diff --git a/frontend/app/block/blockframe.tsx b/frontend/app/block/blockframe.tsx
@@ -82,7 +82,7 @@ function handleHeaderContextMenu(
     ContextMenuModel.showContextMenu(menu, e);
 }
 
-function getViewIconElem(viewIconUnion: string | IconButtonDecl, blockData: Block): JSX.Element {
+function getViewIconElem(viewIconUnion: string | IconButtonDecl, blockData: Block): React.ReactElement {
     if (viewIconUnion == null || typeof viewIconUnion === "string") {
         const viewIcon = viewIconUnion as string;
         return <div className="block-frame-view-icon">{getBlockHeaderIcon(viewIcon, blockData)}</div>;
@@ -108,8 +108,8 @@ function computeEndIcons(
     viewModel: ViewModel,
     nodeModel: NodeModel,
     onContextMenu: (e: React.MouseEvent<HTMLDivElement>) => void
-): JSX.Element[] {
-    const endIconsElem: JSX.Element[] = [];
+): React.ReactElement[] {
+    const endIconsElem: React.ReactElement[] = [];
     const endIconButtons = util.useAtomValueSafe(viewModel?.endIconButtons);
     const magnified = jotai.useAtomValue(nodeModel.isMagnified);
     const ephemeral = jotai.useAtomValue(nodeModel.isEphemeral);
@@ -206,12 +206,12 @@ const BlockFrame_Header = ({
 
     const endIconsElem = computeEndIcons(viewModel, nodeModel, onContextMenu);
     const viewIconElem = getViewIconElem(viewIconUnion, blockData);
-    let preIconButtonElem: JSX.Element = null;
+    let preIconButtonElem: React.ReactElement = null;
     if (preIconButton) {
         preIconButtonElem = <IconButton decl={preIconButton} className="block-frame-preicon-button" />;
     }
 
-    const headerTextElems: JSX.Element[] = [];
+    const headerTextElems: React.ReactElement[] = [];
     if (typeof headerTextUnion === "string") {
         if (!util.isBlank(headerTextUnion)) {
             headerTextElems.push(
@@ -310,8 +310,8 @@ const HeaderTextElem = React.memo(({ elem, preview }: { elem: HeaderElem; previe
     return null;
 });
 
-function renderHeaderElements(headerTextUnion: HeaderElem[], preview: boolean): JSX.Element[] {
-    const headerTextElems: JSX.Element[] = [];
+function renderHeaderElements(headerTextUnion: HeaderElem[], preview: boolean): React.ReactElement[] {
+    const headerTextElems: React.ReactElement[] = [];
     for (let idx = 0; idx < headerTextUnion.length; idx++) {
         const elem = headerTextUnion[idx];
         const renderedElement = <HeaderTextElem elem={elem} key={idx} preview={preview} />;
@@ -536,7 +536,7 @@ const BlockFrame_Default_Component = (props: BlockFrameProps) => {
     const magnifiedBlockBlur = jotai.useAtomValue(magnifiedBlockBlurAtom);
     const [magnifiedBlockOpacityAtom] = React.useState(() => getSettingsKeyAtom("window:magnifiedblockopacity"));
     const magnifiedBlockOpacity = jotai.useAtomValue(magnifiedBlockOpacityAtom);
-    const connBtnRef = React.useRef<HTMLDivElement>();
+    const connBtnRef = React.useRef<HTMLDivElement>(null);
     const noHeader = util.useAtomValueSafe(viewModel?.noHeader);
 
     React.useEffect(() => {
diff --git a/frontend/app/element/button.tsx b/frontend/app/element/button.tsx
@@ -9,7 +9,7 @@ import "./button.scss";
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     className?: string;
     children?: ReactNode;
-    as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+    as?: keyof React.JSX.IntrinsicElements | React.ComponentType<any>;
 }
 
 const Button = memo(
diff --git a/frontend/app/element/copybutton.tsx b/frontend/app/element/copybutton.tsx
@@ -1,7 +1,7 @@
 // Copyright 2025, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { clsx } from "clsx";
+import clsx from "clsx";
 import { useEffect, useRef, useState } from "react";
 import "./copybutton.scss";
 import { IconButton } from "./iconbutton";
diff --git a/frontend/app/element/expandablemenu.tsx b/frontend/app/element/expandablemenu.tsx
@@ -1,7 +1,7 @@
 // Copyright 2025, Command Line
 // SPDX-License-Identifier: Apache-2.0
 
-import { clsx } from "clsx";
+import clsx from "clsx";
 import { atom, useAtom } from "jotai";
 import { Children, ReactElement, ReactNode, cloneElement, isValidElement, useRef } from "react";
 
@@ -109,7 +109,7 @@ const ExpandableMenuItemGroup = ({
     const [openGroups, setOpenGroups] = useAtom(openGroupsAtom);
 
     // Generate a unique ID for this group using useRef
-    const idRef = useRef<string>();
+    const idRef = useRef<string>(null);
 
     if (!idRef.current) {
         // Generate a unique ID when the component is first rendered
@@ -146,10 +146,11 @@ const ExpandableMenuItemGroup = ({
 
     const renderChildren = Children.map(children, (child: ReactElement) => {
         if (child && child.type === ExpandableMenuItemGroupTitle) {
-            return cloneElement(child, {
-                ...child.props,
+            const childProps = child.props as ExpandableMenuItemGroupTitleProps;
+            return cloneElement(child as ReactElement<ExpandableMenuItemGroupTitleProps>, {
+                ...childProps,
                 onClick: () => {
-                    child.props.onClick?.();
+                    childProps.onClick?.();
                     toggleOpen();
                 },
             });
diff --git a/frontend/app/element/flyoutmenu.stories.tsx b/frontend/app/element/flyoutmenu.stories.tsx
@@ -263,7 +263,7 @@ export const CustomRenderer: Story = {
             </div>
         );
 
-        const renderMenu = (subMenu: JSX.Element) => <div>{subMenu}</div>;
+        const renderMenu = (subMenu: React.ReactElement) => <div>{subMenu}</div>;
 
         const modifiedArgs = {
             ...args,
diff --git a/frontend/app/element/flyoutmenu.tsx b/frontend/app/element/flyoutmenu.tsx
@@ -14,8 +14,8 @@ type MenuProps = {
     placement?: Placement;
     onOpenChange?: (isOpen: boolean) => void;
     children: ReactNode | ReactNode[];
-    renderMenu?: (subMenu: JSX.Element, props: any) => JSX.Element;
-    renderMenuItem?: (item: MenuItem, props: any) => JSX.Element;
+    renderMenu?: (subMenu: React.ReactElement, props: any) => React.ReactElement;
+    renderMenuItem?: (item: MenuItem, props: any) => React.ReactElement;
 };
 
 const FlyoutMenuComponent = memo(
@@ -214,8 +214,8 @@ type SubMenuProps = {
         item: MenuItem
     ) => void;
     handleOnClick: (e: React.MouseEvent<HTMLDivElement>, item: MenuItem) => void;
-    renderMenu?: (subMenu: JSX.Element, props: any) => JSX.Element;
-    renderMenuItem?: (item: MenuItem, props: any) => JSX.Element;
+    renderMenu?: (subMenu: React.ReactElement, props: any) => React.ReactElement;
+    renderMenuItem?: (item: MenuItem, props: any) => React.ReactElement;
 };
 
 const SubMenu = memo(
diff --git a/frontend/app/element/linkbutton.tsx b/frontend/app/element/linkbutton.tsx
@@ -1,7 +1,7 @@
 // Copyright 2025, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { clsx } from "clsx";
+import clsx from "clsx";
 import * as React from "react";
 
 import "./linkbutton.scss";
diff --git a/frontend/app/element/markdown.tsx b/frontend/app/element/markdown.tsx
@@ -10,7 +10,7 @@ import {
     transformBlocks,
 } from "@/app/element/markdown-util";
 import { boundNumber, useAtomValueSafe } from "@/util/util";
-import { clsx } from "clsx";
+import clsx from "clsx";
 import { Atom } from "jotai";
 import { OverlayScrollbarsComponent, OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
 import { useEffect, useMemo, useRef, useState } from "react";
diff --git a/frontend/app/element/popover.tsx b/frontend/app/element/popover.tsx
@@ -120,7 +120,7 @@ interface PopoverButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     isActive?: boolean;
     children: React.ReactNode;
     getReferenceProps?: () => any;
-    as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+    as?: keyof React.JSX.IntrinsicElements | React.ComponentType<any>;
 }
 
 const PopoverButton = forwardRef<HTMLButtonElement | HTMLDivElement, PopoverButtonProps>(
diff --git a/frontend/app/element/typingindicator.tsx b/frontend/app/element/typingindicator.tsx
@@ -1,7 +1,7 @@
 // Copyright 2025, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { clsx } from "clsx";
+import clsx from "clsx";
 
 import "./typingindicator.scss";
 
diff --git a/frontend/app/element/windowdrag.tsx b/frontend/app/element/windowdrag.tsx
@@ -1,7 +1,7 @@
 // Copyright 2025, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { clsx } from "clsx";
+import clsx from "clsx";
 import React, { forwardRef } from "react";
 
 import "./windowdrag.scss";
@@ -19,5 +19,6 @@ const WindowDrag = forwardRef<HTMLDivElement, WindowDragProps>(({ children, clas
         </div>
     );
 });
+WindowDrag.displayName = "WindowDrag";
 
 export { WindowDrag };
diff --git a/frontend/app/modals/modalsrenderer.tsx b/frontend/app/modals/modalsrenderer.tsx
@@ -12,7 +12,7 @@ const ModalsRenderer = () => {
     const clientData = jotai.useAtomValue(atoms.client);
     const [tosOpen, setTosOpen] = jotai.useAtom(modalsModel.tosOpen);
     const [modals] = jotai.useAtom(modalsModel.modalsAtom);
-    const rtn: JSX.Element[] = [];
+    const rtn: React.ReactElement[] = [];
     for (const modal of modals) {
         const ModalComponent = getModalComponent(modal.displayName);
         if (ModalComponent) {
diff --git a/frontend/app/modals/userinputmodal.tsx b/frontend/app/modals/userinputmodal.tsx
@@ -13,7 +13,7 @@ import "./userinputmodal.scss";
 const UserInputModal = (userInputRequest: UserInputRequest) => {
     const [responseText, setResponseText] = useState("");
     const [countdown, setCountdown] = useState(Math.floor(userInputRequest.timeoutms / 1000));
-    const checkboxRef = useRef<HTMLInputElement>();
+    const checkboxRef = useRef<HTMLInputElement>(null);
 
     const handleSendErrResponse = useCallback(() => {
         fireAndForget(() =>
@@ -115,7 +115,7 @@ const UserInputModal = (userInputRequest: UserInputRequest) => {
                         className="userinput-checkbox"
                         ref={checkboxRef}
                     />
-                    <label htmlFor={`uicheckbox-${userInputRequest.requestid}}`}>{userInputRequest.checkboxmsg}</label>
+                    <label htmlFor={`uicheckbox-${userInputRequest.requestid}`}>{userInputRequest.checkboxmsg}</label>
                 </div>
             </div>
         );
diff --git a/frontend/app/tab/tab.tsx b/frontend/app/tab/tab.tsx
@@ -7,7 +7,7 @@ import { TabRpcClient } from "@/app/store/wshrpcutil";
 import { Button } from "@/element/button";
 import { ContextMenuModel } from "@/store/contextmenu";
 import { fireAndForget } from "@/util/util";
-import { clsx } from "clsx";
+import clsx from "clsx";
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { ObjectService } from "../store/services";
 import { makeORef, useWaveObjectValue } from "../store/wos";
@@ -53,7 +53,7 @@ const Tab = memo(
             const [isEditable, setIsEditable] = useState(false);
 
             const editableRef = useRef<HTMLDivElement>(null);
-            const editableTimeoutRef = useRef<NodeJS.Timeout>();
+            const editableTimeoutRef = useRef<NodeJS.Timeout>(null);
             const loadedRef = useRef(false);
             const tabRef = useRef<HTMLDivElement>(null);
 
diff --git a/frontend/app/view/preview/csvview.tsx b/frontend/app/view/preview/csvview.tsx
@@ -9,7 +9,7 @@ import {
     getSortedRowModel,
     useReactTable,
 } from "@tanstack/react-table";
-import { clsx } from "clsx";
+import clsx from "clsx";
 import Papa from "papaparse";
 import { useEffect, useMemo, useRef, useState } from "react";
 
@@ -193,7 +193,14 @@ const CSVView = ({ parentRef, filename, content }: CSVViewProps) => {
                 </thead>
                 <tbody style={{ height: `${state.tbodyHeight}px` }} ref={tbodyRef}>
                     {table.getRowModel().rows.map((row, index) => (
-                        <tr key={row.id} ref={(el) => (rowRef.current[index] = el)} id={row.id} tabIndex={index}>
+                        <tr
+                            key={row.id}
+                            ref={(el) => {
+                                rowRef.current[index] = el;
+                            }}
+                            id={row.id}
+                            tabIndex={index}
+                        >
                             {row.getVisibleCells().map((cell) => (
                                 <td key={cell.id} id={cell.id} tabIndex={index}>
                                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
diff --git a/frontend/app/view/preview/directorypreview.tsx b/frontend/app/view/preview/directorypreview.tsx
@@ -411,8 +411,8 @@ function DirectoryTable({
         return colSizes;
     }, [table.getState().columnSizingInfo]);
 
-    const osRef = useRef<OverlayScrollbarsComponentRef>();
-    const bodyRef = useRef<HTMLDivElement>();
+    const osRef = useRef<OverlayScrollbarsComponentRef>(null);
+    const bodyRef = useRef<HTMLDivElement>(null);
     const [scrollHeight, setScrollHeight] = useState(0);
 
     const onScroll = useCallback(
@@ -518,8 +518,8 @@ function TableBody({
     setRefreshVersion,
     osRef,
 }: TableBodyProps) {
-    const dummyLineRef = useRef<HTMLDivElement>();
-    const warningBoxRef = useRef<HTMLDivElement>();
+    const dummyLineRef = useRef<HTMLDivElement>(null);
+    const warningBoxRef = useRef<HTMLDivElement>(null);
     const conn = useAtomValue(model.connection);
     const setErrorMsg = useSetAtom(model.errorMsgAtom);
 
@@ -732,6 +732,10 @@ const TableRow = React.forwardRef(function ({
         [dragItem]
     );
 
+    const dragRef = useCallback((node: HTMLDivElement | null) => {
+        drag(node);
+    }, [drag]);
+
     return (
         <div
             className={clsx("dir-table-body-row", { focused: focusIndex === idx })}
@@ -743,7 +747,7 @@ const TableRow = React.forwardRef(function ({
             }}
             onClick={() => setFocusIndex(idx)}
             onContextMenu={(e) => handleFileContextMenu(e, row.original)}
-            ref={drag}
+            ref={dragRef}
         >
             {row.getVisibleCells().map((cell) => (
                 <div
diff --git a/frontend/app/view/sysinfo/sysinfo.tsx b/frontend/app/view/sysinfo/sysinfo.tsx
@@ -407,7 +407,7 @@ function SingleLinePlot({
     sparkline = false,
     targetLen,
 }: SingleLinePlotProps) {
-    const containerRef = React.useRef<HTMLInputElement>();
+    const containerRef = React.useRef<HTMLInputElement>(null);
     const domRect = useDimensionsWithExistingRef(containerRef, 300);
     const plotHeight = domRect?.height ?? 0;
     const plotWidth = domRect?.width ?? 0;
@@ -519,7 +519,7 @@ const SysinfoViewInner = React.memo(({ model }: SysinfoViewProps) => {
     const plotData = jotai.useAtomValue(model.dataAtom);
     const yvals = jotai.useAtomValue(model.metrics);
     const plotMeta = jotai.useAtomValue(model.plotMetaAtom);
-    const osRef = React.useRef<OverlayScrollbarsComponentRef>();
+    const osRef = React.useRef<OverlayScrollbarsComponentRef>(null);
     const targetLen = jotai.useAtomValue(model.numPoints) + 1;
     let title = false;
     let cols2 = false;
diff --git a/frontend/app/view/term/ijson.tsx b/frontend/app/view/term/ijson.tsx
@@ -12,7 +12,7 @@ type IJsonNode = {
 
 const TagMap: Record<string, React.ComponentType<{ node: IJsonNode }>> = {};
 
-function convertNodeToTag(node: IJsonNode | string, idx?: number): JSX.Element | string {
+function convertNodeToTag(node: IJsonNode | string, idx?: number): React.ReactNode {
     if (node == null) {
         return null;
     }
@@ -44,7 +44,7 @@ function IJsonHtmlTag({ node }: { node: IJsonNode }) {
             }
         }
     }
-    let childrenComps: (string | JSX.Element)[] = [];
+    let childrenComps: React.ReactNode[] = [];
     if (children != null) {
         for (let idx = 0; idx < children.length; idx++) {
             let comp = convertNodeToTag(children[idx], idx);
diff --git a/frontend/app/view/vdom/vdom.tsx b/frontend/app/view/vdom/vdom.tsx
@@ -31,7 +31,7 @@ const VDomObjType_Func = "func";
 
 const dlog = debug("wave:vdom");
 
-type VDomReactTagType = (props: { elem: VDomElem; model: VDomModel }) => JSX.Element;
+type VDomReactTagType = (props: { elem: VDomElem; model: VDomModel }) => React.ReactElement;
 
 const WaveTagMap: Record<string, VDomReactTagType> = {
     "wave:markdown": WaveMarkdown,
@@ -169,7 +169,7 @@ function convertVDomFunc(model: VDomModel, fnDecl: VDomFunc, compId: string, pro
     };
 }
 
-function convertElemToTag(elem: VDomElem, model: VDomModel): JSX.Element | string {
+function convertElemToTag(elem: VDomElem, model: VDomModel): React.ReactNode {
     if (elem == null) {
         return null;
     }
@@ -295,11 +295,11 @@ function convertProps(elem: VDomElem, model: VDomModel): [GenericPropsType, Set<
     return [props, atomKeys];
 }
 
-function convertChildren(elem: VDomElem, model: VDomModel): (string | JSX.Element)[] {
+function convertChildren(elem: VDomElem, model: VDomModel): React.ReactNode[] {
     if (elem.children == null || elem.children.length == 0) {
         return null;
     }
-    let childrenComps: (string | JSX.Element)[] = [];
+    let childrenComps: React.ReactNode[] = [];
     for (let child of elem.children) {
         if (child == null) {
             continue;
diff --git a/frontend/layout/tests/model.ts b/frontend/layout/tests/model.ts
@@ -7,5 +7,6 @@ export function newLayoutTreeState(rootNode: LayoutNode): LayoutTreeState {
     return {
         rootNode,
         generation: 0,
+        pendingBackendActions: [],
     };
 }
diff --git a/frontend/types/gotypes.d.ts b/frontend/types/gotypes.d.ts
@@ -559,6 +559,7 @@ declare global {
         "editor:minimapenabled"?: boolean;
         "editor:stickyscrollenabled"?: boolean;
         "editor:wordwrap"?: boolean;
+        "editor:fontsize"?: number;
         "graph:*"?: boolean;
         "graph:numpoints"?: number;
         "graph:metrics"?: string[];
diff --git a/frontend/types/jsx.d.ts b/frontend/types/jsx.d.ts
@@ -0,0 +1,4 @@
+// Copyright 2025, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+/// <reference types="react/jsx-runtime" />
diff --git a/frontend/types/vite-env.d.ts b/frontend/types/vite-env.d.ts
diff --git a/package.json b/package.json
diff --git a/pkg/waveobj/metaconsts.go b/pkg/waveobj/metaconsts.go
diff --git a/pkg/waveobj/wtypemeta.go b/pkg/waveobj/wtypemeta.go
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ function getViewElem(`
`63`	`63`	`contentRef: React.RefObject<HTMLDivElement>,`
`64`	`64`	`blockView: string,`
`65`	`65`	`viewModel: ViewModel`
`66`		`-): JSX.Element {`
	`66`	`+): React.ReactElement {`
`67`	`67`	`if (isBlank(blockView)) {`
`68`	`68`	`return <CenteredDiv>No View</CenteredDiv>;`
`69`	`69`	`}`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ import "./button.scss";`
`9`	`9`	`interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {`
`10`	`10`	`className?: string;`
`11`	`11`	`children?: ReactNode;`
`12`		`- as?: keyof JSX.IntrinsicElements \| React.ComponentType<any>;`
	`12`	`+ as?: keyof React.JSX.IntrinsicElements \| React.ComponentType<any>;`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`const Button = memo(`
Original file line number	Diff line number	Diff line change
`@@ -120,7 +120,7 @@ interface PopoverButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen`
`120`	`120`	`isActive?: boolean;`
`121`	`121`	`children: React.ReactNode;`
`122`	`122`	`getReferenceProps?: () => any;`
`123`		`- as?: keyof JSX.IntrinsicElements \| React.ComponentType<any>;`
	`123`	`+ as?: keyof React.JSX.IntrinsicElements \| React.ComponentType<any>;`
`124`	`124`	`}`
`125`	`125`
`126`	`126`	`const PopoverButton = forwardRef<HTMLButtonElement \| HTMLDivElement, PopoverButtonProps>(`