ux4g-components-web 1.2.1 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/runtime/bootstrap.cjs +46 -0
- package/dist/runtime/bootstrap.mjs +46 -0
- package/package.json +1 -1
|
@@ -50,5 +50,51 @@ function initRuntime() {
|
|
|
50
50
|
* Safe to import multiple times — initRuntime() uses a singleton guard
|
|
51
51
|
* (window.__UX4G_RUNTIME_INITIALIZED__) to ensure initialization happens
|
|
52
52
|
* exactly once.
|
|
53
|
+
*
|
|
54
|
+
* Also sets up a MutationObserver that automatically re-runs ux4g.init()
|
|
55
|
+
* when new elements are added to the DOM. This handles frameworks like
|
|
56
|
+
* React and Angular that render components AFTER DOMContentLoaded.
|
|
53
57
|
*/
|
|
54
58
|
initRuntime();
|
|
59
|
+
// Auto-reinit: watch for new DOM elements and re-run ux4g.init()
|
|
60
|
+
// This fixes the timing issue where Angular/React render after DOMContentLoaded
|
|
61
|
+
if (typeof window !== 'undefined' && typeof MutationObserver !== 'undefined') {
|
|
62
|
+
let reinitTimer = null;
|
|
63
|
+
const observer = new MutationObserver((mutations) => {
|
|
64
|
+
// Check if any added nodes contain UX4G-relevant elements
|
|
65
|
+
let hasNewElements = false;
|
|
66
|
+
for (const mutation of mutations) {
|
|
67
|
+
if (mutation.addedNodes.length > 0) {
|
|
68
|
+
hasNewElements = true;
|
|
69
|
+
break;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
if (!hasNewElements)
|
|
73
|
+
return;
|
|
74
|
+
// Debounce: wait 50ms after the last mutation before re-initializing
|
|
75
|
+
// This batches rapid DOM changes (e.g., Angular rendering a full template)
|
|
76
|
+
if (reinitTimer)
|
|
77
|
+
clearTimeout(reinitTimer);
|
|
78
|
+
reinitTimer = setTimeout(() => {
|
|
79
|
+
if (window.ux4g?.init) {
|
|
80
|
+
window.ux4g.init(document);
|
|
81
|
+
}
|
|
82
|
+
}, 50);
|
|
83
|
+
});
|
|
84
|
+
// Start observing once the body is available
|
|
85
|
+
const startObserving = () => {
|
|
86
|
+
if (document.body) {
|
|
87
|
+
observer.observe(document.body, { childList: true, subtree: true });
|
|
88
|
+
}
|
|
89
|
+
else {
|
|
90
|
+
// Body not ready yet — wait for it
|
|
91
|
+
setTimeout(startObserving, 10);
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
if (document.readyState === 'loading') {
|
|
95
|
+
document.addEventListener('DOMContentLoaded', startObserving);
|
|
96
|
+
}
|
|
97
|
+
else {
|
|
98
|
+
startObserving();
|
|
99
|
+
}
|
|
100
|
+
}
|
|
@@ -48,5 +48,51 @@ function initRuntime() {
|
|
|
48
48
|
* Safe to import multiple times — initRuntime() uses a singleton guard
|
|
49
49
|
* (window.__UX4G_RUNTIME_INITIALIZED__) to ensure initialization happens
|
|
50
50
|
* exactly once.
|
|
51
|
+
*
|
|
52
|
+
* Also sets up a MutationObserver that automatically re-runs ux4g.init()
|
|
53
|
+
* when new elements are added to the DOM. This handles frameworks like
|
|
54
|
+
* React and Angular that render components AFTER DOMContentLoaded.
|
|
51
55
|
*/
|
|
52
56
|
initRuntime();
|
|
57
|
+
// Auto-reinit: watch for new DOM elements and re-run ux4g.init()
|
|
58
|
+
// This fixes the timing issue where Angular/React render after DOMContentLoaded
|
|
59
|
+
if (typeof window !== 'undefined' && typeof MutationObserver !== 'undefined') {
|
|
60
|
+
let reinitTimer = null;
|
|
61
|
+
const observer = new MutationObserver((mutations) => {
|
|
62
|
+
// Check if any added nodes contain UX4G-relevant elements
|
|
63
|
+
let hasNewElements = false;
|
|
64
|
+
for (const mutation of mutations) {
|
|
65
|
+
if (mutation.addedNodes.length > 0) {
|
|
66
|
+
hasNewElements = true;
|
|
67
|
+
break;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
if (!hasNewElements)
|
|
71
|
+
return;
|
|
72
|
+
// Debounce: wait 50ms after the last mutation before re-initializing
|
|
73
|
+
// This batches rapid DOM changes (e.g., Angular rendering a full template)
|
|
74
|
+
if (reinitTimer)
|
|
75
|
+
clearTimeout(reinitTimer);
|
|
76
|
+
reinitTimer = setTimeout(() => {
|
|
77
|
+
if (window.ux4g?.init) {
|
|
78
|
+
window.ux4g.init(document);
|
|
79
|
+
}
|
|
80
|
+
}, 50);
|
|
81
|
+
});
|
|
82
|
+
// Start observing once the body is available
|
|
83
|
+
const startObserving = () => {
|
|
84
|
+
if (document.body) {
|
|
85
|
+
observer.observe(document.body, { childList: true, subtree: true });
|
|
86
|
+
}
|
|
87
|
+
else {
|
|
88
|
+
// Body not ready yet — wait for it
|
|
89
|
+
setTimeout(startObserving, 10);
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
if (document.readyState === 'loading') {
|
|
93
|
+
document.addEventListener('DOMContentLoaded', startObserving);
|
|
94
|
+
}
|
|
95
|
+
else {
|
|
96
|
+
startObserving();
|
|
97
|
+
}
|
|
98
|
+
}
|