guard.d.ts 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. /**
  2. * @license
  3. * Copyright 2018 Google LLC
  4. * SPDX-License-Identifier: BSD-3-Clause
  5. */
  6. import { Part } from '../lit-html.js';
  7. import { Directive, DirectiveParameters } from '../directive.js';
  8. declare class GuardDirective extends Directive {
  9. private _previousValue;
  10. render(_value: unknown, f: () => unknown): unknown;
  11. update(_part: Part, [value, f]: DirectiveParameters<this>): unknown;
  12. }
  13. /**
  14. * Prevents re-render of a template function until a single value or an array of
  15. * values changes.
  16. *
  17. * Values are checked against previous values with strict equality (`===`), and
  18. * so the check won't detect nested property changes inside objects or arrays.
  19. * Arrays values have each item checked against the previous value at the same
  20. * index with strict equality. Nested arrays are also checked only by strict
  21. * equality.
  22. *
  23. * Example:
  24. *
  25. * ```js
  26. * html`
  27. * <div>
  28. * ${guard([user.id, company.id], () => html`...`)}
  29. * </div>
  30. * `
  31. * ```
  32. *
  33. * In this case, the template only rerenders if either `user.id` or `company.id`
  34. * changes.
  35. *
  36. * guard() is useful with immutable data patterns, by preventing expensive work
  37. * until data updates.
  38. *
  39. * Example:
  40. *
  41. * ```js
  42. * html`
  43. * <div>
  44. * ${guard([immutableItems], () => immutableItems.map(i => html`${i}`))}
  45. * </div>
  46. * `
  47. * ```
  48. *
  49. * In this case, items are mapped over only when the array reference changes.
  50. *
  51. * @param value the value to check before re-rendering
  52. * @param f the template function
  53. */
  54. export declare const guard: (_value: unknown, f: () => unknown) => import("../directive.js").DirectiveResult<typeof GuardDirective>;
  55. /**
  56. * The type of the class that powers this directive. Necessary for naming the
  57. * directive's return type.
  58. */
  59. export type { GuardDirective };
  60. //# sourceMappingURL=guard.d.ts.map