feat: getPageContextClient() (#2191)

docs/headingsDetached.ts

@@ -576,6 +576,10 @@ function api(): HeadingDetachedDefinition[] {
       title: '`getPageContext()`',
       url: '/getPageContext'
     },
+    {
+      title: '`getPageContextClient()`',
+      url: '/getPageContextClient'
+    },
     {
       title: 'HTTP Headers',
       url: '/headers'

docs/pages/getPageContextClient/+Page.mdx

@@ -0,0 +1,31 @@
+import { Link } from '@brillout/docpress'
+
+Environment: client.
+
+Get <Link href="/pageContext">`pageContext`</Link> of the currently rendered page on the client-side.
+
+It's usually used for getting the `pageContext` of a newly navigated page:
+
+```jsx
+import { getPageContextClient, navigate } from 'vike/client/router'
+
+function SignupForm() {
+   return (
+     <form onSubmit={onSubmit}>
+       {/* ... */}
+     </form>
+   )
+}
+
+async function onSubmit() {
+  await navigate('/welcome')
+  // Get the `pageContext` object of the newly navigated /welcome page
+  const pageContext = getPageContextClient()
+  // ...
+}
+```
+
+## See also
+
+- <Link href="/pageContext" />
+- <Link href="/navigate" />

vike/client/client-routing-runtime/index.ts

@@ -6,6 +6,7 @@
 
 export { navigate, reload } from './navigate.js'
 export { prefetch } from './prefetch.js'
+export { getPageContextClient } from './renderPageClientSide.js'
 export { PROJECT_VERSION as version } from './utils.js'
 
 // TODO/v1-release: remove this

vike/client/client-routing-runtime/renderPageClientSide.ts

@@ -2,6 +2,7 @@ export { renderPageClientSide }
 export { getRenderCount }
 export { disableClientRouting }
 export { firstRenderStartPromise }
+export { getPageContextClient }
 
 import {
   assert,
@@ -54,22 +55,23 @@ import type { PageConfigUserFriendlyOld } from '../../shared/getPageFiles.js'
 import { setPageContextCurrent } from './getPageContextCurrent.js'
 import { getRouteStringParameterList } from '../../shared/route/resolveRouteString.js'
 import { getCurrentUrl } from '../shared/getCurrentUrl.js'
+import type { PageContextClient } from '../../shared/types.js'
 
 const globalObject = getGlobalObject<{
   clientRoutingIsDisabled?: true
   renderCounter: number
   onRenderClientPreviousPromise?: Promise<unknown>
   isFirstRenderDone?: true
   isTransitioning?: true
-  previousPageContext: PreviousPageContext | null
+  previousPageContext?: PreviousPageContext
+  renderedPageContext?: PageContextClient
   firstRenderStartPromise: Promise<void>
   firstRenderStartPromiseResolve: () => void
 }>(
   'client-routing-runtime/renderPageClientSide.ts',
   (() => {
     const { promise: firstRenderStartPromise, resolve: firstRenderStartPromiseResolve } = genPromise()
     return {
-      previousPageContext: null,
       renderCounter: 0,
       firstRenderStartPromise,
       firstRenderStartPromiseResolve
@@ -581,6 +583,8 @@ async function renderPageClientSide(renderArgs: RenderArgs): Promise<void> {
     addLinkPrefetchHandlers_watch()
     addLinkPrefetchHandlers()
 
+    globalObject.renderedPageContext = pageContext as any as PageContextClient
+
     stampFinished(urlOriginal)
   }
 }
@@ -716,3 +720,12 @@ function areKeysEqual(key1: string | string[], key2: string | string[]): boolean
   if (!Array.isArray(key1) || !Array.isArray(key2)) return false
   return key1.length === key2.length && key1.every((_, i) => key1[i] === key2[i])
 }
+
+/**
+ * Get the `pageContext` object on the client-side.
+ *
+ * https://vike.dev/getPageContextClient
+ */
+function getPageContextClient(): PageContextClient | null {
+  return globalObject.renderedPageContext ?? null
+}