/** * Match plugin - Conditional rendering with optional branch caching. * * This module provides opt-in support for conditional rendering, * where branches are rendered based on selector results rather than * underlying data changes. * * By default, branches are disposed when switching away (cache: false). * Set cache: true to keep branches in memory for instant re-switching. * * @example * ```ts * import { html as baseHtml } from "balises"; * import matchPlugin, { when, match } from "balises/match"; * * const html = baseHtml.with(matchPlugin); * * // Default: branches disposed on switch * html`${when(() => !!state.user, [ * () => html``, * () => html`` * ])}`.render(); * * // With caching: branches preserved for instant re-switching * html`${match(() => state.tab, { * home: () => html``, * settings: () => html`` * }, { cache: true })}`.render(); * ``` */ import { Template, type InterpolationPlugin } from "./template.js"; declare const MATCH: unique symbol; /** Options for when/match behavior */ export interface MatchOptions { /** * Whether to cache branches when switching away. * - false (default): Dispose branches when hidden, recreate when revisited * - true: Keep branches in memory for instant re-switching */ cache?: boolean; } interface MatchDescriptor { readonly [MATCH]: true; /** @internal */ selector: () => unknown; /** @internal */ cases: Record Template>; /** @internal */ cache: boolean; } /** * Conditional rendering for boolean conditions. * Prevents re-renders when the condition result stays the same. * * @param condition - Function that returns a boolean * @param branches - Array of [ifTrue, ifFalse?] factory functions. If ifFalse is omitted, renders nothing when false. * @param options - Optional settings. cache: false (default) disposes branches on switch. * * @example * ```ts * // Render only when true * html`${when(() => !!state.user, [ * () => html`` * ])}` * * // Render different content for true/false * html`${when(() => !!state.user, [ * () => html``, * () => html`` * ])}` * * // With caching for instant switching * html`${when(() => state.expanded, [ * () => html``, * () => html`` * ], { cache: true })}` * ``` */ export declare function when(condition: () => boolean, [ifTrue, ifFalse]: [() => Template, (() => Template)?], options?: MatchOptions): MatchDescriptor; /** * Conditional rendering for multiple cases. * Prevents re-renders when the selector result stays the same. * * @param selector - Function that returns a key value * @param cases - Object mapping keys to template factories. Use `_` for default case. * @param options - Optional settings. cache: false (default) disposes branches on switch. * * @example * ```ts * // Loading states (no caching needed) * html`${match(() => state.status, { * loading: () => html``, * error: () => html` state.error} />`, * success: () => html` state.items} />`, * _: () => html``, * })}` * * // Tab switching with caching * html`${match(() => state.tab, { * home: () => html``, * settings: () => html`` * }, { cache: true })}` * ``` */ export declare function match(selector: () => K, cases: Partial Template>> & { _?: () => Template; }, options?: MatchOptions): MatchDescriptor; /** * Plugin that handles match/when descriptors. * Register with: const html = baseHtml.with(matchPlugin); */ declare const matchPlugin: InterpolationPlugin; export default matchPlugin; //# sourceMappingURL=match.d.ts.map