refactor: upgrade vite-plugin-ssr and migrate to Vike

`vite-plugin-ssr` is now renamed to Vike.

https://vite-plugin-ssr.com/vike

apps/webapp/package.json

@@ -53,7 +53,7 @@
     "react-highlight-words": "^0.20.0",
     "react-hook-form": "^7.43.9",
     "react-transition-group": "^4.4.5",
-    "vite-plugin-ssr": "^0.4.133",
+    "vike": "^0.4.142",
     "vite-plugin-svgr": "^3.2.0",
     "zod": "^3.21.4"
   },

apps/webapp/src/context/PageContextContext.ts

@@ -1,9 +1,8 @@
 import { createContext } from 'react'
+import type { PageContext } from 'vike/types'
 
 import { type NotWorthIt } from '#/types/utils'
 
-import type { PageContext } from '../renderer/types'
-
 export const PageContextContext = createContext<PageContext>(
   // The context will always exist
   undefined as NotWorthIt as PageContext,

apps/webapp/src/features/auth/components/LoginForm/LoginForm.tsx

@@ -1,6 +1,6 @@
 import { useMutation } from '@apollo/client'
 import React from 'react'
-import { navigate } from 'vite-plugin-ssr/client/router'
+import { navigate } from 'vike/client/router'
 import { z } from 'zod'
 
 import { Button, Error, Field } from '#/components'

apps/webapp/src/features/auth/components/RegisterForm/RegisterForm.tsx

@@ -1,6 +1,6 @@
 import { useMutation } from '@apollo/client'
 import React from 'react'
-import { navigate } from 'vite-plugin-ssr/client/router'
+import { navigate } from 'vike/client/router'
 import { z } from 'zod'
 
 import { Button, Error, Field } from '#/components'

apps/webapp/src/features/auth/pages/login.page.route.ts

@@ -0,0 +1,8 @@
+import { redirect } from 'vike/abort'
+import { type PageContext } from 'vike/types'
+
+export const guard = (pageContext: PageContext) => {
+  if (pageContext.currentUser) {
+    throw redirect('/')
+  }
+}

apps/webapp/src/features/auth/pages/register.page.route.ts

@@ -0,0 +1,8 @@
+import { redirect } from 'vike/abort'
+import { type PageContext } from 'vike/types'
+
+export const guard = (pageContext: PageContext) => {
+  if (pageContext.currentUser) {
+    throw redirect('/')
+  }
+}

apps/webapp/src/features/search/components/Search/Search.tsx

@@ -11,7 +11,7 @@ import React, {
   useCallback,
 } from 'react'
 import Highlighter from 'react-highlight-words'
-import { navigate } from 'vite-plugin-ssr/client/router'
+import { navigate } from 'vike/client/router'
 
 import { Icon, LoadingSpinner } from '#/components'
 import { SeriesPoster } from '#/features/series'

apps/webapp/src/features/series/components/UserSeriesListPage/UserSeriesListPage.tsx

@@ -1,6 +1,6 @@
 import * as Tabs from '@radix-ui/react-tabs'
 import React, { useEffect, useState } from 'react'
-import { navigate } from 'vite-plugin-ssr/client/router'
+import { navigate } from 'vike/client/router'
 
 import { UserSeriesStatus } from '#/generated/gql/graphql'
 

apps/webapp/src/features/series/pages/@id.page.server.ts

@@ -1,7 +1,7 @@
-import { RenderErrorPage } from 'vite-plugin-ssr/RenderErrorPage'
+import { RenderErrorPage } from 'vike/RenderErrorPage'
+import { type PageContext } from 'vike/types'
 
 import { SeriesDetailsPageDocument } from '#/generated/gql/graphql'
-import { type PageContext } from '#/renderer/types'
 
 export const onBeforeRender = async (pageContext: PageContext) => {
   const { apollo, routeParams } = pageContext

apps/webapp/src/features/series/pages/list/@status.page.route.ts

@@ -0,0 +1,8 @@
+import { redirect } from 'vike/abort'
+import { type PageContext } from 'vike/types'
+
+export const guard = (pageContext: PageContext) => {
+  if (!pageContext.currentUser) {
+    throw redirect('/')
+  }
+}

apps/webapp/src/features/series/pages/list/index.page.server.ts

@@ -1,13 +1,8 @@
-import { type PageContext } from '#/renderer/types'
+import { redirect } from 'vike/abort'
+import { type PageContext } from 'vike/types'
 
-export const onBeforeRender = (
-  pageContext: PageContext,
-): { pageContext?: Partial<PageContext> } | undefined => {
+export const guard = (pageContext: PageContext) => {
   if (!pageContext.currentUser) {
-    return {
-      pageContext: {
-        redirectTo: '/',
-      },
-    }
+    throw redirect('/')
   }
 }

apps/webapp/src/lib/testsSetup.ts

@@ -7,7 +7,7 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({
   disconnect: vi.fn(),
 }))
 
-vi.mock('vite-plugin-ssr/client/router', () => ({
+vi.mock('vike/client/router', () => ({
   navigate: vi.fn(),
 }))
 

apps/webapp/src/providers/PageContextProvider.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
+import { type PageContext } from 'vike/types'
 
 import { PageContextContext } from '#/context'
-import { type PageContext } from '#/renderer/types'
 
 type PageContextProviderProps = {
   pageContext: PageContext

apps/webapp/src/renderer/PageShell.tsx

@@ -1,6 +1,7 @@
 import { ApolloProvider } from '@apollo/client'
 import { TooltipProvider } from '@radix-ui/react-tooltip'
 import React from 'react'
+import type { PageContext } from 'vike/types'
 
 import { Header, NavSidebar } from '#/components'
 import { AuthenticatedUserProvider } from '#/features/auth'
@@ -12,7 +13,6 @@ import {
 } from '#/providers'
 
 import * as s from './PageShell.css'
-import type { PageContext } from './types'
 
 import './reset.css'
 import './global.css'

apps/webapp/src/renderer/_default.page.client.tsx

@@ -1,13 +1,13 @@
 import { type NormalizedCacheObject, type ApolloClient } from '@apollo/client'
 import React from 'react'
 import { hydrateRoot, createRoot, type Root } from 'react-dom/client'
+import type { PageContextClient } from 'vike/types'
 
 import { CurrentUserDocument } from '#/generated/gql/graphql'
 import { makeApolloClient } from '#/lib/apollo'
 
 import { getPageTitle } from './getPageTitle'
 import { PageShell } from './PageShell'
-import type { PageContextClient } from './types'
 
 import '#/lib/initSentry'
 
@@ -62,6 +62,6 @@ export function render(pageContext: PageContextClient) {
 }
 
 // Enable client-side routing
-// https://vite-plugin-ssr.com/clientRouting
+// https://vike.dev/clientRouting
 export const clientRouting = true
 export const hydrationCanBeAborted = true

apps/webapp/src/renderer/_default.page.server.tsx

@@ -1,12 +1,12 @@
 import { renderToStringWithData } from '@apollo/client/react/ssr'
 import React from 'react'
-import { escapeInject, dangerouslySkipEscape } from 'vite-plugin-ssr/server'
+import { escapeInject, dangerouslySkipEscape } from 'vike/server'
+import type { PageContextServer } from 'vike/types'
 
 import { darkThemeClass, lightThemeClass } from '#/styles/theme.css'
 import { THEME } from '#/utils/theme'
 
 import { PageShell } from './PageShell'
-import type { PageContextServer } from './types'
 
 export const passToClient = [
   'pageProps',
@@ -35,7 +35,7 @@ export async function render(pageContext: PageContextServer) {
 
   const apolloInitialState = pageContext.apollo.extract()
 
-  // See https://vite-plugin-ssr.com/head
+  // See https://vike.dev/head
   const { documentProps } = pageContext.exports
   const title = documentProps?.title ?? 'Serieslist'
   const desc =

apps/webapp/src/server/server.ts

@@ -1,4 +1,4 @@
-// Note that this file isn't processed by Vite, see https://github.com/brillout/vite-plugin-ssr/issues/562
+// Note that this file isn't processed by Vite, see https://vikejs/vike/issues/562
 
 import './loadDotenv'
 
@@ -10,14 +10,14 @@ import fastifyCookie from '@fastify/cookie'
 import { fastifyMiddie } from '@fastify/middie'
 import { fastifyStatic } from '@fastify/static'
 import { fastify } from 'fastify'
-import { renderPage } from 'vite-plugin-ssr/server'
+import { renderPage } from 'vike/server'
+import { type PageContext } from 'vike/types'
 
 import { config } from '#/config'
 import { CurrentUserDocument } from '#/generated/gql/graphql'
 import { type Theme } from '#/utils/theme'
 
 import { makeApolloClient } from '../lib/apollo.js'
-import { type PageContext } from '../renderer/types.js'
 
 import { root } from './root.js'
 
@@ -61,7 +61,10 @@ async function startServer() {
     })
 
     const theme = req.cookies.theme as Theme | undefined
-    const pageContextInit: Partial<PageContext> = {
+    const pageContextInit: Pick<
+      PageContext,
+      'urlOriginal' | 'apollo' | 'theme' | 'currentUser'
+    > = {
       urlOriginal: req.url,
       apollo,
       theme,
@@ -70,18 +73,22 @@ async function startServer() {
           ? currentUserResponse.data.me
           : undefined,
     }
-    const pageContext = await renderPage(pageContextInit)
-
-    const { httpResponse, redirectTo } = pageContext
-    if (redirectTo) {
-      return reply.redirect(307, redirectTo)
-    } else if (!httpResponse) {
+    const { httpResponse } = await renderPage(pageContextInit)
+    if (!httpResponse) {
       return reply.code(404).type('text/html').send('Not Found')
     }
 
-    const { body, statusCode, contentType } = httpResponse
-
-    return reply.status(statusCode).type(contentType).send(body)
+    const { body, statusCode, headers } = httpResponse
+
+    return reply
+      .status(statusCode)
+      .headers(
+        headers.reduce<Record<string, string>>((acc, [name, value]) => {
+          acc[name] = value
+          return acc
+        }, {}),
+      )
+      .send(body)
   })
 
   await app.listen({ port: config.port, host: '0.0.0.0' })

apps/webapp/src/types/pageContext.ts

@@ -0,0 +1,31 @@
+import { type NormalizedCacheObject, type ApolloClient } from '@apollo/client'
+
+import { type AuthenticatedUser } from '#/features/auth'
+import { type Theme } from '#/utils/theme'
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Vike {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+    interface PageContext {
+      apollo: ApolloClient<NormalizedCacheObject>
+      apolloInitialState: NormalizedCacheObject
+      currentUser?: AuthenticatedUser
+      theme?: Theme
+
+      exports: {
+        documentProps?: {
+          title?: string
+          description?: string
+        }
+      }
+
+      Page: (pageProps: PageProps) => JSX.Element
+      pageProps?: PageProps
+    }
+  }
+}
+
+type PageProps = Record<string, unknown>
+
+export {}

apps/webapp/vite.config.ts

@@ -5,7 +5,7 @@ import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
 import react from '@vitejs/plugin-react'
 import { loadEnv } from 'vite'
 import { VitePWA } from 'vite-plugin-pwa'
-import ssr from 'vite-plugin-ssr/plugin'
+import ssr from 'vike/plugin'
 import svgr from 'vite-plugin-svgr'
 import { defineConfig } from 'vitest/config'