@merkur/integration-custom-element 0.37.11 → 0.39.0
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/README.md +1 -1
- package/lib/index.cjs +56 -86
- package/lib/index.es9.cjs +28 -3
- package/lib/index.es9.mjs +28 -3
- package/lib/index.js +56 -86
- package/lib/index.mjs +56 -86
- package/lib/index.umd.js +1 -1
- package/package.json +5 -6
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<p align="center">
|
|
2
2
|
<a href="https://merkur.js.org/docs/getting-started" title="Getting started">
|
|
3
|
-
<img src="https://raw.githubusercontent.com/mjancarik/merkur/master/images/merkur-
|
|
3
|
+
<img src="https://raw.githubusercontent.com/mjancarik/merkur/master/images/merkur-logo.png" width="100px" height="100px" alt="Merkur illustration"/>
|
|
4
4
|
</a>
|
|
5
5
|
</p>
|
|
6
6
|
|
package/lib/index.cjs
CHANGED
|
@@ -6,22 +6,18 @@ var integration = require('@merkur/integration');
|
|
|
6
6
|
async function createSPAWidget(widgetDefinition, root) {
|
|
7
7
|
const definition = {
|
|
8
8
|
...widgetDefinition,
|
|
9
|
-
createWidget: widgetDefinition.createWidget
|
|
9
|
+
createWidget: widgetDefinition.createWidget
|
|
10
10
|
};
|
|
11
|
-
|
|
12
11
|
const merkur = core.getMerkur();
|
|
13
12
|
if (!merkur.isRegistered(definition.name + definition.version)) {
|
|
14
13
|
core.getMerkur().register(definition);
|
|
15
14
|
}
|
|
16
|
-
|
|
17
15
|
await afterDOMLoad();
|
|
18
16
|
await integration.loadAssets(definition.assets, root);
|
|
19
|
-
|
|
20
17
|
return await core.getMerkur().create(definition);
|
|
21
18
|
}
|
|
22
|
-
|
|
23
19
|
function afterDOMLoad() {
|
|
24
|
-
return new Promise(
|
|
20
|
+
return new Promise(resolve => {
|
|
25
21
|
if (typeof document !== 'undefined') {
|
|
26
22
|
if (document.readyState !== 'loading') {
|
|
27
23
|
resolve();
|
|
@@ -35,12 +31,13 @@ function afterDOMLoad() {
|
|
|
35
31
|
}
|
|
36
32
|
});
|
|
37
33
|
}
|
|
38
|
-
|
|
39
34
|
function registerCustomElement(options) {
|
|
40
|
-
const {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
35
|
+
const {
|
|
36
|
+
widgetDefinition,
|
|
37
|
+
callbacks,
|
|
38
|
+
observedAttributes,
|
|
39
|
+
attributesParser
|
|
40
|
+
} = deepMerge({}, options);
|
|
44
41
|
class HTMLCustomElement extends HTMLElement {
|
|
45
42
|
static get observedAttributes() {
|
|
46
43
|
return observedAttributes ?? [];
|
|
@@ -52,76 +49,59 @@ function registerCustomElement(options) {
|
|
|
52
49
|
}
|
|
53
50
|
_init() {}
|
|
54
51
|
}
|
|
55
|
-
|
|
56
52
|
class WidgetElement extends HTMLCustomElement {
|
|
57
53
|
_init() {
|
|
58
54
|
try {
|
|
59
55
|
super._init();
|
|
60
56
|
const customWidgetDefinition = deepMerge({}, widgetDefinition);
|
|
61
|
-
|
|
62
57
|
this._widgetPromise = (async () => {
|
|
63
|
-
this._shadow = this.attachShadow({
|
|
64
|
-
|
|
58
|
+
this._shadow = this.attachShadow({
|
|
59
|
+
mode: 'open'
|
|
60
|
+
});
|
|
65
61
|
try {
|
|
66
62
|
const widget = await callbacks?.getInstance?.();
|
|
67
|
-
|
|
68
63
|
if (widget && widget.name && widget.version) {
|
|
69
64
|
this._widget = widget;
|
|
70
|
-
|
|
71
65
|
await afterDOMLoad();
|
|
72
66
|
await integration.loadAssets(widget.assets, this._shadow);
|
|
73
|
-
|
|
67
|
+
this._setDefaultProps();
|
|
74
68
|
await callbacks?.reconstructor?.(this._widget, {
|
|
75
69
|
shadow: this._shadow,
|
|
76
|
-
customElement: this
|
|
70
|
+
customElement: this
|
|
77
71
|
});
|
|
78
|
-
|
|
79
72
|
if (typeof callbacks?.remount === 'function') {
|
|
80
73
|
await callbacks?.remount?.(this._widget, {
|
|
81
74
|
shadow: this._shadow,
|
|
82
|
-
customElement: this
|
|
75
|
+
customElement: this
|
|
83
76
|
});
|
|
84
77
|
} else {
|
|
85
78
|
widget.root = this._shadow;
|
|
86
79
|
widget.customElement = this;
|
|
87
80
|
this._shadow.appendChild(widget.container);
|
|
88
81
|
}
|
|
89
|
-
|
|
90
82
|
return;
|
|
91
83
|
}
|
|
92
84
|
} catch (error) {
|
|
93
85
|
console.error(error);
|
|
94
|
-
|
|
95
86
|
return;
|
|
96
87
|
}
|
|
97
|
-
|
|
98
88
|
try {
|
|
99
89
|
customWidgetDefinition.root = this._shadow;
|
|
100
90
|
customWidgetDefinition.customElement = this;
|
|
101
|
-
|
|
102
91
|
if (!customWidgetDefinition.container) {
|
|
103
92
|
customWidgetDefinition.container = document.createElement('div');
|
|
104
|
-
customWidgetDefinition.container.setAttribute(
|
|
105
|
-
'id',
|
|
106
|
-
'merkur-container',
|
|
107
|
-
);
|
|
93
|
+
customWidgetDefinition.container.setAttribute('id', 'merkur-container');
|
|
108
94
|
}
|
|
109
|
-
|
|
110
95
|
this._shadow.appendChild(customWidgetDefinition.container);
|
|
111
|
-
|
|
112
|
-
this.
|
|
113
|
-
customWidgetDefinition,
|
|
114
|
-
this._shadow,
|
|
115
|
-
);
|
|
116
|
-
|
|
96
|
+
this._widget = await createSPAWidget(customWidgetDefinition, this._shadow);
|
|
97
|
+
this._setDefaultProps();
|
|
117
98
|
await callbacks?.constructor?.(this._widget, {
|
|
118
99
|
shadow: this._shadow,
|
|
119
|
-
customElement: this
|
|
100
|
+
customElement: this
|
|
120
101
|
});
|
|
121
|
-
|
|
122
102
|
(await callbacks?.mount?.(this._widget, {
|
|
123
103
|
shadow: this._shadow,
|
|
124
|
-
customElement: this
|
|
104
|
+
customElement: this
|
|
125
105
|
})) ?? (await this._widget.mount());
|
|
126
106
|
} catch (error) {
|
|
127
107
|
console.error(error);
|
|
@@ -131,97 +111,88 @@ function registerCustomElement(options) {
|
|
|
131
111
|
console.error(error);
|
|
132
112
|
}
|
|
133
113
|
}
|
|
134
|
-
|
|
135
114
|
async connectedCallback() {
|
|
136
115
|
await this._widgetPromise;
|
|
137
|
-
|
|
138
116
|
this._widget?.connectedCallback?.({
|
|
139
117
|
shadow: this._shadow,
|
|
140
|
-
customElement: this
|
|
118
|
+
customElement: this
|
|
141
119
|
});
|
|
142
|
-
|
|
143
120
|
callbacks?.connectedCallback?.(this._widget, {
|
|
144
121
|
shadow: this._shadow,
|
|
145
|
-
customElement: this
|
|
122
|
+
customElement: this
|
|
146
123
|
});
|
|
147
124
|
}
|
|
148
|
-
|
|
149
125
|
async disconnectedCallback() {
|
|
150
126
|
await this._widgetPromise;
|
|
151
|
-
|
|
152
127
|
this._widget?.disconnectedCallback?.({
|
|
153
128
|
shadow: this._shadow,
|
|
154
|
-
customElement: this
|
|
129
|
+
customElement: this
|
|
155
130
|
});
|
|
156
|
-
|
|
157
131
|
callbacks?.disconnectedCallback?.(this._widget, {
|
|
158
132
|
shadow: this._shadow,
|
|
159
|
-
customElement: this
|
|
133
|
+
customElement: this
|
|
160
134
|
});
|
|
161
135
|
}
|
|
162
|
-
|
|
163
136
|
async adoptedCallback() {
|
|
164
137
|
await this._widgetPromise;
|
|
165
|
-
|
|
166
138
|
this._widget?.adoptedCallback?.({
|
|
167
139
|
shadow: this._shadow,
|
|
168
|
-
customElement: this
|
|
140
|
+
customElement: this
|
|
169
141
|
});
|
|
170
|
-
|
|
171
142
|
callbacks?.adoptedCallback?.(this._widget, {
|
|
172
143
|
shadow: this._shadow,
|
|
173
|
-
customElement: this
|
|
144
|
+
customElement: this
|
|
174
145
|
});
|
|
175
146
|
}
|
|
176
|
-
|
|
177
147
|
async attributeChangedCallback(name, oldValue, newValue) {
|
|
178
148
|
await this._widgetPromise;
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
{
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
149
|
+
const camelCaseKey = name.replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
150
|
+
const parser = attributesParser?.[name] ?? (value => value);
|
|
151
|
+
this._widget?.setProps?.({
|
|
152
|
+
[camelCaseKey]: parser(newValue)
|
|
153
|
+
});
|
|
154
|
+
this._widget?.attributeChangedCallback?.(this._widget, name, oldValue, newValue, {
|
|
155
|
+
shadow: this._shadow,
|
|
156
|
+
customElement: this
|
|
157
|
+
});
|
|
158
|
+
callbacks?.attributeChangedCallback?.(this._widget, name, oldValue, newValue, {
|
|
159
|
+
shadow: this._shadow,
|
|
160
|
+
customElement: this
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
_setDefaultProps() {
|
|
164
|
+
const attributes = this.constructor.observedAttributes;
|
|
165
|
+
if (Array.isArray(attributes) && typeof this._widget.setProps === 'function') {
|
|
166
|
+
this._widget.props = {
|
|
167
|
+
...this._widget.props
|
|
168
|
+
};
|
|
169
|
+
attributes.forEach(key => {
|
|
170
|
+
if (this.hasAttribute(key)) {
|
|
171
|
+
const camelCaseKey = key.replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
172
|
+
const parser = attributesParser?.[key] ?? (value => value);
|
|
173
|
+
this._widget.props[camelCaseKey] = parser(this.getAttribute(key) ?? this._widget.props[key]);
|
|
174
|
+
}
|
|
175
|
+
});
|
|
176
|
+
}
|
|
201
177
|
}
|
|
202
178
|
}
|
|
203
|
-
|
|
204
179
|
if (customElements.get(widgetDefinition.name) === undefined) {
|
|
205
180
|
customElements.define(widgetDefinition.name, WidgetElement);
|
|
206
181
|
}
|
|
182
|
+
return WidgetElement;
|
|
207
183
|
}
|
|
208
|
-
|
|
209
184
|
const PROTECTED_FIELDS = ['__proto__', 'prototype', 'constructor'];
|
|
210
185
|
function deepMerge(target, source) {
|
|
211
|
-
const isObject =
|
|
212
|
-
|
|
186
|
+
const isObject = obj => !!obj && obj.constructor === Object;
|
|
213
187
|
if (!isObject(target) || !isObject(source)) {
|
|
214
188
|
return source;
|
|
215
189
|
}
|
|
216
|
-
|
|
217
|
-
Object.keys(source).forEach((key) => {
|
|
190
|
+
Object.keys(source).forEach(key => {
|
|
218
191
|
if (PROTECTED_FIELDS.includes(key)) {
|
|
219
192
|
return;
|
|
220
193
|
}
|
|
221
|
-
|
|
222
194
|
const targetValue = target[key];
|
|
223
195
|
const sourceValue = source[key];
|
|
224
|
-
|
|
225
196
|
if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
|
|
226
197
|
target[key] = targetValue.concat(sourceValue);
|
|
227
198
|
} else if (isObject(targetValue) && isObject(sourceValue)) {
|
|
@@ -230,7 +201,6 @@ function deepMerge(target, source) {
|
|
|
230
201
|
target[key] = sourceValue;
|
|
231
202
|
}
|
|
232
203
|
});
|
|
233
|
-
|
|
234
204
|
return target;
|
|
235
205
|
}
|
|
236
206
|
|
package/lib/index.es9.cjs
CHANGED
|
@@ -34,7 +34,8 @@ function registerCustomElement(options) {
|
|
|
34
34
|
const {
|
|
35
35
|
widgetDefinition,
|
|
36
36
|
callbacks,
|
|
37
|
-
observedAttributes
|
|
37
|
+
observedAttributes,
|
|
38
|
+
attributesParser
|
|
38
39
|
} = deepMerge({}, options);
|
|
39
40
|
class HTMLCustomElement extends HTMLElement {
|
|
40
41
|
static get observedAttributes() {
|
|
@@ -64,6 +65,7 @@ function registerCustomElement(options) {
|
|
|
64
65
|
this._widget = widget;
|
|
65
66
|
await afterDOMLoad();
|
|
66
67
|
await integration.loadAssets(widget.assets, this._shadow);
|
|
68
|
+
this._setDefaultProps();
|
|
67
69
|
await (callbacks === null || callbacks === void 0 || (_callbacks$reconstruc = callbacks.reconstructor) === null || _callbacks$reconstruc === void 0 ? void 0 : _callbacks$reconstruc.call(callbacks, this._widget, {
|
|
68
70
|
shadow: this._shadow,
|
|
69
71
|
customElement: this
|
|
@@ -95,6 +97,7 @@ function registerCustomElement(options) {
|
|
|
95
97
|
}
|
|
96
98
|
this._shadow.appendChild(customWidgetDefinition.container);
|
|
97
99
|
this._widget = await createSPAWidget(customWidgetDefinition, this._shadow);
|
|
100
|
+
this._setDefaultProps();
|
|
98
101
|
await (callbacks === null || callbacks === void 0 || (_callbacks$constructo = callbacks.constructor) === null || _callbacks$constructo === void 0 ? void 0 : _callbacks$constructo.call(callbacks, this._widget, {
|
|
99
102
|
shadow: this._shadow,
|
|
100
103
|
customElement: this
|
|
@@ -148,9 +151,14 @@ function registerCustomElement(options) {
|
|
|
148
151
|
});
|
|
149
152
|
}
|
|
150
153
|
async attributeChangedCallback(name, oldValue, newValue) {
|
|
151
|
-
var _this$_widget4, _this$_widget4$attrib, _callbacks$attributeC;
|
|
154
|
+
var _attributesParser$nam, _this$_widget4, _this$_widget4$setPro, _this$_widget5, _this$_widget5$attrib, _callbacks$attributeC;
|
|
152
155
|
await this._widgetPromise;
|
|
153
|
-
|
|
156
|
+
const camelCaseKey = name.replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
157
|
+
const parser = (_attributesParser$nam = attributesParser === null || attributesParser === void 0 ? void 0 : attributesParser[name]) !== null && _attributesParser$nam !== void 0 ? _attributesParser$nam : value => value;
|
|
158
|
+
(_this$_widget4 = this._widget) === null || _this$_widget4 === void 0 || (_this$_widget4$setPro = _this$_widget4.setProps) === null || _this$_widget4$setPro === void 0 || _this$_widget4$setPro.call(_this$_widget4, {
|
|
159
|
+
[camelCaseKey]: parser(newValue)
|
|
160
|
+
});
|
|
161
|
+
(_this$_widget5 = this._widget) === null || _this$_widget5 === void 0 || (_this$_widget5$attrib = _this$_widget5.attributeChangedCallback) === null || _this$_widget5$attrib === void 0 || _this$_widget5$attrib.call(_this$_widget5, this._widget, name, oldValue, newValue, {
|
|
154
162
|
shadow: this._shadow,
|
|
155
163
|
customElement: this
|
|
156
164
|
});
|
|
@@ -159,10 +167,27 @@ function registerCustomElement(options) {
|
|
|
159
167
|
customElement: this
|
|
160
168
|
});
|
|
161
169
|
}
|
|
170
|
+
_setDefaultProps() {
|
|
171
|
+
const attributes = this.constructor.observedAttributes;
|
|
172
|
+
if (Array.isArray(attributes) && typeof this._widget.setProps === 'function') {
|
|
173
|
+
this._widget.props = {
|
|
174
|
+
...this._widget.props
|
|
175
|
+
};
|
|
176
|
+
attributes.forEach(key => {
|
|
177
|
+
if (this.hasAttribute(key)) {
|
|
178
|
+
var _attributesParser$key, _this$getAttribute;
|
|
179
|
+
const camelCaseKey = key.replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
180
|
+
const parser = (_attributesParser$key = attributesParser === null || attributesParser === void 0 ? void 0 : attributesParser[key]) !== null && _attributesParser$key !== void 0 ? _attributesParser$key : value => value;
|
|
181
|
+
this._widget.props[camelCaseKey] = parser((_this$getAttribute = this.getAttribute(key)) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : this._widget.props[key]);
|
|
182
|
+
}
|
|
183
|
+
});
|
|
184
|
+
}
|
|
185
|
+
}
|
|
162
186
|
}
|
|
163
187
|
if (customElements.get(widgetDefinition.name) === undefined) {
|
|
164
188
|
customElements.define(widgetDefinition.name, WidgetElement);
|
|
165
189
|
}
|
|
190
|
+
return WidgetElement;
|
|
166
191
|
}
|
|
167
192
|
const PROTECTED_FIELDS = ['__proto__', 'prototype', 'constructor'];
|
|
168
193
|
function deepMerge(target, source) {
|
package/lib/index.es9.mjs
CHANGED
|
@@ -32,7 +32,8 @@ function registerCustomElement(options) {
|
|
|
32
32
|
const {
|
|
33
33
|
widgetDefinition,
|
|
34
34
|
callbacks,
|
|
35
|
-
observedAttributes
|
|
35
|
+
observedAttributes,
|
|
36
|
+
attributesParser
|
|
36
37
|
} = deepMerge({}, options);
|
|
37
38
|
class HTMLCustomElement extends HTMLElement {
|
|
38
39
|
static get observedAttributes() {
|
|
@@ -62,6 +63,7 @@ function registerCustomElement(options) {
|
|
|
62
63
|
this._widget = widget;
|
|
63
64
|
await afterDOMLoad();
|
|
64
65
|
await loadAssets(widget.assets, this._shadow);
|
|
66
|
+
this._setDefaultProps();
|
|
65
67
|
await (callbacks === null || callbacks === void 0 || (_callbacks$reconstruc = callbacks.reconstructor) === null || _callbacks$reconstruc === void 0 ? void 0 : _callbacks$reconstruc.call(callbacks, this._widget, {
|
|
66
68
|
shadow: this._shadow,
|
|
67
69
|
customElement: this
|
|
@@ -93,6 +95,7 @@ function registerCustomElement(options) {
|
|
|
93
95
|
}
|
|
94
96
|
this._shadow.appendChild(customWidgetDefinition.container);
|
|
95
97
|
this._widget = await createSPAWidget(customWidgetDefinition, this._shadow);
|
|
98
|
+
this._setDefaultProps();
|
|
96
99
|
await (callbacks === null || callbacks === void 0 || (_callbacks$constructo = callbacks.constructor) === null || _callbacks$constructo === void 0 ? void 0 : _callbacks$constructo.call(callbacks, this._widget, {
|
|
97
100
|
shadow: this._shadow,
|
|
98
101
|
customElement: this
|
|
@@ -146,9 +149,14 @@ function registerCustomElement(options) {
|
|
|
146
149
|
});
|
|
147
150
|
}
|
|
148
151
|
async attributeChangedCallback(name, oldValue, newValue) {
|
|
149
|
-
var _this$_widget4, _this$_widget4$attrib, _callbacks$attributeC;
|
|
152
|
+
var _attributesParser$nam, _this$_widget4, _this$_widget4$setPro, _this$_widget5, _this$_widget5$attrib, _callbacks$attributeC;
|
|
150
153
|
await this._widgetPromise;
|
|
151
|
-
|
|
154
|
+
const camelCaseKey = name.replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
155
|
+
const parser = (_attributesParser$nam = attributesParser === null || attributesParser === void 0 ? void 0 : attributesParser[name]) !== null && _attributesParser$nam !== void 0 ? _attributesParser$nam : value => value;
|
|
156
|
+
(_this$_widget4 = this._widget) === null || _this$_widget4 === void 0 || (_this$_widget4$setPro = _this$_widget4.setProps) === null || _this$_widget4$setPro === void 0 || _this$_widget4$setPro.call(_this$_widget4, {
|
|
157
|
+
[camelCaseKey]: parser(newValue)
|
|
158
|
+
});
|
|
159
|
+
(_this$_widget5 = this._widget) === null || _this$_widget5 === void 0 || (_this$_widget5$attrib = _this$_widget5.attributeChangedCallback) === null || _this$_widget5$attrib === void 0 || _this$_widget5$attrib.call(_this$_widget5, this._widget, name, oldValue, newValue, {
|
|
152
160
|
shadow: this._shadow,
|
|
153
161
|
customElement: this
|
|
154
162
|
});
|
|
@@ -157,10 +165,27 @@ function registerCustomElement(options) {
|
|
|
157
165
|
customElement: this
|
|
158
166
|
});
|
|
159
167
|
}
|
|
168
|
+
_setDefaultProps() {
|
|
169
|
+
const attributes = this.constructor.observedAttributes;
|
|
170
|
+
if (Array.isArray(attributes) && typeof this._widget.setProps === 'function') {
|
|
171
|
+
this._widget.props = {
|
|
172
|
+
...this._widget.props
|
|
173
|
+
};
|
|
174
|
+
attributes.forEach(key => {
|
|
175
|
+
if (this.hasAttribute(key)) {
|
|
176
|
+
var _attributesParser$key, _this$getAttribute;
|
|
177
|
+
const camelCaseKey = key.replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
178
|
+
const parser = (_attributesParser$key = attributesParser === null || attributesParser === void 0 ? void 0 : attributesParser[key]) !== null && _attributesParser$key !== void 0 ? _attributesParser$key : value => value;
|
|
179
|
+
this._widget.props[camelCaseKey] = parser((_this$getAttribute = this.getAttribute(key)) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : this._widget.props[key]);
|
|
180
|
+
}
|
|
181
|
+
});
|
|
182
|
+
}
|
|
183
|
+
}
|
|
160
184
|
}
|
|
161
185
|
if (customElements.get(widgetDefinition.name) === undefined) {
|
|
162
186
|
customElements.define(widgetDefinition.name, WidgetElement);
|
|
163
187
|
}
|
|
188
|
+
return WidgetElement;
|
|
164
189
|
}
|
|
165
190
|
const PROTECTED_FIELDS = ['__proto__', 'prototype', 'constructor'];
|
|
166
191
|
function deepMerge(target, source) {
|
package/lib/index.js
CHANGED
|
@@ -6,22 +6,18 @@ var integration = require('@merkur/integration');
|
|
|
6
6
|
async function createSPAWidget(widgetDefinition, root) {
|
|
7
7
|
const definition = {
|
|
8
8
|
...widgetDefinition,
|
|
9
|
-
createWidget: widgetDefinition.createWidget
|
|
9
|
+
createWidget: widgetDefinition.createWidget
|
|
10
10
|
};
|
|
11
|
-
|
|
12
11
|
const merkur = core.getMerkur();
|
|
13
12
|
if (!merkur.isRegistered(definition.name + definition.version)) {
|
|
14
13
|
core.getMerkur().register(definition);
|
|
15
14
|
}
|
|
16
|
-
|
|
17
15
|
await afterDOMLoad();
|
|
18
16
|
await integration.loadAssets(definition.assets, root);
|
|
19
|
-
|
|
20
17
|
return await core.getMerkur().create(definition);
|
|
21
18
|
}
|
|
22
|
-
|
|
23
19
|
function afterDOMLoad() {
|
|
24
|
-
return new Promise(
|
|
20
|
+
return new Promise(resolve => {
|
|
25
21
|
if (typeof document !== 'undefined') {
|
|
26
22
|
if (document.readyState !== 'loading') {
|
|
27
23
|
resolve();
|
|
@@ -35,12 +31,13 @@ function afterDOMLoad() {
|
|
|
35
31
|
}
|
|
36
32
|
});
|
|
37
33
|
}
|
|
38
|
-
|
|
39
34
|
function registerCustomElement(options) {
|
|
40
|
-
const {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
35
|
+
const {
|
|
36
|
+
widgetDefinition,
|
|
37
|
+
callbacks,
|
|
38
|
+
observedAttributes,
|
|
39
|
+
attributesParser
|
|
40
|
+
} = deepMerge({}, options);
|
|
44
41
|
class HTMLCustomElement extends HTMLElement {
|
|
45
42
|
static get observedAttributes() {
|
|
46
43
|
return observedAttributes ?? [];
|
|
@@ -52,76 +49,59 @@ function registerCustomElement(options) {
|
|
|
52
49
|
}
|
|
53
50
|
_init() {}
|
|
54
51
|
}
|
|
55
|
-
|
|
56
52
|
class WidgetElement extends HTMLCustomElement {
|
|
57
53
|
_init() {
|
|
58
54
|
try {
|
|
59
55
|
super._init();
|
|
60
56
|
const customWidgetDefinition = deepMerge({}, widgetDefinition);
|
|
61
|
-
|
|
62
57
|
this._widgetPromise = (async () => {
|
|
63
|
-
this._shadow = this.attachShadow({
|
|
64
|
-
|
|
58
|
+
this._shadow = this.attachShadow({
|
|
59
|
+
mode: 'open'
|
|
60
|
+
});
|
|
65
61
|
try {
|
|
66
62
|
const widget = await callbacks?.getInstance?.();
|
|
67
|
-
|
|
68
63
|
if (widget && widget.name && widget.version) {
|
|
69
64
|
this._widget = widget;
|
|
70
|
-
|
|
71
65
|
await afterDOMLoad();
|
|
72
66
|
await integration.loadAssets(widget.assets, this._shadow);
|
|
73
|
-
|
|
67
|
+
this._setDefaultProps();
|
|
74
68
|
await callbacks?.reconstructor?.(this._widget, {
|
|
75
69
|
shadow: this._shadow,
|
|
76
|
-
customElement: this
|
|
70
|
+
customElement: this
|
|
77
71
|
});
|
|
78
|
-
|
|
79
72
|
if (typeof callbacks?.remount === 'function') {
|
|
80
73
|
await callbacks?.remount?.(this._widget, {
|
|
81
74
|
shadow: this._shadow,
|
|
82
|
-
customElement: this
|
|
75
|
+
customElement: this
|
|
83
76
|
});
|
|
84
77
|
} else {
|
|
85
78
|
widget.root = this._shadow;
|
|
86
79
|
widget.customElement = this;
|
|
87
80
|
this._shadow.appendChild(widget.container);
|
|
88
81
|
}
|
|
89
|
-
|
|
90
82
|
return;
|
|
91
83
|
}
|
|
92
84
|
} catch (error) {
|
|
93
85
|
console.error(error);
|
|
94
|
-
|
|
95
86
|
return;
|
|
96
87
|
}
|
|
97
|
-
|
|
98
88
|
try {
|
|
99
89
|
customWidgetDefinition.root = this._shadow;
|
|
100
90
|
customWidgetDefinition.customElement = this;
|
|
101
|
-
|
|
102
91
|
if (!customWidgetDefinition.container) {
|
|
103
92
|
customWidgetDefinition.container = document.createElement('div');
|
|
104
|
-
customWidgetDefinition.container.setAttribute(
|
|
105
|
-
'id',
|
|
106
|
-
'merkur-container',
|
|
107
|
-
);
|
|
93
|
+
customWidgetDefinition.container.setAttribute('id', 'merkur-container');
|
|
108
94
|
}
|
|
109
|
-
|
|
110
95
|
this._shadow.appendChild(customWidgetDefinition.container);
|
|
111
|
-
|
|
112
|
-
this.
|
|
113
|
-
customWidgetDefinition,
|
|
114
|
-
this._shadow,
|
|
115
|
-
);
|
|
116
|
-
|
|
96
|
+
this._widget = await createSPAWidget(customWidgetDefinition, this._shadow);
|
|
97
|
+
this._setDefaultProps();
|
|
117
98
|
await callbacks?.constructor?.(this._widget, {
|
|
118
99
|
shadow: this._shadow,
|
|
119
|
-
customElement: this
|
|
100
|
+
customElement: this
|
|
120
101
|
});
|
|
121
|
-
|
|
122
102
|
(await callbacks?.mount?.(this._widget, {
|
|
123
103
|
shadow: this._shadow,
|
|
124
|
-
customElement: this
|
|
104
|
+
customElement: this
|
|
125
105
|
})) ?? (await this._widget.mount());
|
|
126
106
|
} catch (error) {
|
|
127
107
|
console.error(error);
|
|
@@ -131,97 +111,88 @@ function registerCustomElement(options) {
|
|
|
131
111
|
console.error(error);
|
|
132
112
|
}
|
|
133
113
|
}
|
|
134
|
-
|
|
135
114
|
async connectedCallback() {
|
|
136
115
|
await this._widgetPromise;
|
|
137
|
-
|
|
138
116
|
this._widget?.connectedCallback?.({
|
|
139
117
|
shadow: this._shadow,
|
|
140
|
-
customElement: this
|
|
118
|
+
customElement: this
|
|
141
119
|
});
|
|
142
|
-
|
|
143
120
|
callbacks?.connectedCallback?.(this._widget, {
|
|
144
121
|
shadow: this._shadow,
|
|
145
|
-
customElement: this
|
|
122
|
+
customElement: this
|
|
146
123
|
});
|
|
147
124
|
}
|
|
148
|
-
|
|
149
125
|
async disconnectedCallback() {
|
|
150
126
|
await this._widgetPromise;
|
|
151
|
-
|
|
152
127
|
this._widget?.disconnectedCallback?.({
|
|
153
128
|
shadow: this._shadow,
|
|
154
|
-
customElement: this
|
|
129
|
+
customElement: this
|
|
155
130
|
});
|
|
156
|
-
|
|
157
131
|
callbacks?.disconnectedCallback?.(this._widget, {
|
|
158
132
|
shadow: this._shadow,
|
|
159
|
-
customElement: this
|
|
133
|
+
customElement: this
|
|
160
134
|
});
|
|
161
135
|
}
|
|
162
|
-
|
|
163
136
|
async adoptedCallback() {
|
|
164
137
|
await this._widgetPromise;
|
|
165
|
-
|
|
166
138
|
this._widget?.adoptedCallback?.({
|
|
167
139
|
shadow: this._shadow,
|
|
168
|
-
customElement: this
|
|
140
|
+
customElement: this
|
|
169
141
|
});
|
|
170
|
-
|
|
171
142
|
callbacks?.adoptedCallback?.(this._widget, {
|
|
172
143
|
shadow: this._shadow,
|
|
173
|
-
customElement: this
|
|
144
|
+
customElement: this
|
|
174
145
|
});
|
|
175
146
|
}
|
|
176
|
-
|
|
177
147
|
async attributeChangedCallback(name, oldValue, newValue) {
|
|
178
148
|
await this._widgetPromise;
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
{
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
149
|
+
const camelCaseKey = name.replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
150
|
+
const parser = attributesParser?.[name] ?? (value => value);
|
|
151
|
+
this._widget?.setProps?.({
|
|
152
|
+
[camelCaseKey]: parser(newValue)
|
|
153
|
+
});
|
|
154
|
+
this._widget?.attributeChangedCallback?.(this._widget, name, oldValue, newValue, {
|
|
155
|
+
shadow: this._shadow,
|
|
156
|
+
customElement: this
|
|
157
|
+
});
|
|
158
|
+
callbacks?.attributeChangedCallback?.(this._widget, name, oldValue, newValue, {
|
|
159
|
+
shadow: this._shadow,
|
|
160
|
+
customElement: this
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
_setDefaultProps() {
|
|
164
|
+
const attributes = this.constructor.observedAttributes;
|
|
165
|
+
if (Array.isArray(attributes) && typeof this._widget.setProps === 'function') {
|
|
166
|
+
this._widget.props = {
|
|
167
|
+
...this._widget.props
|
|
168
|
+
};
|
|
169
|
+
attributes.forEach(key => {
|
|
170
|
+
if (this.hasAttribute(key)) {
|
|
171
|
+
const camelCaseKey = key.replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
172
|
+
const parser = attributesParser?.[key] ?? (value => value);
|
|
173
|
+
this._widget.props[camelCaseKey] = parser(this.getAttribute(key) ?? this._widget.props[key]);
|
|
174
|
+
}
|
|
175
|
+
});
|
|
176
|
+
}
|
|
201
177
|
}
|
|
202
178
|
}
|
|
203
|
-
|
|
204
179
|
if (customElements.get(widgetDefinition.name) === undefined) {
|
|
205
180
|
customElements.define(widgetDefinition.name, WidgetElement);
|
|
206
181
|
}
|
|
182
|
+
return WidgetElement;
|
|
207
183
|
}
|
|
208
|
-
|
|
209
184
|
const PROTECTED_FIELDS = ['__proto__', 'prototype', 'constructor'];
|
|
210
185
|
function deepMerge(target, source) {
|
|
211
|
-
const isObject =
|
|
212
|
-
|
|
186
|
+
const isObject = obj => !!obj && obj.constructor === Object;
|
|
213
187
|
if (!isObject(target) || !isObject(source)) {
|
|
214
188
|
return source;
|
|
215
189
|
}
|
|
216
|
-
|
|
217
|
-
Object.keys(source).forEach((key) => {
|
|
190
|
+
Object.keys(source).forEach(key => {
|
|
218
191
|
if (PROTECTED_FIELDS.includes(key)) {
|
|
219
192
|
return;
|
|
220
193
|
}
|
|
221
|
-
|
|
222
194
|
const targetValue = target[key];
|
|
223
195
|
const sourceValue = source[key];
|
|
224
|
-
|
|
225
196
|
if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
|
|
226
197
|
target[key] = targetValue.concat(sourceValue);
|
|
227
198
|
} else if (isObject(targetValue) && isObject(sourceValue)) {
|
|
@@ -230,7 +201,6 @@ function deepMerge(target, source) {
|
|
|
230
201
|
target[key] = sourceValue;
|
|
231
202
|
}
|
|
232
203
|
});
|
|
233
|
-
|
|
234
204
|
return target;
|
|
235
205
|
}
|
|
236
206
|
|
package/lib/index.mjs
CHANGED
|
@@ -4,22 +4,18 @@ import { loadAssets } from '@merkur/integration';
|
|
|
4
4
|
async function createSPAWidget(widgetDefinition, root) {
|
|
5
5
|
const definition = {
|
|
6
6
|
...widgetDefinition,
|
|
7
|
-
createWidget: widgetDefinition.createWidget
|
|
7
|
+
createWidget: widgetDefinition.createWidget
|
|
8
8
|
};
|
|
9
|
-
|
|
10
9
|
const merkur = getMerkur();
|
|
11
10
|
if (!merkur.isRegistered(definition.name + definition.version)) {
|
|
12
11
|
getMerkur().register(definition);
|
|
13
12
|
}
|
|
14
|
-
|
|
15
13
|
await afterDOMLoad();
|
|
16
14
|
await loadAssets(definition.assets, root);
|
|
17
|
-
|
|
18
15
|
return await getMerkur().create(definition);
|
|
19
16
|
}
|
|
20
|
-
|
|
21
17
|
function afterDOMLoad() {
|
|
22
|
-
return new Promise(
|
|
18
|
+
return new Promise(resolve => {
|
|
23
19
|
if (typeof document !== 'undefined') {
|
|
24
20
|
if (document.readyState !== 'loading') {
|
|
25
21
|
resolve();
|
|
@@ -33,12 +29,13 @@ function afterDOMLoad() {
|
|
|
33
29
|
}
|
|
34
30
|
});
|
|
35
31
|
}
|
|
36
|
-
|
|
37
32
|
function registerCustomElement(options) {
|
|
38
|
-
const {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
33
|
+
const {
|
|
34
|
+
widgetDefinition,
|
|
35
|
+
callbacks,
|
|
36
|
+
observedAttributes,
|
|
37
|
+
attributesParser
|
|
38
|
+
} = deepMerge({}, options);
|
|
42
39
|
class HTMLCustomElement extends HTMLElement {
|
|
43
40
|
static get observedAttributes() {
|
|
44
41
|
return observedAttributes ?? [];
|
|
@@ -50,76 +47,59 @@ function registerCustomElement(options) {
|
|
|
50
47
|
}
|
|
51
48
|
_init() {}
|
|
52
49
|
}
|
|
53
|
-
|
|
54
50
|
class WidgetElement extends HTMLCustomElement {
|
|
55
51
|
_init() {
|
|
56
52
|
try {
|
|
57
53
|
super._init();
|
|
58
54
|
const customWidgetDefinition = deepMerge({}, widgetDefinition);
|
|
59
|
-
|
|
60
55
|
this._widgetPromise = (async () => {
|
|
61
|
-
this._shadow = this.attachShadow({
|
|
62
|
-
|
|
56
|
+
this._shadow = this.attachShadow({
|
|
57
|
+
mode: 'open'
|
|
58
|
+
});
|
|
63
59
|
try {
|
|
64
60
|
const widget = await callbacks?.getInstance?.();
|
|
65
|
-
|
|
66
61
|
if (widget && widget.name && widget.version) {
|
|
67
62
|
this._widget = widget;
|
|
68
|
-
|
|
69
63
|
await afterDOMLoad();
|
|
70
64
|
await loadAssets(widget.assets, this._shadow);
|
|
71
|
-
|
|
65
|
+
this._setDefaultProps();
|
|
72
66
|
await callbacks?.reconstructor?.(this._widget, {
|
|
73
67
|
shadow: this._shadow,
|
|
74
|
-
customElement: this
|
|
68
|
+
customElement: this
|
|
75
69
|
});
|
|
76
|
-
|
|
77
70
|
if (typeof callbacks?.remount === 'function') {
|
|
78
71
|
await callbacks?.remount?.(this._widget, {
|
|
79
72
|
shadow: this._shadow,
|
|
80
|
-
customElement: this
|
|
73
|
+
customElement: this
|
|
81
74
|
});
|
|
82
75
|
} else {
|
|
83
76
|
widget.root = this._shadow;
|
|
84
77
|
widget.customElement = this;
|
|
85
78
|
this._shadow.appendChild(widget.container);
|
|
86
79
|
}
|
|
87
|
-
|
|
88
80
|
return;
|
|
89
81
|
}
|
|
90
82
|
} catch (error) {
|
|
91
83
|
console.error(error);
|
|
92
|
-
|
|
93
84
|
return;
|
|
94
85
|
}
|
|
95
|
-
|
|
96
86
|
try {
|
|
97
87
|
customWidgetDefinition.root = this._shadow;
|
|
98
88
|
customWidgetDefinition.customElement = this;
|
|
99
|
-
|
|
100
89
|
if (!customWidgetDefinition.container) {
|
|
101
90
|
customWidgetDefinition.container = document.createElement('div');
|
|
102
|
-
customWidgetDefinition.container.setAttribute(
|
|
103
|
-
'id',
|
|
104
|
-
'merkur-container',
|
|
105
|
-
);
|
|
91
|
+
customWidgetDefinition.container.setAttribute('id', 'merkur-container');
|
|
106
92
|
}
|
|
107
|
-
|
|
108
93
|
this._shadow.appendChild(customWidgetDefinition.container);
|
|
109
|
-
|
|
110
|
-
this.
|
|
111
|
-
customWidgetDefinition,
|
|
112
|
-
this._shadow,
|
|
113
|
-
);
|
|
114
|
-
|
|
94
|
+
this._widget = await createSPAWidget(customWidgetDefinition, this._shadow);
|
|
95
|
+
this._setDefaultProps();
|
|
115
96
|
await callbacks?.constructor?.(this._widget, {
|
|
116
97
|
shadow: this._shadow,
|
|
117
|
-
customElement: this
|
|
98
|
+
customElement: this
|
|
118
99
|
});
|
|
119
|
-
|
|
120
100
|
(await callbacks?.mount?.(this._widget, {
|
|
121
101
|
shadow: this._shadow,
|
|
122
|
-
customElement: this
|
|
102
|
+
customElement: this
|
|
123
103
|
})) ?? (await this._widget.mount());
|
|
124
104
|
} catch (error) {
|
|
125
105
|
console.error(error);
|
|
@@ -129,97 +109,88 @@ function registerCustomElement(options) {
|
|
|
129
109
|
console.error(error);
|
|
130
110
|
}
|
|
131
111
|
}
|
|
132
|
-
|
|
133
112
|
async connectedCallback() {
|
|
134
113
|
await this._widgetPromise;
|
|
135
|
-
|
|
136
114
|
this._widget?.connectedCallback?.({
|
|
137
115
|
shadow: this._shadow,
|
|
138
|
-
customElement: this
|
|
116
|
+
customElement: this
|
|
139
117
|
});
|
|
140
|
-
|
|
141
118
|
callbacks?.connectedCallback?.(this._widget, {
|
|
142
119
|
shadow: this._shadow,
|
|
143
|
-
customElement: this
|
|
120
|
+
customElement: this
|
|
144
121
|
});
|
|
145
122
|
}
|
|
146
|
-
|
|
147
123
|
async disconnectedCallback() {
|
|
148
124
|
await this._widgetPromise;
|
|
149
|
-
|
|
150
125
|
this._widget?.disconnectedCallback?.({
|
|
151
126
|
shadow: this._shadow,
|
|
152
|
-
customElement: this
|
|
127
|
+
customElement: this
|
|
153
128
|
});
|
|
154
|
-
|
|
155
129
|
callbacks?.disconnectedCallback?.(this._widget, {
|
|
156
130
|
shadow: this._shadow,
|
|
157
|
-
customElement: this
|
|
131
|
+
customElement: this
|
|
158
132
|
});
|
|
159
133
|
}
|
|
160
|
-
|
|
161
134
|
async adoptedCallback() {
|
|
162
135
|
await this._widgetPromise;
|
|
163
|
-
|
|
164
136
|
this._widget?.adoptedCallback?.({
|
|
165
137
|
shadow: this._shadow,
|
|
166
|
-
customElement: this
|
|
138
|
+
customElement: this
|
|
167
139
|
});
|
|
168
|
-
|
|
169
140
|
callbacks?.adoptedCallback?.(this._widget, {
|
|
170
141
|
shadow: this._shadow,
|
|
171
|
-
customElement: this
|
|
142
|
+
customElement: this
|
|
172
143
|
});
|
|
173
144
|
}
|
|
174
|
-
|
|
175
145
|
async attributeChangedCallback(name, oldValue, newValue) {
|
|
176
146
|
await this._widgetPromise;
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
{
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
147
|
+
const camelCaseKey = name.replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
148
|
+
const parser = attributesParser?.[name] ?? (value => value);
|
|
149
|
+
this._widget?.setProps?.({
|
|
150
|
+
[camelCaseKey]: parser(newValue)
|
|
151
|
+
});
|
|
152
|
+
this._widget?.attributeChangedCallback?.(this._widget, name, oldValue, newValue, {
|
|
153
|
+
shadow: this._shadow,
|
|
154
|
+
customElement: this
|
|
155
|
+
});
|
|
156
|
+
callbacks?.attributeChangedCallback?.(this._widget, name, oldValue, newValue, {
|
|
157
|
+
shadow: this._shadow,
|
|
158
|
+
customElement: this
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
_setDefaultProps() {
|
|
162
|
+
const attributes = this.constructor.observedAttributes;
|
|
163
|
+
if (Array.isArray(attributes) && typeof this._widget.setProps === 'function') {
|
|
164
|
+
this._widget.props = {
|
|
165
|
+
...this._widget.props
|
|
166
|
+
};
|
|
167
|
+
attributes.forEach(key => {
|
|
168
|
+
if (this.hasAttribute(key)) {
|
|
169
|
+
const camelCaseKey = key.replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
170
|
+
const parser = attributesParser?.[key] ?? (value => value);
|
|
171
|
+
this._widget.props[camelCaseKey] = parser(this.getAttribute(key) ?? this._widget.props[key]);
|
|
172
|
+
}
|
|
173
|
+
});
|
|
174
|
+
}
|
|
199
175
|
}
|
|
200
176
|
}
|
|
201
|
-
|
|
202
177
|
if (customElements.get(widgetDefinition.name) === undefined) {
|
|
203
178
|
customElements.define(widgetDefinition.name, WidgetElement);
|
|
204
179
|
}
|
|
180
|
+
return WidgetElement;
|
|
205
181
|
}
|
|
206
|
-
|
|
207
182
|
const PROTECTED_FIELDS = ['__proto__', 'prototype', 'constructor'];
|
|
208
183
|
function deepMerge(target, source) {
|
|
209
|
-
const isObject =
|
|
210
|
-
|
|
184
|
+
const isObject = obj => !!obj && obj.constructor === Object;
|
|
211
185
|
if (!isObject(target) || !isObject(source)) {
|
|
212
186
|
return source;
|
|
213
187
|
}
|
|
214
|
-
|
|
215
|
-
Object.keys(source).forEach((key) => {
|
|
188
|
+
Object.keys(source).forEach(key => {
|
|
216
189
|
if (PROTECTED_FIELDS.includes(key)) {
|
|
217
190
|
return;
|
|
218
191
|
}
|
|
219
|
-
|
|
220
192
|
const targetValue = target[key];
|
|
221
193
|
const sourceValue = source[key];
|
|
222
|
-
|
|
223
194
|
if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
|
|
224
195
|
target[key] = targetValue.concat(sourceValue);
|
|
225
196
|
} else if (isObject(targetValue) && isObject(sourceValue)) {
|
|
@@ -228,7 +199,6 @@ function deepMerge(target, source) {
|
|
|
228
199
|
target[key] = sourceValue;
|
|
229
200
|
}
|
|
230
201
|
});
|
|
231
|
-
|
|
232
202
|
return target;
|
|
233
203
|
}
|
|
234
204
|
|
package/lib/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}!function(t,e){if("function"==typeof define&&define.amd)define("@merkur/integration-custom-element",["exports","@merkur/core","@merkur/integration"],e);else if("undefined"!=typeof exports)e(exports,require("@merkur/core"),require("@merkur/integration"));else{var n={exports:{}};e(n.exports,t.Merkur.Core,t.Merkur.Integration),t.merkurIntegrationCustomElement=n.exports}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:this,(function(e,n,r){function o(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function i(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?o(Object(n),!0).forEach((function(e){u(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function u(t,e,n){return(e=d(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function l(){return l="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(t,e,n){var r=function(t,e){for(;!{}.hasOwnProperty.call(t,e)&&null!==(t=
|
|
1
|
+
function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}!function(t,e){if("function"==typeof define&&define.amd)define("@merkur/integration-custom-element",["exports","@merkur/core","@merkur/integration"],e);else if("undefined"!=typeof exports)e(exports,require("@merkur/core"),require("@merkur/integration"));else{var n={exports:{}};e(n.exports,t.Merkur.Core,t.Merkur.Integration),t.merkurIntegrationCustomElement=n.exports}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:this,(function(e,n,r){function o(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function i(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?o(Object(n),!0).forEach((function(e){u(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function u(t,e,n){return(e=d(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function l(){return l="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(t,e,n){var r=function(t,e){for(;!{}.hasOwnProperty.call(t,e)&&null!==(t=w(t)););return t}(t,e);if(r){var o=Object.getOwnPropertyDescriptor(r,e);return o.get?o.get.call(arguments.length<3?t:n):o.value}},l.apply(null,arguments)}function c(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,d(r.key),r)}}function s(t,e,n){return e&&a(t.prototype,e),n&&a(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function d(e){var n=function(e,n){if("object"!=t(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,n||"default");if("object"!=t(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==t(n)?n:n+""}function f(t,e,n){return e=w(e),p(t,v()?Reflect.construct(e,n||[],w(t).constructor):e.apply(t,n))}function p(e,n){if(n&&("object"==t(n)||"function"==typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(e)}function h(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&b(t,e)}function y(t){var e="function"==typeof Map?new Map:void 0;return y=function(t){if(null===t||!function(t){try{return-1!==Function.toString.call(t).indexOf("[native code]")}catch(e){return"function"==typeof t}}(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,n)}function n(){return function(t,e,n){if(v())return Reflect.construct.apply(null,arguments);var r=[null];r.push.apply(r,e);var o=new(t.bind.apply(t,r));return n&&b(o,n.prototype),o}(t,arguments,w(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),b(n,t)},y(t)}function v(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(v=function(){return!!t})()}function b(t,e){return b=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},b(t,e)}function w(t){return w=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},w(t)}function m(t,e,n,r,o,i,u){try{var l=t[i](u),c=l.value}catch(t){return void n(t)}l.done?e(c):Promise.resolve(c).then(r,o)}function g(t){return function(){var e=this,n=arguments;return new Promise((function(r,o){var i=t.apply(e,n);function u(t){m(i,r,o,u,l,"next",t)}function l(t){m(i,r,o,u,l,"throw",t)}u(void 0)}))}}function _(){return(_=g((function*(t,e){var o=i(i({},t),{},{createWidget:t.createWidget});return(0,n.getMerkur)().isRegistered(o.name+o.version)||(0,n.getMerkur)().register(o),yield O(),yield(0,r.loadAssets)(o.assets,e),yield(0,n.getMerkur)().create(o)}))).apply(this,arguments)}function O(){return new Promise((function(t){"undefined"!=typeof document?"loading"!==document.readyState?t():window.addEventListener("DOMContentLoaded",(function(){t()})):t()}))}Object.defineProperty(e,"__esModule",{value:!0}),e.deepMerge=P,e.registerCustomElement=function(t){var e=P({},t),n=e.widgetDefinition,o=e.callbacks,a=e.observedAttributes,d=e.attributesParser,v=function(t){function e(){var t;c(this,e);for(var n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];var i=t=f(this,e,[].concat(r));return i._init(),p(t,i)}return h(e,t),s(e,[{key:"_init",value:function(){}}],[{key:"observedAttributes",get:function(){return null!=a?a:[]}}])}(y(HTMLElement)),b=function(t){function e(){return c(this,e),f(this,e,arguments)}return h(e,t),s(e,[{key:"_init",value:function(){var t,i,u,c,a,s=this;try{(t=e,i="_init",u=this,a=l(w(1&(c=3)?t.prototype:t),i,u),2&c&&"function"==typeof a?function(t){return a.apply(u,t)}:a)([]);var d=P({},n);this._widgetPromise=g((function*(){s._shadow=s.attachShadow({mode:"open"});try{var t,e=yield null==o||null===(t=o.getInstance)||void 0===t?void 0:t.call(o);if(e&&e.name&&e.version){var n,i;if(s._widget=e,yield O(),yield(0,r.loadAssets)(e.assets,s._shadow),s._setDefaultProps(),yield null==o||null===(n=o.reconstructor)||void 0===n?void 0:n.call(o,s._widget,{shadow:s._shadow,customElement:s}),"function"==typeof(null==o?void 0:o.remount))yield null==o||null===(i=o.remount)||void 0===i?void 0:i.call(o,s._widget,{shadow:s._shadow,customElement:s});else e.root=s._shadow,e.customElement=s,s._shadow.appendChild(e.container);return}}catch(t){return void console.error(t)}try{var u,l,c;d.root=s._shadow,d.customElement=s,d.container||(d.container=document.createElement("div"),d.container.setAttribute("id","merkur-container")),s._shadow.appendChild(d.container),s._widget=yield function(t,e){return _.apply(this,arguments)}(d,s._shadow),s._setDefaultProps(),yield null==o||null===(u=o.constructor)||void 0===u?void 0:u.call(o,s._widget,{shadow:s._shadow,customElement:s}),null!==(l=yield null==o||null===(c=o.mount)||void 0===c?void 0:c.call(o,s._widget,{shadow:s._shadow,customElement:s}))&&void 0!==l||(yield s._widget.mount())}catch(t){console.error(t)}}))()}catch(t){console.error(t)}}},{key:"connectedCallback",value:(v=g((function*(){var t,e,n;yield this._widgetPromise,null===(t=this._widget)||void 0===t||null===(e=t.connectedCallback)||void 0===e||e.call(t,{shadow:this._shadow,customElement:this}),null==o||null===(n=o.connectedCallback)||void 0===n||n.call(o,this._widget,{shadow:this._shadow,customElement:this})})),function(){return v.apply(this,arguments)})},{key:"disconnectedCallback",value:(y=g((function*(){var t,e,n;yield this._widgetPromise,null===(t=this._widget)||void 0===t||null===(e=t.disconnectedCallback)||void 0===e||e.call(t,{shadow:this._shadow,customElement:this}),null==o||null===(n=o.disconnectedCallback)||void 0===n||n.call(o,this._widget,{shadow:this._shadow,customElement:this})})),function(){return y.apply(this,arguments)})},{key:"adoptedCallback",value:(p=g((function*(){var t,e,n;yield this._widgetPromise,null===(t=this._widget)||void 0===t||null===(e=t.adoptedCallback)||void 0===e||e.call(t,{shadow:this._shadow,customElement:this}),null==o||null===(n=o.adoptedCallback)||void 0===n||n.call(o,this._widget,{shadow:this._shadow,customElement:this})})),function(){return p.apply(this,arguments)})},{key:"attributeChangedCallback",value:(a=g((function*(t,e,n){var r,i,l,c,a,s;yield this._widgetPromise;var f=t.replace(/-([a-z])/g,(function(t){return t[1].toUpperCase()})),p=null!==(r=null==d?void 0:d[t])&&void 0!==r?r:function(t){return t};null===(i=this._widget)||void 0===i||null===(l=i.setProps)||void 0===l||l.call(i,u({},f,p(n))),null===(c=this._widget)||void 0===c||null===(a=c.attributeChangedCallback)||void 0===a||a.call(c,this._widget,t,e,n,{shadow:this._shadow,customElement:this}),null==o||null===(s=o.attributeChangedCallback)||void 0===s||s.call(o,this._widget,t,e,n,{shadow:this._shadow,customElement:this})})),function(t,e,n){return a.apply(this,arguments)})},{key:"_setDefaultProps",value:function(){var t=this,e=this.constructor.observedAttributes;Array.isArray(e)&&"function"==typeof this._widget.setProps&&(this._widget.props=i({},this._widget.props),e.forEach((function(e){if(t.hasAttribute(e)){var n,r,o=e.replace(/-([a-z])/g,(function(t){return t[1].toUpperCase()})),i=null!==(n=null==d?void 0:d[e])&&void 0!==n?n:function(t){return t};t._widget.props[o]=i(null!==(r=t.getAttribute(e))&&void 0!==r?r:t._widget.props[e])}})))}}]);var a,p,y,v}(v);void 0===customElements.get(n.name)&&customElements.define(n.name,b);return b};var k=["__proto__","prototype","constructor"];function P(t,e){var n=function(t){return!!t&&t.constructor===Object};return n(t)&&n(e)?(Object.keys(e).forEach((function(r){if(!k.includes(r)){var o=t[r],i=e[r];Array.isArray(o)&&Array.isArray(i)?t[r]=o.concat(i):n(o)&&n(i)?t[r]=P(Object.assign({},o),i):t[r]=i}})),t):e}}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@merkur/integration-custom-element",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.39.0",
|
|
4
4
|
"description": "Merkur module for easy integration with other apps with custom element.",
|
|
5
5
|
"main": "lib/index",
|
|
6
6
|
"module": "lib/index",
|
|
@@ -29,8 +29,7 @@
|
|
|
29
29
|
"preversion": "npm test",
|
|
30
30
|
"test": "jest --no-watchman -c ./jest.config.js",
|
|
31
31
|
"test:es:version": "es-check es11 ./lib/index.mjs --module && es-check es9 ./lib/index.es9.mjs --module && es-check es9 ./lib/index.es9.cjs --module",
|
|
32
|
-
"build": "rollup -c rollup.config.mjs"
|
|
33
|
-
"prepare": "npm run build"
|
|
32
|
+
"build": "rollup -c rollup.config.mjs"
|
|
34
33
|
},
|
|
35
34
|
"repository": {
|
|
36
35
|
"type": "git",
|
|
@@ -51,12 +50,12 @@
|
|
|
51
50
|
},
|
|
52
51
|
"homepage": "https://merkur.js.org/",
|
|
53
52
|
"devDependencies": {
|
|
54
|
-
"@merkur/core": "^0.
|
|
55
|
-
"@merkur/integration": "^0.
|
|
53
|
+
"@merkur/core": "^0.39.0",
|
|
54
|
+
"@merkur/integration": "^0.39.0"
|
|
56
55
|
},
|
|
57
56
|
"peerDependencies": {
|
|
58
57
|
"@merkur/core": "*",
|
|
59
58
|
"@merkur/integration": "*"
|
|
60
59
|
},
|
|
61
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "8ad2c8b26246850ce6289502a8b05e882f80ce31"
|
|
62
61
|
}
|