feat: new [components <Head> and <Config>](https://vike.dev/useCo…

…nfig#config-head) (#104)
vikejs · Aug 9, 2024 · ed1c070 · ed1c070
1 parent 4c52c6d
commit ed1c070
Show file tree

Hide file tree

Showing 14 changed files with 200 additions and 67 deletions.
diff --git a/examples/full/.testRun.ts b/examples/full/.testRun.ts
@@ -2,6 +2,7 @@ export { testRun };
 
 import { test, expect, run, fetchHtml, page, getServerUrl, autoRetry, partRegex } from "@brillout/test-e2e";
 import assert from "node:assert";
+const dataHk = partRegex`data-hk="${/[0-9-]+/}"`;
 
 let isProd: boolean;
 
@@ -15,13 +16,15 @@ function testRun(cmd: `pnpm run ${"dev" | "preview"}`) {
     title: "My Vike + Solid App",
     text: "Rendered to HTML.",
     counter: true,
+    image: true,
   });
 
   testUrl({
     url: "/star-wars",
     title: "6 Star Wars Movies",
     description: "All the 6 movies from the Star Wars franchise",
     text: "A New Hope",
+    image: true,
   });
 
   testUrl({
@@ -41,6 +44,8 @@ function testRun(cmd: `pnpm run ${"dev" | "preview"}`) {
   });
 
   testNavigationBetweenWithSSRAndWithoutSSR();
+
+  testUseConfig();
 }
 
 function testNavigationBetweenWithSSRAndWithoutSSR() {
@@ -91,27 +96,33 @@ function testUrl({
   text,
   counter,
   noSSR,
+  image,
 }: {
   url: string;
   title: string;
   description?: string;
   text: string;
   counter?: true;
   noSSR?: true;
+  image?: true;
 }) {
   test(url + " (HTML)", async () => {
     const html = await fetchHtml(url);
     if (!noSSR) {
       expect(html).toContain(text);
     }
 
-    const dataHkHash = /[0-9-]+/;
-
     expect(getTitle(html)).toBe(title);
-    expect(html).toMatch(partRegex`<link data-hk="${dataHkHash}" rel="icon" href="${getAssetUrl("logo.svg")}">`);
+    expect(html).toMatch(partRegex`<link ${dataHk} rel="icon" href="${getAssetUrl("logo.svg")}">`);
 
     if (!description) description = "Demo showcasing Vike + Solid";
     expect(html).toMatch(partRegex`<meta name="description" content="${description}">`);
+
+    if (image) {
+      expect(html).toMatch(partRegex`<meta property="og:image" content="${getAssetUrl("logo-new.svg")}">`);
+    } else {
+      expect(html).not.toContain("og:image");
+    }
   });
   test(url + " (Hydration)", async () => {
     await page.goto(getServerUrl() + url);
@@ -123,6 +134,32 @@ function testUrl({
   });
 }
 
+function testUseConfig() {
+  test("useConfig() HTML", async () => {
+    const html = await fetchHtml("/images");
+    expect(html).toMatch(
+      partRegex`<script ${dataHk} type="application/ld+json">{"@context":"https://schema.org/","contentUrl":{"src":"${getAssetUrl(
+        "logo-new.svg",
+      )}"},"creator":{"@type":"Person","name":"brillout"}}</script>`,
+    );
+    expect(html).toMatch(
+      partRegex`<script ${dataHk} type="application/ld+json">{"@context":"https://schema.org/","contentUrl":{"src":"${getAssetUrl(
+        "logo.svg",
+      )}"},"creator":{"@type":"Person","name":"Romuald Brillout"}}</script>`,
+    );
+  });
+  test("useConfig() hydration", async () => {
+    await page.goto(getServerUrl() + "/");
+    await testCounter();
+    ensureWasClientSideRouted("/pages/index");
+    await page.click('a:has-text("useConfig()")');
+    await testCounter();
+    ensureWasClientSideRouted("/pages/index");
+    await page.goto(getServerUrl() + "/images");
+    await testCounter();
+  });
+}
+
 function getTitle(html: string) {
   const title = html.match(/<title>(.*?)<\/title>/i)?.[1];
   return title;

diff --git a/examples/full/pages/+Layout.tsx b/examples/full/pages/+Layout.tsx
@@ -19,6 +19,7 @@ export function Layout(props: { children?: JSX.Element }) {
         <Link href="/without-ssr">Without SSR</Link>
         <Link href="/starship">Nested Layout 1</Link>
         <Link href="/stardust">Nested Layout 2</Link>
+        <Link href="/images">useConfig()</Link>
       </Sidebar>
       <Content>{props.children}</Content>
     </div>

diff --git a/examples/full/pages/images/+Page.tsx b/examples/full/pages/images/+Page.tsx
@@ -0,0 +1,47 @@
+export { Page };
+
+import { Head } from "vike-solid/Head";
+import logoOld from "../../assets/logo.svg";
+import logoNew from "../../assets/logo-new.svg";
+import { Counter } from "../../components/Counter";
+
+function Page() {
+  return (
+    <>
+      <p>
+        Page showcasing an <code>&lt;Image&gt;</code> component that adds/teleports structured data (
+        <code>&lt;script type="application/ld+json"&gt;</code>) to <code>&lt;head&gt;</code>, see HTML.
+      </p>
+      <div>
+        New logo: <Image src={logoNew} author="brillout" />
+      </div>
+      <br />
+      <div>
+        Old logo: <Image src={logoOld} author="Romuald Brillout" />
+      </div>
+      <br />
+      <Counter />
+    </>
+  );
+}
+
+function Image({ src, author }: { src: string; author: string }) {
+  return (
+    <>
+      <img src={src} height={48} style={{ "vertical-align": "middle", "margin-left": "10px" }} />
+      <Head>
+        <script
+          type="application/ld+json"
+          innerHTML={JSON.stringify({
+            "@context": "https://schema.org/",
+            contentUrl: { src },
+            creator: {
+              "@type": "Person",
+              name: author,
+            },
+          })}
+        ></script>
+      </Head>
+    </>
+  );
+}
diff --git a/examples/full/pages/index/+Page.tsx b/examples/full/pages/index/+Page.tsx
@@ -1,4 +1,8 @@
+export { Page };
+
 import { clientOnly } from "vike-solid/clientOnly";
+import { Config } from "vike-solid/Config";
+import image from "../../assets/logo-new.svg";
 
 const ClientOnlyCounter = clientOnly(() => import("./Counter"));
 const ClientOnlyCounterSlow = clientOnly(async () => {
@@ -8,9 +12,10 @@ const ClientOnlyCounterSlow = clientOnly(async () => {
   return import("./Counter");
 });
 
-export default function Page() {
+function Page() {
   return (
     <>
+      <Config image={image}></Config>
       <h1>My Vike + Solid App</h1>
       This page is:
       <ul>

diff --git a/examples/full/pages/star-wars/index/+data.ts b/examples/full/pages/star-wars/index/+data.ts
@@ -3,14 +3,27 @@ export { data };
 export type Data = Awaited<ReturnType<typeof data>>;
 
 import fetch from "node-fetch";
+import { useConfig } from "vike-solid/useConfig";
 import type { Movie, MovieDetails } from "../types.js";
+import image from "../../../assets/logo-new.svg";
 
 const data = async () => {
+  const config = useConfig();
+
   const response = await fetch("https://brillout.github.io/star-wars/api/films.json");
   const moviesData = (await response.json()) as MovieDetails[];
+
+  const n = moviesData.length;
+  config({
+    title: `${n} Star Wars Movies`, // <title>
+    description: `All the ${n} movies from the Star Wars franchise`, // <meta name="description">
+    image, // <meta property="og:image">
+  });
+
   // 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/examples/full/pages/star-wars/index/+description.ts b/examples/full/pages/star-wars/index/+description.ts
diff --git a/examples/full/pages/star-wars/index/+title.ts b/examples/full/pages/star-wars/index/+title.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/vike-solid/components/Config/Config-client.ts b/vike-solid/components/Config/Config-client.ts
@@ -0,0 +1,17 @@
+export { Config };
+
+// Same as ./Config-server.ts but importing useConfig-client.js
+
+import { useConfig } from "../../hooks/useConfig/useConfig-client.js";
+import type { ConfigFromHook } from "../../types/Config.js";
+
+/**
+ * Set configurations inside React components.
+ *
+ * https://vike.dev/useConfig
+ */
+function Config(props: ConfigFromHook): null {
+  const config = useConfig();
+  config(props);
+  return null;
+}
diff --git a/vike-solid/components/Config/Config-server.ts b/vike-solid/components/Config/Config-server.ts
@@ -0,0 +1,17 @@
+export { Config };
+
+// Same as ./Config-client.ts but importing useConfig-server.js
+
+import { useConfig } from "../../hooks/useConfig/useConfig-server.js";
+import type { ConfigFromHook } from "../../types/Config.js";
+
+/**
+ * Set configurations inside React components.
+ *
+ * https://vike.dev/useConfig
+ */
+function Config(props: ConfigFromHook): null {
+  const config = useConfig();
+  config(props);
+  return null;
+}