@flightdev/ui-vanilla

Vanilla Web Components adapter for Flight Framework. Pure Web Components without any framework.

Table of Contents

- Installation
- Quick Start
- Configuration
- Custom Elements
- API Reference
- License

---

Installation

``bash
npm install @flightdev/ui @flightdev/ui-vanilla
`

No peer dependencies required.

---

Quick Start

`typescript
import { defineUI } from '@flightdev/ui';
import { vanilla } from '@flightdev/ui-vanilla';

const ui = defineUI(vanilla());

const result = await ui.adapter.renderToString({
component: 'my-counter',
props: { initial: 0 },
});

console.log(result.html);
`

---

Configuration

Configure the Vanilla adapter with options:

`typescript
import { vanilla } from '@flightdev/ui-vanilla';

const adapter = vanilla({
shadowDom: true,
});
`

$3

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| shadowDom | boolean | true | Use Shadow DOM |

---

Custom Elements

Define custom elements using standard Web Components API:

`javascript
class MyCounter extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.count = 0;
}

connectedCallback() {
this.render();
}

render() {
this.shadowRoot.innerHTML =

${this.count}
;
this.shadowRoot.querySelector('button')
.addEventListener('click', () => {
this.count++;
this.render();
});
}
}

customElements.define('my-counter', MyCounter);
`

---

API Reference

$3

Create a Vanilla adapter instance.

`typescript
function vanilla(options?: VanillaAdapterOptions): VanillaAdapter;
`

$3

| Method | Description |
|--------|-------------|
| renderToString(component, context?) | Render to HTML string |
| getHydrationScript(result) | Generate hydration script |
| getClientEntry()` | Get client entry code |

$3

| Capability | Supported |
|------------|-----------|
| Streaming | No |
| Partial Hydration | No |
| Islands | No |
| Resumable | No |
| SSG | Yes |
| CSR | Yes |
| Server Components | No |

---

License

MIT