@flightdev/ui-hotwire

Hotwire adapter for Flight Framework. Turbo + Stimulus for server-rendered applications.

Table of Contents

• Installation
• Quick Start
• Configuration
• Turbo Frames
• Turbo Streams
• API Reference
• License

Installation

npm install @flightdev/ui @flightdev/ui-hotwire

Peer dependencies:

npm install @hotwired/turbo @hotwired/stimulus

Quick Start

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

const ui = defineUI(hotwire());

const result = await ui.adapter.renderToString({
    component: () => `
        <turbo-frame id="messages">
            <a href="/messages/1">Message 1</a>
        </turbo-frame>
    `,
    props: {},
});

console.log(result.html);

Configuration

Configure the Hotwire adapter with options:

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

const adapter = hotwire({
    turbo: true,
    stimulus: true,
});

Available Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | turbo | boolean | true | Enable Turbo Drive/Frames/Streams | | stimulus | boolean | true | Enable Stimulus controllers |

Turbo Frames

Use Turbo Frames for partial page updates:

<turbo-frame id="user-profile">
    <a href="/profile/edit">Edit Profile</a>
    <!-- Content loads inline without full page reload -->
</turbo-frame>

Turbo Streams

Use Turbo Streams for real-time updates:

<turbo-stream action="append" target="messages">
    <template>
        <div id="message_5">New message</div>
    </template>
</turbo-stream>

Stream Actions

| Action | Description | |--------|-------------| | append | Append to target | | prepend | Prepend to target | | replace | Replace target | | update | Update target content | | remove | Remove target | | before | Insert before target | | after | Insert after target |

API Reference

hotwire(options?)

Create a Hotwire adapter instance.

function hotwire(options?: HotwireAdapterOptions): HotwireAdapter;

HotwireAdapter

| Method | Description | |--------|-------------| | renderToString(component, context?) | Render to HTML string | | getHydrationScript(result) | Generate Hotwire 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