/** * @license * Copyright (c) 2018 The Polymer Project Authors. All rights reserved. * This code may only be used under the BSD style license found at * http://polymer.github.io/LICENSE.txt * The complete set of authors may be found at * http://polymer.github.io/AUTHORS.txt * The complete set of contributors may be found at * http://polymer.github.io/CONTRIBUTORS.txt * Code distributed by Google as part of the polymer project is also * subject to an additional IP rights grant found at * http://polymer.github.io/PATENTS.txt */ import { directive } from '../lit-html.js'; const previousValues = new WeakMap(); /** * Prevents re-render of a template function until a single value or an array of * values changes. * * Example: * * ```js * html` *
* ${guard([user.id, company.id], () => html`...`)} *
* ``` * * In this case, the template only renders 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` *
* ${guard([immutableItems], () => immutableItems.map(i => html`${i}`))} *
* ``` * * 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((value, f) => (part) => { const previousValue = previousValues.get(part); if (Array.isArray(value)) { // Dirty-check arrays by item if (Array.isArray(previousValue) && previousValue.length === value.length && value.every((v, i) => v === previousValue[i])) { return; } } else if (previousValue === value && (value !== undefined || previousValues.has(part))) { // Dirty-check non-arrays by identity return; } part.setValue(f()); // Copy the value if it's an array so that if it's mutated we don't forget // what the previous values were. previousValues.set(part, Array.isArray(value) ? Array.from(value) : value); }); //# sourceMappingURL=guard.js.map