Skip to content

Commit

Permalink
feat: pageContext.pageId (closes #553) (#1894)
Browse files Browse the repository at this point in the history
  • Loading branch information
@brillout
brillout authored Sep 23, 2024
1 parent df033dd commit 44d14c9
Show file tree
Hide file tree
Showing 33 changed files with 140 additions and 104 deletions.
2 changes: 1 addition & 1 deletion docs/pages/injectAssets/+Page.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Several assets need to be injected to the HTML, such as:
<li><code>{'<link rel="stylesheet" type="text/css" href="/assets/some-css.d65b3120.css">'}</code></li>
<li><code>{'<link rel="preload" as="font" crossorigin type="font/ttf" href="/assets/some-font.2bc54814.ttf">'}</code></li>
<li><code>{'<link rel="modulepreload" as="script" type="text/javascript" href="/assets/some-script.e046d7f2.js">'}</code></li>
<li><code>{'<script id="vike_pageContext" type="application/json">{"_pageId":"/pages/some-page"}</script>'}</code> (serialized initial <code>pageContext</code> value)</li>
<li><code>{'<script id="vike_pageContext" type="application/json">{"pageId":"/pages/some-page"}</script>'}</code> (serialized initial <code>pageContext</code> value)</li>
</ul>

Vike automatically inserts these assets to the HTML returned in the `onRenderHtml()` hook.
Expand Down
8 changes: 4 additions & 4 deletions test/preload/__snapshots__/dev.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ exports[`preload tags > Preload Default 2`] = `
</head>
<body>
<div id="page-view"><div style="display:flex;max-width:900px;margin:auto"><div style="padding:20px;padding-top:20px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;line-height:1.8em"><div style="margin-top:20px;margin-bottom:10px"><a href="/"><img src="/renderer/logo.svg" height="64" width="64"/></a></div><a class="navitem" href="/">Preload Default</a><a class="navitem" href="/preload-disabled">Preload Disabled</a><a class="navitem" href="/preload-images">Preload Images</a></div><div style="padding:20px;padding-bottom:50px;border-left:2px solid #eee;min-height:100vh"><h1>Default</h1><p>This page showcases the default preloading strategy: in production, both the image and the font are preloaded.</p></div></div></div>
<script id="vike_pageContext" type="application/json">{"pageProps":"!undefined","abortReason":"!undefined","_urlRewrite":null,"_urlRedirect":"!undefined","abortStatusCode":"!undefined","_abortCall":"!undefined","_pageContextInitIsPassedToClient":"!undefined","_pageId":"/pages/index","routeParams":{},"data":"!undefined"}</script>
<script id="vike_pageContext" type="application/json">{"pageProps":"!undefined","abortReason":"!undefined","_urlRewrite":null,"_urlRedirect":"!undefined","abortStatusCode":"!undefined","_abortCall":"!undefined","_pageContextInitIsPassedToClient":"!undefined","pageId":"/pages/index","routeParams":{},"data":"!undefined"}</script>
<script type="module" async>
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
Expand Down Expand Up @@ -68,7 +68,7 @@ exports[`preload tags > Preload Disabled 2`] = `
</head>
<body>
<div id="page-view"><div style="display:flex;max-width:900px;margin:auto"><div style="padding:20px;padding-top:20px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;line-height:1.8em"><div style="margin-top:20px;margin-bottom:10px"><a href="/"><img src="/renderer/logo.svg" height="64" width="64"/></a></div><a class="navitem" href="/">Preload Default</a><a class="navitem" href="/preload-disabled">Preload Disabled</a><a class="navitem" href="/preload-images">Preload Images</a></div><div style="padding:20px;padding-bottom:50px;border-left:2px solid #eee;min-height:100vh"><h1>Preload Disabled</h1><p>This page showcases completely disabled preloading: the image nor the font are preloaded.</p></div></div></div>
<script id="vike_pageContext" type="application/json">{"pageProps":"!undefined","abortReason":"!undefined","_urlRewrite":null,"_urlRedirect":"!undefined","abortStatusCode":"!undefined","_abortCall":"!undefined","_pageContextInitIsPassedToClient":"!undefined","_pageId":"/pages/preload-disabled","routeParams":{},"data":"!undefined"}</script>
<script id="vike_pageContext" type="application/json">{"pageProps":"!undefined","abortReason":"!undefined","_urlRewrite":null,"_urlRedirect":"!undefined","abortStatusCode":"!undefined","_abortCall":"!undefined","_pageContextInitIsPassedToClient":"!undefined","pageId":"/pages/preload-disabled","routeParams":{},"data":"!undefined"}</script>
<script type="module" async>
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
Expand Down Expand Up @@ -109,7 +109,7 @@ exports[`preload tags > Preload Eager 2`] = `
</head>
<body>
<div id="page-view"><div style="display:flex;max-width:900px;margin:auto"><div style="padding:20px;padding-top:20px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;line-height:1.8em"><div style="margin-top:20px;margin-bottom:10px"><a href="/"><img src="/renderer/logo.svg" height="64" width="64"/></a></div><a class="navitem" href="/">Preload Default</a><a class="navitem" href="/preload-disabled">Preload Disabled</a><a class="navitem" href="/preload-images">Preload Images</a></div><div style="padding:20px;padding-bottom:50px;border-left:2px solid #eee;min-height:100vh"><h1>Eager</h1><p>This page showcases eager preloading (non-JavaScript assets are preloaded ASAP).</p></div></div></div>
<script id="vike_pageContext" type="application/json">{"pageProps":"!undefined","abortReason":"!undefined","_urlRewrite":null,"_urlRedirect":"!undefined","abortStatusCode":"!undefined","_abortCall":"!undefined","_pageContextInitIsPassedToClient":"!undefined","_pageId":"/pages/preload-eager","routeParams":{},"data":"!undefined"}</script>
<script id="vike_pageContext" type="application/json">{"pageProps":"!undefined","abortReason":"!undefined","_urlRewrite":null,"_urlRedirect":"!undefined","abortStatusCode":"!undefined","_abortCall":"!undefined","_pageContextInitIsPassedToClient":"!undefined","pageId":"/pages/preload-eager","routeParams":{},"data":"!undefined"}</script>
<script type="module" async>
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
Expand Down Expand Up @@ -150,7 +150,7 @@ exports[`preload tags > Preload Images 2`] = `
</head>
<body>
<div id="page-view"><div style="display:flex;max-width:900px;margin:auto"><div style="padding:20px;padding-top:20px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;line-height:1.8em"><div style="margin-top:20px;margin-bottom:10px"><a href="/"><img src="/renderer/logo.svg" height="64" width="64"/></a></div><a class="navitem" href="/">Preload Default</a><a class="navitem" href="/preload-disabled">Preload Disabled</a><a class="navitem" href="/preload-images">Preload Images</a></div><div style="padding:20px;padding-bottom:50px;border-left:2px solid #eee;min-height:100vh"><h1>Preload Images</h1><p>This page showcases a custom strategy of preloading images.</p></div></div></div>
<script id="vike_pageContext" type="application/json">{"pageProps":"!undefined","abortReason":"!undefined","_urlRewrite":null,"_urlRedirect":"!undefined","abortStatusCode":"!undefined","_abortCall":"!undefined","_pageContextInitIsPassedToClient":"!undefined","_pageId":"/pages/preload-images","routeParams":{},"data":"!undefined"}</script>
<script id="vike_pageContext" type="application/json">{"pageProps":"!undefined","abortReason":"!undefined","_urlRewrite":null,"_urlRedirect":"!undefined","abortStatusCode":"!undefined","_abortCall":"!undefined","_pageContextInitIsPassedToClient":"!undefined","pageId":"/pages/preload-images","routeParams":{},"data":"!undefined"}</script>
<script type="module" async>
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
Expand Down
8 changes: 4 additions & 4 deletions test/preload/__snapshots__/prod.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ exports[`preload tags > Preload Default 2`] = `
</head>
<body>
<div id="page-view"><div style="display:flex;max-width:900px;margin:auto"><div style="padding:20px;padding-top:20px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;line-height:1.8em"><div style="margin-top:20px;margin-bottom:10px"><a href="/"><img src="/assets/static/logo.$HASH.svg" height="64" width="64"/></a></div><a class="navitem" href="/">Preload Default</a><a class="navitem" href="/preload-disabled">Preload Disabled</a><a class="navitem" href="/preload-images">Preload Images</a></div><div style="padding:20px;padding-bottom:50px;border-left:2px solid #eee;min-height:100vh"><h1>Default</h1><p>This page showcases the default preloading strategy: in production, both the image and the font are preloaded.</p></div></div></div>
<script id="vike_pageContext" type="application/json">{"pageProps":"!undefined","abortReason":"!undefined","_urlRewrite":null,"_urlRedirect":"!undefined","abortStatusCode":"!undefined","_abortCall":"!undefined","_pageContextInitIsPassedToClient":"!undefined","_pageId":"/pages/index","routeParams":{},"data":"!undefined"}</script>
<script id="vike_pageContext" type="application/json">{"pageProps":"!undefined","abortReason":"!undefined","_urlRewrite":null,"_urlRedirect":"!undefined","abortStatusCode":"!undefined","_abortCall":"!undefined","_pageContextInitIsPassedToClient":"!undefined","pageId":"/pages/index","routeParams":{},"data":"!undefined"}</script>
<script src="/assets/entries/entry-server-routing.$HASH.js" type="module" async></script>
<link rel="modulepreload" href="/assets/entries/pages_index.$HASH.js" as="script" type="text/javascript">
<link rel="modulepreload" href="/assets/chunks/chunk-$HASH.js" as="script" type="text/javascript">
Expand Down Expand Up @@ -119,7 +119,7 @@ exports[`preload tags > Preload Disabled 2`] = `
</head>
<body>
<div id="page-view"><div style="display:flex;max-width:900px;margin:auto"><div style="padding:20px;padding-top:20px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;line-height:1.8em"><div style="margin-top:20px;margin-bottom:10px"><a href="/"><img src="/assets/static/logo.$HASH.svg" height="64" width="64"/></a></div><a class="navitem" href="/">Preload Default</a><a class="navitem" href="/preload-disabled">Preload Disabled</a><a class="navitem" href="/preload-images">Preload Images</a></div><div style="padding:20px;padding-bottom:50px;border-left:2px solid #eee;min-height:100vh"><h1>Preload Disabled</h1><p>This page showcases completely disabled preloading: the image nor the font are preloaded.</p></div></div></div>
<script id="vike_pageContext" type="application/json">{"pageProps":"!undefined","abortReason":"!undefined","_urlRewrite":null,"_urlRedirect":"!undefined","abortStatusCode":"!undefined","_abortCall":"!undefined","_pageContextInitIsPassedToClient":"!undefined","_pageId":"/pages/preload-disabled","routeParams":{},"data":"!undefined"}</script>
<script id="vike_pageContext" type="application/json">{"pageProps":"!undefined","abortReason":"!undefined","_urlRewrite":null,"_urlRedirect":"!undefined","abortStatusCode":"!undefined","_abortCall":"!undefined","_pageContextInitIsPassedToClient":"!undefined","pageId":"/pages/preload-disabled","routeParams":{},"data":"!undefined"}</script>
<script src="/assets/entries/entry-server-routing.$HASH.js" type="module" async></script>
</body>
</html>"
Expand Down Expand Up @@ -184,7 +184,7 @@ exports[`preload tags > Preload Eager 2`] = `
</head>
<body>
<div id="page-view"><div style="display:flex;max-width:900px;margin:auto"><div style="padding:20px;padding-top:20px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;line-height:1.8em"><div style="margin-top:20px;margin-bottom:10px"><a href="/"><img src="/assets/static/logo.$HASH.svg" height="64" width="64"/></a></div><a class="navitem" href="/">Preload Default</a><a class="navitem" href="/preload-disabled">Preload Disabled</a><a class="navitem" href="/preload-images">Preload Images</a></div><div style="padding:20px;padding-bottom:50px;border-left:2px solid #eee;min-height:100vh"><h1>Eager</h1><p>This page showcases eager preloading (non-JavaScript assets are preloaded ASAP).</p></div></div></div>
<script id="vike_pageContext" type="application/json">{"pageProps":"!undefined","abortReason":"!undefined","_urlRewrite":null,"_urlRedirect":"!undefined","abortStatusCode":"!undefined","_abortCall":"!undefined","_pageContextInitIsPassedToClient":"!undefined","_pageId":"/pages/preload-eager","routeParams":{},"data":"!undefined"}</script>
<script id="vike_pageContext" type="application/json">{"pageProps":"!undefined","abortReason":"!undefined","_urlRewrite":null,"_urlRedirect":"!undefined","abortStatusCode":"!undefined","_abortCall":"!undefined","_pageContextInitIsPassedToClient":"!undefined","pageId":"/pages/preload-eager","routeParams":{},"data":"!undefined"}</script>
<script src="/assets/entries/entry-server-routing.$HASH.js" type="module" async></script>
</body>
</html>"
Expand Down Expand Up @@ -247,7 +247,7 @@ exports[`preload tags > Preload Images 2`] = `
</head>
<body>
<div id="page-view"><div style="display:flex;max-width:900px;margin:auto"><div style="padding:20px;padding-top:20px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;line-height:1.8em"><div style="margin-top:20px;margin-bottom:10px"><a href="/"><img src="/assets/static/logo.$HASH.svg" height="64" width="64"/></a></div><a class="navitem" href="/">Preload Default</a><a class="navitem" href="/preload-disabled">Preload Disabled</a><a class="navitem" href="/preload-images">Preload Images</a></div><div style="padding:20px;padding-bottom:50px;border-left:2px solid #eee;min-height:100vh"><h1>Preload Images</h1><p>This page showcases a custom strategy of preloading images.</p></div></div></div>
<script id="vike_pageContext" type="application/json">{"pageProps":"!undefined","abortReason":"!undefined","_urlRewrite":null,"_urlRedirect":"!undefined","abortStatusCode":"!undefined","_abortCall":"!undefined","_pageContextInitIsPassedToClient":"!undefined","_pageId":"/pages/preload-images","routeParams":{},"data":"!undefined"}</script>
<script id="vike_pageContext" type="application/json">{"pageProps":"!undefined","abortReason":"!undefined","_urlRewrite":null,"_urlRedirect":"!undefined","abortStatusCode":"!undefined","_abortCall":"!undefined","_pageContextInitIsPassedToClient":"!undefined","pageId":"/pages/preload-images","routeParams":{},"data":"!undefined"}</script>
<script src="/assets/entries/entry-server-routing.$HASH.js" type="module" async></script>
<link rel="modulepreload" href="/assets/entries/pages_preload-images.$HASH.js" as="script" type="text/javascript">
<link rel="modulepreload" href="/assets/chunks/chunk-$HASH.js" as="script" type="text/javascript">
Expand Down
6 changes: 3 additions & 3 deletions test/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@ async function ensureWasClientSideRouted(pageIdFirst: `/pages/${string}`) {
}
function findFirstPageId(html: string) {
expect(html).toContain('<script id="vike_pageContext" type="application/json">')
expect(html).toContain('_pageId')
expect(html.split('_pageId').length).toBe(2)
const match = partRegex`"_pageId":"${/([^"]+)/}"`.exec(html)
expect(html).toContain('pageId')
expect(html.split('pageId').length).toBe(2)
const match = partRegex`"pageId":"${/([^"]+)/}"`.exec(html)
expect(match).toBeTruthy()
const pageId = match![1]
expect(pageId).toBeTruthy()
Expand Down
18 changes: 9 additions & 9 deletions vike/client/client-routing-runtime/getPageContextFromHooks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ type PageContext = {
}

type PageContextSerialized = {
_pageId: string
pageId: string
_hasPageContextFromServer: true
}
function getPageContextFromHooks_serialized(): PageContextSerialized & { routeParams: Record<string, string> } {
Expand Down Expand Up @@ -70,7 +70,7 @@ async function getPageContextFromHooks_isHydration(
}

async function getPageContextFromHooks_isNotHydration(
pageContext: { _pageId: string } & PageContext & PageContextExports,
pageContext: { pageId: string } & PageContext & PageContextExports,
isErrorPage: boolean
) {
objectAssign(pageContext, {
Expand Down Expand Up @@ -142,7 +142,7 @@ async function getPageContextFromHooks_isNotHydration(
async function executeHookClientSide(
hookName: 'data' | 'onBeforeRender',
pageContext: {
_pageId: string
pageId: string
_hasPageContextFromServer: boolean
_hasPageContextFromClient: boolean
} & PageContextExports &
Expand Down Expand Up @@ -215,14 +215,14 @@ async function hasPageContextServer(pageContext: Parameters<typeof hookServerOnl
async function hookServerOnlyExists(
hookName: 'data' | 'onBeforeRender',
pageContext: {
_pageId: string
pageId: string
_pageFilesAll: PageFile[]
_pageConfigs: PageConfigRuntime[]
}
): Promise<boolean> {
if (pageContext._pageConfigs.length > 0) {
// V1
const pageConfig = getPageConfig(pageContext._pageId, pageContext._pageConfigs)
const pageConfig = getPageConfig(pageContext.pageId, pageContext._pageConfigs)
const hookEnv = getConfigValueRuntime(pageConfig, `${hookName}Env`)?.value ?? {}
assert(isObject(hookEnv))
return !!hookEnv.server && !hookEnv.client
Expand All @@ -236,7 +236,7 @@ async function hookServerOnlyExists(
assert(hookName === 'onBeforeRender')
const { hasOnBeforeRenderServerSideOnlyHook } = await analyzePageServerSide(
pageContext._pageFilesAll,
pageContext._pageId
pageContext.pageId
)
return hasOnBeforeRenderServerSideOnlyHook
}
Expand All @@ -250,13 +250,13 @@ async function hookServerOnlyExists(
function hookClientOnlyExists(
hookName: 'data' | 'onBeforeRender',
pageContext: {
_pageId: string
pageId: string
_pageConfigs: PageConfigRuntime[]
}
): boolean {
if (pageContext._pageConfigs.length > 0) {
// V1
const pageConfig = getPageConfig(pageContext._pageId, pageContext._pageConfigs)
const pageConfig = getPageConfig(pageContext.pageId, pageContext._pageConfigs)
const hookEnv = getConfigValueRuntime(pageConfig, `${hookName}Env`)?.value ?? {}
assert(isObject(hookEnv))
return !!hookEnv.client && !hookEnv.server
Expand Down Expand Up @@ -301,7 +301,7 @@ async function fetchPageContextFromServer(pageContext: { urlOriginal: string; _u
throw getProjectError(`pageContext couldn't be fetched because an error occurred on the server-side`)
}

assert(hasProp(pageContextFromServer, '_pageId', 'string'))
assert(hasProp(pageContextFromServer, 'pageId', 'string'))
processPageContextFromServer(pageContextFromServer)

return { pageContextFromServer }
Expand Down
8 changes: 4 additions & 4 deletions vike/client/client-routing-runtime/prefetch.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ async function prefetch(url: string): Promise<void> {
// If a route() hook has a bug or `throw render()` / `throw redirect()`
return
}
const pageId = pageContextFromRoute._pageId
const pageId = pageContextFromRoute.pageId

if (!pageId) {
assertWarning(false, `${errPrefix} ${pc.string(url)} ${noRouteMatch}`, {
Expand Down Expand Up @@ -135,7 +135,7 @@ async function prefetchIfPossible(url: string): Promise<void> {
// If a route() hook has a bug or `throw render()` / `throw redirect()`
return
}
if (!pageContextFromRoute?._pageId) return
if (!(await isClientSideRoutable(pageContextFromRoute._pageId, pageContext))) return
await prefetchAssets(pageContextFromRoute._pageId, pageContext)
if (!pageContextFromRoute?.pageId) return
if (!(await isClientSideRoutable(pageContextFromRoute.pageId, pageContext))) return
await prefetchAssets(pageContextFromRoute.pageId, pageContext)
}
Loading

0 comments on commit 44d14c9

Please sign in to comment.