Merge branch 'aurelien/docs/v1'

boilerplates/.testRun.ts

@@ -61,13 +61,13 @@ function testRun(
     test('HMR', async () => {
       const file = (() => {
         if (uiFramewok === 'vue') {
-          return './pages/index/index.page.vue'
+          return './pages/index/+Page.vue'
         }
         if (uiFramewok === 'react') {
           if (lang === 'ts') {
-            return './pages/index/index.page.tsx'
+            return './pages/index/+Page.tsx'
           } else {
-            return './pages/index/index.page.jsx'
+            return './pages/index/+Page.jsx'
           }
         }
         assert(false)

boilerplates/boilerplate-react-ts/renderer/+config.h.ts

@@ -0,0 +1,11 @@
+import type { Config } from 'vike/types'
+
+// https://vike.dev/config
+export default {
+  /* To enable Client-side Routing:
+  clientRouting: true,
+  // !! WARNING !! Before doing so, read https://vike.dev/clientRouting */
+
+  // See https://vike.dev/data-fetching
+  passToClient: ['pageProps', 'urlPathname']
+} satisfies Config

boilerplates/boilerplate-react/renderer/_default.page.client.jsx → boilerplates/boilerplate-react-ts/renderer/+onRenderClient.tsx

@@ -1,10 +1,13 @@
-export { render }
+// https://vike.dev/onRenderClient
+export { onRenderClient }
 
 import { hydrateRoot } from 'react-dom/client'
 import { PageShell } from './PageShell'
+import type { OnRenderClientAsync } from 'vike/types'
 
-// This render() hook only supports SSR, see https://vike.dev/render-modes for how to modify render() to support SPA
-async function render(pageContext) {
+// This onRenderClient() hook only supports SSR, see https://vike.dev/render-modes for how to modify onRenderClient()
+// to support SPA
+const onRenderClient: OnRenderClientAsync = async (pageContext): ReturnType<OnRenderClientAsync> => {
   const { Page, pageProps } = pageContext
   if (!Page) throw new Error('Client-side render() hook expects pageContext.Page to be defined')
   const root = document.getElementById('react-root')
@@ -16,7 +19,3 @@ async function render(pageContext) {
     </PageShell>
   )
 }
-
-/* To enable Client-side Routing:
-export const clientRouting = true
-// !! WARNING !! Before doing so, read https://vike.dev/clientRouting */

boilerplates/boilerplate-react-ts/renderer/_default.page.server.tsx → boilerplates/boilerplate-react-ts/renderer/+onRenderHtml.tsx

@@ -1,16 +1,16 @@
-export { render }
-// See https://vike.dev/data-fetching
-export const passToClient = ['pageProps', 'urlPathname']
+// https://vike.dev/onRenderHtml
+export { onRenderHtml }
 
 import ReactDOMServer from 'react-dom/server'
 import { PageShell } from './PageShell'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
 import logoUrl from './logo.svg'
-import type { PageContextServer } from './types'
+import type { OnRenderHtmlAsync } from 'vike/types'
 
-async function render(pageContext: PageContextServer) {
+const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRenderHtmlAsync> => {
   const { Page, pageProps } = pageContext
-  // This render() hook only supports SSR, see https://vike.dev/render-modes for how to modify render() to support SPA
+  // This onRenderHtml() hook only supports SSR, see https://vike.dev/render-modes for how to modify
+  // onRenderHtml() to support SPA
   if (!Page) throw new Error('My render() hook expects pageContext.Page to be defined')
   const pageHtml = ReactDOMServer.renderToString(
     <PageShell pageContext={pageContext}>

boilerplates/boilerplate-react-ts/renderer/PageShell.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import logo from './logo.svg'
 import { PageContextProvider } from './usePageContext'
-import type { PageContext } from './types'
+import type { PageContext } from 'vike/types'
 import './PageShell.css'
 import { Link } from './Link'
 

boilerplates/boilerplate-react-ts/renderer/types.ts

@@ -1,15 +1,3 @@
-export type {
-  PageContextServer,
-  /*
-  // When using Client Routing https://vike.dev/clientRouting
-  PageContextClient,
-  PageContext,
-  /*/
-  // When using Server Routing
-  PageContextClientWithServerRouting as PageContextClient,
-  PageContextWithServerRouting as PageContext
-  //*/
-} from 'vike/types'
 export type { PageProps }
 
 // https://vike.dev/pageContext#typescript

boilerplates/boilerplate-react-ts/renderer/usePageContext.tsx

@@ -2,7 +2,7 @@
 // See https://vike.dev/pageContext-anywhere
 
 import React, { useContext } from 'react'
-import type { PageContext } from './types'
+import type { PageContext } from 'vike/types'
 
 export { PageContextProvider }
 // eslint-disable-next-line react-refresh/only-export-components

boilerplates/boilerplate-react/renderer/+config.h.js

@@ -0,0 +1,9 @@
+// https://vike.dev/config
+export default {
+  /* To enable Client-side Routing:
+  clientRouting: true,
+  // !! WARNING !! Before doing so, read https://vike.dev/clientRouting */
+
+  // See https://vike.dev/data-fetching
+  passToClient: ['pageProps', 'urlPathname']
+}

boilerplates/boilerplate-react/renderer/+onRenderClient.jsx

@@ -0,0 +1,20 @@
+// https://vike.dev/onRenderClient
+export { onRenderClient }
+
+import { hydrateRoot } from 'react-dom/client'
+import { PageShell } from './PageShell'
+
+// This onRenderClient() hook only supports SSR, see https://vike.dev/render-modes for how to modify onRenderClient()
+// to support SPA
+async function onRenderClient(pageContext) {
+  const { Page, pageProps } = pageContext
+  if (!Page) throw new Error('Client-side onRenderClient() hook expects pageContext.Page to be defined')
+  const root = document.getElementById('react-root')
+  if (!root) throw new Error('DOM element #react-root not found')
+  hydrateRoot(
+    root,
+    <PageShell pageContext={pageContext}>
+      <Page {...pageProps} />
+    </PageShell>
+  )
+}

boilerplates/boilerplate-react/renderer/_default.page.server.jsx → boilerplates/boilerplate-react/renderer/+onRenderHtml.jsx

@@ -1,15 +1,15 @@
-export { render }
-// See https://vike.dev/data-fetching
-export const passToClient = ['pageProps', 'urlPathname']
+// https://vike.dev/onRenderHtml
+export { onRenderHtml }
 
 import ReactDOMServer from 'react-dom/server'
 import { PageShell } from './PageShell'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
 import logoUrl from './logo.svg'
 
-async function render(pageContext) {
+async function onRenderHtml(pageContext) {
   const { Page, pageProps } = pageContext
-  // This render() hook only supports SSR, see https://vike.dev/render-modes for how to modify render() to support SPA
+  // This onRenderHtml() hook only supports SSR, see https://vike.dev/render-modes for how to modify
+  // onRenderHtml() to support SPA
   if (!Page) throw new Error('My render() hook expects pageContext.Page to be defined')
   const pageHtml = ReactDOMServer.renderToString(
     <PageShell pageContext={pageContext}>

boilerplates/boilerplate-vue-ts/renderer/+config.h.ts

@@ -0,0 +1,11 @@
+import type { Config } from 'vike/types'
+
+// https://vike.dev/config
+export default {
+  /* To enable Client-side Routing:
+  clientRouting: true,
+  // !! WARNING !! Before doing so, read https://vike.dev/clientRouting */
+
+  // See https://vike.dev/data-fetching
+  passToClient: ['pageProps', 'urlPathname']
+} satisfies Config

boilerplates/boilerplate-vue-ts/renderer/+onRenderClient.ts

@@ -0,0 +1,14 @@
+// https://vike.dev/onRenderClient
+export { onRenderClient }
+
+import { createApp } from './app'
+import type { OnRenderClientAsync } from 'vike/types'
+
+// This onRenderClient() hook only supports SSR, see https://vike.dev/render-modes for how to modify onRenderClient()
+// to support SPA
+const onRenderClient: OnRenderClientAsync = async (pageContext): ReturnType<OnRenderClientAsync> => {
+  const { Page, pageProps } = pageContext
+  if (!Page) throw new Error('Client-side render() hook expects pageContext.Page to be defined')
+  const app = createApp(Page, pageProps, pageContext)
+  app.mount('#app')
+}

boilerplates/boilerplate-vue-ts/renderer/_default.page.server.ts → boilerplates/boilerplate-vue-ts/renderer/+onRenderHtml.ts

@@ -1,17 +1,17 @@
-export { render }
-// See https://vike.dev/data-fetching
-export const passToClient = ['pageProps', 'urlPathname']
+// https://vike.dev/onRenderHtml
+export { onRenderHtml }
 
 import { renderToString as renderToString_ } from '@vue/server-renderer'
 import type { App } from 'vue'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
 import { createApp } from './app'
 import logoUrl from './logo.svg'
-import type { PageContextServer } from './types'
+import type { OnRenderHtmlAsync } from 'vike/types'
 
-async function render(pageContext: PageContextServer) {
+const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRenderHtmlAsync> => {
   const { Page, pageProps } = pageContext
-  // This render() hook only supports SSR, see https://vike.dev/render-modes for how to modify render() to support SPA
+  // This onRenderHtml() hook only supports SSR, see https://vike.dev/render-modes for how to modify
+  // onRenderHtml() to support SPA
   if (!Page) throw new Error('My render() hook expects pageContext.Page to be defined')
   const app = createApp(Page, pageProps, pageContext)
 

boilerplates/boilerplate-vue-ts/renderer/app.ts

@@ -1,7 +1,8 @@
 import { createSSRApp, defineComponent, h } from 'vue'
 import PageShell from './PageShell.vue'
 import { setPageContext } from './usePageContext'
-import type { Component, PageContext, PageProps } from './types'
+import type { PageContext } from 'vike/types'
+import type { Component, PageProps } from './types'
 
 export { createApp }
 

boilerplates/boilerplate-vue-ts/renderer/types.ts

@@ -1,15 +1,3 @@
-export type {
-  PageContextServer,
-  /*
-  // When using Client Routing https://vike.dev/clientRouting
-  PageContextClient,
-  PageContext,
-  /*/
-  // When using Server Routing
-  PageContextClientWithServerRouting as PageContextClient,
-  PageContextWithServerRouting as PageContext
-  //*/
-} from 'vike/types'
 export type { PageProps }
 export type { Component }
 

boilerplates/boilerplate-vue-ts/renderer/usePageContext.ts

@@ -3,7 +3,7 @@
 
 import { inject } from 'vue'
 import type { App, InjectionKey } from 'vue'
-import { PageContext } from './types'
+import { PageContext } from 'vike/types'
 
 export { usePageContext }
 export { setPageContext }

boilerplates/boilerplate-vue/renderer/+config.h.js

@@ -0,0 +1,9 @@
+// https://vike.dev/config
+export default {
+  /* To enable Client-side Routing:
+  clientRouting: true,
+  // !! WARNING !! Before doing so, read https://vike.dev/clientRouting */
+
+  // See https://vike.dev/data-fetching
+  passToClient: ['pageProps', 'urlPathname']
+}

boilerplates/boilerplate-vue/renderer/+onRenderClient.js

@@ -0,0 +1,13 @@
+// https://vike.dev/onRenderClient
+export { onRenderClient }
+
+import { createApp } from './app'
+
+// This onRenderClient() hook only supports SSR, see https://vike.dev/render-modes for how to modify onRenderClient()
+// to support SPA
+async function onRenderClient(pageContext) {
+  const { Page, pageProps } = pageContext
+  if (!Page) throw new Error('Client-side render() hook expects pageContext.Page to be defined')
+  const app = createApp(Page, pageProps, pageContext)
+  app.mount('#app')
+}

boilerplates/boilerplate-vue/renderer/_default.page.server.js → boilerplates/boilerplate-vue/renderer/+onRenderHtml.js

@@ -1,15 +1,15 @@
-export { render }
-// See https://vike.dev/data-fetching
-export const passToClient = ['pageProps', 'urlPathname']
+// https://vike.dev/onRenderHtml
+export { onRenderHtml }
 
 import { renderToString as renderToString_ } from '@vue/server-renderer'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
 import { createApp } from './app'
 import logoUrl from './logo.svg'
 
-async function render(pageContext) {
+async function onRenderHtml(pageContext) {
   const { Page, pageProps } = pageContext
-  // This render() hook only supports SSR, see https://vike.dev/render-modes for how to modify render() to support SPA
+  // This onRenderHtml() hook only supports SSR, see https://vike.dev/render-modes for how to modify
+  // onRenderHtml() to support SPA
   if (!Page) throw new Error('My render() hook expects pageContext.Page to be defined')
   const app = createApp(Page, pageProps, pageContext)
 

docs/NavHeader.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import vikeIcon from './images/icons/vike-square-gradient.svg'
 
 export { NavHeader }
+export { navHeaderWrapperStyle }
 export { NavHeaderMobile }
 
 function NavHeaderMobile() {
@@ -14,12 +15,13 @@ function NavHeaderMobile() {
   )
 }
 
+const navHeaderWrapperStyle: React.CSSProperties = { paddingTop: 16, paddingBottom: 1 }
 function NavHeader() {
-  const LOGO_SIZE = 55
+  const LOGO_SIZE = 80
   return (
     <>
       <img src={vikeIcon} height={LOGO_SIZE} width={LOGO_SIZE} />
-      <HeaderTitle fontSize={'2.55em'} marginLeft={10} />
+      <HeaderTitle fontSize={'3.3em'} marginLeft={14} />
     </>
   )
 }