npm package: @flightdev/ui-alpine
Description: Alpine.js adapter for Flight Framework
Latest version: 1.1.0

# @flightdev/ui-alpine

Alpine.js adapter for Flight Framework. Declarative reactivity sprinkled on HTML.

## Table of Contents

- [Installation](#installation)
- [Quick Start](#quick-start)
- [Configuration](#configuration)
- [Template Helpers](#template-helpers)
- [Plugins](#plugins)
- [API Reference](#api-reference)
- [License](#license)

---

## Installation

```bash
npm install @flightdev/ui @flightdev/ui-alpine
```

No peer dependencies required. Alpine.js is loaded via CDN by default.

---

## Quick Start

```typescript
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:

```typescript
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:

```typescript
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:

```typescript
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.

```typescript
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