@flightdev/ui-stimulus

Stimulus adapter for Flight Framework. Modest JavaScript framework for HTML you already have.

Table of Contents

• Installation
• Quick Start
• Configuration
• Controllers
• API Reference
• License

Installation

npm install @flightdev/ui @flightdev/ui-stimulus

Peer dependencies:

npm install @hotwired/stimulus

Quick Start

import { defineUI } from '@flightdev/ui';
import { stimulus } from '@flightdev/ui-stimulus';

const ui = defineUI(stimulus());

const result = await ui.adapter.renderToString({
    component: () => `
        <div data-controller="hello">
            <input data-hello-target="name" type="text">
            <button data-action="click->hello#greet">Greet</button>
            <span data-hello-target="output"></span>
        </div>
    `,
    props: {},
});

console.log(result.html);

Configuration

Configure the Stimulus adapter with options:

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

const adapter = stimulus({
    controllerPath: './controllers',
});

Available Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | controllerPath | string | './controllers' | Path to controller modules |

Controllers

Stimulus controllers connect JavaScript to HTML:

// controllers/hello_controller.js
import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    static targets = ['name', 'output'];

    greet() {
        this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!`;
    }
}

<div data-controller="hello">
    <input data-hello-target="name" type="text">
    <button data-action="click->hello#greet">Greet</button>
    <span data-hello-target="output"></span>
</div>

API Reference

stimulus(options?)

Create a Stimulus adapter instance.

function stimulus(options?: StimulusAdapterOptions): StimulusAdapter;

StimulusAdapter

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

Capabilities

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

License

MIT