@flightdev/ui-stencil
v1.1.0
Published
Stencil Web Components SSR adapter for Flight Framework
Maintainers
nonapelonaReadme
@flightdev/ui-stencil
Stencil SSR adapter for Flight Framework. Web Components compiler with hydration support.
Table of Contents
Installation
npm install @flightdev/ui @flightdev/ui-stencilPeer dependencies:
npm install @stencil/coreQuick Start
import { defineUI } from '@flightdev/ui';
import { stencil } from '@flightdev/ui-stencil';
const ui = defineUI(stencil());
const result = await ui.adapter.renderToString({
component: 'my-component',
props: { data: 'value' },
});
console.log(result.html);SSR Options
Configure the Stencil adapter with options:
import { stencil } from '@flightdev/ui-stencil';
const adapter = stencil({
hydrateModule: './hydrate',
});Available Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| hydrateModule | string | './hydrate' | Path to generated hydrate module |
Hydrate Module
Stencil generates a hydrate module during build. Configure the path in your adapter:
const adapter = stencil({
hydrateModule: './dist/hydrate',
});Hydration
Generate hydration scripts for client-side interactivity:
const result = await adapter.renderToString({
component: 'my-component',
props: { data },
});
const hydrationScript = adapter.getHydrationScript(result);
const html = `
<!DOCTYPE html>
<html>
<body>
${result.html}
${hydrationScript}
</body>
</html>
`;API Reference
stencil(options?)
Create a Stencil adapter instance.
function stencil(options?: StencilAdapterOptions): StencilAdapter;StencilAdapter
| 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 | No | | Islands | No | | Resumable | No | | SSG | Yes | | CSR | Yes | | Server Components | No |
License
MIT