create-vike 0.0.320 → 0.0.321

package/.testRun.ts

@@ -10,9 +10,9 @@ import {
   expectLog,
   editFile,
   editFileRevert,
-  sleep,
   test,
-  expect
+  expect,
+  sleep
 } from '@brillout/test-e2e'
 import assert from 'assert'
 
@@ -37,8 +37,8 @@ function testRun(
     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>`)
+    // Vue injects: `<!--[-->Welcome<!--]-->`
+    expect(html).toMatch(partRegex`<a ${/[^\>]+/}>${/.*/}Welcome${/.*/}</a>`)
     expect(html).toMatch(partRegex`<a ${/[^\>]+/}>${/.*/}About${/.*/}</a>`)
   })
 
@@ -107,11 +107,37 @@ function testRun(
 
   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.')
+    expect(await page.textContent('#page-content')).toBe('Page not 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)
     )
   })
+
+  test('data fetching page, HTML', async () => {
+    const html = await fetchHtml('/star-wars')
+    expect(html).toContain('<a href="/star-wars/6">Revenge of the Sith</a>')
+    expect(html).toContain('<a href="/star-wars/4">The Phantom Menace</a>')
+  })
+
+  test('data fetching page, DOM', async () => {
+    await page.goto(getServerUrl() + '/star-wars')
+    const text = await page.textContent('body')
+    expect(text).toContain('Revenge of the Sith')
+    expect(text).toContain('The Phantom Menace')
+
+    if (uiFramewok === 'vue') {
+      // Attempt to make test less flaky: it some times throws a "Hydration Mismatch" error (I don't know why).
+      await sleep(1000)
+    }
+    await page.click('a[href="/star-wars/4"]')
+    await autoRetry(async () => {
+      expect(await page.textContent('h1')).toBe('The Phantom Menace')
+    })
+    const pageContent =
+      uiFramewok === 'vue'
+        ? 'The Phantom Menace Release Date: 1999-05-19  Director: George Lucas  Producer: Rick McCallum'
+        : 'The Phantom MenaceRelease Date: 1999-05-19Director: George LucasProducer: Rick McCallum'
+    expect(await page.textContent('body')).toContain(pageContent)
+  })
 }

package/boilerplate-react/package.json

@@ -16,12 +16,13 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "express": "^4.18.2",
+    "node-fetch": "^3.3.2",
     "prop-types": "15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sirv": "^2.0.3",
-    "vite": "^5.0.10",
-    "vike": "^0.4.156"
+    "vike": "^0.4.156",
+    "vite": "^5.0.10"
   },
   "type": "module"
 }

package/boilerplate-react/pages/_error/+Page.jsx

@@ -1,24 +1,31 @@
-import PropTypes from 'prop-types'
-
 export { Page }
 
-Page.propTypes = {
-  is404: PropTypes.bool
-}
-function Page({ is404 }) {
-  if (is404) {
-    return (
-      <>
-        <h1>404 Page Not Found</h1>
-        <p>This page could not be found.</p>
-      </>
-    )
-  } else {
-    return (
-      <>
-        <h1>500 Internal Error</h1>
-        <p>Something went wrong.</p>
-      </>
-    )
+import { usePageContext } from '../../renderer/usePageContext'
+
+function Page() {
+  const pageContext = usePageContext()
+  let { abortReason } = pageContext
+  if (!abortReason) {
+    abortReason = pageContext.is404 ? 'Page not found.' : 'Something went wrong.'
   }
+  return (
+    <Center>
+      <p style={{ fontSize: '1.3em' }}>{abortReason}</p>
+    </Center>
+  )
+}
+
+function Center({ children }) {
+  return (
+    <div
+      style={{
+        height: 'calc(100vh - 100px)',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}
+    >
+      {children}
+    </div>
+  )
 }

package/boilerplate-react/pages/index/+Page.jsx

@@ -1,7 +1,7 @@
-import { Counter } from './Counter'
-
 export { Page }
 
+import { Counter } from './Counter'
+
 function Page() {
   return (
     <>

package/boilerplate-react/pages/index/Counter.jsx

@@ -1,7 +1,7 @@
-import { useState } from 'react'
-
 export { Counter }
 
+import { useState } from 'react'
+
 function Counter() {
   const [count, setCount] = useState(0)
   return (

package/boilerplate-react/pages/star-wars/@id/+Page.jsx

@@ -0,0 +1,17 @@
+export { Page }
+
+import { useData } from '../../../renderer/useData'
+
+function Page() {
+  const { movie } = useData()
+  return (
+    <>
+      <h1>{movie.title}</h1>
+      Release Date: {movie.release_date}
+      <br />
+      Director: {movie.director}
+      <br />
+      Producer: {movie.producer}
+    </>
+  )
+}

package/boilerplate-react/pages/star-wars/@id/+data.js

@@ -0,0 +1,33 @@
+// https://vike.dev/data
+export { data }
+
+// The node-fetch package (which only works on the server-side) can be used since
+// this file always runs on the server-side, see https://vike.dev/data#server-side
+import fetch from 'node-fetch'
+
+const data = async (pageContext) => {
+  await sleep(300) // Simulate slow network
+
+  const response = await fetch(`https://brillout.github.io/star-wars/api/films/${pageContext.routeParams.id}.json`)
+  let movie = await response.json()
+
+  // We remove data we don't need because the data is passed to the client; we should
+  // minimize what is sent over the network.
+  movie = minimize(movie)
+
+  return {
+    movie,
+    // The page's <title>
+    title: movie.title
+  }
+}
+
+function minimize(movie) {
+  const { id, title, release_date, director, producer } = movie
+  movie = { id, title, release_date, director, producer }
+  return movie
+}
+
+function sleep(milliseconds) {
+  return new Promise((r) => setTimeout(r, milliseconds))
+}

