chore: update react to 19

.prettierignore

@@ -4,3 +4,4 @@ pnpm-lock.yaml
 CHANGELOG.md
 
 apps/external/postcss.config.cjs
+apps/renderer/.env

apps/main/package.json

@@ -29,19 +29,19 @@
     "@follow/shared": "workspace:*",
     "@mozilla/readability": "^0.5.0",
     "@openpanel/web": "1.0.1",
-    "@sentry/electron": "5.7.0",
+    "@sentry/electron": "5.8.0",
     "builder-util-runtime": "9.2.10",
-    "dompurify": "~3.2.2",
+    "dompurify": "~3.2.3",
     "electron-context-menu": "4.0.4",
     "electron-log": "5.2.4",
     "electron-squirrel-startup": "1.0.1",
     "electron-updater": "^6.3.9",
-    "es-toolkit": "1.29.0",
+    "es-toolkit": "1.30.1",
     "fast-folder-size": "2.3.0",
     "font-list": "1.5.1",
-    "i18next": "^24.0.5",
+    "i18next": "^24.1.0",
     "js-yaml": "4.1.0",
-    "linkedom": "^0.18.5",
+    "linkedom": "^0.18.6",
     "lowdb": "7.0.1",
     "msedge-tts": "1.3.4",
     "node-machine-id": "1.1.12",
@@ -52,9 +52,9 @@
   },
   "devDependencies": {
     "@types/js-yaml": "4.0.9",
-    "@types/node": "^22.10.1",
+    "@types/node": "^22.10.2",
     "electron": "33.2.0",
     "electron-devtools-installer": "3.2.0",
-    "hono": "4.6.13"
+    "hono": "4.6.14"
   }
 }

apps/main/vitest.config.ts

@@ -1,7 +1,6 @@
 import { resolve } from "node:path"
 import { fileURLToPath } from "node:url"
 
-import tsconfigPath from "vite-tsconfig-paths"
 import { defineProject } from "vitest/config"
 
 const __dirname = fileURLToPath(new URL(".", import.meta.url))
@@ -14,10 +13,11 @@ export default defineProject({
     includeSource: [resolve(__dirname, ".")],
   },
 
-  plugins: [
-    // @ts-expect-error
-    tsconfigPath({
-      projects: ["./tsconfig.json"],
-    }),
-  ],
+  resolve: {
+    alias: {
+      "@pkg": resolve(__dirname, "../../package.json"),
+      "@locales/*": resolve(__dirname, "../../locales/*"),
+      "~/*": resolve(__dirname, "./src/*"),
+    },
+  },
 })

apps/renderer/package.json

@@ -11,33 +11,33 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/core": "^6.2.0",
     "@egoist/tipc": "0.3.2",
     "@electron-toolkit/preload": "^3.0.1",
     "@follow/electron-main": "workspace:*",
     "@follow/shared": "workspace:*",
     "@fontsource/sn-pro": "5.1.0",
     "@headlessui/react": "2.2.0",
     "@hookform/resolvers": "3.9.1",
-    "@lottiefiles/dotlottie-react": "0.11.0",
+    "@lottiefiles/dotlottie-react": "0.11.1",
     "@microflash/remark-callout-directives": "4.3.2",
     "@openpanel/web": "1.0.1",
