Hotwire (Turbo) adapter for Flight Framework
npm install @flightdev/ui-hotwirebash
npm install @flightdev/ui @flightdev/ui-hotwire
`
Peer dependencies:
`bash
npm install @hotwired/turbo @hotwired/stimulus
`
---
Quick Start
`typescript
import { defineUI } from '@flightdev/ui';
import { hotwire } from '@flightdev/ui-hotwire';
const ui = defineUI(hotwire());
const result = await ui.adapter.renderToString({
component: () =>
,
props: {},
});
console.log(result.html);
`
---
Configuration
Configure the Hotwire adapter with options:
`typescript
import { hotwire } from '@flightdev/ui-hotwire';
const adapter = hotwire({
turbo: true,
stimulus: true,
});
`
$3
| 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:
`html
Edit Profile
`
---
Turbo Streams
Use Turbo Streams for real-time updates:
`html
New message
`
$3
| 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
$3
Create a Hotwire adapter instance.
`typescript
function hotwire(options?: HotwireAdapterOptions): HotwireAdapter;
`
$3
| Method | Description |
|--------|-------------|
| renderToString(component, context?) | Render to HTML string |
| getHydrationScript(result) | Generate Hotwire include script |
| getClientEntry()` | Get client entry code |