node_modules/lit-html/development/directives/guard.d.ts

/**
 * @license
 * Copyright 2018 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
import { noChange, Part } from '../lit-html.js';
import { Directive, DirectiveParameters, DirectiveResult } from '../directive.js';
declare class GuardDirective<T> extends Directive {
    private _previousValue;
    render(_value: unknown, f: () => T): T;
    update(_part: Part, [value, f]: DirectiveParameters<this>): typeof noChange | T;
}
interface Guard {
    <T>(vals: unknown[], f: () => T): DirectiveResult<typeof GuardDirective<T>>;
}
/**
 * Prevents re-render of a template function until a single value or an array of
 * values changes.
 *
 * Values are checked against previous values with strict equality (`===`), and
 * so the check won't detect nested property changes inside objects or arrays.
 * Arrays values have each item checked against the previous value at the same
 * index with strict equality. Nested arrays are also checked only by strict
 * equality.
 *
 * Example:
 *
 * ```js
 * html`
 *   <div>
 *     ${guard([user.id, company.id], () => html`...`)}
 *   </div>
 * `
 * ```
 *
 * In this case, the template only rerenders if either `user.id` or `company.id`
 * changes.
 *
 * guard() is useful with immutable data patterns, by preventing expensive work
 * until data updates.
 *
 * Example:
 *
 * ```js
 * html`
 *   <div>
 *     ${guard([immutableItems], () => immutableItems.map(i => html`${i}`))}
 *   </div>
 * `
 * ```
 *
 * In this case, items are mapped over only when the array reference changes.
 *
 * @param value the value to check before re-rendering
 * @param f the template function
 */
export declare const guard: Guard;
/**
 * The type of the class that powers this directive. Necessary for naming the
 * directive's return type.
 */
export type { GuardDirective };
//# sourceMappingURL=guard.d.ts.map