Documentation / @zerotal/core / view / defineLayout

Function: defineLayout()

defineLayout<LP>(Layout): <PP>(Page) => (props) => SafeHtml

Bind a shared layout component to page components, eliminating the need to wrap every page in <Layout>...</Layout> manually.

Returns a wrap factory. Call wrap(PageComponent) to produce a new component that renders PageComponent inside the layout. All props from both the layout (except children) and the page are merged — TypeScript enforces that callers supply every required field.

Type Parameters

LP

LP extends Record<string, unknown>

Parameters

Layout

(props) => SafeHtml

Returns

<PP>(Page) => (props) => SafeHtml

Example

// resources/views/layouts/AppLayout.tsx
export function AppLayout({ children, title }: { children: unknown; title: string }) {
  return (
    <html>
      <head><title>{title} — My App</title></head>
      <body>{children}</body>
    </html>
  );
}

// resources/views/About.tsx
import { defineLayout } from '@zerotal/core';
import { AppLayout }    from './layouts/AppLayout.tsx';

const wrap = defineLayout(AppLayout);

export const AboutPage = wrap<{ title: string }>(({ title }) => (
  <main>
    <h1>{title}</h1>
    <p>We build things.</p>
  </main>
));

// In routes/index.ts:
Router.view('/about', AboutPage, { title: 'About Us' });