/** * @module html * HTML template engine with update capabilities. * Creates templates that can be re-rendered with new data without recreating DOM nodes. */ /** * Result of rendering a template. * Provides the DOM fragment and an update function for re-rendering. */ export interface RenderTemplate { /** The rendered DOM fragment */ fragment: DocumentFragment; /** Updates the DOM with new data without recreating elements */ update(context: any): void; } /** * Creates an updateable HTML template using tagged template literals. * Returns an object with the fragment and an update method for efficient re-rendering. * * Supports: * - Template literal substitutions (`${}`) * - Mustache-style bindings (`{{property}}`) * - Pipe transformations (`{{value|uppercase}}`) * - Event handler binding * * @param templateStrings - The static parts of the template literal * @param substitutions - The dynamic values interpolated into the template * @returns A function that takes context and returns a RenderTemplate * * @example * // Create and render a template * const template = html` *
*

{{name}}

*

{{email}}

* {{createdAt|daysAgo}} *
* `; * * const result = template({ name: 'John', email: 'john@example.com', createdAt: new Date() }); * container.appendChild(result.fragment); * * // Later, update with new data * result.update({ name: 'Jane', email: 'jane@example.com', createdAt: new Date() }); * * @example * // With event handlers * const row = html` * * {{name}} * * * `; */ export declare function html(templateStrings: TemplateStringsArray, ...substitutions: any[]): (context: any) => RenderTemplate;