feat(deps): update react monorepo (major) (#603)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: renovate[bot] <renovate[bot]@users.noreply.github.com> Co-authored-by: Dan Adajian <[email protected]>
ExpediaGroup · Dec 11, 2024 · 53b9018 · 53b9018
1 parent 0b5ef8d
commit 53b9018
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 54 deletions.
diff --git a/app/app.tsx b/app/app.tsx
@@ -20,17 +20,19 @@ export function App(props: {
   const hash = commitHash ?? diffId;
 
   return (
-    <PageWrapper>
-      {bucket && hash ? (
-        <MainPage bucket={bucket} hash={hash} />
-      ) : (
-        <LandingPage />
-      )}
-    </PageWrapper>
+    <ClientProvider>
+      <BaseImageStateProvider>
+        {bucket && hash ? (
+          <MainPage bucket={bucket} hash={hash} />
+        ) : (
+          <LandingPage />
+        )}
+      </BaseImageStateProvider>
+    </ClientProvider>
   );
 }
 
-function PageWrapper(props: PropsWithChildren) {
+export function OuterHtml(props: PropsWithChildren) {
   return (
     <html lang="en">
       <head>
@@ -44,11 +46,7 @@ function PageWrapper(props: PropsWithChildren) {
         <link rel="stylesheet" href="/public/globals.css" />
         <title>Comparadise</title>
       </head>
-      <body>
-        <ClientProvider>
-          <BaseImageStateProvider>{props.children}</BaseImageStateProvider>
-        </ClientProvider>
-      </body>
+      <body>{props.children}</body>
     </html>
   );
 }
diff --git a/app/client.tsx b/app/client.tsx
@@ -3,11 +3,13 @@
 import React from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-import { App } from './app';
+import { App, OuterHtml } from './app';
 
 hydrateRoot(
   document,
   <BrowserRouter>
-    <App />
+    <OuterHtml>
+      <App />
+    </OuterHtml>
   </BrowserRouter>
 );
diff --git a/app/frontend/components/main-page.tsx b/app/frontend/components/main-page.tsx
@@ -25,13 +25,8 @@ const preloadNextPage = async (images?: Images) => {
   }
 
   const newViewType = await getViewType(images);
-  switch (newViewType) {
-    case ImageViews.SIDE_BY_SIDE:
-      await preloadAllImages(images.map(image => image.url));
-      break;
-    case ImageViews.SINGLE:
-    default:
-      break;
+  if (newViewType === ImageViews.SIDE_BY_SIDE) {
+    await preloadAllImages(images.map(image => image.url));
   }
 
   return newViewType;
@@ -73,19 +68,17 @@ export const MainPage = ({
   }
 
   React.useEffect(() => {
-    if (!isNextPageReady && data?.images) {
-      preloadNextPage(data.images).then(newViewType => {
-        if (newViewType) {
-          setIsNextPageReady(true);
-          setViewType(newViewType);
-          if (newViewType === ImageViews.SIDE_BY_SIDE) {
-            setAvailableView('BOTH');
-          } else {
-            setAvailableView('SINGLE');
-          }
+    preloadNextPage(data?.images).then(newViewType => {
+      if (newViewType) {
+        setIsNextPageReady(true);
+        setViewType(newViewType);
+        if (newViewType === ImageViews.SIDE_BY_SIDE) {
+          setAvailableView('BOTH');
+        } else {
+          setAvailableView('SINGLE');
         }
-      });
-    }
+      }
+    });
   }, [isNextPageReady, data?.images]);
 
   if (error) {

diff --git a/app/package.json b/app/package.json
@@ -12,13 +12,13 @@
     "@trpc/react-query": "next",
     "@trpc/server": "next",
     "@types/lodash": "4.17.13",
-    "@types/react": "18.3.14",
-    "@types/react-dom": "18.3.2",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
     "elysia": "1.1.26",
     "lodash": "4.17.21",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-router-dom": "6.28.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-router-dom": "7.0.2",
     "tailwindcss": "3.4.16",
     "zod": "3.23.8"
   },

diff --git a/app/server.tsx b/app/server.tsx
@@ -1,16 +1,17 @@
 import { staticPlugin } from '@elysiajs/static';
 import Elysia from 'elysia';
 import { router, trpcRouter } from './backend/src/router';
-import { StaticRouter } from 'react-router-dom/server';
+import { StaticRouter } from 'react-router-dom';
 import React from 'react';
-import { App } from './app';
+import { App, OuterHtml } from './app';
 // @ts-expect-error - have to import from server.browser for some reason
 import { renderToReadableStream } from 'react-dom/server.browser';
 
 await Bun.build({
   entrypoints: ['./client.tsx'],
   outdir: './public',
-  minify: true
+  minify: true,
+  target: 'bun'
 });
 
 const app = new Elysia()
@@ -20,14 +21,16 @@ const app = new Elysia()
   .get('*', async context => {
     const stream = await renderToReadableStream(
       <StaticRouter location={context.path}>
-        <App
-          bucket={context.query.bucket}
-          commitHash={context.query.commitHash}
-          diffId={context.query.diffId}
-        />
-        {process.env.NODE_ENV === 'development' && (
-          <script src="https://cdn.tailwindcss.com" />
-        )}
+        <OuterHtml>
+          <App
+            bucket={context.query.bucket}
+            commitHash={context.query.commitHash}
+            diffId={context.query.diffId}
+          />
+          {process.env.NODE_ENV === 'development' && (
+            <script src="https://cdn.tailwindcss.com" />
+          )}
+        </OuterHtml>
       </StaticRouter>,
       {
         bootstrapScripts: ['./public/client.js']

diff --git a/bun.lockb b/bun.lockb
diff --git a/docs/package.json b/docs/package.json
@@ -11,10 +11,10 @@
     "@docusaurus/preset-classic": "3.6.3",
     "@docusaurus/types": "3.6.3",
     "@mdx-js/react": "3.1.0",
-    "@types/react": "18.3.14",
+    "@types/react": "19.0.1",
     "ajv": "8.17.1",
     "clsx": "2.1.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   }
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "comparadise",
-  "packageManager": "[email protected].36",
+  "packageManager": "[email protected].38",
   "devDependencies": {
     "@swc/jest": "0.2.37",
     "@total-typescript/ts-reset": "0.6.1",