API Reference

1import { createTemplate } from "@reface/template";
2
3const template = createTemplate({ tag: "div" });
4template({ class: "container" })`Content`;

1import { button, div, span } from "@reface/elements";
2
3div({ class: "container" })`
4  ​${span`Text`}
5  ​${button({ type: "button" })`Click me`}
6`;

 1import { createElement, Fragment } from "@reface";
 2
 3// Fragment
 4<>
 5  ​<div>Firstdiv>
 6  ​<div>Seconddiv>
 7;
 8
 9// Components
10function Button(props: ButtonProps) {
11  ​return <button class={props.class}>{props.children}button>;
12}

1import { component } from "@reface";
2
3const Button = component<ButtonProps>((props, children) => {
4  ​// Elements API
5  ​return button({ class: props.class })`${children}`;
6
7  ​// Or JSX
8  ​return <button class={props.class}>{children}button>;
9});

 1const app = new Reface({
 2  ​layout: Layout,
 3  ​plugins: [...plugins],
 4});
 5
 6// Pages
 7app.page("/", HomePage);
 8
 9// Hono integration
10app.hono();

1import { StyledPlugin } from "@reface/plugins/styled";
2import { PartialsPlugin } from "@reface/plugins/partials";
3
4app.use(new StyledPlugin());
5app.use(new PartialsPlugin());

1import { styled } from "@reface/plugins/styled";
2
3const Button = styled.button`
4  ​& {
5  ​  ​/* styles */
6  ​}
7`;

1import { island } from "@reface";
2
3const Interactive = island({
4  ​template: () => {...},
5  ​state: {...},
6  ​rpc: {...}
7});