@flightdev/ui-svelte
v1.1.0
Published
Svelte 4+ SSR adapter for Flight Framework
Downloads
10
Readme
@flightdev/ui-svelte
Svelte 5 SSR adapter for Flight Framework. Provides server-side rendering with hydration and islands architecture support.
Table of Contents
Installation
npm install @flightdev/ui @flightdev/ui-sveltePeer dependencies:
npm install svelteQuick Start
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:
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:
// 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:
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
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.
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