@rxdi/lit-html 0.7.157 → 0.7.159

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (95) hide show
  1. package/dist/async.d.ts +3 -3
  2. package/dist/async.js +4 -4
  3. package/dist/decorators/component.decorator.d.ts +1 -2
  4. package/dist/decorators/component.decorator.js +3 -3
  5. package/dist/index.d.ts +28 -17
  6. package/dist/index.js +28 -17
  7. package/package.json +4 -2
  8. package/dist/lit-element/decorators.d.ts +0 -14
  9. package/dist/lit-element/decorators.js +0 -32
  10. package/dist/lit-element/experimental-hydrate-support.d.ts +0 -6
  11. package/dist/lit-element/experimental-hydrate-support.js +0 -65
  12. package/dist/lit-element/index.d.ts +0 -7
  13. package/dist/lit-element/index.js +0 -25
  14. package/dist/lit-element/lit-element.d.ts +0 -157
  15. package/dist/lit-element/lit-element.js +0 -258
  16. package/dist/lit-element/polyfill-support.d.ts +0 -24
  17. package/dist/lit-element/polyfill-support.js +0 -58
  18. package/dist/lit-element/private-ssr-support.d.ts +0 -21
  19. package/dist/lit-element/private-ssr-support.js +0 -25
  20. package/dist/lit-html/async-directive.d.ts +0 -170
  21. package/dist/lit-html/async-directive.js +0 -250
  22. package/dist/lit-html/directive-helpers.d.ts +0 -105
  23. package/dist/lit-html/directive-helpers.js +0 -192
  24. package/dist/lit-html/directive.d.ts +0 -65
  25. package/dist/lit-html/directive.js +0 -52
  26. package/dist/lit-html/directives/async-append.d.ts +0 -38
  27. package/dist/lit-html/directives/async-append.js +0 -55
  28. package/dist/lit-html/directives/async-replace.d.ts +0 -39
  29. package/dist/lit-html/directives/async-replace.js +0 -112
  30. package/dist/lit-html/directives/cache.d.ts +0 -34
  31. package/dist/lit-html/directives/cache.js +0 -80
  32. package/dist/lit-html/directives/class-map.d.ts +0 -44
  33. package/dist/lit-html/directives/class-map.js +0 -92
  34. package/dist/lit-html/directives/guard.d.ts +0 -59
  35. package/dist/lit-html/directives/guard.js +0 -82
  36. package/dist/lit-html/directives/if-defined.d.ts +0 -13
  37. package/dist/lit-html/directives/if-defined.js +0 -17
  38. package/dist/lit-html/directives/live.d.ts +0 -42
  39. package/dist/lit-html/directives/live.js +0 -79
  40. package/dist/lit-html/directives/private-async-helpers.d.ts +0 -57
  41. package/dist/lit-html/directives/private-async-helpers.js +0 -117
  42. package/dist/lit-html/directives/ref.d.ts +0 -65
  43. package/dist/lit-html/directives/ref.js +0 -113
  44. package/dist/lit-html/directives/repeat.d.ts +0 -63
  45. package/dist/lit-html/directives/repeat.js +0 -416
  46. package/dist/lit-html/directives/style-map.d.ts +0 -46
  47. package/dist/lit-html/directives/style-map.js +0 -102
  48. package/dist/lit-html/directives/template-content.d.ts +0 -25
  49. package/dist/lit-html/directives/template-content.js +0 -33
  50. package/dist/lit-html/directives/unsafe-html.d.ts +0 -26
  51. package/dist/lit-html/directives/unsafe-html.js +0 -64
  52. package/dist/lit-html/directives/unsafe-svg.d.ts +0 -26
  53. package/dist/lit-html/directives/unsafe-svg.js +0 -26
  54. package/dist/lit-html/directives/until.d.ts +0 -43
  55. package/dist/lit-html/directives/until.js +0 -137
  56. package/dist/lit-html/experimental-hydrate.d.ts +0 -50
  57. package/dist/lit-html/experimental-hydrate.js +0 -322
  58. package/dist/lit-html/lit-html.d.ts +0 -335
  59. package/dist/lit-html/lit-html.js +0 -1259
  60. package/dist/lit-html/polyfill-support.d.ts +0 -67
  61. package/dist/lit-html/polyfill-support.js +0 -185
  62. package/dist/lit-html/private-ssr-support.d.ts +0 -52
  63. package/dist/lit-html/private-ssr-support.js +0 -54
  64. package/dist/lit-html/static.d.ts +0 -58
  65. package/dist/lit-html/static.js +0 -114
  66. package/dist/reactive-element/css-tag.d.ts +0 -64
  67. package/dist/reactive-element/css-tag.js +0 -125
  68. package/dist/reactive-element/decorators/base.d.ts +0 -47
  69. package/dist/reactive-element/decorators/base.js +0 -70
  70. package/dist/reactive-element/decorators/custom-element.d.ts +0 -26
  71. package/dist/reactive-element/decorators/custom-element.js +0 -47
  72. package/dist/reactive-element/decorators/event-options.d.ts +0 -37
  73. package/dist/reactive-element/decorators/event-options.js +0 -47
  74. package/dist/reactive-element/decorators/index.d.ts +0 -14
  75. package/dist/reactive-element/decorators/index.js +0 -32
  76. package/dist/reactive-element/decorators/property.d.ts +0 -40
  77. package/dist/reactive-element/decorators/property.js +0 -92
  78. package/dist/reactive-element/decorators/query-all.d.ts +0 -31
  79. package/dist/reactive-element/decorators/query-all.js +0 -46
  80. package/dist/reactive-element/decorators/query-assigned-nodes.d.ts +0 -33
  81. package/dist/reactive-element/decorators/query-assigned-nodes.js +0 -55
  82. package/dist/reactive-element/decorators/query-async.d.ts +0 -39
  83. package/dist/reactive-element/decorators/query-async.js +0 -71
  84. package/dist/reactive-element/decorators/query.d.ts +0 -32
  85. package/dist/reactive-element/decorators/query.js +0 -60
  86. package/dist/reactive-element/decorators/state.d.ts +0 -24
  87. package/dist/reactive-element/decorators/state.js +0 -29
  88. package/dist/reactive-element/index.d.ts +0 -5
  89. package/dist/reactive-element/index.js +0 -17
  90. package/dist/reactive-element/polyfill-support.d.ts +0 -40
  91. package/dist/reactive-element/polyfill-support.js +0 -89
  92. package/dist/reactive-element/reactive-controller.d.ts +0 -76
  93. package/dist/reactive-element/reactive-controller.js +0 -7
  94. package/dist/reactive-element/reactive-element.d.ts +0 -653
  95. package/dist/reactive-element/reactive-element.js +0 -979
