fix: replace +title with useConfig()

vikejs · Sep 16, 2024 · 424abb4 · 424abb4
1 parent 6d6c5a3
commit 424abb4
Show file tree

Hide file tree

Showing 15 changed files with 69 additions and 81 deletions.
diff --git a/boilerplates/react/files/pages/star-wars/@id/+data.ts b/boilerplates/react/files/pages/star-wars/@id/+data.ts
@@ -2,15 +2,26 @@
 
 import type { PageContextServer } from "vike/types";
 import type { MovieDetails } from "../types.js";
+import { useConfig } from "vike-react/useConfig";
 
 export type Data = Awaited<ReturnType<typeof data>>;
 
 export const data = async (pageContext: PageContextServer) => {
+  // https://vike.dev/useConfig
+  const config = useConfig();
+
   const response = await fetch(`https://brillout.github.io/star-wars/api/films/${pageContext.routeParams.id}.json`);
   let movie = (await response.json()) as MovieDetails;
+
+  config({
+    // Set <title>
+    title: movie.title
+  });
+
   // 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;
 };
 

diff --git a/boilerplates/react/files/pages/star-wars/@id/+title.ts b/boilerplates/react/files/pages/star-wars/@id/+title.ts
diff --git a/boilerplates/react/files/pages/star-wars/index/+data.ts b/boilerplates/react/files/pages/star-wars/index/+data.ts
@@ -1,15 +1,26 @@
 // https://vike.dev/data
 
 import type { Movie, MovieDetails } from "../types.js";
+import { useConfig } from "vike-react/useConfig";
 
 export type Data = Awaited<ReturnType<typeof data>>;
 
 export const data = async () => {
+  // https://vike.dev/useConfig
+  const config = useConfig();
+
   const response = await fetch("https://brillout.github.io/star-wars/api/films.json");
   const moviesData = (await response.json()) as MovieDetails[];
+
+  config({
+    // Set <title>
+    title: `${moviesData.length} Star Wars Movies`
+  });
+
   // 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;
 };
 

diff --git a/boilerplates/react/files/pages/star-wars/index/+title.ts b/boilerplates/react/files/pages/star-wars/index/+title.ts
diff --git a/boilerplates/react/package.json b/boilerplates/react/package.json
@@ -78,18 +78,12 @@
     "./pages/star-wars/@id/+Page": {
       "types": "./dist/types/pages/star-wars/@id/+Page.d.ts"
     },
-    "./pages/star-wars/@id/+title": {
-      "types": "./dist/types/pages/star-wars/@id/+title.d.ts"
-    },
     "./pages/star-wars/index/+data": {
       "types": "./dist/types/pages/star-wars/index/+data.d.ts"
     },
     "./pages/star-wars/index/+Page": {
       "types": "./dist/types/pages/star-wars/index/+Page.d.ts"
     },
-    "./pages/star-wars/index/+title": {
-      "types": "./dist/types/pages/star-wars/index/+title.d.ts"
-    },
     "./pages/todo/TodoList": {
       "types": "./dist/types/pages/todo/TodoList.d.ts"
     },
@@ -135,18 +129,12 @@
       "pages/star-wars/@id/+Page": [
         "./dist/types/pages/star-wars/@id/+Page.d.ts"
       ],
-      "pages/star-wars/@id/+title": [
-        "./dist/types/pages/star-wars/@id/+title.d.ts"
-      ],
       "pages/star-wars/index/+data": [
         "./dist/types/pages/star-wars/index/+data.d.ts"
       ],
       "pages/star-wars/index/+Page": [
         "./dist/types/pages/star-wars/index/+Page.d.ts"
       ],
-      "pages/star-wars/index/+title": [
-        "./dist/types/pages/star-wars/index/+title.d.ts"
-      ],
       "pages/todo/TodoList": [
         "./dist/types/pages/todo/TodoList.d.ts"
       ],
@@ -155,4 +143,4 @@
       ]
     }
   }
-}
+}
diff --git a/boilerplates/solid/files/pages/star-wars/@id/+data.ts b/boilerplates/solid/files/pages/star-wars/@id/+data.ts
@@ -2,15 +2,26 @@
 
 import type { PageContextServer } from "vike/types";
 import type { MovieDetails } from "../types.js";
+import { useConfig } from "vike-solid/useConfig";
 
 export type Data = Awaited<ReturnType<typeof data>>;
 
 export const data = async (pageContext: PageContextServer) => {
+  // https://vike.dev/useConfig
+  const config = useConfig();
+
   const response = await fetch(`https://brillout.github.io/star-wars/api/films/${pageContext.routeParams.id}.json`);
   let movie = (await response.json()) as MovieDetails;
+
+  config({
+    // Set <title>
+    title: movie.title
+  });
+
   // 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;
 };
 

diff --git a/boilerplates/solid/files/pages/star-wars/@id/+title.ts b/boilerplates/solid/files/pages/star-wars/@id/+title.ts
diff --git a/boilerplates/solid/files/pages/star-wars/index/+data.ts b/boilerplates/solid/files/pages/star-wars/index/+data.ts
@@ -1,15 +1,26 @@
 // https://vike.dev/data
 
 import type { Movie, MovieDetails } from "../types.js";
