@rxdi/lit-html 0.7.156 → 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.
- package/dist/async.d.ts +3 -3
- package/dist/async.js +4 -4
- package/dist/decorators/component.decorator.d.ts +1 -2
- package/dist/decorators/component.decorator.js +3 -3
- package/dist/index.d.ts +28 -17
- package/dist/index.js +28 -17
- package/package.json +4 -2
- package/dist/lit-element/decorators.d.ts +0 -14
- package/dist/lit-element/decorators.js +0 -32
- package/dist/lit-element/experimental-hydrate-support.d.ts +0 -6
- package/dist/lit-element/experimental-hydrate-support.js +0 -65
- package/dist/lit-element/index.d.ts +0 -7
- package/dist/lit-element/index.js +0 -25
- package/dist/lit-element/lit-element.d.ts +0 -157
- package/dist/lit-element/lit-element.js +0 -258
- package/dist/lit-element/polyfill-support.d.ts +0 -24
- package/dist/lit-element/polyfill-support.js +0 -58
- package/dist/lit-element/private-ssr-support.d.ts +0 -21
- package/dist/lit-element/private-ssr-support.js +0 -25
- package/dist/lit-html/async-directive.d.ts +0 -170
- package/dist/lit-html/async-directive.js +0 -250
- package/dist/lit-html/directive-helpers.d.ts +0 -105
- package/dist/lit-html/directive-helpers.js +0 -192
- package/dist/lit-html/directive.d.ts +0 -65
- package/dist/lit-html/directive.js +0 -52
- package/dist/lit-html/directives/async-append.d.ts +0 -38
- package/dist/lit-html/directives/async-append.js +0 -55
- package/dist/lit-html/directives/async-replace.d.ts +0 -39
- package/dist/lit-html/directives/async-replace.js +0 -112
- package/dist/lit-html/directives/cache.d.ts +0 -34
- package/dist/lit-html/directives/cache.js +0 -80
- package/dist/lit-html/directives/class-map.d.ts +0 -44
- package/dist/lit-html/directives/class-map.js +0 -92
- package/dist/lit-html/directives/guard.d.ts +0 -59
- package/dist/lit-html/directives/guard.js +0 -82
- package/dist/lit-html/directives/if-defined.d.ts +0 -13
- package/dist/lit-html/directives/if-defined.js +0 -17
- package/dist/lit-html/directives/live.d.ts +0 -42
- package/dist/lit-html/directives/live.js +0 -79
- package/dist/lit-html/directives/private-async-helpers.d.ts +0 -57
- package/dist/lit-html/directives/private-async-helpers.js +0 -117
- package/dist/lit-html/directives/ref.d.ts +0 -65
- package/dist/lit-html/directives/ref.js +0 -113
- package/dist/lit-html/directives/repeat.d.ts +0 -63
- package/dist/lit-html/directives/repeat.js +0 -416
- package/dist/lit-html/directives/style-map.d.ts +0 -46
- package/dist/lit-html/directives/style-map.js +0 -102
- package/dist/lit-html/directives/template-content.d.ts +0 -25
- package/dist/lit-html/directives/template-content.js +0 -33
- package/dist/lit-html/directives/unsafe-html.d.ts +0 -26
- package/dist/lit-html/directives/unsafe-html.js +0 -64
- package/dist/lit-html/directives/unsafe-svg.d.ts +0 -26
- package/dist/lit-html/directives/unsafe-svg.js +0 -26
- package/dist/lit-html/directives/until.d.ts +0 -43
- package/dist/lit-html/directives/until.js +0 -137
- package/dist/lit-html/experimental-hydrate.d.ts +0 -50
- package/dist/lit-html/experimental-hydrate.js +0 -322
- package/dist/lit-html/lit-html.d.ts +0 -335
- package/dist/lit-html/lit-html.js +0 -1259
- package/dist/lit-html/polyfill-support.d.ts +0 -67
- package/dist/lit-html/polyfill-support.js +0 -185
- package/dist/lit-html/private-ssr-support.d.ts +0 -52
- package/dist/lit-html/private-ssr-support.js +0 -54
- package/dist/lit-html/static.d.ts +0 -58
- package/dist/lit-html/static.js +0 -114
- package/dist/reactive-element/css-tag.d.ts +0 -64
- package/dist/reactive-element/css-tag.js +0 -125
- package/dist/reactive-element/decorators/base.d.ts +0 -47
- package/dist/reactive-element/decorators/base.js +0 -70
- package/dist/reactive-element/decorators/custom-element.d.ts +0 -26
- package/dist/reactive-element/decorators/custom-element.js +0 -47
- package/dist/reactive-element/decorators/event-options.d.ts +0 -37
- package/dist/reactive-element/decorators/event-options.js +0 -47
- package/dist/reactive-element/decorators/index.d.ts +0 -14
- package/dist/reactive-element/decorators/index.js +0 -32
- package/dist/reactive-element/decorators/property.d.ts +0 -40
- package/dist/reactive-element/decorators/property.js +0 -92
- package/dist/reactive-element/decorators/query-all.d.ts +0 -31
- package/dist/reactive-element/decorators/query-all.js +0 -46
- package/dist/reactive-element/decorators/query-assigned-nodes.d.ts +0 -33
- package/dist/reactive-element/decorators/query-assigned-nodes.js +0 -55
- package/dist/reactive-element/decorators/query-async.d.ts +0 -39
- package/dist/reactive-element/decorators/query-async.js +0 -71
- package/dist/reactive-element/decorators/query.d.ts +0 -32
- package/dist/reactive-element/decorators/query.js +0 -60
- package/dist/reactive-element/decorators/state.d.ts +0 -24
- package/dist/reactive-element/decorators/state.js +0 -29
- package/dist/reactive-element/index.d.ts +0 -5
- package/dist/reactive-element/index.js +0 -17
- package/dist/reactive-element/polyfill-support.d.ts +0 -40
- package/dist/reactive-element/polyfill-support.js +0 -89
- package/dist/reactive-element/reactive-controller.d.ts +0 -76
- package/dist/reactive-element/reactive-controller.js +0 -7
- package/dist/reactive-element/reactive-element.d.ts +0 -653
- 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;
|