create-vike 0.0.320 → 0.0.322

package/boilerplate-vue/pages/_error/+Page.vue

@@ -1,14 +1,25 @@
 <template>
-  <div v-if="is404">
-    <h1>404 Page Not Found</h1>
-    <p>This page could not be found.</p>
-  </div>
-  <div v-else>
-    <h1>500 Internal Error</h1>
-    <p>Something went wrong.</p>
+  <div class="center">
+    <p>{{ abortReason }}</p>
   </div>
 </template>
 
 <script setup>
-defineProps(['is404'])
+import { usePageContext } from '../../renderer/usePageContext'
+
+const pageContext = usePageContext()
+let { is404, abortReason } = pageContext
+if (!abortReason) {
+  abortReason = is404 ? 'Page not found.' : 'Something went wrong.'
+}
 </script>
+
+<style>
+.center {
+  height: calc(100vh - 100px);
+  display: flex;
+  font-size: 1.3em;
+  justify-content: center;
+  align-items: center;
+}
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+  <h1>{{ data.movie.title }}</h1>
+  Release Date: {{ data.movie.release_date }}
+  <br />
+  Director: {{ data.movie.director }}
+  <br />
+  Producer: {{ data.movie.producer }}
+</template>
+
+<script setup>
+import { useData } from '../../../renderer/useData'
+const data = useData()
+</script>

package/boilerplate-vue/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-vue/pages/star-wars/index/+Page.vue

