import type { TemplateResult } from "lit-html";
import type { DirectiveResult } from "lit-html/directive.js";
/**
 * A factory that produces the value to render (usually a `TemplateResult`).
 * Only called when one or more deps have changed.
 */
export type MemoHtmlFn = () => unknown;
/**
 * Dependency list. Each element is compared with strict equality (`===`)
 * against the previous render's value at the same index — same semantics as
 * lit-html's `guard`.
 *
 * - Primitives are compared by value (`===`).
 * - Objects / arrays are compared by reference.
 * - `NaN` is never equal to itself under `===` (unlike `Object.is`).
 * - `+0` and `-0` are equal under `===` (unlike `Object.is`).
 */
export type MemoDeps = readonly unknown[];
/** @deprecated Use {@link MemoHtmlFn}. */
export type MemoTemplateFn = () => TemplateResult;
/** @deprecated Use {@link MemoDeps}. */
export type MemoKeys = MemoDeps;
/**
 * `memoHtml(templateFn, deps)` — only calls `templateFn` when one or more
 * `deps` have changed since the last render. Thin mates wrapper around
 * lit-html's `guard`, with the factory first so it reads like
 * `memoHtml(() => html\`…\`, […deps])` inside a template.
 *
 * ### Dep comparison
 * Same as `guard`: each dep is compared with `===`. A change in the length of
 * the deps array is always treated as a change. The deps array is snapshotted
 * so mutating the caller's array afterward does not affect the next check.
 *
 * ### When to use this
 * Wrap expensive subtrees that depend on a known, finite set of values —
 * the template-level equivalent of React's `useMemo` / `React.memo`.
 *
 * @param templateFn - Zero-argument factory that returns the content to render.
 *                     Only called when deps have changed.
 * @param deps       - Values to watch. Defaults to `[]` (render once).
 *
 * @example
 * // ── Basic — skip re-render when `user` reference is unchanged ────────────
 * html`
 *   <section>
 *     ${memoHtml(() => html`
 *       <h2>${user.name}</h2>
 *       <p>${user.bio}</p>
 *     `, [user])}
 *   </section>
 * `
 *
 * // ── Multiple deps ─────────────────────────────────────────────────────────
 * html`
 *   <ul>
 *     ${items.val.map(item =>
 *       memoHtml(() => html`
 *         <li class="${isSelected(item.id) ? 'active' : ''}">${item.label}</li>
 *       `, [item.id, item.label, isSelected(item.id)])
 *     )}
 *   </ul>
 * `
 *
 * // ── Atom values as deps ───────────────────────────────────────────────────
 * const count = atom(0);
 * const theme = atom('light');
 *
 * html`
 *   <div>
 *     ${memoHtml(() => html`
 *       <span class="${theme.val}">${count.val}</span>
 *     `, [count.val, theme.val])}
 *   </div>
 * `
 *
 * // ── Empty deps — renders once, never again ────────────────────────────────
 * html`
 *   <footer>
 *     ${memoHtml(() => html`<p>© ${new Date().getFullYear()} Acme</p>`, [])}
 *   </footer>
 * `
 */
export declare function memoHtml(templateFn: MemoHtmlFn, deps?: MemoDeps): DirectiveResult;
/**
 * @deprecated Prefer {@link memoHtml} with factory-first argument order:
 * `memoHtml(() => html\`…\`, deps)`.
 */
export declare function memoTemplate(keys: MemoDeps, templateFn: MemoHtmlFn): DirectiveResult;
//# sourceMappingURL=memoTemplate.d.ts.map