Add onAfterRenderClient

packages/vike-react/src/+config.ts

@@ -47,6 +47,9 @@ export default {
     stream: {
       env: { server: true }
     },
+    onAfterRenderClient: {
+      env: { client: true }
+    },
     VikeReactQueryWrapper: {
       env: { client: true, server: true }
     },

packages/vike-react/src/renderer/onRenderClient.tsx

@@ -34,6 +34,11 @@ const onRenderClient: OnRenderClientSync = (pageContext): ReturnType<OnRenderCli
 
     root.render(page)
   }
+  pageContext.page = page
+  pageContext.root = root
+  if (pageContext.config.onAfterRenderClient) {
+    pageContext.config.onAfterRenderClient(pageContext)
+  }
 }
 
 // https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically/260876#260876

packages/vike-react/src/types/Config.ts

@@ -1,4 +1,6 @@
 // https://vike.dev/meta#typescript
+import type { PageContextClient } from 'vike/types'
+
 declare global {
   // As a Vike user, use Vike.Config instead of VikePackages.ConfigVikeReact (see https://vike.dev/meta#typescript)
   namespace VikePackages {
@@ -38,6 +40,11 @@ declare global {
        *
        */
       stream?: boolean
+      /**
+       * If present, called after the page is rendered on the client. The `page` and `root`
+       * properties will be populated.
+       */
+      onAfterRenderClient?: (pageContext: PageContextClient) => void
 
       VikeReactQueryWrapper?: React.ReactNode
 

packages/vike-react/src/types/PageContext.ts

@@ -1,9 +1,15 @@
 // https://vike.dev/pageContext#typescript
+import type React from 'react'
+import type { JSX } from 'react'
+import type ReactDOM from 'react-dom/client'
+
 declare global {
   namespace Vike {
     interface PageContext {
       Page?: () => React.ReactNode
       userAgent?: string
+      page?: JSX.Element
+      root?: ReactDOM.Root
     }
   }
 }