web: Migrate to vike v1 paths

web/renderer/_error.page.vue → web/pages/_error/+Page.vue

@@ -6,11 +6,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import ErrorLayout from '~/layouts/error.vue'
+import ErrorLayout from '../../layouts/error.vue'
 import '~/assets/css/tailwind.css'
 import '~/assets/css/transitions.css'
 import '~/assets/css/fonts.css'
-import Error from '../pages/error.vue'
+import Error from '../error.vue'
 
 export default defineComponent({
   components: {

web/pages/_error/+config.h.ts

@@ -0,0 +1,7 @@
+export default {
+  passToClient: [
+    'errorWhileRendering',
+    'errorMessage',
+    'statusCode',
+  ],
+}

web/pages/_error/+onRenderClient.ts

@@ -0,0 +1,9 @@
+import { createApp } from './error-app'
+import type { PageContext } from '../../renderer/types'
+
+export { onRenderClient }
+
+async function onRenderClient(pageContext: PageContext) {
+  const params = createApp(pageContext)
+  params.app.mount('#app')
+}

web/renderer/_error.page.server.ts → web/pages/_error/+onRenderHtml.ts

@@ -1,19 +1,12 @@
 import { renderToString } from '@vue/server-renderer'
 import { dangerouslySkipEscape, escapeInject } from 'vike/server'
 import { createApp } from './error-app'
-import type { PageContext } from './types'
+import type { PageContext } from '../../renderer/types'
 import { renderSSRHead } from '@unhead/ssr'
 
-export { passToClient }
-export { render }
+export { onRenderHtml }
 
-const passToClient = [
-  'errorWhileRendering',
-  'errorMessage',
-  'statusCode',
-]
-
-async function render(pageContext: PageContext) {
+async function onRenderHtml(pageContext: PageContext) {
   const { app, head } = createApp(pageContext)
 
   const string = await renderToString(app)

web/renderer/error-app.ts → web/pages/_error/error-app.ts

@@ -1,6 +1,6 @@
 import { createSSRApp } from 'vue'
-import type { PageContext } from './types'
-import { setPageContext } from './usePageContext'
+import type { PageContext } from '../../renderer/types'
+import { setPageContext } from '../../renderer/usePageContext'
 import { createHead } from '@unhead/vue'
 import { ClientOnly } from '@schneefux/klicker/components'
 

web/renderer/+config.h.ts

@@ -0,0 +1,13 @@
+export default {
+  passToClient: [
+    'vueQueryState',
+    'piniaState',
+    'errorWhileRendering',
+    'envConfig',
+    'validated',
+    'statusCode',
+    'redirectTo',
+    'refs',
+    'localeMessages',
+  ],
+}

web/renderer/all.page.server.ts → web/renderer/+onBeforeRender.ts

@@ -1,29 +1,8 @@
-import { renderToString } from '@vue/server-renderer'
-import { dangerouslySkipEscape, escapeInject } from 'vike/server'
-import { createApp } from './app'
 import type { Config, PageContext } from './types'
-import type { PageContextBuiltInServer } from 'vike/types'
-import { dehydrate } from '@tanstack/vue-query'
-import { renderSSRHead } from '@unhead/ssr'
-import SuperJSON from 'superjson'
 import Sentry from '@sentry/vue'
 import { getTraduoraToken, TraduoraToken } from '@/locales'
 
 export { onBeforeRender }
-export { passToClient }
-export { render }
-
-const passToClient = [
-  'vueQueryState',
-  'piniaState',
-  'errorWhileRendering',
-  'envConfig',
-  'validated',
-  'statusCode',
-  'redirectTo',
-  'refs',
-  'localeMessages',
-]
 
 let cachedTraduoraToken: TraduoraToken | undefined = undefined
 async function onBeforeRender(pageContext: PageContext) {
@@ -73,44 +52,3 @@ async function onBeforeRender(pageContext: PageContext) {
     }
   }
 }
-
-async function render(pageContext: PageContextBuiltInServer & PageContext) {
-  const { app, head, pinia, router, queryClient } = createApp(pageContext)
-
-  let firstError: unknown = undefined
-  app.config.errorHandler = (err) => {
-    firstError = firstError ?? err
-    return false
-  }
-  router.push(pageContext.urlOriginal)
-  await router.isReady()
-
-  let string = await renderToString(app)
-  if (firstError) {
-    throw firstError
-  }
-
-  const payload = await renderSSRHead(head)
-  const vueQueryState = dehydrate(queryClient)
-  const piniaState = SuperJSON.stringify(pinia.state.value)
-
-  const documentHtml = escapeInject`<!DOCTYPE html>
-    <html${dangerouslySkipEscape(payload.htmlAttrs)}>
-      <head>
-        ${dangerouslySkipEscape(payload.headTags)}
-      </head>
-      <body${dangerouslySkipEscape(payload.bodyAttrs)}>
-        ${dangerouslySkipEscape(payload.bodyTagsOpen)}
-        <div id="app">${dangerouslySkipEscape(string)}</div>
-        ${dangerouslySkipEscape(payload.bodyTags)}
-      </body>
-    </html>`
-
-  return {
-    documentHtml,
-    pageContext: {
-      vueQueryState,
-      piniaState,
-    },
-  }
-}

web/renderer/all.page.client.ts → web/renderer/+onRenderClient.ts

@@ -11,9 +11,9 @@ import {
   RewriteFrames as RewriteFramesIntegration,
 } from '@sentry/integrations'
 
-export { render }
+export { onRenderClient }
 
-async function render(pageContext: PageContext) {
+async function onRenderClient(pageContext: PageContext) {
   const params = createApp(pageContext)
 
   Sentry.init({

web/renderer/+onRenderHtml.ts

@@ -0,0 +1,51 @@
+import { renderToString } from '@vue/server-renderer'
+import { dangerouslySkipEscape, escapeInject } from 'vike/server'
+import { createApp } from './app'
+import type { PageContext } from './types'
+import type { PageContextBuiltInServer } from 'vike/types'
+import { dehydrate } from '@tanstack/vue-query'
+import { renderSSRHead } from '@unhead/ssr'
+import SuperJSON from 'superjson'
+
+export { onRenderHtml }
+
+async function onRenderHtml(pageContext: PageContextBuiltInServer & PageContext) {
+  const { app, head, pinia, router, queryClient } = createApp(pageContext)
+
+  let firstError: unknown = undefined
+  app.config.errorHandler = (err) => {
+    firstError = firstError ?? err
+    return false
+  }
+  router.push(pageContext.urlOriginal)
+  await router.isReady()
+
+  let string = await renderToString(app)
+  if (firstError) {
+    throw firstError
+  }
+
+  const payload = await renderSSRHead(head)
+  const vueQueryState = dehydrate(queryClient)
+  const piniaState = SuperJSON.stringify(pinia.state.value)
+
+  const documentHtml = escapeInject`<!DOCTYPE html>
+    <html${dangerouslySkipEscape(payload.htmlAttrs)}>
+      <head>
+        ${dangerouslySkipEscape(payload.headTags)}
+      </head>
+      <body${dangerouslySkipEscape(payload.bodyAttrs)}>
+        ${dangerouslySkipEscape(payload.bodyTagsOpen)}
+        <div id="app">${dangerouslySkipEscape(string)}</div>
+        ${dangerouslySkipEscape(payload.bodyTags)}
+      </body>
+    </html>`
+
+  return {
+    documentHtml,
+    pageContext: {
+      vueQueryState,
+      piniaState,
+    },
+  }
+}