+import { useConfig } from "vike-solid/useConfig";
 
 export type Data = Awaited<ReturnType<typeof data>>;
 
 export const data = async () => {
+  // https://vike.dev/useConfig
+  const config = useConfig();
+
   const response = await fetch("https://brillout.github.io/star-wars/api/films.json");
   const moviesData = (await response.json()) as MovieDetails[];
+
+  config({
+    // Set <title>
+    title: `${moviesData.length} Star Wars Movies`
+  });
+
   // 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;
 };
 

diff --git a/boilerplates/solid/files/pages/star-wars/index/+title.ts b/boilerplates/solid/files/pages/star-wars/index/+title.ts
diff --git a/boilerplates/solid/package.json b/boilerplates/solid/package.json
@@ -70,18 +70,12 @@
     "./pages/star-wars/@id/+Page": {
       "types": "./dist/types/pages/star-wars/@id/+Page.d.ts"
     },
-    "./pages/star-wars/@id/+title": {
-      "types": "./dist/types/pages/star-wars/@id/+title.d.ts"
-    },
     "./pages/star-wars/index/+data": {
       "types": "./dist/types/pages/star-wars/index/+data.d.ts"
     },
     "./pages/star-wars/index/+Page": {
       "types": "./dist/types/pages/star-wars/index/+Page.d.ts"
     },
-    "./pages/star-wars/index/+title": {
-      "types": "./dist/types/pages/star-wars/index/+title.d.ts"
-    },
     "./pages/todo/TodoList": {
       "types": "./dist/types/pages/todo/TodoList.d.ts"
     },
@@ -127,18 +121,12 @@
       "pages/star-wars/@id/+Page": [
         "./dist/types/pages/star-wars/@id/+Page.d.ts"
       ],
-      "pages/star-wars/@id/+title": [
-        "./dist/types/pages/star-wars/@id/+title.d.ts"
-      ],
       "pages/star-wars/index/+data": [
         "./dist/types/pages/star-wars/index/+data.d.ts"
       ],
       "pages/star-wars/index/+Page": [
         "./dist/types/pages/star-wars/index/+Page.d.ts"
       ],
-      "pages/star-wars/index/+title": [
-        "./dist/types/pages/star-wars/index/+title.d.ts"
-      ],
       "pages/todo/TodoList": [
         "./dist/types/pages/todo/TodoList.d.ts"
       ],
@@ -147,4 +135,4 @@
       ]
     }
   }
-}
+}
diff --git a/boilerplates/vue/files/pages/star-wars/@id/+data.ts b/boilerplates/vue/files/pages/star-wars/@id/+data.ts
@@ -2,15 +2,26 @@
 
 import type { PageContextServer } from "vike/types";
 import type { MovieDetails } from "../types.js";
+import { useConfig } from "vike-vue/useConfig";
 
 export type Data = Awaited<ReturnType<typeof data>>;
 
 export const data = async (pageContext: PageContextServer) => {
+  // https://vike.dev/useConfig
+  const config = useConfig();
+
   const response = await fetch(`https://brillout.github.io/star-wars/api/films/${pageContext.routeParams.id}.json`);
   let movie = (await response.json()) as MovieDetails;
+
+  config({
+    // Set <title>
+    title: movie.title
+  });
+
   // 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;
 };
 

diff --git a/boilerplates/vue/files/pages/star-wars/@id/+title.ts b/boilerplates/vue/files/pages/star-wars/@id/+title.ts
diff --git a/boilerplates/vue/files/pages/star-wars/index/+data.ts b/boilerplates/vue/files/pages/star-wars/index/+data.ts
@@ -1,15 +1,26 @@
 // https://vike.dev/data
 
 import type { Movie, MovieDetails } from "../types.js";
+import { useConfig } from "vike-vue/useConfig";
 
 export type Data = Awaited<ReturnType<typeof data>>;
 
 export const data = async () => {
+  // https://vike.dev/useConfig
+  const config = useConfig();
+
   const response = await fetch("https://brillout.github.io/star-wars/api/films.json");
   const moviesData = (await response.json()) as MovieDetails[];
+
+  config({
+    // Set <title>
+    title: `${moviesData.length} Star Wars Movies`
+  });
+
   // 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 { data: movies };
 };
 

diff --git a/boilerplates/vue/files/pages/star-wars/index/+title.ts b/boilerplates/vue/files/pages/star-wars/index/+title.ts
diff --git a/boilerplates/vue/package.json b/boilerplates/vue/package.json
@@ -56,14 +56,8 @@
     "./pages/star-wars/@id/+data": {
       "types": "./dist/types/pages/star-wars/@id/+data.d.ts"
     },
-    "./pages/star-wars/@id/+title": {
-      "types": "./dist/types/pages/star-wars/@id/+title.d.ts"
-    },
     "./pages/star-wars/index/+data": {
       "types": "./dist/types/pages/star-wars/index/+data.d.ts"
-    },
-    "./pages/star-wars/index/+title": {
-      "types": "./dist/types/pages/star-wars/index/+title.d.ts"
     }
   },
   "typesVersions": {
@@ -86,15 +80,9 @@
       "pages/star-wars/@id/+data": [
         "./dist/types/pages/star-wars/@id/+data.d.ts"
       ],
-      "pages/star-wars/@id/+title": [
-        "./dist/types/pages/star-wars/@id/+title.d.ts"
-      ],
       "pages/star-wars/index/+data": [
         "./dist/types/pages/star-wars/index/+data.d.ts"
-      ],
-      "pages/star-wars/index/+title": [
-        "./dist/types/pages/star-wars/index/+title.d.ts"
       ]
     }
   }
-}
+}