Reface

 1import { RefaceComposer } from "@reface/core";
 2import { StyledPlugin } from "@reface/plugins/styled";
 3import { PartialsPlugin } from "@reface/plugins/partials";
 4
 5// Create composer instance
 6const composer = new RefaceComposer();
 7composer.use(new StyledPlugin());
 8composer.use(new PartialsPlugin());
 9
10// Create styled component
11const Button = styled.button`
12  ​& {
13  ​  ​background: var(--primary-color, #3182ce);
14  ​  ​color: white;
15  ​  ​padding: 0.5rem 1rem;
16  ​}
17`;
18
19// Create interactive component
20const Counter = partial(async () => {
21  ​const count = 0;
22  ​return (
23  ​  ​<div>
24  ​  ​  ​<span>{count}</span>
25  ​  ​  ​<Button {...Counter.trigger()}>Increment</Button>
26  ​  ​</div>
27  ​);
28}, "counter");
29
30// Create page template
31function HomePage() {
32  ​return (
33  ​  ​<div>
34  ​  ​  ​<h1>Welcome to Reface</h1>
35  ​  ​  ​<Counter />
36  ​  ​</div>
37  ​);
38}
39
40// Compose HTML
41const html = composer.render(<HomePage />);