@stencil/core 4.35.3 → 4.36.0

package/internal/hydrate/index.js

@@ -1,5 +1,5 @@
 /*
- Stencil Hydrate Platform v4.35.3 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.36.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -266,7 +266,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
@@ -813,6 +819,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);
@@ -979,7 +988,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) {
@@ -1004,7 +1017,11 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
         }
       }
     } else if (BUILD6.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
-      styleContainerNode.adoptedStyleSheets.push(style);
+      if (supportsMutableAdoptedStyleSheets) {
+        styleContainerNode.adoptedStyleSheets.push(style);
+      } else {
+        styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
+      }
     }
   }
   return scopeId2;
@@ -1180,7 +1197,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 = [];
@@ -1244,15 +1261,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$,
-        BUILD8.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$,
+          BUILD8.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") {
@@ -1300,6 +1319,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"];
@@ -1310,13 +1332,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 (BUILD8.experimentalSlotFixes) {
           patchSlottedNode(slottedItem.node);
         }
       }
-      if (hostEle.shadowRoot && slottedItem.node.parentElement !== hostEle) {
-        hostEle.appendChild(slottedItem.node);
-      }
     }
   }
   if (BUILD8.scoped && scopeId2 && slotNodes.length) {
@@ -1329,7 +1351,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") {
@@ -1588,13 +1613,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;
@@ -2016,7 +2045,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 BUILD17 } from "@stencil/core/internal/app-data";
@@ -2065,7 +2097,10 @@ import { BUILD as BUILD11 } from "@stencil/core/internal/app-data";
 
 // src/runtime/element.ts
 import { BUILD as BUILD10 } from "@stencil/core/internal/app-data";
-var getElement = (ref) => BUILD10.lazyLoad ? getHostRef(ref).$hostElement$ : ref;
+var getElement = (ref) => {
+  var _a;
+  return BUILD10.lazyLoad ? (_a = getHostRef(ref)) == null ? void 0 : _a.$hostElement$ : ref;
+};
 
 // src/runtime/event-emitter.ts
 var createEvent = (ref, name, flags) => {
@@ -2865,6 +2900,12 @@ var scheduleUpdate = (hostRef, isInitialLoad) => {
   }
   attachToAncestor(hostRef, hostRef.$ancestorComponent$);
   const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
+  if (isInitialLoad) {
+    queueMicrotask(() => {
+      dispatch();
+    });
+    return;
+  }
   return BUILD15.taskQueue ? writeTask(dispatch) : dispatch();
 };
 var dispatchHooks = (hostRef, isInitialLoad) => {
@@ -3054,9 +3095,10 @@ var postUpdateComponent = (hostRef) => {
   }
 };
 var forceUpdate = (ref) => {
+  var _a;
   if (BUILD15.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);
     }
@@ -3121,6 +3163,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 (BUILD16.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).`
@@ -3202,10 +3247,11 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
       const originalFormAssociatedCallback = prototype[cbName];
       Object.defineProperty(prototype, cbName, {
         value(...args) {
+          var _a2;
           const hostRef = getHostRef(this);
-          const instance = BUILD17.lazyLoad ? hostRef.$lazyInstance$ : this;
+          const instance = BUILD17.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);
             });
@@ -3250,6 +3296,9 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         Object.defineProperty(prototype, memberName, {
           set(newValue) {
             const ref = getHostRef(this);
+            if (!ref) {
+              return;
+            }
             if (BUILD17.isDev) {
               if (
                 // we are proxying the instance (not element)
@@ -3347,7 +3396,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 = BUILD17.lazyLoad ? hostRef.$hostElement$ : this;
               const instance = BUILD17.lazyLoad ? hostRef.$lazyInstance$ : elm;
               const entry = (_a2 = cmpMeta.$watchers$) == null ? void 0 : _a2[attrName];
@@ -3481,6 +3530,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 (BUILD19.hostListenerTargetParent) {
@@ -3506,11 +3558,6 @@ var connectedCallback = (elm) => {
         if (BUILD19.hydrateServerSide || (BUILD19.slot || BUILD19.shadowDom) && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
         cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */)) {
           setContentReference(elm);
-        } else if (BUILD19.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 (BUILD19.asyncLoading) {
@@ -3569,7 +3616,7 @@ var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
     if (BUILD20.hostListener) {
-      if (hostRef.$rmListeners$) {
+      if (hostRef == null ? void 0 : hostRef.$rmListeners$) {
         hostRef.$rmListeners$.map((rmListener) => rmListener());
         hostRef.$rmListeners$ = void 0;
       }
@@ -3615,7 +3662,7 @@ var proxyCustomElement = (Cstr, compactMeta) => {
     cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
   }
   if (BUILD21.experimentalSlotFixes) {
-    if (BUILD21.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+    if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
       patchPseudoShadowDom(Cstr.prototype);
     }
   } else {
@@ -3645,6 +3692,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;
       }
@@ -3682,7 +3732,7 @@ var forceModeUpdate = (elm) => {
   if (BUILD21.style && BUILD21.mode && !BUILD21.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);
@@ -3707,6 +3757,9 @@ import { BUILD as BUILD22 } 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);
 };
@@ -3799,6 +3852,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);
@@ -3818,6 +3874,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);
@@ -3828,11 +3887,12 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           });
         }
         componentOnReady() {
-          return getHostRef(this).$onReadyPromise$;
+          var _a3;
+          return (_a3 = getHostRef(this)) == null ? void 0 : _a3.$onReadyPromise$;
         }
       };
       if (BUILD22.experimentalSlotFixes) {
-        if (BUILD22.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+        if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
           patchPseudoShadowDom(HostElement.prototype);
         }
       } else {
@@ -4177,7 +4237,7 @@ function proxyHostElement(elm, cstr) {
             get: function() {
               var _a2;
               const ref = getHostRef(this);
-              const attrPropVal2 = (_a2 = ref.$instanceValues$) == null ? void 0 : _a2.get(memberName);
+              const attrPropVal2 = (_a2 = ref == null ? void 0 : ref.$instanceValues$) == null ? void 0 : _a2.get(memberName);
               if (origGetter && attrPropVal2 === void 0 && !getValue(this, memberName)) {
                 setValue(this, memberName, origGetter.apply(this), cmpMeta);
               }
@@ -4338,13 +4398,16 @@ async function hydrateComponent(win2, results, tagName, elm, waitingElements) {
     if (cmpMeta != null) {
       waitingElements.add(elm);
       const hostRef = getHostRef(this);
+      if (!hostRef) {
+        return;
+      }
       addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
       try {
         connectedCallback(elm);
         await elm.componentOnReady();
         results.hydratedCount++;
         const ref = getHostRef(elm);
-        const modeName = !ref.$modeName$ ? "$" : ref.$modeName$;
+        const modeName = !(ref == null ? void 0 : ref.$modeName$) ? "$" : ref == null ? void 0 : ref.$modeName$;
         if (!results.components.some((c) => c.tag === tagName && c.mode === modeName)) {
           results.components.push({
             tag: tagName,
@@ -4578,6 +4641,7 @@ var setPlatformHelpers = (helpers) => {
 var supportsShadow = BUILD24.shadowDom;
 var supportsListenerOptions = false;
 var supportsConstructableStylesheets = false;
+var supportsMutableAdoptedStyleSheets = false;
 var getHostRef = (ref) => {
   if (ref.__stencil__getHostRef) {
     return ref.__stencil__getHostRef();
@@ -4674,6 +4738,7 @@ export {
   styles,
   supportsConstructableStylesheets,
   supportsListenerOptions,
+  supportsMutableAdoptedStyleSheets,
   supportsShadow,
   win,
   writeTask

package/internal/hydrate/package.json

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

package/internal/hydrate/runner.js

@@ -1,5 +1,5 @@
 /*
- Stencil Hydrate Runner v4.35.3 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Runner v4.36.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -10380,6 +10380,11 @@ function* streamToHtml(node, opts, output) {
         const mode = ` shadowrootmode="open"`;
         yield mode;
         output.currentLineWidth += mode.length;
+        if (node.delegatesFocus) {
+          const delegatesFocusAttr = " shadowrootdelegatesfocus";
+          yield delegatesFocusAttr;
+          output.currentLineWidth += delegatesFocusAttr.length;
+        }
       }
       const attrsLength = node.attributes.length;
       const attributes = opts.prettyHtml && attrsLength > 1 ? cloneAttributes(node.attributes, true) : node.attributes;
@@ -10945,7 +10950,9 @@ var MockElement = class extends MockNode2 {
     addEventListener(this, type, handler);
   }
   attachShadow(_opts) {
+    var _a2;
     const shadowRoot = this.ownerDocument.createDocumentFragment();
+    shadowRoot.delegatesFocus = (_a2 = _opts.delegatesFocus) != null ? _a2 : false;
     this.shadowRoot = shadowRoot;
     return shadowRoot;
   }

package/internal/package.json

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