create-vike 0.0.4 → 0.0.304

package/.testRun.ts

@@ -0,0 +1,118 @@
+export { testRun }
+
+import {
+  page,
+  run,
+  partRegex,
+  autoRetry,
+  fetchHtml,
+  getServerUrl,
+  expectLog,
+  editFile,
+  editFileRevert,
+  sleep,
+  test,
+  expect
+} from '@brillout/test-e2e'
+import assert from 'assert'
+
+function testRun(
+  cmd: 'npm run dev' | 'npm run prod' | 'npm run preview',
+  {
+    uiFramewok,
+    lang
+  }: {
+    uiFramewok: 'react' | 'vue' | 'preact' | 'solid'
+    lang?: 'ts'
+    isSPA?: true
+  }
+) {
+  run(cmd)
+
+  const isProd = cmd === 'npm run prod' || cmd === 'npm run preview'
+  const isDev = !isProd
+
+  test('page content is rendered to HTML', async () => {
+    const html = await fetchHtml('/')
+    // Solid injects attribute: <h1 data-hk="0-0-2-1-0">Welcome</h1>
+    expect(html).toMatch(partRegex`<h1${/[^\>]*/}>Welcome</h1>`)
+    // Vue injects: `<!--[-->Home<!--]-->`
+    expect(html).toMatch(partRegex`<a ${/[^\>]+/}>${/.*/}Home${/.*/}</a>`)
+    expect(html).toMatch(partRegex`<a ${/[^\>]+/}>${/.*/}About${/.*/}</a>`)
+  })
+
+  test('page is rendered to the DOM and interactive', async () => {
+    await page.goto(getServerUrl() + '/')
+    expect(await page.textContent('h1')).toBe('Welcome')
+    expect(await page.textContent('button')).toBe('Counter 0')
+    // autoRetry() because browser-side code may not be loaded yet
+    await autoRetry(async () => {
+      await page.click('button')
+      if (uiFramewok === 'solid') {
+        expect(await page.textContent('button')).not.toBe('Counter 0')
+      } else {
+        expect(await page.textContent('button')).toBe('Counter 1')
+      }
+    })
+  })
+
+  if (isDev && (uiFramewok === 'react' || uiFramewok === 'vue')) {
+    test('HMR', async () => {
+      const file = (() => {
+        if (uiFramewok === 'vue') {
+          return './pages/index/index.page.vue'
+        }
+        if (uiFramewok === 'react') {
+          if (lang === 'ts') {
+            return './pages/index/index.page.tsx'
+          } else {
+            return './pages/index/index.page.jsx'
+          }
+        }
+        assert(false)
+      })()
+      expect(await page.textContent('button')).toBe('Counter 1')
+      expect(await page.textContent('h1')).toBe('Welcome')
+      await sleep(2 * 1000) // timeout can probably be decreased
+      editFile(file, (s) => s.replace('Welcome', 'Welcome !'))
+      await autoRetry(async () => {
+        expect(await page.textContent('h1')).toBe('Welcome !')
+      })
+      expect(await page.textContent('button')).toBe('Counter 1')
+      await sleep(300)
+      editFileRevert()
+      await autoRetry(async () => {
+        expect(await page.textContent('h1')).toBe('Welcome')
+      })
+      expect(await page.textContent('button')).toBe('Counter 1')
+    })
+  }
+
+  test('about page', async () => {
+    await page.click('a[href="/about"]')
+    await autoRetry(async () => {
+      const title = await page.textContent('h1')
+      expect(title).toBe('About')
+    })
+  })
+
+  test('active links', async () => {
+    // Not sure why `autoRetry()` is needed here; isn't the CSS loading already awaited for in the previous `test()` call?
+    await autoRetry(async () => {
+      expect(await page.$eval('a[href="/about"]', (e) => getComputedStyle(e).backgroundColor)).toBe(
+        'rgb(238, 238, 238)'
+      )
+      expect(await page.$eval('a[href="/"]', (e) => getComputedStyle(e).backgroundColor)).toBe('rgba(0, 0, 0, 0)')
+    })
+  })
+
+  test('error page', async () => {
+    await page.goto(getServerUrl() + '/does-not-exist')
+    expect(await page.textContent('h1')).toBe('404 Page Not Found')
+    expect(await page.textContent('p')).toBe('This page could not be found.')
+    expectLog(
+      'Failed to load resource: the server responded with a status of 404 (Not Found)',
+      (log) => log.logSource === 'Browser Error' && partRegex`http://${/[^\/]+/}:3000/does-not-exist`.test(log.logText)
+    )
+  })
+}

