@stencil/core 4.35.3 → 4.36.0

package/internal/client/index.js

@@ -1,5 +1,5 @@
 /*
- Stencil Client Platform v4.35.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.36.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -248,6 +248,7 @@ var supportsConstructableStylesheets = BUILD6.constructableCSS ? /* @__PURE__ */
   }
   return false;
 })() : false;
+var supportsMutableAdoptedStyleSheets = supportsConstructableStylesheets ? /* @__PURE__ */ (() => !!win.document && Object.getOwnPropertyDescriptor(win.document.adoptedStyleSheets, "length").writable)() : false;
 
 // src/client/client-task-queue.ts
 var queueCongestion = 0;
@@ -525,7 +526,13 @@ function createShadowRoot(cmpMeta) {
     delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
   }) : this.attachShadow({ mode: "open" });
   if (globalStyleSheet === void 0) globalStyleSheet = (_a = createStyleSheetIfNeededAndSupported(globalStyles)) != null ? _a : null;
-  if (globalStyleSheet) shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
+  if (globalStyleSheet) {
+    if (supportsMutableAdoptedStyleSheets) {
+      shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
+    } else {
+      shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, globalStyleSheet];
+    }
+  }
 }
 
 // src/utils/util.ts
@@ -1045,6 +1052,9 @@ var validNodesPatches = [
   "parentNode"
 ];
 function patchHostOriginalAccessor(accessorName, node) {
+  if (!globalThis.Node || !globalThis.Element) {
+    return;
+  }
   let accessor;
   if (validElementPatches.includes(accessorName)) {
     accessor = Object.getOwnPropertyDescriptor(Element.prototype, accessorName);
@@ -1211,7 +1221,11 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
               if (supportsConstructableStylesheets) {
                 const stylesheet = new CSSStyleSheet();
                 stylesheet.replaceSync(style);
-                styleContainerNode.adoptedStyleSheets.unshift(stylesheet);
+                if (supportsMutableAdoptedStyleSheets) {
+                  styleContainerNode.adoptedStyleSheets.unshift(stylesheet);
+                } else {
+                  styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
+                }
               } else {
                 const existingStyleContainer = styleContainerNode.querySelector("style");
                 if (existingStyleContainer) {
@@ -1236,7 +1250,11 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
         }
       }
     } else if (BUILD12.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
-      styleContainerNode.adoptedStyleSheets.push(style);
+      if (supportsMutableAdoptedStyleSheets) {
+        styleContainerNode.adoptedStyleSheets.push(style);
+      } else {
+        styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
+      }
     }
   }
   return scopeId2;
@@ -1412,7 +1430,7 @@ var validateInputProperties = (inputElm) => {
 
 // src/runtime/client-hydrate.ts
 var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
-  var _a, _b;
+  var _a, _b, _c;
   const endHydrate = createTime("hydrateClient", tagName);
   const shadowRoot = hostElm.shadowRoot;
   const childRenderNodes = [];
@@ -1476,15 +1494,17 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       if (childRenderNode.$tag$ === "slot") {
         node["s-cr"] = hostElm["s-cr"];
       }
-    } else if (((_b = childRenderNode.$tag$) == null ? void 0 : _b.toString().includes("-")) && !childRenderNode.$elm$.shadowRoot) {
+    } else if (((_b = childRenderNode.$tag$) == null ? void 0 : _b.toString().includes("-")) && childRenderNode.$tag$ !== "slot-fb" && !childRenderNode.$elm$.shadowRoot) {
       const cmpMeta = getHostRef(childRenderNode.$elm$);
-      const scopeId3 = getScopeId(
-        cmpMeta.$cmpMeta$,
-        BUILD14.mode ? childRenderNode.$elm$.getAttribute("s-mode") : void 0
-      );
-      const styleSheet = win.document.querySelector(`style[sty-id="${scopeId3}"]`);
-      if (styleSheet) {
-        hostElm.shadowRoot.append(styleSheet.cloneNode(true));
+      if (cmpMeta) {
+        const scopeId3 = getScopeId(
+          cmpMeta.$cmpMeta$,
+          BUILD14.mode ? childRenderNode.$elm$.getAttribute("s-mode") : void 0
+        );
+        const styleSheet = win.document.querySelector(`style[sty-id="${scopeId3}"]`);
+        if (styleSheet) {
+          hostElm.shadowRoot.append(styleSheet.cloneNode(true));
+        }
       }
     }
     if (childRenderNode.$tag$ === "slot") {
@@ -1532,6 +1552,9 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       }
       if (!hosts[slottedItem.hostId]) continue;
       const hostEle = hosts[slottedItem.hostId];
+      if (hostEle.shadowRoot && slottedItem.node.parentElement !== hostEle) {
+        hostEle.appendChild(slottedItem.node);
+      }
       if (!hostEle.shadowRoot || !shadowRoot) {
         if (!slottedItem.slot["s-cr"]) {
           slottedItem.slot["s-cr"] = hostEle["s-cr"];
@@ -1542,13 +1565,13 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
           }
         }
         addSlotRelocateNode(slottedItem.node, slottedItem.slot, false, slottedItem.node["s-oo"]);
+        if (((_c = slottedItem.node.parentElement) == null ? void 0 : _c.shadowRoot) && slottedItem.node["getAttribute"] && slottedItem.node.getAttribute("slot")) {
+          slottedItem.node.removeAttribute("slot");
+        }
         if (BUILD14.experimentalSlotFixes) {
           patchSlottedNode(slottedItem.node);
         }
       }
