1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- /**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
- import { noChange, nothing } from '../lit-html.js';
- import { directive, Directive, PartType, } from '../directive.js';
- import { isSingleExpression, setCommittedValue } from '../directive-helpers.js';
- class LiveDirective extends Directive {
- constructor(partInfo) {
- super(partInfo);
- if (!(partInfo.type === PartType.PROPERTY ||
- partInfo.type === PartType.ATTRIBUTE ||
- partInfo.type === PartType.BOOLEAN_ATTRIBUTE)) {
- throw new Error('The `live` directive is not allowed on child or event bindings');
- }
- if (!isSingleExpression(partInfo)) {
- throw new Error('`live` bindings can only contain a single expression');
- }
- }
- render(value) {
- return value;
- }
- update(part, [value]) {
- if (value === noChange || value === nothing) {
- return value;
- }
- const element = part.element;
- const name = part.name;
- if (part.type === PartType.PROPERTY) {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- if (value === element[name]) {
- return noChange;
- }
- }
- else if (part.type === PartType.BOOLEAN_ATTRIBUTE) {
- if (!!value === element.hasAttribute(name)) {
- return noChange;
- }
- }
- else if (part.type === PartType.ATTRIBUTE) {
- if (element.getAttribute(name) === String(value)) {
- return noChange;
- }
- }
- // Resets the part's value, causing its dirty-check to fail so that it
- // always sets the value.
- setCommittedValue(part);
- return value;
- }
- }
- /**
- * Checks binding values against live DOM values, instead of previously bound
- * values, when determining whether to update the value.
- *
- * This is useful for cases where the DOM value may change from outside of
- * lit-html, such as with a binding to an `<input>` element's `value` property,
- * a content editable elements text, or to a custom element that changes it's
- * own properties or attributes.
- *
- * In these cases if the DOM value changes, but the value set through lit-html
- * bindings hasn't, lit-html won't know to update the DOM value and will leave
- * it alone. If this is not what you want--if you want to overwrite the DOM
- * value with the bound value no matter what--use the `live()` directive:
- *
- * ```js
- * html`<input .value=${live(x)}>`
- * ```
- *
- * `live()` performs a strict equality check agains the live DOM value, and if
- * the new value is equal to the live value, does nothing. This means that
- * `live()` should not be used when the binding will cause a type conversion. If
- * you use `live()` with an attribute binding, make sure that only strings are
- * passed in, or the binding will update every render.
- */
- export const live = directive(LiveDirective);
- //# sourceMappingURL=live.js.map
|