package/boilerplate-react/.eslintrc.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+  rules: {
+    'react-refresh/only-export-components': 'warn'
+  },
+  reportUnusedDisableDirectives: true,
+  ignorePatterns: ['dist/*'],
+  env: { browser: true, es2020: true, node: true },
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: 'detect' } },
+  plugins: ['react-refresh'],
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended'
+  ]
+}

package/boilerplate-react/.test-dev.test.ts

@@ -0,0 +1,2 @@
+import { testRun } from '../.testRun'
+testRun('npm run dev', { uiFramewok: 'react' })

package/boilerplate-react/.test-prod.test.ts

@@ -0,0 +1,2 @@
+import { testRun } from '../.testRun'
+testRun('npm run prod', { uiFramewok: 'react' })

package/boilerplate-react/.testCiJob.json

@@ -0,0 +1 @@
+{ "name": "Boilerplates" }

package/boilerplate-react/_gitignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

package/boilerplate-react/package.json

@@ -0,0 +1,27 @@
+{
+  "scripts": {
+    "dev": "npm run server:dev",
+    "prod": "npm run lint && npm run build && npm run server:prod",
+    "build": "vite build",
+    "server:dev": "node ./server",
+    "server:prod": "cross-env NODE_ENV=production node ./server",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^4.0.4",
+    "compression": "^1.7.4",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.47.0",
+    "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "express": "^4.18.2",
+    "prop-types": "15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sirv": "^2.0.3",
+    "vite": "^4.4.9",
+    "vike": "^0.4.142"
+  },
+  "type": "module"
+}

package/boilerplate-react/pages/about/code.css

@@ -0,0 +1,6 @@
+code {
+  font-family: monospace;
+  background-color: #eaeaea;
+  padding: 3px 5px;
+  border-radius: 4px;
+}

package/boilerplate-react/pages/about/index.page.jsx

@@ -0,0 +1,14 @@
+import './code.css'
+
+export { Page }
+
+function Page() {
+  return (
+    <>
+      <h1>About</h1>
+      <p>
+        Example of using Vike.
+      </p>
+    </>
+  )
+}

package/{files/js/react → boilerplate-react}/pages/index/Counter.jsx

@@ -1,12 +1,12 @@
-import React, { useState } from "react";
+import { useState } from 'react'
 
-export { Counter };
+export { Counter }
 
 function Counter() {
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(0)
   return (
     <button type="button" onClick={() => setCount((count) => count + 1)}>
       Counter {count}
     </button>
-  );
+  )
 }

package/{files/js/react → boilerplate-react}/pages/index/index.page.jsx

@@ -1,7 +1,6 @@
-import React from "react";
-import { Counter } from "./Counter";
+import { Counter } from './Counter'
 
-export { Page };
+export { Page }
 
 function Page() {
   return (
@@ -15,5 +14,5 @@ function Page() {
         </li>
       </ul>
     </>
-  );
+  )
 }

package/boilerplate-react/renderer/Link.jsx

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types'
+import { usePageContext } from './usePageContext'
+
+export { Link }
+
+Link.propTypes = {
+  className: PropTypes.string,
+  href: PropTypes.string.isRequired
+}
+function Link(props) {
+  const pageContext = usePageContext()
+  const className = [props.className, pageContext.urlPathname === props.href && 'is-active'].filter(Boolean).join(' ')
+  return <a {...props} className={className} />
+}

package/boilerplate-react/renderer/PageShell.css

@@ -0,0 +1,19 @@
+/* This CSS is common to all pages */
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none;
+}
+
+.navitem {
+  padding: 3px 10px;
+}
+.navitem.is-active {
+  background-color: #eee;
+}

package/{files/js/react/renderer/PageWrapper.jsx → boilerplate-react/renderer/PageShell.jsx}

@@ -1,12 +1,18 @@
-import React from "react";
-import logo from "./logo.svg";
-import { PageContextProvider } from "./usePageContext";
-import "./PageWrapper.css";
-import { Link } from "./Link";
+import React from 'react'
+import PropTypes from 'prop-types'
+import logo from './logo.svg'
+import './PageShell.css'
+import { PageContextProvider } from './usePageContext'
+import { Link } from './Link'
+import { childrenPropType } from './PropTypeValues'
 
-export { PageWrapper };
+export { PageShell }
 
