Merge pull request #54 from vikejs/aurelien/bugfix/head-management

fix: simplify `<head>` management
vikejs · Jan 24, 2024 · 075ca14 · 075ca14
2 parents eafea55 + 1c8ea4a
commit 075ca14
Show file tree

Hide file tree

Showing 46 changed files with 159 additions and 876 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
 
     steps:

diff --git a/examples/basic/README.md b/examples/basic/README.md
@@ -12,7 +12,3 @@ cd vike-solid/examples/basic/
 pnpm install
 pnpm run dev
 ```
-
-> **NOTE:** for now `pnpm` is required because of the `workspace:` specifier in
-> `package.json`. With this, the example makes use of the local `vike-solid`
-> implementation instead of the downloading it from npm.
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -7,11 +7,10 @@
     "test": "tsc --noEmit"
   },
   "dependencies": {
-    "cross-fetch": "^3.1.8",
     "node-fetch": "^3.3.2",
     "solid-js": "^1.7.11",
     "vike-solid": "^0.2.9",
-    "vike": "^0.4.148"
+    "vike": "^0.4.159"
   },
   "devDependencies": {
     "typescript": "^5.1.6"

diff --git a/examples/basic/pages/+Head.tsx b/examples/basic/pages/+Head.tsx
@@ -5,6 +5,7 @@ import logoUrl from "../assets/logo.svg";
 export function Head() {
   return (
     <>
+      <meta name="description" content="Demo showcasing Vike + Solid" />
       <link rel="icon" href={logoUrl} />
     </>
   );

diff --git a/examples/basic/pages/+config.h.ts b/examples/basic/pages/+config.h.ts
@@ -5,7 +5,5 @@ import vikeSolid from "vike-solid";
 export default {
   // <title>
   title: "My Vike Solid App",
-  // <meta name="description">
-  description: "Demo showcasing vike-solid",
   extends: vikeSolid,
 } satisfies Config;
diff --git a/examples/basic/pages/star-wars/@id/+Page.tsx b/examples/basic/pages/star-wars/@id/+Page.tsx
@@ -2,7 +2,7 @@ import type { Data } from "./+data";
 import { useData } from "vike-solid/useData";
 
 export default function Page() {
-  const { movie } = useData<Data>();
+  const movie = useData<Data>();
   return (
     <>
       <h1>{movie.title}</h1>

diff --git a/examples/basic/pages/star-wars/@id/+data.ts b/examples/basic/pages/star-wars/@id/+data.ts
@@ -1,29 +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?.id}.json`
+    `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 we pass `pageContext.movie` to
   // the client; we want to minimize what is sent over the network.
-  movie = filterMovieData(movie);
-
-  const { title } = movie;
-
-  return {
-    movie,
-    // The page's <title>
-    title,
-  };
+  movie = minimize(movie);
+  return movie;
 };
+
+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/@id/+title.ts b/examples/basic/pages/star-wars/@id/+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/filterMovieData.ts b/examples/basic/pages/star-wars/filterMovieData.ts
diff --git a/examples/basic/pages/star-wars/index/+Page.tsx b/examples/basic/pages/star-wars/index/+Page.tsx
@@ -3,7 +3,7 @@ import type { Data } from "./+data";
 import { useData } from "vike-solid/useData";
 
 export default function Page() {
-  const { movies } = useData<Data>();
+  const movies = useData<Data>();
   return (
     <>
       <h1>Star Wars Movies</h1>
@@ -19,7 +19,10 @@ export default function Page() {
       </ol>
       <p>
         Source:{" "}
-        <a href="https://star-wars.brillout.com">star-wars.brillout.com</a>.
+        <a href="https://brillout.github.io/star-wars">
+          brillout.github.io/star-wars
+        </a>
+        .
       </p>
     </>
   );

diff --git a/examples/basic/pages/star-wars/index/+data.ts b/examples/basic/pages/star-wars/index/+data.ts
@@ -1,80 +1,24 @@
 // https://vike.dev/data
 export { data };
-export type { Data };
+export type Data = Awaited<ReturnType<typeof data>>;
 
 import fetch from "node-fetch";
-//import { filterMovieData } from '../filterMovieData'
 import type { Movie, MovieDetails } from "../types";
 
-// export { onBeforePrerenderStart }
-
-type Data = Awaited<ReturnType<typeof data>>;
-
 const data = async () => {
-  const movies = await getStarWarsMovies();
-  return {
-    // We remove data we don't need because we pass `pageContext.movies` to
-    // the client; we want to minimize what is sent over the network.
-    movies: filterMoviesData(movies),
-    // The page's <title>
-    title: getTitle(movies),
-  };
-};
-
-async function getStarWarsMovies(): Promise<MovieDetails[]> {
-  const response = await fetch("https://star-wars.brillout.com/api/films.json");
-  let movies: MovieDetails[] = ((await response.json()) as any).results;
-  movies = movies.map((movie: MovieDetails, i: number) => ({
-    ...movie,
-    id: String(i + 1),
-  }));
+  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 filterMoviesData(movies: MovieDetails[]): Movie[] {
-  return movies.map((movie: MovieDetails) => {
+function minimize(movies: MovieDetails[]): Movie[] {
+  return movies.map((movie) => {
     const { title, release_date, id } = movie;
     return { title, release_date, id };
   });
 }
-
-/*
-async function onBeforePrerenderStart() {
-  const movies = await getStarWarsMovies()
-  return [
-    {
-      url: '/star-wars',
-      // We already provide `pageContext` here so that vike-solid
-      // will *not* have to call the `data()` hook defined
-      // above in this file.
-      pageContext: {
-        data: {
-          movies: filterMoviesData(movies),
-          title: getTitle(movies)
-        },
-      }
-    },
-    ...movies.map((movie) => {
-      const url = `/star-wars/${movie.id}`
-      return {
-        url,
-        // Note that we can also provide the `pageContext` of other pages.
-        // This means that vike-solid will not call any
-        // `data()` hook and the Star Wars API will be called
-        // only once (in this `onBeforePrerenderStart()` hook).
-        pageContext: {
-          data: {
-            movie: filterMovieData(movie),
-            title: movie.title
-          },
-        }
-      }
-    })
-  ]
-}
-*/
-
-function getTitle(movies: Movie[] | MovieDetails[]): string {
-  const title = `${movies.length} Star Wars Movies`;
-  return title;
-}
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/types.ts b/examples/basic/pages/star-wars/types.ts
@@ -4,10 +4,7 @@ export type Movie = {
   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/onBeforeRender/README.md b/examples/onBeforeRender/README.md
diff --git a/examples/onBeforeRender/assets/logo.svg b/examples/onBeforeRender/assets/logo.svg
diff --git a/examples/onBeforeRender/components/Link.tsx b/examples/onBeforeRender/components/Link.tsx
diff --git a/examples/onBeforeRender/layouts/LayoutDefault.tsx b/examples/onBeforeRender/layouts/LayoutDefault.tsx