Plugins

 1import type { IPlugin } from "@reface/core";
 2
 3class CustomPlugin implements IPlugin {
 4  ​name = "custom";
 5
 6  ​setup(composer: RefaceComposer) {
 7  ​  ​const manager = composer.getRenderManager();
 8  ​  ​// Plugin initialization
 9  ​}
10}
11
12// Usage
13const composer = new RefaceComposer();
14composer.use(new CustomPlugin());

 1import { StyledPlugin } from "@reface/plugins/styled";
 2
 3const composer = new RefaceComposer();
 4composer.use(new StyledPlugin());
 5
 6// Create styled component
 7const Button = styled.button`
 8  ​& {
 9  ​  ​background: blue;
10  ​  ​color: white;
11  ​}
12
13  ​&:hover {
14  ​  ​background: darkblue;
15  ​}
16`;
17
18// Extend existing component
19const PrimaryButton = styled(Button)`
20  ​& {
21  ​  ​padding: 1rem 2rem;
22  ​  ​border-radius: 4px;
23  ​}
24`;

 1import { PartialsPlugin } from "@reface/plugins/partials";
 2
 3const composer = new RefaceComposer();
 4composer.use(new PartialsPlugin());
 5
 6// Create interactive component
 7const Counter = partial(async () => {
 8  ​const count = 0;
 9  ​return (
10  ​  ​<div>
11  ​  ​  ​<span>{count}</span>
12  ​  ​  ​<button {...Counter.trigger()}>Increment</button>
13  ​  ​</div>
14  ​);
15}, "counter");
16
17// With custom trigger
18const SearchBox = partial(async () => {
19  ​return (
20  ​  ​<div>
21  ​  ​  ​<input type="text" />
22  ​  ​  ​<button {...SearchBox.trigger("keyup delay:500ms from:input")}>
23  ​  ​  ​  ​Search
24  ​  ​  ​</button>
25  ​  ​</div>
26  ​);
27}, "search");

1interface IPlugin {
2  ​name: string;
3  ​setup(composer: RefaceComposer): void | Promise<void>;
4}

 1class LoggerPlugin implements IPlugin {
 2  ​name = "logger";
 3
 4  ​setup(composer: RefaceComposer) {
 5  ​  ​const manager = composer.getRenderManager();
 6
 7  ​  ​// Before render hook
 8  ​  ​manager.on("render.render.start", ({ template }) => {
 9  ​  ​  ​console.log("Starting render:", template);
10  ​  ​});
11
12  ​  ​// After render hook
13  ​  ​manager.on("render.render.end", ({ html }) => {
14  ​  ​  ​console.log("Rendered HTML:", html);
15  ​  ​});
16  ​}
17}

 1class StatePlugin implements IPlugin {
 2  ​name = "state";
 3
 4  ​setup(composer: RefaceComposer) {
 5  ​  ​const manager = composer.getRenderManager();
 6
 7  ​  ​// Store plugin data
 8  ​  ​manager.store.set("state", { count: 0 });
 9
10  ​  ​// Access plugin data
11  ​  ​const state = manager.store.get("state");
12  ​}
13}