-function PageWrapper({ children, pageContext }) {
+PageShell.propTypes = {
+  pageContext: PropTypes.any,
+  children: childrenPropType
+}
+function PageShell({ pageContext, children }) {
   return (
     <React.StrictMode>
       <PageContextProvider pageContext={pageContext}>
@@ -24,53 +30,62 @@ function PageWrapper({ children, pageContext }) {
         </Layout>
       </PageContextProvider>
     </React.StrictMode>
-  );
+  )
 }
 
+Layout.propTypes = {
+  children: childrenPropType
+}
 function Layout({ children }) {
   return (
     <div
       style={{
-        display: "flex",
+        display: 'flex',
         maxWidth: 900,
-        margin: "auto",
+        margin: 'auto'
       }}
     >
       {children}
     </div>
-  );
+  )
 }
 
+Sidebar.propTypes = {
+  children: childrenPropType
+}
 function Sidebar({ children }) {
   return (
     <div
       style={{
         padding: 20,
         flexShrink: 0,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        lineHeight: "1.8em",
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        lineHeight: '1.8em'
       }}
     >
       {children}
     </div>
-  );
+  )
 }
 
+Content.propTypes = {
+  children: childrenPropType
+}
 function Content({ children }) {
   return (
     <div
       style={{
         padding: 20,
         paddingBottom: 50,
-        borderLeft: "2px solid #eee",
-        minHeight: "100vh",
+        borderLeft: '2px solid #eee',
+        minHeight: '100vh'
       }}
     >
       {children}
     </div>
-  );
+  )
 }
 
 function Logo() {
@@ -78,12 +93,12 @@ function Logo() {
     <div
       style={{
         marginTop: 20,
-        marginBottom: 10,
+        marginBottom: 10
       }}
     >
       <a href="/">
         <img src={logo} height={64} width={64} alt="logo" />
       </a>
     </div>
-  );
+  )
 }

package/boilerplate-react/renderer/PropTypeValues.js

@@ -0,0 +1,3 @@
+import PropTypes from 'prop-types'
+
+export let childrenPropType = PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired

package/boilerplate-react/renderer/_default.page.client.jsx

@@ -0,0 +1,22 @@
+export { render }
+
+import { hydrateRoot } from 'react-dom/client'
+import { PageShell } from './PageShell'
+
+// This render() hook only supports SSR, see https://vike.dev/render-modes for how to modify render() to support SPA
+async function render(pageContext) {
+  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')
+  if (!root) throw new Error('DOM element #react-root not found')
+  hydrateRoot(
+    root,
+    <PageShell pageContext={pageContext}>
+      <Page {...pageProps} />
+    </PageShell>
+  )
+}
+
+/* To enable Client-side Routing:
+export const clientRouting = true
+// !! WARNING !! Before doing so, read https://vike.dev/clientRouting */

package/boilerplate-react/renderer/_default.page.server.jsx

@@ -0,0 +1,45 @@
+export { render }
+// See https://vike.dev/data-fetching
+export const passToClient = ['pageProps', 'urlPathname']
+
+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) {
+  const { Page, pageProps } = pageContext
+  // This render() hook only supports SSR, see https://vike.dev/render-modes for how to modify render() to support SPA
+  if (!Page) throw new Error('My render() hook expects pageContext.Page to be defined')
+  const pageHtml = ReactDOMServer.renderToString(
+    <PageShell pageContext={pageContext}>
+      <Page {...pageProps} />
+    </PageShell>
+  )
+
+  // See https://vike.dev/head
+  const { documentProps } = pageContext.exports
+  const title = (documentProps && documentProps.title) || 'Vite SSR app'
+  const desc = (documentProps && documentProps.description) || 'App using Vite + Vike'
+
+  const documentHtml = escapeInject`<!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" href="${logoUrl}" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="${desc}" />
+        <title>${title}</title>
+      </head>
+      <body>
+        <div id="react-root">${dangerouslySkipEscape(pageHtml)}</div>
+      </body>
+    </html>`
+
+  return {
+    documentHtml,
+    pageContext: {
+      // We can add some `pageContext` here, which is useful if we want to do page redirection https://vike.dev/page-redirection
+    }
+  }
+}

package/{files/js/react → boilerplate-react}/renderer/_error.page.jsx

@@ -1,7 +1,10 @@
-import React from "react";
+import PropTypes from 'prop-types'
 
-export { Page };
+export { Page }
 