-    "@radix-ui/react-avatar": "1.1.1",
-    "@radix-ui/react-context-menu": "2.2.2",
-    "@radix-ui/react-dialog": "1.1.2",
-    "@radix-ui/react-dropdown-menu": "2.1.2",
-    "@radix-ui/react-hover-card": "1.1.2",
-    "@radix-ui/react-label": "2.1.0",
-    "@radix-ui/react-popover": "1.1.2",
-    "@radix-ui/react-slider": "^1.2.1",
-    "@radix-ui/react-slot": "1.1.0",
-    "@sentry/react": "8.42.0",
-    "@shikijs/transformers": "1.24.1",
-    "@tanstack/query-sync-storage-persister": "5.62.3",
-    "@tanstack/react-query": "5.62.3",
-    "@tanstack/react-query-devtools": "5.62.3",
-    "@tanstack/react-query-persist-client": "5.62.3",
-    "@tanstack/react-virtual": "3.11.0",
+    "@radix-ui/react-avatar": "1.1.2",
+    "@radix-ui/react-context-menu": "2.2.3",
+    "@radix-ui/react-dialog": "1.1.3",
+    "@radix-ui/react-dropdown-menu": "2.1.3",
+    "@radix-ui/react-hover-card": "1.1.3",
+    "@radix-ui/react-label": "2.1.1",
+    "@radix-ui/react-popover": "1.1.3",
+    "@radix-ui/react-slider": "^1.2.2",
+    "@radix-ui/react-slot": "1.1.1",
+    "@sentry/react": "8.45.0",
+    "@shikijs/transformers": "1.24.2",
+    "@tanstack/query-sync-storage-persister": "5.62.7",
+    "@tanstack/react-query": "5.62.7",
+    "@tanstack/react-query-devtools": "5.62.7",
+    "@tanstack/react-query-persist-client": "5.62.7",
+    "@tanstack/react-virtual": "3.11.1",
     "@use-gesture/react": "10.3.1",
     "@welldone-software/why-did-you-render": "8.0.3",
     "@yornaath/batshit": "0.10.1",
@@ -52,21 +52,21 @@
     "electron-log": "5.2.4",
     "embla-carousel-react": "8.5.1",
     "embla-carousel-wheel-gestures": "8.0.1",
-    "es-toolkit": "1.29.0",
-    "firebase": "11.0.2",
+    "es-toolkit": "1.30.1",
+    "firebase": "11.1.0",
     "foxact": "0.2.43",
-    "framer-motion": "11.13.1",
+    "framer-motion": "11.14.4",
     "franc-min": "6.2.0",
     "fuse.js": "7.0.0",
     "hast-util-to-jsx-runtime": "2.3.2",
     "hast-util-to-mdast": "^10.1.1",
     "hast-util-to-text": "4.0.2",
-    "i18next": "^24.0.5",
+    "i18next": "^24.1.0",
     "i18next-browser-languagedetector": "8.0.2",
     "idb-keyval": "6.2.1",
     "immer": "10.1.1",
     "jotai": "2.10.3",
-    "katex": "0.16.14",
+    "katex": "0.16.15",
     "lethargy": "1.0.9",
     "masonic": "4.0.1",
     "mdast-util-gfm-table": "^2.0.0",
@@ -75,14 +75,14 @@
     "ofetch": "1.4.1",
     "path-to-regexp": "8.2.0",
     "plain-shiki": "0.0.12",
-    "re-resizable": "6.10.1",
+    "re-resizable": "6.10.3",
     "react-blurhash": "^0.3.0",
     "react-error-boundary": "4.1.2",
     "react-fast-marquee": "1.6.5",
-    "react-hook-form": "7.54.0",
+    "react-hook-form": "7.54.1",
     "react-hotkeys-hook": "4.6.1",
-    "react-i18next": "^15.1.3",
-    "react-intersection-observer": "9.13.1",
+    "react-i18next": "^15.2.0",
+    "react-intersection-observer": "9.14.0",
     "react-ios-pwa-prompt": "^2.0.6",
     "react-resizable-layout": "npm:@innei/[email protected]",
     "react-router": "7.0.2",
@@ -98,9 +98,9 @@
     "remark-gh-alerts": "0.0.3",
     "remark-parse": "11.0.0",
     "remark-rehype": "11.1.1",
-    "shiki": "1.24.1",
+    "shiki": "1.24.2",
     "sonner": "1.7.1",
-    "tldts": "6.1.66",
+    "tldts": "6.1.68",
     "unified": "11.0.5",
     "unist-util-visit-parents": "^6.0.1",
     "use-context-selector": "2.0.0",
@@ -109,7 +109,7 @@
     "usehooks-ts": "3.1.0",
     "vfile": "6.0.3",
     "web-push": "3.6.7",
