@merkur/integration-custom-element 0.36.4 → 0.37.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/cli/index.mjs +3 -3
- package/lib/index.cjs +75 -57
- package/lib/index.es9.cjs +69 -53
- package/lib/index.es9.mjs +69 -53
- package/lib/index.js +75 -57
- package/lib/index.mjs +75 -57
- package/lib/index.umd.js +1 -1
- package/package.json +4 -4
package/cli/index.mjs
CHANGED
|
@@ -108,11 +108,11 @@ export default function ({ emitter, EMITTER_EVENTS }) {
|
|
|
108
108
|
);
|
|
109
109
|
|
|
110
110
|
emitter.on(EMITTER_EVENTS.CLI_CONFIG, function removeNodeTask({ cliConfig }) {
|
|
111
|
-
if (cliConfig.
|
|
112
|
-
cliConfig.
|
|
111
|
+
if (cliConfig.runTasks.length === 0) {
|
|
112
|
+
cliConfig.runTasks = ['es13', 'es9'];
|
|
113
113
|
}
|
|
114
114
|
|
|
115
|
-
cliConfig.
|
|
115
|
+
cliConfig.runTasks = cliConfig.runTasks.filter((task) => task !== 'node');
|
|
116
116
|
return cliConfig;
|
|
117
117
|
});
|
|
118
118
|
|
package/lib/index.cjs
CHANGED
|
@@ -37,81 +37,99 @@ function afterDOMLoad() {
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
function registerCustomElement(options) {
|
|
40
|
-
const { widgetDefinition, callbacks } = deepMerge(
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
40
|
+
const { widgetDefinition, callbacks, observedAttributes } = deepMerge(
|
|
41
|
+
{},
|
|
42
|
+
options,
|
|
43
|
+
);
|
|
44
|
+
class HTMLCustomElement extends HTMLElement {
|
|
45
|
+
static get observedAttributes() {
|
|
46
|
+
return observedAttributes ?? [];
|
|
47
|
+
}
|
|
48
|
+
constructor(...$) {
|
|
49
|
+
const _ = super(...$);
|
|
50
|
+
_._init();
|
|
51
|
+
return _;
|
|
52
|
+
}
|
|
53
|
+
_init() {}
|
|
54
|
+
}
|
|
46
55
|
|
|
47
|
-
|
|
48
|
-
|
|
56
|
+
class WidgetElement extends HTMLCustomElement {
|
|
57
|
+
_init() {
|
|
58
|
+
try {
|
|
59
|
+
super._init();
|
|
60
|
+
const customWidgetDefinition = deepMerge({}, widgetDefinition);
|
|
49
61
|
|
|
50
|
-
|
|
51
|
-
|
|
62
|
+
(async () => {
|
|
63
|
+
this._shadow = this.attachShadow({ mode: 'open' });
|
|
52
64
|
|
|
53
|
-
|
|
54
|
-
|
|
65
|
+
try {
|
|
66
|
+
const widget = await callbacks?.getInstance?.();
|
|
55
67
|
|
|
56
|
-
|
|
57
|
-
|
|
68
|
+
if (widget && widget.name && widget.version) {
|
|
69
|
+
this._widget = widget;
|
|
58
70
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
customElement: this,
|
|
62
|
-
});
|
|
71
|
+
await afterDOMLoad();
|
|
72
|
+
await integration.loadAssets(widget.assets, this._shadow);
|
|
63
73
|
|
|
64
|
-
|
|
65
|
-
await callbacks?.remount?.(this._widget, {
|
|
74
|
+
await callbacks?.reconstructor?.(this._widget, {
|
|
66
75
|
shadow: this._shadow,
|
|
67
76
|
customElement: this,
|
|
68
77
|
});
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
78
|
+
|
|
79
|
+
if (typeof callbacks?.remount === 'function') {
|
|
80
|
+
await callbacks?.remount?.(this._widget, {
|
|
81
|
+
shadow: this._shadow,
|
|
82
|
+
customElement: this,
|
|
83
|
+
});
|
|
84
|
+
} else {
|
|
85
|
+
widget.root = this._shadow;
|
|
86
|
+
widget.customElement = this;
|
|
87
|
+
this._shadow.appendChild(widget.container);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
return;
|
|
73
91
|
}
|
|
92
|
+
} catch (error) {
|
|
93
|
+
console.error(error);
|
|
74
94
|
|
|
75
95
|
return;
|
|
76
96
|
}
|
|
77
|
-
} catch (error) {
|
|
78
|
-
console.error(error);
|
|
79
97
|
|
|
80
|
-
|
|
81
|
-
|
|
98
|
+
try {
|
|
99
|
+
customWidgetDefinition.root = this._shadow;
|
|
100
|
+
customWidgetDefinition.customElement = this;
|
|
101
|
+
|
|
102
|
+
if (!customWidgetDefinition.container) {
|
|
103
|
+
customWidgetDefinition.container = document.createElement('div');
|
|
104
|
+
customWidgetDefinition.container.setAttribute(
|
|
105
|
+
'id',
|
|
106
|
+
'merkur-container',
|
|
107
|
+
);
|
|
108
|
+
}
|
|
82
109
|
|
|
83
|
-
|
|
84
|
-
customWidgetDefinition.root = this._shadow;
|
|
85
|
-
customWidgetDefinition.customElement = this;
|
|
110
|
+
this._shadow.appendChild(customWidgetDefinition.container);
|
|
86
111
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
'id',
|
|
91
|
-
'merkur-container',
|
|
112
|
+
this._widget = await createSPAWidget(
|
|
113
|
+
customWidgetDefinition,
|
|
114
|
+
this._shadow,
|
|
92
115
|
);
|
|
93
|
-
}
|
|
94
116
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
} catch (error) {
|
|
112
|
-
console.error(error);
|
|
113
|
-
}
|
|
114
|
-
})();
|
|
117
|
+
await callbacks?.constructor?.(this._widget, {
|
|
118
|
+
shadow: this._shadow,
|
|
119
|
+
customElement: this,
|
|
120
|
+
});
|
|
121
|
+
|
|
122
|
+
(await callbacks?.mount?.(this._widget, {
|
|
123
|
+
shadow: this._shadow,
|
|
124
|
+
customElement: this,
|
|
125
|
+
})) ?? (await this._widget.mount());
|
|
126
|
+
} catch (error) {
|
|
127
|
+
console.error(error);
|
|
128
|
+
}
|
|
129
|
+
})();
|
|
130
|
+
} catch (error) {
|
|
131
|
+
console.error(error);
|
|
132
|
+
}
|
|
115
133
|
}
|
|
116
134
|
|
|
117
135
|
connectedCallback() {
|
package/lib/index.es9.cjs
CHANGED
|
@@ -33,67 +33,83 @@ function afterDOMLoad() {
|
|
|
33
33
|
function registerCustomElement(options) {
|
|
34
34
|
const {
|
|
35
35
|
widgetDefinition,
|
|
36
|
-
callbacks
|
|
36
|
+
callbacks,
|
|
37
|
+
observedAttributes
|
|
37
38
|
} = deepMerge({}, options);
|
|
38
|
-
class
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
39
|
+
class HTMLCustomElement extends HTMLElement {
|
|
40
|
+
static get observedAttributes() {
|
|
41
|
+
return observedAttributes !== null && observedAttributes !== void 0 ? observedAttributes : [];
|
|
42
|
+
}
|
|
43
|
+
constructor(...$) {
|
|
44
|
+
const _ = super(...$);
|
|
45
|
+
_._init();
|
|
46
|
+
return _;
|
|
47
|
+
}
|
|
48
|
+
_init() {}
|
|
49
|
+
}
|
|
50
|
+
class WidgetElement extends HTMLCustomElement {
|
|
51
|
+
_init() {
|
|
52
|
+
try {
|
|
53
|
+
super._init();
|
|
54
|
+
const customWidgetDefinition = deepMerge({}, widgetDefinition);
|
|
55
|
+
(async () => {
|
|
56
|
+
this._shadow = this.attachShadow({
|
|
57
|
+
mode: 'open'
|
|
58
|
+
});
|
|
59
|
+
try {
|
|
60
|
+
var _callbacks$getInstanc;
|
|
61
|
+
const widget = await (callbacks === null || callbacks === void 0 || (_callbacks$getInstanc = callbacks.getInstance) === null || _callbacks$getInstanc === void 0 ? void 0 : _callbacks$getInstanc.call(callbacks));
|
|
62
|
+
if (widget && widget.name && widget.version) {
|
|
63
|
+
var _callbacks$reconstruc;
|
|
64
|
+
this._widget = widget;
|
|
65
|
+
await afterDOMLoad();
|
|
66
|
+
await integration.loadAssets(widget.assets, this._shadow);
|
|
67
|
+
await (callbacks === null || callbacks === void 0 || (_callbacks$reconstruc = callbacks.reconstructor) === null || _callbacks$reconstruc === void 0 ? void 0 : _callbacks$reconstruc.call(callbacks, this._widget, {
|
|
61
68
|
shadow: this._shadow,
|
|
62
69
|
customElement: this
|
|
63
70
|
}));
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
71
|
+
if (typeof (callbacks === null || callbacks === void 0 ? void 0 : callbacks.remount) === 'function') {
|
|
72
|
+
var _callbacks$remount;
|
|
73
|
+
await (callbacks === null || callbacks === void 0 || (_callbacks$remount = callbacks.remount) === null || _callbacks$remount === void 0 ? void 0 : _callbacks$remount.call(callbacks, this._widget, {
|
|
74
|
+
shadow: this._shadow,
|
|
75
|
+
customElement: this
|
|
76
|
+
}));
|
|
77
|
+
} else {
|
|
78
|
+
widget.root = this._shadow;
|
|
79
|
+
widget.customElement = this;
|
|
80
|
+
this._shadow.appendChild(widget.container);
|
|
81
|
+
}
|
|
82
|
+
return;
|
|
68
83
|
}
|
|
84
|
+
} catch (error) {
|
|
85
|
+
console.error(error);
|
|
69
86
|
return;
|
|
70
87
|
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
88
|
+
try {
|
|
89
|
+
var _callbacks$constructo, _await$callbacks$moun, _callbacks$mount;
|
|
90
|
+
customWidgetDefinition.root = this._shadow;
|
|
91
|
+
customWidgetDefinition.customElement = this;
|
|
92
|
+
if (!customWidgetDefinition.container) {
|
|
93
|
+
customWidgetDefinition.container = document.createElement('div');
|
|
94
|
+
customWidgetDefinition.container.setAttribute('id', 'merkur-container');
|
|
95
|
+
}
|
|
96
|
+
this._shadow.appendChild(customWidgetDefinition.container);
|
|
97
|
+
this._widget = await createSPAWidget(customWidgetDefinition, this._shadow);
|
|
98
|
+
await (callbacks === null || callbacks === void 0 || (_callbacks$constructo = callbacks.constructor) === null || _callbacks$constructo === void 0 ? void 0 : _callbacks$constructo.call(callbacks, this._widget, {
|
|
99
|
+
shadow: this._shadow,
|
|
100
|
+
customElement: this
|
|
101
|
+
}));
|
|
102
|
+
(_await$callbacks$moun = await (callbacks === null || callbacks === void 0 || (_callbacks$mount = callbacks.mount) === null || _callbacks$mount === void 0 ? void 0 : _callbacks$mount.call(callbacks, this._widget, {
|
|
103
|
+
shadow: this._shadow,
|
|
104
|
+
customElement: this
|
|
105
|
+
}))) !== null && _await$callbacks$moun !== void 0 ? _await$callbacks$moun : await this._widget.mount();
|
|
106
|
+
} catch (error) {
|
|
107
|
+
console.error(error);
|
|
82
108
|
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
customElement: this
|
|
88
|
-
}));
|
|
89
|
-
(_await$callbacks$moun = await (callbacks === null || callbacks === void 0 || (_callbacks$mount = callbacks.mount) === null || _callbacks$mount === void 0 ? void 0 : _callbacks$mount.call(callbacks, this._widget, {
|
|
90
|
-
shadow: this._shadow,
|
|
91
|
-
customElement: this
|
|
92
|
-
}))) !== null && _await$callbacks$moun !== void 0 ? _await$callbacks$moun : await this._widget.mount();
|
|
93
|
-
} catch (error) {
|
|
94
|
-
console.error(error);
|
|
95
|
-
}
|
|
96
|
-
})();
|
|
109
|
+
})();
|
|
110
|
+
} catch (error) {
|
|
111
|
+
console.error(error);
|
|
112
|
+
}
|
|
97
113
|
}
|
|
98
114
|
connectedCallback() {
|
|
99
115
|
var _this$_widget, _this$_widget$connect, _callbacks$connectedC;
|
package/lib/index.es9.mjs
CHANGED
|
@@ -31,67 +31,83 @@ function afterDOMLoad() {
|
|
|
31
31
|
function registerCustomElement(options) {
|
|
32
32
|
const {
|
|
33
33
|
widgetDefinition,
|
|
34
|
-
callbacks
|
|
34
|
+
callbacks,
|
|
35
|
+
observedAttributes
|
|
35
36
|
} = deepMerge({}, options);
|
|
36
|
-
class
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
37
|
+
class HTMLCustomElement extends HTMLElement {
|
|
38
|
+
static get observedAttributes() {
|
|
39
|
+
return observedAttributes !== null && observedAttributes !== void 0 ? observedAttributes : [];
|
|
40
|
+
}
|
|
41
|
+
constructor(...$) {
|
|
42
|
+
const _ = super(...$);
|
|
43
|
+
_._init();
|
|
44
|
+
return _;
|
|
45
|
+
}
|
|
46
|
+
_init() {}
|
|
47
|
+
}
|
|
48
|
+
class WidgetElement extends HTMLCustomElement {
|
|
49
|
+
_init() {
|
|
50
|
+
try {
|
|
51
|
+
super._init();
|
|
52
|
+
const customWidgetDefinition = deepMerge({}, widgetDefinition);
|
|
53
|
+
(async () => {
|
|
54
|
+
this._shadow = this.attachShadow({
|
|
55
|
+
mode: 'open'
|
|
56
|
+
});
|
|
57
|
+
try {
|
|
58
|
+
var _callbacks$getInstanc;
|
|
59
|
+
const widget = await (callbacks === null || callbacks === void 0 || (_callbacks$getInstanc = callbacks.getInstance) === null || _callbacks$getInstanc === void 0 ? void 0 : _callbacks$getInstanc.call(callbacks));
|
|
60
|
+
if (widget && widget.name && widget.version) {
|
|
61
|
+
var _callbacks$reconstruc;
|
|
62
|
+
this._widget = widget;
|
|
63
|
+
await afterDOMLoad();
|
|
64
|
+
await loadAssets(widget.assets, this._shadow);
|
|
65
|
+
await (callbacks === null || callbacks === void 0 || (_callbacks$reconstruc = callbacks.reconstructor) === null || _callbacks$reconstruc === void 0 ? void 0 : _callbacks$reconstruc.call(callbacks, this._widget, {
|
|
59
66
|
shadow: this._shadow,
|
|
60
67
|
customElement: this
|
|
61
68
|
}));
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
69
|
+
if (typeof (callbacks === null || callbacks === void 0 ? void 0 : callbacks.remount) === 'function') {
|
|
70
|
+
var _callbacks$remount;
|
|
71
|
+
await (callbacks === null || callbacks === void 0 || (_callbacks$remount = callbacks.remount) === null || _callbacks$remount === void 0 ? void 0 : _callbacks$remount.call(callbacks, this._widget, {
|
|
72
|
+
shadow: this._shadow,
|
|
73
|
+
customElement: this
|
|
74
|
+
}));
|
|
75
|
+
} else {
|
|
76
|
+
widget.root = this._shadow;
|
|
77
|
+
widget.customElement = this;
|
|
78
|
+
this._shadow.appendChild(widget.container);
|
|
79
|
+
}
|
|
80
|
+
return;
|
|
66
81
|
}
|
|
82
|
+
} catch (error) {
|
|
83
|
+
console.error(error);
|
|
67
84
|
return;
|
|
68
85
|
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
86
|
+
try {
|
|
87
|
+
var _callbacks$constructo, _await$callbacks$moun, _callbacks$mount;
|
|
88
|
+
customWidgetDefinition.root = this._shadow;
|
|
89
|
+
customWidgetDefinition.customElement = this;
|
|
90
|
+
if (!customWidgetDefinition.container) {
|
|
91
|
+
customWidgetDefinition.container = document.createElement('div');
|
|
92
|
+
customWidgetDefinition.container.setAttribute('id', 'merkur-container');
|
|
93
|
+
}
|
|
94
|
+
this._shadow.appendChild(customWidgetDefinition.container);
|
|
95
|
+
this._widget = await createSPAWidget(customWidgetDefinition, this._shadow);
|
|
96
|
+
await (callbacks === null || callbacks === void 0 || (_callbacks$constructo = callbacks.constructor) === null || _callbacks$constructo === void 0 ? void 0 : _callbacks$constructo.call(callbacks, this._widget, {
|
|
97
|
+
shadow: this._shadow,
|
|
98
|
+
customElement: this
|
|
99
|
+
}));
|
|
100
|
+
(_await$callbacks$moun = await (callbacks === null || callbacks === void 0 || (_callbacks$mount = callbacks.mount) === null || _callbacks$mount === void 0 ? void 0 : _callbacks$mount.call(callbacks, this._widget, {
|
|
101
|
+
shadow: this._shadow,
|
|
102
|
+
customElement: this
|
|
103
|
+
}))) !== null && _await$callbacks$moun !== void 0 ? _await$callbacks$moun : await this._widget.mount();
|
|
104
|
+
} catch (error) {
|
|
105
|
+
console.error(error);
|
|
80
106
|
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
customElement: this
|
|
86
|
-
}));
|
|
87
|
-
(_await$callbacks$moun = await (callbacks === null || callbacks === void 0 || (_callbacks$mount = callbacks.mount) === null || _callbacks$mount === void 0 ? void 0 : _callbacks$mount.call(callbacks, this._widget, {
|
|
88
|
-
shadow: this._shadow,
|
|
89
|
-
customElement: this
|
|
90
|
-
}))) !== null && _await$callbacks$moun !== void 0 ? _await$callbacks$moun : await this._widget.mount();
|
|
91
|
-
} catch (error) {
|
|
92
|
-
console.error(error);
|
|
93
|
-
}
|
|
94
|
-
})();
|
|
107
|
+
})();
|
|
108
|
+
} catch (error) {
|
|
109
|
+
console.error(error);
|
|
110
|
+
}
|
|
95
111
|
}
|
|
96
112
|
connectedCallback() {
|
|
97
113
|
var _this$_widget, _this$_widget$connect, _callbacks$connectedC;
|
package/lib/index.js
CHANGED
|
@@ -37,81 +37,99 @@ function afterDOMLoad() {
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
function registerCustomElement(options) {
|
|
40
|
-
const { widgetDefinition, callbacks } = deepMerge(
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
40
|
+
const { widgetDefinition, callbacks, observedAttributes } = deepMerge(
|
|
41
|
+
{},
|
|
42
|
+
options,
|
|
43
|
+
);
|
|
44
|
+
class HTMLCustomElement extends HTMLElement {
|
|
45
|
+
static get observedAttributes() {
|
|
46
|
+
return observedAttributes ?? [];
|
|
47
|
+
}
|
|
48
|
+
constructor(...$) {
|
|
49
|
+
const _ = super(...$);
|
|
50
|
+
_._init();
|
|
51
|
+
return _;
|
|
52
|
+
}
|
|
53
|
+
_init() {}
|
|
54
|
+
}
|
|
46
55
|
|
|
47
|
-
|
|
48
|
-
|
|
56
|
+
class WidgetElement extends HTMLCustomElement {
|
|
57
|
+
_init() {
|
|
58
|
+
try {
|
|
59
|
+
super._init();
|
|
60
|
+
const customWidgetDefinition = deepMerge({}, widgetDefinition);
|
|
49
61
|
|
|
50
|
-
|
|
51
|
-
|
|
62
|
+
(async () => {
|
|
63
|
+
this._shadow = this.attachShadow({ mode: 'open' });
|
|
52
64
|
|
|
53
|
-
|
|
54
|
-
|
|
65
|
+
try {
|
|
66
|
+
const widget = await callbacks?.getInstance?.();
|
|
55
67
|
|
|
56
|
-
|
|
57
|
-
|
|
68
|
+
if (widget && widget.name && widget.version) {
|
|
69
|
+
this._widget = widget;
|
|
58
70
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
customElement: this,
|
|
62
|
-
});
|
|
71
|
+
await afterDOMLoad();
|
|
72
|
+
await integration.loadAssets(widget.assets, this._shadow);
|
|
63
73
|
|
|
64
|
-
|
|
65
|
-
await callbacks?.remount?.(this._widget, {
|
|
74
|
+
await callbacks?.reconstructor?.(this._widget, {
|
|
66
75
|
shadow: this._shadow,
|
|
67
76
|
customElement: this,
|
|
68
77
|
});
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
78
|
+
|
|
79
|
+
if (typeof callbacks?.remount === 'function') {
|
|
80
|
+
await callbacks?.remount?.(this._widget, {
|
|
81
|
+
shadow: this._shadow,
|
|
82
|
+
customElement: this,
|
|
83
|
+
});
|
|
84
|
+
} else {
|
|
85
|
+
widget.root = this._shadow;
|
|
86
|
+
widget.customElement = this;
|
|
87
|
+
this._shadow.appendChild(widget.container);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
return;
|
|
73
91
|
}
|
|
92
|
+
} catch (error) {
|
|
93
|
+
console.error(error);
|
|
74
94
|
|
|
75
95
|
return;
|
|
76
96
|
}
|
|
77
|
-
} catch (error) {
|
|
78
|
-
console.error(error);
|
|
79
97
|
|
|
80
|
-
|
|
81
|
-
|
|
98
|
+
try {
|
|
99
|
+
customWidgetDefinition.root = this._shadow;
|
|
100
|
+
customWidgetDefinition.customElement = this;
|
|
101
|
+
|
|
102
|
+
if (!customWidgetDefinition.container) {
|
|
103
|
+
customWidgetDefinition.container = document.createElement('div');
|
|
104
|
+
customWidgetDefinition.container.setAttribute(
|
|
105
|
+
'id',
|
|
106
|
+
'merkur-container',
|
|
107
|
+
);
|
|
108
|
+
}
|
|
82
109
|
|
|
83
|
-
|
|
84
|
-
customWidgetDefinition.root = this._shadow;
|
|
85
|
-
customWidgetDefinition.customElement = this;
|
|
110
|
+
this._shadow.appendChild(customWidgetDefinition.container);
|
|
86
111
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
'id',
|
|
91
|
-
'merkur-container',
|
|
112
|
+
this._widget = await createSPAWidget(
|
|
113
|
+
customWidgetDefinition,
|
|
114
|
+
this._shadow,
|
|
92
115
|
);
|
|
93
|
-
}
|
|
94
116
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
} catch (error) {
|
|
112
|
-
console.error(error);
|
|
113
|
-
}
|
|
114
|
-
})();
|
|
117
|
+
await callbacks?.constructor?.(this._widget, {
|
|
118
|
+
shadow: this._shadow,
|
|
119
|
+
customElement: this,
|
|
120
|
+
});
|
|
121
|
+
|
|
122
|
+
(await callbacks?.mount?.(this._widget, {
|
|
123
|
+
shadow: this._shadow,
|
|
124
|
+
customElement: this,
|
|
125
|
+
})) ?? (await this._widget.mount());
|
|
126
|
+
} catch (error) {
|
|
127
|
+
console.error(error);
|
|
128
|
+
}
|
|
129
|
+
})();
|
|
130
|
+
} catch (error) {
|
|
131
|
+
console.error(error);
|
|
132
|
+
}
|
|
115
133
|
}
|
|
116
134
|
|
|
117
135
|
connectedCallback() {
|
package/lib/index.mjs
CHANGED
|
@@ -35,81 +35,99 @@ function afterDOMLoad() {
|
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
function registerCustomElement(options) {
|
|
38
|
-
const { widgetDefinition, callbacks } = deepMerge(
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
38
|
+
const { widgetDefinition, callbacks, observedAttributes } = deepMerge(
|
|
39
|
+
{},
|
|
40
|
+
options,
|
|
41
|
+
);
|
|
42
|
+
class HTMLCustomElement extends HTMLElement {
|
|
43
|
+
static get observedAttributes() {
|
|
44
|
+
return observedAttributes ?? [];
|
|
45
|
+
}
|
|
46
|
+
constructor(...$) {
|
|
47
|
+
const _ = super(...$);
|
|
48
|
+
_._init();
|
|
49
|
+
return _;
|
|
50
|
+
}
|
|
51
|
+
_init() {}
|
|
52
|
+
}
|
|
44
53
|
|
|
45
|
-
|
|
46
|
-
|
|
54
|
+
class WidgetElement extends HTMLCustomElement {
|
|
55
|
+
_init() {
|
|
56
|
+
try {
|
|
57
|
+
super._init();
|
|
58
|
+
const customWidgetDefinition = deepMerge({}, widgetDefinition);
|
|
47
59
|
|
|
48
|
-
|
|
49
|
-
|
|
60
|
+
(async () => {
|
|
61
|
+
this._shadow = this.attachShadow({ mode: 'open' });
|
|
50
62
|
|
|
51
|
-
|
|
52
|
-
|
|
63
|
+
try {
|
|
64
|
+
const widget = await callbacks?.getInstance?.();
|
|
53
65
|
|
|
54
|
-
|
|
55
|
-
|
|
66
|
+
if (widget && widget.name && widget.version) {
|
|
67
|
+
this._widget = widget;
|
|
56
68
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
customElement: this,
|
|
60
|
-
});
|
|
69
|
+
await afterDOMLoad();
|
|
70
|
+
await loadAssets(widget.assets, this._shadow);
|
|
61
71
|
|
|
62
|
-
|
|
63
|
-
await callbacks?.remount?.(this._widget, {
|
|
72
|
+
await callbacks?.reconstructor?.(this._widget, {
|
|
64
73
|
shadow: this._shadow,
|
|
65
74
|
customElement: this,
|
|
66
75
|
});
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
76
|
+
|
|
77
|
+
if (typeof callbacks?.remount === 'function') {
|
|
78
|
+
await callbacks?.remount?.(this._widget, {
|
|
79
|
+
shadow: this._shadow,
|
|
80
|
+
customElement: this,
|
|
81
|
+
});
|
|
82
|
+
} else {
|
|
83
|
+
widget.root = this._shadow;
|
|
84
|
+
widget.customElement = this;
|
|
85
|
+
this._shadow.appendChild(widget.container);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
return;
|
|
71
89
|
}
|
|
90
|
+
} catch (error) {
|
|
91
|
+
console.error(error);
|
|
72
92
|
|
|
73
93
|
return;
|
|
74
94
|
}
|
|
75
|
-
} catch (error) {
|
|
76
|
-
console.error(error);
|
|
77
95
|
|
|
78
|
-
|
|
79
|
-
|
|
96
|
+
try {
|
|
97
|
+
customWidgetDefinition.root = this._shadow;
|
|
98
|
+
customWidgetDefinition.customElement = this;
|
|
99
|
+
|
|
100
|
+
if (!customWidgetDefinition.container) {
|
|
101
|
+
customWidgetDefinition.container = document.createElement('div');
|
|
102
|
+
customWidgetDefinition.container.setAttribute(
|
|
103
|
+
'id',
|
|
104
|
+
'merkur-container',
|
|
105
|
+
);
|
|
106
|
+
}
|
|
80
107
|
|
|
81
|
-
|
|
82
|
-
customWidgetDefinition.root = this._shadow;
|
|
83
|
-
customWidgetDefinition.customElement = this;
|
|
108
|
+
this._shadow.appendChild(customWidgetDefinition.container);
|
|
84
109
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
'id',
|
|
89
|
-
'merkur-container',
|
|
110
|
+
this._widget = await createSPAWidget(
|
|
111
|
+
customWidgetDefinition,
|
|
112
|
+
this._shadow,
|
|
90
113
|
);
|
|
91
|
-
}
|
|
92
114
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
} catch (error) {
|
|
110
|
-
console.error(error);
|
|
111
|
-
}
|
|
112
|
-
})();
|
|
115
|
+
await callbacks?.constructor?.(this._widget, {
|
|
116
|
+
shadow: this._shadow,
|
|
117
|
+
customElement: this,
|
|
118
|
+
});
|
|
119
|
+
|
|
120
|
+
(await callbacks?.mount?.(this._widget, {
|
|
121
|
+
shadow: this._shadow,
|
|
122
|
+
customElement: this,
|
|
123
|
+
})) ?? (await this._widget.mount());
|
|
124
|
+
} catch (error) {
|
|
125
|
+
console.error(error);
|
|
126
|
+
}
|
|
127
|
+
})();
|
|
128
|
+
} catch (error) {
|
|
129
|
+
console.error(error);
|
|
130
|
+
}
|
|
113
131
|
}
|
|
114
132
|
|
|
115
133
|
connectedCallback() {
|
package/lib/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}!function(e,t){if("function"==typeof define&&define.amd)define("@merkur/integration-custom-element",["exports","@merkur/core","@merkur/integration"],t);else if("undefined"!=typeof exports)t(exports,require("@merkur/core"),require("@merkur/integration"));else{var n={exports:{}};t(n.exports,e.Merkur.Core,e.Merkur.Integration),e.merkurIntegrationCustomElement=n.exports}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:this,(function(t,n,
|
|
1
|
+
function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}!function(e,t){if("function"==typeof define&&define.amd)define("@merkur/integration-custom-element",["exports","@merkur/core","@merkur/integration"],t);else if("undefined"!=typeof exports)t(exports,require("@merkur/core"),require("@merkur/integration"));else{var n={exports:{}};t(n.exports,e.Merkur.Core,e.Merkur.Integration),e.merkurIntegrationCustomElement=n.exports}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:this,(function(t,n,r){function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){u(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t,n){return(t=d(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(){return l="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,n){var r=function(e,t){for(;!{}.hasOwnProperty.call(e,t)&&null!==(e=m(e)););return e}(e,t);if(r){var o=Object.getOwnPropertyDescriptor(r,t);return o.get?o.get.call(arguments.length<3?e:n):o.value}},l.apply(null,arguments)}function c(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,d(r.key),r)}}function s(e,t,n){return t&&a(e.prototype,t),n&&a(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e}function d(t){var n=function(t,n){if("object"!=e(t)||!t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,n||"default");if("object"!=e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"==e(n)?n:n+""}function f(e,t,n){return t=m(t),p(e,v()?Reflect.construct(t,n||[],m(e).constructor):t.apply(e,n))}function p(t,n){if(n&&("object"==e(n)||"function"==typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}function y(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&b(e,t)}function h(e){var t="function"==typeof Map?new Map:void 0;return h=function(e){if(null===e||!function(e){try{return-1!==Function.toString.call(e).indexOf("[native code]")}catch(t){return"function"==typeof e}}(e))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,n)}function n(){return function(e,t,n){if(v())return Reflect.construct.apply(null,arguments);var r=[null];r.push.apply(r,t);var o=new(e.bind.apply(e,r));return n&&b(o,n.prototype),o}(e,arguments,m(this).constructor)}return n.prototype=Object.create(e.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),b(n,e)},h(e)}function v(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(e){}return(v=function(){return!!e})()}function b(e,t){return b=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},b(e,t)}function m(e){return m=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},m(e)}function w(e,t,n,r,o,i,u){try{var l=e[i](u),c=l.value}catch(e){return void n(e)}l.done?t(c):Promise.resolve(c).then(r,o)}function g(e){return function(){var t=this,n=arguments;return new Promise((function(r,o){var i=e.apply(t,n);function u(e){w(i,r,o,u,l,"next",e)}function l(e){w(i,r,o,u,l,"throw",e)}u(void 0)}))}}function _(){return(_=g((function*(e,t){var o=i(i({},e),{},{createWidget:e.createWidget});return(0,n.getMerkur)().isRegistered(o.name+o.version)||(0,n.getMerkur)().register(o),yield O(),yield(0,r.loadAssets)(o.assets,t),yield(0,n.getMerkur)().create(o)}))).apply(this,arguments)}function O(){return new Promise((function(e){"undefined"!=typeof document?"loading"!==document.readyState?e():window.addEventListener("DOMContentLoaded",(function(){e()})):e()}))}Object.defineProperty(t,"__esModule",{value:!0}),t.deepMerge=j,t.registerCustomElement=function(e){var t=j({},e),n=t.widgetDefinition,o=t.callbacks,i=t.observedAttributes,u=function(e){function t(){var e;c(this,t);for(var n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];var i=e=f(this,t,[].concat(r));return i._init(),p(e,i)}return y(t,e),s(t,[{key:"_init",value:function(){}}],[{key:"observedAttributes",get:function(){return null!=i?i:[]}}])}(h(HTMLElement)),a=function(e){function t(){return c(this,t),f(this,t,arguments)}return y(t,e),s(t,[{key:"_init",value:function(){var e,i,u,c,a,s=this;try{(e=t,i="_init",u=this,a=l(m(1&(c=3)?e.prototype:e),i,u),2&c&&"function"==typeof a?function(e){return a.apply(u,e)}:a)([]);var d=j({},n);g((function*(){s._shadow=s.attachShadow({mode:"open"});try{var e,t=yield null==o||null===(e=o.getInstance)||void 0===e?void 0:e.call(o);if(t&&t.name&&t.version){var n,i;if(s._widget=t,yield O(),yield(0,r.loadAssets)(t.assets,s._shadow),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 t.root=s._shadow,t.customElement=s,s._shadow.appendChild(t.container);return}}catch(e){return void console.error(e)}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(e,t){return _.apply(this,arguments)}(d,s._shadow),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(e){console.error(e)}}))()}catch(e){console.error(e)}}},{key:"connectedCallback",value:function(){var e,t,n;null===(e=this._widget)||void 0===e||null===(t=e.connectedCallback)||void 0===t||t.call(e,{shadow:this._shadow,customElement:this}),null==o||null===(n=o.connectedCallback)||void 0===n||n.call(o,this._widget,{shadow:this._shadow,customElement:this})}},{key:"disconnectedCallback",value:function(){var e,t,n;null===(e=this._widget)||void 0===e||null===(t=e.disconnectedCallback)||void 0===t||t.call(e,{shadow:this._shadow,customElement:this}),null==o||null===(n=o.disconnectedCallback)||void 0===n||n.call(o,this._widget,{shadow:this._shadow,customElement:this})}},{key:"adoptedCallback",value:function(){var e,t,n;null===(e=this._widget)||void 0===e||null===(t=e.adoptedCallback)||void 0===t||t.call(e,{shadow:this._shadow,customElement:this}),null==o||null===(n=o.adoptedCallback)||void 0===n||n.call(o,this._widget,{shadow:this._shadow,customElement:this})}},{key:"attributeChangedCallback",value:function(e,t,n){var r,i,u;null===(r=this._widget)||void 0===r||null===(i=r.attributeChangedCallback)||void 0===i||i.call(r,this._widget,e,t,n,{shadow:this._shadow,customElement:this}),null==o||null===(u=o.attributeChangedCallback)||void 0===u||u.call(o,this._widget,e,t,n,{shadow:this._shadow,customElement:this})}}])}(u);void 0===customElements.get(n.name)&&customElements.define(n.name,a)};var k=["__proto__","prototype","constructor"];function j(e,t){var n=function(e){return!!e&&e.constructor===Object};return n(e)&&n(t)?(Object.keys(t).forEach((function(r){if(!k.includes(r)){var o=e[r],i=t[r];Array.isArray(o)&&Array.isArray(i)?e[r]=o.concat(i):n(o)&&n(i)?e[r]=j(Object.assign({},o),i):e[r]=i}})),e):t}}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@merkur/integration-custom-element",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.37.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",
|
|
@@ -51,12 +51,12 @@
|
|
|
51
51
|
},
|
|
52
52
|
"homepage": "https://merkur.js.org/",
|
|
53
53
|
"devDependencies": {
|
|
54
|
-
"@merkur/core": "^0.
|
|
55
|
-
"@merkur/integration": "^0.
|
|
54
|
+
"@merkur/core": "^0.37.0",
|
|
55
|
+
"@merkur/integration": "^0.37.0"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"@merkur/core": "*",
|
|
59
59
|
"@merkur/integration": "*"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "af826493e5ed4b37602dd43ce89a59baeeb1bada"
|
|
62
62
|
}
|