@stencil/core 4.18.3-dev.1718859699.dac3e33 → 4.18.3-dev.1719000800.2790882

package/internal/client/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@stencil/core/internal/client",
-  "version": "4.18.3-dev.1718859699.dac3e33",
+  "version": "4.18.3-dev.1719000800.2790882",
   "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",
+  "type": "module",
   "private": true,
   "sideEffects": false
 }

package/internal/client/patch-browser.js

@@ -1,5 +1,5 @@
 /*
- Stencil Client Patch Browser v4.18.3-dev.1718859699.dac3e33 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.18.3-dev.1719000800.2790882 | MIT Licensed | https://stenciljs.com
  */
 
 // src/client/client-patch-browser.ts

package/internal/hydrate/index.js

@@ -1,5 +1,5 @@
 /*
- Stencil Hydrate Platform v4.18.3-dev.1718859699.dac3e33 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.18.3-dev.1719000800.2790882 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -7,6 +7,9 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
+// src/hydrate/platform/index.ts
+import { BUILD as BUILD22 } from "@stencil/core/internal/app-data";
+
 // src/runtime/asset-path.ts
 var getAssetPath = (path) => {
   const assetUrl = new URL(path, plt.$resourcesUrl$);
@@ -28,7 +31,6 @@ var isComplexType = (o) => {
   o = typeof o;
   return o === "object" || o === "function";
 };
-var isPromise = (v) => !!v && (typeof v === "object" || typeof v === "function") && typeof v.then === "function";
 
 // src/utils/query-nonce-meta-tag-content.ts
 function queryNonceMetaTagContent(doc2) {
@@ -863,9 +865,9 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
     elm = newVNode2.$elm$ = BUILD10.svg ? doc.createElementNS(
       isSvgMode ? SVG_NS : HTML_NS,
-      BUILD10.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
+      !useNativeShadowDom && BUILD10.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     ) : doc.createElement(
-      BUILD10.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
+      !useNativeShadowDom && BUILD10.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     );
     if (BUILD10.svg && isSvgMode && newVNode2.$tag$ === "foreignObject") {
       isSvgMode = false;
@@ -2409,6 +2411,8 @@ var proxyCustomElement = (Cstr, compactMeta) => {
       registerHost(this, cmpMeta);
     },
     connectedCallback() {
+      const hostRef = getHostRef(this);
+      addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
       connectedCallback(this);
       if (BUILD18.connectedCallback && originalConnectedCallback) {
         originalConnectedCallback.call(this);
@@ -2422,13 +2426,21 @@ var proxyCustomElement = (Cstr, compactMeta) => {
     },
     __attachShadow() {
       if (supportsShadow) {
-        if (BUILD18.shadowDelegatesFocus) {
-          this.attachShadow({
-            mode: "open",
-            delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
-          });
+        if (!this.shadowRoot) {
+          if (BUILD18.shadowDelegatesFocus) {
+            this.attachShadow({
+              mode: "open",
+              delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
+            });
+          } else {
+            this.attachShadow({ mode: "open" });
+          }
         } else {
-          this.attachShadow({ mode: "open" });
+          if (this.shadowRoot.mode !== "open") {
+            throw new Error(
+              `Unable to re-use existing shadow root for ${cmpMeta.$tagName$}! Mode is set to ${this.shadowRoot.mode} but Stencil only supports open shadow roots.`
+            );
+          }
         }
       } else {
         this.shadowRoot = this;
@@ -2538,17 +2550,26 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
         // StencilLazyHost
         constructor(self) {
           super(self);
+          this.hasRegisteredEventListeners = false;
           self = this;
           registerHost(self, cmpMeta);
           if (BUILD19.shadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
             if (supportsShadow) {
-              if (BUILD19.shadowDelegatesFocus) {
-                self.attachShadow({
-                  mode: "open",
-                  delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
-                });
+              if (!self.shadowRoot) {
+                if (BUILD19.shadowDelegatesFocus) {
+                  self.attachShadow({
+                    mode: "open",
+                    delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
+                  });
+                } else {
+                  self.attachShadow({ mode: "open" });
+                }
               } else {
-                self.attachShadow({ mode: "open" });
+                if (self.shadowRoot.mode !== "open") {
+                  throw new Error(
+                    `Unable to re-use existing shadow root for ${cmpMeta.$tagName$}! Mode is set to ${self.shadowRoot.mode} but Stencil only supports open shadow roots.`
+                  );
+                }
               }
             } else if (!BUILD19.hydrateServerSide && !("shadowRoot" in self)) {
               self.shadowRoot = self;
@@ -2556,6 +2577,11 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           }
         }
         connectedCallback() {
+          const hostRef = getHostRef(this);
+          if (!this.hasRegisteredEventListeners) {
+            this.hasRegisteredEventListeners = true;
+            addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
+          }
           if (appLoadFallback) {
             clearTimeout(appLoadFallback);
             appLoadFallback = null;
@@ -2833,7 +2859,7 @@ var insertChildVNodeAnnotations = (doc2, vnodeChild, cmpData, hostId, depth, ind
 var hAsync = (nodeName, vnodeData, ...children) => {
   if (Array.isArray(children) && children.length > 0) {
     const flatChildren = children.flat(Infinity);
-    if (flatChildren.some(isPromise)) {
+    if (flatChildren.some((child) => child instanceof Promise)) {
       return Promise.all(flatChildren).then((resolvedChildren) => {
         return h(nodeName, vnodeData, ...resolvedChildren);
       }).catch((err2) => {
@@ -2841,7 +2867,7 @@ var hAsync = (nodeName, vnodeData, ...children) => {
         return h(nodeName, vnodeData);
       });
     }
-    return h(nodeName, vnodeData, ...children);
+    return h(nodeName, vnodeData, ...flatChildren);
   }
   return h(nodeName, vnodeData);
 };
@@ -2854,31 +2880,48 @@ var globalScripts = (
 );
 
 // src/hydrate/platform/proxy-host-element.ts
-function proxyHostElement(elm, cmpMeta) {
+import { BUILD as BUILD21 } from "@stencil/core/internal/app-data";
+function proxyHostElement(elm, cmpMeta, opts) {
   if (typeof elm.componentOnReady !== "function") {
     elm.componentOnReady = componentOnReady;
   }
   if (typeof elm.forceUpdate !== "function") {
     elm.forceUpdate = forceUpdate2;
   }
-  if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-    elm.shadowRoot = elm;
+  if (!elm.shadowRoot && !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
+    if (BUILD21.shadowDelegatesFocus) {
+      elm.attachShadow({
+        mode: "open",
+        delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
+      });
+    } else if (opts.serializeShadowRoot) {
+      elm.attachShadow({ mode: "open" });
+    } else {
+      elm.shadowRoot = elm;
+    }
   }
   if (cmpMeta.$members$ != null) {
     const hostRef = getHostRef(elm);
     const members = Object.entries(cmpMeta.$members$);
     members.forEach(([memberName, m]) => {
+      var _a, _b;
       const memberFlags = m[0];
       if (memberFlags & 31 /* Prop */) {
         const attributeName = m[1] || memberName;
-        const attrValue = elm.getAttribute(attributeName);
+        let attrValue = elm.getAttribute(attributeName);
+        if ((attrValue == null ? void 0 : attrValue.startsWith("{")) && attrValue.endsWith("}") || (attrValue == null ? void 0 : attrValue.startsWith("[")) && attrValue.endsWith("]")) {
+          try {
+            attrValue = JSON.parse(attrValue);
+          } catch (e) {
+          }
+        }
         if (attrValue != null) {
           const parsedAttrValue = parsePropertyValue(attrValue, memberFlags);
-          hostRef.$instanceValues$.set(memberName, parsedAttrValue);
+          (_a = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _a.set(memberName, parsedAttrValue);
         }
         const ownValue = elm[memberName];
         if (ownValue !== void 0) {
-          hostRef.$instanceValues$.set(memberName, ownValue);
+          (_b = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _b.set(memberName, ownValue);
           delete elm[memberName];
         }
         Object.defineProperty(elm, memberName, {
@@ -2894,8 +2937,12 @@ function proxyHostElement(elm, cmpMeta) {
       } else if (memberFlags & 64 /* Method */) {
         Object.defineProperty(elm, memberName, {
           value(...args) {
+            var _a2;
             const ref = getHostRef(this);
-            return ref.$onInstancePromise$.then(() => ref.$lazyInstance$[memberName](...args)).catch(consoleError);
+            return (_a2 = ref == null ? void 0 : ref.$onInstancePromise$) == null ? void 0 : _a2.then(() => {
+              var _a3;
+              return (_a3 = ref == null ? void 0 : ref.$lazyInstance$) == null ? void 0 : _a3[memberName](...args);
+            }).catch(consoleError);
           }
         });
       }
@@ -2903,7 +2950,8 @@ function proxyHostElement(elm, cmpMeta) {
   }
 }
 function componentOnReady() {
-  return getHostRef(this).$onReadyPromise$;
+  var _a;
+  return (_a = getHostRef(this)) == null ? void 0 : _a.$onReadyPromise$;
 }
 function forceUpdate2() {
 }
@@ -2919,7 +2967,7 @@ function hydrateApp(win2, opts, results, afterHydrate, resolve) {
   let tmrId;
   let ranCompleted = false;
   function hydratedComplete() {
-    global.clearTimeout(tmrId);
+    globalThis.clearTimeout(tmrId);
     createdElements.clear();
     connectedElements.clear();
     if (!ranCompleted) {
@@ -2962,7 +3010,7 @@ function hydrateApp(win2, opts, results, afterHydrate, resolve) {
             createdElements.add(elm);
             elm.connectedCallback = patchedConnectedCallback2;
             registerHost(elm, Cstr.cmpMeta);
-            proxyHostElement(elm, Cstr.cmpMeta);
+            proxyHostElement(elm, Cstr.cmpMeta, opts);
           }
         }
       }
@@ -3001,7 +3049,7 @@ function hydrateApp(win2, opts, results, afterHydrate, resolve) {
       patchElement2(elm);
       return elm;
     };
-    tmrId = global.setTimeout(timeoutExceeded, opts.timeout);
+    tmrId = globalThis.setTimeout(timeoutExceeded, opts.timeout);
     plt.$resourcesUrl$ = new URL(opts.resourcesUrl || "./", doc.baseURI).href;
     globalScripts();
     patchChild2(win2.document.body);
@@ -3023,6 +3071,8 @@ async function hydrateComponent(win2, results, tagName, elm, waitingElements) {
     const cmpMeta = Cstr.cmpMeta;
     if (cmpMeta != null) {
       waitingElements.add(elm);
+      const hostRef = getHostRef(this);
+      addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
       try {
         connectedCallback(elm);
         await elm.componentOnReady();
@@ -3155,7 +3205,7 @@ function waitingOnElementsMsg(waitingElements) {
 }
 
 // src/hydrate/platform/index.ts
-import { BUILD as BUILD21, Env, NAMESPACE as NAMESPACE2 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD23, Env, NAMESPACE as NAMESPACE2 } from "@stencil/core/internal/app-data";
 var customError;
 var cmpModules = /* @__PURE__ */ new Map();
 var getModule = (tagName) => {
@@ -3241,7 +3291,7 @@ var plt = {
 var setPlatformHelpers = (helpers) => {
   Object.assign(plt, helpers);
 };
-var supportsShadow = false;
+var supportsShadow = BUILD22.shadowDom;
 var supportsListenerOptions = false;
 var supportsConstructableStylesheets = false;
 var hostRefs = /* @__PURE__ */ new WeakMap();
@@ -3259,7 +3309,6 @@ var registerHost = (elm, cmpMeta) => {
   hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
   elm["s-p"] = [];
   elm["s-rc"] = [];
-  addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, false);
   return hostRefs.set(elm, hostRef);
 };
 var Build = {
@@ -3271,7 +3320,7 @@ var Build = {
 var styles = /* @__PURE__ */ new Map();
 var modeResolutionChain = [];
 export {
-  BUILD21 as BUILD,
+  BUILD23 as BUILD,
   Build,
   Env,
   Fragment,

package/internal/hydrate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/internal/hydrate",
-  "version": "4.18.3-dev.1718859699.dac3e33",
+  "version": "4.18.3-dev.1719000800.2790882",
   "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.d.ts

@@ -1,5 +1,7 @@
 // Generated by dts-bundle-generator v9.5.1
 
+import { Readable } from 'node:stream';
+
 export declare function createWindowFromHtml(templateHtml: string, uniqueId: string): any;
 export interface HydrateDocumentOptions {
 	/**
@@ -134,6 +136,19 @@ export interface SerializeDocumentOptions extends HydrateDocumentOptions {
 	 * Remove HTML comments. Defaults to `true`.
 	 */
 	removeHtmlComments?: boolean;
+	/**
+	 * If set to `false` Stencil will ignore the fact that a component has a `shadow: true`
+	 * flag and serializes it as a scoped component. If set to `true` the component will
+	 * be rendered within a Declarative Shadow DOM.
+	 * @default false
+	 */
+	serializeShadowRoot?: boolean;
+	/**
+	 * The `fullDocument` flag determines the format of the rendered output. Set it to true to
+	 * generate a complete HTML document, or false to render only the component.
+	 * @default true
+	 */
+	fullDocument?: boolean;
 }
 export interface HydrateFactoryOptions extends SerializeDocumentOptions {
 	serializeToHtml: boolean;
@@ -165,23 +180,23 @@ export interface HydrateResults {
 	buildId: string;
 	diagnostics: Diagnostic[];
 	url: string;
-	host: string;
-	hostname: string;
-	href: string;
-	port: string;
-	pathname: string;
-	search: string;
-	hash: string;
-	html: string;
+	host: string | null;
+	hostname: string | null;
+	href: string | null;
+	port: string | null;
+	pathname: string | null;
+	search: string | null;
+	hash: string | null;
+	html: string | null;
 	components: HydrateComponent[];
 	anchors: HydrateAnchorElement[];
 	imgs: HydrateImgElement[];
 	scripts: HydrateScriptElement[];
 	styles: HydrateStyleElement[];
 	staticData: HydrateStaticData[];
-	title: string;
+	title: string | null;
 	hydratedCount: number;
-	httpStatus: number;
+	httpStatus: number | null;
 }
 export interface HydrateComponent {
 	tag: string;
@@ -211,8 +226,11 @@ export interface HydrateStaticData {
 	type: string;
 	content: string;
 }
+export declare function streamToString(html: string | any, option?: SerializeDocumentOptions): Readable;
+export declare function renderToString(html: string | any, options: SerializeDocumentOptions | undefined, asStream: true): Readable;
 export declare function renderToString(html: string | any, options?: SerializeDocumentOptions): Promise<HydrateResults>;
+export declare function hydrateDocument(doc: any | string, options: HydrateDocumentOptions | undefined, asStream?: boolean): Readable;
 export declare function hydrateDocument(doc: any | string, options?: HydrateDocumentOptions): Promise<HydrateResults>;
-export declare function serializeDocumentToString(doc: any, opts: HydrateFactoryOptions): string;
+export declare function serializeDocumentToString(doc: Document, opts: HydrateFactoryOptions): string;
 
 export {};