@rxdi/lit-html 0.7.157 → 0.7.158

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,38 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2017 Google LLC
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */
6
- import { ChildPart } from '../lit-html';
7
- import { DirectiveParameters, PartInfo } from '../directive';
8
- import { AsyncReplaceDirective } from './async-replace';
9
- declare class AsyncAppendDirective extends AsyncReplaceDirective {
10
- private __childPart;
11
- constructor(partInfo: PartInfo);
12
- update(part: ChildPart, params: DirectiveParameters<this>): symbol;
13
- protected commitValue(value: unknown, index: number): void;
14
- }
15
- /**
16
- * A directive that renders the items of an async iterable[1], appending new
17
- * values after previous values, similar to the built-in support for iterables.
18
- * This directive is usable only in child expressions.
19
- *
20
- * Async iterables are objects with a [Symbol.asyncIterator] method, which
21
- * returns an iterator who's `next()` method returns a Promise. When a new
22
- * value is available, the Promise resolves and the value is appended to the
23
- * Part controlled by the directive. If another value other than this
24
- * directive has been set on the Part, the iterable will no longer be listened
25
- * to and new values won't be written to the Part.
26
- *
27
- * [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of
28
- *
29
- * @param value An async iterable
30
- * @param mapper An optional function that maps from (value, index) to another
31
- * value. Useful for generating templates for each item in the iterable.
32
- */
33
- export declare const asyncAppend: (value: AsyncIterable<unknown>, _mapper?: (v: unknown, index?: number) => unknown) => import("../directive").DirectiveResult<typeof AsyncAppendDirective>;
34
- /**
35
- * The type of the class that powers this directive. Necessary for naming the
36
- * directive's return type.
37
- */
38
- export type { AsyncAppendDirective };
@@ -1,55 +0,0 @@
1
- "use strict";
2
- /**
3
- * @license
4
- * Copyright 2017 Google LLC
5
- * SPDX-License-Identifier: BSD-3-Clause
6
- */
7
- Object.defineProperty(exports, "__esModule", { value: true });
8
- exports.asyncAppend = void 0;
9
- const directive_1 = require("../directive");
10
- const async_replace_1 = require("./async-replace");
11
- const directive_helpers_1 = require("../directive-helpers");
12
- class AsyncAppendDirective extends async_replace_1.AsyncReplaceDirective {
13
- // Override AsyncReplace to narrow the allowed part type to ChildPart only
14
- constructor(partInfo) {
15
- super(partInfo);
16
- if (partInfo.type !== directive_1.PartType.CHILD) {
17
- throw new Error('asyncAppend can only be used in child expressions');
18
- }
19
- }
20
- // Override AsyncReplace to save the part since we need to append into it
21
- update(part, params) {
22
- this.__childPart = part;
23
- return super.update(part, params);
24
- }
25
- // Override AsyncReplace to append rather than replace
26
- commitValue(value, index) {
27
- // When we get the first value, clear the part. This lets the
28
- // previous value display until we can replace it.
29
- if (index === 0) {
30
- (0, directive_helpers_1.clearPart)(this.__childPart);
31
- }
32
- // Create and insert a new part and set its value to the next value
33
- const newPart = (0, directive_helpers_1.insertPart)(this.__childPart);
34
- (0, directive_helpers_1.setChildPartValue)(newPart, value);
35
- }
36
- }
37
- /**
38
- * A directive that renders the items of an async iterable[1], appending new
39
- * values after previous values, similar to the built-in support for iterables.
40
- * This directive is usable only in child expressions.
41
- *
42
- * Async iterables are objects with a [Symbol.asyncIterator] method, which
43
- * returns an iterator who's `next()` method returns a Promise. When a new
44
- * value is available, the Promise resolves and the value is appended to the
45
- * Part controlled by the directive. If another value other than this
46
- * directive has been set on the Part, the iterable will no longer be listened
47
- * to and new values won't be written to the Part.
48
- *
49
- * [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of
50
- *
51
- * @param value An async iterable
52
- * @param mapper An optional function that maps from (value, index) to another
53
- * value. Useful for generating templates for each item in the iterable.
54
- */
55
- exports.asyncAppend = (0, directive_1.directive)(AsyncAppendDirective);
@@ -1,39 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2017 Google LLC
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */
6
- import { ChildPart } from '../lit-html';
7
- import { DirectiveParameters } from '../directive';
8
- import { AsyncDirective } from '../async-directive';
9
- declare type Mapper<T> = (v: T, index?: number) => unknown;
10
- export declare class AsyncReplaceDirective extends AsyncDirective {
11
- private __value?;
12
- private __weakThis;
13
- private __pauser;
14
- render<T>(value: AsyncIterable<T>, _mapper?: Mapper<T>): symbol;
15
- update(_part: ChildPart, [value, mapper]: DirectiveParameters<this>): symbol;
16
- protected commitValue(value: unknown, _index: number): void;
17
- disconnected(): void;
18
- reconnected(): void;
19
- }
20
- /**
21
- * A directive that renders the items of an async iterable[1], replacing
22
- * previous values with new values, so that only one value is ever rendered
23
- * at a time. This directive may be used in any expression type.
24
- *
25
- * Async iterables are objects with a `[Symbol.asyncIterator]` method, which
26
- * returns an iterator who's `next()` method returns a Promise. When a new
27
- * value is available, the Promise resolves and the value is rendered to the
28
- * Part controlled by the directive. If another value other than this
29
- * directive has been set on the Part, the iterable will no longer be listened
30
- * to and new values won't be written to the Part.
31
- *
32
- * [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of
33
- *
34
- * @param value An async iterable
35
- * @param mapper An optional function that maps from (value, index) to another
36
- * value. Useful for generating templates for each item in the iterable.
37
- */
38
- export declare const asyncReplace: (value: AsyncIterable<unknown>, _mapper?: Mapper<unknown>) => import("../directive").DirectiveResult<typeof AsyncReplaceDirective>;
39
- export {};
@@ -1,112 +0,0 @@
1
- "use strict";
2
- /**
3
- * @license
4
- * Copyright 2017 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
- Object.defineProperty(exports, "__esModule", { value: true });
17
- exports.asyncReplace = exports.AsyncReplaceDirective = void 0;
18
- const lit_html_1 = require("../lit-html");
19
- const directive_1 = require("../directive");
20
- const async_directive_1 = require("../async-directive");
21
- const private_async_helpers_1 = require("./private-async-helpers");
22
- class AsyncReplaceDirective extends async_directive_1.AsyncDirective {
23
- constructor() {
24
- super(...arguments);
25
- this.__weakThis = new private_async_helpers_1.PseudoWeakRef(this);
26
- this.__pauser = new private_async_helpers_1.Pauser();
27
- }
28
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
29
- render(value, _mapper) {
30
- return lit_html_1.noChange;
31
- }
32
- update(_part, [value, mapper]) {
33
- // If our initial render occurs while disconnected, ensure that the pauser
34
- // and weakThis are in the disconnected state
35
- if (!this.isConnected) {
36
- this.disconnected();
37
- }
38
- // If we've already set up this particular iterable, we don't need
39
- // to do anything.
40
- if (value === this.__value) {
41
- return;
42
- }
43
- this.__value = value;
44
- let i = 0;
45
- const { __weakThis: weakThis, __pauser: pauser } = this;
46
- // Note, the callback avoids closing over `this` so that the directive
47
- // can be gc'ed before the promise resolves; instead `this` is retrieved
48
- // from `weakThis`, which can break the hard reference in the closure when
49
- // the directive disconnects
50
- (0, private_async_helpers_1.forAwaitOf)(value, (v) => __awaiter(this, void 0, void 0, function* () {
51
- // The while loop here handles the case that the connection state
52
- // thrashes, causing the pauser to resume and then get re-paused
53
- while (pauser.get()) {
54
- yield pauser.get();
55
- }
56
- // If the callback gets here and there is no `this`, it means that the
57
- // directive has been disconnected and garbage collected and we don't
58
- // need to do anything else
59
- const _this = weakThis.deref();
60
- if (_this !== undefined) {
61
- // Check to make sure that value is the still the current value of
62
- // the part, and if not bail because a new value owns this part
63
- if (_this.__value !== value) {
64
- return false;
65
- }
66
- // As a convenience, because functional-programming-style
67
- // transforms of iterables and async iterables requires a library,
68
- // we accept a mapper function. This is especially convenient for
69
- // rendering a template for each item.
70
- if (mapper !== undefined) {
71
- v = mapper(v, i);
72
- }
73
- _this.commitValue(v, i);
74
- i++;
75
- }
76
- return true;
77
- }));
78
- return lit_html_1.noChange;
79
- }
80
- // Override point for AsyncAppend to append rather than replace
81
- commitValue(value, _index) {
82
- this.setValue(value);
83
- }
84
- disconnected() {
85
- this.__weakThis.disconnect();
86
- this.__pauser.pause();
87
- }
88
- reconnected() {
89
- this.__weakThis.reconnect(this);
90
- this.__pauser.resume();
91
- }
92
- }
93
- exports.AsyncReplaceDirective = AsyncReplaceDirective;
94
- /**
95
- * A directive that renders the items of an async iterable[1], replacing
96
- * previous values with new values, so that only one value is ever rendered
97
- * at a time. This directive may be used in any expression type.
98
- *
99
- * Async iterables are objects with a `[Symbol.asyncIterator]` method, which
100
- * returns an iterator who's `next()` method returns a Promise. When a new
101
- * value is available, the Promise resolves and the value is rendered to the
102
- * Part controlled by the directive. If another value other than this
103
- * directive has been set on the Part, the iterable will no longer be listened
104
- * to and new values won't be written to the Part.
105
- *
106
- * [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of
107
- *
108
- * @param value An async iterable
109
- * @param mapper An optional function that maps from (value, index) to another
110
- * value. Useful for generating templates for each item in the iterable.
111
- */
112
- exports.asyncReplace = (0, directive_1.directive)(AsyncReplaceDirective);
@@ -1,34 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2017 Google LLC
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */
6
- import { ChildPart } from '../lit-html';
7
- import { Directive, DirectiveParameters, PartInfo } from '../directive';
8
- declare class CacheDirective extends Directive {
9
- private _templateCache;
10
- private _value?;
11
- constructor(partInfo: PartInfo);
12
- render(v: unknown): unknown[];
13
- update(containerPart: ChildPart, [v]: DirectiveParameters<this>): unknown[];
14
- }
15
- /**
16
- * Enables fast switching between multiple templates by caching the DOM nodes
17
- * and TemplateInstances produced by the templates.
18
- *
19
- * Example:
20
- *
21
- * ```js
22
- * let checked = false;
23
- *
24
- * html`
25
- * ${cache(checked ? html`input is checked` : html`input is not checked`)}
26
- * `
27
- * ```
28
- */
29
- export declare const cache: (v: unknown) => import("../directive").DirectiveResult<typeof CacheDirective>;
30
- /**
31
- * The type of the class that powers this directive. Necessary for naming the
32
- * directive's return type.
33
- */
34
- export type { CacheDirective };
@@ -1,80 +0,0 @@
1
- "use strict";
2
- /**
3
- * @license
4
- * Copyright 2017 Google LLC
5
- * SPDX-License-Identifier: BSD-3-Clause
6
- */
7
- Object.defineProperty(exports, "__esModule", { value: true });
8
- exports.cache = 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 CacheDirective extends directive_1.Directive {
13
- constructor(partInfo) {
14
- super(partInfo);
15
- this._templateCache = new WeakMap();
16
- }
17
- render(v) {
18
- // Return an array of the value to induce lit-html to create a ChildPart
19
- // for the value that we can move into the cache.
20
- return [v];
21
- }
22
- update(containerPart, [v]) {
23
- // If the previous value is a TemplateResult and the new value is not,
24
- // or is a different Template as the previous value, move the child part
25
- // into the cache.
26
- if ((0, directive_helpers_1.isTemplateResult)(this._value) &&
27
- (!(0, directive_helpers_1.isTemplateResult)(v) || this._value.strings !== v.strings)) {
28
- // This is always an array because we return [v] in render()
29
- const partValue = (0, directive_helpers_1.getCommittedValue)(containerPart);
30
- const childPart = partValue.pop();
31
- let cachedContainerPart = this._templateCache.get(this._value.strings);
32
- if (cachedContainerPart === undefined) {
33
- const fragment = document.createDocumentFragment();
34
- cachedContainerPart = (0, lit_html_1.render)(lit_html_1.nothing, fragment);
35
- cachedContainerPart.setConnected(false);
36
- this._templateCache.set(this._value.strings, cachedContainerPart);
37
- }
38
- // Move into cache
39
- (0, directive_helpers_1.setCommittedValue)(cachedContainerPart, [childPart]);
40
- (0, directive_helpers_1.insertPart)(cachedContainerPart, undefined, childPart);
41
- }
42
- // If the new value is a TemplateResult and the previous value is not,
43
- // or is a different Template as the previous value, restore the child
44
- // part from the cache.
45
- if ((0, directive_helpers_1.isTemplateResult)(v)) {
46
- if (!(0, directive_helpers_1.isTemplateResult)(this._value) || this._value.strings !== v.strings) {
47
- const cachedContainerPart = this._templateCache.get(v.strings);
48
- if (cachedContainerPart !== undefined) {
49
- // Move the cached part back into the container part value
50
- const partValue = (0, directive_helpers_1.getCommittedValue)(cachedContainerPart);
51
- const cachedPart = partValue.pop();
52
- // Move cached part back into DOM
53
- (0, directive_helpers_1.clearPart)(containerPart);
54
- (0, directive_helpers_1.insertPart)(containerPart, undefined, cachedPart);
55
- (0, directive_helpers_1.setCommittedValue)(containerPart, [cachedPart]);
56
- }
57
- }
58
- this._value = v;
59
- }
60
- else {
61
- this._value = undefined;
62
- }
63
- return this.render(v);
64
- }
65
- }
66
- /**
67
- * Enables fast switching between multiple templates by caching the DOM nodes
68
- * and TemplateInstances produced by the templates.
69
- *
70
- * Example:
71
- *
72
- * ```js
73
- * let checked = false;
74
- *
75
- * html`
76
- * ${cache(checked ? html`input is checked` : html`input is not checked`)}
77
- * `
78
- * ```
79
- */
80
- exports.cache = (0, directive_1.directive)(CacheDirective);
@@ -1,44 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2018 Google LLC
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */
6
- import { AttributePart, noChange } from '../lit-html';
7
- import { Directive, DirectiveParameters, PartInfo } from '../directive';
8
- /**
9
- * A key-value set of class names to truthy values.
10
- */
11
- export interface ClassInfo {
12
- readonly [name: string]: string | boolean | number;
13
- }
14
- declare class ClassMapDirective extends Directive {
15
- /**
16
- * Stores the ClassInfo object applied to a given AttributePart.
17
- * Used to unset existing values when a new ClassInfo object is applied.
18
- */
19
- private _previousClasses?;
20
- private _staticClasses?;
21
- constructor(partInfo: PartInfo);
22
- render(classInfo: ClassInfo): string;
23
- update(part: AttributePart, [classInfo]: DirectiveParameters<this>): string | typeof noChange;
24
- }
25
- /**
26
- * A directive that applies dynamic CSS classes.
27
- *
28
- * This must be used in the `class` attribute and must be the only part used in
29
- * the attribute. It takes each property in the `classInfo` argument and adds
30
- * the property name to the element's `classList` if the property value is
31
- * truthy; if the property value is falsey, the property name is removed from
32
- * the element's `class`.
33
- *
34
- * For example `{foo: bar}` applies the class `foo` if the value of `bar` is
35
- * truthy.
36
- *
37
- * @param classInfo
38
- */
39
- export declare const classMap: (classInfo: ClassInfo) => import("../directive").DirectiveResult<typeof ClassMapDirective>;
40
- /**
41
- * The type of the class that powers this directive. Necessary for naming the
42
- * directive's return type.
43
- */
44
- export type { ClassMapDirective };
@@ -1,92 +0,0 @@
1
- "use strict";
2
- /**
3
- * @license
4
- * Copyright 2018 Google LLC
5
- * SPDX-License-Identifier: BSD-3-Clause
6
- */
7
- Object.defineProperty(exports, "__esModule", { value: true });
8
- exports.classMap = void 0;
9
- const lit_html_1 = require("../lit-html");
10
- const directive_1 = require("../directive");
11
- class ClassMapDirective extends directive_1.Directive {
12
- constructor(partInfo) {
13
- var _a;
14
- super(partInfo);
15
- if (partInfo.type !== directive_1.PartType.ATTRIBUTE ||
16
- partInfo.name !== 'class' ||
17
- ((_a = partInfo.strings) === null || _a === void 0 ? void 0 : _a.length) > 2) {
18
- throw new Error('`classMap()` can only be used in the `class` attribute ' +
19
- 'and must be the only part in the attribute.');
20
- }
21
- }
22
- render(classInfo) {
23
- // Add spaces to ensure separation from static classes
24
- return (' ' +
25
- Object.keys(classInfo)
26
- .filter((key) => classInfo[key])
27
- .join(' ') +
28
- ' ');
29
- }
30
- update(part, [classInfo]) {
31
- var _a, _b;
32
- // Remember dynamic classes on the first render
33
- if (this._previousClasses === undefined) {
34
- this._previousClasses = new Set();
35
- if (part.strings !== undefined) {
36
- this._staticClasses = new Set(part.strings
37
- .join(' ')
38
- .split(/\s/)
39
- .filter((s) => s !== ''));
40
- }
41
- for (const name in classInfo) {
42
- if (classInfo[name] && !((_a = this._staticClasses) === null || _a === void 0 ? void 0 : _a.has(name))) {
43
- this._previousClasses.add(name);
44
- }
45
- }
46
- return this.render(classInfo);
47
- }
48
- const classList = part.element.classList;
49
- // Remove old classes that no longer apply
50
- // We use forEach() instead of for-of so that we don't require down-level
51
- // iteration.
52
- this._previousClasses.forEach((name) => {
53
- if (!(name in classInfo)) {
54
- classList.remove(name);
55
- this._previousClasses.delete(name);
56
- }
57
- });
58
- // Add or remove classes based on their classMap value
59
- for (const name in classInfo) {
60
- // We explicitly want a loose truthy check of `value` because it seems
61
- // more convenient that '' and 0 are skipped.
62
- const value = !!classInfo[name];
63
- if (value !== this._previousClasses.has(name) &&
64
- !((_b = this._staticClasses) === null || _b === void 0 ? void 0 : _b.has(name))) {
65
- if (value) {
66
- classList.add(name);
67
- this._previousClasses.add(name);
68
- }
69
- else {
70
- classList.remove(name);
71
- this._previousClasses.delete(name);
72
- }
73
- }
74
- }
75
- return lit_html_1.noChange;
76
- }
77
- }
78
- /**
79
- * A directive that applies dynamic CSS classes.
80
- *
81
- * This must be used in the `class` attribute and must be the only part used in
82
- * the attribute. It takes each property in the `classInfo` argument and adds
83
- * the property name to the element's `classList` if the property value is
84
- * truthy; if the property value is falsey, the property name is removed from
85
- * the element's `class`.
86
- *
87
- * For example `{foo: bar}` applies the class `foo` if the value of `bar` is
88
- * truthy.
89
- *
90
- * @param classInfo
91
- */
92
- exports.classMap = (0, directive_1.directive)(ClassMapDirective);
@@ -1,59 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2018 Google LLC
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */
6
- import { Part } from '../lit-html';
7
- import { Directive, DirectiveParameters } from '../directive';
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").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 };
@@ -1,82 +0,0 @@
1
- "use strict";
2
- /**
3
- * @license
4
- * Copyright 2018 Google LLC
5
- * SPDX-License-Identifier: BSD-3-Clause
6
- */
7
- Object.defineProperty(exports, "__esModule", { value: true });
8
- exports.guard = void 0;
9
- const lit_html_1 = require("../lit-html");
10
- const directive_1 = require("../directive");
11
- // A sentinal that indicates guard() hasn't rendered anything yet
12
- const initialValue = {};
13
- class GuardDirective extends directive_1.Directive {
14
- constructor() {
15
- super(...arguments);
16
- this._previousValue = initialValue;
17
- }
18
- render(_value, f) {
19
- return f();
20
- }
21
- update(_part, [value, f]) {
22
- if (Array.isArray(value)) {
23
- // Dirty-check arrays by item
24
- if (Array.isArray(this._previousValue) &&
25
- this._previousValue.length === value.length &&
26
- value.every((v, i) => v === this._previousValue[i])) {
27
- return lit_html_1.noChange;
28
- }
29
- }
30
- else if (this._previousValue === value) {
31
- // Dirty-check non-arrays by identity
32
- return lit_html_1.noChange;
33
- }
34
- // Copy the value if it's an array so that if it's mutated we don't forget
35
- // what the previous values were.
36
- this._previousValue = Array.isArray(value) ? Array.from(value) : value;
37
- const r = this.render(value, f);
38
- return r;
39
- }
40
- }
41
- /**
42
- * Prevents re-render of a template function until a single value or an array of
43
- * values changes.
44
- *
45
- * Values are checked against previous values with strict equality (`===`), and
46
- * so the check won't detect nested property changes inside objects or arrays.
47
- * Arrays values have each item checked against the previous value at the same
48
- * index with strict equality. Nested arrays are also checked only by strict
49
- * equality.
50
- *
51
- * Example:
52
- *
53
- * ```js
54
- * html`
55
- * <div>
56
- * ${guard([user.id, company.id], () => html`...`)}
57
- * </div>
58
- * `
59
- * ```
60
- *
61
- * In this case, the template only rerenders if either `user.id` or `company.id`
62
- * changes.
63
- *
64
- * guard() is useful with immutable data patterns, by preventing expensive work
65
- * until data updates.
66
- *
67
- * Example:
68
- *
69
- * ```js
70
- * html`
71
- * <div>
72
- * ${guard([immutableItems], () => immutableItems.map(i => html`${i}`))}
73
- * </div>
74
- * `
75
- * ```
76
- *
77
- * In this case, items are mapped over only when the array reference changes.
78
- *
79
- * @param value the value to check before re-rendering
80
- * @param f the template function
81
- */
82
- exports.guard = (0, directive_1.directive)(GuardDirective);
@@ -1,13 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2018 Google LLC
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */
6
- import { nothing } from '../lit-html';
7
- /**
8
- * For AttributeParts, sets the attribute if the value is defined and removes
9
- * the attribute if the value is undefined.
10
- *
11
- * For other part types, this directive is a no-op.
12
- */
13
- export declare const ifDefined: <T>(value: T) => typeof nothing | T;
@@ -1,17 +0,0 @@
1
- "use strict";
2
- /**
3
- * @license
4
- * Copyright 2018 Google LLC
5
- * SPDX-License-Identifier: BSD-3-Clause
6
- */
7
- Object.defineProperty(exports, "__esModule", { value: true });
8
- exports.ifDefined = void 0;
9
- const lit_html_1 = require("../lit-html");
10
- /**
11
- * For AttributeParts, sets the attribute if the value is defined and removes
12
- * the attribute if the value is undefined.
13
- *
14
- * For other part types, this directive is a no-op.
15
- */
16
- const ifDefined = (value) => value !== null && value !== void 0 ? value : lit_html_1.nothing;
17
- exports.ifDefined = ifDefined;