-    "zod": "3.23.8",
+    "zod": "3.24.1",
     "zustand": "5.0.2"
   },
   "devDependencies": {
@@ -124,14 +124,14 @@
     "@follow/utils": "workspace:*",
     "@hono/node-server": "1.13.7",
     "@types/katex": "0.16.7",
-    "@types/node": "^22.10.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.2",
     "@vite-pwa/assets-generator": "^0.2.6",
     "fake-indexeddb": "6.0.0",
     "happy-dom": "15.11.7",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-scan": "0.0.41"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-scan": "0.0.46"
   }
-}
+}

apps/renderer/src/components/common/ExPromise.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react"
 import { useLayoutEffect, useState } from "react"
 
 const NOT_RESOLVED = Symbol("NOT_RESOLVED")

apps/renderer/src/components/ui/code-highlighter/copy-button.tsx

@@ -26,7 +26,7 @@ export const CopyButton: Component<{
   style?: React.CSSProperties
 }> = ({ value, className, style }) => {
   const [copied, setCopied] = useState(false)
-  const copiedTimerRef = useRef<any>()
+  const copiedTimerRef = useRef<any>(undefined)
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(value)
     setCopied(true)

apps/renderer/src/components/ui/markdown/HTML.tsx

@@ -1,5 +1,6 @@
 import { MemoedDangerousHTMLStyle } from "@follow/components/common/MemoedDangerousHTMLStyle.js"
 import katexStyle from "katex/dist/katex.min.css?raw"
+import type { JSX } from "react"
 import { createElement, Fragment, memo, useEffect, useMemo, useState } from "react"
 
 import { useShowAITranslation } from "~/atoms/ai-translation"

apps/renderer/src/components/ui/markdown/components/hooks.tsx

@@ -116,7 +116,7 @@ export const useScrollTracking = (
     })
   }, [toc, h, headingRangeParserEvent])
 
