@flightdev/ui-alpine

Alpine.js adapter for Flight Framework. Declarative reactivity sprinkled on HTML.

Table of Contents

• Installation
• Quick Start
• Configuration
• Template Helpers
• Plugins
• API Reference
• License

Installation

npm install @flightdev/ui @flightdev/ui-alpine

No peer dependencies required. Alpine.js is loaded via CDN by default.

Quick Start

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

const ui = defineUI(alpine());

const result = await ui.adapter.renderToString({
    component: () => `
        <div x-data="{ count: 0 }">
            <button @click="count++">Increment</button>
            <span x-text="count"></span>
        </div>
    `,
    props: {},
});

console.log(result.html);

Configuration

Configure the Alpine adapter with options:

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

const adapter = alpine({
    version: '3.x',
    plugins: ['intersect', 'persist', 'focus'],
    cdnUrl: 'https://unpkg.com/alpinejs',
});

Available Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | version | string | '3.x' | Alpine.js version | | plugins | string[] | [] | Alpine plugins to load | | cdnUrl | string | unpkg | Custom CDN URL |

Template Helpers

Use helper functions to generate Alpine.js templates:

import { alpine, xData } from '@flightdev/ui-alpine';

// x-data helper
const counter = xData({ count: 0 }, `
    <div>
        <button @click="count++">Increment</button>
        <span x-text="count"></span>
    </div>
`);

// Output:
// <div x-data="{ count: 0 }">
//     <button @click="count++">Increment</button>
//     <span x-text="count"></span>
// </div>

Plugins

Load Alpine.js plugins for additional functionality:

const adapter = alpine({
    plugins: [
        'intersect',  // Intersection observer
        'persist',    // Local storage persistence
        'focus',      // Focus management
        'mask',       // Input masking
        'collapse',   // Collapse animations
    ],
});

API Reference

alpine(options?)

Create an Alpine adapter instance.

function alpine(options?: AlpineAdapterOptions): AlpineAdapter;

AlpineAdapter

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

Helper Functions

| Function | Description | |----------|-------------| | xData(data, content) | Wrap content with x-data |

Capabilities

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

License

MIT