@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.
- 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,64 +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.unsafeHTML = exports.UnsafeHTMLDirective = void 0;
|
|
9
|
-
const lit_html_1 = require("../lit-html");
|
|
10
|
-
const directive_1 = require("../directive");
|
|
11
|
-
const HTML_RESULT = 1;
|
|
12
|
-
class UnsafeHTMLDirective extends directive_1.Directive {
|
|
13
|
-
constructor(partInfo) {
|
|
14
|
-
super(partInfo);
|
|
15
|
-
this._value = lit_html_1.nothing;
|
|
16
|
-
if (partInfo.type !== directive_1.PartType.CHILD) {
|
|
17
|
-
throw new Error(`${this.constructor.directiveName}() can only be used in child bindings`);
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
render(value) {
|
|
21
|
-
if (value === lit_html_1.nothing || value == null) {
|
|
22
|
-
this._templateResult = undefined;
|
|
23
|
-
return (this._value = value);
|
|
24
|
-
}
|
|
25
|
-
if (value === lit_html_1.noChange) {
|
|
26
|
-
return value;
|
|
27
|
-
}
|
|
28
|
-
if (typeof value != 'string') {
|
|
29
|
-
throw new Error(`${this.constructor.directiveName}() called with a non-string value`);
|
|
30
|
-
}
|
|
31
|
-
if (value === this._value) {
|
|
32
|
-
return this._templateResult;
|
|
33
|
-
}
|
|
34
|
-
this._value = value;
|
|
35
|
-
const strings = [value];
|
|
36
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
37
|
-
strings.raw = strings;
|
|
38
|
-
// WARNING: impersonating a TemplateResult like this is extremely
|
|
39
|
-
// dangerous. Third-party directives should not do this.
|
|
40
|
-
return (this._templateResult = {
|
|
41
|
-
// Cast to a known set of integers that satisfy ResultType so that we
|
|
42
|
-
// don't have to export ResultType and possibly encourage this pattern.
|
|
43
|
-
// This property needs to remain unminified.
|
|
44
|
-
['_$litType$']: this.constructor
|
|
45
|
-
.resultType,
|
|
46
|
-
strings,
|
|
47
|
-
values: [],
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
exports.UnsafeHTMLDirective = UnsafeHTMLDirective;
|
|
52
|
-
UnsafeHTMLDirective.directiveName = 'unsafeHTML';
|
|
53
|
-
UnsafeHTMLDirective.resultType = HTML_RESULT;
|
|
54
|
-
/**
|
|
55
|
-
* Renders the result as HTML, rather than text.
|
|
56
|
-
*
|
|
57
|
-
* The values `undefined`, `null`, and `nothing`, will all result in no content
|
|
58
|
-
* (empty string) being rendered.
|
|
59
|
-
*
|
|
60
|
-
* Note, this is unsafe to use with any user-provided input that hasn't been
|
|
61
|
-
* sanitized or escaped, as it may lead to cross-site-scripting
|
|
62
|
-
* vulnerabilities.
|
|
63
|
-
*/
|
|
64
|
-
exports.unsafeHTML = (0, directive_1.directive)(UnsafeHTMLDirective);
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright 2017 Google LLC
|
|
4
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
-
*/
|
|
6
|
-
import { UnsafeHTMLDirective } from './unsafe-html';
|
|
7
|
-
declare class UnsafeSVGDirective extends UnsafeHTMLDirective {
|
|
8
|
-
static directiveName: string;
|
|
9
|
-
static resultType: number;
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* Renders the result as SVG, rather than text.
|
|
13
|
-
*
|
|
14
|
-
* The values `undefined`, `null`, and `nothing`, will all result in no content
|
|
15
|
-
* (empty string) being rendered.
|
|
16
|
-
*
|
|
17
|
-
* Note, this is unsafe to use with any user-provided input that hasn't been
|
|
18
|
-
* sanitized or escaped, as it may lead to cross-site-scripting
|
|
19
|
-
* vulnerabilities.
|
|
20
|
-
*/
|
|
21
|
-
export declare const unsafeSVG: (value: string | typeof import("../lit-html").noChange | typeof import("../lit-html").nothing) => import("../directive").DirectiveResult<typeof UnsafeSVGDirective>;
|
|
22
|
-
/**
|
|
23
|
-
* The type of the class that powers this directive. Necessary for naming the
|
|
24
|
-
* directive's return type.
|
|
25
|
-
*/
|
|
26
|
-
export type { UnsafeSVGDirective };
|
|
@@ -1,26 +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.unsafeSVG = void 0;
|
|
9
|
-
const directive_1 = require("../directive");
|
|
10
|
-
const unsafe_html_1 = require("./unsafe-html");
|
|
11
|
-
const SVG_RESULT = 2;
|
|
12
|
-
class UnsafeSVGDirective extends unsafe_html_1.UnsafeHTMLDirective {
|
|
13
|
-
}
|
|
14
|
-
UnsafeSVGDirective.directiveName = 'unsafeSVG';
|
|
15
|
-
UnsafeSVGDirective.resultType = SVG_RESULT;
|
|
16
|
-
/**
|
|
17
|
-
* Renders the result as SVG, rather than text.
|
|
18
|
-
*
|
|
19
|
-
* The values `undefined`, `null`, and `nothing`, will all result in no content
|
|
20
|
-
* (empty string) being rendered.
|
|
21
|
-
*
|
|
22
|
-
* Note, this is unsafe to use with any user-provided input that hasn't been
|
|
23
|
-
* sanitized or escaped, as it may lead to cross-site-scripting
|
|
24
|
-
* vulnerabilities.
|
|
25
|
-
*/
|
|
26
|
-
exports.unsafeSVG = (0, directive_1.directive)(UnsafeSVGDirective);
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright 2017 Google LLC
|
|
4
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
-
*/
|
|
6
|
-
import { Part } from '../lit-html';
|
|
7
|
-
import { AsyncDirective } from '../async-directive';
|
|
8
|
-
export declare class UntilDirective extends AsyncDirective {
|
|
9
|
-
private __lastRenderedIndex;
|
|
10
|
-
private __values;
|
|
11
|
-
private __weakThis;
|
|
12
|
-
private __pauser;
|
|
13
|
-
render(...args: Array<unknown>): unknown;
|
|
14
|
-
update(_part: Part, args: Array<unknown>): unknown;
|
|
15
|
-
disconnected(): void;
|
|
16
|
-
reconnected(): void;
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* Renders one of a series of values, including Promises, to a Part.
|
|
20
|
-
*
|
|
21
|
-
* Values are rendered in priority order, with the first argument having the
|
|
22
|
-
* highest priority and the last argument having the lowest priority. If a
|
|
23
|
-
* value is a Promise, low-priority values will be rendered until it resolves.
|
|
24
|
-
*
|
|
25
|
-
* The priority of values can be used to create placeholder content for async
|
|
26
|
-
* data. For example, a Promise with pending content can be the first,
|
|
27
|
-
* highest-priority, argument, and a non_promise loading indicator template can
|
|
28
|
-
* be used as the second, lower-priority, argument. The loading indicator will
|
|
29
|
-
* render immediately, and the primary content will render when the Promise
|
|
30
|
-
* resolves.
|
|
31
|
-
*
|
|
32
|
-
* Example:
|
|
33
|
-
*
|
|
34
|
-
* ```js
|
|
35
|
-
* const content = fetch('./content.txt').then(r => r.text());
|
|
36
|
-
* html`${until(content, html`<span>Loading...</span>`)}`
|
|
37
|
-
* ```
|
|
38
|
-
*/
|
|
39
|
-
export declare const until: (...values: unknown[]) => import("../directive").DirectiveResult<typeof UntilDirective>;
|
|
40
|
-
/**
|
|
41
|
-
* The type of the class that powers this directive. Necessary for naming the
|
|
42
|
-
* directive's return type.
|
|
43
|
-
*/
|
|
@@ -1,137 +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.until = exports.UntilDirective = void 0;
|
|
18
|
-
const lit_html_1 = require("../lit-html");
|
|
19
|
-
const directive_1 = require("../directive");
|
|
20
|
-
const directive_helpers_1 = require("../directive-helpers");
|
|
21
|
-
const async_directive_1 = require("../async-directive");
|
|
22
|
-
const private_async_helpers_1 = require("./private-async-helpers");
|
|
23
|
-
const isPromise = (x) => {
|
|
24
|
-
return !(0, directive_helpers_1.isPrimitive)(x) && typeof x.then === 'function';
|
|
25
|
-
};
|
|
26
|
-
// Effectively infinity, but a SMI.
|
|
27
|
-
const _infinity = 0x3fffffff;
|
|
28
|
-
class UntilDirective extends async_directive_1.AsyncDirective {
|
|
29
|
-
constructor() {
|
|
30
|
-
super(...arguments);
|
|
31
|
-
this.__lastRenderedIndex = _infinity;
|
|
32
|
-
this.__values = [];
|
|
33
|
-
this.__weakThis = new private_async_helpers_1.PseudoWeakRef(this);
|
|
34
|
-
this.__pauser = new private_async_helpers_1.Pauser();
|
|
35
|
-
}
|
|
36
|
-
render(...args) {
|
|
37
|
-
var _a;
|
|
38
|
-
return (_a = args.find((x) => !isPromise(x))) !== null && _a !== void 0 ? _a : lit_html_1.noChange;
|
|
39
|
-
}
|
|
40
|
-
update(_part, args) {
|
|
41
|
-
const previousValues = this.__values;
|
|
42
|
-
let previousLength = previousValues.length;
|
|
43
|
-
this.__values = args;
|
|
44
|
-
const weakThis = this.__weakThis;
|
|
45
|
-
const pauser = this.__pauser;
|
|
46
|
-
// If our initial render occurs while disconnected, ensure that the pauser
|
|
47
|
-
// and weakThis are in the disconnected state
|
|
48
|
-
if (!this.isConnected) {
|
|
49
|
-
this.disconnected();
|
|
50
|
-
}
|
|
51
|
-
for (let i = 0; i < args.length; i++) {
|
|
52
|
-
// If we've rendered a higher-priority value already, stop.
|
|
53
|
-
if (i > this.__lastRenderedIndex) {
|
|
54
|
-
break;
|
|
55
|
-
}
|
|
56
|
-
const value = args[i];
|
|
57
|
-
// Render non-Promise values immediately
|
|
58
|
-
if (!isPromise(value)) {
|
|
59
|
-
this.__lastRenderedIndex = i;
|
|
60
|
-
// Since a lower-priority value will never overwrite a higher-priority
|
|
61
|
-
// synchronous value, we can stop processing now.
|
|
62
|
-
return value;
|
|
63
|
-
}
|
|
64
|
-
// If this is a Promise we've already handled, skip it.
|
|
65
|
-
if (i < previousLength && value === previousValues[i]) {
|
|
66
|
-
continue;
|
|
67
|
-
}
|
|
68
|
-
// We have a Promise that we haven't seen before, so priorities may have
|
|
69
|
-
// changed. Forget what we rendered before.
|
|
70
|
-
this.__lastRenderedIndex = _infinity;
|
|
71
|
-
previousLength = 0;
|
|
72
|
-
// Note, the callback avoids closing over `this` so that the directive
|
|
73
|
-
// can be gc'ed before the promise resolves; instead `this` is retrieved
|
|
74
|
-
// from `weakThis`, which can break the hard reference in the closure when
|
|
75
|
-
// the directive disconnects
|
|
76
|
-
Promise.resolve(value).then((result) => __awaiter(this, void 0, void 0, function* () {
|
|
77
|
-
// If we're disconnected, wait until we're (maybe) reconnected
|
|
78
|
-
// The while loop here handles the case that the connection state
|
|
79
|
-
// thrashes, causing the pauser to resume and then get re-paused
|
|
80
|
-
while (pauser.get()) {
|
|
81
|
-
yield pauser.get();
|
|
82
|
-
}
|
|
83
|
-
// If the callback gets here and there is no `this`, it means that the
|
|
84
|
-
// directive has been disconnected and garbage collected and we don't
|
|
85
|
-
// need to do anything else
|
|
86
|
-
const _this = weakThis.deref();
|
|
87
|
-
if (_this !== undefined) {
|
|
88
|
-
const index = _this.__values.indexOf(value);
|
|
89
|
-
// If state.values doesn't contain the value, we've re-rendered without
|
|
90
|
-
// the value, so don't render it. Then, only render if the value is
|
|
91
|
-
// higher-priority than what's already been rendered.
|
|
92
|
-
if (index > -1 && index < _this.__lastRenderedIndex) {
|
|
93
|
-
_this.__lastRenderedIndex = index;
|
|
94
|
-
_this.setValue(result);
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
}));
|
|
98
|
-
}
|
|
99
|
-
return lit_html_1.noChange;
|
|
100
|
-
}
|
|
101
|
-
disconnected() {
|
|
102
|
-
this.__weakThis.disconnect();
|
|
103
|
-
this.__pauser.pause();
|
|
104
|
-
}
|
|
105
|
-
reconnected() {
|
|
106
|
-
this.__weakThis.reconnect(this);
|
|
107
|
-
this.__pauser.resume();
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
exports.UntilDirective = UntilDirective;
|
|
111
|
-
/**
|
|
112
|
-
* Renders one of a series of values, including Promises, to a Part.
|
|
113
|
-
*
|
|
114
|
-
* Values are rendered in priority order, with the first argument having the
|
|
115
|
-
* highest priority and the last argument having the lowest priority. If a
|
|
116
|
-
* value is a Promise, low-priority values will be rendered until it resolves.
|
|
117
|
-
*
|
|
118
|
-
* The priority of values can be used to create placeholder content for async
|
|
119
|
-
* data. For example, a Promise with pending content can be the first,
|
|
120
|
-
* highest-priority, argument, and a non_promise loading indicator template can
|
|
121
|
-
* be used as the second, lower-priority, argument. The loading indicator will
|
|
122
|
-
* render immediately, and the primary content will render when the Promise
|
|
123
|
-
* resolves.
|
|
124
|
-
*
|
|
125
|
-
* Example:
|
|
126
|
-
*
|
|
127
|
-
* ```js
|
|
128
|
-
* const content = fetch('./content.txt').then(r => r.text());
|
|
129
|
-
* html`${until(content, html`<span>Loading...</span>`)}`
|
|
130
|
-
* ```
|
|
131
|
-
*/
|
|
132
|
-
exports.until = (0, directive_1.directive)(UntilDirective);
|
|
133
|
-
/**
|
|
134
|
-
* The type of the class that powers this directive. Necessary for naming the
|
|
135
|
-
* directive's return type.
|
|
136
|
-
*/
|
|
137
|
-
// export type {UntilDirective};
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright 2019 Google LLC
|
|
4
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
-
*/
|
|
6
|
-
import type { TemplateResult } from './lit-html';
|
|
7
|
-
import { RenderOptions } from './lit-html';
|
|
8
|
-
/**
|
|
9
|
-
* hydrate() operates on a container with server-side rendered content and
|
|
10
|
-
* restores the client side data structures needed for lit-html updates such as
|
|
11
|
-
* TemplateInstances and Parts. After calling `hydrate`, lit-html will behave as
|
|
12
|
-
* if it initially rendered the DOM, and any subsequent updates will update
|
|
13
|
-
* efficiently, the same as if lit-html had rendered the DOM on the client.
|
|
14
|
-
*
|
|
15
|
-
* hydrate() must be called on DOM that adheres the to lit-ssr structure for
|
|
16
|
-
* parts. ChildParts must be represented with both a start and end comment
|
|
17
|
-
* marker, and ChildParts that contain a TemplateInstance must have the template
|
|
18
|
-
* digest written into the comment data.
|
|
19
|
-
*
|
|
20
|
-
* Since render() encloses its output in a ChildPart, there must always be a root
|
|
21
|
-
* ChildPart.
|
|
22
|
-
*
|
|
23
|
-
* Example (using for # ... for annotations in HTML)
|
|
24
|
-
*
|
|
25
|
-
* Given this input:
|
|
26
|
-
*
|
|
27
|
-
* html`<div class=${x}>${y}</div>`
|
|
28
|
-
*
|
|
29
|
-
* The SSR DOM is:
|
|
30
|
-
*
|
|
31
|
-
* <!--lit-part AEmR7W+R0Ak=--> # Start marker for the root ChildPart created
|
|
32
|
-
* # by render(). Includes the digest of the
|
|
33
|
-
* # template
|
|
34
|
-
* <div class="TEST_X">
|
|
35
|
-
* <!--lit-node 0--> # Indicates there are attribute bindings here
|
|
36
|
-
* # The number is the depth-first index of the parent
|
|
37
|
-
* # node in the template.
|
|
38
|
-
* <!--lit-part--> # Start marker for the ${x} expression
|
|
39
|
-
* TEST_Y
|
|
40
|
-
* <!--/lit-part--> # End marker for the ${x} expression
|
|
41
|
-
* </div>
|
|
42
|
-
*
|
|
43
|
-
* <!--/lit-part--> # End marker for the root ChildPart
|
|
44
|
-
*
|
|
45
|
-
* @param rootValue
|
|
46
|
-
* @param container
|
|
47
|
-
* @param userOptions
|
|
48
|
-
*/
|
|
49
|
-
export declare const hydrate: (rootValue: unknown, container: Element | DocumentFragment, options?: Partial<RenderOptions>) => void;
|
|
50
|
-
export declare const digestForTemplateResult: (templateResult: TemplateResult) => string;
|
|
@@ -1,322 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
/**
|
|
3
|
-
* @license
|
|
4
|
-
* Copyright 2019 Google LLC
|
|
5
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
6
|
-
*/
|
|
7
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
8
|
-
exports.digestForTemplateResult = exports.hydrate = 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
|
-
const { _TemplateInstance: TemplateInstance, _isIterable: isIterable, _resolveDirective: resolveDirective, _ChildPart: ChildPart, _ElementPart: ElementPart, } = lit_html_1._$LH;
|
|
13
|
-
/**
|
|
14
|
-
* hydrate() operates on a container with server-side rendered content and
|
|
15
|
-
* restores the client side data structures needed for lit-html updates such as
|
|
16
|
-
* TemplateInstances and Parts. After calling `hydrate`, lit-html will behave as
|
|
17
|
-
* if it initially rendered the DOM, and any subsequent updates will update
|
|
18
|
-
* efficiently, the same as if lit-html had rendered the DOM on the client.
|
|
19
|
-
*
|
|
20
|
-
* hydrate() must be called on DOM that adheres the to lit-ssr structure for
|
|
21
|
-
* parts. ChildParts must be represented with both a start and end comment
|
|
22
|
-
* marker, and ChildParts that contain a TemplateInstance must have the template
|
|
23
|
-
* digest written into the comment data.
|
|
24
|
-
*
|
|
25
|
-
* Since render() encloses its output in a ChildPart, there must always be a root
|
|
26
|
-
* ChildPart.
|
|
27
|
-
*
|
|
28
|
-
* Example (using for # ... for annotations in HTML)
|
|
29
|
-
*
|
|
30
|
-
* Given this input:
|
|
31
|
-
*
|
|
32
|
-
* html`<div class=${x}>${y}</div>`
|
|
33
|
-
*
|
|
34
|
-
* The SSR DOM is:
|
|
35
|
-
*
|
|
36
|
-
* <!--lit-part AEmR7W+R0Ak=--> # Start marker for the root ChildPart created
|
|
37
|
-
* # by render(). Includes the digest of the
|
|
38
|
-
* # template
|
|
39
|
-
* <div class="TEST_X">
|
|
40
|
-
* <!--lit-node 0--> # Indicates there are attribute bindings here
|
|
41
|
-
* # The number is the depth-first index of the parent
|
|
42
|
-
* # node in the template.
|
|
43
|
-
* <!--lit-part--> # Start marker for the ${x} expression
|
|
44
|
-
* TEST_Y
|
|
45
|
-
* <!--/lit-part--> # End marker for the ${x} expression
|
|
46
|
-
* </div>
|
|
47
|
-
*
|
|
48
|
-
* <!--/lit-part--> # End marker for the root ChildPart
|
|
49
|
-
*
|
|
50
|
-
* @param rootValue
|
|
51
|
-
* @param container
|
|
52
|
-
* @param userOptions
|
|
53
|
-
*/
|
|
54
|
-
const hydrate = (rootValue, container, options = {}) => {
|
|
55
|
-
// TODO(kschaaf): Do we need a helper for _$litPart$ ("part for node")?
|
|
56
|
-
// This property needs to remain unminified.
|
|
57
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
58
|
-
if (container['_$litPart$'] !== undefined) {
|
|
59
|
-
throw new Error('container already contains a live render');
|
|
60
|
-
}
|
|
61
|
-
// Since render() creates a ChildPart to render into, we'll always have
|
|
62
|
-
// exactly one root part. We need to hold a reference to it so we can set
|
|
63
|
-
// it in the parts cache.
|
|
64
|
-
let rootPart = undefined;
|
|
65
|
-
// When we are in-between ChildPart markers, this is the current ChildPart.
|
|
66
|
-
// It's needed to be able to set the ChildPart's endNode when we see a
|
|
67
|
-
// close marker
|
|
68
|
-
let currentChildPart = undefined;
|
|
69
|
-
// Used to remember parent template state as we recurse into nested
|
|
70
|
-
// templates
|
|
71
|
-
const stack = [];
|
|
72
|
-
const walker = document.createTreeWalker(container, NodeFilter.SHOW_COMMENT, null, false);
|
|
73
|
-
let marker;
|
|
74
|
-
// Walk the DOM looking for part marker comments
|
|
75
|
-
while ((marker = walker.nextNode()) !== null) {
|
|
76
|
-
const markerText = marker.data;
|
|
77
|
-
if (markerText.startsWith('lit-part')) {
|
|
78
|
-
if (stack.length === 0 && rootPart !== undefined) {
|
|
79
|
-
throw new Error('there must be only one root part per container');
|
|
80
|
-
}
|
|
81
|
-
// Create a new ChildPart and push it onto the stack
|
|
82
|
-
currentChildPart = openChildPart(rootValue, marker, stack, options);
|
|
83
|
-
rootPart !== null && rootPart !== void 0 ? rootPart : (rootPart = currentChildPart);
|
|
84
|
-
}
|
|
85
|
-
else if (markerText.startsWith('lit-node')) {
|
|
86
|
-
// Create and hydrate attribute parts into the current ChildPart on the
|
|
87
|
-
// stack
|
|
88
|
-
createAttributeParts(marker, stack, options);
|
|
89
|
-
// Remove `defer-hydration` attribute, if any
|
|
90
|
-
const parent = marker.parentElement;
|
|
91
|
-
if (parent.hasAttribute('defer-hydration')) {
|
|
92
|
-
parent.removeAttribute('defer-hydration');
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
else if (markerText.startsWith('/lit-part')) {
|
|
96
|
-
// Close the current ChildPart, and pop the previous one off the stack
|
|
97
|
-
if (stack.length === 1 && currentChildPart !== rootPart) {
|
|
98
|
-
throw new Error('internal error');
|
|
99
|
-
}
|
|
100
|
-
currentChildPart = closeChildPart(marker, currentChildPart, stack);
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
console.assert(rootPart !== undefined, 'there should be exactly one root part in a render container');
|
|
104
|
-
// This property needs to remain unminified.
|
|
105
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
106
|
-
container['_$litPart$'] = rootPart;
|
|
107
|
-
};
|
|
108
|
-
exports.hydrate = hydrate;
|
|
109
|
-
const openChildPart = (rootValue, marker, stack, options) => {
|
|
110
|
-
let value;
|
|
111
|
-
// We know the startNode now. We'll know the endNode when we get to
|
|
112
|
-
// the matching marker and set it in closeChildPart()
|
|
113
|
-
// TODO(kschaaf): Current constructor takes both nodes
|
|
114
|
-
let part;
|
|
115
|
-
if (stack.length === 0) {
|
|
116
|
-
part = new ChildPart(marker, null, undefined, options);
|
|
117
|
-
value = rootValue;
|
|
118
|
-
}
|
|
119
|
-
else {
|
|
120
|
-
const state = stack[stack.length - 1];
|
|
121
|
-
if (state.type === 'template-instance') {
|
|
122
|
-
part = new ChildPart(marker, null, state.instance, options);
|
|
123
|
-
state.instance._parts.push(part);
|
|
124
|
-
value = state.result.values[state.instancePartIndex++];
|
|
125
|
-
state.templatePartIndex++;
|
|
126
|
-
}
|
|
127
|
-
else if (state.type === 'iterable') {
|
|
128
|
-
part = new ChildPart(marker, null, state.part, options);
|
|
129
|
-
const result = state.iterator.next();
|
|
130
|
-
if (result.done) {
|
|
131
|
-
value = undefined;
|
|
132
|
-
state.done = true;
|
|
133
|
-
throw new Error('Unhandled shorter than expected iterable');
|
|
134
|
-
}
|
|
135
|
-
else {
|
|
136
|
-
value = result.value;
|
|
137
|
-
}
|
|
138
|
-
state.part._$committedValue.push(part);
|
|
139
|
-
}
|
|
140
|
-
else {
|
|
141
|
-
// state.type === 'leaf'
|
|
142
|
-
// TODO(kschaaf): This is unexpected, and likely a result of a primitive
|
|
143
|
-
// been rendered on the client when a TemplateResult was rendered on the
|
|
144
|
-
// server; this part will be hydrated but not used. We can detect it, but
|
|
145
|
-
// we need to decide what to do in this case. Note that this part won't be
|
|
146
|
-
// retained by any parent TemplateInstance, since a primitive had been
|
|
147
|
-
// rendered in its place.
|
|
148
|
-
// https://github.com/lit/lit/issues/1434
|
|
149
|
-
// throw new Error('Hydration value mismatch: Found a TemplateInstance' +
|
|
150
|
-
// 'where a leaf value was expected');
|
|
151
|
-
part = new ChildPart(marker, null, state.part, options);
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
// Initialize the ChildPart state depending on the type of value and push
|
|
155
|
-
// it onto the stack. This logic closely follows the ChildPart commit()
|
|
156
|
-
// cascade order:
|
|
157
|
-
// 1. directive
|
|
158
|
-
// 2. noChange
|
|
159
|
-
// 3. primitive (note strings must be handled before iterables, since they
|
|
160
|
-
// are iterable)
|
|
161
|
-
// 4. TemplateResult
|
|
162
|
-
// 5. Node (not yet implemented, but fallback handling is fine)
|
|
163
|
-
// 6. Iterable
|
|
164
|
-
// 7. nothing (handled in fallback)
|
|
165
|
-
// 8. Fallback for everything else
|
|
166
|
-
value = resolveDirective(part, value);
|
|
167
|
-
if (value === lit_html_1.noChange) {
|
|
168
|
-
stack.push({ part, type: 'leaf' });
|
|
169
|
-
}
|
|
170
|
-
else if ((0, directive_helpers_1.isPrimitive)(value)) {
|
|
171
|
-
stack.push({ part, type: 'leaf' });
|
|
172
|
-
part._$committedValue = value;
|
|
173
|
-
// TODO(kschaaf): We can detect when a primitive is being hydrated on the
|
|
174
|
-
// client where a TemplateResult was rendered on the server, but we need to
|
|
175
|
-
// decide on a strategy for what to do next.
|
|
176
|
-
// https://github.com/lit/lit/issues/1434
|
|
177
|
-
// if (marker.data !== 'lit-part') {
|
|
178
|
-
// throw new Error('Hydration value mismatch: Primitive found where TemplateResult expected');
|
|
179
|
-
// }
|
|
180
|
-
}
|
|
181
|
-
else if ((0, directive_helpers_1.isTemplateResult)(value)) {
|
|
182
|
-
// Check for a template result digest
|
|
183
|
-
const markerWithDigest = `lit-part ${(0, exports.digestForTemplateResult)(value)}`;
|
|
184
|
-
if (marker.data === markerWithDigest) {
|
|
185
|
-
const template = ChildPart.prototype._$getTemplate(value);
|
|
186
|
-
const instance = new TemplateInstance(template, part);
|
|
187
|
-
stack.push({
|
|
188
|
-
type: 'template-instance',
|
|
189
|
-
instance,
|
|
190
|
-
part,
|
|
191
|
-
templatePartIndex: 0,
|
|
192
|
-
instancePartIndex: 0,
|
|
193
|
-
result: value,
|
|
194
|
-
});
|
|
195
|
-
// For TemplateResult values, we set the part value to the
|
|
196
|
-
// generated TemplateInstance
|
|
197
|
-
part._$committedValue = instance;
|
|
198
|
-
}
|
|
199
|
-
else {
|
|
200
|
-
// TODO: if this isn't the server-rendered template, do we
|
|
201
|
-
// need to stop hydrating this subtree? Clear it? Add tests.
|
|
202
|
-
throw new Error('Hydration value mismatch: Unexpected TemplateResult rendered to part');
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
else if (isIterable(value)) {
|
|
206
|
-
// currentChildPart.value will contain an array of ChildParts
|
|
207
|
-
stack.push({
|
|
208
|
-
part: part,
|
|
209
|
-
type: 'iterable',
|
|
210
|
-
value,
|
|
211
|
-
iterator: value[Symbol.iterator](),
|
|
212
|
-
done: false,
|
|
213
|
-
});
|
|
214
|
-
part._$committedValue = [];
|
|
215
|
-
}
|
|
216
|
-
else {
|
|
217
|
-
// Fallback for everything else (nothing, Objects, Functions,
|
|
218
|
-
// etc.): we just initialize the part's value
|
|
219
|
-
// Note that `Node` value types are not currently supported during
|
|
220
|
-
// SSR, so that part of the cascade is missing.
|
|
221
|
-
stack.push({ part: part, type: 'leaf' });
|
|
222
|
-
part._$committedValue = value == null ? '' : value;
|
|
223
|
-
}
|
|
224
|
-
return part;
|
|
225
|
-
};
|
|
226
|
-
const closeChildPart = (marker, part, stack) => {
|
|
227
|
-
if (part === undefined) {
|
|
228
|
-
throw new Error('unbalanced part marker');
|
|
229
|
-
}
|
|
230
|
-
part._$endNode = marker;
|
|
231
|
-
const currentState = stack.pop();
|
|
232
|
-
if (currentState.type === 'iterable') {
|
|
233
|
-
if (!currentState.iterator.next().done) {
|
|
234
|
-
throw new Error('unexpected longer than expected iterable');
|
|
235
|
-
}
|
|
236
|
-
}
|
|
237
|
-
if (stack.length > 0) {
|
|
238
|
-
const state = stack[stack.length - 1];
|
|
239
|
-
return state.part;
|
|
240
|
-
}
|
|
241
|
-
else {
|
|
242
|
-
return undefined;
|
|
243
|
-
}
|
|
244
|
-
};
|
|
245
|
-
const createAttributeParts = (comment, stack, options) => {
|
|
246
|
-
var _a;
|
|
247
|
-
// Get the nodeIndex from DOM. We're only using this for an integrity
|
|
248
|
-
// check right now, we might not need it.
|
|
249
|
-
const match = /lit-node (\d+)/.exec(comment.data);
|
|
250
|
-
const nodeIndex = parseInt(match[1]);
|
|
251
|
-
// For void elements, the node the comment was referring to will be
|
|
252
|
-
// the previousSibling; for non-void elements, the comment is guaranteed
|
|
253
|
-
// to be the first child of the element (i.e. it won't have a previousSibling
|
|
254
|
-
// meaning it should use the parentElement)
|
|
255
|
-
const node = (_a = comment.previousSibling) !== null && _a !== void 0 ? _a : comment.parentElement;
|
|
256
|
-
const state = stack[stack.length - 1];
|
|
257
|
-
if (state.type === 'template-instance') {
|
|
258
|
-
const instance = state.instance;
|
|
259
|
-
// eslint-disable-next-line no-constant-condition
|
|
260
|
-
while (true) {
|
|
261
|
-
// If the next template part is in attribute-position on the current node,
|
|
262
|
-
// create the instance part for it and prime its state
|
|
263
|
-
const templatePart = instance._$template.parts[state.templatePartIndex];
|
|
264
|
-
if (templatePart === undefined ||
|
|
265
|
-
(templatePart.type !== directive_1.PartType.ATTRIBUTE &&
|
|
266
|
-
templatePart.type !== directive_1.PartType.ELEMENT) ||
|
|
267
|
-
templatePart.index !== nodeIndex) {
|
|
268
|
-
break;
|
|
269
|
-
}
|
|
270
|
-
if (templatePart.type === directive_1.PartType.ATTRIBUTE) {
|
|
271
|
-
// The instance part is created based on the constructor saved in the
|
|
272
|
-
// template part
|
|
273
|
-
const instancePart = new templatePart.ctor(node, templatePart.name, templatePart.strings, state.instance, options);
|
|
274
|
-
const value = (0, directive_helpers_1.isSingleExpression)(instancePart)
|
|
275
|
-
? state.result.values[state.instancePartIndex]
|
|
276
|
-
: state.result.values;
|
|
277
|
-
// Setting the attribute value primes committed value with the resolved
|
|
278
|
-
// directive value; we only then commit that value for event/property
|
|
279
|
-
// parts since those were not serialized, and pass `noCommit` for the
|
|
280
|
-
// others to avoid perf impact of touching the DOM unnecessarily
|
|
281
|
-
const noCommit = !(instancePart.type === directive_1.PartType.EVENT ||
|
|
282
|
-
instancePart.type === directive_1.PartType.PROPERTY);
|
|
283
|
-
instancePart._$setValue(value, instancePart, state.instancePartIndex, noCommit);
|
|
284
|
-
state.instancePartIndex += templatePart.strings.length - 1;
|
|
285
|
-
instance._parts.push(instancePart);
|
|
286
|
-
}
|
|
287
|
-
else {
|
|
288
|
-
// templatePart.type === PartType.ELEMENT
|
|
289
|
-
const instancePart = new ElementPart(node, state.instance, options);
|
|
290
|
-
resolveDirective(instancePart, state.result.values[state.instancePartIndex++]);
|
|
291
|
-
instance._parts.push(instancePart);
|
|
292
|
-
}
|
|
293
|
-
state.templatePartIndex++;
|
|
294
|
-
}
|
|
295
|
-
}
|
|
296
|
-
else {
|
|
297
|
-
throw new Error('internal error');
|
|
298
|
-
}
|
|
299
|
-
};
|
|
300
|
-
// Number of 32 bit elements to use to create template digests
|
|
301
|
-
const digestSize = 2;
|
|
302
|
-
// We need to specify a digest to use across rendering environments. This is a
|
|
303
|
-
// simple digest build from a DJB2-ish hash modified from:
|
|
304
|
-
// https://github.com/darkskyapp/string-hash/blob/master/index
|
|
305
|
-
// It has been changed to an array of hashes to add additional bits.
|
|
306
|
-
// Goals:
|
|
307
|
-
// - Extremely low collision rate. We may not be able to detect collisions.
|
|
308
|
-
// - Extremely fast.
|
|
309
|
-
// - Extremely small code size.
|
|
310
|
-
// - Safe to include in HTML comment text or attribute value.
|
|
311
|
-
// - Easily specifiable and implementable in multiple languages.
|
|
312
|
-
// We don't care about cryptographic suitability.
|
|
313
|
-
const digestForTemplateResult = (templateResult) => {
|
|
314
|
-
const hashes = new Uint32Array(digestSize).fill(5381);
|
|
315
|
-
for (const s of templateResult.strings) {
|
|
316
|
-
for (let i = 0; i < s.length; i++) {
|
|
317
|
-
hashes[i % digestSize] = (hashes[i % digestSize] * 33) ^ s.charCodeAt(i);
|
|
318
|
-
}
|
|
319
|
-
}
|
|
320
|
-
return btoa(String.fromCharCode(...new Uint8Array(hashes.buffer)));
|
|
321
|
-
};
|
|
322
|
-
exports.digestForTemplateResult = digestForTemplateResult;
|