/** * Server-side rendering helpers. * * Wraps Svelte's render() function and provides utilities for * building complete HTML with hydration scripts. */ import type { Store } from '../types.js'; /** * Svelte component type (compatible with Svelte 5). */ type SvelteComponent = any; /** * Props object that can be passed to a Svelte component. */ type ComponentProps = Record; /** * Result from Svelte's render() function. */ interface RenderResult { /** Rendered HTML body */ body: string; /** Rendered HTML head (title, meta tags, etc.) */ head: string; } /** * Options for renderToHTML. */ export interface RenderOptions { /** * Title for the HTML document. * Default: 'Composable Svelte App' */ title?: string; /** * Additional HTML to inject in . * Example: '' */ head?: string; /** * Path to the client JavaScript bundle. * This script will hydrate the app on the client. * Default: '/app.js' */ clientScript?: string; /** * Additional scripts to inject before closing . * Example: '' */ bodyScripts?: string; } /** * Renders a Svelte component to HTML string for SSR. * * This function: * 1. Renders the component using Svelte's server render() * 2. Serializes store state to JSON * 3. Builds complete HTML document with hydration script * * @template Props - Component props type * * @param Component - Svelte component to render * @param props - Props to pass to the component (should include store) * @param options - Rendering options (title, scripts, etc.) * @returns Complete HTML string ready to send to client * * @example * ```typescript * // Server request handler * import { renderToHTML } from '@composable-svelte/core/ssr'; * import App from './App.svelte'; * * app.get('/', async (req, res) => { * // 1. Load data * const data = await loadDashboardData(req.user); * * // 2. Create store with pre-populated data * const store = createStore({ * initialState: data, * reducer: appReducer, * dependencies: {} // Empty on server * }); * * // 3. Render to HTML * const html = renderToHTML(App, { store }, { * title: 'Dashboard', * head: '', * clientScript: '/client.js' * }); * * res.setHeader('Content-Type', 'text/html'); * res.send(html); * }); * ``` */ export declare function renderToHTML(Component: SvelteComponent, props: Props, options?: RenderOptions): string; /** * Renders component to HTML without building full document. * * Use this if you want to embed the component in a custom HTML structure. * * @template Props - Component props type * * @param Component - Svelte component to render * @param props - Props to pass to the component * @returns Object with body and head HTML * * @example * ```typescript * const { body, head } = renderComponent(App, { store }); * * // Build custom HTML * const html = ` * * * ${head} * ${body} * * `; * ``` */ export declare function renderComponent(Component: SvelteComponent, props: Props): RenderResult; /** * Builds the hydration script tag with serialized state. * * Use this if you're building custom HTML and need just the state script. * * @template State - State type * @template Action - Action type * * @param store - Store to serialize * @returns HTML script tag with serialized state * * @example * ```typescript * const stateScript = buildHydrationScript(store); * * const html = ` *

${renderedHTML}

* ${stateScript} * * `; * ``` */ export declare function buildHydrationScript(store: Store): string; export {}; //# sourceMappingURL=render.d.ts.map