diff --git a/app/app.tsx b/app/app.tsx index f3db7933..2079b269 100644 --- a/app/app.tsx +++ b/app/app.tsx @@ -20,17 +20,19 @@ export function App(props: { const hash = commitHash ?? diffId; return ( - - {bucket && hash ? ( - - ) : ( - - )} - + + + {bucket && hash ? ( + + ) : ( + + )} + + ); } -function PageWrapper(props: PropsWithChildren) { +export function OuterHtml(props: PropsWithChildren) { return ( @@ -44,11 +46,7 @@ function PageWrapper(props: PropsWithChildren) { Comparadise - - - {props.children} - - + {props.children} ); } diff --git a/app/client.tsx b/app/client.tsx index 40e99f4e..19d8f0df 100644 --- 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, - + + + ); diff --git a/app/frontend/components/main-page.tsx b/app/frontend/components/main-page.tsx index f9453206..9255abdc 100644 --- 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 index 1600dbff..af1d3df1 100644 --- 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 index 482b6408..2f09475f 100644 --- 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( - - {process.env.NODE_ENV === 'development' && ( -