+Page.propTypes = {
+  is404: PropTypes.bool
+}
 function Page({ is404 }) {
   if (is404) {
     return (
@@ -9,13 +12,13 @@ function Page({ is404 }) {
         <h1>404 Page Not Found</h1>
         <p>This page could not be found.</p>
       </>
-    );
+    )
   } else {
     return (
       <>
-        <h1>500 Internal Server Error</h1>
+        <h1>500 Internal Error</h1>
         <p>Something went wrong.</p>
       </>
-    );
+    )
   }
 }

package/boilerplate-react/renderer/logo.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="175" height="175" fill="none" version="1.1" viewBox="0 0 175 175" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <defs>
+  <linearGradient id="linearGradient880" x1="108.64" x2="115.51" y1="88.726" y2="136.2" gradientTransform="matrix(1.0498 0 0 1.0498 -2.9171 -2.9658)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#ffea83" offset="0"/>
+   <stop stop-color="#FFDD35" offset=".083333"/>
+   <stop stop-color="#FFA800" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint2_linear" x1="48.975" x2="61.299" y1="3.9232" y2="158.04" gradientTransform="translate(-2.832e-5)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#FFEA83" offset="0"/>
+   <stop stop-color="#FFDD35" offset=".083333"/>
+   <stop stop-color="#FFA800" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint0_linear-6" x1="-1.4492" x2="116.62" y1="-5.8123" y2="137.08" gradientTransform="translate(-2.832e-5)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#41D1FF" offset="0"/>
+   <stop stop-color="#BD34FE" offset="1"/>
+  </linearGradient>
+ </defs>
+ <circle cx="87.5" cy="87.5" r="87.5" fill="#c4c4c4"/>
+ <circle cx="87.5" cy="87.5" r="87.5" fill="url(#paint0_linear-6)"/>
+ <g transform="translate(632.92 54.355)" fill="#d38787" stroke-width="1.0614">
+  <path d="m-549.75 68.457c-5.7533-3.1217-6.1166-5.2295-6.1166-35.489 0-30.458 0.35464-32.448 6.3339-35.54 3.9943-2.0655 24.279-2.2805 26.735-0.28333 0.89718 0.72974 6.7203 6.6637 12.94 13.187l11.309 11.86v19.575c0 18.473-0.12956 19.74-2.3011 22.5-4.0223 5.1136-7.558 5.8565-27.65 5.8099-14.15-0.03287-19.008-0.40294-21.25-1.6191zm42.473-6.3594c2.27-1.59 2.359-2.2909 2.359-18.575v-16.923h-6.9521c-12.443 0-16.4-4.0845-16.4-16.93v-7.4828h-8.9464c-6.7178 0-9.3619 0.41549-10.614 1.668-2.5031 2.5031-2.5031 55.724 0 58.228 2.4502 2.4502 37.058 2.4636 40.553 0.01609zm-1.8867-42.165c0-0.16422-2.8659-3.1346-6.3686-6.6008l-6.3686-6.3022v4.9328c0 6.3185 1.8955 8.2687 8.0366 8.2687 2.5854 0 4.7007-0.13434 4.7007-0.29859zm-57.57 44.279c-5.6185-3.0486-6.1166-5.593-6.1166-31.243 0-18.891 0.31331-24.063 1.6101-26.571 1.809-3.4981 6.5048-6.3339 10.489-6.3339 2.4847 0 2.5814 0.19984 1.541 3.1843-0.61054 1.7514-1.7457 3.1843-2.5226 3.1843-0.77686 0-2.1631 0.75059-3.0805 1.668-2.4923 2.4923-2.4923 47.244 0 49.736 0.91739 0.9174 2.3036 1.668 3.0805 1.668 0.77688 0 1.912 1.4329 2.5226 3.1843 1.0562 3.0298 0.97108 3.1822-1.7537 3.1418-1.575-0.02331-4.1713-0.75194-5.7694-1.6191zm-16.983-4.2458c-5.4392-2.9512-6.1166-5.9415-6.1166-26.997 0-15.096 0.345-19.878 1.6101-22.325 1.7476-3.3796 6.4758-6.3339 10.137-6.3339 1.8666 0 2.1789 0.44955 1.6594 2.3882-0.35184 1.3135-0.64655 2.7465-0.65453 3.1843-8e-3 0.43784-0.69682 0.79608-1.5308 0.79608-0.83399 0-2.2669 0.75059-3.1843 1.668-2.4767 2.4767-2.4767 38.768 0 41.244 0.91741 0.91739 2.2946 1.668 3.0605 1.668 1.196 0 2.6402 2.995 2.6871 5.5726 0.0241 1.3294-4.5804 0.80962-7.6676-0.8655z" style="mix-blend-mode:lighten"/>
+  <path d="m-552.2 68.911c-5.7533-3.1217-6.1166-5.2295-6.1166-35.489 0-30.458 0.35463-32.448 6.3339-35.54 3.9943-2.0655 24.279-2.2805 26.735-0.28333 0.89718 0.72974 6.7203 6.6637 12.94 13.187l11.309 11.86v19.575c0 18.473-0.12957 19.74-2.3011 22.5-4.0223 5.1136-7.558 5.8565-27.65 5.8099-14.15-0.03287-19.008-0.40294-21.25-1.6191zm42.473-6.3594c2.27-1.59 2.359-2.2909 2.359-18.575v-16.923h-6.952c-12.443 0-16.4-4.0845-16.4-16.93v-7.4828h-8.9464c-6.7179 0-9.3619 0.41549-10.614 1.668-2.5031 2.5031-2.5031 55.724 0 58.228 2.4502 2.4502 37.058 2.4636 40.553 0.01609zm-1.8867-42.165c0-0.16422-2.8659-3.1346-6.3686-6.6008l-6.3686-6.3022v4.9328c0 6.3185 1.8955 8.2688 8.0366 8.2688 2.5854 0 4.7007-0.13434 4.7007-0.29859zm-57.57 44.279c-5.6185-3.0486-6.1166-5.593-6.1166-31.243 0-18.891 0.31331-24.063 1.6101-26.571 1.809-3.4981 6.5048-6.3339 10.489-6.3339 2.4847 0 2.5814 0.19984 1.541 3.1843-0.61054 1.7514-1.7457 3.1843-2.5226 3.1843-0.77687 0-2.1631 0.75059-3.0805 1.668-2.4923 2.4923-2.4923 47.244 0 49.736 0.91741 0.91739 2.3036 1.668 3.0805 1.668 0.77686 0 1.912 1.4329 2.5226 3.1843 1.0562 3.0298 0.97107 3.1822-1.7537 3.1418-1.575-0.02331-4.1713-0.75194-5.7694-1.6191zm-16.983-4.2458c-5.4392-2.9512-6.1166-5.9415-6.1166-26.997 0-15.096 0.34502-19.878 1.6101-22.325 1.7476-3.3796 6.4758-6.3339 10.137-6.3339 1.8666 0 2.1789 0.44955 1.6594 2.3882-0.35182 1.3135-0.64653 2.7465-0.65452 3.1843-8e-3 0.43784-0.69683 0.79608-1.5308 0.79608-0.83397 0-2.2669 0.75059-3.1843 1.668-2.4767 2.4767-2.4767 38.768 0 41.245 0.9174 0.91739 2.2946 1.668 3.0605 1.668 1.196 0 2.6402 2.995 2.6871 5.5726 0.0241 1.3294-4.5804 0.80962-7.6676-0.8655z" fill-opacity=".47466" style="mix-blend-mode:lighten"/>
+ </g>
+ <path d="m128.48 88.913-24.027 4.6784c-0.39475 0.07685-0.68766 0.40944-0.71076 0.80849l-1.4782 24.805c-0.0347 0.58371 0.50497 1.0372 1.0792 0.90602l6.6886-1.5338c0.62676-0.14383 1.1916 0.40419 1.0635 1.0299l-1.9874 9.6702c-0.13438 0.65091 0.48084 1.2073 1.1202 1.0142l4.1322-1.2472c0.64041-0.19317 1.2556 0.36535 1.1202 1.0162l-3.158 15.191c-0.19842 0.95011 1.074 1.4677 1.6042 0.653l0.35485-0.54382 19.578-38.827c0.32755-0.64985-0.23727-1.391-0.95641-1.2535l-6.8849 1.3207c-0.6467 0.12389-1.1979-0.47453-1.0152-1.1034l4.4944-15.482c0.18266-0.63012-0.36955-1.2295-1.0173-1.1034z" fill="url(#linearGradient880)" stroke-width="1.0498"/>
+ <rect x="3" y="3" width="169" height="169" rx="84.5" stroke="url(#paint2_linear)" stroke-width="6" style="mix-blend-mode:soft-light"/>
+</svg>