package/boilerplate-react/pages/star-wars/index/+Page.jsx

@@ -0,0 +1,25 @@
+export default Page
+
+import { useData } from '../../../renderer/useData'
+
+function Page() {
+  const { movies } = useData()
+  return (
+    <>
+      <h1>Star Wars Movies</h1>
+      <ol>
+        {movies.map(({ id, title, release_date }) => (
+          <li key={id}>
+            <a href={`/star-wars/${id}`}>{title}</a> ({release_date})
+          </li>
+        ))}
+      </ol>
+      <p>
+        Source: <a href="https://brillout.github.io/star-wars/">brillout.github.io/star-wars</a>.
+      </p>
+      <p>
+        Data can be fetched by using the <code>data()</code> hook.
+      </p>
+    </>
+  )
+}

package/boilerplate-react/pages/star-wars/index/+data.js

@@ -0,0 +1,35 @@
+// https://vike.dev/data
+export { data }
+
+// The node-fetch package (which only works on the server-side) can be used since
+// this file always runs on the server-side, see https://vike.dev/data#server-side
+import fetch from 'node-fetch'
+
+// eslint-disable-next-line no-unused-vars
+const data = async (pageContext) => {
+  await sleep(700) // Simulate slow network
+
+  const response = await fetch('https://brillout.github.io/star-wars/api/films.json')
+  const moviesData = await response.json()
+
+  // We remove data we don't need because the data is passed to the client; we should
+  // minimize what is sent over the network.
+  const movies = minimize(moviesData)
+
+  return {
+    movies,
+    // The page's <title>
+    title: `${movies.length} Star Wars Movies`
+  }
+}
+
+function minimize(movies) {
+  return movies.map((movie) => {
+    const { title, release_date, id } = movie
+    return { title, release_date, id }
+  })
+}
+
+function sleep(milliseconds) {
+  return new Promise((r) => setTimeout(r, milliseconds))
+}

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

@@ -1,9 +1,17 @@
 // https://vike.dev/config
 export default {
-  /* To enable Client-side Routing:
+  // https://vike.dev/clientRouting
   clientRouting: true,
-  // !! WARNING !! Before doing so, read https://vike.dev/clientRouting */
-
-  // See https://vike.dev/data-fetching
-  passToClient: ['pageProps', 'urlPathname']
+  // https://vike.dev/meta
+  meta: {
+    // Define new setting 'title'
+    title: {
+      env: { server: true, client: true }
+    },
+    // Define new setting 'description'
+    description: {
+      env: { server: true }
+    }
+  },
+  hydrationCanBeAborted: true
 }

package/boilerplate-react/renderer/+onPageTransitionEnd.js

@@ -0,0 +1,7 @@
+// https://vike.dev/onPageTransitionEnd
+export { onPageTransitionEnd }
+
+function onPageTransitionEnd() {
+  console.log('Page transition end')
+  document.querySelector('body').classList.remove('page-is-transitioning')
+}

package/boilerplate-react/renderer/+onPageTransitionStart.js

@@ -0,0 +1,7 @@
+// https://vike.dev/onPageTransitionStart
+export { onPageTransitionStart }
+
+function onPageTransitionStart() {
+  console.log('Page transition start')
+  document.querySelector('body').classList.add('page-is-transitioning')
+}

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

