@merkur/integration-custom-element 0.46.0 → 1.0.3
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 +67 -22
- package/lib/index.cjs +47 -54
- package/lib/index.es9.cjs +49 -55
- package/lib/index.es9.mjs +49 -55
- package/lib/index.js +47 -54
- package/lib/index.mjs +47 -54
- package/lib/index.umd.js +1 -1
- package/package.json +5 -8
package/README.md
CHANGED
|
@@ -38,8 +38,42 @@ To check out [live demo](https://merkur.js.org/demo) and [docs](https://merkur.j
|
|
|
38
38
|
|
|
39
39
|
Contribute to this project via [Pull-Requests](https://github.com/mjancarik/merkur/pulls).
|
|
40
40
|
|
|
41
|
-
We are
|
|
41
|
+
We are using [Changesets](https://github.com/changesets/changesets) for versioning and releasing. To add a changeset describing your changes, run `npm run changeset`.
|
|
42
42
|
|
|
43
|
+
> **Note:** The release process is documented **only** in this root README. Any per-package README sections that still describe a Lerna/Conventional Commits–based release flow are outdated and should be ignored in favour of the instructions below.
|
|
44
|
+
|
|
45
|
+
### Changeset format
|
|
46
|
+
|
|
47
|
+
Each changeset file (`.changeset/*.md`) must follow this structure:
|
|
48
|
+
|
|
49
|
+
**Frontmatter** — standard Changesets YAML listing affected package names and bump types (`patch`, `minor`, `major`).
|
|
50
|
+
|
|
51
|
+
**First line after frontmatter** — a single brief sentence summarising the change. No heading, no bold, no trailing bullet — just a plain declarative sentence. This section is not required but helps to quickly understand the change when browsing the changesets.
|
|
52
|
+
|
|
53
|
+
**Body** — three bullet points in this exact order, with no blank lines between them:
|
|
54
|
+
|
|
55
|
+
- **What** One or more sentences describing what changed: which APIs, files, or behaviours were added, removed, or fixed. Make sublists if needed to break down complex changes, but keep each bullet point as a single paragraph.
|
|
56
|
+
- **Why** One or more sentences explaining the motivation: why the change was necessary or beneficial.
|
|
57
|
+
- **How** Migration steps for consumers or contributors. If no action is required, write exactly: `Nothing.`
|
|
58
|
+
|
|
59
|
+
Additional rules:
|
|
60
|
+
- Each bullet is a single paragraph — no nested lists, no code blocks inside a bullet.
|
|
61
|
+
- Do not use headings (`##`, `###`) inside the body.
|
|
62
|
+
- Code symbols (function names, paths, package names) use backtick inline code.
|
|
63
|
+
|
|
64
|
+
Example:
|
|
65
|
+
|
|
66
|
+
```markdown
|
|
67
|
+
---
|
|
68
|
+
"@merkur/example": minor
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
Add `createFoo` helper for simplified widget initialisation.
|
|
72
|
+
|
|
73
|
+
- **What** New `createFoo(options)` export in `@merkur/example` wraps the low-level `initFoo` call and applies sensible defaults for `name` and `version`.
|
|
74
|
+
- **Why** Every project was duplicating the same boilerplate to call `initFoo`; centralising it reduces setup friction and ensures consistent defaults.
|
|
75
|
+
- **How** Replace direct `initFoo` calls with `createFoo({ name, version })`. The returned object is API-compatible, so no further changes are needed.
|
|
76
|
+
```
|
|
43
77
|
|
|
44
78
|
### Release
|
|
45
79
|
|
|
@@ -48,32 +82,43 @@ To release a version you must have the right permissions, please contact one of
|
|
|
48
82
|
|
|
49
83
|
#### Regular version release
|
|
50
84
|
|
|
51
|
-
To do a regular release,
|
|
85
|
+
To do a regular release, from the `master` branch with no uncommitted changes, run:
|
|
52
86
|
|
|
53
87
|
```
|
|
54
88
|
npm run release
|
|
55
89
|
```
|
|
56
90
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
91
|
+
This runs `release:prepare` (applies pending changesets, bumps versions, updates `package-lock.json`) followed by `release:push` (commits, tags, and pushes to the repository).
|
|
92
|
+
|
|
93
|
+
Packages are published from a GitHub Action triggered when a new version tag is pushed.
|
|
94
|
+
|
|
95
|
+
#### RC (pre-release) release
|
|
96
|
+
|
|
97
|
+
1. Enter pre-release mode (only needs to be done once per RC cycle):
|
|
98
|
+
```
|
|
99
|
+
npm run release:next:init
|
|
100
|
+
```
|
|
101
|
+
This sets pre-release mode to `rc`, so subsequent version bumps produce `rc` versions (e.g. `v0.44.0-rc.0`).
|
|
102
|
+
|
|
103
|
+
2. Add a changeset describing your changes:
|
|
104
|
+
```
|
|
105
|
+
npm run changeset
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
3. Bump versions and push the RC release:
|
|
109
|
+
```
|
|
110
|
+
npm run release
|
|
111
|
+
```
|
|
112
|
+
Repeat steps 2–3 for each subsequent RC iteration (e.g. `rc.0 → rc.1`).
|
|
113
|
+
|
|
114
|
+
4. When ready to graduate to a stable release, exit pre-release mode and prepare the final version:
|
|
115
|
+
```
|
|
116
|
+
npm run release:graduate
|
|
117
|
+
```
|
|
118
|
+
Then push with:
|
|
119
|
+
```
|
|
120
|
+
npm run release:push
|
|
121
|
+
```
|
|
77
122
|
|
|
78
123
|
---
|
|
79
124
|
|
package/lib/index.cjs
CHANGED
|
@@ -24,6 +24,8 @@ function afterDOMLoad() {
|
|
|
24
24
|
} else {
|
|
25
25
|
window.addEventListener('DOMContentLoaded', () => {
|
|
26
26
|
resolve();
|
|
27
|
+
}, {
|
|
28
|
+
once: true
|
|
27
29
|
});
|
|
28
30
|
}
|
|
29
31
|
} else {
|
|
@@ -44,6 +46,9 @@ function registerCustomElement(options) {
|
|
|
44
46
|
}
|
|
45
47
|
constructor(...$) {
|
|
46
48
|
const _ = super(...$);
|
|
49
|
+
this._pendingProps = {};
|
|
50
|
+
this._batchTimeout = null;
|
|
51
|
+
this._isInitialized = false;
|
|
47
52
|
_._init();
|
|
48
53
|
return _;
|
|
49
54
|
}
|
|
@@ -65,15 +70,9 @@ function registerCustomElement(options) {
|
|
|
65
70
|
await afterDOMLoad();
|
|
66
71
|
await integration.loadAssets(widget.assets, this._shadow);
|
|
67
72
|
this._setDefaultProps();
|
|
68
|
-
await callbacks?.reconstructor?.(this._widget,
|
|
69
|
-
shadow: this._shadow,
|
|
70
|
-
customElement: this
|
|
71
|
-
});
|
|
73
|
+
await callbacks?.reconstructor?.(this._widget, this._getContext());
|
|
72
74
|
if (typeof callbacks?.remount === 'function') {
|
|
73
|
-
await callbacks?.remount?.(this._widget,
|
|
74
|
-
shadow: this._shadow,
|
|
75
|
-
customElement: this
|
|
76
|
-
});
|
|
75
|
+
await callbacks?.remount?.(this._widget, this._getContext());
|
|
77
76
|
} else {
|
|
78
77
|
widget.root = this._shadow;
|
|
79
78
|
widget.customElement = this;
|
|
@@ -95,14 +94,8 @@ function registerCustomElement(options) {
|
|
|
95
94
|
this._shadow.appendChild(customWidgetDefinition.container);
|
|
96
95
|
this._widget = await createSPAWidget(customWidgetDefinition, this._shadow);
|
|
97
96
|
this._setDefaultProps();
|
|
98
|
-
await callbacks?.constructor?.(this._widget,
|
|
99
|
-
|
|
100
|
-
customElement: this
|
|
101
|
-
});
|
|
102
|
-
(await callbacks?.mount?.(this._widget, {
|
|
103
|
-
shadow: this._shadow,
|
|
104
|
-
customElement: this
|
|
105
|
-
})) ?? (await this._widget.mount());
|
|
97
|
+
await callbacks?.constructor?.(this._widget, this._getContext());
|
|
98
|
+
(await callbacks?.mount?.(this._widget, this._getContext())) ?? (await this._widget.mount());
|
|
106
99
|
} catch (error) {
|
|
107
100
|
console.error(error);
|
|
108
101
|
}
|
|
@@ -112,53 +105,47 @@ function registerCustomElement(options) {
|
|
|
112
105
|
}
|
|
113
106
|
}
|
|
114
107
|
async connectedCallback() {
|
|
108
|
+
this._isInitialized = true;
|
|
115
109
|
await this._widgetPromise;
|
|
116
|
-
this._widget?.connectedCallback?.(
|
|
117
|
-
|
|
118
|
-
customElement: this
|
|
119
|
-
});
|
|
120
|
-
callbacks?.connectedCallback?.(this._widget, {
|
|
121
|
-
shadow: this._shadow,
|
|
122
|
-
customElement: this
|
|
123
|
-
});
|
|
110
|
+
this._widget?.connectedCallback?.(this._getContext());
|
|
111
|
+
callbacks?.connectedCallback?.(this._widget, this._getContext());
|
|
124
112
|
}
|
|
125
113
|
async disconnectedCallback() {
|
|
114
|
+
this._isInitialized = false;
|
|
126
115
|
await this._widgetPromise;
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
116
|
+
|
|
117
|
+
// Clear any pending batch updates
|
|
118
|
+
if (this._batchTimeout) {
|
|
119
|
+
clearTimeout(this._batchTimeout);
|
|
120
|
+
this._batchTimeout = null;
|
|
121
|
+
this._pendingProps = {};
|
|
122
|
+
}
|
|
123
|
+
this._widget?.disconnectedCallback?.(this._getContext());
|
|
124
|
+
callbacks?.disconnectedCallback?.(this._widget, this._getContext());
|
|
135
125
|
}
|
|
136
126
|
async adoptedCallback() {
|
|
137
127
|
await this._widgetPromise;
|
|
138
|
-
this._widget?.adoptedCallback?.(
|
|
139
|
-
|
|
140
|
-
customElement: this
|
|
141
|
-
});
|
|
142
|
-
callbacks?.adoptedCallback?.(this._widget, {
|
|
143
|
-
shadow: this._shadow,
|
|
144
|
-
customElement: this
|
|
145
|
-
});
|
|
128
|
+
this._widget?.adoptedCallback?.(this._getContext());
|
|
129
|
+
callbacks?.adoptedCallback?.(this._widget, this._getContext());
|
|
146
130
|
}
|
|
147
131
|
async attributeChangedCallback(name, oldValue, newValue) {
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
[camelCaseKey]
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
132
|
+
if (this._isInitialized) {
|
|
133
|
+
await this._widgetPromise;
|
|
134
|
+
const camelCaseKey = name.replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
135
|
+
const parser = attributesParser?.[name] ?? (value => value);
|
|
136
|
+
this._pendingProps[camelCaseKey] = parser(newValue);
|
|
137
|
+
if (this._batchTimeout) {
|
|
138
|
+
clearTimeout(this._batchTimeout);
|
|
139
|
+
}
|
|
140
|
+
this._batchTimeout = setTimeout(() => {
|
|
141
|
+
const propsToUpdate = this._pendingProps;
|
|
142
|
+
this._pendingProps = {};
|
|
143
|
+
this._batchTimeout = null;
|
|
144
|
+
this._widget?.setProps?.(propsToUpdate);
|
|
145
|
+
}, 0);
|
|
146
|
+
this._widget?.attributeChangedCallback?.(this._widget, name, oldValue, newValue, this._getContext());
|
|
147
|
+
callbacks?.attributeChangedCallback?.(this._widget, name, oldValue, newValue, this._getContext());
|
|
148
|
+
}
|
|
162
149
|
}
|
|
163
150
|
_setDefaultProps() {
|
|
164
151
|
const attributes = this.constructor.observedAttributes;
|
|
@@ -175,6 +162,12 @@ function registerCustomElement(options) {
|
|
|
175
162
|
});
|
|
176
163
|
}
|
|
177
164
|
}
|
|
165
|
+
_getContext() {
|
|
166
|
+
return {
|
|
167
|
+
shadow: this._shadow,
|
|
168
|
+
customElement: this
|
|
169
|
+
};
|
|
170
|
+
}
|
|
178
171
|
}
|
|
179
172
|
if (customElements.get(widgetDefinition.name) === undefined) {
|
|
180
173
|
customElements.define(widgetDefinition.name, WidgetElement);
|
package/lib/index.es9.cjs
CHANGED
|
@@ -23,6 +23,8 @@ function afterDOMLoad() {
|
|
|
23
23
|
} else {
|
|
24
24
|
window.addEventListener('DOMContentLoaded', () => {
|
|
25
25
|
resolve();
|
|
26
|
+
}, {
|
|
27
|
+
once: true
|
|
26
28
|
});
|
|
27
29
|
}
|
|
28
30
|
} else {
|
|
@@ -43,6 +45,9 @@ function registerCustomElement(options) {
|
|
|
43
45
|
}
|
|
44
46
|
constructor(...$) {
|
|
45
47
|
const _ = super(...$);
|
|
48
|
+
this._pendingProps = {};
|
|
49
|
+
this._batchTimeout = null;
|
|
50
|
+
this._isInitialized = false;
|
|
46
51
|
_._init();
|
|
47
52
|
return _;
|
|
48
53
|
}
|
|
@@ -66,16 +71,10 @@ function registerCustomElement(options) {
|
|
|
66
71
|
await afterDOMLoad();
|
|
67
72
|
await integration.loadAssets(widget.assets, this._shadow);
|
|
68
73
|
this._setDefaultProps();
|
|
69
|
-
await (callbacks === null || callbacks === void 0 || (_callbacks$reconstruc = callbacks.reconstructor) === null || _callbacks$reconstruc === void 0 ? void 0 : _callbacks$reconstruc.call(callbacks, this._widget,
|
|
70
|
-
shadow: this._shadow,
|
|
71
|
-
customElement: this
|
|
72
|
-
}));
|
|
74
|
+
await (callbacks === null || callbacks === void 0 || (_callbacks$reconstruc = callbacks.reconstructor) === null || _callbacks$reconstruc === void 0 ? void 0 : _callbacks$reconstruc.call(callbacks, this._widget, this._getContext()));
|
|
73
75
|
if (typeof (callbacks === null || callbacks === void 0 ? void 0 : callbacks.remount) === 'function') {
|
|
74
76
|
var _callbacks$remount;
|
|
75
|
-
await (callbacks === null || callbacks === void 0 || (_callbacks$remount = callbacks.remount) === null || _callbacks$remount === void 0 ? void 0 : _callbacks$remount.call(callbacks, this._widget,
|
|
76
|
-
shadow: this._shadow,
|
|
77
|
-
customElement: this
|
|
78
|
-
}));
|
|
77
|
+
await (callbacks === null || callbacks === void 0 || (_callbacks$remount = callbacks.remount) === null || _callbacks$remount === void 0 ? void 0 : _callbacks$remount.call(callbacks, this._widget, this._getContext()));
|
|
79
78
|
} else {
|
|
80
79
|
widget.root = this._shadow;
|
|
81
80
|
widget.customElement = this;
|
|
@@ -98,14 +97,8 @@ function registerCustomElement(options) {
|
|
|
98
97
|
this._shadow.appendChild(customWidgetDefinition.container);
|
|
99
98
|
this._widget = await createSPAWidget(customWidgetDefinition, this._shadow);
|
|
100
99
|
this._setDefaultProps();
|
|
101
|
-
await (callbacks === null || callbacks === void 0 || (_callbacks$constructo = callbacks.constructor) === null || _callbacks$constructo === void 0 ? void 0 : _callbacks$constructo.call(callbacks, this._widget,
|
|
102
|
-
|
|
103
|
-
customElement: this
|
|
104
|
-
}));
|
|
105
|
-
(_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, {
|
|
106
|
-
shadow: this._shadow,
|
|
107
|
-
customElement: this
|
|
108
|
-
}))) !== null && _await$callbacks$moun !== void 0 ? _await$callbacks$moun : await this._widget.mount();
|
|
100
|
+
await (callbacks === null || callbacks === void 0 || (_callbacks$constructo = callbacks.constructor) === null || _callbacks$constructo === void 0 ? void 0 : _callbacks$constructo.call(callbacks, this._widget, this._getContext()));
|
|
101
|
+
(_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, this._getContext()))) !== null && _await$callbacks$moun !== void 0 ? _await$callbacks$moun : await this._widget.mount();
|
|
109
102
|
} catch (error) {
|
|
110
103
|
console.error(error);
|
|
111
104
|
}
|
|
@@ -116,56 +109,51 @@ function registerCustomElement(options) {
|
|
|
116
109
|
}
|
|
117
110
|
async connectedCallback() {
|
|
118
111
|
var _this$_widget, _this$_widget$connect, _callbacks$connectedC;
|
|
112
|
+
this._isInitialized = true;
|
|
119
113
|
await this._widgetPromise;
|
|
120
|
-
(_this$_widget = this._widget) === null || _this$_widget === void 0 || (_this$_widget$connect = _this$_widget.connectedCallback) === null || _this$_widget$connect === void 0 || _this$_widget$connect.call(_this$_widget,
|
|
121
|
-
|
|
122
|
-
customElement: this
|
|
123
|
-
});
|
|
124
|
-
callbacks === null || callbacks === void 0 || (_callbacks$connectedC = callbacks.connectedCallback) === null || _callbacks$connectedC === void 0 || _callbacks$connectedC.call(callbacks, this._widget, {
|
|
125
|
-
shadow: this._shadow,
|
|
126
|
-
customElement: this
|
|
127
|
-
});
|
|
114
|
+
(_this$_widget = this._widget) === null || _this$_widget === void 0 || (_this$_widget$connect = _this$_widget.connectedCallback) === null || _this$_widget$connect === void 0 || _this$_widget$connect.call(_this$_widget, this._getContext());
|
|
115
|
+
callbacks === null || callbacks === void 0 || (_callbacks$connectedC = callbacks.connectedCallback) === null || _callbacks$connectedC === void 0 || _callbacks$connectedC.call(callbacks, this._widget, this._getContext());
|
|
128
116
|
}
|
|
129
117
|
async disconnectedCallback() {
|
|
130
118
|
var _this$_widget2, _this$_widget2$discon, _callbacks$disconnect;
|
|
119
|
+
this._isInitialized = false;
|
|
131
120
|
await this._widgetPromise;
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
121
|
+
|
|
122
|
+
// Clear any pending batch updates
|
|
123
|
+
if (this._batchTimeout) {
|
|
124
|
+
clearTimeout(this._batchTimeout);
|
|
125
|
+
this._batchTimeout = null;
|
|
126
|
+
this._pendingProps = {};
|
|
127
|
+
}
|
|
128
|
+
(_this$_widget2 = this._widget) === null || _this$_widget2 === void 0 || (_this$_widget2$discon = _this$_widget2.disconnectedCallback) === null || _this$_widget2$discon === void 0 || _this$_widget2$discon.call(_this$_widget2, this._getContext());
|
|
129
|
+
callbacks === null || callbacks === void 0 || (_callbacks$disconnect = callbacks.disconnectedCallback) === null || _callbacks$disconnect === void 0 || _callbacks$disconnect.call(callbacks, this._widget, this._getContext());
|
|
140
130
|
}
|
|
141
131
|
async adoptedCallback() {
|
|
142
132
|
var _this$_widget3, _this$_widget3$adopte, _callbacks$adoptedCal;
|
|
143
133
|
await this._widgetPromise;
|
|
144
|
-
(_this$_widget3 = this._widget) === null || _this$_widget3 === void 0 || (_this$_widget3$adopte = _this$_widget3.adoptedCallback) === null || _this$_widget3$adopte === void 0 || _this$_widget3$adopte.call(_this$_widget3,
|
|
145
|
-
|
|
146
|
-
customElement: this
|
|
147
|
-
});
|
|
148
|
-
callbacks === null || callbacks === void 0 || (_callbacks$adoptedCal = callbacks.adoptedCallback) === null || _callbacks$adoptedCal === void 0 || _callbacks$adoptedCal.call(callbacks, this._widget, {
|
|
149
|
-
shadow: this._shadow,
|
|
150
|
-
customElement: this
|
|
151
|
-
});
|
|
134
|
+
(_this$_widget3 = this._widget) === null || _this$_widget3 === void 0 || (_this$_widget3$adopte = _this$_widget3.adoptedCallback) === null || _this$_widget3$adopte === void 0 || _this$_widget3$adopte.call(_this$_widget3, this._getContext());
|
|
135
|
+
callbacks === null || callbacks === void 0 || (_callbacks$adoptedCal = callbacks.adoptedCallback) === null || _callbacks$adoptedCal === void 0 || _callbacks$adoptedCal.call(callbacks, this._widget, this._getContext());
|
|
152
136
|
}
|
|
153
137
|
async attributeChangedCallback(name, oldValue, newValue) {
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
[camelCaseKey]
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
138
|
+
if (this._isInitialized) {
|
|
139
|
+
var _attributesParser$nam, _this$_widget5, _this$_widget5$attrib, _callbacks$attributeC;
|
|
140
|
+
await this._widgetPromise;
|
|
141
|
+
const camelCaseKey = name.replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
142
|
+
const parser = (_attributesParser$nam = attributesParser === null || attributesParser === void 0 ? void 0 : attributesParser[name]) !== null && _attributesParser$nam !== void 0 ? _attributesParser$nam : value => value;
|
|
143
|
+
this._pendingProps[camelCaseKey] = parser(newValue);
|
|
144
|
+
if (this._batchTimeout) {
|
|
145
|
+
clearTimeout(this._batchTimeout);
|
|
146
|
+
}
|
|
147
|
+
this._batchTimeout = setTimeout(() => {
|
|
148
|
+
var _this$_widget4, _this$_widget4$setPro;
|
|
149
|
+
const propsToUpdate = this._pendingProps;
|
|
150
|
+
this._pendingProps = {};
|
|
151
|
+
this._batchTimeout = null;
|
|
152
|
+
(_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, propsToUpdate);
|
|
153
|
+
}, 0);
|
|
154
|
+
(_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, this._getContext());
|
|
155
|
+
callbacks === null || callbacks === void 0 || (_callbacks$attributeC = callbacks.attributeChangedCallback) === null || _callbacks$attributeC === void 0 || _callbacks$attributeC.call(callbacks, this._widget, name, oldValue, newValue, this._getContext());
|
|
156
|
+
}
|
|
169
157
|
}
|
|
170
158
|
_setDefaultProps() {
|
|
171
159
|
const attributes = this.constructor.observedAttributes;
|
|
@@ -183,6 +171,12 @@ function registerCustomElement(options) {
|
|
|
183
171
|
});
|
|
184
172
|
}
|
|
185
173
|
}
|
|
174
|
+
_getContext() {
|
|
175
|
+
return {
|
|
176
|
+
shadow: this._shadow,
|
|
177
|
+
customElement: this
|
|
178
|
+
};
|
|
179
|
+
}
|
|
186
180
|
}
|
|
187
181
|
if (customElements.get(widgetDefinition.name) === undefined) {
|
|
188
182
|
customElements.define(widgetDefinition.name, WidgetElement);
|
package/lib/index.es9.mjs
CHANGED
|
@@ -21,6 +21,8 @@ function afterDOMLoad() {
|
|
|
21
21
|
} else {
|
|
22
22
|
window.addEventListener('DOMContentLoaded', () => {
|
|
23
23
|
resolve();
|
|
24
|
+
}, {
|
|
25
|
+
once: true
|
|
24
26
|
});
|
|
25
27
|
}
|
|
26
28
|
} else {
|
|
@@ -41,6 +43,9 @@ function registerCustomElement(options) {
|
|
|
41
43
|
}
|
|
42
44
|
constructor(...$) {
|
|
43
45
|
const _ = super(...$);
|
|
46
|
+
this._pendingProps = {};
|
|
47
|
+
this._batchTimeout = null;
|
|
48
|
+
this._isInitialized = false;
|
|
44
49
|
_._init();
|
|
45
50
|
return _;
|
|
46
51
|
}
|
|
@@ -64,16 +69,10 @@ function registerCustomElement(options) {
|
|
|
64
69
|
await afterDOMLoad();
|
|
65
70
|
await loadAssets(widget.assets, this._shadow);
|
|
66
71
|
this._setDefaultProps();
|
|
67
|
-
await (callbacks === null || callbacks === void 0 || (_callbacks$reconstruc = callbacks.reconstructor) === null || _callbacks$reconstruc === void 0 ? void 0 : _callbacks$reconstruc.call(callbacks, this._widget,
|
|
68
|
-
shadow: this._shadow,
|
|
69
|
-
customElement: this
|
|
70
|
-
}));
|
|
72
|
+
await (callbacks === null || callbacks === void 0 || (_callbacks$reconstruc = callbacks.reconstructor) === null || _callbacks$reconstruc === void 0 ? void 0 : _callbacks$reconstruc.call(callbacks, this._widget, this._getContext()));
|
|
71
73
|
if (typeof (callbacks === null || callbacks === void 0 ? void 0 : callbacks.remount) === 'function') {
|
|
72
74
|
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
|
-
}));
|
|
75
|
+
await (callbacks === null || callbacks === void 0 || (_callbacks$remount = callbacks.remount) === null || _callbacks$remount === void 0 ? void 0 : _callbacks$remount.call(callbacks, this._widget, this._getContext()));
|
|
77
76
|
} else {
|
|
78
77
|
widget.root = this._shadow;
|
|
79
78
|
widget.customElement = this;
|
|
@@ -96,14 +95,8 @@ function registerCustomElement(options) {
|
|
|
96
95
|
this._shadow.appendChild(customWidgetDefinition.container);
|
|
97
96
|
this._widget = await createSPAWidget(customWidgetDefinition, this._shadow);
|
|
98
97
|
this._setDefaultProps();
|
|
99
|
-
await (callbacks === null || callbacks === void 0 || (_callbacks$constructo = callbacks.constructor) === null || _callbacks$constructo === void 0 ? void 0 : _callbacks$constructo.call(callbacks, this._widget,
|
|
100
|
-
|
|
101
|
-
customElement: this
|
|
102
|
-
}));
|
|
103
|
-
(_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, {
|
|
104
|
-
shadow: this._shadow,
|
|
105
|
-
customElement: this
|
|
106
|
-
}))) !== null && _await$callbacks$moun !== void 0 ? _await$callbacks$moun : await this._widget.mount();
|
|
98
|
+
await (callbacks === null || callbacks === void 0 || (_callbacks$constructo = callbacks.constructor) === null || _callbacks$constructo === void 0 ? void 0 : _callbacks$constructo.call(callbacks, this._widget, this._getContext()));
|
|
99
|
+
(_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, this._getContext()))) !== null && _await$callbacks$moun !== void 0 ? _await$callbacks$moun : await this._widget.mount();
|
|
107
100
|
} catch (error) {
|
|
108
101
|
console.error(error);
|
|
109
102
|
}
|
|
@@ -114,56 +107,51 @@ function registerCustomElement(options) {
|
|
|
114
107
|
}
|
|
115
108
|
async connectedCallback() {
|
|
116
109
|
var _this$_widget, _this$_widget$connect, _callbacks$connectedC;
|
|
110
|
+
this._isInitialized = true;
|
|
117
111
|
await this._widgetPromise;
|
|
118
|
-
(_this$_widget = this._widget) === null || _this$_widget === void 0 || (_this$_widget$connect = _this$_widget.connectedCallback) === null || _this$_widget$connect === void 0 || _this$_widget$connect.call(_this$_widget,
|
|
119
|
-
|
|
120
|
-
customElement: this
|
|
121
|
-
});
|
|
122
|
-
callbacks === null || callbacks === void 0 || (_callbacks$connectedC = callbacks.connectedCallback) === null || _callbacks$connectedC === void 0 || _callbacks$connectedC.call(callbacks, this._widget, {
|
|
123
|
-
shadow: this._shadow,
|
|
124
|
-
customElement: this
|
|
125
|
-
});
|
|
112
|
+
(_this$_widget = this._widget) === null || _this$_widget === void 0 || (_this$_widget$connect = _this$_widget.connectedCallback) === null || _this$_widget$connect === void 0 || _this$_widget$connect.call(_this$_widget, this._getContext());
|
|
113
|
+
callbacks === null || callbacks === void 0 || (_callbacks$connectedC = callbacks.connectedCallback) === null || _callbacks$connectedC === void 0 || _callbacks$connectedC.call(callbacks, this._widget, this._getContext());
|
|
126
114
|
}
|
|
127
115
|
async disconnectedCallback() {
|
|
128
116
|
var _this$_widget2, _this$_widget2$discon, _callbacks$disconnect;
|
|
117
|
+
this._isInitialized = false;
|
|
129
118
|
await this._widgetPromise;
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
119
|
+
|
|
120
|
+
// Clear any pending batch updates
|
|
121
|
+
if (this._batchTimeout) {
|
|
122
|
+
clearTimeout(this._batchTimeout);
|
|
123
|
+
this._batchTimeout = null;
|
|
124
|
+
this._pendingProps = {};
|
|
125
|
+
}
|
|
126
|
+
(_this$_widget2 = this._widget) === null || _this$_widget2 === void 0 || (_this$_widget2$discon = _this$_widget2.disconnectedCallback) === null || _this$_widget2$discon === void 0 || _this$_widget2$discon.call(_this$_widget2, this._getContext());
|
|
127
|
+
callbacks === null || callbacks === void 0 || (_callbacks$disconnect = callbacks.disconnectedCallback) === null || _callbacks$disconnect === void 0 || _callbacks$disconnect.call(callbacks, this._widget, this._getContext());
|
|
138
128
|
}
|
|
139
129
|
async adoptedCallback() {
|
|
140
130
|
var _this$_widget3, _this$_widget3$adopte, _callbacks$adoptedCal;
|
|
141
131
|
await this._widgetPromise;
|
|
142
|
-
(_this$_widget3 = this._widget) === null || _this$_widget3 === void 0 || (_this$_widget3$adopte = _this$_widget3.adoptedCallback) === null || _this$_widget3$adopte === void 0 || _this$_widget3$adopte.call(_this$_widget3,
|
|
143
|
-
|
|
144
|
-
customElement: this
|
|
145
|
-
});
|
|
146
|
-
callbacks === null || callbacks === void 0 || (_callbacks$adoptedCal = callbacks.adoptedCallback) === null || _callbacks$adoptedCal === void 0 || _callbacks$adoptedCal.call(callbacks, this._widget, {
|
|
147
|
-
shadow: this._shadow,
|
|
148
|
-
customElement: this
|
|
149
|
-
});
|
|
132
|
+
(_this$_widget3 = this._widget) === null || _this$_widget3 === void 0 || (_this$_widget3$adopte = _this$_widget3.adoptedCallback) === null || _this$_widget3$adopte === void 0 || _this$_widget3$adopte.call(_this$_widget3, this._getContext());
|
|
133
|
+
callbacks === null || callbacks === void 0 || (_callbacks$adoptedCal = callbacks.adoptedCallback) === null || _callbacks$adoptedCal === void 0 || _callbacks$adoptedCal.call(callbacks, this._widget, this._getContext());
|
|
150
134
|
}
|
|
151
135
|
async attributeChangedCallback(name, oldValue, newValue) {
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
[camelCaseKey]
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
136
|
+
if (this._isInitialized) {
|
|
137
|
+
var _attributesParser$nam, _this$_widget5, _this$_widget5$attrib, _callbacks$attributeC;
|
|
138
|
+
await this._widgetPromise;
|
|
139
|
+
const camelCaseKey = name.replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
140
|
+
const parser = (_attributesParser$nam = attributesParser === null || attributesParser === void 0 ? void 0 : attributesParser[name]) !== null && _attributesParser$nam !== void 0 ? _attributesParser$nam : value => value;
|
|
141
|
+
this._pendingProps[camelCaseKey] = parser(newValue);
|
|
142
|
+
if (this._batchTimeout) {
|
|
143
|
+
clearTimeout(this._batchTimeout);
|
|
144
|
+
}
|
|
145
|
+
this._batchTimeout = setTimeout(() => {
|
|
146
|
+
var _this$_widget4, _this$_widget4$setPro;
|
|
147
|
+
const propsToUpdate = this._pendingProps;
|
|
148
|
+
this._pendingProps = {};
|
|
149
|
+
this._batchTimeout = null;
|
|
150
|
+
(_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, propsToUpdate);
|
|
151
|
+
}, 0);
|
|
152
|
+
(_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, this._getContext());
|
|
153
|
+
callbacks === null || callbacks === void 0 || (_callbacks$attributeC = callbacks.attributeChangedCallback) === null || _callbacks$attributeC === void 0 || _callbacks$attributeC.call(callbacks, this._widget, name, oldValue, newValue, this._getContext());
|
|
154
|
+
}
|
|
167
155
|
}
|
|
168
156
|
_setDefaultProps() {
|
|
169
157
|
const attributes = this.constructor.observedAttributes;
|
|
@@ -181,6 +169,12 @@ function registerCustomElement(options) {
|
|
|
181
169
|
});
|
|
182
170
|
}
|
|
183
171
|
}
|
|
172
|
+
_getContext() {
|
|
173
|
+
return {
|
|
174
|
+
shadow: this._shadow,
|
|
175
|
+
customElement: this
|
|
176
|
+
};
|
|
177
|
+
}
|
|
184
178
|
}
|
|
185
179
|
if (customElements.get(widgetDefinition.name) === undefined) {
|
|
186
180
|
customElements.define(widgetDefinition.name, WidgetElement);
|
package/lib/index.js
CHANGED
|
@@ -24,6 +24,8 @@ function afterDOMLoad() {
|
|
|
24
24
|
} else {
|
|
25
25
|
window.addEventListener('DOMContentLoaded', () => {
|
|
26
26
|
resolve();
|
|
27
|
+
}, {
|
|
28
|
+
once: true
|
|
27
29
|
});
|
|
28
30
|
}
|
|
29
31
|
} else {
|
|
@@ -44,6 +46,9 @@ function registerCustomElement(options) {
|
|
|
44
46
|
}
|
|
45
47
|
constructor(...$) {
|
|
46
48
|
const _ = super(...$);
|
|
49
|
+
this._pendingProps = {};
|
|
50
|
+
this._batchTimeout = null;
|
|
51
|
+
this._isInitialized = false;
|
|
47
52
|
_._init();
|
|
48
53
|
return _;
|
|
49
54
|
}
|
|
@@ -65,15 +70,9 @@ function registerCustomElement(options) {
|
|
|
65
70
|
await afterDOMLoad();
|
|
66
71
|
await integration.loadAssets(widget.assets, this._shadow);
|
|
67
72
|
this._setDefaultProps();
|
|
68
|
-
await callbacks?.reconstructor?.(this._widget,
|
|
69
|
-
shadow: this._shadow,
|
|
70
|
-
customElement: this
|
|
71
|
-
});
|
|
73
|
+
await callbacks?.reconstructor?.(this._widget, this._getContext());
|
|
72
74
|
if (typeof callbacks?.remount === 'function') {
|
|
73
|
-
await callbacks?.remount?.(this._widget,
|
|
74
|
-
shadow: this._shadow,
|
|
75
|
-
customElement: this
|
|
76
|
-
});
|
|
75
|
+
await callbacks?.remount?.(this._widget, this._getContext());
|
|
77
76
|
} else {
|
|
78
77
|
widget.root = this._shadow;
|
|
79
78
|
widget.customElement = this;
|
|
@@ -95,14 +94,8 @@ function registerCustomElement(options) {
|
|
|
95
94
|
this._shadow.appendChild(customWidgetDefinition.container);
|
|
96
95
|
this._widget = await createSPAWidget(customWidgetDefinition, this._shadow);
|
|
97
96
|
this._setDefaultProps();
|
|
98
|
-
await callbacks?.constructor?.(this._widget,
|
|
99
|
-
|
|
100
|
-
customElement: this
|
|
101
|
-
});
|
|
102
|
-
(await callbacks?.mount?.(this._widget, {
|
|
103
|
-
shadow: this._shadow,
|
|
104
|
-
customElement: this
|
|
105
|
-
})) ?? (await this._widget.mount());
|
|
97
|
+
await callbacks?.constructor?.(this._widget, this._getContext());
|
|
98
|
+
(await callbacks?.mount?.(this._widget, this._getContext())) ?? (await this._widget.mount());
|
|
106
99
|
} catch (error) {
|
|
107
100
|
console.error(error);
|
|
108
101
|
}
|
|
@@ -112,53 +105,47 @@ function registerCustomElement(options) {
|
|
|
112
105
|
}
|
|
113
106
|
}
|
|
114
107
|
async connectedCallback() {
|
|
108
|
+
this._isInitialized = true;
|
|
115
109
|
await this._widgetPromise;
|
|
116
|
-
this._widget?.connectedCallback?.(
|
|
117
|
-
|
|
118
|
-
customElement: this
|
|
119
|
-
});
|
|
120
|
-
callbacks?.connectedCallback?.(this._widget, {
|
|
121
|
-
shadow: this._shadow,
|
|
122
|
-
customElement: this
|
|
123
|
-
});
|
|
110
|
+
this._widget?.connectedCallback?.(this._getContext());
|
|
111
|
+
callbacks?.connectedCallback?.(this._widget, this._getContext());
|
|
124
112
|
}
|
|
125
113
|
async disconnectedCallback() {
|
|
114
|
+
this._isInitialized = false;
|
|
126
115
|
await this._widgetPromise;
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
116
|
+
|
|
117
|
+
// Clear any pending batch updates
|
|
118
|
+
if (this._batchTimeout) {
|
|
119
|
+
clearTimeout(this._batchTimeout);
|
|
120
|
+
this._batchTimeout = null;
|
|
121
|
+
this._pendingProps = {};
|
|
122
|
+
}
|
|
123
|
+
this._widget?.disconnectedCallback?.(this._getContext());
|
|
124
|
+
callbacks?.disconnectedCallback?.(this._widget, this._getContext());
|
|
135
125
|
}
|
|
136
126
|
async adoptedCallback() {
|
|
137
127
|
await this._widgetPromise;
|
|
138
|
-
this._widget?.adoptedCallback?.(
|
|
139
|
-
|
|
140
|
-
customElement: this
|
|
141
|
-
});
|
|
142
|
-
callbacks?.adoptedCallback?.(this._widget, {
|
|
143
|
-
shadow: this._shadow,
|
|
144
|
-
customElement: this
|
|
145
|
-
});
|
|
128
|
+
this._widget?.adoptedCallback?.(this._getContext());
|
|
129
|
+
callbacks?.adoptedCallback?.(this._widget, this._getContext());
|
|
146
130
|
}
|
|
147
131
|
async attributeChangedCallback(name, oldValue, newValue) {
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
[camelCaseKey]
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
132
|
+
if (this._isInitialized) {
|
|
133
|
+
await this._widgetPromise;
|
|
134
|
+
const camelCaseKey = name.replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
135
|
+
const parser = attributesParser?.[name] ?? (value => value);
|
|
136
|
+
this._pendingProps[camelCaseKey] = parser(newValue);
|
|
137
|
+
if (this._batchTimeout) {
|
|
138
|
+
clearTimeout(this._batchTimeout);
|
|
139
|
+
}
|
|
140
|
+
this._batchTimeout = setTimeout(() => {
|
|
141
|
+
const propsToUpdate = this._pendingProps;
|
|
142
|
+
this._pendingProps = {};
|
|
143
|
+
this._batchTimeout = null;
|
|
144
|
+
this._widget?.setProps?.(propsToUpdate);
|
|
145
|
+
}, 0);
|
|
146
|
+
this._widget?.attributeChangedCallback?.(this._widget, name, oldValue, newValue, this._getContext());
|
|
147
|
+
callbacks?.attributeChangedCallback?.(this._widget, name, oldValue, newValue, this._getContext());
|
|
148
|
+
}
|
|
162
149
|
}
|
|
163
150
|
_setDefaultProps() {
|
|
164
151
|
const attributes = this.constructor.observedAttributes;
|
|
@@ -175,6 +162,12 @@ function registerCustomElement(options) {
|
|
|
175
162
|
});
|
|
176
163
|
}
|
|
177
164
|
}
|
|
165
|
+
_getContext() {
|
|
166
|
+
return {
|
|
167
|
+
shadow: this._shadow,
|
|
168
|
+
customElement: this
|
|
169
|
+
};
|
|
170
|
+
}
|
|
178
171
|
}
|
|
179
172
|
if (customElements.get(widgetDefinition.name) === undefined) {
|
|
180
173
|
customElements.define(widgetDefinition.name, WidgetElement);
|
package/lib/index.mjs
CHANGED
|
@@ -22,6 +22,8 @@ function afterDOMLoad() {
|
|
|
22
22
|
} else {
|
|
23
23
|
window.addEventListener('DOMContentLoaded', () => {
|
|
24
24
|
resolve();
|
|
25
|
+
}, {
|
|
26
|
+
once: true
|
|
25
27
|
});
|
|
26
28
|
}
|
|
27
29
|
} else {
|
|
@@ -42,6 +44,9 @@ function registerCustomElement(options) {
|
|
|
42
44
|
}
|
|
43
45
|
constructor(...$) {
|
|
44
46
|
const _ = super(...$);
|
|
47
|
+
this._pendingProps = {};
|
|
48
|
+
this._batchTimeout = null;
|
|
49
|
+
this._isInitialized = false;
|
|
45
50
|
_._init();
|
|
46
51
|
return _;
|
|
47
52
|
}
|
|
@@ -63,15 +68,9 @@ function registerCustomElement(options) {
|
|
|
63
68
|
await afterDOMLoad();
|
|
64
69
|
await loadAssets(widget.assets, this._shadow);
|
|
65
70
|
this._setDefaultProps();
|
|
66
|
-
await callbacks?.reconstructor?.(this._widget,
|
|
67
|
-
shadow: this._shadow,
|
|
68
|
-
customElement: this
|
|
69
|
-
});
|
|
71
|
+
await callbacks?.reconstructor?.(this._widget, this._getContext());
|
|
70
72
|
if (typeof callbacks?.remount === 'function') {
|
|
71
|
-
await callbacks?.remount?.(this._widget,
|
|
72
|
-
shadow: this._shadow,
|
|
73
|
-
customElement: this
|
|
74
|
-
});
|
|
73
|
+
await callbacks?.remount?.(this._widget, this._getContext());
|
|
75
74
|
} else {
|
|
76
75
|
widget.root = this._shadow;
|
|
77
76
|
widget.customElement = this;
|
|
@@ -93,14 +92,8 @@ function registerCustomElement(options) {
|
|
|
93
92
|
this._shadow.appendChild(customWidgetDefinition.container);
|
|
94
93
|
this._widget = await createSPAWidget(customWidgetDefinition, this._shadow);
|
|
95
94
|
this._setDefaultProps();
|
|
96
|
-
await callbacks?.constructor?.(this._widget,
|
|
97
|
-
|
|
98
|
-
customElement: this
|
|
99
|
-
});
|
|
100
|
-
(await callbacks?.mount?.(this._widget, {
|
|
101
|
-
shadow: this._shadow,
|
|
102
|
-
customElement: this
|
|
103
|
-
})) ?? (await this._widget.mount());
|
|
95
|
+
await callbacks?.constructor?.(this._widget, this._getContext());
|
|
96
|
+
(await callbacks?.mount?.(this._widget, this._getContext())) ?? (await this._widget.mount());
|
|
104
97
|
} catch (error) {
|
|
105
98
|
console.error(error);
|
|
106
99
|
}
|
|
@@ -110,53 +103,47 @@ function registerCustomElement(options) {
|
|
|
110
103
|
}
|
|
111
104
|
}
|
|
112
105
|
async connectedCallback() {
|
|
106
|
+
this._isInitialized = true;
|
|
113
107
|
await this._widgetPromise;
|
|
114
|
-
this._widget?.connectedCallback?.(
|
|
115
|
-
|
|
116
|
-
customElement: this
|
|
117
|
-
});
|
|
118
|
-
callbacks?.connectedCallback?.(this._widget, {
|
|
119
|
-
shadow: this._shadow,
|
|
120
|
-
customElement: this
|
|
121
|
-
});
|
|
108
|
+
this._widget?.connectedCallback?.(this._getContext());
|
|
109
|
+
callbacks?.connectedCallback?.(this._widget, this._getContext());
|
|
122
110
|
}
|
|
123
111
|
async disconnectedCallback() {
|
|
112
|
+
this._isInitialized = false;
|
|
124
113
|
await this._widgetPromise;
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
114
|
+
|
|
115
|
+
// Clear any pending batch updates
|
|
116
|
+
if (this._batchTimeout) {
|
|
117
|
+
clearTimeout(this._batchTimeout);
|
|
118
|
+
this._batchTimeout = null;
|
|
119
|
+
this._pendingProps = {};
|
|
120
|
+
}
|
|
121
|
+
this._widget?.disconnectedCallback?.(this._getContext());
|
|
122
|
+
callbacks?.disconnectedCallback?.(this._widget, this._getContext());
|
|
133
123
|
}
|
|
134
124
|
async adoptedCallback() {
|
|
135
125
|
await this._widgetPromise;
|
|
136
|
-
this._widget?.adoptedCallback?.(
|
|
137
|
-
|
|
138
|
-
customElement: this
|
|
139
|
-
});
|
|
140
|
-
callbacks?.adoptedCallback?.(this._widget, {
|
|
141
|
-
shadow: this._shadow,
|
|
142
|
-
customElement: this
|
|
143
|
-
});
|
|
126
|
+
this._widget?.adoptedCallback?.(this._getContext());
|
|
127
|
+
callbacks?.adoptedCallback?.(this._widget, this._getContext());
|
|
144
128
|
}
|
|
145
129
|
async attributeChangedCallback(name, oldValue, newValue) {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
[camelCaseKey]
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
130
|
+
if (this._isInitialized) {
|
|
131
|
+
await this._widgetPromise;
|
|
132
|
+
const camelCaseKey = name.replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
133
|
+
const parser = attributesParser?.[name] ?? (value => value);
|
|
134
|
+
this._pendingProps[camelCaseKey] = parser(newValue);
|
|
135
|
+
if (this._batchTimeout) {
|
|
136
|
+
clearTimeout(this._batchTimeout);
|
|
137
|
+
}
|
|
138
|
+
this._batchTimeout = setTimeout(() => {
|
|
139
|
+
const propsToUpdate = this._pendingProps;
|
|
140
|
+
this._pendingProps = {};
|
|
141
|
+
this._batchTimeout = null;
|
|
142
|
+
this._widget?.setProps?.(propsToUpdate);
|
|
143
|
+
}, 0);
|
|
144
|
+
this._widget?.attributeChangedCallback?.(this._widget, name, oldValue, newValue, this._getContext());
|
|
145
|
+
callbacks?.attributeChangedCallback?.(this._widget, name, oldValue, newValue, this._getContext());
|
|
146
|
+
}
|
|
160
147
|
}
|
|
161
148
|
_setDefaultProps() {
|
|
162
149
|
const attributes = this.constructor.observedAttributes;
|
|
@@ -173,6 +160,12 @@ function registerCustomElement(options) {
|
|
|
173
160
|
});
|
|
174
161
|
}
|
|
175
162
|
}
|
|
163
|
+
_getContext() {
|
|
164
|
+
return {
|
|
165
|
+
shadow: this._shadow,
|
|
166
|
+
customElement: this
|
|
167
|
+
};
|
|
168
|
+
}
|
|
176
169
|
}
|
|
177
170
|
if (customElements.get(widgetDefinition.name) === undefined) {
|
|
178
171
|
customElements.define(widgetDefinition.name, WidgetElement);
|
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,
|
|
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=g(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=g(e),p(t,v()?Reflect.construct(e,n||[],g(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 y(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 h(t){var e="function"==typeof Map?new Map:void 0;return h=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,g(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),b(n,t)},h(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 g(t){return g=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},g(t)}function _(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 m(t){return function(){var e=this,n=arguments;return new Promise(function(r,o){var i=t.apply(e,n);function u(t){_(i,r,o,u,l,"next",t)}function l(t){_(i,r,o,u,l,"throw",t)}u(void 0)})}}function w(){return(w=m(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()},{once:!0}):t()})}Object.defineProperty(e,"__esModule",{value:!0}),e.deepMerge=k,e.registerCustomElement=function(t){var e=k({},t),n=e.widgetDefinition,o=e.callbacks,u=e.observedAttributes,a=e.attributesParser,d=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 t._pendingProps={},t._batchTimeout=null,t._isInitialized=!1,i._init(),p(t,i)}return y(e,t),s(e,[{key:"_init",value:function(){}}],[{key:"observedAttributes",get:function(){return null!=u?u:[]}}])}(h(HTMLElement)),v=function(t){function e(){return c(this,e),f(this,e,arguments)}return y(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(g(1&(c=3)?t.prototype:t),i,u),2&c&&"function"==typeof a?function(t){return a.apply(u,t)}:a)([]);var d=k({},n);this._widgetPromise=m(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,s._getContext()),"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,s._getContext());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 w.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,s._getContext()),null!==(l=yield null==o||null===(c=o.mount)||void 0===c?void 0:c.call(o,s._widget,s._getContext()))&&void 0!==l||(yield s._widget.mount())}catch(t){console.error(t)}})()}catch(t){console.error(t)}}},{key:"connectedCallback",value:(h=m(function*(){var t,e,n;this._isInitialized=!0,yield this._widgetPromise,null===(t=this._widget)||void 0===t||null===(e=t.connectedCallback)||void 0===e||e.call(t,this._getContext()),null==o||null===(n=o.connectedCallback)||void 0===n||n.call(o,this._widget,this._getContext())}),function(){return h.apply(this,arguments)})},{key:"disconnectedCallback",value:(p=m(function*(){var t,e,n;this._isInitialized=!1,yield this._widgetPromise,this._batchTimeout&&(clearTimeout(this._batchTimeout),this._batchTimeout=null,this._pendingProps={}),null===(t=this._widget)||void 0===t||null===(e=t.disconnectedCallback)||void 0===e||e.call(t,this._getContext()),null==o||null===(n=o.disconnectedCallback)||void 0===n||n.call(o,this._widget,this._getContext())}),function(){return p.apply(this,arguments)})},{key:"adoptedCallback",value:(d=m(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,this._getContext()),null==o||null===(n=o.adoptedCallback)||void 0===n||n.call(o,this._widget,this._getContext())}),function(){return d.apply(this,arguments)})},{key:"attributeChangedCallback",value:(u=m(function*(t,e,n){var r=this;if(this._isInitialized){var i,u,l,c;yield this._widgetPromise;var s=t.replace(/-([a-z])/g,function(t){return t[1].toUpperCase()}),d=null!==(i=null==a?void 0:a[t])&&void 0!==i?i:function(t){return t};this._pendingProps[s]=d(n),this._batchTimeout&&clearTimeout(this._batchTimeout),this._batchTimeout=setTimeout(function(){var t,e,n=r._pendingProps;r._pendingProps={},r._batchTimeout=null,null===(t=r._widget)||void 0===t||null===(e=t.setProps)||void 0===e||e.call(t,n)},0),null===(u=this._widget)||void 0===u||null===(l=u.attributeChangedCallback)||void 0===l||l.call(u,this._widget,t,e,n,this._getContext()),null==o||null===(c=o.attributeChangedCallback)||void 0===c||c.call(o,this._widget,t,e,n,this._getContext())}}),function(t,e,n){return u.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==a?void 0:a[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])}}))}},{key:"_getContext",value:function(){return{shadow:this._shadow,customElement:this}}}]);var u,d,p,h}(d);void 0===customElements.get(n.name)&&customElements.define(n.name,v);return v};var P=["__proto__","prototype","constructor"];function k(t,e){var n=function(t){return!!t&&t.constructor===Object};return n(t)&&n(e)?(Object.keys(e).forEach(function(r){if(!P.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]=k(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": "1.0.3",
|
|
4
4
|
"description": "Merkur module for easy integration with other apps with custom element.",
|
|
5
5
|
"main": "lib/index",
|
|
6
6
|
"module": "lib/index",
|
|
@@ -25,11 +25,9 @@
|
|
|
25
25
|
"./lib/index.es9.mjs": "./lib/index.es9.mjs"
|
|
26
26
|
},
|
|
27
27
|
"scripts": {
|
|
28
|
-
"preversion": "npm test",
|
|
29
28
|
"test": "jest --no-watchman -c ./jest.config.js",
|
|
30
29
|
"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",
|
|
31
|
-
"build": "rollup -c rollup.config.mjs"
|
|
32
|
-
"postpublish": "node ../../utils/restoreLatestTag.mjs"
|
|
30
|
+
"build": "rollup -c rollup.config.mjs"
|
|
33
31
|
},
|
|
34
32
|
"repository": {
|
|
35
33
|
"type": "git",
|
|
@@ -50,12 +48,11 @@
|
|
|
50
48
|
},
|
|
51
49
|
"homepage": "https://merkur.js.org/",
|
|
52
50
|
"devDependencies": {
|
|
53
|
-
"@merkur/core": "^0.
|
|
54
|
-
"@merkur/integration": "^0.
|
|
51
|
+
"@merkur/core": "^1.0.0",
|
|
52
|
+
"@merkur/integration": "^1.0.0"
|
|
55
53
|
},
|
|
56
54
|
"peerDependencies": {
|
|
57
55
|
"@merkur/core": "*",
|
|
58
56
|
"@merkur/integration": "*"
|
|
59
|
-
}
|
|
60
|
-
"gitHead": "87b662ef7cd7a84fc1724023607ef2cbbae2c811"
|
|
57
|
+
}
|
|
61
58
|
}
|