qual: make config hook types more precise

examples/auth/package.json

@@ -16,7 +16,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.0.2",
-    "vike-react": "0.2.0-commit-af9b3c5",
+    "vike-react": "0.3.0",
     "vite": "^4.0.3",
     "vike": "0.4.142"
   },

examples/path-aliases-v1/renderer/onRenderHtml.tsx

@@ -5,10 +5,11 @@ import ReactDOMServer from 'react-dom/server'
 import React from 'react'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
 import { PageLayout } from './PageLayout'
-import type { PageContext } from '#root/types'
+import { ReactComponent } from '#root/types'
+import type { PageContextServer } from 'vike/types'
 
-function onRenderHtml(pageContext: PageContext) {
-  const { Page } = pageContext
+function onRenderHtml(pageContext: PageContextServer) {
+  const Page = pageContext.Page as ReactComponent
   const pageHtml = ReactDOMServer.renderToString(
     <PageLayout>
       <Page />

examples/react-full-v1/pages/hello/+onBeforeRender.ts

@@ -1,11 +1,13 @@
-export default onBeforeRender
+// https://vike.dev/onBeforeRender
 
-import type { PageContextBuiltInServer } from 'vike/types'
+import type { Config, PageContextServer } from 'vike/types'
 import { render } from 'vike/abort'
 
 import { names } from './names'
 
-async function onBeforeRender(pageContext: PageContextBuiltInServer) {
+const onBeforeRender: Config['onBeforeRender'] = async (
+  pageContext: PageContextServer
+): Promise<{ pageContext: Partial<Vike.PageContext> }> => {
   const { name } = pageContext.routeParams
   if (name !== 'anonymous' && !names.includes(name)) {
     throw render(404, `Unknown name: ${name}.`)
@@ -17,3 +19,4 @@ async function onBeforeRender(pageContext: PageContextBuiltInServer) {
     }
   }
 }
+export default onBeforeRender

examples/react-full-v1/pages/star-wars/@id/+onBeforeRender.tsx

@@ -1,14 +1,15 @@
 // https://vike.dev/onBeforeRender
-export default onBeforeRender
 
 import fetch from 'cross-fetch'
 import { filterMovieData } from '../filterMovieData'
-import type { PageContextBuiltInServer } from 'vike/types'
+import type { Config, PageContextServer } from 'vike/types'
 import type { MovieDetails } from '../types'
 import { render } from 'vike/abort'
 import React from 'react'
 
-async function onBeforeRender(pageContext: PageContextBuiltInServer) {
+const onBeforeRender: Config['onBeforeRender'] = async (
+  pageContext: PageContextServer
+): Promise<{ pageContext: Partial<Vike.PageContext> }> => {
   const dataUrl = `https://star-wars.brillout.com/api/films/${pageContext.routeParams.id}.json`
   let movie: MovieDetails
   try {
@@ -44,3 +45,4 @@ async function onBeforeRender(pageContext: PageContextBuiltInServer) {
     }
   }
 }
+export default onBeforeRender

examples/react-full-v1/pages/star-wars/index/+onBeforeRender.ts

@@ -1,9 +1,11 @@
 // https://vike.dev/onBeforeRender
-export default onBeforeRender
 
+import type { Config, PageContextServer } from 'vike/types'
 import { filterMoviesData, getStarWarsMovies, getTitle } from './getStarWarsMovies'
 
-async function onBeforeRender() {
+const onBeforeRender: Config['onBeforeRender'] = async (
+  pageContext: PageContextServer
+): Promise<{ pageContext: Partial<Vike.PageContext> }> => {
   await sleep(700) // Simulate slow network
   const movies = await getStarWarsMovies()
   return {
@@ -18,6 +20,7 @@ async function onBeforeRender() {
     }
   }
 }
+export default onBeforeRender
 
 function sleep(milliseconds: number): Promise<void> {
   return new Promise((r) => setTimeout(r, milliseconds))

examples/react-full-v1/renderer/+onRenderHtml.tsx

@@ -1,14 +1,14 @@
 // https://vike.dev/onRenderHtml
-export default onRenderHtml
-
 import { renderToStream } from 'react-streaming/server'
 import React from 'react'
 import { escapeInject } from 'vike/server'
 import { PageShell } from './PageShell'
 import { getPageTitle } from './getPageTitle'
-import type { PageContextServer } from 'vike/types'
+import type { Config, DocumentHtml, PageContextServer } from 'vike/types'
 
-async function onRenderHtml(pageContext: PageContextServer) {
+const onRenderHtml: Config['onRenderHtml'] = async (
+  pageContext: PageContextServer
+): Promise<{ documentHtml: DocumentHtml; pageContext: Partial<Vike.PageContext> | Function }> => {
   const { Page, pageProps } = pageContext
 
   const stream = await renderToStream(
@@ -34,10 +34,13 @@ async function onRenderHtml(pageContext: PageContextServer) {
   return {
     documentHtml,
     // See https://vike.dev/stream#initial-data-after-stream-end
+    // temp(aurelien): interesting that this can be an async function. Can this be the case in
+    // onBeforeRender() as well? Or is this specific to onRenderHtml()?
     pageContext: async () => {
       return {
         someAsyncProps: 42
       }
     }
   }
 }
+export default onRenderHtml

vike/shared/page-configs/Config.ts

@@ -6,8 +6,10 @@ export type { HookName }
 
 import type { PrefetchStaticAssets } from '../../client/client-routing-runtime/prefetch/getPrefetchSettings.js'
 import type { ConfigDefinition } from '../../node/plugin/plugins/importUserCode/v1-design/getVikeConfig/configDefinitionsBuiltIn.js'
+import type { DocumentHtml } from '../../node/runtime/html/renderHtml.js'
 import type { ConfigVikeUserProvided } from '../ConfigVike.js'
 import type { Vike, VikePackages } from '../VikeNamespace.js'
+import type { PageContext, PageContextClient, PageContextServer } from '../types.js'
 
 type HookName =
   | 'onHydrationEnd'
@@ -39,6 +41,8 @@ type Config = ConfigBuiltIn &
     | VikePackages.ConfigVikeSvelte
   )
 
+type OptionalPromise<T> = T | Promise<T>
+
 // TODO: write docs of links below
 
 /** Page configuration.
@@ -78,7 +82,12 @@ type ConfigBuiltIn = {
    *
    *  https://vike.dev/onBeforeRender
    */
-  onBeforeRender?: Function | ImportString | null
+  onBeforeRender?:
+    | ((pageContext: PageContextServer) => OptionalPromise<{ pageContext: Partial<Vike.PageContext> }>)
+    | ((pageContext: PageContextClient) => OptionalPromise<{ pageContext: Partial<Vike.PageContext> }>)
+    | ((pageContext: PageContext) => OptionalPromise<{ pageContext: Partial<Vike.PageContext> }>)
+    | ImportString
+    | null
 
   /** Determines what pageContext properties are sent to the client-side.
    *
@@ -95,7 +104,13 @@ type ConfigBuiltIn = {
    *
    * https://vike.dev/onRenderHtml
    */
-  onRenderHtml?: Function | ImportString
+  onRenderHtml?:
+    | ((
+        pageContext: PageContextServer
+      ) => OptionalPromise<
+        DocumentHtml | { documentHtml: DocumentHtml; pageContext?: Partial<Vike.PageContext> | Function }
+      >)
+    | ImportString
 
   /** Enable async Route Functions.
    *

vike/types/index.ts

@@ -21,6 +21,7 @@ export type {
 export type { ConfigEntries } from '../shared/getPageFiles/getExports.js'
 
 export type { InjectFilterEntry } from '../node/runtime/html/injectAssets/getHtmlTags.js'
+export type { DocumentHtml } from '../node/runtime/html/renderHtml.js'
 
 // TODO/v1-release: remove
 import type { ConfigEnv } from '../shared/page-configs/PageConfig.js'