fix: simplify <head> management

BREAKING CHANGE: Fetching data using `pageContext.pageProps` is deprecated, use `data()` and `useData()` instead, see https://vike.dev/data-fetching BREAKING CHANGE: Setting the page's title using `pageContext.title` is deprecated (`pageContext.description` and `pageContext.lang` are also deprecated), use the settings `title` and `Head` instead, see https://vike.dev/head
HillwoodPark · Jan 22, 2024 · 39aa1a9 · 39aa1a9
1 parent 45fa236
commit 39aa1a9
Show file tree

Hide file tree

Showing 66 changed files with 195 additions and 903 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -13,7 +13,6 @@ jobs:
         os: [ubuntu-latest, windows-latest, macos-latest]
         example:
           - examples/basic
-          - examples/onBeforeRender
           - examples/ssr-spa
           - examples/with-vue-plugin
           - examples/with-vike-pinia

diff --git a/examples/basic/layouts/HeadDefault.vue b/examples/basic/layouts/HeadDefault.vue
@@ -1,3 +1,9 @@
 <template>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="Demo showcasing Vike + Vue" />
+  <link rel="icon" :href="logoUrl" />
 </template>
+
+<script lang="ts" setup>
+import logoUrl from '../assets/logo.svg'
+</script>
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -9,13 +9,12 @@
     "@types/node": "^20.11.1",
     "@types/node-fetch": "^2.6.10",
     "@vitejs/plugin-vue": "^5.0.3",
-    "cross-fetch": "^4.0.0",
     "node-fetch": "^3.3.2",
     "typescript": "^5.3.3",
     "vike-vue": "0.5.4",
     "vite": "^5.0.11",
     "unplugin-vue-markdown": "^0.25.2",
-    "vike": "0.4.156",
+    "vike": "0.4.159",
     "vue": "^3.4.13"
   },
   "type": "module"

diff --git a/examples/basic/pages/+config.h.ts b/examples/basic/pages/+config.h.ts
@@ -1,5 +1,4 @@
 import type { Config } from 'vike/types'
-import logoUrl from '../assets/logo.svg'
 import Layout from '../layouts/LayoutDefault.vue'
 import Head from '../layouts/HeadDefault.vue'
 import vikeVue from 'vike-vue'
@@ -10,9 +9,5 @@ export default {
   Head,
   // <title>
   title: 'My Vike + Vue App',
-  // <meta name="description">
-  description: 'Demo showcasing Vike + Vue',
-  // <link rel="icon" href="${favicon}" />
-  favicon: logoUrl,
   extends: vikeVue
 } satisfies Config
diff --git a/examples/basic/pages/star-wars/filterMovieData.ts b/examples/basic/pages/star-wars/filterMovieData.ts
diff --git a/examples/basic/pages/star-wars/index/+Page.vue b/examples/basic/pages/star-wars/index/+Page.vue
@@ -1,16 +1,16 @@
 <template>
   <h1>Star Wars Movies</h1>
   <ol>
-    <li v-for="item in data.movies" :key="item.id">
+    <li v-for="item in movies" :key="item.id">
       <a :href="'/star-wars/' + item.id">{{ item.title }}</a> ({{ item.release_date }})
     </li>
   </ol>
-  <p>Source: <a href="https://star-wars.brillout.com">star-wars.brillout.com</a>.</p>
+  <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 'vike-vue/useData'
-const data = useData<Data>()
+const movies = useData<Data>()
 </script>
diff --git a/examples/basic/pages/star-wars/index/+data.ts b/examples/basic/pages/star-wars/index/+data.ts
@@ -1,18 +1,22 @@
 // https://vike.dev/data
 export { data }
-export type { Data }
+export type Data = Awaited<ReturnType<typeof data>>
 