-  const throttleCallerRef = useRef<DebouncedFuncLeading<() => void>>()
+  const throttleCallerRef = useRef<DebouncedFuncLeading<() => void>>(undefined)
 
   useEffect(() => {
     if (!scrollContainerElement) return

apps/renderer/src/components/ui/media/SwipeMedia.tsx

@@ -3,15 +3,14 @@ import { cn } from "@follow/utils/utils"
 import useEmblaCarousel from "embla-carousel-react"
 import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures"
 import { uniqBy } from "es-toolkit/compat"
-import { useCallback, useRef } from "react"
+import { useCallback, useMemo, useRef } from "react"
 
 import { Media } from "~/components/ui/media"
 
 const defaultProxySize = {
   width: 600,
   height: 0,
 }
-
 export function SwipeMedia({
   media,
   className,
@@ -28,11 +27,14 @@ export function SwipeMedia({
     height: number
   }
 }) {
-  const uniqMedia = media ? uniqBy(media, "url") : []
+  const uniqMedia = useMemo(() => (media ? uniqBy(media, "url") : []), [media])
 
   const hoverRef = useRef<HTMLDivElement>(null)
 
-  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [WheelGesturesPlugin()])
+  const [emblaRef, emblaApi] = useEmblaCarousel(
+    { loop: true },
+    useMemo(() => [WheelGesturesPlugin()], []),
+  )
 
   const scrollPrev = useCallback(() => {
     if (emblaApi) emblaApi.scrollPrev()
@@ -54,7 +56,12 @@ export function SwipeMedia({
       )}
     >
       {uniqMedia?.length ? (
-        <div ref={emblaRef} className="size-full overflow-hidden">
+        <div
+          ref={(ref) => {
+            emblaRef(ref)
+          }}
+          className="size-full overflow-hidden"
+        >
           <div className="flex size-full">
             {uniqMedia?.slice(0, 5).map((med, i) => (
               <div className="mr-2 size-full flex-none" key={med.url}>

apps/renderer/src/components/ui/media/VideoPlayer.tsx

@@ -47,13 +47,13 @@ export type VideoPlayerRef = {
     unmute: () => void
   }
 
-  wrapperRef: React.RefObject<HTMLDivElement>
+  wrapperRef: React.RefObject<HTMLDivElement | null>
 }
 
 interface VideoPlayerContextValue {
   state: HTMLMediaState
   controls: VideoPlayerRef["controls"]
-  wrapperRef: React.RefObject<HTMLDivElement>
+  wrapperRef: React.RefObject<HTMLDivElement | null>
   src: string
   variant: "preview" | "player" | "thumbnail"
 }

apps/renderer/src/components/ui/modal/stacked/custom-modal.tsx

@@ -1,7 +1,7 @@
 import { nextFrame, stopPropagation } from "@follow/utils/dom"
 import { cn } from "@follow/utils/utils"
 import { m, useAnimationControls } from "framer-motion"
-import type { FC, PropsWithChildren } from "react"
+import type { FC, JSX, PropsWithChildren } from "react"
 import { useEffect, useState } from "react"
 
 import { ModalClose } from "./components"

apps/renderer/src/components/ui/modal/stacked/hooks.tsx

@@ -101,7 +101,7 @@ const actions = {
 export const useCurrentModal = () => useContext(CurrentModalContext)
 
 export const useResizeableModal = (
-  modalElementRef: React.RefObject<HTMLDivElement>,
+  modalElementRef: React.RefObject<HTMLDivElement | null>,
   {
     enableResizeable,
     dragControls,

apps/renderer/src/components/ui/modal/stacked/internal/use-drag.ts

@@ -8,7 +8,7 @@ import { useResizeableModal } from "../hooks"
  * @internal
  */
 export const useModalResizeAndDrag = (
-  modalElementRef: RefObject<HTMLDivElement>,
+  modalElementRef: RefObject<HTMLDivElement | null>,
   {
     resizeable,
     draggable,

apps/renderer/src/lib/parse-html.ts

@@ -178,7 +178,7 @@ export const parseHtml = (
             markInlineImage(node)
             return createElement("i", props, props.children)
           },
-          // @ts-expect-error
+
           math: Math,
           hr: ({ node, ...props }) =>
             createElement("hr", {

apps/renderer/src/modules/app-layout/entry-column/desktop.tsx

@@ -16,7 +16,7 @@ import { EntryColumn } from "~/modules/entry-column"
 import { AppLayoutGridContainerProvider } from "~/providers/app-grid-layout-container-provider"
 
 export function CenterColumnDesktop() {
-  const containerRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null!)
 
   // Memo this initial value to avoid re-render
 

apps/renderer/src/modules/app-layout/feed-column/desktop.tsx

@@ -11,7 +11,7 @@ import { Slot } from "@radix-ui/react-slot"
 import { debounce } from "es-toolkit/compat"
 import type { PropsWithChildren } from "react"
 import * as React from "react"
-import { forwardRef, Suspense, useEffect, useRef, useState } from "react"
+import { Suspense, useEffect, useRef, useState } from "react"
 import { useHotkeys } from "react-hotkeys-hook"
 import { Trans } from "react-i18next"
 import { useResizable } from "react-resizable-layout"
@@ -64,7 +64,7 @@ export function MainDestopLayout() {
   const isAuthFail = useLoginModalShow()
   const user = useWhoami()
 
-  const containerRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLElement>(null!)
 
   useDailyTask()
 
@@ -157,7 +157,7 @@ export function MainDestopLayout() {
   )
 }
 
-const RootContainer = forwardRef<HTMLDivElement, PropsWithChildren>(({ children }, ref) => {
+const RootContainer: ComponentWithRef<object, HTMLElement> = ({ children, ref }) => {
   const feedColWidth = useUISettingKey("feedColWidth")
 
   const [elementRef, _setElementRef] = useState<HTMLDivElement | null>(null)
@@ -180,13 +180,13 @@ const RootContainer = forwardRef<HTMLDivElement, PropsWithChildren>(({ children
       {children}
     </div>
   )
-})
+}
 
 const FeedResponsiveResizerContainer = ({
   containerRef,
   children,
 }: {
-  containerRef: React.RefObject<HTMLDivElement>
+  containerRef: React.RefObject<HTMLElement>
 } & PropsWithChildren) => {
   const { isDragging, position, separatorProps, separatorCursor } = useResizable({
     axis: "x",