Reface - Modern Template Engine

Import from:

1import { createSlot, Template } from "@reface/recast/slots";

Slots System provides a mechanism for content distribution and management across components.

Content Distribution

Recast provides a slot system for content distribution:

import { createSlot } from "@reface/slots";
import { Template } from "@reface/slots";
// Create named slot
const HeadSlot = createSlot("head");
const TitleSlot = createSlot(
  ​"head.title",
  ​(content) => title`${content}` // Optional render transform
);
// Fill slots with content using ComponentTemplate
const Page = component((props: Props, children: Children) => (
  ​<html>
  ​  ​<head>
  ​  ​  ​<HeadSlot /> {/* Slot placeholder */}
  ​  ​  ​<TitleSlot>Page Title</TitleSlot>
  ​  ​</head>
  ​  ​<body>
  ​  ​  ​<main>{children}</main>
  ​  ​</body>
  ​</html>
));
// Provide content for slots
const Layout = component((props: Props, children: Children) => (
  ​<>
  ​  ​<Template slot="head">
  ​  ​  ​<meta charset="utf-8" />
  ​  ​  ​<link rel="stylesheet" href="/style.css" />
  ​  ​</Template>
  ​  ​<Template slot="head.title" key="main">
  ​  ​  ​My Website
  ​  ​</Template>
  ​  ​{children}
  ​</>
));

Key Features

Named Slots
- Unique slot identifiers
- Optional render transforms
- Hierarchical naming (e.g., "head.title")
Multiple Providers
- Multiple content providers for same slot
- Content deduplication via keys
- Custom content merging logic
Scope Control
- Global slots
- Component-scoped slots
- Inheritance control
Content Management
- Content collection
- Key-based deduplication
- Transform pipeline
- Injection system

Built-in Slots

Recast provides several built-in slots:

// Head content
const HeadSlot = createSlot("head");
// Page title
const TitleSlot = createSlot("head.title", (content) => title`${content}`);
// End of body content
const BodyEndSlot = createSlot("body.end");
// Usage with Template
const Page = component((props: Props, children: Children) => (
  ​<html>
  ​  ​<head>
  ​  ​  ​<HeadSlot />
  ​  ​  ​<TitleSlot>Default Title</TitleSlot>
  ​  ​</head>
  ​  ​<body>
  ​  ​  ​{children}
  ​  ​  ​<BodyEndSlot />
  ​  ​</body>
  ​</html>
));

Render Process

During render, slots follow this process:

Slots collect content from Templates
Content is deduplicated by keys
Optional render transforms are applied
Content is injected into slot placeholders

Best Practices

Use meaningful slot names
Always provide keys for content deduplication
Use hierarchical naming for related slots
Keep transforms pure and simple
Consider scope when designing slot structure