fix(md): let layouts read the page frontmatter with React, Solid and Svelte

packages/md/src/plugin.ts

@@ -278,10 +278,13 @@ import { inject } from "vue";
 export function useFrontmatter() { return inject("__void_frontmatter", {}); }
 `;
             }
+            // React and Solid match contexts by identity. The adapter owns the
+            // context so its island renderer can provide it above the layouts.
             if (adapter === 'react') {
               return `
-import { createContext, useContext } from "react";
-export const FrontmatterContext = createContext({});
+import { useContext } from "react";
+import { FrontmatterContext } from "@void/react";
+export { FrontmatterContext };
 export function useFrontmatter() { return useContext(FrontmatterContext) ?? {}; }
 `;
             }
@@ -295,8 +298,9 @@ export function useFrontmatter() { return getContext(FRONTMATTER_KEY) ?? {}; }
             }
             if (adapter === 'solid') {
               return `
-import { createContext, useContext } from "solid-js";
-export const FrontmatterContext = createContext({});
+import { useContext } from "solid-js";
+import { FrontmatterContext } from "@void/solid";
+export { FrontmatterContext };
 export function useFrontmatter() { return useContext(FrontmatterContext) ?? {}; }
 `;
             }

packages/react/src/plugin-islands.ts

@@ -249,7 +249,7 @@ function generateIslandRenderer(
   return `
 import React from "react";
 import { renderToString } from "react-dom/server";
-import { SharedContext, ErrorsContext, ParamsContext } from "@void/react";
+import { SharedContext, ErrorsContext, ParamsContext, FrontmatterContext } from "@void/react";
 import { renderHeadToString, renderHtmlAttrs, renderBodyAttrs } from "void/pages-head";
 
 ${generateComponentManifest(scan, pagesDir)}