@@ -1,20 +1,33 @@
 // https://vike.dev/onRenderClient
 export { onRenderClient }
 
-import { hydrateRoot } from 'react-dom/client'
+import ReactDOM from 'react-dom/client'
 import { PageShell } from './PageShell'
+import { getPageTitle } from './getPageTitle'
 
-// 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,
+let root
+function onRenderClient(pageContext) {
+  const { Page } = pageContext
+
+  // This onRenderClient() hook only supports SSR, see https://vike.dev/render-modes for how to modify onRenderClient()
+  // to support SPA
+  if (!Page) throw new Error('My onRenderClient() hook expects pageContext.Page to be defined')
+
+  const container = document.getElementById('react-root')
+  if (!container) throw new Error('DOM element #react-root not found')
+
+  const page = (
     <PageShell pageContext={pageContext}>
-      <Page {...pageProps} />
+      <Page />
     </PageShell>
   )
+  if (pageContext.isHydration) {
+    root = ReactDOM.hydrateRoot(container, page)
+  } else {
+    if (!root) {
+      root = ReactDOM.createRoot(container)
+    }
+    root.render(page)
+  }
+  document.title = getPageTitle(pageContext)
 }

package/boilerplate-react/renderer/+onRenderHtml.jsx

@@ -5,22 +5,25 @@ import ReactDOMServer from 'react-dom/server'
 import { PageShell } from './PageShell'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
 import logoUrl from './logo.svg'
