chore: typecheck

fixed typecheck warnings

app/components/chat/BaseChat.tsx

@@ -14,7 +14,7 @@ import { Workbench } from '~/components/workbench/Workbench.client';
 import { classNames } from '~/utils/classNames';
 
 interface BaseChatProps {
-  textareaRef?: React.RefObject<HTMLTextAreaElement> | undefined;
+  textareaRef?: React.RefObject<HTMLTextAreaElement | null> | undefined;
   messageRef?: RefCallback<HTMLDivElement> | undefined;
   scrollRef?: RefCallback<HTMLDivElement> | undefined;
   showChat?: boolean;

app/components/editor/codemirror/CodeMirrorEditor.tsx

@@ -135,10 +135,10 @@ export const CodeMirrorEditor = memo(
     const [languageCompartment] = useState(new Compartment());
 
     const containerRef = useRef<HTMLDivElement | null>(null);
-    const viewRef = useRef<EditorView>();
-    const themeRef = useRef<Theme>();
-    const docRef = useRef<EditorDocument>();
-    const editorStatesRef = useRef<EditorStates>();
+    const viewRef = useRef<EditorView | undefined>(undefined);
+    const themeRef = useRef<Theme | undefined>(undefined);
+    const docRef = useRef<EditorDocument | undefined>(undefined);
+    const editorStatesRef = useRef<EditorStates | undefined>(undefined);
     const onScrollRef = useRef(onScroll);
     const onChangeRef = useRef(onChange);
     const onSaveRef = useRef(onSave);

app/components/ui/IconButton.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+import type { ReactElement } from 'react';
 import { memo } from 'react';
 import { classNames } from '~/utils/classNames';
 
@@ -20,7 +22,7 @@ type IconButtonWithoutChildrenProps = {
 
 type IconButtonWithChildrenProps = {
   icon?: undefined;
-  children: string | JSX.Element | JSX.Element[];
+  children: string | ReactElement | ReactElement[];
 } & BaseIconButtonProps;
 
 type IconButtonProps = IconButtonWithoutChildrenProps | IconButtonWithChildrenProps;

app/components/ui/PanelHeaderButton.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+import type { ReactElement } from 'react';
 import { memo } from 'react';
 import { classNames } from '~/utils/classNames';
 
@@ -5,7 +7,7 @@ interface PanelHeaderButtonProps {
   className?: string;
   disabledClassName?: string;
   disabled?: boolean;
-  children: string | JSX.Element | Array<JSX.Element | string>;
+  children: string | ReactElement | Array<ReactElement | string>;
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 

app/components/ui/Slider.tsx

@@ -1,8 +1,10 @@
+import React from 'react';
 import { motion } from 'framer-motion';
 import { memo } from 'react';
 import { classNames } from '~/utils/classNames';
 import { cubicEasingFn } from '~/utils/easings';
 import { genericMemo } from '~/utils/react';
+import type { ReactElement } from 'react';
 
 interface SliderOption<T> {
   value: T;
@@ -37,7 +39,7 @@ export const Slider = genericMemo(<T,>({ selected, options, setSelected }: Slide
 
 interface SliderButtonProps {
   selected: boolean;
-  children: string | JSX.Element | Array<JSX.Element | string>;
+  children: string | ReactElement | Array<ReactElement | string>;
   setSelected: () => void;
 }
 

app/components/workbench/FileBreadcrumb.tsx

@@ -87,7 +87,9 @@ export const FileBreadcrumb = memo<FileBreadcrumbProps>(({ files, pathSegments =
             <DropdownMenu.Root open={isActive} modal={false}>
               <DropdownMenu.Trigger asChild>
                 <span
-                  ref={(ref) => (segmentRefs.current[index] = ref)}
+                  ref={(ref) => {
+                    segmentRefs.current[index] = ref;
+                  }}
                   className={classNames('flex items-center gap-1.5 cursor-pointer shrink-0', {
                     'text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary': !isActive,
                     'text-bolt-elements-textPrimary underline': isActive,

app/components/workbench/terminal/Terminal.tsx

@@ -23,7 +23,7 @@ export interface TerminalProps {
 export const Terminal = memo(
   forwardRef<TerminalRef, TerminalProps>(({ className, theme, readonly, onTerminalReady, onTerminalResize }, ref) => {
     const terminalElementRef = useRef<HTMLDivElement>(null);
-    const terminalRef = useRef<XTerm>();
+    const terminalRef = useRef<XTerm | null>(null);
 
     useEffect(() => {
       const element = terminalElementRef.current!;

app/lib/hooks/useSnapScroll.ts

@@ -2,9 +2,9 @@ import { useRef, useCallback } from 'react';
 
 export function useSnapScroll() {
   const autoScrollRef = useRef(true);
-  const scrollNodeRef = useRef<HTMLDivElement>();
-  const onScrollRef = useRef<() => void>();
-  const observerRef = useRef<ResizeObserver>();
+  const scrollNodeRef = useRef<HTMLDivElement | null>(null);
+  const onScrollRef = useRef<(() => void) | null>(null);
+  const observerRef = useRef<ResizeObserver | null>(null);
 
   const messageRef = useCallback((node: HTMLDivElement | null) => {
     if (node) {
@@ -22,7 +22,7 @@ export function useSnapScroll() {
       observer.observe(node);
     } else {
       observerRef.current?.disconnect();
-      observerRef.current = undefined;
+      observerRef.current = null;
     }
   }, []);
 
@@ -43,8 +43,8 @@ export function useSnapScroll() {
         scrollNodeRef.current?.removeEventListener('scroll', onScrollRef.current);
       }
 
-      scrollNodeRef.current = undefined;
-      onScrollRef.current = undefined;
+      scrollNodeRef.current = null;
+      onScrollRef.current = null;
     }
   }, []);
 

app/routes/webcontainer.preview.$id.tsx

@@ -17,7 +17,7 @@ export async function loader({ params }: LoaderFunctionArgs) {
 export default function WebContainerPreview() {
   const { previewId } = useLoaderData<typeof loader>();
   const iframeRef = useRef<HTMLIFrameElement>(null);
-  const broadcastChannelRef = useRef<BroadcastChannel>();
+  const broadcastChannelRef = useRef<BroadcastChannel | null>(null);
   const [previewUrl, setPreviewUrl] = useState('');
 
   // handle preview refresh

app/utils/react.ts

@@ -1,6 +1,7 @@
+import type { ComponentProps, ComponentType, JSXElementConstructor } from 'react';
 import { memo } from 'react';
 
-export const genericMemo: <T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>>(
-  component: T,
-  propsAreEqual?: (prevProps: React.ComponentProps<T>, nextProps: React.ComponentProps<T>) => boolean,
-) => T & { displayName?: string } = memo;
+export const genericMemo: <T extends ComponentType<any>>(
+  Component: T,
+  propsAreEqual?: (prevProps: ComponentProps<T>, nextProps: ComponentProps<T>) => boolean,
+) => T = memo;