Icard/angular-clarity-master(work.../node_modules/lit-html/development/directives/guard.js

80 lines
2.3 KiB
JavaScript
Raw Normal View History

2024-07-16 14:55:36 +00:00
/**
* @license
* Copyright 2018 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
import { noChange } from '../lit-html.js';
import { directive, Directive } from '../directive.js';
// A sentinel that indicates guard() hasn't rendered anything yet
const initialValue = {};
class GuardDirective extends Directive {
constructor() {
super(...arguments);
this._previousValue = initialValue;
}
render(_value, f) {
return f();
}
update(_part, [value, f]) {
if (Array.isArray(value)) {
// Dirty-check arrays by item
if (Array.isArray(this._previousValue) &&
this._previousValue.length === value.length &&
value.every((v, i) => v === this._previousValue[i])) {
return noChange;
}
}
else if (this._previousValue === value) {
// Dirty-check non-arrays by identity
return noChange;
}
// Copy the value if it's an array so that if it's mutated we don't forget
// what the previous values were.
this._previousValue = Array.isArray(value) ? Array.from(value) : value;
const r = this.render(value, f);
return r;
}
}
/**
* 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 const guard = directive(GuardDirective);
//# sourceMappingURL=guard.js.map