-import { fetchStarWarsMovies, filterMoviesData, getTitle } from './data'
-
-type Data = Awaited<ReturnType<typeof data>>
+import fetch from 'node-fetch'
+import type { Movie, MovieDetails } from '../types'
 
 const data = async () => {
-  const movies = await fetchStarWarsMovies()
-  return {
-    // We remove data we don't need because the data is passed to the client; we should
-    // minimize what is sent over the network.
-    movies: filterMoviesData(movies),
-    // The page's <title>
-    title: getTitle(movies)
-  }
+  const response = await fetch('https://brillout.github.io/star-wars/api/films.json')
+  const moviesData = (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.
+  const movies = minimize(moviesData)
+  return movies
+}
+
+function minimize(movies: MovieDetails[]): Movie[] {
+  return movies.map((movie) => {
+    const { title, release_date, id } = movie
+    return { title, release_date, id }
+  })
 }
diff --git a/examples/basic/pages/star-wars/index/+onBeforePrerenderStart.ts b/examples/basic/pages/star-wars/index/+onBeforePrerenderStart.ts
diff --git a/examples/basic/pages/star-wars/index/+title.ts b/examples/basic/pages/star-wars/index/+title.ts
@@ -0,0 +1,9 @@
+export { title }
+
+import type { Data } from './+data'
+import type { PageContext } from 'vike/types'
+
+function title(pageContext: PageContext<Data>) {
+  const movies = pageContext.data
+  return `${movies.length} Star Wars Movies`
+}
diff --git a/examples/basic/pages/star-wars/index/data.ts b/examples/basic/pages/star-wars/index/data.ts
diff --git a/examples/basic/pages/star-wars/movie/+Page.vue b/examples/basic/pages/star-wars/movie/+Page.vue
@@ -1,14 +1,14 @@
 <template>
-  <h1>{{ data.movie.title }}</h1>
-  Release Date: {{ data.movie.release_date }}
+  <h1>{{ movie.title }}</h1>
+  Release Date: {{ movie.release_date }}
   <br />
-  Director: {{ data.movie.director }}
+  Director: {{ movie.director }}
   <br />
-  Producer: {{ data.movie.producer }}
+  Producer: {{ movie.producer }}
 </template>
 
 <script lang="ts" setup>
 import type { Data } from './+data'
 import { useData } from 'vike-vue/useData'
-const data = useData<Data>()
+const movie = useData<Data>()
 </script>
diff --git a/examples/basic/pages/star-wars/movie/+data.ts b/examples/basic/pages/star-wars/movie/+data.ts
@@ -1,28 +1,24 @@
 // https://vike.dev/data
 export { data }
-export type { Data }
+export type Data = Awaited<ReturnType<typeof data>>
 
-import fetch from 'cross-fetch'
+import fetch from 'node-fetch'
 import type { PageContextServer } from 'vike/types'
-import { filterMovieData } from '../filterMovieData'
 import type { MovieDetails } from '../types'
 
-type Data = Awaited<ReturnType<typeof data>>
-
 const data = async (pageContext: PageContextServer) => {
-  const response = await fetch(`https://star-wars.brillout.com/api/films/${pageContext.routeParams?.movieId}.json`)
+  const response = await fetch(
+    `https://brillout.github.io/star-wars/api/films/${pageContext.routeParams?.movieId}.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 = filterMovieData(movie)
-
-  // The page's <title>
-  const { title } = movie
+  movie = minimize(movie)
+  return movie
+}
 
-  return {
-    movie,
-    // The page's <title>
-    title
-  }
+function minimize(movie: MovieDetails): MovieDetails {
+  const { id, title, release_date, director, producer } = movie
+  movie = { id, title, release_date, director, producer }
+  return movie
 }
diff --git a/examples/basic/pages/star-wars/movie/+title.ts b/examples/basic/pages/star-wars/movie/+title.ts
@@ -0,0 +1,9 @@
+export { title }
+
+import type { Data } from './+data'
+import type { PageContext } from 'vike/types'
+
+function title(pageContext: PageContext<Data>) {
+  const movie = pageContext.data
+  return movie.title
+}
diff --git a/examples/basic/pages/star-wars/types.ts b/examples/basic/pages/star-wars/types.ts
@@ -3,10 +3,7 @@ export type Movie = {
   title: string
   release_date: string
 }
-export type MovieDetails = {
-  id: string
-  title: string
-  release_date: string
+export type MovieDetails = Movie & {
   director: string
   producer: string
 }
diff --git a/examples/basic/vite.config.ts b/examples/basic/vite.config.ts
@@ -5,13 +5,12 @@ import { UserConfig } from 'vite'
 
 const config: UserConfig = {
   plugins: [
-    vike({ prerender: true }),
+    vike(),
     vue({
       include: [/\.vue$/, /\.md$/]
     }),
     md({})
-  ],
-  optimizeDeps: { include: ['cross-fetch'] }
+  ]
 }
 
 export default config
diff --git a/examples/onBeforeRender/.gitignore b/examples/onBeforeRender/.gitignore
diff --git a/examples/onBeforeRender/assets/logo.svg b/examples/onBeforeRender/assets/logo.svg
diff --git a/examples/onBeforeRender/components/Counter.vue b/examples/onBeforeRender/components/Counter.vue
diff --git a/examples/onBeforeRender/components/Link.vue b/examples/onBeforeRender/components/Link.vue
diff --git a/examples/onBeforeRender/layouts/HeadDefault.vue b/examples/onBeforeRender/layouts/HeadDefault.vue