@stencil/core 5.0.0-alpha.9 → 5.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +94 -0
- package/dist/app-data/index.d.ts +1 -1
- package/dist/app-data/index.js +4 -1
- package/dist/client-BRu0GtRn.mjs +2368 -0
- package/dist/compiler/index.d.mts +167 -3
- package/dist/compiler/index.mjs +3 -3
- package/dist/compiler/utils/index.d.mts +272 -2
- package/dist/compiler/utils/index.mjs +4 -3
- package/dist/{compiler-C0qmPoKu.mjs → compiler-NrvbUOX1.mjs} +2754 -1259
- package/dist/declarations/stencil-ext-modules.d.ts +5 -5
- package/dist/declarations/stencil-public-compiler.d.ts +208 -66
- package/dist/declarations/stencil-public-docs.d.ts +9 -0
- package/dist/declarations/stencil-public-runtime.d.ts +91 -6
- package/dist/fragment-Di1hWOC8.mjs +4 -0
- package/dist/{regular-expression-CFVJOTUh.mjs → helpers-Cpp3qc3u.mjs} +31 -15
- package/dist/index-BOrz3rbJ.d.mts +100 -0
- package/dist/{index-xAkMgLX_.d.ts → index-DnISpqrd.d.ts} +149 -9
- package/dist/{index-vY35H18z.d.mts → index-RrQfiPWK.d.mts} +490 -845
- package/dist/index.d.mts +4 -0
- package/dist/index.mjs +91 -2
- package/dist/jsx-runtime.mjs +2 -1
- package/dist/{node--akYC-sG.mjs → node-75gQKkFz.mjs} +60 -58
- package/dist/{chunk-z9aeyW2b.mjs → rolldown-runtime-BhDjJH2R.mjs} +1 -1
- package/dist/runtime/client/lazy.js +481 -184
- package/dist/runtime/client/runtime.d.ts +149 -10
- package/dist/runtime/client/runtime.js +481 -184
- package/dist/runtime/index.d.ts +6 -4
- package/dist/runtime/index.js +480 -182
- package/dist/runtime/server/index.d.mts +80 -8
- package/dist/runtime/server/index.mjs +403 -177
- package/dist/runtime/server/runner.d.mts +3 -0
- package/dist/runtime/server/runner.mjs +320 -337
- package/dist/signals/index.d.ts +2 -0
- package/dist/signals/index.js +4 -1
- package/dist/sys/node/index.d.mts +1 -2
- package/dist/sys/node/index.mjs +1 -1
- package/dist/sys/node/worker.d.mts +1 -1
- package/dist/sys/node/worker.mjs +6 -3
- package/dist/testing/index.d.mts +4716 -105
- package/dist/testing/index.mjs +7590 -794
- package/dist/util-IKfWWLJo.mjs +724 -0
- package/dist/validation-DAdGTrys.mjs +791 -0
- package/package.json +27 -27
- package/dist/client-aTQ7xHxx.mjs +0 -4678
- package/dist/index-BvkyxSY6.d.mts +0 -205
- package/dist/validation-ByxKj8bC.mjs +0 -1458
- /package/{LICENSE.md → LICENSE} +0 -0
|
@@ -144,8 +144,20 @@ const HOST_FLAGS = {
|
|
|
144
144
|
isWatchReady: 128,
|
|
145
145
|
isListenReady: 256,
|
|
146
146
|
needsRerender: 512,
|
|
147
|
-
|
|
148
|
-
|
|
147
|
+
/**
|
|
148
|
+
* Set once this component's real (lazy-loaded) `connectedCallback` has fired for
|
|
149
|
+
* the first time. Lets a descendant skip creating/awaiting a connect-promise for
|
|
150
|
+
* an ancestor that's already connected. See {@link HostRef.$onFirstConnectResolve$}.
|
|
151
|
+
*/
|
|
152
|
+
hasFiredConnected: 1024,
|
|
153
|
+
/**
|
|
154
|
+
* Set when a lazy component's dynamic `import()` fails to resolve a
|
|
155
|
+
* constructor. Distinct from `hasInitializedComponent` being unset, which
|
|
156
|
+
* is true while an initialization attempt is merely queued/in-flight.
|
|
157
|
+
*/
|
|
158
|
+
hasFailedLoad: 2048,
|
|
159
|
+
devOnRender: 4096,
|
|
160
|
+
devOnDidLoad: 8192
|
|
149
161
|
};
|
|
150
162
|
const CF_scopedCssEncapsulation = 2;
|
|
151
163
|
/**
|
|
@@ -230,7 +242,17 @@ const CMP_FLAGS = {
|
|
|
230
242
|
* e.g. `encapsulation: { type: 'none', patches: ['all'] }`
|
|
231
243
|
* Equivalent to the global `experimentalSlotFixes` config option.
|
|
232
244
|
*/
|
|
233
|
-
patchAll: 32768
|
|
245
|
+
patchAll: 32768,
|
|
246
|
+
/**
|
|
247
|
+
* Determines if `clonable` is enabled for a component that uses the shadow DOM.
|
|
248
|
+
* e.g. `encapsulation: { type: 'shadow', clonable: true }` is set on the `@Component()` decorator
|
|
249
|
+
*/
|
|
250
|
+
shadowClonable: 65536,
|
|
251
|
+
/**
|
|
252
|
+
* Determines if `serializable` is enabled for a component that uses the shadow DOM.
|
|
253
|
+
* e.g. `encapsulation: { type: 'shadow', serializable: true }` is set on the `@Component()` decorator
|
|
254
|
+
*/
|
|
255
|
+
shadowSerializable: 1 << 17
|
|
234
256
|
};
|
|
235
257
|
/**
|
|
236
258
|
* Namespaces
|
|
@@ -377,8 +399,13 @@ const registerHost = (hostElement, cmpMeta) => {
|
|
|
377
399
|
if (BUILD.asyncLoading) {
|
|
378
400
|
hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
|
|
379
401
|
hostElement["s-rp"] = hostRef.$onReadyPromise$;
|
|
402
|
+
if (!BUILD.lazyLoad) {
|
|
403
|
+
hostRef.$onFirstConnectPromise$ = new Promise((r) => hostRef.$onFirstConnectResolve$ = r);
|
|
404
|
+
hostElement["s-fc"] = hostRef.$onFirstConnectPromise$;
|
|
405
|
+
}
|
|
380
406
|
if (!hostElement["s-p"]) hostElement["s-p"] = [];
|
|
381
407
|
if (!hostElement["s-rc"]) hostElement["s-rc"] = [];
|
|
408
|
+
if (!hostElement["s-pc"]) hostElement["s-pc"] = [];
|
|
382
409
|
}
|
|
383
410
|
if (BUILD.lazyLoad) hostRef.$fetchedCbList$ = [];
|
|
384
411
|
const ref = hostRef;
|
|
@@ -398,7 +425,12 @@ const consoleDevInfo = (...m) => console.info(...STENCIL_DEV_MODE, ...m);
|
|
|
398
425
|
const setErrorHandler = (handler) => customError = handler;
|
|
399
426
|
//#endregion
|
|
400
427
|
//#region src/client/client-load-module.ts
|
|
401
|
-
const cmpModules =
|
|
428
|
+
const cmpModules = /*@__PURE__*/ new Map();
|
|
429
|
+
/**
|
|
430
|
+
* Tracks how many times a dynamic `import()` for a given lazy bundle has failed.
|
|
431
|
+
* Used to cache bust the retry attempt in connected-callback.ts
|
|
432
|
+
*/
|
|
433
|
+
const failedLoadAttempts = /*@__PURE__*/ new Map();
|
|
402
434
|
/**
|
|
403
435
|
* We need to separate out this prefix so that Esbuild doesn't try to resolve
|
|
404
436
|
* the below, but instead retains a dynamic `import()` statement in the
|
|
@@ -429,13 +461,21 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
429
461
|
} else if (!bundleId) return;
|
|
430
462
|
const module = !BUILD.hotModuleReplacement ? cmpModules.get(bundleId) : false;
|
|
431
463
|
if (module) return module[exportName];
|
|
464
|
+
const retryCount = failedLoadAttempts.get(bundleId) ?? 0;
|
|
465
|
+
const cacheBustParams = [retryCount > 0 ? `s-retry=${retryCount}` : "", BUILD.hotModuleReplacement && hmrVersionId ? `s-hmr=${hmrVersionId}` : ""].filter(Boolean).join("&");
|
|
432
466
|
/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
|
|
433
|
-
const entryFile = `${bundleId}.entry.js${
|
|
467
|
+
const entryFile = `${bundleId}.entry.js${cacheBustParams ? "?" + cacheBustParams : ""}`;
|
|
434
468
|
const onLoad = (importedModule) => {
|
|
435
|
-
if (!BUILD.hotModuleReplacement)
|
|
469
|
+
if (!BUILD.hotModuleReplacement) {
|
|
470
|
+
failedLoadAttempts.delete(bundleId);
|
|
471
|
+
cmpModules.set(bundleId, importedModule);
|
|
472
|
+
}
|
|
436
473
|
return importedModule[exportName];
|
|
437
474
|
};
|
|
438
|
-
const onError = (e) =>
|
|
475
|
+
const onError = (e) => {
|
|
476
|
+
failedLoadAttempts.set(bundleId, retryCount + 1);
|
|
477
|
+
consoleError(e, hostRef.$hostElement$);
|
|
478
|
+
};
|
|
439
479
|
if (lazyLoadBasePath) return import(
|
|
440
480
|
/* @vite-ignore */
|
|
441
481
|
/* webpackInclude: /\.entry\.js$/ */
|
|
@@ -453,7 +493,7 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
453
493
|
};
|
|
454
494
|
//#endregion
|
|
455
495
|
//#region src/client/client-style.ts
|
|
456
|
-
const styles =
|
|
496
|
+
const styles = /*@__PURE__*/ new Map();
|
|
457
497
|
const modeResolutionChain = [];
|
|
458
498
|
const setScopedSsr = (_opts) => {};
|
|
459
499
|
const needsScopedSSR = () => false;
|
|
@@ -516,6 +556,10 @@ const HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
|
|
|
516
556
|
*/
|
|
517
557
|
const SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
|
|
518
558
|
const XLINK_NS = "http://www.w3.org/1999/xlink";
|
|
559
|
+
/**
|
|
560
|
+
* Minimum delay, in milliseconds, before retrying a failed lazy component load.
|
|
561
|
+
*/
|
|
562
|
+
const LAZY_LOAD_RETRY_INTERVAL_MS = 1e3;
|
|
519
563
|
const FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
|
|
520
564
|
"formAssociatedCallback",
|
|
521
565
|
"formResetCallback",
|
|
@@ -538,7 +582,7 @@ const plt = {
|
|
|
538
582
|
const setPlatformHelpers = (helpers) => {
|
|
539
583
|
Object.assign(plt, helpers);
|
|
540
584
|
};
|
|
541
|
-
const supportsListenerOptions =
|
|
585
|
+
const supportsListenerOptions = /*@__PURE__*/ (() => {
|
|
542
586
|
let supported = false;
|
|
543
587
|
try {
|
|
544
588
|
win.document?.addEventListener("e", null, Object.defineProperty({}, "passive", { get() {
|
|
@@ -548,14 +592,14 @@ const supportsListenerOptions = /* @__PURE__ */ (() => {
|
|
|
548
592
|
return supported;
|
|
549
593
|
})();
|
|
550
594
|
const promiseResolve = (v) => Promise.resolve(v);
|
|
551
|
-
const supportsConstructableStylesheets = BUILD.constructableCSS ?
|
|
595
|
+
const supportsConstructableStylesheets = BUILD.constructableCSS ? /*@__PURE__*/ (() => {
|
|
552
596
|
try {
|
|
553
597
|
if (!win.document.adoptedStyleSheets) return false;
|
|
554
598
|
return typeof new CSSStyleSheet().replaceSync === "function";
|
|
555
599
|
} catch {}
|
|
556
600
|
return false;
|
|
557
601
|
})() : false;
|
|
558
|
-
const supportsMutableAdoptedStyleSheets = supportsConstructableStylesheets ?
|
|
602
|
+
const supportsMutableAdoptedStyleSheets = supportsConstructableStylesheets ? /*@__PURE__*/ (() => !!win.document && Object.getOwnPropertyDescriptor(win.document.adoptedStyleSheets, "length").writable)() : false;
|
|
559
603
|
//#endregion
|
|
560
604
|
//#region src/client/client-task-queue.ts
|
|
561
605
|
let queueCongestion = 0;
|
|
@@ -563,12 +607,13 @@ let queuePending = false;
|
|
|
563
607
|
const queueDomReads = [];
|
|
564
608
|
const queueDomWrites = [];
|
|
565
609
|
const queueDomWritesLow = [];
|
|
610
|
+
const scheduleFlush = () => win.document?.hidden ? nextTick(flush) : plt.raf(flush);
|
|
566
611
|
const queueTask = (queue, write) => (cb) => {
|
|
567
612
|
queue.push(cb);
|
|
568
613
|
if (!queuePending) {
|
|
569
614
|
queuePending = true;
|
|
570
615
|
if (write && plt.$flags$ & PLATFORM_FLAGS.queueSync) nextTick(flush);
|
|
571
|
-
else
|
|
616
|
+
else scheduleFlush();
|
|
572
617
|
}
|
|
573
618
|
};
|
|
574
619
|
const consume = (queue) => {
|
|
@@ -601,16 +646,16 @@ const flush = () => {
|
|
|
601
646
|
queueDomWritesLow.push(...queueDomWrites);
|
|
602
647
|
queueDomWrites.length = 0;
|
|
603
648
|
}
|
|
604
|
-
if (queuePending = queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length > 0)
|
|
649
|
+
if (queuePending = queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length > 0) scheduleFlush();
|
|
605
650
|
else queueCongestion = 0;
|
|
606
651
|
} else {
|
|
607
652
|
consume(queueDomWrites);
|
|
608
|
-
if (queuePending = queueDomReads.length > 0)
|
|
653
|
+
if (queuePending = queueDomReads.length > 0) scheduleFlush();
|
|
609
654
|
}
|
|
610
655
|
};
|
|
611
656
|
const nextTick = (cb) => promiseResolve().then(cb);
|
|
612
|
-
const readTask =
|
|
613
|
-
const writeTask =
|
|
657
|
+
const readTask = /*@__PURE__*/ queueTask(queueDomReads, false);
|
|
658
|
+
const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
|
|
614
659
|
//#endregion
|
|
615
660
|
//#region src/runtime/asset-path.ts
|
|
616
661
|
const getAssetPath = (path) => {
|
|
@@ -647,12 +692,15 @@ function createShadowRoot(cmpMeta) {
|
|
|
647
692
|
if (BUILD.shadowSlotAssignmentManual) {
|
|
648
693
|
if (!!(cmpMeta.$flags$ & CMP_FLAGS.shadowSlotAssignmentManual)) opts.slotAssignment = "manual";
|
|
649
694
|
}
|
|
695
|
+
if (BUILD.shadowClonable) opts.clonable = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowClonable);
|
|
696
|
+
if (BUILD.shadowSerializable) opts.serializable = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowSerializable);
|
|
650
697
|
const shadowRoot = this.attachShadow(opts);
|
|
651
698
|
if (BUILD.shadowModeClosed && isClosed) this.__shadowRoot = shadowRoot;
|
|
652
699
|
if (globalStyleSheet === void 0) globalStyleSheet = createStyleSheetIfNeededAndSupported(globalStyles) ?? null;
|
|
653
|
-
if (globalStyleSheet)
|
|
654
|
-
|
|
655
|
-
|
|
700
|
+
if (globalStyleSheet) {
|
|
701
|
+
if (supportsMutableAdoptedStyleSheets) shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
|
|
702
|
+
else shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, globalStyleSheet];
|
|
703
|
+
} else if (globalStyles && !supportsConstructableStylesheets) {
|
|
656
704
|
const styleElm = document.createElement("style");
|
|
657
705
|
styleElm.innerHTML = globalStyles;
|
|
658
706
|
if (BUILD.hotModuleReplacement) styleElm.setAttribute(HYDRATED_STYLE_ID, GLOBAL_STYLE_ID);
|
|
@@ -677,8 +725,10 @@ function createShadowRoot(cmpMeta) {
|
|
|
677
725
|
const updateFallbackSlotVisibility = (elm) => {
|
|
678
726
|
const childNodes = internalCall(elm, "childNodes");
|
|
679
727
|
if (elm.tagName && elm.tagName.includes("-") && elm["s-cr"] && elm.tagName !== "SLOT-FB") getHostSlotNodes(childNodes, elm.tagName).forEach((slotNode) => {
|
|
680
|
-
if (slotNode.nodeType === NODE_TYPE.ElementNode && slotNode.tagName === "SLOT-FB")
|
|
681
|
-
|
|
728
|
+
if (slotNode.nodeType === NODE_TYPE.ElementNode && slotNode.tagName === "SLOT-FB") {
|
|
729
|
+
if (getSlotChildSiblings(slotNode, getSlotName(slotNode), false).length) slotNode.hidden = true;
|
|
730
|
+
else slotNode.hidden = false;
|
|
731
|
+
}
|
|
682
732
|
});
|
|
683
733
|
let i = 0;
|
|
684
734
|
for (i = 0; i < childNodes.length; i++) {
|
|
@@ -721,7 +771,7 @@ function getHostSlotNodes(childNodes, hostName, slotName) {
|
|
|
721
771
|
slottedNodes.push(childNode);
|
|
722
772
|
if (typeof slotName !== "undefined") return slottedNodes;
|
|
723
773
|
}
|
|
724
|
-
slottedNodes = [...slottedNodes, ...getHostSlotNodes(childNode
|
|
774
|
+
slottedNodes = [...slottedNodes, ...getHostSlotNodes(internalCall(childNode, "childNodes"), hostName, slotName)];
|
|
725
775
|
}
|
|
726
776
|
return slottedNodes;
|
|
727
777
|
}
|
|
@@ -752,7 +802,7 @@ const isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
|
|
|
752
802
|
if (nodeToRelocate.getAttribute("slot") === slotName) return true;
|
|
753
803
|
return false;
|
|
754
804
|
}
|
|
755
|
-
if (nodeToRelocate["s-
|
|
805
|
+
if (typeof nodeToRelocate["s-sa"] === "string") return nodeToRelocate["s-sa"] === slotName;
|
|
756
806
|
return slotName === "";
|
|
757
807
|
};
|
|
758
808
|
/**
|
|
@@ -801,8 +851,10 @@ function patchSlotNode(node) {
|
|
|
801
851
|
const assignedFactory = (elementsOnly) => function(opts) {
|
|
802
852
|
const toReturn = [];
|
|
803
853
|
const slotName = this["s-sn"];
|
|
804
|
-
if (opts?.flatten)
|
|
805
|
-
|
|
854
|
+
if (opts?.flatten) {
|
|
855
|
+
if (BUILD.isDev) console.error("Flattening is not supported for Stencil non-shadow slots. You can use `.childNodes` for nested slot fallback content.");
|
|
856
|
+
else console.error("Flattening not supported for Stencil non-shadow slots");
|
|
857
|
+
}
|
|
806
858
|
const parent = this["s-cr"].parentElement;
|
|
807
859
|
(parent.__childNodes ? parent.childNodes : getSlottedChildNodes(parent.childNodes)).forEach((n) => {
|
|
808
860
|
if (slotName === getSlotName(n)) toReturn.push(n);
|
|
@@ -893,8 +945,10 @@ const patchCloneNode = (HostElementPrototype) => {
|
|
|
893
945
|
for (; i < childNodes.length; i++) {
|
|
894
946
|
slotted = childNodes[i]["s-nr"];
|
|
895
947
|
nonStencilNode = stencilPrivates.every((privateField) => !childNodes[i][privateField]);
|
|
896
|
-
if (slotted)
|
|
897
|
-
|
|
948
|
+
if (slotted) {
|
|
949
|
+
if (clonedNode.__appendChild) clonedNode.__appendChild(slotted.cloneNode(true));
|
|
950
|
+
else clonedNode.appendChild(slotted.cloneNode(true));
|
|
951
|
+
}
|
|
898
952
|
if (nonStencilNode) clonedNode.appendChild(childNodes[i].cloneNode(true));
|
|
899
953
|
}
|
|
900
954
|
}
|
|
@@ -1097,11 +1151,11 @@ const patchChildSlotNodes = (elm) => {
|
|
|
1097
1151
|
} });
|
|
1098
1152
|
patchHostOriginalAccessor("firstChild", elm);
|
|
1099
1153
|
Object.defineProperty(elm, "firstChild", { get() {
|
|
1100
|
-
return this.childNodes[0];
|
|
1154
|
+
return this.childNodes[0] || null;
|
|
1101
1155
|
} });
|
|
1102
1156
|
patchHostOriginalAccessor("lastChild", elm);
|
|
1103
1157
|
Object.defineProperty(elm, "lastChild", { get() {
|
|
1104
|
-
return this.childNodes[this.childNodes.length - 1];
|
|
1158
|
+
return this.childNodes[this.childNodes.length - 1] || null;
|
|
1105
1159
|
} });
|
|
1106
1160
|
patchHostOriginalAccessor("childNodes", elm);
|
|
1107
1161
|
Object.defineProperty(elm, "childNodes", { get() {
|
|
@@ -1147,7 +1201,7 @@ const patchNextSibling = (node) => {
|
|
|
1147
1201
|
Object.defineProperty(node, "nextSibling", { get: function() {
|
|
1148
1202
|
const parentNodes = this["s-ol"]?.parentNode.childNodes;
|
|
1149
1203
|
const index = parentNodes?.indexOf(this);
|
|
1150
|
-
if (parentNodes && index > -1) return parentNodes[index + 1];
|
|
1204
|
+
if (parentNodes && index > -1) return parentNodes[index + 1] || null;
|
|
1151
1205
|
return this.__nextSibling;
|
|
1152
1206
|
} });
|
|
1153
1207
|
};
|
|
@@ -1162,7 +1216,7 @@ const patchNextElementSibling = (element) => {
|
|
|
1162
1216
|
Object.defineProperty(element, "nextElementSibling", { get: function() {
|
|
1163
1217
|
const parentEles = this["s-ol"]?.parentNode.children;
|
|
1164
1218
|
const index = parentEles?.indexOf(this);
|
|
1165
|
-
if (parentEles && index > -1) return parentEles[index + 1];
|
|
1219
|
+
if (parentEles && index > -1) return parentEles[index + 1] || null;
|
|
1166
1220
|
return this.__nextElementSibling;
|
|
1167
1221
|
} });
|
|
1168
1222
|
};
|
|
@@ -1177,7 +1231,7 @@ const patchPreviousSibling = (node) => {
|
|
|
1177
1231
|
Object.defineProperty(node, "previousSibling", { get: function() {
|
|
1178
1232
|
const parentNodes = this["s-ol"]?.parentNode.childNodes;
|
|
1179
1233
|
const index = parentNodes?.indexOf(this);
|
|
1180
|
-
if (parentNodes && index > -1) return parentNodes[index - 1];
|
|
1234
|
+
if (parentNodes && index > -1) return parentNodes[index - 1] || null;
|
|
1181
1235
|
return this.__previousSibling;
|
|
1182
1236
|
} });
|
|
1183
1237
|
};
|
|
@@ -1192,7 +1246,7 @@ const patchPreviousElementSibling = (element) => {
|
|
|
1192
1246
|
Object.defineProperty(element, "previousElementSibling", { get: function() {
|
|
1193
1247
|
const parentNodes = this["s-ol"]?.parentNode.children;
|
|
1194
1248
|
const index = parentNodes?.indexOf(this);
|
|
1195
|
-
if (parentNodes && index > -1) return parentNodes[index - 1];
|
|
1249
|
+
if (parentNodes && index > -1) return parentNodes[index - 1] || null;
|
|
1196
1250
|
return this.__previousElementSibling;
|
|
1197
1251
|
} });
|
|
1198
1252
|
};
|
|
@@ -1367,7 +1421,7 @@ function queryNonceMetaTagContent(doc) {
|
|
|
1367
1421
|
}
|
|
1368
1422
|
//#endregion
|
|
1369
1423
|
//#region src/runtime/styles.ts
|
|
1370
|
-
const rootAppliedStyles =
|
|
1424
|
+
const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
|
|
1371
1425
|
/**
|
|
1372
1426
|
* Get or initialize the set of applied style scope IDs for a container element.
|
|
1373
1427
|
*
|
|
@@ -1391,9 +1445,10 @@ const getAppliedStyles = (container) => {
|
|
|
1391
1445
|
* @param prepend if true, add to beginning; if false, add to end
|
|
1392
1446
|
*/
|
|
1393
1447
|
const adoptStylesheet = (container, sheet, prepend = false) => {
|
|
1394
|
-
if (supportsMutableAdoptedStyleSheets)
|
|
1395
|
-
|
|
1396
|
-
|
|
1448
|
+
if (supportsMutableAdoptedStyleSheets) {
|
|
1449
|
+
if (prepend) container.adoptedStyleSheets.unshift(sheet);
|
|
1450
|
+
else container.adoptedStyleSheets.push(sheet);
|
|
1451
|
+
} else if (prepend) container.adoptedStyleSheets = [sheet, ...container.adoptedStyleSheets];
|
|
1397
1452
|
else container.adoptedStyleSheets = [...container.adoptedStyleSheets, sheet];
|
|
1398
1453
|
};
|
|
1399
1454
|
/**
|
|
@@ -1406,7 +1461,7 @@ const adoptStylesheet = (container, sheet, prepend = false) => {
|
|
|
1406
1461
|
* @returns a new CSSStyleSheet for the correct window
|
|
1407
1462
|
*/
|
|
1408
1463
|
const createStylesheetForWindow = (container, cssText) => {
|
|
1409
|
-
const sheet = new (container.defaultView ?? container.ownerDocument?.defaultView ?? win).CSSStyleSheet();
|
|
1464
|
+
const sheet = new (container.defaultView ?? (container.ownerDocument?.defaultView) ?? win).CSSStyleSheet();
|
|
1410
1465
|
sheet.replaceSync(cssText);
|
|
1411
1466
|
return sheet;
|
|
1412
1467
|
};
|
|
@@ -1477,41 +1532,46 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
|
|
|
1477
1532
|
/**
|
|
1478
1533
|
* attach styles at the end of the head tag if we render scoped components
|
|
1479
1534
|
*/
|
|
1480
|
-
if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation))
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1535
|
+
if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation)) {
|
|
1536
|
+
if (styleContainerNode.nodeName === "HEAD") {
|
|
1537
|
+
/**
|
|
1538
|
+
* if the page contains preconnect links, we want to insert the styles
|
|
1539
|
+
* after the last preconnect link to ensure the styles are preloaded
|
|
1540
|
+
*/
|
|
1541
|
+
const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
|
|
1542
|
+
const referenceNode = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
|
|
1543
|
+
styleContainerNode.insertBefore(styleElm, referenceNode?.parentNode === styleContainerNode ? referenceNode : null);
|
|
1544
|
+
} else if ("host" in styleContainerNode) {
|
|
1545
|
+
if (supportsConstructableStylesheets) {
|
|
1546
|
+
const stylesheet = createStylesheetForWindow(styleContainerNode, style);
|
|
1547
|
+
adoptStylesheet(styleContainerNode, stylesheet, true);
|
|
1548
|
+
} else {
|
|
1549
|
+
/**
|
|
1550
|
+
* If a scoped component is used within a shadow root and constructable stylesheets are
|
|
1551
|
+
* not supported, we want to insert the styles at the beginning of the shadow root node.
|
|
1552
|
+
*
|
|
1553
|
+
* However, if there is already a style node in the shadow root, we just append
|
|
1554
|
+
* the styles to the existing node.
|
|
1555
|
+
*
|
|
1556
|
+
* Note: order of how styles are applied is important. The new style node
|
|
1557
|
+
* should be inserted before the existing style node.
|
|
1558
|
+
*
|
|
1559
|
+
* During HMR, create separate style elements for scoped components so they can be
|
|
1560
|
+
* updated independently without affecting other components' styles.
|
|
1561
|
+
*/
|
|
1562
|
+
const existingStyleContainer = styleContainerNode.querySelector("style");
|
|
1563
|
+
if (existingStyleContainer && !BUILD.hotModuleReplacement) existingStyleContainer.textContent = style + existingStyleContainer.textContent;
|
|
1564
|
+
else styleContainerNode.prepend(styleElm);
|
|
1565
|
+
}
|
|
1566
|
+
} else styleContainerNode.append(styleElm);
|
|
1508
1567
|
}
|
|
1509
|
-
else styleContainerNode.append(styleElm);
|
|
1510
1568
|
/**
|
|
1511
1569
|
* attach styles at the beginning of a shadow root node if we render shadow components
|
|
1512
1570
|
*/
|
|
1513
|
-
if (cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation)
|
|
1514
|
-
|
|
1571
|
+
if (cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) {
|
|
1572
|
+
if (isClosedShadowSSR) styleContainerNode.prepend(styleElm);
|
|
1573
|
+
else styleContainerNode.insertBefore(styleElm, null);
|
|
1574
|
+
}
|
|
1515
1575
|
if (appliedStyles) appliedStyles.add(scopeId);
|
|
1516
1576
|
}
|
|
1517
1577
|
} else if (BUILD.constructableCSS) {
|
|
@@ -1603,7 +1663,12 @@ const hydrateScopedToShadow = () => {
|
|
|
1603
1663
|
if (!win.document) return;
|
|
1604
1664
|
const styleElements = win.document.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
|
|
1605
1665
|
let i = 0;
|
|
1606
|
-
for (; i < styleElements.length; i++)
|
|
1666
|
+
for (; i < styleElements.length; i++) {
|
|
1667
|
+
const scopeId = styleElements[i].getAttribute(HYDRATED_STYLE_ID);
|
|
1668
|
+
const existing = styles.get(scopeId);
|
|
1669
|
+
const allowCS = existing !== void 0 ? existing instanceof CSSStyleSheet : true;
|
|
1670
|
+
registerStyle(scopeId, convertScopedToShadow(styleElements[i].innerHTML), allowCS);
|
|
1671
|
+
}
|
|
1607
1672
|
};
|
|
1608
1673
|
//#endregion
|
|
1609
1674
|
//#region src/utils/helpers.ts
|
|
@@ -1735,11 +1800,15 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
|
|
|
1735
1800
|
}
|
|
1736
1801
|
} else if (BUILD.vdomStyle && memberName === "style") {
|
|
1737
1802
|
if (BUILD.updatable) {
|
|
1738
|
-
for (const prop in oldValue) if (!newValue || newValue[prop] == null)
|
|
1739
|
-
|
|
1803
|
+
for (const prop in oldValue) if (!newValue || newValue[prop] == null) {
|
|
1804
|
+
if (!BUILD.hydrateServerSide && prop.includes("-")) elm.style.removeProperty(prop);
|
|
1805
|
+
else elm.style[prop] = "";
|
|
1806
|
+
}
|
|
1807
|
+
}
|
|
1808
|
+
for (const prop in newValue) if (!oldValue || newValue[prop] !== oldValue[prop]) {
|
|
1809
|
+
if (!BUILD.hydrateServerSide && prop.includes("-")) elm.style.setProperty(prop, newValue[prop]);
|
|
1810
|
+
else elm.style[prop] = newValue[prop];
|
|
1740
1811
|
}
|
|
1741
|
-
for (const prop in newValue) if (!oldValue || newValue[prop] !== oldValue[prop]) if (!BUILD.hydrateServerSide && prop.includes("-")) elm.style.setProperty(prop, newValue[prop]);
|
|
1742
|
-
else elm.style[prop] = newValue[prop];
|
|
1743
1812
|
} else if (BUILD.vdomKey && memberName === "key") {} else if (BUILD.vdomRef && memberName === "ref") {
|
|
1744
1813
|
if (newValue) queueRefAttachment(newValue, elm);
|
|
1745
1814
|
} else if (BUILD.vdomListener && (BUILD.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
|
|
@@ -1748,11 +1817,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
|
|
|
1748
1817
|
else memberName = ln[2] + memberName.slice(3);
|
|
1749
1818
|
if (oldValue || newValue) {
|
|
1750
1819
|
const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
|
|
1751
|
-
memberName = memberName.replace(
|
|
1820
|
+
memberName = memberName.replace(/*@__PURE__*/ new RegExp(CAPTURE_EVENT_SUFFIX + "$"), "");
|
|
1752
1821
|
if (oldValue) plt.rel(elm, memberName, oldValue, capture);
|
|
1753
1822
|
if (newValue) plt.ael(elm, memberName, newValue, capture);
|
|
1754
1823
|
}
|
|
1755
|
-
} else if (BUILD.
|
|
1824
|
+
} else if (BUILD.vdomPropOrAttrPrefix && memberName[0] === "a" && memberName.startsWith("attr:")) {
|
|
1756
1825
|
const propName = memberName.slice(5);
|
|
1757
1826
|
let attrName;
|
|
1758
1827
|
if (BUILD.member) {
|
|
@@ -1767,7 +1836,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
|
|
|
1767
1836
|
if (newValue !== false || elm.getAttribute(attrName) === "") elm.removeAttribute(attrName);
|
|
1768
1837
|
} else elm.setAttribute(attrName, newValue === true ? "" : newValue);
|
|
1769
1838
|
return;
|
|
1770
|
-
} else if (BUILD.
|
|
1839
|
+
} else if (BUILD.vdomPropOrAttrPrefix && memberName[0] === "p" && memberName.startsWith("prop:")) {
|
|
1771
1840
|
const propName = memberName.slice(5);
|
|
1772
1841
|
try {
|
|
1773
1842
|
elm[propName] = newValue;
|
|
@@ -1787,8 +1856,10 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
|
|
|
1787
1856
|
if (!elm.tagName.includes("-")) {
|
|
1788
1857
|
const n = newValue == null ? "" : newValue;
|
|
1789
1858
|
if (memberName === "list") isProp = false;
|
|
1790
|
-
else if (oldValue == null || elm[memberName] !== n)
|
|
1791
|
-
|
|
1859
|
+
else if (oldValue == null || elm[memberName] !== n) {
|
|
1860
|
+
if (typeof elm.__lookupSetter__(memberName) === "function") elm[memberName] = n;
|
|
1861
|
+
else elm.setAttribute(memberName, n);
|
|
1862
|
+
}
|
|
1792
1863
|
} else if (elm[memberName] !== newValue) elm[memberName] = newValue;
|
|
1793
1864
|
} catch {}
|
|
1794
1865
|
/**
|
|
@@ -1806,8 +1877,10 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
|
|
|
1806
1877
|
}
|
|
1807
1878
|
}
|
|
1808
1879
|
if (newValue == null || newValue === false) {
|
|
1809
|
-
if (newValue !== false || elm.getAttribute(memberName) === ""
|
|
1810
|
-
|
|
1880
|
+
if (newValue !== false || elm.getAttribute(memberName) === "" || flags & VNODE_FLAGS.isHost && !isEnumeratedAttribute(memberName)) {
|
|
1881
|
+
if (BUILD.vdomXlink && xlink) elm.removeAttributeNS(XLINK_NS, memberName);
|
|
1882
|
+
else elm.removeAttribute(memberName);
|
|
1883
|
+
}
|
|
1811
1884
|
} else if ((!isProp || flags & VNODE_FLAGS.isHost || isSvg) && !isComplex && elm.nodeType === NODE_TYPE.ElementNode) {
|
|
1812
1885
|
newValue = newValue === true ? "" : newValue;
|
|
1813
1886
|
if (BUILD.vdomXlink && xlink) elm.setAttributeNS(XLINK_NS, memberName, newValue);
|
|
@@ -1815,6 +1888,18 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
|
|
|
1815
1888
|
}
|
|
1816
1889
|
}
|
|
1817
1890
|
};
|
|
1891
|
+
/**
|
|
1892
|
+
* Attribute names that are enumerated (tri-state true/false/unset) rather than
|
|
1893
|
+
* plain boolean-presence attributes. An explicit `"false"` string on one of
|
|
1894
|
+
* these is semantically different from the attribute being absent, so a
|
|
1895
|
+
* reflected `false` value must not clear a pre-existing literal value.
|
|
1896
|
+
*/
|
|
1897
|
+
const ENUMERATED_ATTRIBUTES = /*@__PURE__*/ new Set([
|
|
1898
|
+
"draggable",
|
|
1899
|
+
"contenteditable",
|
|
1900
|
+
"spellcheck"
|
|
1901
|
+
]);
|
|
1902
|
+
const isEnumeratedAttribute = (attrName) => ENUMERATED_ATTRIBUTES.has(attrName) || attrName.startsWith("aria-");
|
|
1818
1903
|
const parseClassListRegex = /\s/;
|
|
1819
1904
|
/**
|
|
1820
1905
|
* Parsed a string of classnames into an array
|
|
@@ -1938,6 +2023,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex) => {
|
|
|
1938
2023
|
}
|
|
1939
2024
|
} else if (BUILD.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotReference) {
|
|
1940
2025
|
elm = newVNode.$elm$ = BUILD.isDebug || BUILD.hydrateServerSide ? slotReferenceDebugNode(newVNode) : win.document.createTextNode("");
|
|
2026
|
+
if (typeof newVNode.$attrs$?.slot === "string") elm["s-sa"] = newVNode.$attrs$.slot;
|
|
1941
2027
|
if (BUILD.vdomAttribute) updateElement(null, newVNode, isSvgMode);
|
|
1942
2028
|
} else {
|
|
1943
2029
|
if (BUILD.svg && !isSvgMode) isSvgMode = newVNode.$tag$ === "svg";
|
|
@@ -2213,8 +2299,10 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = fal
|
|
|
2213
2299
|
node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
|
|
2214
2300
|
newStartVnode = newCh[++newStartIdx];
|
|
2215
2301
|
}
|
|
2216
|
-
if (node)
|
|
2217
|
-
|
|
2302
|
+
if (node) {
|
|
2303
|
+
if (BUILD.slotRelocation) insertBefore(referenceNode(oldStartVnode.$elm$).parentNode, node, referenceNode(oldStartVnode.$elm$));
|
|
2304
|
+
else insertBefore(oldStartVnode.$elm$.parentNode, node, oldStartVnode.$elm$);
|
|
2305
|
+
}
|
|
2218
2306
|
}
|
|
2219
2307
|
if (oldStartIdx > oldEndIdx) addVnodes(parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode, newCh, newStartIdx, newEndIdx);
|
|
2220
2308
|
else if (BUILD.updatable && newStartIdx > newEndIdx) removeVnodes(oldCh, oldStartIdx, oldEndIdx);
|
|
@@ -2301,6 +2389,30 @@ const patch = (oldVNode, newVNode, isInitialRender = false) => {
|
|
|
2301
2389
|
*/
|
|
2302
2390
|
const relocateNodes = [];
|
|
2303
2391
|
/**
|
|
2392
|
+
* When a forwarded `<slot>` gets relocated, drag along any content already forwarded through it,
|
|
2393
|
+
* to wherever it just landed (or nowhere, to be hidden, if it didn't match anything).
|
|
2394
|
+
*
|
|
2395
|
+
* Runs as its own pass after {@link markSlotContentForRelocation} rather than inside it, so that
|
|
2396
|
+
* function's matching order - which hydration's node/comment ordering depends on - is untouched.
|
|
2397
|
+
*/
|
|
2398
|
+
const carryContentWithRelocatedSlotRefs = () => {
|
|
2399
|
+
for (const relocateData of relocateNodes.slice()) {
|
|
2400
|
+
const marker = relocateData.$nodeToRelocate$;
|
|
2401
|
+
if (!marker["s-sr"]) continue;
|
|
2402
|
+
const carriedSiblings = getSlotChildSiblings(marker, marker["s-sn"] || "", false);
|
|
2403
|
+
for (const carriedSibling of carriedSiblings) {
|
|
2404
|
+
if (!carriedSibling["s-ol"]) continue;
|
|
2405
|
+
let siblingRelocateData = relocateNodes.find((r) => r.$nodeToRelocate$ === carriedSibling);
|
|
2406
|
+
if (!siblingRelocateData) {
|
|
2407
|
+
siblingRelocateData = { $nodeToRelocate$: carriedSibling };
|
|
2408
|
+
relocateNodes.push(siblingRelocateData);
|
|
2409
|
+
}
|
|
2410
|
+
siblingRelocateData.$slotRefNode$ = relocateData.$slotRefNode$;
|
|
2411
|
+
if (relocateData.$slotRefNode$) carriedSibling["s-sh"] = relocateData.$slotRefNode$["s-hn"];
|
|
2412
|
+
}
|
|
2413
|
+
}
|
|
2414
|
+
};
|
|
2415
|
+
/**
|
|
2304
2416
|
* Mark the contents of a slot for relocation via adding references to them to
|
|
2305
2417
|
* the {@link relocateNodes} data structure. The actual work of relocating them
|
|
2306
2418
|
* will then be handled in {@link renderVdom}.
|
|
@@ -2405,7 +2517,7 @@ const insertBefore = (parent, newNode, reference, isInitialLoad) => {
|
|
|
2405
2517
|
return newNode;
|
|
2406
2518
|
}
|
|
2407
2519
|
}
|
|
2408
|
-
if (parent
|
|
2520
|
+
if (BUILD.slotRelocation && parent?.__insertBefore) return parent.__insertBefore(newNode, reference);
|
|
2409
2521
|
else return parent?.insertBefore(newNode, reference);
|
|
2410
2522
|
};
|
|
2411
2523
|
/**
|
|
@@ -2499,6 +2611,7 @@ render() {
|
|
|
2499
2611
|
plt.$flags$ |= PLATFORM_FLAGS.isTmpDisconnected;
|
|
2500
2612
|
if (checkSlotRelocate) {
|
|
2501
2613
|
markSlotContentForRelocation(rootVnode.$elm$);
|
|
2614
|
+
carryContentWithRelocatedSlotRefs();
|
|
2502
2615
|
for (const relocateData of relocateNodes) {
|
|
2503
2616
|
const nodeToRelocate = relocateData.$nodeToRelocate$;
|
|
2504
2617
|
if (!nodeToRelocate["s-ol"] && win.document) {
|
|
@@ -2558,7 +2671,7 @@ render() {
|
|
|
2558
2671
|
}
|
|
2559
2672
|
if (BUILD.slotRelocation && !useNativeShadowDom && !(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && hostElm["s-cr"]) {
|
|
2560
2673
|
const children = rootVnode.$elm$.__childNodes || rootVnode.$elm$.childNodes;
|
|
2561
|
-
for (const childNode of children) if (childNode["s-hn"] !== hostTagName &&
|
|
2674
|
+
for (const childNode of children) if (childNode["s-hn"] !== hostTagName && childNode["s-sh"] !== hostTagName) {
|
|
2562
2675
|
if (isInitialLoad && childNode["s-ih"] == null) childNode["s-ih"] = childNode.hidden ?? false;
|
|
2563
2676
|
if (childNode.nodeType === NODE_TYPE.ElementNode) childNode.hidden = true;
|
|
2564
2677
|
else if (childNode.nodeType === NODE_TYPE.TextNode && !!childNode.nodeValue.trim()) {
|
|
@@ -2576,16 +2689,58 @@ const slotReferenceDebugNode = (slotVNode) => win.document?.createComment(`<slot
|
|
|
2576
2689
|
const originalLocationDebugNode = (nodeToRelocate) => win.document?.createComment(`org-location for ` + (nodeToRelocate.localName ? `<${nodeToRelocate.localName}> (host=${nodeToRelocate["s-hn"]})` : `[${nodeToRelocate.textContent}]`));
|
|
2577
2690
|
//#endregion
|
|
2578
2691
|
//#region src/runtime/update-component.ts
|
|
2692
|
+
/**
|
|
2693
|
+
* Get a promise that resolves once `hostRef`'s real `connectedCallback` has fired for the first time.
|
|
2694
|
+
*
|
|
2695
|
+
* @param hostRef the component's host reference
|
|
2696
|
+
* @returns a promise that resolves once the component's real `connectedCallback` has fired
|
|
2697
|
+
*/
|
|
2698
|
+
const ensureFirstConnectPromise = (hostRef) => {
|
|
2699
|
+
if (!hostRef.$onFirstConnectPromise$) hostRef.$onFirstConnectPromise$ = new Promise((r) => hostRef.$onFirstConnectResolve$ = r);
|
|
2700
|
+
return hostRef.$onFirstConnectPromise$;
|
|
2701
|
+
};
|
|
2702
|
+
/**
|
|
2703
|
+
* Resolve `hostRef`'s first-connect promise and flag it connected. Called once this
|
|
2704
|
+
* component's real `connectedCallback` fires, plus from error/disconnect cleanup so a
|
|
2705
|
+
* component that never connects can't hang an ancestor or descendant forever.
|
|
2706
|
+
*
|
|
2707
|
+
* @param hostRef the component's host reference
|
|
2708
|
+
*/
|
|
2709
|
+
const markFirstConnected = (hostRef) => {
|
|
2710
|
+
hostRef.$flags$ |= HOST_FLAGS.hasFiredConnected;
|
|
2711
|
+
hostRef.$onFirstConnectResolve$?.();
|
|
2712
|
+
hostRef.$onFirstConnectResolve$ = void 0;
|
|
2713
|
+
};
|
|
2714
|
+
/**
|
|
2715
|
+
* Wait for `ancestorElm` to be defined and its real `connectedCallback` to have completed.
|
|
2716
|
+
* Shared by the lazy ({@link initializeComponent}) and standalone (`bootstrap-standalone.ts`)
|
|
2717
|
+
* `connectedCallback` paths so a component never connects before its nearest Stencil
|
|
2718
|
+
* ancestor, regardless of load order. Both call sites already check `BUILD.asyncLoading` and
|
|
2719
|
+
* that an ancestor exists before calling this. Lazy's proxy classes are always pre-defined,
|
|
2720
|
+
* so the `whenDefined` wait is a no-op there - it only does real work for standalone's
|
|
2721
|
+
* autoloader, where the ancestor tag may not be defined yet.
|
|
2722
|
+
*
|
|
2723
|
+
* @param ancestorElm the nearest Stencil ancestor element
|
|
2724
|
+
*/
|
|
2725
|
+
const awaitAncestorConnected = async (ancestorElm) => {
|
|
2726
|
+
let ancestorHostRef = getHostRef(ancestorElm);
|
|
2727
|
+
if (!BUILD.lazyLoad && !ancestorHostRef) {
|
|
2728
|
+
await getRegistry().whenDefined(ancestorElm.tagName.toLowerCase());
|
|
2729
|
+
ancestorHostRef = getHostRef(ancestorElm);
|
|
2730
|
+
}
|
|
2731
|
+
if (ancestorHostRef && !(ancestorHostRef.$flags$ & HOST_FLAGS.hasFiredConnected)) await ensureFirstConnectPromise(ancestorHostRef);
|
|
2732
|
+
};
|
|
2579
2733
|
const attachToAncestor = (hostRef, ancestorComponent) => {
|
|
2580
2734
|
if (BUILD.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) {
|
|
2581
2735
|
const index = ancestorComponent["s-p"].push(new Promise((r) => hostRef.$onRenderResolve$ = () => {
|
|
2582
2736
|
ancestorComponent["s-p"].splice(index - 1, 1);
|
|
2583
2737
|
r();
|
|
2584
2738
|
}));
|
|
2739
|
+
if (ancestorComponent["s-pc"]) ancestorComponent["s-pc"].push(ensureFirstConnectPromise(hostRef));
|
|
2585
2740
|
}
|
|
2586
2741
|
};
|
|
2587
2742
|
const scheduleUpdate = (hostRef, isInitialLoad) => {
|
|
2588
|
-
if (BUILD.
|
|
2743
|
+
if (BUILD.updatable) hostRef.$flags$ |= HOST_FLAGS.isQueuedForUpdate;
|
|
2589
2744
|
if (BUILD.asyncLoading && hostRef.$flags$ & HOST_FLAGS.isWaitingForChildren) {
|
|
2590
2745
|
hostRef.$flags$ |= HOST_FLAGS.needsRerender;
|
|
2591
2746
|
return;
|
|
@@ -2593,6 +2748,8 @@ const scheduleUpdate = (hostRef, isInitialLoad) => {
|
|
|
2593
2748
|
attachToAncestor(hostRef, hostRef.$ancestorComponent$);
|
|
2594
2749
|
const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
|
|
2595
2750
|
if (isInitialLoad) {
|
|
2751
|
+
const pendingConnects = BUILD.asyncLoading ? hostRef.$hostElement$["s-pc"] : void 0;
|
|
2752
|
+
if (pendingConnects && pendingConnects.length > 0) return Promise.all(pendingConnects).then(dispatch).catch(dispatch);
|
|
2596
2753
|
queueMicrotask(() => {
|
|
2597
2754
|
dispatch();
|
|
2598
2755
|
});
|
|
@@ -2632,10 +2789,6 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
|
|
|
2632
2789
|
let maybePromise;
|
|
2633
2790
|
if (isInitialLoad) {
|
|
2634
2791
|
if (BUILD.lazyLoad) {
|
|
2635
|
-
if (BUILD.slotRelocation && hostRef.$deferredConnectedCallback$) {
|
|
2636
|
-
hostRef.$deferredConnectedCallback$ = false;
|
|
2637
|
-
safeCall(instance, "connectedCallback", void 0, elm);
|
|
2638
|
-
}
|
|
2639
2792
|
if (BUILD.hostListener) {
|
|
2640
2793
|
hostRef.$flags$ |= HOST_FLAGS.isListenReady;
|
|
2641
2794
|
if (hostRef.$queuedListeners$) {
|
|
@@ -2648,6 +2801,14 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
|
|
|
2648
2801
|
if (BUILD.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentWillLoad");
|
|
2649
2802
|
maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
|
|
2650
2803
|
} else {
|
|
2804
|
+
if (BUILD.updatable && hostRef.$queuedPropChanges$) {
|
|
2805
|
+
const changes = hostRef.$queuedPropChanges$;
|
|
2806
|
+
hostRef.$queuedPropChanges$ = void 0;
|
|
2807
|
+
if (safeCall(instance, "componentShouldUpdate", changes, elm) === false) {
|
|
2808
|
+
hostRef.$flags$ &= ~HOST_FLAGS.isQueuedForUpdate;
|
|
2809
|
+
return;
|
|
2810
|
+
}
|
|
2811
|
+
}
|
|
2651
2812
|
if (BUILD.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentWillUpdate");
|
|
2652
2813
|
maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm);
|
|
2653
2814
|
}
|
|
@@ -2762,7 +2923,6 @@ let renderingRef = null;
|
|
|
2762
2923
|
const callRender = (hostRef, instance, elm, isInitialLoad) => {
|
|
2763
2924
|
const allRenderFn = !!BUILD.allRenderFn;
|
|
2764
2925
|
const lazyLoad = !!BUILD.lazyLoad;
|
|
2765
|
-
const taskQueue = !!BUILD.taskQueue;
|
|
2766
2926
|
const updatable = !!BUILD.updatable;
|
|
2767
2927
|
try {
|
|
2768
2928
|
renderingRef = instance;
|
|
@@ -2771,14 +2931,17 @@ const callRender = (hostRef, instance, elm, isInitialLoad) => {
|
|
|
2771
2931
|
* method, so we can call the method immediately. If not, check before calling it.
|
|
2772
2932
|
*/
|
|
2773
2933
|
instance = allRenderFn ? instance.render() : instance.render && instance.render();
|
|
2774
|
-
if (updatable
|
|
2934
|
+
if (updatable) hostRef.$flags$ &= ~HOST_FLAGS.isQueuedForUpdate;
|
|
2775
2935
|
if (updatable || lazyLoad) hostRef.$flags$ |= HOST_FLAGS.hasRendered;
|
|
2776
|
-
if (BUILD.hasRenderFn || BUILD.reflect)
|
|
2777
|
-
|
|
2778
|
-
|
|
2779
|
-
|
|
2780
|
-
|
|
2781
|
-
|
|
2936
|
+
if (BUILD.hasRenderFn || BUILD.reflect) {
|
|
2937
|
+
if (BUILD.vdomRender || BUILD.reflect) {
|
|
2938
|
+
if (BUILD.hydrateServerSide) return Promise.resolve(instance).then((value) => renderVdom(hostRef, value, isInitialLoad));
|
|
2939
|
+
else renderVdom(hostRef, instance, isInitialLoad);
|
|
2940
|
+
} else {
|
|
2941
|
+
const shadowRoot = elm.shadowRoot;
|
|
2942
|
+
if (hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.shadowDomEncapsulation) shadowRoot.textContent = instance;
|
|
2943
|
+
else elm.textContent = instance;
|
|
2944
|
+
}
|
|
2782
2945
|
}
|
|
2783
2946
|
} catch (e) {
|
|
2784
2947
|
consoleError(e, hostRef.$hostElement$);
|
|
@@ -2918,17 +3081,19 @@ const initializeSignals = (elm, hostRef, cmpMeta) => {
|
|
|
2918
3081
|
const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
|
|
2919
3082
|
for (const [memberName, [memberFlags]] of Object.entries(cmpMeta.$members$ ?? {})) {
|
|
2920
3083
|
if (!(memberFlags & MEMBER_FLAGS.PropLike)) continue;
|
|
2921
|
-
const
|
|
3084
|
+
const initialVal = hostRef.$instanceValues$.get(memberName);
|
|
3085
|
+
const sig = signal(initialVal);
|
|
2922
3086
|
hostRef.$signalValues$.set(memberName, sig);
|
|
2923
3087
|
let prevScheduleVal = sig.peek();
|
|
2924
3088
|
disposers.push(effect(() => {
|
|
2925
3089
|
const newVal = sig.value;
|
|
2926
3090
|
if (hostRef.$flags$ & HOST_FLAGS.hasRendered) {
|
|
2927
3091
|
if (instance?.componentShouldUpdate) {
|
|
2928
|
-
|
|
2929
|
-
|
|
2930
|
-
|
|
2931
|
-
|
|
3092
|
+
const changes = hostRef.$queuedPropChanges$ ||= {};
|
|
3093
|
+
changes[memberName] = {
|
|
3094
|
+
newVal,
|
|
3095
|
+
oldVal: changes[memberName]?.oldVal ?? prevScheduleVal
|
|
3096
|
+
};
|
|
2932
3097
|
}
|
|
2933
3098
|
if (!(hostRef.$flags$ & HOST_FLAGS.isQueuedForUpdate)) scheduleUpdate(hostRef, false);
|
|
2934
3099
|
}
|
|
@@ -2963,7 +3128,8 @@ const initializeSignals = (elm, hostRef, cmpMeta) => {
|
|
|
2963
3128
|
consoleError(e, elm);
|
|
2964
3129
|
}
|
|
2965
3130
|
}));
|
|
2966
|
-
|
|
3131
|
+
const publicSignals = new Map([...hostRef.$signalValues$].filter(([k]) => (cmpMeta.$members$?.[k]?.[0] ?? 0) & MEMBER_FLAGS.Prop));
|
|
3132
|
+
elm[STENCIL_SIGNALS_SYMBOL] = publicSignals;
|
|
2967
3133
|
hostRef.$signalCleanup$ = () => {
|
|
2968
3134
|
disposers.forEach((d) => d());
|
|
2969
3135
|
elm[STENCIL_SIGNALS_SYMBOL] = void 0;
|
|
@@ -3012,24 +3178,30 @@ const h = (nodeName, vnodeData, ...children) => {
|
|
|
3012
3178
|
for (let i = 0; i < c.length; i++) {
|
|
3013
3179
|
child = c[i];
|
|
3014
3180
|
if (Array.isArray(child)) walk(child);
|
|
3015
|
-
else if (child != null && typeof child !== "boolean")
|
|
3016
|
-
|
|
3017
|
-
|
|
3018
|
-
|
|
3019
|
-
|
|
3020
|
-
|
|
3021
|
-
|
|
3022
|
-
|
|
3023
|
-
|
|
3024
|
-
|
|
3025
|
-
|
|
3026
|
-
|
|
3027
|
-
|
|
3181
|
+
else if (child != null && typeof child !== "boolean") {
|
|
3182
|
+
if (BUILD.vdomSignals && isSignalLike(child)) {
|
|
3183
|
+
const sigVNode = newVNode(null, String(child.peek()));
|
|
3184
|
+
sigVNode.$signal$ = child;
|
|
3185
|
+
vNodeChildren.push(sigVNode);
|
|
3186
|
+
lastSimple = false;
|
|
3187
|
+
} else {
|
|
3188
|
+
if (simple = typeof nodeName !== "function" && !isComplexType(child)) child = String(child);
|
|
3189
|
+
else if (typeof nodeName !== "function" && child.$flags$ === void 0) {
|
|
3190
|
+
if (BUILD.isDev) consoleDevError(`vNode passed as children has unexpected type.
|
|
3191
|
+
Make sure it's using the correct h() function.
|
|
3192
|
+
Empty objects can also be the cause, look for JSX comments that became objects.`);
|
|
3193
|
+
else consoleError("Invalid vNode child");
|
|
3194
|
+
continue;
|
|
3195
|
+
}
|
|
3196
|
+
if (simple && lastSimple) vNodeChildren[vNodeChildren.length - 1].$text$ += child;
|
|
3197
|
+
else vNodeChildren.push(simple ? newVNode(null, child) : child);
|
|
3198
|
+
lastSimple = simple;
|
|
3199
|
+
}
|
|
3028
3200
|
}
|
|
3029
3201
|
}
|
|
3030
3202
|
};
|
|
3031
3203
|
walk(children);
|
|
3032
|
-
if (vnodeData) {
|
|
3204
|
+
if (vnodeData && typeof vnodeData === "object") {
|
|
3033
3205
|
if (BUILD.isDev && nodeName === "input") validateInputProperties(vnodeData);
|
|
3034
3206
|
if (BUILD.vdomKey && vnodeData.key) key = vnodeData.key;
|
|
3035
3207
|
if (BUILD.slotRelocation && vnodeData.name) slotName = vnodeData.name;
|
|
@@ -3130,7 +3302,7 @@ const convertToPrivate = (node) => {
|
|
|
3130
3302
|
/**
|
|
3131
3303
|
* Validates the ordering of attributes on an input element
|
|
3132
3304
|
*
|
|
3133
|
-
* @param inputElm the element to validate
|
|
3305
|
+
* @param inputElm the vnode data (JSX props) for the element to validate
|
|
3134
3306
|
*/
|
|
3135
3307
|
const validateInputProperties = (inputElm) => {
|
|
3136
3308
|
const props = Object.keys(inputElm);
|
|
@@ -4009,14 +4181,15 @@ const parsePropertyValue = (propValue, propType, isFormAssociated) => {
|
|
|
4009
4181
|
/**
|
|
4010
4182
|
* ensure this value is of the correct prop type
|
|
4011
4183
|
*/
|
|
4012
|
-
if (BUILD.propBoolean && propType & MEMBER_FLAGS.Boolean)
|
|
4013
|
-
|
|
4014
|
-
|
|
4015
|
-
|
|
4016
|
-
|
|
4017
|
-
|
|
4018
|
-
|
|
4019
|
-
|
|
4184
|
+
if (BUILD.propBoolean && propType & MEMBER_FLAGS.Boolean) {
|
|
4185
|
+
/**
|
|
4186
|
+
* For form-associated components, according to HTML spec, the presence of any boolean attribute
|
|
4187
|
+
* (regardless of its value, even "false") should make the property true.
|
|
4188
|
+
* For non-form-associated components, we maintain the legacy behavior where "false" becomes false.
|
|
4189
|
+
*/
|
|
4190
|
+
if (BUILD.formAssociated && isFormAssociated && typeof propValue === "string") return propValue === "" || !!propValue;
|
|
4191
|
+
else return propValue === "false" ? false : propValue === "" || !!propValue;
|
|
4192
|
+
}
|
|
4020
4193
|
/**
|
|
4021
4194
|
* force it to be a number
|
|
4022
4195
|
*/
|
|
@@ -4104,7 +4277,11 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
|
|
|
4104
4277
|
}
|
|
4105
4278
|
if (BUILD.updatable && flags & HOST_FLAGS.hasRendered) {
|
|
4106
4279
|
if (instance.componentShouldUpdate) {
|
|
4107
|
-
|
|
4280
|
+
const changes = hostRef.$queuedPropChanges$ ||= {};
|
|
4281
|
+
changes[propName] = {
|
|
4282
|
+
newVal,
|
|
4283
|
+
oldVal: changes[propName]?.oldVal ?? oldVal
|
|
4284
|
+
};
|
|
4108
4285
|
}
|
|
4109
4286
|
if (!(flags & HOST_FLAGS.isQueuedForUpdate)) scheduleUpdate(hostRef, false);
|
|
4110
4287
|
}
|
|
@@ -4238,11 +4415,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
4238
4415
|
};
|
|
4239
4416
|
for (const deserializer of cmpMeta.$deserializers$[propName]) {
|
|
4240
4417
|
const [[methodName]] = Object.entries(deserializer);
|
|
4241
|
-
if (BUILD.lazyLoad)
|
|
4242
|
-
|
|
4243
|
-
|
|
4244
|
-
|
|
4245
|
-
|
|
4418
|
+
if (BUILD.lazyLoad) {
|
|
4419
|
+
if (hostRef.$lazyInstance$) setVal(methodName, hostRef.$lazyInstance$);
|
|
4420
|
+
else hostRef.$fetchedCbList$.push(() => {
|
|
4421
|
+
setVal(methodName, hostRef.$lazyInstance$);
|
|
4422
|
+
});
|
|
4423
|
+
} else setVal(methodName, this);
|
|
4246
4424
|
}
|
|
4247
4425
|
return;
|
|
4248
4426
|
} else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && this[propName] == newValue) return;
|
|
@@ -4266,7 +4444,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
4266
4444
|
if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) this[propName] = newValue;
|
|
4267
4445
|
});
|
|
4268
4446
|
};
|
|
4269
|
-
Cstr.observedAttributes = Array.from(new Set([...Object.keys(cmpMeta.$watchers$ ?? {}), ...members.filter(([_, m]) => m[0] & MEMBER_FLAGS.HasAttribute).map(([propName, m]) => {
|
|
4447
|
+
Cstr.observedAttributes = Array.from(/* @__PURE__ */ new Set([...Object.keys(cmpMeta.$watchers$ ?? {}), ...members.filter(([_, m]) => m[0] & MEMBER_FLAGS.HasAttribute).map(([propName, m]) => {
|
|
4270
4448
|
const attrName = m[1] || propName;
|
|
4271
4449
|
attrNameToPropName.set(attrName, propName);
|
|
4272
4450
|
if (BUILD.reflect && m[0] & MEMBER_FLAGS.ReflectAttr) cmpMeta.$attrsToReflect$?.push([propName, attrName]);
|
|
@@ -4293,6 +4471,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
|
|
|
4293
4471
|
try {
|
|
4294
4472
|
if ((hostRef.$flags$ & HOST_FLAGS.hasInitializedComponent) === 0) {
|
|
4295
4473
|
hostRef.$flags$ |= HOST_FLAGS.hasInitializedComponent;
|
|
4474
|
+
hostRef.$flags$ &= ~HOST_FLAGS.hasFailedLoad;
|
|
4296
4475
|
const bundleId = cmpMeta.$lazyBundleId$;
|
|
4297
4476
|
if (BUILD.lazyLoad && bundleId) {
|
|
4298
4477
|
const CstrImport = loadModule(cmpMeta, hostRef, hmrVersionId);
|
|
@@ -4301,7 +4480,12 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
|
|
|
4301
4480
|
Cstr = await CstrImport;
|
|
4302
4481
|
endLoad();
|
|
4303
4482
|
} else Cstr = CstrImport;
|
|
4304
|
-
if (!Cstr)
|
|
4483
|
+
if (!Cstr) {
|
|
4484
|
+
hostRef.$flags$ &= ~HOST_FLAGS.hasInitializedComponent;
|
|
4485
|
+
hostRef.$loadRetryCount$ = (hostRef.$loadRetryCount$ ?? 0) + 1;
|
|
4486
|
+
if (hostRef.$loadRetryCount$ < 3) hostRef.$flags$ |= HOST_FLAGS.hasFailedLoad;
|
|
4487
|
+
throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
|
|
4488
|
+
}
|
|
4305
4489
|
if (BUILD.member && !Cstr.isProxied) {
|
|
4306
4490
|
if (BUILD.propChangeCallback) {
|
|
4307
4491
|
cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
|
|
@@ -4320,8 +4504,14 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
|
|
|
4320
4504
|
}
|
|
4321
4505
|
if (BUILD.member) hostRef.$flags$ &= ~HOST_FLAGS.isConstructingInstance;
|
|
4322
4506
|
endNewInstance();
|
|
4323
|
-
if (
|
|
4324
|
-
|
|
4507
|
+
if (BUILD.asyncLoading && hostRef.$ancestorComponent$) await awaitAncestorConnected(hostRef.$ancestorComponent$);
|
|
4508
|
+
if (!(BUILD.slotRelocation && cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation)) {
|
|
4509
|
+
fireConnectedCallback(hostRef.$lazyInstance$, elm);
|
|
4510
|
+
if (BUILD.asyncLoading) markFirstConnected(hostRef);
|
|
4511
|
+
} else queueMicrotask(() => {
|
|
4512
|
+
fireConnectedCallback(hostRef.$lazyInstance$, elm);
|
|
4513
|
+
if (BUILD.asyncLoading) markFirstConnected(hostRef);
|
|
4514
|
+
});
|
|
4325
4515
|
} else Cstr = elm.constructor;
|
|
4326
4516
|
if (BUILD.style && Cstr && Cstr.style) {
|
|
4327
4517
|
/**
|
|
@@ -4380,7 +4570,8 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
|
|
|
4380
4570
|
hostRef.$onRenderResolve$();
|
|
4381
4571
|
hostRef.$onRenderResolve$ = void 0;
|
|
4382
4572
|
}
|
|
4383
|
-
if (BUILD.asyncLoading
|
|
4573
|
+
if (BUILD.asyncLoading) markFirstConnected(hostRef);
|
|
4574
|
+
if (BUILD.asyncLoading && hostRef.$onReadyResolve$ && !(hostRef.$flags$ & HOST_FLAGS.hasFailedLoad)) hostRef.$onReadyResolve$(elm);
|
|
4384
4575
|
}
|
|
4385
4576
|
};
|
|
4386
4577
|
const fireConnectedCallback = (instance, elm) => {
|
|
@@ -4443,6 +4634,7 @@ const connectedCallback = (elm) => {
|
|
|
4443
4634
|
} else {
|
|
4444
4635
|
addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
|
|
4445
4636
|
if (hostRef?.$lazyInstance$) fireConnectedCallback(hostRef.$lazyInstance$, elm);
|
|
4637
|
+
else if (hostRef.$flags$ & HOST_FLAGS.hasFailedLoad) setTimeout(() => initializeComponent(elm, hostRef, cmpMeta), LAZY_LOAD_RETRY_INTERVAL_MS);
|
|
4446
4638
|
else if (hostRef?.$onReadyPromise$) hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$, elm));
|
|
4447
4639
|
}
|
|
4448
4640
|
endConnected();
|
|
@@ -4472,6 +4664,7 @@ const disconnectedCallback = async (elm) => {
|
|
|
4472
4664
|
hostRef.$signalCleanup$();
|
|
4473
4665
|
hostRef.$signalCleanup$ = void 0;
|
|
4474
4666
|
}
|
|
4667
|
+
if (BUILD.asyncLoading && hostRef && !(hostRef.$flags$ & HOST_FLAGS.hasFiredConnected)) markFirstConnected(hostRef);
|
|
4475
4668
|
if (!BUILD.lazyLoad) disconnectInstance(elm);
|
|
4476
4669
|
else if (hostRef?.$lazyInstance$) disconnectInstance(hostRef.$lazyInstance$, elm);
|
|
4477
4670
|
else if (hostRef?.$onReadyPromise$) hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$, elm));
|
|
@@ -4519,7 +4712,6 @@ const hmrStart = (hostElement, cmpMeta, hmrVersionId) => {
|
|
|
4519
4712
|
};
|
|
4520
4713
|
const hmrStandalone = async (hostElement, cmpMeta, hmrVersionId) => {
|
|
4521
4714
|
const modulePath = hostElement.constructor.__stencil_module__;
|
|
4522
|
-
console.log(`[Stencil HMR] hmrStandalone <${cmpMeta.$tagName$}> modulePath:`, modulePath);
|
|
4523
4715
|
if (!modulePath) {
|
|
4524
4716
|
console.warn(`[Stencil HMR] No __stencil_module__ on <${cmpMeta.$tagName$}> constructor - was this built with devMode?`);
|
|
4525
4717
|
return;
|
|
@@ -4532,18 +4724,39 @@ const hmrStandalone = async (hostElement, cmpMeta, hmrVersionId) => {
|
|
|
4532
4724
|
const NewClass = Object.values(newModule).find((v) => typeof v === "function" && v.is === cmpMeta.$tagName$) ?? newModule.default;
|
|
4533
4725
|
if (!NewClass) return;
|
|
4534
4726
|
const ctor = customElements.get(cmpMeta.$tagName$);
|
|
4535
|
-
if (ctor)
|
|
4536
|
-
|
|
4537
|
-
|
|
4727
|
+
if (ctor) {
|
|
4728
|
+
for (const key of Object.getOwnPropertyNames(NewClass.prototype)) {
|
|
4729
|
+
if (key === "constructor") continue;
|
|
4730
|
+
Object.defineProperty(ctor.prototype, key, Object.getOwnPropertyDescriptor(NewClass.prototype, key));
|
|
4731
|
+
}
|
|
4732
|
+
const styleDesc = Object.getOwnPropertyDescriptor(NewClass, "style");
|
|
4733
|
+
if (styleDesc) {
|
|
4734
|
+
Object.defineProperty(ctor, "style", styleDesc);
|
|
4735
|
+
const newStyle = NewClass.style;
|
|
4736
|
+
if (newStyle) {
|
|
4737
|
+
const scopeId = getScopeId(cmpMeta);
|
|
4738
|
+
const isShadow = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation);
|
|
4739
|
+
console.log("[stencil-hmr] registerStyle", {
|
|
4740
|
+
tag: cmpMeta.$tagName$,
|
|
4741
|
+
scopeId,
|
|
4742
|
+
isShadow,
|
|
4743
|
+
cssLen: newStyle.length
|
|
4744
|
+
});
|
|
4745
|
+
registerStyle(scopeId, newStyle, isShadow);
|
|
4746
|
+
}
|
|
4747
|
+
}
|
|
4538
4748
|
}
|
|
4749
|
+
const isShadow = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation);
|
|
4539
4750
|
document.querySelectorAll(cmpMeta.$tagName$).forEach((el) => {
|
|
4540
|
-
|
|
4541
|
-
|
|
4542
|
-
|
|
4543
|
-
|
|
4544
|
-
|
|
4545
|
-
|
|
4546
|
-
|
|
4751
|
+
const hostRef = getHostRef(el);
|
|
4752
|
+
if (BUILD.hostListener && hostRef?.$rmListeners$) {
|
|
4753
|
+
hostRef.$rmListeners$.map((rmListener) => rmListener());
|
|
4754
|
+
hostRef.$rmListeners$ = void 0;
|
|
4755
|
+
addHostEventListeners(el, hostRef, cmpMeta.$listeners$);
|
|
4756
|
+
}
|
|
4757
|
+
if (!isShadow && hostRef) {
|
|
4758
|
+
console.log("[stencil-hmr] calling attachStyles for", cmpMeta.$tagName$);
|
|
4759
|
+
attachStyles(hostRef);
|
|
4547
4760
|
}
|
|
4548
4761
|
forceUpdate(el);
|
|
4549
4762
|
});
|
|
@@ -4554,7 +4767,9 @@ const hmrStandalone = async (hostElement, cmpMeta, hmrVersionId) => {
|
|
|
4554
4767
|
//#endregion
|
|
4555
4768
|
//#region src/runtime/bootstrap-standalone.ts
|
|
4556
4769
|
const defineCustomElement = (Cstr, compactMeta) => {
|
|
4557
|
-
|
|
4770
|
+
const tag = transformTag(compactMeta[1]);
|
|
4771
|
+
const proxied = proxyCustomElement(Cstr, compactMeta);
|
|
4772
|
+
if (!customElements.get(tag)) customElements.define(tag, proxied);
|
|
4558
4773
|
};
|
|
4559
4774
|
const proxyCustomElement = (Cstr, compactMeta) => {
|
|
4560
4775
|
if (BUILD.profile && performance.mark && performance.getEntriesByName("st:app:start", "mark").length === 0) performance.mark("st:app:start");
|
|
@@ -4575,18 +4790,20 @@ const proxyCustomElement = (Cstr, compactMeta) => {
|
|
|
4575
4790
|
hmrStart(this, cmpMeta, hmrVersionId);
|
|
4576
4791
|
};
|
|
4577
4792
|
if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && (BUILD.slotCloneNode || BUILD.patchClone && cmpMeta.$flags$ & CMP_FLAGS.patchClone)) patchCloneNode(Cstr.prototype);
|
|
4578
|
-
if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot)
|
|
4579
|
-
|
|
4580
|
-
|
|
4581
|
-
|
|
4582
|
-
|
|
4583
|
-
|
|
4584
|
-
|
|
4585
|
-
|
|
4586
|
-
|
|
4587
|
-
|
|
4793
|
+
if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) {
|
|
4794
|
+
if (BUILD.lightDomPatches || BUILD.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(Cstr.prototype);
|
|
4795
|
+
else {
|
|
4796
|
+
if (BUILD.slotChildNodes || BUILD.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(Cstr.prototype);
|
|
4797
|
+
if (BUILD.slotDomMutations || BUILD.patchInsert && cmpMeta.$flags$ & CMP_FLAGS.patchInsert) {
|
|
4798
|
+
patchSlotAppendChild(Cstr.prototype);
|
|
4799
|
+
patchSlotAppend(Cstr.prototype);
|
|
4800
|
+
patchSlotPrepend(Cstr.prototype);
|
|
4801
|
+
patchSlotInsertAdjacentHTML(Cstr.prototype);
|
|
4802
|
+
patchInsertBefore(Cstr.prototype);
|
|
4803
|
+
patchSlotRemoveChild(Cstr.prototype);
|
|
4804
|
+
}
|
|
4805
|
+
if (BUILD.slotTextContent) patchTextContent(Cstr.prototype);
|
|
4588
4806
|
}
|
|
4589
|
-
if (BUILD.slotTextContent) patchTextContent(Cstr.prototype);
|
|
4590
4807
|
}
|
|
4591
4808
|
if (BUILD.hydrateClientSide && BUILD.shadowDom) hydrateScopedToShadow();
|
|
4592
4809
|
const originalConnectedCallback = Cstr.prototype.connectedCallback;
|
|
@@ -4599,19 +4816,26 @@ const proxyCustomElement = (Cstr, compactMeta) => {
|
|
|
4599
4816
|
componentOnReady() {
|
|
4600
4817
|
return getHostRef(this)?.$onReadyPromise$;
|
|
4601
4818
|
},
|
|
4602
|
-
connectedCallback() {
|
|
4603
|
-
|
|
4604
|
-
|
|
4819
|
+
async connectedCallback() {
|
|
4820
|
+
const isFirstConnect = !this.__hasHostListenerAttached;
|
|
4821
|
+
let hostRef;
|
|
4822
|
+
if (isFirstConnect) {
|
|
4823
|
+
hostRef = getHostRef(this);
|
|
4605
4824
|
if (!hostRef) return;
|
|
4606
4825
|
addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
|
|
4607
4826
|
this.__hasHostListenerAttached = true;
|
|
4608
4827
|
}
|
|
4609
4828
|
connectedCallback(this);
|
|
4610
|
-
if (
|
|
4829
|
+
if (BUILD.asyncLoading && hostRef && hostRef.$ancestorComponent$) {
|
|
4830
|
+
await awaitAncestorConnected(hostRef.$ancestorComponent$);
|
|
4831
|
+
if (!this.isConnected) return;
|
|
4832
|
+
}
|
|
4833
|
+
if (originalConnectedCallback && (plt.$flags$ & PLATFORM_FLAGS.isTmpDisconnected) === 0) originalConnectedCallback.call(this);
|
|
4834
|
+
if (BUILD.asyncLoading && hostRef) markFirstConnected(hostRef);
|
|
4611
4835
|
},
|
|
4612
4836
|
disconnectedCallback() {
|
|
4613
4837
|
disconnectedCallback(this);
|
|
4614
|
-
if (originalDisconnectedCallback) originalDisconnectedCallback.call(this);
|
|
4838
|
+
if (originalDisconnectedCallback && (plt.$flags$ & PLATFORM_FLAGS.isTmpDisconnected) === 0) originalDisconnectedCallback.call(this);
|
|
4615
4839
|
},
|
|
4616
4840
|
__attachShadow() {
|
|
4617
4841
|
const isClosed = BUILD.shadowModeClosed && !!(cmpMeta.$flags$ & CMP_FLAGS.shadowModeClosed);
|
|
@@ -4665,8 +4889,8 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
4665
4889
|
const exclude = options.exclude || [];
|
|
4666
4890
|
const _reg = options.registry ?? getRegistry();
|
|
4667
4891
|
const head = win.document.head;
|
|
4668
|
-
const metaCharset =
|
|
4669
|
-
const dataStyles =
|
|
4892
|
+
const metaCharset = /*@__PURE__*/ head.querySelector("meta[charset]");
|
|
4893
|
+
const dataStyles = /*@__PURE__*/ win.document.createElement("style");
|
|
4670
4894
|
const deferredConnectedCallbacks = [];
|
|
4671
4895
|
let appLoadFallback;
|
|
4672
4896
|
let isBootstrapping = true;
|
|
@@ -4734,8 +4958,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
4734
4958
|
*
|
|
4735
4959
|
* Also remove the reference from `deferredConnectedCallbacks` array
|
|
4736
4960
|
* otherwise removed instances won't get garbage collected.
|
|
4961
|
+
*
|
|
4962
|
+
* Use `nextTick` (microtask) rather than `plt.raf` since
|
|
4963
|
+
* `requestAnimationFrame` callbacks do not fire while `document.hidden`
|
|
4737
4964
|
*/
|
|
4738
|
-
|
|
4965
|
+
nextTick(() => {
|
|
4739
4966
|
const hostRef = getHostRef(this);
|
|
4740
4967
|
if (!hostRef) return;
|
|
4741
4968
|
const i = deferredConnectedCallbacks.findIndex((host) => host === this);
|
|
@@ -4748,18 +4975,20 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
4748
4975
|
}
|
|
4749
4976
|
};
|
|
4750
4977
|
if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && (BUILD.slotCloneNode || BUILD.patchClone && cmpMeta.$flags$ & CMP_FLAGS.patchClone)) patchCloneNode(HostElement.prototype);
|
|
4751
|
-
if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot)
|
|
4752
|
-
|
|
4753
|
-
|
|
4754
|
-
|
|
4755
|
-
|
|
4756
|
-
|
|
4757
|
-
|
|
4758
|
-
|
|
4759
|
-
|
|
4760
|
-
|
|
4978
|
+
if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) {
|
|
4979
|
+
if (BUILD.lightDomPatches || BUILD.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(HostElement.prototype);
|
|
4980
|
+
else {
|
|
4981
|
+
if (BUILD.slotChildNodes || BUILD.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(HostElement.prototype);
|
|
4982
|
+
if (BUILD.slotDomMutations || BUILD.patchInsert && cmpMeta.$flags$ & CMP_FLAGS.patchInsert) {
|
|
4983
|
+
patchSlotAppendChild(HostElement.prototype);
|
|
4984
|
+
patchSlotAppend(HostElement.prototype);
|
|
4985
|
+
patchSlotPrepend(HostElement.prototype);
|
|
4986
|
+
patchSlotInsertAdjacentHTML(HostElement.prototype);
|
|
4987
|
+
patchInsertBefore(HostElement.prototype);
|
|
4988
|
+
patchSlotRemoveChild(HostElement.prototype);
|
|
4989
|
+
}
|
|
4990
|
+
if (BUILD.slotTextContent) patchTextContent(HostElement.prototype);
|
|
4761
4991
|
}
|
|
4762
|
-
if (BUILD.slotTextContent) patchTextContent(HostElement.prototype);
|
|
4763
4992
|
}
|
|
4764
4993
|
if (BUILD.formAssociated && cmpMeta.$flags$ & CMP_FLAGS.formAssociated) HostElement.formAssociated = true;
|
|
4765
4994
|
if (BUILD.hotModuleReplacement) HostElement.prototype["s-hmr"] = function(hmrVersionId) {
|
|
@@ -4805,9 +5034,10 @@ const addHostEventListeners = (elm, hostRef, listeners) => {
|
|
|
4805
5034
|
};
|
|
4806
5035
|
const hostListenerProxy = (hostRef, methodName) => (ev) => {
|
|
4807
5036
|
try {
|
|
4808
|
-
if (BUILD.lazyLoad)
|
|
4809
|
-
|
|
4810
|
-
|
|
5037
|
+
if (BUILD.lazyLoad) {
|
|
5038
|
+
if (hostRef.$flags$ & HOST_FLAGS.isListenReady) hostRef.$lazyInstance$?.[methodName](ev);
|
|
5039
|
+
else (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
|
|
5040
|
+
} else hostRef.$hostElement$[methodName](ev);
|
|
4811
5041
|
} catch (e) {
|
|
4812
5042
|
consoleError(e, hostRef.$hostElement$);
|
|
4813
5043
|
}
|
|
@@ -4841,6 +5071,73 @@ const setNonce = (nonce) => plt.$nonce$ = nonce;
|
|
|
4841
5071
|
//#region src/runtime/platform-options.ts
|
|
4842
5072
|
const setPlatformOptions = (opts) => Object.assign(plt, opts);
|
|
4843
5073
|
//#endregion
|
|
5074
|
+
//#region src/runtime/reactive-controller.ts
|
|
5075
|
+
const ReactiveControllerHost = (Base) => class ReactiveControllerHostMixin extends Base {
|
|
5076
|
+
controllers = /* @__PURE__ */ new Set();
|
|
5077
|
+
#connected = false;
|
|
5078
|
+
#updateCompleteResolvers = [];
|
|
5079
|
+
addController(controller) {
|
|
5080
|
+
this.controllers.add(controller);
|
|
5081
|
+
if (this.#connected) controller.hostConnected?.();
|
|
5082
|
+
}
|
|
5083
|
+
removeController(controller) {
|
|
5084
|
+
this.controllers.delete(controller);
|
|
5085
|
+
}
|
|
5086
|
+
requestUpdate() {
|
|
5087
|
+
forceUpdate(this);
|
|
5088
|
+
}
|
|
5089
|
+
get updateComplete() {
|
|
5090
|
+
return new Promise((resolve) => this.#updateCompleteResolvers.push(resolve));
|
|
5091
|
+
}
|
|
5092
|
+
connectedCallback() {
|
|
5093
|
+
super.connectedCallback?.();
|
|
5094
|
+
this.#connected = true;
|
|
5095
|
+
const el = getElement(this);
|
|
5096
|
+
if (el && el !== this) {
|
|
5097
|
+
el.addController = (controller) => this.addController(controller);
|
|
5098
|
+
el.removeController = (controller) => this.removeController(controller);
|
|
5099
|
+
el.requestUpdate = () => this.requestUpdate();
|
|
5100
|
+
Object.defineProperty(el, "updateComplete", {
|
|
5101
|
+
configurable: true,
|
|
5102
|
+
get: () => this.updateComplete
|
|
5103
|
+
});
|
|
5104
|
+
}
|
|
5105
|
+
this.controllers.forEach((c) => c.hostConnected?.());
|
|
5106
|
+
}
|
|
5107
|
+
disconnectedCallback() {
|
|
5108
|
+
super.disconnectedCallback?.();
|
|
5109
|
+
this.#connected = false;
|
|
5110
|
+
this.controllers.forEach((c) => c.hostDisconnected?.());
|
|
5111
|
+
}
|
|
5112
|
+
async componentWillLoad() {
|
|
5113
|
+
await super.componentWillLoad?.();
|
|
5114
|
+
await Promise.all([...this.controllers].map((c) => c.hostWillLoad?.()));
|
|
5115
|
+
}
|
|
5116
|
+
componentDidLoad() {
|
|
5117
|
+
super.componentDidLoad?.();
|
|
5118
|
+
this.controllers.forEach((c) => c.hostDidLoad?.());
|
|
5119
|
+
}
|
|
5120
|
+
async componentWillRender() {
|
|
5121
|
+
await super.componentWillRender?.();
|
|
5122
|
+
await Promise.all([...this.controllers].map((c) => c.hostWillRender?.()));
|
|
5123
|
+
}
|
|
5124
|
+
componentDidRender() {
|
|
5125
|
+
super.componentDidRender?.();
|
|
5126
|
+
this.controllers.forEach((c) => c.hostDidRender?.());
|
|
5127
|
+
const resolvers = this.#updateCompleteResolvers;
|
|
5128
|
+
this.#updateCompleteResolvers = [];
|
|
5129
|
+
resolvers.forEach((resolve) => resolve(true));
|
|
5130
|
+
}
|
|
5131
|
+
async componentWillUpdate() {
|
|
5132
|
+
await super.componentWillUpdate?.();
|
|
5133
|
+
await Promise.all([...this.controllers].map((c) => c.hostWillUpdate?.()));
|
|
5134
|
+
}
|
|
5135
|
+
componentDidUpdate() {
|
|
5136
|
+
super.componentDidUpdate?.();
|
|
5137
|
+
this.controllers.forEach((c) => c.hostDidUpdate?.());
|
|
5138
|
+
}
|
|
5139
|
+
};
|
|
5140
|
+
//#endregion
|
|
4844
5141
|
//#region src/runtime/render.ts
|
|
4845
5142
|
/**
|
|
4846
5143
|
* A WeakMap to persist HostRef objects across multiple render() calls to the
|
|
@@ -4927,4 +5224,4 @@ function hasKeys(obj) {
|
|
|
4927
5224
|
return false;
|
|
4928
5225
|
}
|
|
4929
5226
|
//#endregion
|
|
4930
|
-
export { AttachInternals, AttrDeserialize, BUILD, Build, Component, Element$1 as Element, Env, Event, Fragment, H, H as HTMLElement, HYDRATED_STYLE_ID, Host, Listen, Method, Mixin, NAMESPACE, Prop, PropSerialize, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, isMemberInElement, jsx, jsxDEV, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, normalizeWatchers, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, render, resolveVar, setAssetPath, setErrorHandler, setLazyLoadBasePath, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setRegistry, setScopedSsr, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, win, writeTask };
|
|
5227
|
+
export { AttachInternals, AttrDeserialize, BUILD, Build, Component, Element$1 as Element, Env, Event, Fragment, H, H as HTMLElement, HYDRATED_STYLE_ID, Host, Listen, Method, Mixin, NAMESPACE, Prop, PropSerialize, ReactiveControllerHost, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, isMemberInElement, jsx, jsxDEV, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, normalizeWatchers, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, render, resolveVar, setAssetPath, setErrorHandler, setLazyLoadBasePath, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setRegistry, setScopedSsr, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, win, writeTask };
|