@stencil/core 5.0.0-beta.3 → 5.0.0-beta.31
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/app-data/index.d.ts +1 -1
- package/dist/{client-BRu0GtRn.mjs → client-DIvBaMnB.mjs} +182 -70
- package/dist/compiler/browser.d.ts +114 -81
- package/dist/compiler/browser.js +743 -339
- package/dist/compiler/index.d.mts +110 -2
- package/dist/compiler/index.mjs +3 -3
- package/dist/compiler/utils/index.d.mts +1 -1
- package/dist/{compiler-BPgV6bA4.mjs → compiler-BI12oAIV.mjs} +4840 -2899
- package/dist/declarations/stencil-public-compiler.d.ts +152 -129
- package/dist/declarations/stencil-public-docs.d.ts +23 -0
- package/dist/declarations/stencil-public-runtime.d.ts +62 -58
- package/dist/{index-DmHmu3y0.d.mts → index-BGUOG9Wc.d.mts} +6 -2
- package/dist/{index-BopBfjPu.d.mts → index-BogZpjP2.d.mts} +150 -127
- package/dist/{index-BXAcVN2j.d.ts → index-CicD4Pgn.d.ts} +59 -55
- package/dist/index.d.mts +3 -0
- package/dist/index.mjs +1 -1
- package/dist/jsx-runtime.d.mts +6 -0
- package/dist/jsx-runtime.mjs +1 -1
- package/dist/{node-75gQKkFz.mjs → node-D-21Ykxi.mjs} +41 -47
- package/dist/runtime/client/lazy.js +321 -200
- package/dist/runtime/client/runtime.d.ts +73 -66
- package/dist/runtime/client/runtime.js +321 -200
- package/dist/runtime/index.d.ts +4 -5
- package/dist/runtime/index.js +319 -198
- package/dist/runtime/server/index.d.mts +11 -11
- package/dist/runtime/server/index.mjs +371 -239
- package/dist/runtime/server/runner.d.mts +4 -4
- package/dist/runtime/server/runner.mjs +82 -54
- package/dist/signals/index.d.ts +11 -2
- package/dist/signals/index.js +14 -35
- package/dist/sys/node/index.d.mts +1 -1
- package/dist/sys/node/index.mjs +1 -1
- package/dist/sys/node/worker.mjs +2 -2
- package/dist/testing/index.d.mts +136 -120
- package/dist/testing/index.mjs +328 -212
- package/package.json +8 -4
package/dist/runtime/index.js
CHANGED
|
@@ -1,12 +1,89 @@
|
|
|
1
1
|
import { BUILD } from "../app-data/index.js";
|
|
2
2
|
import "../app-globals/index.js";
|
|
3
|
-
import
|
|
3
|
+
import * as SignalsCore from "@preact/signals-core";
|
|
4
|
+
//#region src/runtime/runtime-constants.ts
|
|
5
|
+
/**
|
|
6
|
+
* Bit flags for recording various properties of VDom nodes
|
|
7
|
+
*/
|
|
8
|
+
const VNODE_FLAGS = {
|
|
9
|
+
/**
|
|
10
|
+
* Whether or not a vdom node is a slot reference
|
|
11
|
+
*/
|
|
12
|
+
isSlotReference: 1,
|
|
13
|
+
/**
|
|
14
|
+
* Whether or not a slot element has fallback content
|
|
15
|
+
*/
|
|
16
|
+
isSlotFallback: 2,
|
|
17
|
+
/**
|
|
18
|
+
* Whether or not an element is a host element
|
|
19
|
+
*/
|
|
20
|
+
isHost: 4
|
|
21
|
+
};
|
|
22
|
+
const PROXY_FLAGS = {
|
|
23
|
+
isElementConstructor: 1,
|
|
24
|
+
proxyState: 2
|
|
25
|
+
};
|
|
26
|
+
const PLATFORM_FLAGS = {
|
|
27
|
+
/**
|
|
28
|
+
* designates a node in the DOM as being actively moved by the runtime
|
|
29
|
+
*/
|
|
30
|
+
isTmpDisconnected: 1,
|
|
31
|
+
appLoaded: 2,
|
|
32
|
+
queueSync: 4,
|
|
33
|
+
queueMask: 6
|
|
34
|
+
};
|
|
35
|
+
/**
|
|
36
|
+
* A (subset) of node types which are relevant for the Stencil runtime. These
|
|
37
|
+
* values are based on the values which can possibly be returned by the
|
|
38
|
+
* `.nodeType` property of a DOM node. See here for details:
|
|
39
|
+
*
|
|
40
|
+
* {@link https://dom.spec.whatwg.org/#ref-for-dom-node-nodetype%E2%91%A0}
|
|
41
|
+
*/
|
|
42
|
+
const NODE_TYPE = {
|
|
43
|
+
ElementNode: 1,
|
|
44
|
+
TextNode: 3,
|
|
45
|
+
CommentNode: 8,
|
|
46
|
+
DocumentNode: 9,
|
|
47
|
+
DocumentTypeNode: 10,
|
|
48
|
+
DocumentFragment: 11
|
|
49
|
+
};
|
|
50
|
+
const HYDRATE_ID = "s-id";
|
|
51
|
+
const HYDRATED_STYLE_ID = "sty-id";
|
|
52
|
+
const HYDRATE_CHILD_ID = "c-id";
|
|
53
|
+
const HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
|
|
54
|
+
/**
|
|
55
|
+
* Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
|
|
56
|
+
*
|
|
57
|
+
* Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
|
|
58
|
+
* support as of Stencil v4.
|
|
59
|
+
*/
|
|
60
|
+
const SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
|
|
61
|
+
const XLINK_NS = "http://www.w3.org/1999/xlink";
|
|
62
|
+
/**
|
|
63
|
+
* Minimum delay, in milliseconds, before retrying a failed lazy component load.
|
|
64
|
+
*/
|
|
65
|
+
const LAZY_LOAD_RETRY_INTERVAL_MS = 1e3;
|
|
66
|
+
const FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
|
|
67
|
+
"formAssociatedCallback",
|
|
68
|
+
"formResetCallback",
|
|
69
|
+
"formDisabledCallback",
|
|
70
|
+
"formStateRestoreCallback"
|
|
71
|
+
];
|
|
72
|
+
//#endregion
|
|
4
73
|
//#region src/client/client-build.ts
|
|
74
|
+
/**
|
|
75
|
+
* `isDev` / `isTesting` are getters, not copies: the transpile path (e.g. `@stencil/unplugin`)
|
|
76
|
+
* sets `BUILD.*` overrides from each component module, which runs after this module is evaluated.
|
|
77
|
+
*/
|
|
5
78
|
const Build = {
|
|
6
|
-
isDev: BUILD.isDev,
|
|
7
79
|
isBrowser: true,
|
|
8
80
|
isServer: false,
|
|
9
|
-
|
|
81
|
+
get isDev() {
|
|
82
|
+
return BUILD.isDev;
|
|
83
|
+
},
|
|
84
|
+
get isTesting() {
|
|
85
|
+
return BUILD.isTesting;
|
|
86
|
+
}
|
|
10
87
|
};
|
|
11
88
|
const MEMBER_FLAGS = {
|
|
12
89
|
String: 1,
|
|
@@ -371,78 +448,9 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
371
448
|
//#endregion
|
|
372
449
|
//#region src/client/client-style.ts
|
|
373
450
|
const styles = /*@__PURE__*/ new Map();
|
|
374
|
-
const
|
|
451
|
+
const modeResolver = [];
|
|
375
452
|
const needsScopedSSR = () => false;
|
|
376
453
|
//#endregion
|
|
377
|
-
//#region src/runtime/runtime-constants.ts
|
|
378
|
-
/**
|
|
379
|
-
* Bit flags for recording various properties of VDom nodes
|
|
380
|
-
*/
|
|
381
|
-
const VNODE_FLAGS = {
|
|
382
|
-
/**
|
|
383
|
-
* Whether or not a vdom node is a slot reference
|
|
384
|
-
*/
|
|
385
|
-
isSlotReference: 1,
|
|
386
|
-
/**
|
|
387
|
-
* Whether or not a slot element has fallback content
|
|
388
|
-
*/
|
|
389
|
-
isSlotFallback: 2,
|
|
390
|
-
/**
|
|
391
|
-
* Whether or not an element is a host element
|
|
392
|
-
*/
|
|
393
|
-
isHost: 4
|
|
394
|
-
};
|
|
395
|
-
const PROXY_FLAGS = {
|
|
396
|
-
isElementConstructor: 1,
|
|
397
|
-
proxyState: 2
|
|
398
|
-
};
|
|
399
|
-
const PLATFORM_FLAGS = {
|
|
400
|
-
/**
|
|
401
|
-
* designates a node in the DOM as being actively moved by the runtime
|
|
402
|
-
*/
|
|
403
|
-
isTmpDisconnected: 1,
|
|
404
|
-
appLoaded: 2,
|
|
405
|
-
queueSync: 4,
|
|
406
|
-
queueMask: 6
|
|
407
|
-
};
|
|
408
|
-
/**
|
|
409
|
-
* A (subset) of node types which are relevant for the Stencil runtime. These
|
|
410
|
-
* values are based on the values which can possibly be returned by the
|
|
411
|
-
* `.nodeType` property of a DOM node. See here for details:
|
|
412
|
-
*
|
|
413
|
-
* {@link https://dom.spec.whatwg.org/#ref-for-dom-node-nodetype%E2%91%A0}
|
|
414
|
-
*/
|
|
415
|
-
const NODE_TYPE = {
|
|
416
|
-
ElementNode: 1,
|
|
417
|
-
TextNode: 3,
|
|
418
|
-
CommentNode: 8,
|
|
419
|
-
DocumentNode: 9,
|
|
420
|
-
DocumentTypeNode: 10,
|
|
421
|
-
DocumentFragment: 11
|
|
422
|
-
};
|
|
423
|
-
const HYDRATE_ID = "s-id";
|
|
424
|
-
const HYDRATED_STYLE_ID = "sty-id";
|
|
425
|
-
const HYDRATE_CHILD_ID = "c-id";
|
|
426
|
-
const HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
|
|
427
|
-
/**
|
|
428
|
-
* Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
|
|
429
|
-
*
|
|
430
|
-
* Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
|
|
431
|
-
* support as of Stencil v4.
|
|
432
|
-
*/
|
|
433
|
-
const SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
|
|
434
|
-
const XLINK_NS = "http://www.w3.org/1999/xlink";
|
|
435
|
-
/**
|
|
436
|
-
* Minimum delay, in milliseconds, before retrying a failed lazy component load.
|
|
437
|
-
*/
|
|
438
|
-
const LAZY_LOAD_RETRY_INTERVAL_MS = 1e3;
|
|
439
|
-
const FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
|
|
440
|
-
"formAssociatedCallback",
|
|
441
|
-
"formResetCallback",
|
|
442
|
-
"formDisabledCallback",
|
|
443
|
-
"formStateRestoreCallback"
|
|
444
|
-
];
|
|
445
|
-
//#endregion
|
|
446
454
|
//#region src/client/client-window.ts
|
|
447
455
|
const win = typeof window !== "undefined" ? window : {};
|
|
448
456
|
win.HTMLElement;
|
|
@@ -480,7 +488,7 @@ let queuePending = false;
|
|
|
480
488
|
const queueDomReads = [];
|
|
481
489
|
const queueDomWrites = [];
|
|
482
490
|
const queueDomWritesLow = [];
|
|
483
|
-
const scheduleFlush = () => win.document?.hidden ?
|
|
491
|
+
const scheduleFlush = () => win.document?.hidden ? setTimeout(flush, 16) : plt.raf(flush);
|
|
484
492
|
const queueTask = (queue, write) => (cb) => {
|
|
485
493
|
queue.push(cb);
|
|
486
494
|
if (!queuePending) {
|
|
@@ -836,6 +844,7 @@ const patchSlotAppendChild = (HostElementPrototype) => {
|
|
|
836
844
|
const { slotName, slotNode } = findSlotFromSlottedNode(newChild, this);
|
|
837
845
|
if (slotNode) {
|
|
838
846
|
addSlotRelocateNode(newChild, slotNode);
|
|
847
|
+
patchSlottedNode(newChild);
|
|
839
848
|
const slotChildNodes = getSlotChildSiblings(slotNode, slotName);
|
|
840
849
|
const appendAfter = slotChildNodes[slotChildNodes.length - 1];
|
|
841
850
|
const insertedNode = internalCall(internalCall(appendAfter, "parentNode"), "insertBefore")(newChild, appendAfter.nextSibling);
|
|
@@ -858,8 +867,10 @@ const patchSlotRemoveChild = (ElementPrototype) => {
|
|
|
858
867
|
ElementPrototype.__removeChild = ElementPrototype.removeChild;
|
|
859
868
|
ElementPrototype.removeChild = function(toRemove) {
|
|
860
869
|
if (toRemove && typeof toRemove["s-sn"] !== "undefined") {
|
|
861
|
-
|
|
862
|
-
|
|
870
|
+
const slotNode = getHostSlotNodes(this.__childNodes || this.childNodes, this.tagName, toRemove["s-sn"]);
|
|
871
|
+
if (slotNode && toRemove.isConnected) {
|
|
872
|
+
removeSlottedNode(toRemove);
|
|
873
|
+
if (slotNode[0]) dispatchSlotChangeEvent(slotNode[0]);
|
|
863
874
|
updateFallbackSlotVisibility(this);
|
|
864
875
|
return;
|
|
865
876
|
}
|
|
@@ -882,6 +893,7 @@ const patchSlotPrepend = (HostElementPrototype) => {
|
|
|
882
893
|
const slotNode = getHostSlotNodes(internalCall(this, "childNodes"), this.tagName, slotName)[0];
|
|
883
894
|
if (slotNode) {
|
|
884
895
|
addSlotRelocateNode(newChild, slotNode, true);
|
|
896
|
+
patchSlottedNode(newChild);
|
|
885
897
|
const appendAfter = getSlotChildSiblings(slotNode, slotName)[0];
|
|
886
898
|
const toReturn = internalCall(internalCall(appendAfter, "parentNode"), "insertBefore")(newChild, internalCall(appendAfter, "nextSibling"));
|
|
887
899
|
dispatchSlotChangeEvent(slotNode);
|
|
@@ -957,6 +969,7 @@ const patchInsertBefore = (HostElementPrototype) => {
|
|
|
957
969
|
}
|
|
958
970
|
if (slotName === currentChild["s-sn"]) {
|
|
959
971
|
addSlotRelocateNode(newChild, slotNode);
|
|
972
|
+
patchSlottedNode(newChild);
|
|
960
973
|
internalCall(internalCall(currentChild, "parentNode"), "insertBefore")(newChild, currentChild);
|
|
961
974
|
dispatchSlotChangeEvent(slotNode);
|
|
962
975
|
}
|
|
@@ -1035,10 +1048,21 @@ const patchChildSlotNodes = (elm) => {
|
|
|
1035
1048
|
} });
|
|
1036
1049
|
};
|
|
1037
1050
|
/**
|
|
1038
|
-
* Patches
|
|
1039
|
-
*
|
|
1040
|
-
*
|
|
1041
|
-
*
|
|
1051
|
+
* Patches a node slotted into a non-shadow component so it behaves as it would in a native slot:
|
|
1052
|
+
* - `parentNode` returns the host element
|
|
1053
|
+
* - `remove()` fires `slotchange` on the node's slot
|
|
1054
|
+
*
|
|
1055
|
+
* @param node the slotted node to be patched
|
|
1056
|
+
*/
|
|
1057
|
+
const patchSlottedNode = (node) => {
|
|
1058
|
+
patchParentNode(node);
|
|
1059
|
+
patchSlottedRemove(node);
|
|
1060
|
+
};
|
|
1061
|
+
/**
|
|
1062
|
+
* Patches a slotted node from SSR markup: everything {@link patchSlottedNode} does, plus its
|
|
1063
|
+
* sibling accessors, so whilst stepping through a non-shadow element's nodes only the mock
|
|
1064
|
+
* 'lightDOM' nodes are returned. Frameworks hydrating SSR output often reconcile their VDOM with
|
|
1065
|
+
* the real DOM by stepping through nodes with 'nextSibling' et al.
|
|
1042
1066
|
* - `nextSibling`
|
|
1043
1067
|
* - `nextElementSibling`
|
|
1044
1068
|
* - `previousSibling`
|
|
@@ -1046,11 +1070,11 @@ const patchChildSlotNodes = (elm) => {
|
|
|
1046
1070
|
*
|
|
1047
1071
|
* @param node the slotted node to be patched
|
|
1048
1072
|
*/
|
|
1049
|
-
const
|
|
1073
|
+
const patchSsrSlottedNode = (node) => {
|
|
1050
1074
|
if (!node || node.__nextSibling !== void 0 || !globalThis.Node) return;
|
|
1051
1075
|
patchNextSibling(node);
|
|
1052
1076
|
patchPreviousSibling(node);
|
|
1053
|
-
|
|
1077
|
+
patchSlottedNode(node);
|
|
1054
1078
|
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
1055
1079
|
patchNextElementSibling(node);
|
|
1056
1080
|
patchPreviousElementSibling(node);
|
|
@@ -1117,6 +1141,39 @@ const patchPreviousElementSibling = (element) => {
|
|
|
1117
1141
|
} });
|
|
1118
1142
|
};
|
|
1119
1143
|
/**
|
|
1144
|
+
* Detaches a slotted node from where it physically sits in the component's rendered DOM, through
|
|
1145
|
+
* the unpatched accessors. Not via `remove()`: mock-doc's `remove()` calls
|
|
1146
|
+
* `parentNode.removeChild()`, and a slotted node's patched `parentNode` is the host, whose patched
|
|
1147
|
+
* `removeChild()` would come straight back here.
|
|
1148
|
+
*
|
|
1149
|
+
* @param node the slotted node to detach
|
|
1150
|
+
*/
|
|
1151
|
+
const removeSlottedNode = (node) => {
|
|
1152
|
+
const parent = internalCall(node, "parentNode");
|
|
1153
|
+
if (parent) internalCall(parent, "removeChild")(node);
|
|
1154
|
+
};
|
|
1155
|
+
/**
|
|
1156
|
+
* Patches `remove()` on a node slotted into a non-shadow component, so that removing it fires
|
|
1157
|
+
* `slotchange` on its slot (and updates fallback content), as removing a node from a native slot
|
|
1158
|
+
* does. Stencil's own node moves, while `isTmpDisconnected` is set, don't fire it.
|
|
1159
|
+
*
|
|
1160
|
+
* @param node the slotted node to patch
|
|
1161
|
+
*/
|
|
1162
|
+
const patchSlottedRemove = (node) => {
|
|
1163
|
+
const child = node;
|
|
1164
|
+
if (!child || child.__remove || typeof child.remove !== "function") return;
|
|
1165
|
+
child.__remove = child.remove;
|
|
1166
|
+
child.remove = function() {
|
|
1167
|
+
const host = this["s-ol"]?.parentElement;
|
|
1168
|
+
const { slotNode } = findSlotFromSlottedNode(this);
|
|
1169
|
+
removeSlottedNode(this);
|
|
1170
|
+
if (slotNode && !(plt.$flags$ & PLATFORM_FLAGS.isTmpDisconnected)) {
|
|
1171
|
+
dispatchSlotChangeEvent(slotNode);
|
|
1172
|
+
updateFallbackSlotVisibility(host);
|
|
1173
|
+
}
|
|
1174
|
+
};
|
|
1175
|
+
};
|
|
1176
|
+
/**
|
|
1120
1177
|
* Patches the `parentNode` accessor of a non-shadow slotted node
|
|
1121
1178
|
*
|
|
1122
1179
|
* @param node the slotted node to be patched
|
|
@@ -1557,6 +1614,13 @@ const isComplexType = (o) => {
|
|
|
1557
1614
|
return o === "object" || o === "function";
|
|
1558
1615
|
};
|
|
1559
1616
|
//#endregion
|
|
1617
|
+
//#region src/runtime/signals-core.ts
|
|
1618
|
+
const getCore = () => globalThis[Symbol.for("stencil.preact-signals-core")] ??= SignalsCore;
|
|
1619
|
+
const effect = (fn, options) => getCore().effect(fn, options);
|
|
1620
|
+
function signal(value, options) {
|
|
1621
|
+
return getCore().signal(value, options);
|
|
1622
|
+
}
|
|
1623
|
+
//#endregion
|
|
1560
1624
|
//#region src/runtime/event-emitter.ts
|
|
1561
1625
|
const createEvent = (ref, name, flags) => {
|
|
1562
1626
|
const elm = getElement(ref);
|
|
@@ -1589,6 +1653,11 @@ const setRegistry = (registry) => {
|
|
|
1589
1653
|
_registry = registry;
|
|
1590
1654
|
};
|
|
1591
1655
|
const getRegistry = () => _registry ?? customElements;
|
|
1656
|
+
/**
|
|
1657
|
+
* @param elm a defined component host
|
|
1658
|
+
* @returns the registry the host's class was defined in, else the active registry
|
|
1659
|
+
*/
|
|
1660
|
+
const getHostRegistry = (elm) => elm.constructor._registry ?? getRegistry();
|
|
1592
1661
|
//#endregion
|
|
1593
1662
|
//#region src/runtime/vdom/set-accessor.ts
|
|
1594
1663
|
/**
|
|
@@ -1632,7 +1701,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
|
|
|
1632
1701
|
attrMap.get(memberName)?.();
|
|
1633
1702
|
if (!signalAttrDisposers.has(elm)) signalAttrDisposers.set(elm, attrMap);
|
|
1634
1703
|
let prevVal = oldValue;
|
|
1635
|
-
attrMap.set(memberName, effect
|
|
1704
|
+
attrMap.set(memberName, effect(() => {
|
|
1636
1705
|
const curVal = newValue.value;
|
|
1637
1706
|
setAccessor(elm, memberName, prevVal, curVal, isSvg, flags);
|
|
1638
1707
|
prevVal = curVal;
|
|
@@ -1712,10 +1781,10 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
|
|
|
1712
1781
|
const isComplex = isComplexType(newValue);
|
|
1713
1782
|
if (!BUILD.lazyLoad) {
|
|
1714
1783
|
const isStandardAttr = ln.startsWith("aria-") || ln.startsWith("data-");
|
|
1715
|
-
if (!isProp && !isStandardAttr && elm.tagName?.includes("-") && elm.tagName !== "SLOT-FB" &&
|
|
1784
|
+
if (!isProp && !isStandardAttr && elm.tagName?.includes("-") && elm.tagName !== "SLOT-FB" && !customElements.get(elm.tagName.toLowerCase())) {
|
|
1716
1785
|
if (!elm["s-pp"]) elm["s-pp"] = /* @__PURE__ */ new Map();
|
|
1717
1786
|
elm["s-pp"].set(memberName, newValue);
|
|
1718
|
-
return;
|
|
1787
|
+
if (isComplex || /[A-Z]/.test(memberName)) return;
|
|
1719
1788
|
}
|
|
1720
1789
|
}
|
|
1721
1790
|
if ((isProp || isComplex && newValue !== null) && !isSvg) try {
|
|
@@ -1833,6 +1902,7 @@ function sortedAttrNames(attrNames) {
|
|
|
1833
1902
|
let scopeId;
|
|
1834
1903
|
let contentRef;
|
|
1835
1904
|
let hostTagName;
|
|
1905
|
+
let hostRegistry;
|
|
1836
1906
|
let useNativeShadowDom = false;
|
|
1837
1907
|
let checkSlotFallbackVisibility = false;
|
|
1838
1908
|
let checkSlotRelocate = false;
|
|
@@ -1842,6 +1912,7 @@ let isSvgMode = false;
|
|
|
1842
1912
|
* These ensure that ref callbacks are called in the correct order:
|
|
1843
1913
|
* first all removal callbacks (with null), then all attachment callbacks (with elements).
|
|
1844
1914
|
*/
|
|
1915
|
+
const initialSlotChanges = /* @__PURE__ */ new Set();
|
|
1845
1916
|
const refCallbacksToRemove = [];
|
|
1846
1917
|
const refCallbacksToAttach = [];
|
|
1847
1918
|
/** Disposers for signal subscriptions on individual DOM nodes (text nodes, <s-show> wrappers). */
|
|
@@ -1849,16 +1920,33 @@ const signalNodeDisposers = /* @__PURE__ */ new WeakMap();
|
|
|
1849
1920
|
const disposeSignalVNode = (vnode) => {
|
|
1850
1921
|
const elm = vnode.$elm$;
|
|
1851
1922
|
if (elm) {
|
|
1852
|
-
|
|
1853
|
-
if (dispose) {
|
|
1854
|
-
dispose();
|
|
1855
|
-
signalNodeDisposers.delete(elm);
|
|
1856
|
-
}
|
|
1923
|
+
disposeTextSignal(elm);
|
|
1857
1924
|
disposeAllSignalAttrs(elm);
|
|
1858
1925
|
}
|
|
1859
1926
|
vnode.$children$?.forEach(disposeSignalVNode);
|
|
1860
1927
|
};
|
|
1861
1928
|
/**
|
|
1929
|
+
* Tear down a text node's signal subscription, if it has one.
|
|
1930
|
+
* @param textNode the text node to unsubscribe
|
|
1931
|
+
*/
|
|
1932
|
+
const disposeTextSignal = (textNode) => {
|
|
1933
|
+
const dispose = signalNodeDisposers.get(textNode);
|
|
1934
|
+
if (dispose) {
|
|
1935
|
+
dispose();
|
|
1936
|
+
signalNodeDisposers.delete(textNode);
|
|
1937
|
+
}
|
|
1938
|
+
};
|
|
1939
|
+
/**
|
|
1940
|
+
* Subscribe a text node to a signal, keeping its `data` in sync on every change.
|
|
1941
|
+
* @param textNode the text node to keep in sync
|
|
1942
|
+
* @param textSig the signal to subscribe to
|
|
1943
|
+
*/
|
|
1944
|
+
const wireTextSignal = (textNode, textSig) => {
|
|
1945
|
+
signalNodeDisposers.set(textNode, effect(() => {
|
|
1946
|
+
textNode.data = String(textSig.value);
|
|
1947
|
+
}));
|
|
1948
|
+
};
|
|
1949
|
+
/**
|
|
1862
1950
|
* Create a DOM Node corresponding to one of the children of a given VNode.
|
|
1863
1951
|
*
|
|
1864
1952
|
* @param oldParentVNode the parent VNode from the previous render
|
|
@@ -1880,13 +1968,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex) => {
|
|
|
1880
1968
|
if (BUILD.isDev && newVNode.$elm$) consoleDevError(`The JSX ${newVNode.$text$ !== null ? `"${newVNode.$text$}" text` : `"${String(newVNode.$tag$)}" element`} node should not be shared within the same renderer. The renderer caches element lookups in order to improve performance. However, a side effect from this is that the exact same JSX node should not be reused. For more information please see https://stenciljs.com/docs/templating-jsx#avoid-shared-jsx-nodes`);
|
|
1881
1969
|
if (BUILD.vdomText && newVNode.$text$ != null) {
|
|
1882
1970
|
elm = newVNode.$elm$ = win.document.createTextNode(newVNode.$text$);
|
|
1883
|
-
if (BUILD.vdomSignals && newVNode.$signal$)
|
|
1884
|
-
const textSig = newVNode.$signal$;
|
|
1885
|
-
const textNode = elm;
|
|
1886
|
-
signalNodeDisposers.set(textNode, effect$1(() => {
|
|
1887
|
-
textNode.data = String(textSig.value);
|
|
1888
|
-
}));
|
|
1889
|
-
}
|
|
1971
|
+
if (BUILD.vdomSignals && newVNode.$signal$) wireTextSignal(elm, newVNode.$signal$);
|
|
1890
1972
|
} else if (BUILD.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotReference) {
|
|
1891
1973
|
elm = newVNode.$elm$ = BUILD.isDebug || BUILD.hydrateServerSide ? slotReferenceDebugNode(newVNode) : win.document.createTextNode("");
|
|
1892
1974
|
if (typeof newVNode.$attrs$?.slot === "string") elm["s-sa"] = newVNode.$attrs$.slot;
|
|
@@ -1895,8 +1977,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex) => {
|
|
|
1895
1977
|
if (BUILD.svg && !isSvgMode) isSvgMode = newVNode.$tag$ === "svg";
|
|
1896
1978
|
if (!win.document) throw new Error("No DOM environment available for rendering.");
|
|
1897
1979
|
const tag = !useNativeShadowDom && BUILD.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotFallback ? "slot-fb" : newVNode.$tag$;
|
|
1898
|
-
const
|
|
1899
|
-
const registryOpts = _reg !== win.customElements && tag.includes("-") ? { customElementRegistry: _reg } : void 0;
|
|
1980
|
+
const registryOpts = hostRegistry !== win.customElements && tag.includes("-") ? { customElementRegistry: hostRegistry } : void 0;
|
|
1900
1981
|
elm = newVNode.$elm$ = BUILD.svg && isSvgMode ? win.document.createElementNS(SVG_NS, tag) : win.document.createElement(tag, registryOpts);
|
|
1901
1982
|
if (BUILD.svg && isSvgMode && newVNode.$tag$ === "foreignObject") isSvgMode = false;
|
|
1902
1983
|
if (BUILD.vdomAttribute) updateElement(null, newVNode, isSvgMode);
|
|
@@ -2154,7 +2235,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = fal
|
|
|
2154
2235
|
}
|
|
2155
2236
|
if (BUILD.vdomKey && idxInOld >= 0) {
|
|
2156
2237
|
elmToMove = oldCh[idxInOld];
|
|
2157
|
-
if (elmToMove.$tag$ !== newStartVnode.$tag$) node = createElm(oldCh && oldCh[newStartIdx], newVNode,
|
|
2238
|
+
if (elmToMove.$tag$ !== newStartVnode.$tag$) node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
|
|
2158
2239
|
else {
|
|
2159
2240
|
patch(elmToMove, newStartVnode, isInitialRender);
|
|
2160
2241
|
oldCh[idxInOld] = void 0;
|
|
@@ -2247,7 +2328,17 @@ const patch = (oldVNode, newVNode, isInitialRender = false) => {
|
|
|
2247
2328
|
else if (BUILD.hydrateClientSide && isInitialRender && BUILD.updatable && oldChildren !== null && newChildren === null) newVNode.$children$ = oldChildren;
|
|
2248
2329
|
if (BUILD.svg && isSvgMode && tag === "svg") isSvgMode = false;
|
|
2249
2330
|
} else if (BUILD.vdomText && BUILD.slotRelocation && (defaultHolder = elm["s-cr"])) defaultHolder.parentNode.textContent = text;
|
|
2250
|
-
else if (BUILD.vdomText
|
|
2331
|
+
else if (BUILD.vdomText) {
|
|
2332
|
+
if (BUILD.vdomSignals && newVNode.$signal$) {
|
|
2333
|
+
if (newVNode.$signal$ !== oldVNode.$signal$) {
|
|
2334
|
+
disposeTextSignal(elm);
|
|
2335
|
+
wireTextSignal(elm, newVNode.$signal$);
|
|
2336
|
+
}
|
|
2337
|
+
} else {
|
|
2338
|
+
if (BUILD.vdomSignals && oldVNode.$signal$) disposeTextSignal(elm);
|
|
2339
|
+
if (oldVNode.$text$ !== text) elm.data = text;
|
|
2340
|
+
}
|
|
2341
|
+
}
|
|
2251
2342
|
};
|
|
2252
2343
|
/**
|
|
2253
2344
|
* Component-global information about nodes which are either currently being
|
|
@@ -2376,10 +2467,13 @@ const insertBefore = (parent, newNode, reference, isInitialLoad) => {
|
|
|
2376
2467
|
if (BUILD.scoped && typeof newNode["s-sn"] === "string" && !!newNode["s-sr"] && !!newNode["s-cr"]) addRemoveSlotScopedClass(newNode["s-cr"], newNode, parent, newNode.parentElement);
|
|
2377
2468
|
else if (typeof newNode["s-sn"] === "string") {
|
|
2378
2469
|
const hostElm = newNode["s-hn"] && parent.closest?.(newNode["s-hn"]);
|
|
2379
|
-
if ((BUILD.lightDomPatches || BUILD.slotChildNodes || BUILD.patchAll && !!(hostElm && getHostRef(hostElm)?.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll)) && parent.getRootNode().nodeType !== NODE_TYPES.DOCUMENT_FRAGMENT_NODE)
|
|
2470
|
+
if ((BUILD.lightDomPatches || BUILD.slotChildNodes || BUILD.patchAll && !!(hostElm && getHostRef(hostElm)?.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll)) && parent.getRootNode().nodeType !== NODE_TYPES.DOCUMENT_FRAGMENT_NODE) patchSlottedNode(newNode);
|
|
2380
2471
|
parent.insertBefore(newNode, reference);
|
|
2381
2472
|
const { slotNode } = findSlotFromSlottedNode(newNode);
|
|
2382
|
-
if (slotNode
|
|
2473
|
+
if (slotNode) {
|
|
2474
|
+
if (isInitialLoad) initialSlotChanges.add(slotNode);
|
|
2475
|
+
else dispatchSlotChangeEvent(slotNode);
|
|
2476
|
+
}
|
|
2383
2477
|
return newNode;
|
|
2384
2478
|
}
|
|
2385
2479
|
}
|
|
@@ -2435,6 +2529,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
|
|
|
2435
2529
|
const oldVNode = hostRef.$vnode$ || newVNode(null, null);
|
|
2436
2530
|
const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
|
|
2437
2531
|
hostTagName = hostElm.tagName;
|
|
2532
|
+
hostRegistry = getHostRegistry(hostElm);
|
|
2438
2533
|
if (BUILD.isDev && Array.isArray(renderFnResults) && renderFnResults.some(isHost)) throw new Error(`The <Host> must be the single root component.
|
|
2439
2534
|
Looks like the render() function of "${hostTagName.toLowerCase()}" is returning an array that contains the <Host>.
|
|
2440
2535
|
|
|
@@ -2534,6 +2629,11 @@ render() {
|
|
|
2534
2629
|
if (checkSlotFallbackVisibility) updateFallbackSlotVisibility(rootVnode.$elm$);
|
|
2535
2630
|
plt.$flags$ &= ~PLATFORM_FLAGS.isTmpDisconnected;
|
|
2536
2631
|
relocateNodes.length = 0;
|
|
2632
|
+
if (initialSlotChanges.size) {
|
|
2633
|
+
const slotNodes = [...initialSlotChanges];
|
|
2634
|
+
initialSlotChanges.clear();
|
|
2635
|
+
nextTick(() => slotNodes.forEach(dispatchSlotChangeEvent));
|
|
2636
|
+
}
|
|
2537
2637
|
}
|
|
2538
2638
|
if (BUILD.slotRelocation && !useNativeShadowDom && !(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && hostElm["s-cr"]) {
|
|
2539
2639
|
const children = rootVnode.$elm$.__childNodes || rootVnode.$elm$.childNodes;
|
|
@@ -2587,11 +2687,12 @@ const markFirstConnected = (hostRef) => {
|
|
|
2587
2687
|
* autoloader, where the ancestor tag may not be defined yet.
|
|
2588
2688
|
*
|
|
2589
2689
|
* @param ancestorElm the nearest Stencil ancestor element
|
|
2690
|
+
* @param registry the registry the waiting component is defined in
|
|
2590
2691
|
*/
|
|
2591
|
-
const awaitAncestorConnected = async (ancestorElm) => {
|
|
2692
|
+
const awaitAncestorConnected = async (ancestorElm, registry) => {
|
|
2592
2693
|
let ancestorHostRef = getHostRef(ancestorElm);
|
|
2593
2694
|
if (!BUILD.lazyLoad && !ancestorHostRef) {
|
|
2594
|
-
await
|
|
2695
|
+
await registry.whenDefined(ancestorElm.tagName.toLowerCase());
|
|
2595
2696
|
ancestorHostRef = getHostRef(ancestorElm);
|
|
2596
2697
|
}
|
|
2597
2698
|
if (ancestorHostRef && !(ancestorHostRef.$flags$ & HOST_FLAGS.hasFiredConnected)) await ensureFirstConnectPromise(ancestorHostRef);
|
|
@@ -2947,8 +3048,7 @@ const initializeSignals = (elm, hostRef, cmpMeta) => {
|
|
|
2947
3048
|
const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
|
|
2948
3049
|
for (const [memberName, [memberFlags]] of Object.entries(cmpMeta.$members$ ?? {})) {
|
|
2949
3050
|
if (!(memberFlags & MEMBER_FLAGS.PropLike)) continue;
|
|
2950
|
-
const
|
|
2951
|
-
const sig = signal(initialVal);
|
|
3051
|
+
const sig = signal(hostRef.$instanceValues$.get(memberName));
|
|
2952
3052
|
hostRef.$signalValues$.set(memberName, sig);
|
|
2953
3053
|
let prevScheduleVal = sig.peek();
|
|
2954
3054
|
disposers.push(effect(() => {
|
|
@@ -3076,9 +3176,7 @@ const h = (nodeName, vnodeData, ...children) => {
|
|
|
3076
3176
|
if (classData && !(BUILD.vdomSignals && isSignalLike(classData))) vnodeData.class = typeof classData !== "object" ? classData : Object.keys(classData).filter((k) => classData[k]).join(" ");
|
|
3077
3177
|
}
|
|
3078
3178
|
}
|
|
3079
|
-
if (BUILD.isDev && vNodeChildren.some(isHost)) consoleDevError(`The <Host> must be the single root component
|
|
3080
|
-
- You are NOT using hostData() and <Host> in the same component.
|
|
3081
|
-
- <Host> is used once, and it's the single root component of the render() function.`);
|
|
3179
|
+
if (BUILD.isDev && vNodeChildren.some(isHost)) consoleDevError(`The <Host> must be used once, and be the single root component of the render() function.`);
|
|
3082
3180
|
if (BUILD.vdomFunctional && typeof nodeName === "function") return nodeName(vnodeData === null ? {} : vnodeData, vNodeChildren, vdomFnUtils);
|
|
3083
3181
|
const vnode = newVNode(nodeName, null);
|
|
3084
3182
|
vnode.$attrs$ = vnodeData;
|
|
@@ -3131,17 +3229,23 @@ const vdomFnUtils = {
|
|
|
3131
3229
|
* Convert a {@link d.VNode} to a {@link d.ChildNode} in order to present a
|
|
3132
3230
|
* friendlier public interface (hence, 'convertToPublic').
|
|
3133
3231
|
*
|
|
3134
|
-
*
|
|
3232
|
+
* Functional components receive primitive children unwrapped, so those
|
|
3233
|
+
* become text-only child nodes.
|
|
3234
|
+
*
|
|
3235
|
+
* @param node the virtual DOM node (or primitive child) to convert
|
|
3135
3236
|
* @returns a converted child node
|
|
3136
3237
|
*/
|
|
3137
|
-
const convertToPublic = (node) =>
|
|
3238
|
+
const convertToPublic = (node) => typeof node !== "object" ? {
|
|
3239
|
+
vtag: null,
|
|
3240
|
+
vtext: String(node)
|
|
3241
|
+
} : {
|
|
3138
3242
|
vattrs: node.$attrs$,
|
|
3139
3243
|
vchildren: node.$children$,
|
|
3140
3244
|
vkey: node.$key$,
|
|
3141
3245
|
vname: node.$name$,
|
|
3142
3246
|
vtag: node.$tag$,
|
|
3143
3247
|
vtext: node.$text$
|
|
3144
|
-
}
|
|
3248
|
+
};
|
|
3145
3249
|
/**
|
|
3146
3250
|
* Convert a {@link d.ChildNode} back to an equivalent {@link d.VNode} in
|
|
3147
3251
|
* order to use the resulting object in the virtual DOM. The initial object was
|
|
@@ -3158,11 +3262,11 @@ const convertToPrivate = (node) => {
|
|
|
3158
3262
|
if (node.vname) vnodeData.name = node.vname;
|
|
3159
3263
|
return h(node.vtag, vnodeData, ...node.vchildren || []);
|
|
3160
3264
|
}
|
|
3161
|
-
const vnode = newVNode(node.vtag, node.vtext);
|
|
3162
|
-
vnode.$attrs$ = node.vattrs;
|
|
3163
|
-
vnode.$children$ = node.vchildren;
|
|
3164
|
-
vnode.$key$ = node.vkey;
|
|
3165
|
-
vnode.$name$ = node.vname;
|
|
3265
|
+
const vnode = newVNode(node.vtag ?? null, node.vtext);
|
|
3266
|
+
vnode.$attrs$ = node.vattrs ?? null;
|
|
3267
|
+
vnode.$children$ = node.vchildren ?? null;
|
|
3268
|
+
vnode.$key$ = node.vkey ?? null;
|
|
3269
|
+
vnode.$name$ = node.vname ?? null;
|
|
3166
3270
|
return vnode;
|
|
3167
3271
|
};
|
|
3168
3272
|
/**
|
|
@@ -3282,7 +3386,7 @@ const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
|
|
|
3282
3386
|
}
|
|
3283
3387
|
addSlotRelocateNode(siNode, siSlot, false, siNode["s-oo"] || currentPos);
|
|
3284
3388
|
if (siNode.parentElement?.shadowRoot && siNode["getAttribute"] && siNode.getAttribute("slot")) siNode.removeAttribute("slot");
|
|
3285
|
-
if (BUILD.lightDomPatches || BUILD.slotChildNodes || BUILD.patchAll && hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll)
|
|
3389
|
+
if (BUILD.lightDomPatches || BUILD.slotChildNodes || BUILD.patchAll && hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll) patchSsrSlottedNode(siNode);
|
|
3286
3390
|
}
|
|
3287
3391
|
currentPos = (siNode["s-oo"] || currentPos) + 1;
|
|
3288
3392
|
}
|
|
@@ -3460,6 +3564,7 @@ const initializeDocumentHydrate = (node, orgLocNodes) => {
|
|
|
3460
3564
|
const createSimpleVNode = (vnode) => ({
|
|
3461
3565
|
$flags$: 0,
|
|
3462
3566
|
$index$: "0",
|
|
3567
|
+
$children$: null,
|
|
3463
3568
|
...vnode
|
|
3464
3569
|
});
|
|
3465
3570
|
function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNodes, slotNodes, shadowRootNodes, slottedNodes) {
|
|
@@ -3854,7 +3959,7 @@ const scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector)
|
|
|
3854
3959
|
else return shallowPart.trim();
|
|
3855
3960
|
}).join(", ");
|
|
3856
3961
|
};
|
|
3857
|
-
const isScopableAtRule = (selector) => selector.startsWith("@media") || selector.startsWith("@supports") || selector.startsWith("@page") || selector.startsWith("@document") || selector.startsWith("@layer");
|
|
3962
|
+
const isScopableAtRule = (selector) => selector.startsWith("@media") || selector.startsWith("@supports") || selector.startsWith("@page") || selector.startsWith("@document") || selector.startsWith("@layer") || selector.startsWith("@container");
|
|
3858
3963
|
const scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
|
|
3859
3964
|
return processRules(cssText, (rule) => {
|
|
3860
3965
|
let selector = rule.selector;
|
|
@@ -3973,8 +4078,11 @@ const scopeCss = (cssText, scopeId, commentOriginalSelector) => {
|
|
|
3973
4078
|
};
|
|
3974
4079
|
//#endregion
|
|
3975
4080
|
//#region src/runtime/mode.ts
|
|
3976
|
-
const computeMode = (elm) =>
|
|
3977
|
-
const setMode = (handler) =>
|
|
4081
|
+
const computeMode = (elm) => modeResolver.map((h) => h(elm)).find((m) => !!m);
|
|
4082
|
+
const setMode = (handler) => {
|
|
4083
|
+
modeResolver.length = 0;
|
|
4084
|
+
modeResolver.push(handler);
|
|
4085
|
+
};
|
|
3978
4086
|
const getMode = (ref) => getHostRef(ref)?.$modeName$;
|
|
3979
4087
|
//#endregion
|
|
3980
4088
|
//#region src/runtime/normalize-watchers.ts
|
|
@@ -4039,23 +4147,14 @@ const normalizeWatchers = (raw) => {
|
|
|
4039
4147
|
*
|
|
4040
4148
|
* @param propValue the new value to coerce to some type
|
|
4041
4149
|
* @param propType the type of the prop, expressed as a binary number
|
|
4042
|
-
* @param isFormAssociated whether the component is form-associated (optional)
|
|
4043
4150
|
* @returns the parsed/coerced value
|
|
4044
4151
|
*/
|
|
4045
|
-
const parsePropertyValue = (propValue, propType
|
|
4152
|
+
const parsePropertyValue = (propValue, propType) => {
|
|
4046
4153
|
if (propValue != null && !isComplexType(propValue)) {
|
|
4047
4154
|
/**
|
|
4048
4155
|
* ensure this value is of the correct prop type
|
|
4049
4156
|
*/
|
|
4050
|
-
if (BUILD.propBoolean && propType & MEMBER_FLAGS.Boolean)
|
|
4051
|
-
/**
|
|
4052
|
-
* For form-associated components, according to HTML spec, the presence of any boolean attribute
|
|
4053
|
-
* (regardless of its value, even "false") should make the property true.
|
|
4054
|
-
* For non-form-associated components, we maintain the legacy behavior where "false" becomes false.
|
|
4055
|
-
*/
|
|
4056
|
-
if (BUILD.formAssociated && isFormAssociated && typeof propValue === "string") return propValue === "" || !!propValue;
|
|
4057
|
-
else return propValue === "false" ? false : propValue === "" || !!propValue;
|
|
4058
|
-
}
|
|
4157
|
+
if (BUILD.propBoolean && propType & MEMBER_FLAGS.Boolean) return propValue === "" || !!propValue;
|
|
4059
4158
|
/**
|
|
4060
4159
|
* force it to be a number
|
|
4061
4160
|
*/
|
|
@@ -4097,7 +4196,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
|
|
|
4097
4196
|
if (BUILD.signalBacking) {
|
|
4098
4197
|
const sig = hostRef?.$signalValues$?.get(propName);
|
|
4099
4198
|
if (sig !== void 0) {
|
|
4100
|
-
const parsed = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]
|
|
4199
|
+
const parsed = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
|
|
4101
4200
|
if (BUILD.serializer && BUILD.reflect && cmpMeta.$attrsToReflect$ && cmpMeta.$serializers$?.[propName]) {
|
|
4102
4201
|
const elm = BUILD.lazyLoad ? hostRef.$hostElement$ : ref;
|
|
4103
4202
|
applySerializers(hostRef, cmpMeta, propName, parsed, BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm);
|
|
@@ -4115,7 +4214,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
|
|
|
4115
4214
|
const oldVal = hostRef.$instanceValues$.get(propName);
|
|
4116
4215
|
const flags = hostRef.$flags$;
|
|
4117
4216
|
const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
|
|
4118
|
-
newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]
|
|
4217
|
+
newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
|
|
4119
4218
|
const didValueChange = newVal !== oldVal && !(Number.isNaN(oldVal) && Number.isNaN(newVal));
|
|
4120
4219
|
if ((!BUILD.lazyLoad || !(flags & HOST_FLAGS.isConstructingInstance) || oldVal === void 0) && didValueChange) {
|
|
4121
4220
|
hostRef.$instanceValues$.set(propName, newVal);
|
|
@@ -4164,6 +4263,22 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
|
|
|
4164
4263
|
*/
|
|
4165
4264
|
const reflectedAttrValue = (propValue) => propValue == null || propValue === false ? null : propValue === true ? "" : String(propValue);
|
|
4166
4265
|
/**
|
|
4266
|
+
* Hand values written to a lazy component's element before its instance existed to the
|
|
4267
|
+
* instance's own `@Prop` setters. Must run as soon as the instance is constructed, so that
|
|
4268
|
+
* whenever `$lazyInstance$` is set, reads through it agree with the element's last write.
|
|
4269
|
+
*
|
|
4270
|
+
* @param hostRef the runtime bookkeeping object of a freshly constructed lazy instance
|
|
4271
|
+
* @param cmpMeta runtime metadata for the component (with any run-time only setters flagged)
|
|
4272
|
+
*/
|
|
4273
|
+
const replayPendingSetterValues = (hostRef, cmpMeta) => {
|
|
4274
|
+
const instance = hostRef.$lazyInstance$;
|
|
4275
|
+
if (!instance) return;
|
|
4276
|
+
for (const [memberName, [memberFlags]] of Object.entries(cmpMeta.$members$ ?? {})) if (memberFlags & MEMBER_FLAGS.Setter && hostRef.$instanceValues$.has(memberName)) {
|
|
4277
|
+
const pendingValue = hostRef.$instanceValues$.get(memberName);
|
|
4278
|
+
if (instance[memberName] !== pendingValue) instance[memberName] = pendingValue;
|
|
4279
|
+
}
|
|
4280
|
+
};
|
|
4281
|
+
/**
|
|
4167
4282
|
* Attach a series of runtime constructs to a compiled Stencil component
|
|
4168
4283
|
* constructor, including getters and setters for the `@Prop` and `@State`
|
|
4169
4284
|
* decorators, callbacks for when attributes change, and so on.
|
|
@@ -4220,9 +4335,8 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
4220
4335
|
if (BUILD.lazyLoad) {
|
|
4221
4336
|
if ((cmpMeta.$members$[memberName][0] & MEMBER_FLAGS.Getter) === 0) return getValue(this, memberName);
|
|
4222
4337
|
const ref = getHostRef(this);
|
|
4223
|
-
|
|
4224
|
-
|
|
4225
|
-
return instance[memberName];
|
|
4338
|
+
if (!ref) return prototype[memberName];
|
|
4339
|
+
return ref.$lazyInstance$ ? ref.$lazyInstance$[memberName] : getValue(this, memberName);
|
|
4226
4340
|
}
|
|
4227
4341
|
if (!BUILD.lazyLoad) return origGetter ? origGetter.apply(this) : getValue(this, memberName);
|
|
4228
4342
|
},
|
|
@@ -4237,7 +4351,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
4237
4351
|
}
|
|
4238
4352
|
if (origSetter) {
|
|
4239
4353
|
if (typeof (memberFlags & MEMBER_FLAGS.State ? this[memberName] : ref.$hostElement$[memberName]) === "undefined" && ref.$instanceValues$.get(memberName)) newValue = ref.$instanceValues$.get(memberName);
|
|
4240
|
-
origSetter.apply(this, [parsePropertyValue(newValue, memberFlags
|
|
4354
|
+
origSetter.apply(this, [parsePropertyValue(newValue, memberFlags)]);
|
|
4241
4355
|
newValue = memberFlags & MEMBER_FLAGS.State ? this[memberName] : ref.$hostElement$[memberName];
|
|
4242
4356
|
setValue(this, memberName, newValue, cmpMeta);
|
|
4243
4357
|
return;
|
|
@@ -4249,21 +4363,15 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
4249
4363
|
if (BUILD.lazyLoad) {
|
|
4250
4364
|
if ((flags & PROXY_FLAGS.isElementConstructor) === 0 || (cmpMeta.$members$[memberName][0] & MEMBER_FLAGS.Setter) === 0) {
|
|
4251
4365
|
setValue(this, memberName, newValue, cmpMeta);
|
|
4252
|
-
if (flags & PROXY_FLAGS.isElementConstructor && !ref.$lazyInstance$) ref.$fetchedCbList$.push(() => {
|
|
4253
|
-
if (cmpMeta.$members$[memberName][0] & MEMBER_FLAGS.Setter && ref.$lazyInstance$[memberName] !== ref.$instanceValues$.get(memberName)) ref.$lazyInstance$[memberName] = newValue;
|
|
4254
|
-
});
|
|
4255
4366
|
return;
|
|
4256
4367
|
}
|
|
4257
|
-
const
|
|
4368
|
+
const parsedValue = parsePropertyValue(newValue, memberFlags);
|
|
4369
|
+
if (ref.$lazyInstance$) {
|
|
4258
4370
|
const currentValue = ref.$lazyInstance$[memberName];
|
|
4259
4371
|
if (!ref.$instanceValues$.get(memberName) && currentValue) ref.$instanceValues$.set(memberName, currentValue);
|
|
4260
|
-
ref.$lazyInstance$[memberName] =
|
|
4372
|
+
ref.$lazyInstance$[memberName] = parsedValue;
|
|
4261
4373
|
setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
|
|
4262
|
-
};
|
|
4263
|
-
if (ref.$lazyInstance$) setterSetVal();
|
|
4264
|
-
else ref.$fetchedCbList$.push(() => {
|
|
4265
|
-
setterSetVal();
|
|
4266
|
-
});
|
|
4374
|
+
} else ref.$instanceValues$.set(memberName, parsedValue);
|
|
4267
4375
|
}
|
|
4268
4376
|
} });
|
|
4269
4377
|
} else if (BUILD.lazyLoad && BUILD.method && flags & PROXY_FLAGS.isElementConstructor && memberFlags & MEMBER_FLAGS.Method) Object.defineProperty(prototype, memberName, { value(...args) {
|
|
@@ -4315,7 +4423,10 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
4315
4423
|
const isBooleanTarget = propMemberFlags & MEMBER_FLAGS.Boolean;
|
|
4316
4424
|
if (BUILD.reflect && propMemberFlags & MEMBER_FLAGS.ReflectAttr && propMemberFlags & MEMBER_FLAGS.Any && !isComplexType(this[propName]) && reflectedAttrValue(this[propName]) === newValue) return;
|
|
4317
4425
|
const isSpuriousBooleanRemoval = isBooleanTarget && newValue === null && this[propName] === void 0;
|
|
4318
|
-
if (isBooleanTarget)
|
|
4426
|
+
if (isBooleanTarget) {
|
|
4427
|
+
if (BUILD.isDev && newValue === "false") consoleDevWarn(`<${cmpMeta.$tagName$} ${attrName}="false">: boolean attributes are true when present, regardless of value. Remove the attribute or set the "${propName}" property to false instead.`);
|
|
4428
|
+
newValue = newValue !== null;
|
|
4429
|
+
}
|
|
4319
4430
|
const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
|
|
4320
4431
|
if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) this[propName] = newValue;
|
|
4321
4432
|
});
|
|
@@ -4378,9 +4489,12 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
|
|
|
4378
4489
|
} catch (e) {
|
|
4379
4490
|
consoleError(e, elm);
|
|
4380
4491
|
}
|
|
4381
|
-
if (BUILD.member)
|
|
4492
|
+
if (BUILD.member) {
|
|
4493
|
+
hostRef.$flags$ &= ~HOST_FLAGS.isConstructingInstance;
|
|
4494
|
+
replayPendingSetterValues(hostRef, cmpMeta);
|
|
4495
|
+
}
|
|
4382
4496
|
endNewInstance();
|
|
4383
|
-
if (BUILD.asyncLoading && hostRef.$ancestorComponent$) await awaitAncestorConnected(hostRef.$ancestorComponent
|
|
4497
|
+
if (BUILD.asyncLoading && hostRef.$ancestorComponent$) await awaitAncestorConnected(hostRef.$ancestorComponent$, getHostRegistry(elm));
|
|
4384
4498
|
if (!(BUILD.slotRelocation && cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation)) {
|
|
4385
4499
|
fireConnectedCallback(hostRef.$lazyInstance$, elm);
|
|
4386
4500
|
if (BUILD.asyncLoading) markFirstConnected(hostRef);
|
|
@@ -4480,9 +4594,16 @@ const connectedCallback = (elm) => {
|
|
|
4480
4594
|
}
|
|
4481
4595
|
if (BUILD.asyncLoading) {
|
|
4482
4596
|
let ancestorComponent = elm;
|
|
4483
|
-
while (ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host)
|
|
4484
|
-
|
|
4485
|
-
|
|
4597
|
+
while (ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host) {
|
|
4598
|
+
if (BUILD.hydrateClientSide && !ancestorComponent["s-p"] && ancestorComponent.nodeType === NODE_TYPE.ElementNode && ancestorComponent.hasAttribute("s-id")) {
|
|
4599
|
+
ancestorComponent["s-p"] = [];
|
|
4600
|
+
ancestorComponent["s-rc"] = [];
|
|
4601
|
+
ancestorComponent["s-pc"] = [];
|
|
4602
|
+
}
|
|
4603
|
+
if (ancestorComponent["s-p"]) {
|
|
4604
|
+
attachToAncestor(hostRef, hostRef.$ancestorComponent$ = ancestorComponent);
|
|
4605
|
+
break;
|
|
4606
|
+
}
|
|
4486
4607
|
}
|
|
4487
4608
|
}
|
|
4488
4609
|
if (BUILD.prop && !BUILD.hydrateServerSide && cmpMeta.$members$) Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
|
|
@@ -4598,48 +4719,45 @@ const hmrStandalone = async (hostElement, cmpMeta, hmrVersionId) => {
|
|
|
4598
4719
|
`${modulePath}?s-hmr=${hmrVersionId}`
|
|
4599
4720
|
);
|
|
4600
4721
|
const NewClass = Object.values(newModule).find((v) => typeof v === "function" && v.is === cmpMeta.$tagName$) ?? newModule.default;
|
|
4601
|
-
if (
|
|
4602
|
-
const ctor = customElements.get(cmpMeta.$tagName$);
|
|
4603
|
-
if (ctor) {
|
|
4604
|
-
for (const key of Object.getOwnPropertyNames(NewClass.prototype)) {
|
|
4605
|
-
if (key === "constructor") continue;
|
|
4606
|
-
Object.defineProperty(ctor.prototype, key, Object.getOwnPropertyDescriptor(NewClass.prototype, key));
|
|
4607
|
-
}
|
|
4608
|
-
const styleDesc = Object.getOwnPropertyDescriptor(NewClass, "style");
|
|
4609
|
-
if (styleDesc) {
|
|
4610
|
-
Object.defineProperty(ctor, "style", styleDesc);
|
|
4611
|
-
const newStyle = NewClass.style;
|
|
4612
|
-
if (newStyle) {
|
|
4613
|
-
const scopeId = getScopeId(cmpMeta);
|
|
4614
|
-
const isShadow = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation);
|
|
4615
|
-
console.log("[stencil-hmr] registerStyle", {
|
|
4616
|
-
tag: cmpMeta.$tagName$,
|
|
4617
|
-
scopeId,
|
|
4618
|
-
isShadow,
|
|
4619
|
-
cssLen: newStyle.length
|
|
4620
|
-
});
|
|
4621
|
-
registerStyle(scopeId, newStyle, isShadow);
|
|
4622
|
-
}
|
|
4623
|
-
}
|
|
4624
|
-
}
|
|
4625
|
-
const isShadow = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation);
|
|
4626
|
-
document.querySelectorAll(cmpMeta.$tagName$).forEach((el) => {
|
|
4627
|
-
const hostRef = getHostRef(el);
|
|
4628
|
-
if (BUILD.hostListener && hostRef?.$rmListeners$) {
|
|
4629
|
-
hostRef.$rmListeners$.map((rmListener) => rmListener());
|
|
4630
|
-
hostRef.$rmListeners$ = void 0;
|
|
4631
|
-
addHostEventListeners(el, hostRef, cmpMeta.$listeners$);
|
|
4632
|
-
}
|
|
4633
|
-
if (!isShadow && hostRef) {
|
|
4634
|
-
console.log("[stencil-hmr] calling attachStyles for", cmpMeta.$tagName$);
|
|
4635
|
-
attachStyles(hostRef);
|
|
4636
|
-
}
|
|
4637
|
-
forceUpdate(el);
|
|
4638
|
-
});
|
|
4722
|
+
if (NewClass) hmrApplyClass(cmpMeta, NewClass);
|
|
4639
4723
|
} catch (e) {
|
|
4640
4724
|
console.error(`[Stencil HMR] Failed to reload <${cmpMeta.$tagName$}>`, e);
|
|
4641
4725
|
}
|
|
4642
4726
|
};
|
|
4727
|
+
/**
|
|
4728
|
+
* Patch a re-executed component class onto the registered one and re-render every live instance.
|
|
4729
|
+
* Shared by the standalone re-import above and bundlers that re-execute the module themselves
|
|
4730
|
+
* (webpack/rspack `module.hot`), which reach it via the constructor's `s-hmr-apply` hook.
|
|
4731
|
+
*
|
|
4732
|
+
* @param cmpMeta runtime metadata for the component
|
|
4733
|
+
* @param NewClass the component's newly executed class
|
|
4734
|
+
*/
|
|
4735
|
+
const hmrApplyClass = (cmpMeta, NewClass) => {
|
|
4736
|
+
const ctor = customElements.get(cmpMeta.$tagName$);
|
|
4737
|
+
const isShadow = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation);
|
|
4738
|
+
if (ctor && ctor !== NewClass) {
|
|
4739
|
+
for (const key of Object.getOwnPropertyNames(NewClass.prototype)) {
|
|
4740
|
+
if (key === "constructor") continue;
|
|
4741
|
+
Object.defineProperty(ctor.prototype, key, Object.getOwnPropertyDescriptor(NewClass.prototype, key));
|
|
4742
|
+
}
|
|
4743
|
+
const styleDesc = Object.getOwnPropertyDescriptor(NewClass, "style");
|
|
4744
|
+
if (styleDesc) {
|
|
4745
|
+
Object.defineProperty(ctor, "style", styleDesc);
|
|
4746
|
+
const newStyle = NewClass.style;
|
|
4747
|
+
if (newStyle) registerStyle(getScopeId(cmpMeta), newStyle, isShadow);
|
|
4748
|
+
}
|
|
4749
|
+
}
|
|
4750
|
+
document.querySelectorAll(cmpMeta.$tagName$).forEach((el) => {
|
|
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) attachStyles(hostRef);
|
|
4758
|
+
forceUpdate(el);
|
|
4759
|
+
});
|
|
4760
|
+
};
|
|
4643
4761
|
//#endregion
|
|
4644
4762
|
//#region src/runtime/bootstrap-standalone.ts
|
|
4645
4763
|
const defineCustomElement = (Cstr, compactMeta) => {
|
|
@@ -4662,9 +4780,12 @@ const proxyCustomElement = (Cstr, compactMeta) => {
|
|
|
4662
4780
|
cmpMeta.$serializers$ = Cstr.$serializers$;
|
|
4663
4781
|
}
|
|
4664
4782
|
if (BUILD.reflect) cmpMeta.$attrsToReflect$ = [];
|
|
4665
|
-
if (BUILD.hotModuleReplacement)
|
|
4666
|
-
|
|
4667
|
-
|
|
4783
|
+
if (BUILD.hotModuleReplacement) {
|
|
4784
|
+
Cstr.prototype["s-hmr"] = function(hmrVersionId) {
|
|
4785
|
+
hmrStart(this, cmpMeta, hmrVersionId);
|
|
4786
|
+
};
|
|
4787
|
+
Cstr["s-hmr-apply"] = (NewClass) => hmrApplyClass(cmpMeta, NewClass);
|
|
4788
|
+
}
|
|
4668
4789
|
if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && (BUILD.slotCloneNode || BUILD.patchClone && cmpMeta.$flags$ & CMP_FLAGS.patchClone)) patchCloneNode(Cstr.prototype);
|
|
4669
4790
|
if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) {
|
|
4670
4791
|
if (BUILD.lightDomPatches || BUILD.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(Cstr.prototype);
|
|
@@ -4703,7 +4824,7 @@ const proxyCustomElement = (Cstr, compactMeta) => {
|
|
|
4703
4824
|
}
|
|
4704
4825
|
connectedCallback(this);
|
|
4705
4826
|
if (BUILD.asyncLoading && hostRef && hostRef.$ancestorComponent$) {
|
|
4706
|
-
await awaitAncestorConnected(hostRef.$ancestorComponent
|
|
4827
|
+
await awaitAncestorConnected(hostRef.$ancestorComponent$, getHostRegistry(this));
|
|
4707
4828
|
if (!this.isConnected) return;
|
|
4708
4829
|
}
|
|
4709
4830
|
if (originalConnectedCallback && (plt.$flags$ & PLATFORM_FLAGS.isTmpDisconnected) === 0) originalConnectedCallback.call(this);
|
|
@@ -5018,7 +5139,7 @@ function Mixin(...mixins) {
|
|
|
5018
5139
|
//#region src/runtime/nonce.ts
|
|
5019
5140
|
/**
|
|
5020
5141
|
* Assigns the given value to the nonce property on the runtime platform object.
|
|
5021
|
-
* During runtime, this value is used to set the nonce attribute on all dynamically created
|
|
5142
|
+
* During runtime, this value is used to set the nonce attribute on all dynamically created style tags.
|
|
5022
5143
|
* @param nonce The value to be assigned to the platform nonce property.
|
|
5023
5144
|
* @returns void
|
|
5024
5145
|
*/
|