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

60 lines
1.8 KiB
TypeScript

/**
* @license
* Copyright 2018 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
import { Part } from '../lit-html.js';
import { Directive, DirectiveParameters } from '../directive.js';
declare class GuardDirective extends Directive {
private _previousValue;
render(_value: unknown, f: () => unknown): unknown;
update(_part: Part, [value, f]: DirectiveParameters<this>): unknown;
}
/**
* 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: (_value: unknown, f: () => unknown) => import("../directive.js").DirectiveResult<typeof GuardDirective>;
/**
* 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