Architecture

 1┌─────────────────────────────────────────┐
 2│               Reface                    │
 3│                                         │
 4│  ┌─────────────┐       ┌────────────┐   │
 5│  │    Deno     │       │   Router   │   │
 6│  │   Server    │─────▶ │   System   │   │
 7│  └─────────────┘       └────────────┘   │
 8│         │                    │          │
 9│         ▼                    ▼          │
10│  ┌─────────────┐       ┌────────────┐   │
11│  │   Static    │       │  Layouts   │   │
12│  │   Files     │       │            │   │
13│  └─────────────┘       └────────────┘   │
14│                             │           │
15│                             ▼           │
16│  ┌─────────────────────────────────┐    │
17│  │         RefaceComposer          │    │
18│  │                                 │    │
19│  │    ┌──────────┐  ┌──────────┐   │    │
20│  │    │  Plugin  │  │ Template │   │    │
21│  │    │  System  │  │ Process  │   │    │
22│  │    └──────────┘  └──────────┘   │    │
23│  └─────────────────────────────────┘    │
24│                                         │
25│  ┌─────────────────────────────────┐    │
26│  │      Interactive System         │    │
27│  │                                 │    │
28│  │  ┌──────────┐      ┌────────┐   │    │
29│  │  │ Partials │      │Islands │   │    │
30│  │  │  (HTMX)  │      │ (RPC)  │   │    │
31│  │  └──────────┘      └────────┘   │    │
32│  └─────────────────────────────────┘    │
33└─────────────────────────────────────────┘

 1class Reface {
 2  ​constructor(options: { layout: Layout }) {
 3  ​  ​this.layout = options.layout;
 4  ​}
 5
 6  ​// Page routing
 7  ​page(route: string, generator: TemplateGenerator<PageProps>) {
 8  ​  ​// Page registration
 9  ​}
10
11  ​// Server adapters
12  ​hono() {
13  ​  ​/* Hono integration */
14  ​}
15  ​oak() {
16  ​  ​/* Oak integration */
17  ​}
18  ​express() {
19  ​  ​/* Express integration */
20  ​}
21}

 1// Partial Component (HTMX-based)
 2const Counter = partial(async () => {
 3  ​return (
 4  ​  ​<div>
 5  ​  ​  ​<button {...Counter.trigger()}>Increment</button>
 6  ​  ​</div>
 7  ​);
 8}, "counter");
 9
10// Island Component (RPC-based)
11const TodoApp = Reface.addIsland({
12  ​name: "todo",
13  ​template: ({ rpc, rest }) => (
14  ​  ​<div>
15  ​  ​  ​<button {...rpc.hx.addTodo()}>Add</button>
16  ​  ​  ​<button {...rest.hx("self", "get", "/list")}>Refresh</button>
17  ​  ​</div>
18  ​),
19  ​rpc: {
20  ​  ​addTodo: async ({ args }) => {
21  ​  ​  ​/* RPC handler */
22  ​  ​},
23  ​},
24  ​rest: {
25  ​  ​"get|/list": async (req) => {
26  ​  ​  ​/* REST handler */
27  ​  ​},
28  ​},
29});

 1@reface/
 2├── core/                  # Core composition engine
 3│   └── RefaceComposer    # Template composition
 4│
 5├── framework/            # Reface framework
 6│   ├── server/          # Deno server
 7│   ├── router/          # Routing system
 8│   └── static/          # Static files
 9│
10├── interactive/         # Interactive components
11│   ├── partials/       # HTMX components
12│   └── islands/        # RPC components
13│
14└── plugins/            # Official plugins