Components

 1// Simple component
 2function Button({ text }: { text: string }) {
 3  ​return <button>{text}</button>;
 4}
 5
 6// Usage
 7<Button text="Click me" />;
 8
 9// With children
10function Container({ children }: { children: ElementChild[] }) {
11  ​return <div class="container">{children}</div>;
12}
13
14// Usage
15<Container>
16  ​<h1>Title</h1>
17  ​<p>Content</p>
18</Container>;

 1import { html } from "@reface/core";
 2
 3// HTML template
 4const template = html`
 5  ​<div class="container">
 6  ​  ​<h1>Title</h1>
 7  ​  ​<p>Content</p>
 8  ​</div>
 9`;
10
11// With interpolation
12const name = "John";
13const greeting = html`<div>Hello ${name}!</div>`;

 1function Layout({
 2  ​title,
 3  ​children,
 4}: {
 5  ​title: string;
 6  ​children: ElementChild[];
 7}) {
 8  ​return html`
 9  ​  ​<div class="layout">
10  ​  ​  ​<header>${title}</header>
11  ​  ​  ​<main>${children}</main>
12  ​  ​</div>
13  ​`;
14}
15
16// Usage
17<Layout title="My Page">
18  ​<div>Content</div>
19</Layout>;

 1import { createElement } from "@reface/core";
 2
 3const div = createElement("div");
 4const span = createElement("span");
 5
 6// Usage
 7div({ class: "container" })`
 8  ​${span({ class: "text" })`Hello`}
 9  ​${span({ class: "text" })`World`}
10`;

 1interface ButtonProps {
 2  ​variant: "primary" | "secondary";
 3  ​size?: "small" | "medium" | "large";
 4  ​disabled?: boolean;
 5  ​onClick?: () => void;
 6}
 7
 8function Button({ variant, size = "medium", disabled, onClick }: ButtonProps) {
 9  ​return (
10  ​  ​<button
11  ​  ​  ​class={`btn btn-${variant} btn-${size}`}
12  ​  ​  ​disabled={disabled}
13  ​  ​  ​onClick={onClick}
14  ​  ​/>
15  ​);
16}

 1// Single child
 2interface SingleChildProps {
 3  ​children: ElementChild;
 4}
 5
 6// Multiple children
 7interface MultipleChildrenProps {
 8  ​children: ElementChild[];
 9}
10
11// Optional children
12interface OptionalChildrenProps {
13  ​children?: ElementChild | ElementChild[];
14}