@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

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

No peer dependencies required.

Quick Start

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:

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

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

Available Options

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

Custom Elements

Define custom elements using standard Web Components API:

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

    connectedCallback() {
        this.render();
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                button { padding: 8px 16px; }
            </style>
            <button>${this.count}</button>
        `;
        this.shadowRoot.querySelector('button')
            .addEventListener('click', () => {
                this.count++;
                this.render();
            });
    }
}

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

API Reference

vanilla(options?)

Create a Vanilla adapter instance.

function vanilla(options?: VanillaAdapterOptions): VanillaAdapter;

VanillaAdapter

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

Capabilities

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

License

MIT