@@ -263,7 +263,9 @@ function escapeAttr(s) {
 }
 
 export async function renderIslandPage(pageObj, assetTags) {
-  const PageComponent = (await components[pageObj.component]()).default;
+  const __pageModule = await components[pageObj.component]();
+  const PageComponent = __pageModule.default;
+  const __frontmatter = __pageModule.frontmatter ?? {};
   const layoutIds = layoutTree[pageObj.component] || [];
   const layoutComponents = await Promise.all(
     layoutIds.map(async (id) => (await components[id]()).default)
@@ -274,7 +276,8 @@ export async function renderIslandPage(pageObj, assetTags) {
     element = React.createElement(layoutComponents[i], null, element);
   }
 
-  // No RouterContext — islands have no Void Router
+  // No RouterContext — islands have no Void Router.
+  // Frontmatter wraps the layouts so they can read the Markdown page's values.
   element = React.createElement(
     SharedContext.Provider,
     { value: pageObj.shared || {} },
@@ -284,7 +287,7 @@ export async function renderIslandPage(pageObj, assetTags) {
       React.createElement(
         ErrorsContext.Provider,
         { value: pageObj.errors || {} },
-        element
+        React.createElement(FrontmatterContext.Provider, { value: __frontmatter }, element)
       )
     )
   );

packages/react/src/runtime/context.ts

@@ -16,3 +16,8 @@ export const ParamsContext: Context<Record<string, string> | null> = createConte
 export const RouterContext: Context<VoidRouter | null> = createContext<VoidRouter | null>(null);
 export const NavigationContext: Context<NavigationState> =
   createContext<NavigationState>(idleNavigationState());
+// Island renderers provide the page's Markdown frontmatter above its layouts.
+// The `@void/md` runtime re-exports this context for `useFrontmatter()`.
+export const FrontmatterContext: Context<Record<string, unknown>> = createContext<
+  Record<string, unknown>
+>({});

packages/react/src/runtime/index.ts

@@ -13,6 +13,7 @@ export {
   ParamsContext,
   RouterContext,
   NavigationContext,
+  FrontmatterContext,
 } from './context.ts';
 export type { InferProps } from 'void';
 export type Deferred<T> = Promise<T>;

packages/react/test/integration/md-layout-frontmatter.test.ts

@@ -0,0 +1,56 @@
+// The Markdown plugin source needs its ambient module declarations in this package's typecheck.
+// eslint-disable-next-line typescript/triple-slash-reference -- env.d.ts has no exports to import.
+/// <reference path="../../../md/src/env.d.ts" />
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { createServer } from 'vite';
+import { expect, it } from 'vite-plus/test';
+import { voidMarkdown } from '../../../md/src/plugin.ts';
+import { islandsPlugin } from '../../src/plugin-islands.ts';
+
+type IslandRenderer = {
+  renderIslandPage(
+    page: { component: string; props: Record<string, unknown> },
+    assetTags: { css: string; preloads: string; body: string },
+  ): Promise<string>;
+};
+
+it('a layout reads the frontmatter of the Markdown page it wraps', async () => {
+  const root = mkdtempSync(join(import.meta.dirname, '__tmp_md_frontmatter_'));
+  const pages = join(root, 'pages');
+  mkdirSync(pages);
+  writeFileSync(
+    join(pages, 'layout.tsx'),
+    `import { useFrontmatter } from "@void/md";
+export default function Layout({ children }) {
+  return <div><p id="fm">{useFrontmatter().title}</p>{children}</div>;
+}`,
+  );
+  writeFileSync(join(pages, 'index.md'), '---\ntitle: Hello from frontmatter\n---\n\n# Body\n');
+
+  const server = await createServer({
+    root,
+    configFile: false,
+    cacheDir: join(root, '.vite'),
+    logLevel: 'silent',
+    appType: 'custom',
+    server: { middlewareMode: true, ws: false },
+    resolve: { alias: { '@void/react': join(import.meta.dirname, '../../src/runtime/index.ts') } },
+    // The Markdown plugin picks its output from the adapter's pages plugin name.
+    plugins: [...voidMarkdown(), { name: 'void-react:pages' }, ...islandsPlugin(pages)],
+  });
+  try {
+    const renderer = (await server.ssrLoadModule(
+      'virtual:void-islands-renderer',
+    )) as IslandRenderer;
+    const html = await renderer.renderIslandPage(
+      { component: 'index', props: {} },
+      { css: '', preloads: '', body: '' },
+    );
+    expect(html).toContain('<p id="fm">Hello from frontmatter</p>');
+    expect(html).toContain('Body</h1>');
+  } finally {
+    await server.close();
+    rmSync(root, { recursive: true, force: true });
+  }
+});

packages/solid/src/plugin-islands.ts

@@ -256,7 +256,7 @@ function generateIslandRenderer(
   return `
 import { renderToStringAsync, generateHydrationScript } from "solid-js/web";
 import { createComponent } from "solid-js";
-import { SharedContext, ErrorsContext, ParamsContext } from "@void/solid";
+import { SharedContext, ErrorsContext, ParamsContext, FrontmatterContext } from "@void/solid";
 import { renderHeadToString, renderHtmlAttrs, renderBodyAttrs } from "void/pages-head";
 
 ${generateComponentManifest(scan, pagesDir)}
@@ -268,7 +268,9 @@ function escapeAttr(s) {
 }
 
 export async function renderIslandPage(pageObj, assetTags) {
-  const PageComponent = (await components[pageObj.component]()).default;
+  const __pageModule = await components[pageObj.component]();
+  const PageComponent = __pageModule.default;
+  const __frontmatter = __pageModule.frontmatter ?? {};
   const layoutIds = layoutTree[pageObj.component] || [];
   const layoutComponents = await Promise.all(
     layoutIds.map(async (id) => (await components[id]()).default)
@@ -284,15 +286,21 @@ export async function renderIslandPage(pageObj, assetTags) {
             return createComponent(ParamsContext.Provider, {
               value: pageObj.params || {},
               get children() {
-                // Build layout chain inside providers so contexts are available.
-                // No RouterContext — islands have no Void Router.
-                let element = createComponent(PageComponent, pageObj.props);
-                for (let i = layoutComponents.length - 1; i >= 0; i--) {
-                  const Layout = layoutComponents[i];
-                  const child = element;
-                  element = createComponent(Layout, { get children() { return child; } });
-                }
-                return element;
+                // Frontmatter wraps the layouts so they can read the Markdown page's values.
+                return createComponent(FrontmatterContext.Provider, {
+                  value: __frontmatter,
+                  get children() {
+                    // Build layout chain inside providers so contexts are available.
+                    // No RouterContext — islands have no Void Router.
+                    let element = createComponent(PageComponent, pageObj.props);
+                    for (let i = layoutComponents.length - 1; i >= 0; i--) {
+                      const Layout = layoutComponents[i];
+                      const child = element;
+                      element = createComponent(Layout, { get children() { return child; } });
+                    }
+                    return element;
+                  }
+                });
               }
             });
           }

packages/solid/src/runtime/context.ts

@@ -16,3 +16,8 @@ export const RouterContext: Context<VoidRouter | null> = createContext<VoidRoute
 export const NavigationContext: Context<(() => NavigationState) | null> = createContext<
   (() => NavigationState) | null
 >(null);
+// Island renderers provide the page's Markdown frontmatter above its layouts.
+// The `@void/md` runtime re-exports this context for `useFrontmatter()`.
+export const FrontmatterContext: Context<Record<string, unknown>> = createContext<
+  Record<string, unknown>
+>({});

packages/solid/src/runtime/index.ts

@@ -13,5 +13,6 @@ export {
   ParamsContext,
   RouterContext,
   NavigationContext,
+  FrontmatterContext,
 } from './context.ts';
 export type { DeferredState as Deferred, InferProps } from 'void';

packages/solid/test/integration/md-layout-frontmatter.test.ts

@@ -0,0 +1,62 @@
+// The Markdown plugin source needs its ambient module declarations in this package's typecheck.
+// eslint-disable-next-line typescript/triple-slash-reference -- env.d.ts has no exports to import.
+/// <reference path="../../../md/src/env.d.ts" />
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { createServer } from 'vite';
+import solid from 'vite-plugin-solid';
+import { expect, it } from 'vite-plus/test';
+import { voidMarkdown } from '../../../md/src/plugin.ts';
+import { islandsPlugin } from '../../src/plugin-islands.ts';
+
+type IslandRenderer = {
+  renderIslandPage(
+    page: { component: string; props: Record<string, unknown> },
+    assetTags: { css: string; preloads: string; body: string },
+  ): Promise<string>;
+};
+
+it('a layout reads the frontmatter of the Markdown page it wraps', async () => {
+  const root = mkdtempSync(join(import.meta.dirname, '__tmp_md_frontmatter_'));
+  const pages = join(root, 'pages');
+  mkdirSync(pages);
+  writeFileSync(
+    join(pages, 'layout.tsx'),
+    `import { useFrontmatter } from "@void/md";
+export default function Layout(props) {
+  return <div><p id="fm">{useFrontmatter().title}</p>{props.children}</div>;
+}`,
+  );
+  writeFileSync(join(pages, 'index.md'), '---\ntitle: Hello from frontmatter\n---\n\n# Body\n');
+
+  const server = await createServer({
+    root,
+    configFile: false,
+    cacheDir: join(root, '.vite'),
+    logLevel: 'silent',
+    appType: 'custom',
+    server: { middlewareMode: true, ws: false },
+    resolve: { alias: { '@void/solid': join(import.meta.dirname, '../../src/runtime/index.ts') } },
+    // The Markdown plugin picks its output from the adapter's pages plugin name.
+    plugins: [
+      ...voidMarkdown(),
+      solid({ ssr: true }),
+      { name: 'void-solid:pages' },
+      ...islandsPlugin(pages),
+    ],
+  });
+  try {
+    const renderer = (await server.ssrLoadModule(
+      'virtual:void-islands-renderer',
+    )) as IslandRenderer;
+    const html = await renderer.renderIslandPage(
+      { component: 'index', props: {} },
+      { css: '', preloads: '', body: '' },
+    );
+    expect(html).toContain('<p id="fm">Hello from frontmatter</p>');
+    expect(html).toContain('Body</h1>');
+  } finally {
+    await server.close();
+    rmSync(root, { recursive: true, force: true });
+  }
+});

packages/svelte/src/plugin-islands.ts

@@ -351,7 +351,8 @@ function escapeAttr(s) {
 }
 
 export async function renderIslandPage(pageObj, assetTags) {
-  const PageComponent = (await components[pageObj.component]()).default;
+  const __pageModule = await components[pageObj.component]();
+  const PageComponent = __pageModule.default;
   const layoutIds = layoutTree[pageObj.component] || [];
   const layoutComponents = await Promise.all(
     layoutIds.map(async (id) => (await components[id]()).default)
@@ -364,6 +365,8 @@ export async function renderIslandPage(pageObj, assetTags) {
       pageProps: pageObj.props,
       shared: pageObj.shared || {},
       params: pageObj.params || {},
+      // Set above the layouts so they can read the Markdown page's values.
+      frontmatter: __pageModule.frontmatter,
       router: null,
       stores: null,
     },

packages/svelte/src/runtime/App.svelte

@@ -13,6 +13,7 @@
     pageProps: props.pageProps,
     shared: props.shared,
     params: props.params,
+    frontmatter: props.frontmatter,
     router: props.router,
     routeUrl: props.routeUrl,
     navigation: props.navigation,
@@ -51,6 +52,10 @@
   setContext("__void_navigation", {
     get value() { return navigation; },
   });
+  // Island pages pass Markdown frontmatter so layouts can read it (useFrontmatter).
+  if (init.frontmatter) {
+    setContext("__void_frontmatter", init.frontmatter);
+  }
 
   // Client mode: subscribe to stores for live updates after hydration.
   // onMount only runs on the client, not during SSR.

packages/svelte/test/integration/md-layout-frontmatter.test.ts

@@ -0,0 +1,64 @@
+// The Markdown plugin source needs its ambient module declarations in this package's typecheck.
+// eslint-disable-next-line typescript/triple-slash-reference -- env.d.ts has no exports to import.
+/// <reference path="../../../md/src/env.d.ts" />
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { createServer } from 'vite';
+import { expect, it } from 'vite-plus/test';
+import { voidMarkdown } from '../../../md/src/plugin.ts';
+import { islandsPlugin } from '../../src/plugin-islands.ts';
+
+type IslandRenderer = {
+  renderIslandPage(
+    page: { component: string; props: Record<string, unknown> },
+    assetTags: { css: string; preloads: string; body: string },
+  ): Promise<string>;
+};
+
+it('a layout reads the frontmatter of the Markdown page it wraps', async () => {
+  const root = mkdtempSync(join(import.meta.dirname, '__tmp_md_frontmatter_'));
+  const pages = join(root, 'pages');
+  mkdirSync(pages);
+  writeFileSync(
+    join(pages, 'layout.svelte'),
+    `<script>
+  import { useFrontmatter } from "@void/md";
+  let { children } = $props();
+  const frontmatter = useFrontmatter();
+</script>
+<div><p id="fm">{frontmatter.title}</p>{@render children()}</div>
+`,
+  );
+  writeFileSync(join(pages, 'index.md'), '---\ntitle: Hello from frontmatter\n---\n\n# Body\n');
+
+  const server = await createServer({
+    root,
+    configFile: false,
+    cacheDir: join(root, '.vite'),
+    logLevel: 'silent',
+    appType: 'custom',
+    server: { middlewareMode: true, ws: false },
+    resolve: {
+      alias: {
+        '@void/svelte/App.svelte': join(import.meta.dirname, '../../src/runtime/App.svelte'),
+      },
+    },
+    // The Markdown plugin picks its output from the adapter's pages plugin name.
+    plugins: [...voidMarkdown(), svelte(), { name: 'void-svelte:pages' }, ...islandsPlugin(pages)],
+  });
+  try {
+    const renderer = (await server.ssrLoadModule(
+      'virtual:void-islands-renderer',
+    )) as IslandRenderer;
+    const html = await renderer.renderIslandPage(
+      { component: 'index', props: {} },
+      { css: '', preloads: '', body: '' },
+    );
+    expect(html).toContain('<p id="fm">Hello from frontmatter</p>');
+    expect(html).toContain('Body</h1>');
+  } finally {
+    await server.close();
+    rmSync(root, { recursive: true, force: true });
+  }
+});