npm package: @flightdev/ui-svelte
Description: Svelte 4+ SSR adapter for Flight Framework
Latest version: 1.1.0

# @flightdev/ui-svelte

Svelte 5 SSR adapter for Flight Framework. Provides server-side rendering with hydration and islands architecture support.

## Table of Contents

- [Installation](#installation)
- [Quick Start](#quick-start)
- [SSR Options](#ssr-options)
- [Svelte 4 Compatibility](#svelte-4-compatibility)
- [Hydration](#hydration)
- [API Reference](#api-reference)
- [License](#license)

---

## Installation

```bash
npm install @flightdev/ui @flightdev/ui-svelte
```

Peer dependencies:

```bash
npm install svelte
```

---

## Quick Start

```typescript
import { defineUI } from '@flightdev/ui';
import { svelte } from '@flightdev/ui-svelte';

const ui = defineUI(svelte());

const result = await ui.adapter.renderToString({
    component: App,
    props: { name: 'World' },
});

console.log(result.html);
```

---

## SSR Options

Configure the Svelte adapter with options:

```typescript
import { svelte } from '@flightdev/ui-svelte';

const adapter = svelte({
    extractCss: true,
    compileOptions: {
        // Svelte compiler options
    },
});
```

### Available Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `extractCss` | `boolean` | `false` | Extract CSS to separate output |
| `compileOptions` | `object` | `{}` | Svelte compiler options |

---

## Svelte 4 Compatibility

The adapter automatically falls back to Svelte 4 API if Svelte 5 is not available:

```typescript
// Svelte 5 uses 'svelte/server'
// Svelte 4 uses component.render()

const adapter = svelte();

// Works with both versions
const result = await adapter.renderToString({
    component: App,
    props: { data },
});
```

---

## Hydration

Generate hydration scripts for client-side interactivity:

```typescript
const result = await adapter.renderToString({
    component: App,
    props: { data },
});

const hydrationScript = adapter.getHydrationScript(result);

const html = `
<!DOCTYPE html>
<html>
<body>
    <div id="app">${result.html}</div>
    ${hydrationScript}
</body>
</html>
`;
```

### Svelte 5 Client Entry

```typescript
import { hydrate, mount } from 'svelte';
import App from './App.svelte';

const container = document.getElementById('app');
const props = window.__FLIGHT_DATA__.props;

if (container.innerHTML.trim()) {
    hydrate(App, { target: container, props });
} else {
    mount(App, { target: container, props });
}
```

---

## API Reference

### svelte(options?)

Create a Svelte adapter instance.

```typescript
function svelte(options?: SvelteAdapterOptions): SvelteAdapter;
```

### SvelteAdapter

| Method | Description |
|--------|-------------|
| `renderToString(component, context?)` | Render to HTML string |
| `getHydrationScript(result)` | Generate hydration script |
| `getClientEntry()` | Get client entry code |

### Capabilities

| Capability | Supported |
|------------|-----------|
| Streaming | No |
| Partial Hydration | Yes |
| Islands | Yes |
| Resumable | No |
| SSG | Yes |
| CSR | Yes |
| Server Components | No |

---

## License

MIT