+import { getPageTitle } from './getPageTitle'
+
+function onRenderHtml(pageContext) {
+  const { Page } = pageContext
 
-async function onRenderHtml(pageContext) {
-  const { Page, pageProps } = pageContext
   // 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')
+  if (!Page) throw new Error('My onRenderHtml() hook expects pageContext.Page to be defined')
+
+  // Alternativly, we can use an HTML stream, see https://vike.dev/stream
   const pageHtml = ReactDOMServer.renderToString(
     <PageShell pageContext={pageContext}>
-      <Page {...pageProps} />
+      <Page />
     </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 title = getPageTitle(pageContext)
+  const desc = pageContext.data?.description || pageContext.config.description || 'Demo of using Vike'
 
   const documentHtml = escapeInject`<!DOCTYPE html>
     <html lang="en">
@@ -39,7 +42,8 @@ async function onRenderHtml(pageContext) {
   return {
     documentHtml,
     pageContext: {
-      // We can add some `pageContext` here, which is useful if we want to do page redirection https://vike.dev/page-redirection
+      // We can add custom pageContext properties here, see https://vike.dev/pageContext#custom
     }
   }
 }
+

package/boilerplate-react/renderer/Link.jsx

@@ -9,6 +9,9 @@ Link.propTypes = {
 }
 function Link(props) {
   const pageContext = usePageContext()
-  const className = [props.className, pageContext.urlPathname === props.href && 'is-active'].filter(Boolean).join(' ')
+  const { urlPathname } = pageContext
+  const { href } = props
+  const isActive = href === '/' ? urlPathname === href : urlPathname.startsWith(href)
+  const className = [props.className, isActive && 'is-active'].filter(Boolean).join(' ')
   return <a {...props} className={className} />
 }

package/boilerplate-react/renderer/PageShell.css

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

package/boilerplate-react/renderer/PageShell.jsx

@@ -1,12 +1,13 @@
+export { PageShell }
+
 import React from 'react'
 import PropTypes from 'prop-types'
-import logo from './logo.svg'
-import './PageShell.css'
+import { childrenPropType } from './PropTypeValues'
+import logoUrl from './logo.svg'
 import { PageContextProvider } from './usePageContext'
 import { Link } from './Link'
-import { childrenPropType } from './PropTypeValues'
-
-export { PageShell }
+import './css/index.css'
+import './PageShell.css'
 
 PageShell.propTypes = {
   pageContext: PropTypes.any,
@@ -19,12 +20,9 @@ function PageShell({ pageContext, children }) {
         <Layout>
           <Sidebar>
             <Logo />
-            <Link className="navitem" href="/">
-              Home
-            </Link>
-            <Link className="navitem" href="/about">
-              About
-            </Link>
+            <Link href="/">Welcome</Link>
+            <Link href="/about">About</Link>
+            <Link href="/star-wars">Data Fetching</Link>
           </Sidebar>
           <Content>{children}</Content>
         </Layout>
@@ -56,13 +54,14 @@ Sidebar.propTypes = {
 function Sidebar({ children }) {
   return (
     <div
+      id="sidebar"
       style={{
         padding: 20,
         flexShrink: 0,
         display: 'flex',
         flexDirection: 'column',
-        alignItems: 'center',
-        lineHeight: '1.8em'
+        lineHeight: '1.8em',
+        borderRight: '2px solid #eee'
       }}
     >
       {children}
@@ -75,15 +74,17 @@ Content.propTypes = {
 }
 function Content({ children }) {
   return (
-    <div
-      style={{
-        padding: 20,
-        paddingBottom: 50,
-        borderLeft: '2px solid #eee',
-        minHeight: '100vh'
-      }}
-    >
-      {children}
+    <div id="page-container">
+      <div
+        id="page-content"
+        style={{
+          padding: 20,
+          paddingBottom: 50,
+          minHeight: '100vh'
+        }}
+      >
+        {children}
+      </div>
     </div>
   )
 }
@@ -97,7 +98,7 @@ function Logo() {
       }}
     >
       <a href="/">
-        <img src={logo} height={64} width={64} alt="logo" />
+        <img src={logoUrl} height={64} width={64} alt="logo" />
       </a>
     </div>
   )

package/boilerplate-react/renderer/css/code.css

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

package/boilerplate-react/renderer/css/index.css

@@ -0,0 +1,4 @@
+@import './reset.css';
+@import './links.css';
+@import './code.css';
+@import './page-transition-loading-animation.css';

package/boilerplate-react/renderer/css/links.css

@@ -0,0 +1,3 @@
+a {
+  text-decoration: none;
+}

package/boilerplate-react/renderer/css/page-transition-loading-animation/loading.svg

@@ -0,0 +1,5 @@
+<svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
+    <path fill="#aaa" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
+      <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform>
+  </path>
+</svg>

package/boilerplate-react/renderer/css/page-transition-loading-animation.css

@@ -0,0 +1,26 @@
+#page-container {
+  position: relative;
+  width: 100%;
+}
+#page-container::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  background: no-repeat url('./page-transition-loading-animation/loading.svg');
+  background-size: 100px;
+  background-position: center center;
+  pointer-events: none;
+  opacity: 0;
+}
+body.page-is-transitioning #page-container::before {
+  opacity: 1;
+}
+#page-content,
+#page-container::before {
+  transition: opacity 0.5s ease-in-out;
+}
+body.page-is-transitioning #page-content {
+  opacity: 0.17;
+}

package/boilerplate-react/renderer/css/reset.css

@@ -0,0 +1,7 @@
+body {
+  margin: 0;
+  font-family: sans-serif;
+}
+* {
+  box-sizing: border-box;
+}

package/boilerplate-react/renderer/getPageTitle.js

@@ -0,0 +1,12 @@
+export { getPageTitle }
+
+function getPageTitle(pageContext) {
+  const title =
+    // Title defined dynamically by data()
+    pageContext.data?.title ||
+    // Title defined statically by /pages/some-page/+title.js (or by `export default { title }` in /pages/some-page/+config.js)
+    // The setting 'pageContext.config.title' is a custom setting we defined at ./+config.ts
+    pageContext.config.title ||
+    'Vike Demo'
+  return title
+}

package/boilerplate-react/renderer/useData.js

@@ -0,0 +1,10 @@
+// https://vike.dev/useData
+export { useData }
+
+import { usePageContext } from './usePageContext'
+
+/** https://vike.dev/useData */
+function useData() {
+  const { data } = usePageContext()
+  return data
+}

package/boilerplate-react/renderer/usePageContext.jsx

@@ -1,14 +1,12 @@
-// `usePageContext` allows us to access `pageContext` in any React component.
-// See https://vike.dev/pageContext-anywhere
+// https://vike.dev/usePageContext
+// eslint-disable-next-line react-refresh/only-export-components
+export { usePageContext }
+export { PageContextProvider }
 
 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 = {
@@ -19,6 +17,7 @@ function PageContextProvider({ pageContext, children }) {
   return <Context.Provider value={pageContext}>{children}</Context.Provider>
 }
 
+/** https://vike.dev/usePageContext */
 function usePageContext() {
   const pageContext = useContext(Context)
   return pageContext

package/boilerplate-react-ts/package.json

@@ -24,13 +24,14 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "express": "^4.18.2",
+    "node-fetch": "^3.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sirv": "^2.0.3",
     "ts-node": "^10.9.1",
     "typescript": "^5.3.3",
-    "vite": "^5.0.10",
-    "vike": "^0.4.156"
+    "vike": "^0.4.156",
+    "vite": "^5.0.10"
   },
   "type": "module"
 }