Fix remaining TS issues

markerikson · markerikson · commit ac2c176be606 · 2026-02-26T17:09:35.000-06:00
diff --git a/packages/accordion/index.tsx b/packages/accordion/index.tsx
@@ -149,9 +149,10 @@ export const Accordion: FC<{
       };
     }
 
+    const props = (c as ReactElement).props as Record<string, any>;
     return {
-      expanded: !!(c as ReactElement).props.expanded ?? false,
-      initialHeight: (c as ReactElement).props.initialHeight,
+      expanded: !!props.expanded,
+      initialHeight: props.initialHeight,
     };
   });
   const [state, dispatch] = useReducer(reducer, getInitialState(initialState!));
diff --git a/packages/replay-next/components/Popup.tsx b/packages/replay-next/components/Popup.tsx
@@ -24,7 +24,7 @@ export default function Popup({
 }: Omit<HTMLAttributes<HTMLDivElement>, "onClick"> & {
   children: ReactNode;
   clientX?: number | null;
-  containerRef?: RefObject<HTMLElement> | null;
+  containerRef?: RefObject<HTMLElement | null> | null;
   dismiss: Dismiss;
   dismissOnMouseLeave?: boolean;
   horizontalAlignment?: "left" | "center" | "right";
diff --git a/packages/replay-next/components/console/ConsoleInput.tsx b/packages/replay-next/components/console/ConsoleInput.tsx
@@ -22,7 +22,11 @@ import EagerEvaluationResult from "./EagerEvaluationResult";
 import useTerminalHistory from "./hooks/useTerminalHistory";
 import styles from "./ConsoleInput.module.css";
 
-export default function ConsoleInput({ inputRef }: { inputRef?: RefObject<ImperativeHandle> }) {
+export default function ConsoleInput({
+  inputRef,
+}: {
+  inputRef?: RefObject<ImperativeHandle | null>;
+}) {
   const { executionPoint } = useContext(TimelineContext);
   const { enterFocusMode } = useContext(FocusContext);
 
@@ -69,7 +73,7 @@ export default function ConsoleInput({ inputRef }: { inputRef?: RefObject<Impera
   );
 }
 
-function ConsoleInputSuspends({ inputRef }: { inputRef?: RefObject<ImperativeHandle> }) {
+function ConsoleInputSuspends({ inputRef }: { inputRef?: RefObject<ImperativeHandle | null> }) {
   const [searchState] = useContext(ConsoleSearchContext);
   const { selectedPauseAndFrameId } = useContext(SelectedFrameContext);
   const replayClient = useContext(ReplayClientContext);
diff --git a/packages/replay-next/components/console/ConsoleRoot.tsx b/packages/replay-next/components/console/ConsoleRoot.tsx
@@ -74,10 +74,10 @@ function Console({
   searchInputRef,
   showFiltersByDefault,
 }: {
-  messageListRef: RefObject<HTMLElement>;
+  messageListRef: RefObject<HTMLElement | null>;
   filterDrawerOpenDefault?: boolean;
   nagHeader?: ReactNode;
-  searchInputRef: RefObject<HTMLInputElement>;
+  searchInputRef: RefObject<HTMLInputElement | null>;
   showFiltersByDefault?: boolean;
 }) {
   const inputRef = useRef<ImperativeHandle>(null);
diff --git a/packages/replay-next/components/elements/utils/serialization.ts b/packages/replay-next/components/elements/utils/serialization.ts
@@ -154,7 +154,8 @@ export function serializeDOM(rootNode: Document): number[] {
 
     const objectId = getObjectId(domNodeOrText);
 
-    let { childNodes, classList, id, nodeType, tagName, textContent } = domNodeOrText;
+    let { childNodes, classList, id, nodeType, tagName } = domNodeOrText;
+    let textContent: string | null = domNodeOrText.textContent;
 
     switch (nodeType) {
       case Node.DOCUMENT_NODE: {
diff --git a/packages/replay-next/components/errors/InlineErrorBoundary.tsx b/packages/replay-next/components/errors/InlineErrorBoundary.tsx
@@ -87,7 +87,7 @@ function logErrorToSentry(error: Error, info: ErrorInfo, name: string) {
     componentStack = ErrorStackParser.parse({
       message: "",
       name: "",
-      stack: info.componentStack,
+      stack: info.componentStack ?? undefined,
     })
       .filter(frame => {
         // Filter DOM elements from the stack trace.
diff --git a/packages/replay-next/components/lexical/hooks/useContentEditableNoUserSelect.tsx b/packages/replay-next/components/lexical/hooks/useContentEditableNoUserSelect.tsx
@@ -2,7 +2,7 @@ import assert from "assert";
 import { RefObject, useEffect } from "react";
 
 export function useContentEditableNoUserSelect(
-  rootElementRef: RefObject<HTMLElement>,
+  rootElementRef: RefObject<HTMLElement | null>,
   options: {
     autoFocus: boolean;
     disableSelectionWhenNotFocused: boolean;
diff --git a/packages/replay-next/components/lexical/plugins/typeahead/TypeAheadListRenderer.tsx b/packages/replay-next/components/lexical/plugins/typeahead/TypeAheadListRenderer.tsx
@@ -24,7 +24,7 @@ export default function TypeAheadListRenderer<Item>({
   itemRenderer: (item: Item, query: string) => ReactNode;
   items: Item[];
   listClassName: string;
-  popupRef: RefObject<HTMLDivElement>;
+  popupRef: RefObject<HTMLDivElement | null>;
   query: string;
   selectedItem: Item | null;
 }) {
diff --git a/packages/replay-next/components/sources/PreviewPopup.tsx b/packages/replay-next/components/sources/PreviewPopup.tsx
@@ -20,7 +20,7 @@ import styles from "./PreviewPopup.module.css";
 
 type Props = {
   clientX?: number | null;
-  containerRef: RefObject<HTMLElement>;
+  containerRef: RefObject<HTMLElement | null>;
   dismiss: () => void;
   expression: string;
   sourceId: SourceId;
diff --git a/packages/replay-next/components/sources/SourceSearch.tsx b/packages/replay-next/components/sources/SourceSearch.tsx
@@ -15,8 +15,8 @@ export default function SourceSearch({
   containerRef,
   inputRef,
 }: {
-  containerRef: RefObject<HTMLElement>;
-  inputRef: RefObject<HTMLInputElement>;
+  containerRef: RefObject<HTMLElement | null>;
+  inputRef: RefObject<HTMLInputElement | null>;
 }) {
   const [searchState, searchActions] = useContext(SourceSearchContext);
 
diff --git a/packages/replay-next/components/sources/hooks/useSearch.ts b/packages/replay-next/components/sources/hooks/useSearch.ts
@@ -223,7 +223,8 @@ export default function useSearch<Item, Result, QueryData = never>(
   }
 
   const [state, dispatch] = useReducer<
-    React.Reducer<State<Item, Result, QueryData>, Action<Item, Result, QueryData>>
+    State<Item, Result, QueryData>,
+    [Action<Item, Result, QueryData>]
   >(reducer, {
     cachedScopes: {},
     currentScopeId: null,
@@ -237,7 +238,7 @@ export default function useSearch<Item, Result, QueryData = never>(
   const onChangeDispatchingRef = useRef<OnChangeDispatching<Result> | null>(
     onChangeDispatching || null
   );
-  const stateRef = useRef<State<Item, Result, QueryData>>(state);
+  const stateRef = useRef(state);
   useLayoutEffect(() => {
     onChangeDispatchingRef.current = onChangeDispatching || null;
     stateRef.current = state;
diff --git a/packages/replay-next/components/sources/hooks/useSourceListCssVariables.ts b/packages/replay-next/components/sources/hooks/useSourceListCssVariables.ts
@@ -17,7 +17,7 @@ export function useSourceListCssVariables({
   maxHitCountStringLength,
   maxLineIndexStringLength,
 }: {
-  elementRef: RefObject<HTMLElement>;
+  elementRef: RefObject<HTMLElement | null>;
   maxHitCountStringLength: number;
   maxLineIndexStringLength: number;
 }) {
diff --git a/packages/replay-next/components/sources/utils/getTextAndCursorIndex.ts b/packages/replay-next/components/sources/utils/getTextAndCursorIndex.ts
@@ -1,15 +1,3 @@
-declare global {
-  interface CaretPosition {
-    readonly offset: number;
-    readonly offsetNode: Node;
-    getClientRect(): DOMRect | null;
-  }
-
-  interface Document {
-    readonly caretPositionFromPoint: (clientX: number, clientY: number) => CaretPosition | null;
-  }
-}
-
 export default function getTextAndCursorIndex(
   clientX: number,
   clientY: number
diff --git a/packages/replay-next/src/hooks/useModalDismissSignal.ts b/packages/replay-next/src/hooks/useModalDismissSignal.ts
@@ -6,7 +6,7 @@ import { MutableRefObject, RefObject, useEffect } from "react";
 
 // Closes a modal dialog if the user clicks outside of it or types "Escape"
 export default function useModalDismissSignal(
-  modalRef: MutableRefObject<HTMLDivElement> | RefObject<HTMLDivElement>,
+  modalRef: RefObject<HTMLDivElement | null>,
   dismissCallback: (() => void) | undefined,
   dismissOnClickOutside: boolean = true
 ) {
diff --git a/packages/replay-next/src/hooks/useSearchDOM.ts b/packages/replay-next/src/hooks/useSearchDOM.ts
@@ -79,9 +79,9 @@ export default function useSearchDOM<Item>(
   ) => Item[],
   listRef: MutableRefObject<HTMLElement | null>
 ): [State<Item>, Actions] {
-  const [state, dispatch] = useReducer<React.Reducer<State<Item>, Action<Item>>>(reducer, {
+  const [state, dispatch] = useReducer(reducer, {
     index: -1,
-    results: EMPTY_ARRAY,
+    results: EMPTY_ARRAY as Item[],
     query: "",
   });
 
diff --git a/src/devtools/client/debugger/src/components/QuickOpenModal.tsx b/src/devtools/client/debugger/src/components/QuickOpenModal.tsx
@@ -1,4 +1,5 @@
-import { Dictionary } from "@reduxjs/toolkit";
+type Dictionary<T> = Record<string, T | undefined>;
+
 import fuzzyAldrin from "fuzzaldrin-plus";
 import debounce from "lodash/debounce";
 import memoizeOne from "memoize-one";
diff --git a/src/devtools/client/debugger/src/components/SourceOutline/SourceOutline.tsx b/src/devtools/client/debugger/src/components/SourceOutline/SourceOutline.tsx
@@ -3,7 +3,6 @@ import classnames from "classnames";
 import { Suspense, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList as List } from "react-window";
-import { useImperativeCacheValue } from "suspense";
 
 import { InlineErrorBoundary } from "replay-next/components/errors/InlineErrorBoundary";
 import Spinner from "replay-next/components/Spinner";
@@ -28,6 +27,8 @@ import { SourceOutlineClass } from "./SourceOutlineClass";
 import { SourceOutlineFunction } from "./SourceOutlineFunction";
 import styles from "./SourceOutline.module.css";
 
+import { useImperativeCacheValue } from "suspense";
+
 export function SourceOutline({
   cursorPosition,
   selectedSource,
@@ -46,7 +47,7 @@ export function SourceOutline({
     [symbols, filter]
   );
   const [focusedSymbol, setFocusedSymbol] = useState<ClassOutline | FunctionOutline | null>(null);
-  const listRef = useRef<any>();
+  const listRef = useRef<any>(null);
 
   const closestSymbolIndex = useMemo(() => {
     if (!cursorPosition) {
diff --git a/src/devtools/client/debugger/src/components/shared/SearchInput.tsx b/src/devtools/client/debugger/src/components/shared/SearchInput.tsx
@@ -241,7 +241,9 @@ class SearchInput extends Component<SearchInputProps> {
             placeholder={placeholder}
             value={query}
             spellCheck={false}
-            ref={(c: HTMLInputElement | null) => (this.$input = c)}
+            ref={(c: HTMLInputElement | null) => {
+              this.$input = c;
+            }}
           />
           {this.renderSpinner()}
           {this.renderSummaryMsg()}
diff --git a/src/devtools/client/debugger/src/selectors/getCallStackFrames.ts b/src/devtools/client/debugger/src/selectors/getCallStackFrames.ts
@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
-import type { Dictionary } from "@reduxjs/toolkit";
+type Dictionary<T> = Record<string, T | undefined>;
 
 import { SourceDetails } from "ui/reducers/sources";
 
diff --git a/src/devtools/client/debugger/src/utils/quick-open.ts b/src/devtools/client/debugger/src/utils/quick-open.ts
@@ -2,7 +2,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
-import { Dictionary } from "@reduxjs/toolkit";
+type Dictionary<T> = Record<string, T | undefined>;
+
 import type {
   FunctionMatch,
   FunctionOutline,
diff --git a/src/devtools/client/debugger/src/utils/sourceVisualizations.ts b/src/devtools/client/debugger/src/utils/sourceVisualizations.ts
@@ -1,4 +1,5 @@
-import { Dictionary } from "@reduxjs/toolkit";
+type Dictionary<T> = Record<string, T | undefined>;
+
 import type { SameLineSourceLocations, SourceId } from "@replayio/protocol";
 import sortBy from "lodash/sortBy";
 
diff --git a/src/devtools/client/inspector/markup/reducers/markup.ts b/src/devtools/client/inspector/markup/reducers/markup.ts
@@ -7,12 +7,12 @@ import { UIState } from "ui/state";
 
 export interface MarkupState {
   highlightedNodes: string[] | null;
-  nodeBoxModels: EntityState<BoxModel>;
+  nodeBoxModels: EntityState<BoxModel, string>;
   selectedNode: string | null;
 }
 
-const boxModelAdapter = createEntityAdapter<BoxModel>({
-  selectId: boxModel => boxModel.node,
+const boxModelAdapter = createEntityAdapter({
+  selectId: (boxModel: BoxModel) => boxModel.node,
 });
 
 export const { selectById: getNodeBoxModelById } = boxModelAdapter.getSelectors(
diff --git a/src/devtools/client/shared/components/ResponsiveTabs.tsx b/src/devtools/client/shared/components/ResponsiveTabs.tsx
@@ -150,7 +150,9 @@ export const ResponsiveTabs = ({
         {orderedTabs.map((tab, idx) => (
           <span
             key={tab.key}
-            ref={ref => (tabsRef.current[indicesOrder[idx]] = ref!)}
+            ref={ref => {
+              tabsRef.current[indicesOrder[idx]] = ref!;
+            }}
             style={{
               pointerEvents: idx < visibleItemsCount ? "auto" : "none",
               opacity: idx < visibleItemsCount ? 1 : 0,
diff --git a/src/ui/components/DevTools.tsx b/src/ui/components/DevTools.tsx
@@ -71,7 +71,7 @@ type DevToolsProps = PropsFromRedux & {
 
 function ViewLoader() {
   const [showLoader, setShowLoader] = useState(false);
-  const idRef = useRef<ReturnType<typeof setTimeout>>();
+  const idRef = useRef<ReturnType<typeof setTimeout>>(null);
   useEffect(() => {
     idRef.current = setTimeout(() => {
       setShowLoader(true);
diff --git a/src/ui/components/NetworkMonitor/BodyDownload.tsx b/src/ui/components/NetworkMonitor/BodyDownload.tsx
@@ -7,7 +7,8 @@ import { RawBody } from "./content";
 const BodyDownload = ({ raw, filename }: { raw: RawBody; filename: string }) => {
   const [downloaded, setDownloaded] = useState(false);
   const dataURL = useMemo(
-    () => URL.createObjectURL(new Blob([raw.content.buffer], { type: raw.contentType })),
+    () =>
+      URL.createObjectURL(new Blob([raw.content.buffer as ArrayBuffer], { type: raw.contentType })),
     [raw]
   );
 
diff --git a/src/ui/components/ProtocolViewer/components/ProtocolViewerListItem.tsx b/src/ui/components/ProtocolViewer/components/ProtocolViewerListItem.tsx
@@ -53,7 +53,7 @@ const MemoizedProtocolViewerListItem = memo(function MemoizedProtocolViewerListI
   response: ProtocolResponse;
   selectRequest: (id: number | null) => void;
 }) {
-  const ref = useRef<HTMLDivElement>() as MutableRefObject<HTMLDivElement>;
+  const ref = useRef<HTMLDivElement>(null);
 
   const didError = error != null;
 
diff --git a/src/ui/components/ProtocolViewer/hooks/useScrollSelectedRequestIntoView.ts b/src/ui/components/ProtocolViewer/hooks/useScrollSelectedRequestIntoView.ts
@@ -1,9 +1,7 @@
-import { MutableRefObject, useContext, useLayoutEffect, useRef } from "react";
-
-import { ProtocolViewerContext } from "ui/components/ProtocolViewer/components/ProtocolViewerContext";
+import { RefObject, useLayoutEffect, useRef } from "react";
 
 export function useScrollSelectedRequestIntoView(
-  divRef: MutableRefObject<HTMLDivElement>,
+  divRef: RefObject<HTMLDivElement | null>,
   isSelected: boolean
 ) {
   const prevIsSelectedRef = useRef<boolean>(false);
diff --git a/src/ui/components/Viewer.tsx b/src/ui/components/Viewer.tsx
@@ -26,7 +26,7 @@ const Vertical = ({
   onVideoPanelCollapse: (collapsed: boolean) => void;
   toolboxLayout: ToolboxLayout;
   videoPanelCollapsed: boolean;
-  videoPanelRef: RefObject<ImperativePanelHandle>;
+  videoPanelRef: RefObject<ImperativePanelHandle | null>;
 }) => {
   return (
     <PanelGroup
@@ -72,7 +72,7 @@ const Horizontal = ({
 }: {
   onVideoPanelCollapse: (collapsed: boolean) => void;
   videoPanelCollapsed: boolean;
-  videoPanelRef: RefObject<ImperativePanelHandle>;
+  videoPanelRef: RefObject<ImperativePanelHandle | null>;
 }) => {
   const replayClient = useContext(ReplayClientContext);
   const recordingCapabilities = recordingCapabilitiesCache.read(replayClient);
diff --git a/src/ui/components/shared/PortalDropdown.tsx b/src/ui/components/shared/PortalDropdown.tsx
@@ -80,7 +80,7 @@ export default function PortalDropdown(props: PortalDropdownProps) {
 
 function getContentPosition(
   props: PortalDropdownProps,
-  buttonRef: RefObject<HTMLButtonElement>,
+  buttonRef: RefObject<HTMLButtonElement | null>,
   dropdownNode: HTMLDivElement | null
 ): CSSProperties {
   if (props.expanded && buttonRef.current) {
diff --git a/src/ui/hooks/useModalDismissSignal.ts b/src/ui/hooks/useModalDismissSignal.ts
@@ -1,12 +1,12 @@
-import { MutableRefObject, RefObject, useEffect } from "react";
+import { RefObject, useEffect } from "react";
 
 // TODO: this doesn't work correctly when multiple stacked modals are open
 // they are unaware of each other and the global listeners added by them compete between each other
 // in a way that the "outer" can perform its action and call `.preventDefault` - preventing the "inner" one from closing
 
 // Closes a modal dialog if the user clicks outside of it or types "Escape"
 export default function useModalDismissSignal(
-  modalRef: MutableRefObject<HTMLDivElement> | RefObject<HTMLDivElement>,
+  modalRef: RefObject<HTMLDivElement | null>,
   dismissCallback: (() => void) | undefined,
   dismissOnClickOutside: boolean = true
 ) {
diff --git a/src/ui/reducers/sources.ts b/src/ui/reducers/sources.ts
@@ -1,5 +1,4 @@
 import {
-  Dictionary,
   EntityState,
   PayloadAction,
   createEntityAdapter,
@@ -13,6 +12,8 @@ import { assert } from "protocol/utils";
 import { Source } from "replay-next/src/suspense/SourcesCache";
 import { UIState } from "ui/state";
 
+type Dictionary<T> = Record<string, T | undefined>;
+
 export type SourceDetails = Source;
 
 /**
@@ -35,7 +36,7 @@ export const {
 
 export interface SourcesState {
   allSourcesReceived: boolean;
-  sourceDetails: EntityState<SourceDetails>;
+  sourceDetails: EntityState<SourceDetails, string>;
   selectedLocation: PartialLocation | null;
   selectedLocationHistory: PartialLocation[];
   selectedLocationHasScrolled: boolean;
diff --git a/src/ui/setup/redux/middleware/context.ts b/src/ui/setup/redux/middleware/context.ts
diff --git a/src/ui/setup/store.ts b/src/ui/setup/store.ts
