diff --git a/examples/full/.testRun.ts b/examples/full/.testRun.ts
index 59deff3..31b2d69 100644
--- 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;
@@ -41,6 +42,8 @@ function testRun(cmd: `pnpm run ${"dev" | "preview"}`) {
});
testNavigationBetweenWithSSRAndWithoutSSR();
+
+ testUseConfig();
}
function testNavigationBetweenWithSSRAndWithoutSSR() {
@@ -105,10 +108,8 @@ function testUrl({
expect(html).toContain(text);
}
- const dataHkHash = /[0-9-]+/;
-
expect(getTitle(html)).toBe(title);
- expect(html).toMatch(partRegex``);
+ expect(html).toMatch(partRegex``);
if (!description) description = "Demo showcasing Vike + Solid";
expect(html).toMatch(partRegex``);
@@ -123,6 +124,32 @@ function testUrl({
});
}
+function testUseConfig() {
+ test("useConfig() HTML", async () => {
+ const html = await fetchHtml("/images");
+ expect(html).toMatch(
+ partRegex``,
+ );
+ expect(html).toMatch(
+ partRegex``,
+ );
+ });
+ 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>/i)?.[1];
return title;
diff --git a/examples/full/pages/+Layout.tsx b/examples/full/pages/+Layout.tsx
index a5f676c..150717b 100644
--- 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
new file mode 100644
index 0000000..d7cd5cc
--- /dev/null
+++ 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><Image></code> component that adds/teleports structured data (
+ <code><script type="application/ld+json"></code>) to <code><head></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>
+ </>
+ );
+}