@@ -0,0 +1,15 @@
+<template>
+  <h1>Star Wars Movies</h1>
+  <ol>
+    <li v-for="item in data.movies" :key="item.id">
+      <a :href="'/star-wars/' + item.id">{{ item.title }}</a> ({{ item.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>
+</template>
+
+<script setup>
+import { useData } from '../../../renderer/useData'
+const data = useData()
+</script>

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

@@ -0,0 +1,34 @@
+// 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(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-vue/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-vue/renderer/+onPageTransitionEnd.js

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

package/boilerplate-vue/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-vue/renderer/+onRenderClient.js

@@ -2,12 +2,19 @@
 export { onRenderClient }
 
 import { createApp } from './app'
+import { getPageTitle } from './getPageTitle'
 
-// This onRenderClient() hook only supports SSR, see https://vike.dev/render-modes for how to modify onRenderClient()
-// to support SPA
+let app
 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')
+  // This onRenderClient() hook only supports SSR, see https://vike.dev/render-modes for how to modify onRenderClient()
+  // to support SPA
+  if (!pageContext.Page) throw new Error('My onRenderClient() hook expects pageContext.Page to be defined')
+
+  if (!app) {
+    app = createApp(pageContext)
+    app.mount('#app')
+  } else {
+    app.changePage(pageContext)
+  }
+  document.title = getPageTitle(pageContext)
 }

package/boilerplate-vue/renderer/+onRenderHtml.js

@@ -5,20 +5,20 @@ import { renderToString as renderToString_ } from '@vue/server-renderer'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
 import { createApp } from './app'
 import logoUrl from './logo.svg'
+import { getPageTitle } from './getPageTitle'
 
 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')
-  const app = createApp(Page, pageProps, pageContext)
+  if (!pageContext.Page) throw new Error('My render() hook expects pageContext.Page to be defined')
+
+  const app = createApp(pageContext)
 
   const appHtml = await renderToString(app)
 
-  // 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'
+  // https://vike.dev/head
+  const title = getPageTitle(pageContext)
+  const desc = pageContext.data?.description || pageContext.config.description || 'Demo of using Vike'
 
   const documentHtml = escapeInject`<!DOCTYPE html>
     <html lang="en">
@@ -37,7 +37,7 @@ 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-vue/renderer/Link.vue

@@ -1,17 +1,25 @@
 <template>
-  <a :class="{ active: pageContext.urlPathname === $attrs.href }">
+  <a :class="{ active: isActive }">
     <slot />
   </a>
 </template>
 <style scoped>
 a {
-  padding: 3px 10px;
+  padding: 2px 10px;
+  margin-left: -10px;
 }
 a.active {
   background-color: #eee;
 }
 </style>
 <script setup>
+import { useAttrs, computed } from 'vue'
 import { usePageContext } from './usePageContext'
+
 const pageContext = usePageContext()
+const { href } = useAttrs()
+const isActive = computed(() => {
+  const { urlPathname } = pageContext
+  return href === '/' ? urlPathname === href : urlPathname.startsWith(href)
+})
 </script>

package/boilerplate-vue/renderer/PageShell.vue

@@ -1,54 +1,52 @@
 <template>
-  <div class="layout">
-    <div class="navigation">
-      <a href="/" class="logo">
+  <div id="page-container">
+    <div id="sidebar">
+      <a href="/" id="logo-container">
         <img src="./logo.svg" height="64" width="64" alt="logo" />
       </a>
-      <Link href="/">Home</Link>
+      <Link href="/">Welcome</Link>
       <Link href="/about">About</Link>
+      <Link href="/star-wars">Data Fetching</Link>
     </div>
-    <div class="content"><slot /></div>
+    <div id="page-content"><slot /></div>
   </div>
 </template>
 
 <script setup>
 import Link from './Link.vue'
+import './css/index.css'
 </script>
 
 <style>
-body {
-  margin: 0;
-  font-family: sans-serif;
+#sidebar a {
+  padding: 2px 10px;
+  margin-left: -10px;
 }
-* {
-  box-sizing: border-box;
-}
-a {
-  text-decoration: none;
+#sidebar a.is-active {
+  background-color: #eee;
 }
 </style>
 
 <style scoped>
-.layout {
+#page-container {
   display: flex;
   max-width: 900px;
   margin: auto;
 }
-.content {
+#page-content {
   padding: 20px;
-  border-left: 2px solid #eee;
   padding-bottom: 50px;
   min-height: 100vh;
 }
-.navigation {
+#sidebar {
   padding: 20px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
-  align-items: center;
   line-height: 1.8em;
+  border-right: 2px solid #eee;
 }
-.logo {
+#logo-container {
   margin-top: 20px;
   margin-bottom: 10px;
 }

package/boilerplate-vue/renderer/app.js

@@ -1,28 +1,49 @@
-import { createSSRApp, h } from 'vue'
+export { createApp }
+
+import { createSSRApp, defineComponent, h, markRaw, reactive } from 'vue'
 import PageShell from './PageShell.vue'
 import { setPageContext } from './usePageContext'
 
-export { createApp }
+function createApp(pageContext) {
+  const { Page } = pageContext
 
-function createApp(Page, pageProps, pageContext) {
-  const PageWithLayout = {
+  let rootComponent
+  const PageWithShell = defineComponent({
+    data: () => ({
+      Page: markRaw(Page)
+    }),
+    created() {
+      rootComponent = this
+    },
     render() {
       return h(
         PageShell,
         {},
         {
-          default() {
-            return h(Page, pageProps || {})
+          default: () => {
+            return h(this.Page)
           }
         }
       )
     }
-  }
+  })
+
+  const app = createSSRApp(PageWithShell)
+
+  // We use `app.changePage()` to do Client Routing, see `+onRenderClient.ts`
+  Object.assign(app, {
+    changePage: (pageContext) => {
+      Object.assign(pageContextReactive, pageContext)
+      rootComponent.Page = markRaw(pageContext.Page)
+    }
+  })
 
-  const app = createSSRApp(PageWithLayout)
+  // When doing Client Routing, we mutate pageContext (see usage of `app.changePage()` in `+onRenderClient.ts`).
+  // We therefore use a reactive pageContext.
+  const pageContextReactive = reactive(pageContext)
 
-  // We make pageContext available from any Vue component
-  setPageContext(app, pageContext)
+  // Make pageContext available from any Vue component
+  setPageContext(app, pageContextReactive)
 
   return app
 }

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

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

package/boilerplate-vue/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-vue/renderer/css/links.css

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

package/boilerplate-vue/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-vue/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-vue/renderer/css/reset.css

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

package/boilerplate-vue/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-vue/renderer/useData.js

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

package/boilerplate-vue/renderer/usePageContext.js

@@ -1,15 +1,15 @@
-// `usePageContext` allows us to access `pageContext` in any Vue component.
-// See https://vike.dev/pageContext-anywhere
-
-import { inject } from 'vue'
-
+// https://vike.dev/usePageContext
 export { usePageContext }
 export { setPageContext }
 
+import { inject } from 'vue'
+
 const key = Symbol()
 
+/** https://vike.dev/usePageContext */
 function usePageContext() {
   const pageContext = inject(key)
+  if (!pageContext) throw new Error('setPageContext() not called in parent')
   return pageContext
 }
 

package/boilerplate-vue/server/index.js

@@ -55,6 +55,9 @@ async function startServer() {
       urlOriginal: req.originalUrl
     }
     const pageContext = await renderPage(pageContextInit)
+    if (pageContext.errorWhileRendering) {
+      // Install error tracking here, see https://vike.dev/errors
+    }
     const { httpResponse } = pageContext
     if (!httpResponse) {
       return next()

package/boilerplate-vue-ts/package.json

@@ -17,11 +17,12 @@
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
     "express": "^4.18.2",
+    "node-fetch": "^3.3.2",
     "sirv": "^2.0.3",
     "ts-node": "^10.9.1",
     "typescript": "^5.3.3",
+    "vike": "^0.4.157",
     "vite": "^5.0.10",
-    "vike": "^0.4.156",
     "vue": "^3.3.10"
   },
   "type": "module"

package/boilerplate-vue-ts/pages/_error/+Page.vue

@@ -1,14 +1,25 @@
 <template>
-  <div v-if="is404">
-    <h1>404 Page Not Found</h1>
-    <p>This page could not be found.</p>
-  </div>
-  <div v-else>
-    <h1>500 Internal Error</h1>
-    <p>Something went wrong.</p>
+  <div class="center">
+    <p>{{ abortReason }}</p>
   </div>
 </template>
 
 <script lang="ts" setup>
-defineProps(['is404'])
+import { usePageContext } from '../../renderer/usePageContext'
+
+const pageContext = usePageContext()
+let { is404, abortReason } = pageContext
+if (!abortReason) {
+  abortReason = is404 ? 'Page not found.' : 'Something went wrong.'
+}
 </script>
+
+<style>
+.center {
+  height: calc(100vh - 100px);
+  display: flex;
+  font-size: 1.3em;
+  justify-content: center;
+  align-items: center;
+}
+</style>

package/boilerplate-vue-ts/pages/star-wars/@id/+Page.vue

@@ -0,0 +1,14 @@
+<template>
+  <h1>{{ data.movie.title }}</h1>
+  Release Date: {{ data.movie.release_date }}
+  <br />
+  Director: {{ data.movie.director }}
+  <br />
+  Producer: {{ data.movie.producer }}
+</template>
+
+<script lang="ts" setup>
+import type { Data } from './+data'
+import { useData } from '../../../renderer/useData'
+const data = useData<Data>()
+</script>

package/boilerplate-vue-ts/pages/star-wars/@id/+data.ts

@@ -0,0 +1,36 @@
+// https://vike.dev/data
+export { data }
+export type Data = Awaited<ReturnType<typeof 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'
+import type { MovieDetails } from '../types'
+import type { PageContextServer } from 'vike/types'
+
+const data = async (pageContext: PageContextServer) => {
+  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()) as MovieDetails
+
+  // 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: MovieDetails & Record<string, unknown>): MovieDetails {
+  const { id, title, release_date, director, producer } = movie
+  movie = { id, title, release_date, director, producer }
+  return movie
+}
+
+function sleep(milliseconds: number) {
+  return new Promise((r) => setTimeout(r, milliseconds))
+}

package/boilerplate-vue-ts/pages/star-wars/index/+Page.vue

@@ -0,0 +1,16 @@
+<template>
+  <h1>Star Wars Movies</h1>
+  <ol>
+    <li v-for="item in data.movies" :key="item.id">
+      <a :href="'/star-wars/' + item.id">{{ item.title }}</a> ({{ item.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>
+</template>
+
+<script lang="ts" setup>
+import type { Data } from './+data'
+import { useData } from '../../../renderer/useData'
+const data = useData<Data>()
+</script>