@rxdi/lit-html 0.7.140 → 0.7.143
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.
|
@@ -1,14 +1,25 @@
|
|
|
1
|
-
import { CSSResult } from '../reactive-element/css-tag';
|
|
2
1
|
import { TemplateResult } from '../lit-html/lit-html';
|
|
2
|
+
import { CSSResult } from '../reactive-element/css-tag';
|
|
3
|
+
export interface CustomAttributeRegistry {
|
|
4
|
+
define(name: string, modifier: Function | Modifier): void;
|
|
5
|
+
get(element: HTMLElement, attrName: string): any;
|
|
6
|
+
unsubscribe(): void;
|
|
7
|
+
}
|
|
8
|
+
export interface ModifierOptions {
|
|
9
|
+
selector: string;
|
|
10
|
+
registry?: CustomAttributeRegistry;
|
|
11
|
+
}
|
|
12
|
+
export interface Modifier extends Function {
|
|
13
|
+
options(): ModifierOptions;
|
|
14
|
+
}
|
|
3
15
|
export interface CustomElementConfig<T> {
|
|
4
16
|
selector: string;
|
|
5
|
-
template?: (
|
|
17
|
+
template?: (this: T) => TemplateResult;
|
|
6
18
|
style?: CSSResult;
|
|
7
19
|
styles?: CSSResult[];
|
|
8
20
|
extends?: string;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
})[];
|
|
21
|
+
registry?: (this: T) => CustomAttributeRegistry;
|
|
22
|
+
modifiers?: Modifier[];
|
|
12
23
|
/**
|
|
13
24
|
* Intended only for first render inside the DOM
|
|
14
25
|
* for example we want app-component to be rendered
|
|
@@ -14,9 +14,10 @@ const standardCustomElement = (tagName, descriptor, options) => {
|
|
|
14
14
|
// This callback is called once the class is otherwise fully defined
|
|
15
15
|
finisher(clazz) {
|
|
16
16
|
window.customElements.define(tagName, clazz, options);
|
|
17
|
-
}
|
|
17
|
+
}
|
|
18
18
|
};
|
|
19
19
|
};
|
|
20
|
+
const isFunction = (v) => typeof v === 'function';
|
|
20
21
|
const customElement = (tag, config = {}) => (Base) => {
|
|
21
22
|
var _a;
|
|
22
23
|
if (!tag || (tag && tag.indexOf('-') <= 0)) {
|
|
@@ -31,6 +32,7 @@ const customElement = (tag, config = {}) => (Base) => {
|
|
|
31
32
|
const disconnectedCallback = Base.prototype.disconnectedCallback || function () { };
|
|
32
33
|
const update = Base.prototype.update || function () { };
|
|
33
34
|
const firstUpdated = Base.prototype.firstUpdated || function () { };
|
|
35
|
+
let registry;
|
|
34
36
|
if (!config.template) {
|
|
35
37
|
config.template = Base.prototype.render || (() => (0, lit_html_1.html) ``);
|
|
36
38
|
}
|
|
@@ -65,17 +67,41 @@ const customElement = (tag, config = {}) => (Base) => {
|
|
|
65
67
|
disconnectedCallback() {
|
|
66
68
|
OnDestroy.call(this);
|
|
67
69
|
disconnectedCallback.call(this);
|
|
70
|
+
registry === null || registry === void 0 ? void 0 : registry.unsubscribe();
|
|
71
|
+
registry = null;
|
|
68
72
|
}
|
|
69
73
|
connectedCallback() {
|
|
74
|
+
var _a;
|
|
70
75
|
connectedCallback.call(this);
|
|
71
76
|
OnInit.call(this);
|
|
72
|
-
}
|
|
73
|
-
render() {
|
|
74
|
-
var _a;
|
|
75
77
|
if ((_a = config.modifiers) === null || _a === void 0 ? void 0 : _a.length) {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
+
for (const modifier of config.modifiers) {
|
|
79
|
+
if (!modifier) {
|
|
80
|
+
throw new Error(`Provided null value inside modifiers for component "${config.selector}"`);
|
|
81
|
+
}
|
|
82
|
+
if (!modifier.options) {
|
|
83
|
+
throw new Error(`Missing options for attribute inside ${modifier.name}`);
|
|
84
|
+
}
|
|
85
|
+
if (typeof modifier.options !== 'function') {
|
|
86
|
+
throw new Error(`Modifier options is not a function ${modifier.name} and component "${config.selector}"`);
|
|
87
|
+
}
|
|
88
|
+
const options = modifier.options.call(this);
|
|
89
|
+
if (!(options === null || options === void 0 ? void 0 : options.selector)) {
|
|
90
|
+
throw new Error(`Missing attribute name for ${modifier.name} inside component "${config.selector}"`);
|
|
91
|
+
}
|
|
92
|
+
if (!registry) {
|
|
93
|
+
registry = (isFunction(config.registry)
|
|
94
|
+
? config.registry.call(this)
|
|
95
|
+
: options.registry);
|
|
96
|
+
}
|
|
97
|
+
if (!registry) {
|
|
98
|
+
throw new Error(`Missing attribute registry for attribute "${options.selector}" and no default registry specified inside component "${config.selector}"`);
|
|
99
|
+
}
|
|
100
|
+
registry.define(options.selector, modifier);
|
|
101
|
+
}
|
|
78
102
|
}
|
|
103
|
+
}
|
|
104
|
+
render() {
|
|
79
105
|
return config.template.call(this);
|
|
80
106
|
}
|
|
81
107
|
update() {
|
|
@@ -92,21 +118,21 @@ const customElement = (tag, config = {}) => (Base) => {
|
|
|
92
118
|
const registeredElement = window.customElements.get(tag);
|
|
93
119
|
if (registeredElement) {
|
|
94
120
|
console.error(`** IMPORTANT!!! **
|
|
95
|
-
------------------------------------------
|
|
96
|
-
|
|
121
|
+
------------------------------------------
|
|
122
|
+
< ${tag} > </${tag}> Component re-defined multiple times and it is already registered inside customElements registry
|
|
97
123
|
Possible Solutions:
|
|
98
124
|
* Bundle problem where multiple versions of the component are used
|
|
99
|
-
* @Component decorator is used twice for the same component
|
|
100
|
-
* Defined "selector" with the same name in multiple components
|
|
125
|
+
* @Component decorator is used twice for the same component
|
|
126
|
+
* Defined "selector" with the same name in multiple components
|
|
101
127
|
|
|
102
|
-
** If this is Server Side Rendering you can ignore this message **
|
|
103
|
-
------------------------------------------
|
|
104
|
-
`);
|
|
128
|
+
** If this is Server Side Rendering you can ignore this message **
|
|
129
|
+
------------------------------------------
|
|
130
|
+
`);
|
|
105
131
|
return registeredElement;
|
|
106
132
|
}
|
|
107
133
|
if (typeof ModifiedClass === 'function') {
|
|
108
134
|
legacyCustomElement(tag, ModifiedClass, {
|
|
109
|
-
extends: config.extends
|
|
135
|
+
extends: config.extends
|
|
110
136
|
});
|
|
111
137
|
}
|
|
112
138
|
else {
|