npm package: @flightdev/ui-solid
Description: Solid.js SSR adapter for Flight Framework
Latest version: 1.1.0

# @flightdev/ui-solid

Solid.js SSR adapter for Flight Framework. Provides server-side rendering with streaming and hydration support.

## Table of Contents

- [Installation](#installation)
- [Quick Start](#quick-start)
- [SSR Options](#ssr-options)
- [Streaming SSR](#streaming-ssr)
- [Hydration](#hydration)
- [API Reference](#api-reference)
- [License](#license)

---

## Installation

```bash
npm install @flightdev/ui @flightdev/ui-solid
```

Peer dependencies:

```bash
npm install solid-js
```

---

## Quick Start

```typescript
import { defineUI } from '@flightdev/ui';
import { solid } from '@flightdev/ui-solid';

const ui = defineUI(solid());

const result = await ui.adapter.renderToString({
    component: App,
    props: { count: 0 },
});

console.log(result.html);
```

---

## SSR Options

Configure the Solid adapter with options:

```typescript
import { solid } from '@flightdev/ui-solid';

const adapter = solid({
    streaming: true,
    timeout: 10000,
});
```

### Available Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `streaming` | `boolean` | `false` | Enable streaming SSR |
| `timeout` | `number` | - | Render timeout in milliseconds |

---

## Streaming SSR

Solid.js supports streaming SSR for improved time-to-first-byte:

```typescript
import { solid } from '@flightdev/ui-solid';

const adapter = solid({ streaming: true });

const { stream, done, abort } = adapter.renderToStream(
    { component: App, props: { data } },
    { url: request.url },
    {
        onShellReady: () => {
            response.writeHead(200, {
                'Content-Type': 'text/html',
            });
        },
        onAllReady: () => {
            console.log('Page fully rendered');
        },
    }
);

const reader = stream.getReader();
while (true) {
    const { done: readerDone, value } = await reader.read();
    if (readerDone) break;
    response.write(value);
}
response.end();
```

---

## 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>
`;
```

### Client Entry

```typescript
import { hydrate, render } from 'solid-js/web';
import App from './App';

const container = document.getElementById('app');
const props = window.__FLIGHT_DATA__.props;

if (container.innerHTML.trim()) {
    hydrate(() => App(props), container);
} else {
    render(() => App(props), container);
}
```

---

## API Reference

### solid(options?)

Create a Solid adapter instance.

```typescript
function solid(options?: SolidAdapterOptions): SolidAdapter;
```

### SolidAdapter

| Method | Description |
|--------|-------------|
| `renderToString(component, context?)` | Render to HTML string |
| `renderToStream(component, context?, options?)` | Render to readable stream |
| `getHydrationScript(result)` | Generate hydration script |
| `getClientEntry()` | Get client entry code |

### Capabilities

| Capability | Supported |
|------------|-----------|
| Streaming | Yes |
| Partial Hydration | Yes |
| Islands | Yes |
| Resumable | No |
| SSG | Yes |
| CSR | Yes |
| Server Components | No |

---

## License

MIT