Update to React 19 (alveusgg#908)

* Update to React 19 * Fix global JSX type usages * Fix deprecated MutableRefObject type usage * Fix missing initial values for useRef usages * Replace forwardRef usages with ref prop * Replace Context.Provider usages with Context directly * Replace react-quill dependency with react-quill-new * Fix raw style CSS indentation
flakey5 · Dec 20, 2024 · 58b8876 · 58b8876
1 parent 1f7714a
commit 58b8876
Show file tree

Hide file tree

Showing 29 changed files with 1,393 additions and 1,444 deletions.
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -74,12 +74,12 @@
     "pluralize": "^8.0.0",
     "probe-image-size": "^7.2.3",
     "raw-body": "^3.0.0",
-    "react": "18.3.1",
+    "react": "^19.0.0",
     "react-aria": "^3.36.0",
-    "react-dom": "18.3.1",
+    "react-dom": "^19.0.0",
     "react-error-boundary": "^4.1.2",
     "react-markdown": "^9.0.1",
-    "react-quill": "^2.0.0",
+    "react-quill-new": "^3.3.3",
     "react-stately": "^3.34.0",
     "react-textarea-autosize": "^8.5.6",
     "reactflow": "^11.11.4",
@@ -110,8 +110,8 @@
     "@types/oauth": "^0.9.6",
     "@types/pluralize": "^0.0.33",
     "@types/probe-image-size": "^7.2.5",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@types/serviceworker": "^0.0.107",
     "@types/xml2js": "^0.4.14",
     "autoprefixer": "^10.4.20",

diff --git a/apps/website/src/components/content/Carousel.tsx b/apps/website/src/components/content/Carousel.tsx
@@ -35,7 +35,7 @@ const Carousel = ({
 
   // Allow the user to scroll to the next/previous image
   const ref = useRef<HTMLDivElement>(null);
-  const last = useRef<{ left: number; right: number } | null>(null);
+  const last = useRef<{ left: number; right: number }>(null);
   const move = useCallback((direction: "left" | "right") => {
     const { current } = ref;
     if (!current || !current.children[0]) return;
@@ -77,7 +77,7 @@ const Carousel = ({
 
   // If the user interacts, we want to pause the auto-scroll for a bit
   const [paused, setPaused] = useState(false);
-  const pausedTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pausedTimeout = useRef<NodeJS.Timeout>(null);
   const interacted = useCallback(() => {
     if (auto) {
       setPaused(true);

diff --git a/apps/website/src/components/content/Grouped.tsx b/apps/website/src/components/content/Grouped.tsx
@@ -1,19 +1,18 @@
-import { useCallback, type ComponentType, type RefAttributes } from "react";
+import { useCallback, type ComponentType, type Ref } from "react";
 
 import { type Items } from "@/hooks/grouped";
 
-export interface GroupedProps<T> {
+export interface GroupedProps<T, R extends HTMLElement> {
   items: T[];
   option: string;
   group: string | null;
   name: string | null;
   index: number | null;
   size: number | null;
+  ref?: Ref<R>;
 }
 
-type Component<T, R extends HTMLElement> = ComponentType<
-  GroupedProps<T> & RefAttributes<R>
->;
+type Component<T, R extends HTMLElement> = ComponentType<GroupedProps<T, R>>;
 
 const Group = <T, R extends HTMLElement>({
   option,

diff --git a/apps/website/src/components/content/Heading.tsx b/apps/website/src/components/content/Heading.tsx
@@ -1,4 +1,4 @@
-import { useMemo, type ReactNode } from "react";
+import { useMemo, type ReactNode, type JSX } from "react";
 
 import { classes } from "@/utils/classes";
 

diff --git a/apps/website/src/components/content/Video.tsx b/apps/website/src/components/content/Video.tsx
@@ -36,13 +36,13 @@ const Video = ({
   threshold = 0.1,
 }: VideoProps) => {
   const [seen, setSeen] = useState(false);
-  const observer = useRef<IntersectionObserver>();
+  const observer = useRef<IntersectionObserver>(null);
   const ref = useCallback(
     (node: HTMLVideoElement) => {
       if (!node) {
         if (observer.current) {
           observer.current.disconnect();
-          observer.current = undefined;
+          observer.current = null;
         }
         return;
       }