@@ -1,42 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2020 Google LLC
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */
6
- import { AttributePart } from '../lit-html';
7
- import { Directive, DirectiveParameters, PartInfo } from '../directive';
8
- declare class LiveDirective extends Directive {
9
- constructor(partInfo: PartInfo);
10
- render(value: unknown): unknown;
11
- update(part: AttributePart, [value]: DirectiveParameters<this>): unknown;
12
- }
13
- /**
14
- * Checks binding values against live DOM values, instead of previously bound
15
- * values, when determining whether to update the value.
16
- *
17
- * This is useful for cases where the DOM value may change from outside of
18
- * lit-html, such as with a binding to an `<input>` element's `value` property,
19
- * a content editable elements text, or to a custom element that changes it's
20
- * own properties or attributes.
21
- *
22
- * In these cases if the DOM value changes, but the value set through lit-html
23
- * bindings hasn't, lit-html won't know to update the DOM value and will leave
24
- * it alone. If this is not what you want--if you want to overwrite the DOM
25
- * value with the bound value no matter what--use the `live()` directive:
26
- *
27
- * ```js
28
- * html`<input .value=${live(x)}>`
29
- * ```
30
- *
31
- * `live()` performs a strict equality check agains the live DOM value, and if
32
- * the new value is equal to the live value, does nothing. This means that
33
- * `live()` should not be used when the binding will cause a type conversion. If
34
- * you use `live()` with an attribute binding, make sure that only strings are
35
- * passed in, or the binding will update every render.
36
- */
37
- export declare const live: (value: unknown) => import("../directive").DirectiveResult<typeof LiveDirective>;
38
- /**
39
- * The type of the class that powers this directive. Necessary for naming the
40
- * directive's return type.
41
- */
42
- export type { LiveDirective };
@@ -1,79 +0,0 @@
1
- "use strict";
2
- /**
3
- * @license
4
- * Copyright 2020 Google LLC
5
- * SPDX-License-Identifier: BSD-3-Clause
6
- */
7
- Object.defineProperty(exports, "__esModule", { value: true });
8
- exports.live = void 0;
9
- const lit_html_1 = require("../lit-html");
10
- const directive_1 = require("../directive");
11
- const directive_helpers_1 = require("../directive-helpers");
12
- class LiveDirective extends directive_1.Directive {
13
- constructor(partInfo) {
14
- super(partInfo);
15
- if (!(partInfo.type === directive_1.PartType.PROPERTY ||
16
- partInfo.type === directive_1.PartType.ATTRIBUTE ||
17
- partInfo.type === directive_1.PartType.BOOLEAN_ATTRIBUTE)) {
18
- throw new Error('The `live` directive is not allowed on child or event bindings');
19
- }
20
- if (!(0, directive_helpers_1.isSingleExpression)(partInfo)) {
21
- throw new Error('`live` bindings can only contain a single expression');
22
- }
23
- }
24
- render(value) {
25
- return value;
26
- }
27
- update(part, [value]) {
28
- if (value === lit_html_1.noChange || value === lit_html_1.nothing) {
29
- return value;
30
- }
31
- const element = part.element;
32
- const name = part.name;
33
- if (part.type === directive_1.PartType.PROPERTY) {
34
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
35
- if (value === element[name]) {
36
- return lit_html_1.noChange;
37
- }
38
- }
39
- else if (part.type === directive_1.PartType.BOOLEAN_ATTRIBUTE) {
40
- if (!!value === element.hasAttribute(name)) {
41
- return lit_html_1.noChange;
42
- }
43
- }
44
- else if (part.type === directive_1.PartType.ATTRIBUTE) {
45
- if (element.getAttribute(name) === String(value)) {
46
- return lit_html_1.noChange;
47
- }
48
- }
49
- // Resets the part's value, causing its dirty-check to fail so that it
50
- // always sets the value.
51
- (0, directive_helpers_1.setCommittedValue)(part);
52
- return value;
53
- }
54
- }
55
- /**
56
- * Checks binding values against live DOM values, instead of previously bound
57
- * values, when determining whether to update the value.
58
- *
59
- * This is useful for cases where the DOM value may change from outside of
60
- * lit-html, such as with a binding to an `<input>` element's `value` property,
61
- * a content editable elements text, or to a custom element that changes it's
62
- * own properties or attributes.
63
- *
64
- * In these cases if the DOM value changes, but the value set through lit-html
65
- * bindings hasn't, lit-html won't know to update the DOM value and will leave
66
- * it alone. If this is not what you want--if you want to overwrite the DOM
67
- * value with the bound value no matter what--use the `live()` directive:
68
- *
69
- * ```js
70
- * html`<input .value=${live(x)}>`
71
- * ```
72
- *
73
- * `live()` performs a strict equality check agains the live DOM value, and if
74
- * the new value is equal to the live value, does nothing. This means that
75
- * `live()` should not be used when the binding will cause a type conversion. If
76
- * you use `live()` with an attribute binding, make sure that only strings are
77
- * passed in, or the binding will update every render.
78
- */
79
- exports.live = (0, directive_1.directive)(LiveDirective);
@@ -1,57 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2021 Google LLC
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */
6
- /**
7
- * Helper to iterate an AsyncIterable in its own closure.
8
- * @param iterable The iterable to iterate
9
- * @param callback The callback to call for each value. If the callback returns
10
- * `false`, the loop will be broken.
11
- */
12
- export declare const forAwaitOf: <T>(iterable: AsyncIterable<T>, callback: (value: T) => Promise<boolean>) => Promise<void>;
13
- /**
14
- * Holds a reference to an instance that can be disconnected and reconnected,
15
- * so that a closure over the ref (e.g. in a then function to a promise) does
16
- * not strongly hold a ref to the instance. Approximates a WeakRef but must
17
- * be manually connected & disconnected to the backing instance.
18
- */
19
- export declare class PseudoWeakRef<T> {
20
- private _ref?;
21
- constructor(ref: T);
22
- /**
23
- * Disassociates the ref with the backing instance.
24
- */
25
- disconnect(): void;
26
- /**
27
- * Reassociates the ref with the backing instance.
28
- */
29
- reconnect(ref: T): void;
30
- /**
31
- * Retrieves the backing instance (will be undefined when disconnected)
32
- */
33
- deref(): T;
34
- }
35
- /**
36
- * A helper to pause and resume waiting on a condition in an async function
37
- */
38
- export declare class Pauser {
39
- private _promise?;
40
- private _resolve?;
41
- /**
42
- * When paused, returns a promise to be awaited; when unpaused, returns
43
- * undefined. Note that in the microtask between the pauser being resumed
44
- * an an await of this promise resolving, the pauser could be paused again,
45
- * hence callers should check the promise in a loop when awaiting.
46
- * @returns A promise to be awaited when paused or undefined
47
- */
48
- get(): Promise<void>;
49
- /**
50
- * Creates a promise to be awaited
51
- */
52
- pause(): void;
53
- /**
54
- * Resolves the promise which may be awaited
55
- */
56
- resume(): void;
57
- }
@@ -1,117 +0,0 @@
1
- "use strict";
2
- /**
3
- * @license
4
- * Copyright 2021 Google LLC
5
- * SPDX-License-Identifier: BSD-3-Clause
6
- */
7
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
8
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
9
- return new (P || (P = Promise))(function (resolve, reject) {
10
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
11
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
12
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
13
- step((generator = generator.apply(thisArg, _arguments || [])).next());
14
- });
15
- };
16
- var __asyncValues = (this && this.__asyncValues) || function (o) {
17
- if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
18
- var m = o[Symbol.asyncIterator], i;
19
- return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
20
- function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
21
- function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
22
- };
23
- Object.defineProperty(exports, "__esModule", { value: true });
24
- exports.Pauser = exports.PseudoWeakRef = exports.forAwaitOf = void 0;
25
- // Note, this module is not included in package exports so that it's private to
26
- // our first-party directives. If it ends up being useful, we can open it up and
27
- // export it.
28
- /**
29
- * Helper to iterate an AsyncIterable in its own closure.
30
- * @param iterable The iterable to iterate
31
- * @param callback The callback to call for each value. If the callback returns
32
- * `false`, the loop will be broken.
33
- */
34
- const forAwaitOf = (iterable, callback) => { var iterable_1, iterable_1_1; return __awaiter(void 0, void 0, void 0, function* () {
35
- var e_1, _a;
36
- try {
37
- for (iterable_1 = __asyncValues(iterable); iterable_1_1 = yield iterable_1.next(), !iterable_1_1.done;) {
38
- const v = iterable_1_1.value;
39
- if ((yield callback(v)) === false) {
40
- return;
41
- }
42
- }
43
- }
44
- catch (e_1_1) { e_1 = { error: e_1_1 }; }
45
- finally {
46
- try {
47
- if (iterable_1_1 && !iterable_1_1.done && (_a = iterable_1.return)) yield _a.call(iterable_1);
48
- }
49
- finally { if (e_1) throw e_1.error; }
50
- }
51
- }); };
52
- exports.forAwaitOf = forAwaitOf;
53
- /**
54
- * Holds a reference to an instance that can be disconnected and reconnected,
55
- * so that a closure over the ref (e.g. in a then function to a promise) does
56
- * not strongly hold a ref to the instance. Approximates a WeakRef but must
57
- * be manually connected & disconnected to the backing instance.
58
- */
59
- class PseudoWeakRef {
60
- constructor(ref) {
61
- this._ref = ref;
62
- }
63
- /**
64
- * Disassociates the ref with the backing instance.
65
- */
66
- disconnect() {
67
- this._ref = undefined;
68
- }
69
- /**
70
- * Reassociates the ref with the backing instance.
71
- */
72
- reconnect(ref) {
73
- this._ref = ref;
74
- }
75
- /**
76
- * Retrieves the backing instance (will be undefined when disconnected)
77
- */
78
- deref() {
79
- return this._ref;
80
- }
81
- }
82
- exports.PseudoWeakRef = PseudoWeakRef;
83
- /**
84
- * A helper to pause and resume waiting on a condition in an async function
85
- */
86
- class Pauser {
87
- constructor() {
88
- this._promise = undefined;
89
- this._resolve = undefined;
90
- }
91
- /**
92
- * When paused, returns a promise to be awaited; when unpaused, returns
93
- * undefined. Note that in the microtask between the pauser being resumed
94
- * an an await of this promise resolving, the pauser could be paused again,
95
- * hence callers should check the promise in a loop when awaiting.
96
- * @returns A promise to be awaited when paused or undefined
97
- */
98
- get() {
99
- return this._promise;
100
- }
101
- /**
102
- * Creates a promise to be awaited
103
- */
104
- pause() {
105
- var _a;
106
- (_a = this._promise) !== null && _a !== void 0 ? _a : (this._promise = new Promise((resolve) => (this._resolve = resolve)));
107
- }
108
- /**
109
- * Resolves the promise which may be awaited
110
- */
111
- resume() {
112
- var _a;
113
- (_a = this._resolve) === null || _a === void 0 ? void 0 : _a.call(this);
114
- this._promise = this._resolve = undefined;
115
- }
116
- }
117
- exports.Pauser = Pauser;
@@ -1,65 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2020 Google LLC
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */
6
- import { ElementPart } from '../lit-html';
7
- import { AsyncDirective } from '../async-directive';
8
- /**
9
- * Creates a new Ref object, which is container for a reference to an element.
10
- */
11
- export declare const createRef: <T = Element>() => Ref<T>;
12
- /**
13
- * An object that holds a ref value.
14
- */
15
- declare class Ref<T = Element> {
16
- /**
17
- * The current Element value of the ref, or else `undefined` if the ref is no
18
- * longer rendered.
19
- */
20
- readonly value?: T;
21
- }
22
- export type { Ref };
23
- export declare type RefOrCallback = Ref | ((el: Element | undefined) => void);
24
- declare class RefDirective extends AsyncDirective {
25
- private _element?;
26
- private _ref?;
27
- private _context;
28
- render(_ref: RefOrCallback): symbol;
29
- update(part: ElementPart, [ref]: Parameters<this['render']>): symbol;
30
- private _updateRefValue;
31
- private get _lastElementForRef();
32
- disconnected(): void;
33
- reconnected(): void;
34
- }
35
- /**
36
- * Sets the value of a Ref object or calls a ref callback with the element it's
37
- * bound to.
38
- *
39
- * A Ref object acts as a container for a reference to an element. A ref
40
- * callback is a function that takes an element as its only argument.
41
- *
42
- * The ref directive sets the value of the Ref object or calls the ref callback
43
- * during rendering, if the referenced element changed.
44
- *
45
- * Note: If a ref callback is rendered to a different element position or is
46
- * removed in a subsequent render, it will first be called with `undefined`,
47
- * followed by another call with the new element it was rendered to (if any).
48
- *
49
- * ```js
50
- * // Using Ref object
51
- * const inputRef = createRef();
52
- * render(html`<input ${ref(inputRef)}>`, container);
53
- * inputRef.value.focus();
54
- *
55
- * // Using callback
56
- * const callback = (inputElement) => inputElement.focus();
57
- * render(html`<input ${ref(callback)}>`, container);
58
- * ```
59
- */
60
- export declare const ref: (_ref: RefOrCallback) => import("../directive").DirectiveResult<typeof RefDirective>;
61
- /**
62
- * The type of the class that powers this directive. Necessary for naming the
63
- * directive's return type.
64
- */
65
- export type { RefDirective };
@@ -1,113 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ref = exports.createRef = void 0;
4
- /**
5
- * @license
6
- * Copyright 2020 Google LLC
7
- * SPDX-License-Identifier: BSD-3-Clause
8
- */
9
- const lit_html_1 = require("../lit-html");
10
- const async_directive_1 = require("../async-directive");
11
- /**
12
- * Creates a new Ref object, which is container for a reference to an element.
13
- */
14
- const createRef = () => new Ref();
15
- exports.createRef = createRef;
16
- /**
17
- * An object that holds a ref value.
18
- */
19
- class Ref {
20
- }
21
- // When callbacks are used for refs, this map tracks the last value the callback
22
- // was called with, for ensuring a directive doesn't clear the ref if the ref
23
- // has already been rendered to a new spot
24
- const lastElementForCallback = new WeakMap();
25
- class RefDirective extends async_directive_1.AsyncDirective {
26
- render(_ref) {
27
- return lit_html_1.nothing;
28
- }
29
- update(part, [ref]) {
30
- var _a;
31
- const refChanged = ref !== this._ref;
32
- if (refChanged && this._ref !== undefined) {
33
- // The ref passed to the directive has changed;
34
- // unset the previous ref's value
35
- this._updateRefValue(undefined);
36
- }
37
- if (refChanged || this._lastElementForRef !== this._element) {
38
- // We either got a new ref or this is the first render;
39
- // store the ref/element & update the ref value
40
- this._ref = ref;
41
- this._context = (_a = part.options) === null || _a === void 0 ? void 0 : _a.host;
42
- this._updateRefValue((this._element = part.element));
43
- }
44
- return lit_html_1.nothing;
45
- }
46
- _updateRefValue(element) {
47
- if (typeof this._ref === 'function') {
48
- // If the current ref was called with a previous value, call with
49
- // `undefined`; We do this to ensure callbacks are called in a consistent
50
- // way regardless of whether a ref might be moving up in the tree (in
51
- // which case it would otherwise be called with the new value before the
52
- // previous one unsets it) and down in the tree (where it would be unset
53
- // before being set)
54
- if (lastElementForCallback.get(this._ref) !== undefined) {
55
- this._ref.call(this._context, undefined);
56
- }
57
- lastElementForCallback.set(this._ref, element);
58
- // Call the ref with the new element value
59
- if (element !== undefined) {
60
- this._ref.call(this._context, element);
61
- }
62
- }
63
- else {
64
- this._ref.value = element;
65
- }
66
- }
67
- get _lastElementForRef() {
68
- var _a;
69
- return typeof this._ref === 'function'
70
- ? lastElementForCallback.get(this._ref)
71
- : (_a = this._ref) === null || _a === void 0 ? void 0 : _a.value;
72
- }
73
- disconnected() {
74
- // Only clear the box if our element is still the one in it (i.e. another
75
- // directive instance hasn't rendered its element to it before us); that
76
- // only happens in the event of the directive being cleared (not via manual
77
- // disconnection)
78
- if (this._lastElementForRef === this._element) {
79
- this._updateRefValue(undefined);
80
- }
81
- }
82
- reconnected() {
83
- // If we were manually disconnected, we can safely put our element back in
84
- // the box, since no rendering could have occurred to change its state
85
- this._updateRefValue(this._element);
86
- }
87
- }
88
- /**
89
- * Sets the value of a Ref object or calls a ref callback with the element it's
90
- * bound to.
91
- *
92
- * A Ref object acts as a container for a reference to an element. A ref
93
- * callback is a function that takes an element as its only argument.
94
- *
95
- * The ref directive sets the value of the Ref object or calls the ref callback
96
- * during rendering, if the referenced element changed.
97
- *
98
- * Note: If a ref callback is rendered to a different element position or is
99
- * removed in a subsequent render, it will first be called with `undefined`,
100
- * followed by another call with the new element it was rendered to (if any).
101
- *
102
- * ```js
103
- * // Using Ref object
104
- * const inputRef = createRef();
105
- * render(html`<input ${ref(inputRef)}>`, container);
106
- * inputRef.value.focus();
107
- *
108
- * // Using callback
109
- * const callback = (inputElement) => inputElement.focus();
110
- * render(html`<input ${ref(callback)}>`, container);
111
- * ```
112
- */
113
- exports.ref = (0, async_directive_1.directive)(RefDirective);
@@ -1,63 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2017 Google LLC
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */
6
- import { ChildPart, noChange } from '../lit-html';
7
- import { Directive, PartInfo } from '../directive';
8
- export declare type KeyFn<T> = (item: T, index: number) => unknown;
9
- export declare type ItemTemplate<T> = (item: T, index: number) => unknown;
10
- declare class RepeatDirective extends Directive {
11
- private _itemKeys?;
12
- constructor(partInfo: PartInfo);
13
- private _getValuesAndKeys;
14
- render<T>(items: Iterable<T>, template: ItemTemplate<T>): Array<unknown>;
15
- render<T>(items: Iterable<T>, keyFn: KeyFn<T> | ItemTemplate<T>, template: ItemTemplate<T>): Array<unknown>;
16
- update<T>(containerPart: ChildPart, [items, keyFnOrTemplate, template]: [
17
- Iterable<T>,
18
- KeyFn<T> | ItemTemplate<T>,
19
- ItemTemplate<T>
20
- ]): any[] | typeof noChange;
21
- }
22
- export interface RepeatDirectiveFn {
23
- <T>(items: Iterable<T>, keyFnOrTemplate: KeyFn<T> | ItemTemplate<T>, template?: ItemTemplate<T>): unknown;
24
- <T>(items: Iterable<T>, template: ItemTemplate<T>): unknown;
25
- <T>(items: Iterable<T>, keyFn: KeyFn<T> | ItemTemplate<T>, template: ItemTemplate<T>): unknown;
26
- }
27
- /**
28
- * A directive that repeats a series of values (usually `TemplateResults`)
29
- * generated from an iterable, and updates those items efficiently when the
30
- * iterable changes based on user-provided `keys` associated with each item.
31
- *
32
- * Note that if a `keyFn` is provided, strict key-to-DOM mapping is maintained,
33
- * meaning previous DOM for a given key is moved into the new position if
34
- * needed, and DOM will never be reused with values for different keys (new DOM
35
- * will always be created for new keys). This is generally the most efficient
36
- * way to use `repeat` since it performs minimum unnecessary work for insertions
37
- * and removals.
38
- *
39
- * The `keyFn` takes two parameters, the item and its index, and returns a unique key value.
40
- *
41
- * ```js
42
- * html`
43
- * <ol>
44
- * ${repeat(this.items, (item) => item.id, (item, index) => {
45
- * return html`<li>${index}: ${item.name}</li>`;
46
- * })}
47
- * </ol>
48
- * `
49
- * ```
50
- *
51
- * **Important**: If providing a `keyFn`, keys *must* be unique for all items in a
52
- * given call to `repeat`. The behavior when two or more items have the same key
53
- * is undefined.
54
- *
55
- * If no `keyFn` is provided, this directive will perform similar to mapping
56
- * items to values, and DOM will be reused against potentially different items.
57
- */
58
- export declare const repeat: RepeatDirectiveFn;
59
- /**
60
- * The type of the class that powers this directive. Necessary for naming the
61
- * directive's return type.
62
- */
63
- export type { RepeatDirective };