Import from:
1import { Recast } from "@reface/recast";
Basic Usage
1// Create Recast instance
2const recast = new Recast();
3
4// Add plugins
5recast.use(new LoggerPlugin());
6recast.use(new StyledPlugin());
7
8// Simple HTML rendering
9const template = div({ class: "container" })`
10 ​${h1`Title`}
11 ​${p`Content`}
12`;
13
14const html = recast.renderHTML(template);
15// <div class="container"><h1>Title</h1><p>Content</p></div>
16
17// Full render with metadata
18const result = recast.render(template);
19// {
20// html: "<div class="container">...</div>",
21// styles: [".s1a { color: red; }"],
22// slots: {
23// missing: ["header"],
24// used: ["content"]
25// },
26// resources: {
27// scripts: [],
28// styles: []
29// }
30// }
Component Phase
First, all components are processed:
1const Page = component((props: Props, children: Children) => (
2 ​<Layout>
3 ​ ​<Header />
4 ​ ​<Main>{children}</Main>
5 ​ ​<Footer />
6 ​</Layout>
7));
8
9// 1. Components are rendered top-down
10// 2. Each component creates its Node instance
11// 3. Component slots are resolved
12// 4. Component resources are collected
Template Phase
Then, all remaining NodeProxies are processed:
1const element = div`
2 ​${h1`Title`}
3 ​${null} // Removed
4 ​${["a", "b"]} // Joined
5 ​${p`Content`}
6`;
7
8// 1. NodeProxies are rendered depth-first
9// 2. Attributes are normalized
10// 3. Children are processed
11// 4. HTML is generated
Plugin Integration
Plugins can hook into any render phase:
1class MyPlugin {
2 ​name = "my-plugin";
3
4 ​setup(recast) {
5 ​ ​// Initialize plugin
6 ​}
7
8 ​beforeRender(context) {
9 ​ ​// Pre-render setup
10 ​}
11
12 ​processNode(node, context) {
13 ​ ​// Transform nodes
14 ​ ​if (context.phase === "component") {
15 ​ ​ ​// Component phase processing
16 ​ ​}
17 ​ ​if (context.phase === "Template") {
18 ​ ​ ​// Template phase processing
19 ​ ​}
20 ​ ​return node;
21 ​}
22
23 ​afterRender(context) {
24 ​ ​// Post-render cleanup
25 ​}
26}
27
28recast.use(new MyPlugin());
Performance
Render process is optimized for:
Memory usage through streaming
String concatenation
Resource deduplication
Cache utilization