@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.
Files changed (36) hide show
  1. package/dist/app-data/index.d.ts +1 -1
  2. package/dist/{client-BRu0GtRn.mjs → client-DIvBaMnB.mjs} +182 -70
  3. package/dist/compiler/browser.d.ts +114 -81
  4. package/dist/compiler/browser.js +743 -339
  5. package/dist/compiler/index.d.mts +110 -2
  6. package/dist/compiler/index.mjs +3 -3
  7. package/dist/compiler/utils/index.d.mts +1 -1
  8. package/dist/{compiler-BPgV6bA4.mjs → compiler-BI12oAIV.mjs} +4840 -2899
  9. package/dist/declarations/stencil-public-compiler.d.ts +152 -129
  10. package/dist/declarations/stencil-public-docs.d.ts +23 -0
  11. package/dist/declarations/stencil-public-runtime.d.ts +62 -58
  12. package/dist/{index-DmHmu3y0.d.mts → index-BGUOG9Wc.d.mts} +6 -2
  13. package/dist/{index-BopBfjPu.d.mts → index-BogZpjP2.d.mts} +150 -127
  14. package/dist/{index-BXAcVN2j.d.ts → index-CicD4Pgn.d.ts} +59 -55
  15. package/dist/index.d.mts +3 -0
  16. package/dist/index.mjs +1 -1
  17. package/dist/jsx-runtime.d.mts +6 -0
  18. package/dist/jsx-runtime.mjs +1 -1
  19. package/dist/{node-75gQKkFz.mjs → node-D-21Ykxi.mjs} +41 -47
  20. package/dist/runtime/client/lazy.js +321 -200
  21. package/dist/runtime/client/runtime.d.ts +73 -66
  22. package/dist/runtime/client/runtime.js +321 -200
  23. package/dist/runtime/index.d.ts +4 -5
  24. package/dist/runtime/index.js +319 -198
  25. package/dist/runtime/server/index.d.mts +11 -11
  26. package/dist/runtime/server/index.mjs +371 -239
  27. package/dist/runtime/server/runner.d.mts +4 -4
  28. package/dist/runtime/server/runner.mjs +82 -54
  29. package/dist/signals/index.d.ts +11 -2
  30. package/dist/signals/index.js +14 -35
  31. package/dist/sys/node/index.d.mts +1 -1
  32. package/dist/sys/node/index.mjs +1 -1
  33. package/dist/sys/node/worker.mjs +2 -2
  34. package/dist/testing/index.d.mts +136 -120
  35. package/dist/testing/index.mjs +328 -212
  36. package/package.json +8 -4
@@ -1,12 +1,89 @@
1
1
  import { BUILD } from "../app-data/index.js";
2
2
  import "../app-globals/index.js";
3
- import { effect, effect as effect$1, signal } from "@preact/signals-core";
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
- isTesting: BUILD.isTesting
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 modeResolutionChain = [];
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 ? nextTick(flush) : plt.raf(flush);
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
- if (getHostSlotNodes(this.__childNodes || this.childNodes, this.tagName, toRemove["s-sn"]) && toRemove.isConnected) {
862
- toRemove.remove();
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 sibling accessors of a 'slotted' node within a non-shadow component.
1039
- * Meaning whilst stepping through a non-shadow element's nodes, only the mock 'lightDOM' nodes are returned.
1040
- * Especially relevant when rendering components via SSR... Frameworks will often try to reconcile their
1041
- * VDOM with the real DOM by stepping through nodes with 'nextSibling' et al.
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 patchSlottedNode = (node) => {
1073
+ const patchSsrSlottedNode = (node) => {
1050
1074
  if (!node || node.__nextSibling !== void 0 || !globalThis.Node) return;
1051
1075
  patchNextSibling(node);
1052
1076
  patchPreviousSibling(node);
1053
- patchParentNode(node);
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$1(() => {
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" && typeof customElements !== "undefined" && !customElements.get(elm.tagName.toLowerCase())) {
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
- const dispose = signalNodeDisposers.get(elm);
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 _reg = getRegistry();
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, idxInOld);
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 && oldVNode.$text$ !== text) elm.data = text;
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) patchParentNode(newNode);
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 && !isInitialLoad) dispatchSlotChangeEvent(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 getRegistry().whenDefined(ancestorElm.tagName.toLowerCase());
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 initialVal = hostRef.$instanceValues$.get(memberName);
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. Make sure:
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
- * @param node the virtual DOM node to convert
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) patchSlottedNode(siNode);
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) => modeResolutionChain.map((h) => h(elm)).find((m) => !!m);
3977
- const setMode = (handler) => modeResolutionChain.push(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, isFormAssociated) => {
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], BUILD.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
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], BUILD.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
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
- const instance = ref ? ref.$lazyInstance$ : prototype;
4224
- if (!instance) return;
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, BUILD.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated))]);
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 setterSetVal = () => {
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] = parsePropertyValue(newValue, memberFlags, BUILD.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
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) newValue = !(newValue === null || newValue === "false");
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) hostRef.$flags$ &= ~HOST_FLAGS.isConstructingInstance;
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) if (BUILD.hydrateClientSide && ancestorComponent.nodeType === NODE_TYPE.ElementNode && ancestorComponent.hasAttribute("s-id") && ancestorComponent["s-p"] || ancestorComponent["s-p"]) {
4484
- attachToAncestor(hostRef, hostRef.$ancestorComponent$ = ancestorComponent);
4485
- break;
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 (!NewClass) return;
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) Cstr.prototype["s-hmr"] = function(hmrVersionId) {
4666
- hmrStart(this, cmpMeta, hmrVersionId);
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 script and style tags.
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
  */