-      if (hostEle.shadowRoot && slottedItem.node.parentElement !== hostEle) {
-        hostEle.appendChild(slottedItem.node);
-      }
     }
   }
   if (BUILD14.scoped && scopeId2 && slotNodes.length) {
@@ -1561,7 +1584,10 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
     const rnLen = shadowRootNodes.length;
     if (rnLen) {
       for (rnIdex; rnIdex < rnLen; rnIdex++) {
-        shadowRoot.appendChild(shadowRootNodes[rnIdex]);
+        const node = shadowRootNodes[rnIdex];
+        if (node) {
+          shadowRoot.appendChild(node);
+        }
       }
       Array.from(hostElm.childNodes).forEach((node) => {
         if (typeof node["s-en"] !== "string" && typeof node["s-sn"] !== "string") {
@@ -1820,13 +1846,17 @@ function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNod
   parentVNode.$children$[childVNode.$index$] = childVNode;
 }
 var addSlottedNodes = (slottedNodes, slotNodeId, slotName, slotNode, hostId) => {
+  var _a, _b;
   let slottedNode = slotNode.nextSibling;
   slottedNodes[slotNodeId] = slottedNodes[slotNodeId] || [];
-  while (slottedNode && ((slottedNode["getAttribute"] && slottedNode.getAttribute("slot") || slottedNode["s-sn"]) === slotName || slotName === "" && !slottedNode["s-sn"] && (slottedNode.nodeType === 8 /* CommentNode */ || slottedNode.nodeType === 3 /* TextNode */ || slottedNode.tagName === "SLOT"))) {
-    slottedNode["s-sn"] = slotName;
-    slottedNodes[slotNodeId].push({ slot: slotNode, node: slottedNode, hostId });
-    slottedNode = slottedNode.nextSibling;
-  }
+  if (!slottedNode || ((_a = slottedNode.nodeValue) == null ? void 0 : _a.startsWith(SLOT_NODE_ID + "."))) return;
+  do {
+    if (slottedNode && ((slottedNode["getAttribute"] && slottedNode.getAttribute("slot") || slottedNode["s-sn"]) === slotName || slotName === "" && !slottedNode["s-sn"] && (!slottedNode["getAttribute"] || !slottedNode.getAttribute("slot")) && (slottedNode.nodeType === 8 /* CommentNode */ || slottedNode.nodeType === 3 /* TextNode */))) {
+      slottedNode["s-sn"] = slotName;
+      slottedNodes[slotNodeId].push({ slot: slotNode, node: slottedNode, hostId });
+    }
+    slottedNode = slottedNode == null ? void 0 : slottedNode.nextSibling;
+  } while (slottedNode && !((_b = slottedNode.nodeValue) == null ? void 0 : _b.startsWith(SLOT_NODE_ID + ".")));
 };
 var findCorrespondingNode = (node, type) => {
   let sibling = node;
@@ -2248,7 +2278,10 @@ var scopeCss = (cssText, scopeId2, commentOriginalSelector) => {
 // src/runtime/mode.ts
 var computeMode = (elm) => modeResolutionChain.map((h2) => h2(elm)).find((m) => !!m);
 var setMode = (handler) => modeResolutionChain.push(handler);
-var getMode = (ref) => getHostRef(ref).$modeName$;
+var getMode = (ref) => {
+  var _a;
+  return (_a = getHostRef(ref)) == null ? void 0 : _a.$modeName$;
+};
 
 // src/runtime/proxy-component.ts
 import { BUILD as BUILD23 } from "@stencil/core/internal/app-data";
@@ -2297,7 +2330,10 @@ import { BUILD as BUILD17 } from "@stencil/core/internal/app-data";
 
 // src/runtime/element.ts
 import { BUILD as BUILD16 } from "@stencil/core/internal/app-data";
-var getElement = (ref) => BUILD16.lazyLoad ? getHostRef(ref).$hostElement$ : ref;
+var getElement = (ref) => {
+  var _a;
+  return BUILD16.lazyLoad ? (_a = getHostRef(ref)) == null ? void 0 : _a.$hostElement$ : ref;
+};
 
 // src/runtime/event-emitter.ts
 var createEvent = (ref, name, flags) => {
@@ -3097,6 +3133,12 @@ var scheduleUpdate = (hostRef, isInitialLoad) => {
   }
   attachToAncestor(hostRef, hostRef.$ancestorComponent$);
   const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
+  if (isInitialLoad) {
+    queueMicrotask(() => {
+      dispatch();
+    });
+    return;
+  }
   return BUILD21.taskQueue ? writeTask(dispatch) : dispatch();
 };
 var dispatchHooks = (hostRef, isInitialLoad) => {
@@ -3286,9 +3328,10 @@ var postUpdateComponent = (hostRef) => {
   }
 };
 var forceUpdate = (ref) => {
+  var _a;
   if (BUILD21.updatable && (Build.isBrowser || Build.isTesting)) {
     const hostRef = getHostRef(ref);
-    const isConnected = hostRef.$hostElement$.isConnected;
+    const isConnected = (_a = hostRef == null ? void 0 : hostRef.$hostElement$) == null ? void 0 : _a.isConnected;
     if (isConnected && (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
       scheduleUpdate(hostRef, false);
     }
@@ -3353,6 +3396,9 @@ var serverSideConnected = (elm) => {
 var getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
 var setValue = (ref, propName, newVal, cmpMeta) => {
   const hostRef = getHostRef(ref);
+  if (!hostRef) {
+    return;
+  }
   if (BUILD22.lazyLoad && !hostRef) {
     throw new Error(
       `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`
@@ -3434,10 +3480,11 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
       const originalFormAssociatedCallback = prototype[cbName];
       Object.defineProperty(prototype, cbName, {
         value(...args) {
+          var _a2;
           const hostRef = getHostRef(this);
-          const instance = BUILD23.lazyLoad ? hostRef.$lazyInstance$ : this;
+          const instance = BUILD23.lazyLoad ? hostRef == null ? void 0 : hostRef.$lazyInstance$ : this;
           if (!instance) {
-            hostRef.$onReadyPromise$.then((asyncInstance) => {
+            (_a2 = hostRef == null ? void 0 : hostRef.$onReadyPromise$) == null ? void 0 : _a2.then((asyncInstance) => {
               const cb = asyncInstance[cbName];
               typeof cb === "function" && cb.call(asyncInstance, ...args);
             });
@@ -3482,6 +3529,9 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         Object.defineProperty(prototype, memberName, {
           set(newValue) {
             const ref = getHostRef(this);
+            if (!ref) {
+              return;
+            }
             if (BUILD23.isDev) {
               if (
                 // we are proxying the instance (not element)
@@ -3579,7 +3629,7 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
           } else if (propName == null) {
             const hostRef = getHostRef(this);
             const flags2 = hostRef == null ? void 0 : hostRef.$flags$;
-            if (flags2 && !(flags2 & 8 /* isConstructingInstance */) && flags2 & 128 /* isWatchReady */ && newValue !== oldValue) {
+            if (hostRef && flags2 && !(flags2 & 8 /* isConstructingInstance */) && flags2 & 128 /* isWatchReady */ && newValue !== oldValue) {
               const elm = BUILD23.lazyLoad ? hostRef.$hostElement$ : this;
               const instance = BUILD23.lazyLoad ? hostRef.$lazyInstance$ : elm;
               const entry = (_a2 = cmpMeta.$watchers$) == null ? void 0 : _a2[attrName];
@@ -3713,6 +3763,9 @@ var fireConnectedCallback = (instance, elm) => {
 var connectedCallback = (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
+    if (!hostRef) {
+      return;
+    }
     const cmpMeta = hostRef.$cmpMeta$;
     const endConnected = createTime("connectedCallback", cmpMeta.$tagName$);
     if (BUILD25.hostListenerTargetParent) {
@@ -3738,11 +3791,6 @@ var connectedCallback = (elm) => {
         if (BUILD25.hydrateServerSide || (BUILD25.slot || BUILD25.shadowDom) && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
         cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */)) {
           setContentReference(elm);
-        } else if (BUILD25.hydrateClientSide && !(cmpMeta.$flags$ & 4 /* hasSlotRelocation */)) {
-          const commendPlaceholder = elm.firstChild;
-          if ((commendPlaceholder == null ? void 0 : commendPlaceholder.nodeType) === 8 /* CommentNode */ && !commendPlaceholder["s-cn"] && !commendPlaceholder.nodeValue) {
-            elm.removeChild(commendPlaceholder);
-          }
         }
       }
       if (BUILD25.asyncLoading) {
@@ -3801,7 +3849,7 @@ var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
     if (BUILD26.hostListener) {
-      if (hostRef.$rmListeners$) {
+      if (hostRef == null ? void 0 : hostRef.$rmListeners$) {
         hostRef.$rmListeners$.map((rmListener) => rmListener());
         hostRef.$rmListeners$ = void 0;
       }
@@ -3847,7 +3895,7 @@ var proxyCustomElement = (Cstr, compactMeta) => {
     cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
   }
   if (BUILD27.experimentalSlotFixes) {
-    if (BUILD27.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+    if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
       patchPseudoShadowDom(Cstr.prototype);
     }
   } else {
@@ -3877,6 +3925,9 @@ var proxyCustomElement = (Cstr, compactMeta) => {
     connectedCallback() {
       if (!this.__hasHostListenerAttached) {
         const hostRef = getHostRef(this);
+        if (!hostRef) {
+          return;
+        }
         addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
         this.__hasHostListenerAttached = true;
       }
@@ -3914,7 +3965,7 @@ var forceModeUpdate = (elm) => {
   if (BUILD27.style && BUILD27.mode && !BUILD27.lazyLoad) {
     const mode = computeMode(elm);
     const hostRef = getHostRef(elm);
-    if (hostRef.$modeName$ !== mode) {
+    if (hostRef && hostRef.$modeName$ !== mode) {
       const cmpMeta = hostRef.$cmpMeta$;
       const oldScopeId = elm["s-sc"];
       const scopeId2 = getScopeId(cmpMeta, mode);
@@ -3939,6 +3990,9 @@ import { BUILD as BUILD28 } from "@stencil/core/internal/app-data";
 // src/runtime/hmr-component.ts
 var hmrStart = (hostElement, cmpMeta, hmrVersionId) => {
   const hostRef = getHostRef(hostElement);
+  if (!hostRef) {
+    return;
+  }
   hostRef.$flags$ = 1 /* hasConnected */;
   initializeComponent(hostElement, hostRef, cmpMeta, hmrVersionId);
 };
@@ -4031,6 +4085,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
         }
         connectedCallback() {
           const hostRef = getHostRef(this);
+          if (!hostRef) {
+            return;
+          }
           if (!this.hasRegisteredEventListeners) {
             this.hasRegisteredEventListeners = true;
             addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
@@ -4050,6 +4107,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           plt.raf(() => {
             var _a3;
             const hostRef = getHostRef(this);
+            if (!hostRef) {
+              return;
+            }
             const i2 = deferredConnectedCallbacks.findIndex((host) => host === this);
             if (i2 > -1) {
               deferredConnectedCallbacks.splice(i2, 1);
@@ -4060,11 +4120,12 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           });
         }
         componentOnReady() {
-          return getHostRef(this).$onReadyPromise$;
+          var _a3;
+          return (_a3 = getHostRef(this)) == null ? void 0 : _a3.$onReadyPromise$;
         }
       };
       if (BUILD28.experimentalSlotFixes) {
-        if (BUILD28.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+        if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
           patchPseudoShadowDom(HostElement.prototype);
         }
       } else {
@@ -4410,6 +4471,7 @@ export {
   styles,
   supportsConstructableStylesheets,
   supportsListenerOptions,
+  supportsMutableAdoptedStyleSheets,
   supportsShadow,
   win,
   writeTask

package/internal/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/internal/client",
-  "version": "4.35.3",
+  "version": "4.36.0",
   "description": "Stencil internal client platform to be imported by the Stencil Compiler and internal runtime. Breaking changes can and will happen at any time.",
   "main": "./index.js",
   "exports": "./index.js",

package/internal/client/patch-browser.js

@@ -1,5 +1,5 @@
 /*
- Stencil Client Patch Browser v4.35.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.36.0 | MIT Licensed | https://stenciljs.com
  */
 
 // src/client/client-patch-browser.ts