package/boilerplate-react/renderer/usePageContext.jsx

@@ -0,0 +1,25 @@
+// `usePageContext` allows us to access `pageContext` in any React component.
+// See https://vike.dev/pageContext-anywhere
+
+import React, { useContext } from 'react'
+import PropTypes from 'prop-types'
+import { childrenPropType } from './PropTypeValues'
+
+export { PageContextProvider }
+// eslint-disable-next-line react-refresh/only-export-components
+export { usePageContext }
+
+const Context = React.createContext(undefined)
+
+PageContextProvider.propTypes = {
+  pageContext: PropTypes.any,
+  children: childrenPropType
+}
+function PageContextProvider({ pageContext, children }) {
+  return <Context.Provider value={pageContext}>{children}</Context.Provider>
+}
+
+function usePageContext() {
+  const pageContext = useContext(Context)
+  return pageContext
+}

package/boilerplate-react/server/index.js

@@ -0,0 +1,74 @@
+// This file isn't processed by Vite, see https://github.com/vikejs/vike/issues/562
+// Consequently:
+//  - When changing this file, you needed to manually restart your server for your changes to take effect.
+//  - To use your environment variables defined in your .env files, you need to install dotenv, see https://vike.dev/env
+//  - To use your path aliases defined in your vite.config.js, you need to tell Node.js about them, see https://vike.dev/path-aliases
+
+// If you want Vite to process your server code then use one of these:
+//  - vavite (https://github.com/cyco130/vavite)
+//     - See vavite + Vike examples at https://github.com/cyco130/vavite/tree/main/examples
+//  - vite-node (https://github.com/antfu/vite-node)
+//  - HatTip (https://github.com/hattipjs/hattip)
+//    - You can use Bati (https://batijs.github.io/) to scaffold a vike + HatTip app. Note that Bati generates apps that use the V1 design (https://vike.dev/migration/v1-design) and Vike packages (https://vike.dev/vike-packages)
+
+import express from 'express'
+import compression from 'compression'
+import { renderPage } from 'vike/server'
+import { root } from './root.js'
+const isProduction = process.env.NODE_ENV === 'production'
+
+startServer()
+
+async function startServer() {
+  const app = express()
+
+  app.use(compression())
+
+  // Vite integration
+  if (isProduction) {
+    // In production, we need to serve our static assets ourselves.
+    // (In dev, Vite's middleware serves our static assets.)
+    const sirv = (await import('sirv')).default
+    app.use(sirv(`${root}/dist/client`))
+  } else {
+    // We instantiate Vite's development server and integrate its middleware to our server.
+    // ⚠️ We instantiate it only in development. (It isn't needed in production and it
+    // would unnecessarily bloat our production server.)
+    const vite = await import('vite')
+    const viteDevMiddleware = (
+      await vite.createServer({
+        root,
+        server: { middlewareMode: true }
+      })
+    ).middlewares
+    app.use(viteDevMiddleware)
+  }
+
+  // ...
+  // Other middlewares (e.g. some RPC middleware such as Telefunc)
+  // ...
+
+  // Vike middleware. It should always be our last middleware (because it's a
+  // catch-all middleware superseding any middleware placed after it).
+  app.get('*', async (req, res, next) => {
+    const pageContextInit = {
+      urlOriginal: req.originalUrl
+    }
+    const pageContext = await renderPage(pageContextInit)
+    const { httpResponse } = pageContext
+    if (!httpResponse) {
+      return next()
+    } else {
+      const { body, statusCode, headers, earlyHints } = httpResponse
+      if (res.writeEarlyHints) res.writeEarlyHints({ link: earlyHints.map((e) => e.earlyHintLink) })
+      headers.forEach(([name, value]) => res.setHeader(name, value))
+      res.status(statusCode)
+      // For HTTP streams use httpResponse.pipe() instead, see https://vike.dev/stream
+      res.send(body)
+    }
+  })
+
+  const port = process.env.PORT || 3000
+  app.listen(port)
+  console.log(`Server running at http://localhost:${port}`)
+}

package/boilerplate-react/server/root.js

@@ -0,0 +1,8 @@
+export { root }
+
+// https://stackoverflow.com/questions/46745014/alternative-for-dirname-in-node-when-using-the-experimental-modules-flag/50052194#50052194
+
+import { dirname } from 'path'
+import { fileURLToPath } from 'url'
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const root = `${__dirname}/..`

package/boilerplate-react/vite.config.js

@@ -0,0 +1,6 @@
+import react from '@vitejs/plugin-react'
+import ssr from 'vike/plugin'
+
+export default {
+  plugins: [react(), ssr()]
+}