From e0188eca24496da78971335ddf3a732ab6ba9c20 Mon Sep 17 00:00:00 2001 From: Joosep Alviste Date: Sat, 17 Feb 2024 23:20:13 +0200 Subject: [PATCH] build(webapp): migrate to Vike v1 API https://vike.dev/migration/v1-design --- apps/webapp/src/features/+config.h.ts | 5 +++++ .../src/features/_default.page.route.ts | 1 - .../src/features/auth/pages/+config.h.ts | 5 +++++ .../auth/pages/_default.page.route.ts | 1 - .../features/auth/pages/login.page.route.ts | 8 ------- .../pages/{login.page.tsx => login/+Page.tsx} | 4 ++-- .../src/features/auth/pages/login/+guard.ts | 5 +++++ .../auth/pages/register.page.route.ts | 8 ------- .../{register.page.tsx => register/+Page.tsx} | 4 ++-- .../features/auth/pages/register/+guard.ts | 5 +++++ ...ault.page.server.ts => +onBeforeRender.ts} | 0 .../pages/{@id.page.tsx => @id/+Page.tsx} | 2 +- .../+onBeforeRender.ts} | 0 .../list/{index.page.route.ts => +guard.ts} | 6 +++--- .../series/pages/list/@status.page.route.ts | 8 ------- .../{@status.page.tsx => @status/+Page.tsx} | 2 +- .../series/pages/list/@status/+guard.ts | 5 +++++ .../_error/+Page.tsx} | 2 +- .../src/{renderer => pages/_error}/404.svg | 0 .../_error/ErrorPage.css.ts} | 0 .../{renderer => pages/_error}/ServerDown.svg | 0 .../pages/about/{index.page.tsx => +Page.tsx} | 2 +- .../{index.page.css.ts => AboutPage.css.ts} | 0 .../pages/index/{index.page.tsx => +Page.tsx} | 0 apps/webapp/src/pages/index/+guard.ts | 5 +++++ .../src/pages/index/index.page.route.ts | 8 ------- apps/webapp/src/renderer/+config.h.ts | 16 ++++++++++++++ ...lt.page.client.tsx => +onRenderClient.tsx} | 7 +------ ...ault.page.server.tsx => +onRenderHtml.tsx} | 11 +--------- apps/webapp/src/utils/redirect.ts | 21 +++++++++++++++++++ 30 files changed, 80 insertions(+), 61 deletions(-) create mode 100644 apps/webapp/src/features/+config.h.ts delete mode 100644 apps/webapp/src/features/_default.page.route.ts create mode 100644 apps/webapp/src/features/auth/pages/+config.h.ts delete mode 100644 apps/webapp/src/features/auth/pages/_default.page.route.ts delete mode 100644 apps/webapp/src/features/auth/pages/login.page.route.ts rename apps/webapp/src/features/auth/pages/{login.page.tsx => login/+Page.tsx} (73%) create mode 100644 apps/webapp/src/features/auth/pages/login/+guard.ts delete mode 100644 apps/webapp/src/features/auth/pages/register.page.route.ts rename apps/webapp/src/features/auth/pages/{register.page.tsx => register/+Page.tsx} (71%) create mode 100644 apps/webapp/src/features/auth/pages/register/+guard.ts rename apps/webapp/src/features/series/pages/{_default.page.server.ts => +onBeforeRender.ts} (100%) rename apps/webapp/src/features/series/pages/{@id.page.tsx => @id/+Page.tsx} (81%) rename apps/webapp/src/features/series/pages/{@id.page.server.ts => @id/+onBeforeRender.ts} (100%) rename apps/webapp/src/features/series/pages/list/{index.page.route.ts => +guard.ts} (65%) delete mode 100644 apps/webapp/src/features/series/pages/list/@status.page.route.ts rename apps/webapp/src/features/series/pages/list/{@status.page.tsx => @status/+Page.tsx} (88%) create mode 100644 apps/webapp/src/features/series/pages/list/@status/+guard.ts rename apps/webapp/src/{renderer/_error.page.tsx => pages/_error/+Page.tsx} (95%) rename apps/webapp/src/{renderer => pages/_error}/404.svg (100%) rename apps/webapp/src/{renderer/_error.page.css.ts => pages/_error/ErrorPage.css.ts} (100%) rename apps/webapp/src/{renderer => pages/_error}/ServerDown.svg (100%) rename apps/webapp/src/pages/about/{index.page.tsx => +Page.tsx} (92%) rename apps/webapp/src/pages/about/{index.page.css.ts => AboutPage.css.ts} (100%) rename apps/webapp/src/pages/index/{index.page.tsx => +Page.tsx} (100%) create mode 100644 apps/webapp/src/pages/index/+guard.ts delete mode 100644 apps/webapp/src/pages/index/index.page.route.ts create mode 100644 apps/webapp/src/renderer/+config.h.ts rename apps/webapp/src/renderer/{_default.page.client.tsx => +onRenderClient.tsx} (90%) rename apps/webapp/src/renderer/{_default.page.server.tsx => +onRenderHtml.tsx} (92%) create mode 100644 apps/webapp/src/utils/redirect.ts diff --git a/apps/webapp/src/features/+config.h.ts b/apps/webapp/src/features/+config.h.ts new file mode 100644 index 00000000..efc535a8 --- /dev/null +++ b/apps/webapp/src/features/+config.h.ts @@ -0,0 +1,5 @@ +import type { Config } from 'vike/types' + +export default { + filesystemRoutingRoot: '/', +} satisfies Config diff --git a/apps/webapp/src/features/_default.page.route.ts b/apps/webapp/src/features/_default.page.route.ts deleted file mode 100644 index 515c6ad8..00000000 --- a/apps/webapp/src/features/_default.page.route.ts +++ /dev/null @@ -1 +0,0 @@ -export const filesystemRoutingRoot = '/' diff --git a/apps/webapp/src/features/auth/pages/+config.h.ts b/apps/webapp/src/features/auth/pages/+config.h.ts new file mode 100644 index 00000000..efc535a8 --- /dev/null +++ b/apps/webapp/src/features/auth/pages/+config.h.ts @@ -0,0 +1,5 @@ +import type { Config } from 'vike/types' + +export default { + filesystemRoutingRoot: '/', +} satisfies Config diff --git a/apps/webapp/src/features/auth/pages/_default.page.route.ts b/apps/webapp/src/features/auth/pages/_default.page.route.ts deleted file mode 100644 index 515c6ad8..00000000 --- a/apps/webapp/src/features/auth/pages/_default.page.route.ts +++ /dev/null @@ -1 +0,0 @@ -export const filesystemRoutingRoot = '/' diff --git a/apps/webapp/src/features/auth/pages/login.page.route.ts b/apps/webapp/src/features/auth/pages/login.page.route.ts deleted file mode 100644 index d9eef7e5..00000000 --- a/apps/webapp/src/features/auth/pages/login.page.route.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { redirect } from 'vike/abort' -import type { GuardSync } from 'vike/types' - -export const guard: GuardSync = (pageContext) => { - if (pageContext.currentUser) { - throw redirect('/') - } -} diff --git a/apps/webapp/src/features/auth/pages/login.page.tsx b/apps/webapp/src/features/auth/pages/login/+Page.tsx similarity index 73% rename from apps/webapp/src/features/auth/pages/login.page.tsx rename to apps/webapp/src/features/auth/pages/login/+Page.tsx index 43334765..16059550 100644 --- a/apps/webapp/src/features/auth/pages/login.page.tsx +++ b/apps/webapp/src/features/auth/pages/login/+Page.tsx @@ -1,8 +1,8 @@ import { Link } from '@serieslist/core-ui' import React from 'react' -import { AuthLayout } from '../components' -import { LoginForm } from '../components/LoginForm' +import { AuthLayout } from '../../components' +import { LoginForm } from '../../components/LoginForm' export const Page = () => ( { - if (pageContext.currentUser) { - throw redirect('/') - } -} diff --git a/apps/webapp/src/features/auth/pages/register.page.tsx b/apps/webapp/src/features/auth/pages/register/+Page.tsx similarity index 71% rename from apps/webapp/src/features/auth/pages/register.page.tsx rename to apps/webapp/src/features/auth/pages/register/+Page.tsx index 742f2c92..50807b04 100644 --- a/apps/webapp/src/features/auth/pages/register.page.tsx +++ b/apps/webapp/src/features/auth/pages/register/+Page.tsx @@ -1,8 +1,8 @@ import { Link } from '@serieslist/core-ui' import React from 'react' -import { AuthLayout } from '../components' -import { RegisterForm } from '../components/RegisterForm' +import { AuthLayout } from '../../components' +import { RegisterForm } from '../../components/RegisterForm' export const Page = () => ( { const ctx = usePageContext() diff --git a/apps/webapp/src/features/series/pages/@id.page.server.ts b/apps/webapp/src/features/series/pages/@id/+onBeforeRender.ts similarity index 100% rename from apps/webapp/src/features/series/pages/@id.page.server.ts rename to apps/webapp/src/features/series/pages/@id/+onBeforeRender.ts diff --git a/apps/webapp/src/features/series/pages/list/index.page.route.ts b/apps/webapp/src/features/series/pages/list/+guard.ts similarity index 65% rename from apps/webapp/src/features/series/pages/list/index.page.route.ts rename to apps/webapp/src/features/series/pages/list/+guard.ts index b2ae58e0..c7d5ff60 100644 --- a/apps/webapp/src/features/series/pages/list/index.page.route.ts +++ b/apps/webapp/src/features/series/pages/list/+guard.ts @@ -1,10 +1,10 @@ import { redirect } from 'vike/abort' import type { GuardSync } from 'vike/types' +import { requireAuthentication } from '#/utils/redirect' + export const guard: GuardSync = (pageContext) => { - if (!pageContext.currentUser) { - throw redirect('/') - } + requireAuthentication()(pageContext) throw redirect('/series/list/in-progress') } diff --git a/apps/webapp/src/features/series/pages/list/@status.page.route.ts b/apps/webapp/src/features/series/pages/list/@status.page.route.ts deleted file mode 100644 index e201e540..00000000 --- a/apps/webapp/src/features/series/pages/list/@status.page.route.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { redirect } from 'vike/abort' -import type { GuardSync } from 'vike/types' - -export const guard: GuardSync = (pageContext) => { - if (!pageContext.currentUser) { - throw redirect('/') - } -} diff --git a/apps/webapp/src/features/series/pages/list/@status.page.tsx b/apps/webapp/src/features/series/pages/list/@status/+Page.tsx similarity index 88% rename from apps/webapp/src/features/series/pages/list/@status.page.tsx rename to apps/webapp/src/features/series/pages/list/@status/+Page.tsx index 684fa52c..158307a4 100644 --- a/apps/webapp/src/features/series/pages/list/@status.page.tsx +++ b/apps/webapp/src/features/series/pages/list/@status/+Page.tsx @@ -3,7 +3,7 @@ import React from 'react' import { UserSeriesStatusStatus } from '#/generated/gql/graphql' import { usePageContext } from '#/hooks' -import { UserSeriesListPage } from '../../components/UserSeriesListPage' +import { UserSeriesListPage } from '../../../components/UserSeriesListPage' const statuses: Record = { ['in-progress']: UserSeriesStatusStatus.InProgress, diff --git a/apps/webapp/src/features/series/pages/list/@status/+guard.ts b/apps/webapp/src/features/series/pages/list/@status/+guard.ts new file mode 100644 index 00000000..81164a58 --- /dev/null +++ b/apps/webapp/src/features/series/pages/list/@status/+guard.ts @@ -0,0 +1,5 @@ +import type { GuardSync } from 'vike/types' + +import { requireAuthentication } from '#/utils/redirect' + +export const guard: GuardSync = requireAuthentication() diff --git a/apps/webapp/src/renderer/_error.page.tsx b/apps/webapp/src/pages/_error/+Page.tsx similarity index 95% rename from apps/webapp/src/renderer/_error.page.tsx rename to apps/webapp/src/pages/_error/+Page.tsx index f6ab7f04..92fb3373 100644 --- a/apps/webapp/src/renderer/_error.page.tsx +++ b/apps/webapp/src/pages/_error/+Page.tsx @@ -4,7 +4,7 @@ import React from 'react' import { usePageContext } from '#/hooks' import Illustration404 from './404.svg?react' -import * as s from './_error.page.css' +import * as s from './ErrorPage.css' import ServerDown from './ServerDown.svg?react' export const Page = () => { diff --git a/apps/webapp/src/renderer/404.svg b/apps/webapp/src/pages/_error/404.svg similarity index 100% rename from apps/webapp/src/renderer/404.svg rename to apps/webapp/src/pages/_error/404.svg diff --git a/apps/webapp/src/renderer/_error.page.css.ts b/apps/webapp/src/pages/_error/ErrorPage.css.ts similarity index 100% rename from apps/webapp/src/renderer/_error.page.css.ts rename to apps/webapp/src/pages/_error/ErrorPage.css.ts diff --git a/apps/webapp/src/renderer/ServerDown.svg b/apps/webapp/src/pages/_error/ServerDown.svg similarity index 100% rename from apps/webapp/src/renderer/ServerDown.svg rename to apps/webapp/src/pages/_error/ServerDown.svg diff --git a/apps/webapp/src/pages/about/index.page.tsx b/apps/webapp/src/pages/about/+Page.tsx similarity index 92% rename from apps/webapp/src/pages/about/index.page.tsx rename to apps/webapp/src/pages/about/+Page.tsx index 6abae444..b3ddb375 100644 --- a/apps/webapp/src/pages/about/index.page.tsx +++ b/apps/webapp/src/pages/about/+Page.tsx @@ -1,7 +1,7 @@ import { Title } from '@serieslist/core-ui' import React from 'react' -import * as s from './index.page.css' +import * as s from './AboutPage.css' import TMDBLogo from './TMDBLogo.svg?react' export const Page = () => ( diff --git a/apps/webapp/src/pages/about/index.page.css.ts b/apps/webapp/src/pages/about/AboutPage.css.ts similarity index 100% rename from apps/webapp/src/pages/about/index.page.css.ts rename to apps/webapp/src/pages/about/AboutPage.css.ts diff --git a/apps/webapp/src/pages/index/index.page.tsx b/apps/webapp/src/pages/index/+Page.tsx similarity index 100% rename from apps/webapp/src/pages/index/index.page.tsx rename to apps/webapp/src/pages/index/+Page.tsx diff --git a/apps/webapp/src/pages/index/+guard.ts b/apps/webapp/src/pages/index/+guard.ts new file mode 100644 index 00000000..090541ea --- /dev/null +++ b/apps/webapp/src/pages/index/+guard.ts @@ -0,0 +1,5 @@ +import type { GuardSync } from 'vike/types' + +import { requireNoAuthentication } from '#/utils/redirect' + +export const guard: GuardSync = requireNoAuthentication() diff --git a/apps/webapp/src/pages/index/index.page.route.ts b/apps/webapp/src/pages/index/index.page.route.ts deleted file mode 100644 index 15adac6c..00000000 --- a/apps/webapp/src/pages/index/index.page.route.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { redirect } from 'vike/abort' -import type { GuardSync } from 'vike/types' - -export const guard: GuardSync = (pageContext) => { - if (pageContext.currentUser) { - throw redirect('/series/list/in-progress') - } -} diff --git a/apps/webapp/src/renderer/+config.h.ts b/apps/webapp/src/renderer/+config.h.ts new file mode 100644 index 00000000..9a41bf50 --- /dev/null +++ b/apps/webapp/src/renderer/+config.h.ts @@ -0,0 +1,16 @@ +import type { Config } from 'vike/types' + +export default { + passToClient: [ + 'pageProps', + 'routeParams', + 'documentProps', + 'apolloInitialState', + 'currentUser', + 'theme', + ], + // Enable client-side routing + // https://vike.dev/clientRouting + clientRouting: true, + hydrationCanBeAborted: true, +} satisfies Config diff --git a/apps/webapp/src/renderer/_default.page.client.tsx b/apps/webapp/src/renderer/+onRenderClient.tsx similarity index 90% rename from apps/webapp/src/renderer/_default.page.client.tsx rename to apps/webapp/src/renderer/+onRenderClient.tsx index 8c271574..cf77bf95 100644 --- a/apps/webapp/src/renderer/_default.page.client.tsx +++ b/apps/webapp/src/renderer/+onRenderClient.tsx @@ -18,7 +18,7 @@ let root: Root | undefined */ let apollo: ApolloClient | undefined -export function render(pageContext: PageContextClient) { +export function onRenderClient(pageContext: PageContextClient) { const { Page, pageProps } = pageContext // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition @@ -60,8 +60,3 @@ export function render(pageContext: PageContextClient) { } document.title = getPageTitle(pageContext) } - -// Enable client-side routing -// https://vike.dev/clientRouting -export const clientRouting = true -export const hydrationCanBeAborted = true diff --git a/apps/webapp/src/renderer/_default.page.server.tsx b/apps/webapp/src/renderer/+onRenderHtml.tsx similarity index 92% rename from apps/webapp/src/renderer/_default.page.server.tsx rename to apps/webapp/src/renderer/+onRenderHtml.tsx index 034dfa64..0ed608f2 100644 --- a/apps/webapp/src/renderer/_default.page.server.tsx +++ b/apps/webapp/src/renderer/+onRenderHtml.tsx @@ -8,18 +8,9 @@ import { THEME } from '#/utils/theme' import { PageShell } from './PageShell' -export const passToClient = [ - 'pageProps', - 'routeParams', - 'documentProps', - 'apolloInitialState', - 'currentUser', - 'theme', -] - const isProduction = process.env.NODE_ENV === 'production' -export async function render(pageContext: PageContextServer) { +export async function onRenderHtml(pageContext: PageContextServer) { const { Page, pageProps, theme } = pageContext // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition if (!Page) { diff --git a/apps/webapp/src/utils/redirect.ts b/apps/webapp/src/utils/redirect.ts new file mode 100644 index 00000000..f023fa46 --- /dev/null +++ b/apps/webapp/src/utils/redirect.ts @@ -0,0 +1,21 @@ +import { redirect } from 'vike/abort' +import type { GuardSync } from 'vike/types' + +const UNAUTHENTICATED_DEFAULT_URL = '/' +const AUTHENTICATED_DEFAULT_URL = '/series/list/in-progress' + +export const requireAuthentication = + (redirectTo = UNAUTHENTICATED_DEFAULT_URL): GuardSync => + (pageContext) => { + if (!pageContext.currentUser) { + throw redirect(redirectTo) + } + } + +export const requireNoAuthentication = + (redirectTo = AUTHENTICATED_DEFAULT_URL): GuardSync => + (pageContext) => { + if (pageContext.currentUser) { + throw redirect(redirectTo) + } + }