@stencil/core 5.0.0-beta.35 → 5.0.0-beta.36

package/dist/runtime/index.js

@@ -1003,7 +1003,9 @@ const patchTextContent = (hostElementPrototype) => {
 	Object.defineProperty(hostElementPrototype, "textContent", {
 		get: function() {
 			let text = "";
-			(this.__childNodes ? this.childNodes : getSlottedChildNodes(this.childNodes)).forEach((node) => text += node.textContent || "");
+			(this.__childNodes ? this.childNodes : getSlottedChildNodes(this.childNodes)).forEach((node) => {
+				if (node.nodeType !== NODE_TYPE.CommentNode) text += node.textContent || "";
+			});
 			return text;
 		},
 		set: function(value) {
@@ -1011,7 +1013,7 @@ const patchTextContent = (hostElementPrototype) => {
 				if (node["s-ol"]) node["s-ol"].remove();
 				node.remove();
 			});
-			this.insertAdjacentHTML("beforeend", value);
+			if (value != null && value !== "") this.append(this.ownerDocument.createTextNode(String(value)));
 		}
 	});
 };
@@ -1652,7 +1654,7 @@ let _registry;
 const setRegistry = (registry) => {
 	_registry = registry;
 };
-const getRegistry = () => _registry ?? customElements;
+const getRegistry = () => _registry ?? globalThis.customElements;
 /**
 * @param elm a defined component host
 * @returns the registry the host's class was defined in, else the active registry
@@ -3627,6 +3629,11 @@ const addSlottedNodes = (slottedNodes, slotNodeId, slotName, slotNode, hostId) =
 * @returns the first corresponding node of the type
 */
 const findCorrespondingNode = (node, type) => {
+	if (type === NODE_TYPE.TextNode) {
+		const next = node.nextSibling;
+		if (next?.nodeType === NODE_TYPE.TextNode) return next;
+		return node.parentNode.insertBefore(node.ownerDocument.createTextNode(""), next);
+	}
 	let sibling = node;
 	do
 		sibling = sibling.nextSibling;
@@ -5300,4 +5307,4 @@ function hasKeys(obj) {
 	return false;
 }
 //#endregion
-export { Fragment, HYDRATED_STYLE_ID, Host, Mixin, ReactiveControllerHost, addHostEventListeners, bootstrapLazy, connectedCallback, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, injectSideEffectStyle, jsx, jsxDEV, jsxs, normalizeWatchers, parsePropertyValue, postUpdateComponent, proxyComponent, proxyCustomElement, registerSideEffectStyleTarget, render, setAssetPath, setMode, setNonce, setPlatformOptions, setRegistry, setTagTransformer, setValue, transformTag, unregisterSideEffectStyleTarget };
+export { Fragment, HYDRATED_STYLE_ID, Host, Mixin, ReactiveControllerHost, addHostEventListeners, applySerializers, bootstrapLazy, connectedCallback, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, injectSideEffectStyle, jsx, jsxDEV, jsxs, normalizeWatchers, parsePropertyValue, postUpdateComponent, proxyComponent, proxyCustomElement, registerSideEffectStyleTarget, render, setAssetPath, setMode, setNonce, setPlatformOptions, setRegistry, setTagTransformer, setValue, transformTag, unregisterSideEffectStyleTarget };

package/dist/runtime/server/index.mjs

@@ -50,6 +50,8 @@ const NODE_TYPE = {
 const HYDRATE_ID = "s-id";
 const HYDRATED_STYLE_ID = "sty-id";
 const HYDRATE_CHILD_ID = "c-id";
+/** `Symbol.for()` key of the `ssrProp()` registry on the server's real global object. */
+const SSR_PROPS_REGISTRY_KEY = "stencil.ssrProps";
 const HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
 const STENCIL_DOC_DATA = "_stencilDocData";
 const DEFAULT_DOC_DATA = {
@@ -799,7 +801,9 @@ const patchTextContent = (hostElementPrototype) => {
 	Object.defineProperty(hostElementPrototype, "textContent", {
 		get: function() {
 			let text = "";
-			(this.__childNodes ? this.childNodes : getSlottedChildNodes(this.childNodes)).forEach((node) => text += node.textContent || "");
+			(this.__childNodes ? this.childNodes : getSlottedChildNodes(this.childNodes)).forEach((node) => {
+				if (node.nodeType !== NODE_TYPE.CommentNode) text += node.textContent || "";
+			});
 			return text;
 		},
 		set: function(value) {
@@ -807,7 +811,7 @@ const patchTextContent = (hostElementPrototype) => {
 				if (node["s-ol"]) node["s-ol"].remove();
 				node.remove();
 			});
-			this.insertAdjacentHTML("beforeend", value);
+			if (value != null && value !== "") this.append(this.ownerDocument.createTextNode(String(value)));
 		}
 	});
 };
@@ -1373,6 +1377,13 @@ const hydrateScopedToShadow = () => {
 */
 const isDef = (v) => v != null && v !== void 0;
 /**
+* Convert a string from PascalCase to dash-case
+*
+* @param str the string to convert
+* @returns a converted string
+*/
+const toDashCase = (str) => str.replace(/([A-Z0-9])/g, (match) => ` ${match[0]}`).trim().split(" ").join("-").toLowerCase();
+/**
 * Check whether a value is a 'complex type', defined here as an object or a
 * function.
 *
@@ -1416,7 +1427,7 @@ const emitEvent = (elm, name, opts) => {
 	elm.dispatchEvent(ev);
 	return ev;
 };
-const getRegistry = () => customElements;
+const getRegistry = () => globalThis.customElements;
 /**
 * @param elm a defined component host
 * @returns the registry the host's class was defined in, else the active registry
@@ -3389,6 +3400,11 @@ const addSlottedNodes = (slottedNodes, slotNodeId, slotName, slotNode, hostId) =
 * @returns the first corresponding node of the type
 */
 const findCorrespondingNode = (node, type) => {
+	if (type === NODE_TYPE.TextNode) {
+		const next = node.nextSibling;
+		if (next?.nodeType === NODE_TYPE.TextNode) return next;
+		return node.parentNode.insertBefore(node.ownerDocument.createTextNode(""), next);
+	}
 	let sibling = node;
 	do
 		sibling = sibling.nextSibling;
@@ -5029,7 +5045,10 @@ const insertVNodeAnnotations = (doc, hostElm, vnode, docData, cmpData) => {
 	if (vnode != null) {
 		const hostId = ++docData.hostIds;
 		hostElm.setAttribute(HYDRATE_ID, hostId);
-		if (hostElm["s-cr"] != null) hostElm["s-cr"].nodeValue = `r.${hostId}`;
+		if (hostElm["s-cr"] != null) {
+			if (hostElm.shadowRoot) hostElm["s-cr"].remove();
+			else hostElm["s-cr"].nodeValue = `r.${hostId}`;
+		}
 		if (vnode.$children$ != null) {
 			const depth = 0;
 			vnode.$children$.forEach((vnodeChild, index) => {
@@ -5091,7 +5110,14 @@ const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, in
 };
 //#endregion
 //#region src/server/platform/proxy-host-element.ts
-function proxyHostElement(elm, cstr) {
+/**
+* Set up a component's host element on the server: its props (from attributes, values set on
+* the element before it was defined, and `ssrProp()` references), getters/setters and shadow root.
+* @param elm the host element
+* @param cstr the component's constructor
+* @param warn report a problem with the render (to its `diagnostics`)
+*/
+function proxyHostElement(elm, cstr, warn = () => {}) {
 	const cmpMeta = cstr.cmpMeta;
 	cmpMeta.$watchers$ = cmpMeta.$watchers$ || cstr.watchers;
 	cmpMeta.$deserializers$ = cmpMeta.$deserializers$ || cstr.deserializers;
@@ -5108,7 +5134,9 @@ function proxyHostElement(elm, cstr) {
 		Object.entries(cmpMeta.$members$).forEach(([memberName, [memberFlags, metaAttributeName]]) => {
 			if (memberFlags & MEMBER_FLAGS.Prop) {
 				const attributeName = metaAttributeName || memberName;
-				const attrValue = elm.getAttribute(attributeName);
+				let attrValue = elm.getAttribute(attributeName);
+				const ssrProp = takeSsrProp(elm, attributeName, memberName, warn);
+				if (ssrProp) attrValue = null;
 				const propValue = elm[memberName];
 				let attrPropVal;
 				const { get: origGetter, set: origSetter } = Object.getOwnPropertyDescriptor(cstr.prototype, memberName) || {};
@@ -5119,12 +5147,18 @@ function proxyHostElement(elm, cstr) {
 					}
 					else attrPropVal = parsePropertyValue(attrValue, memberFlags);
 				}
+				if (ssrProp?.value !== void 0) attrPropVal = ssrProp.value;
 				if (propValue !== void 0) {
 					attrPropVal = propValue;
 					delete elm[memberName];
 				}
+				const setFromOutside = ssrProp?.value !== void 0 || propValue !== void 0;
+				if (setFromOutside && typeof attrPropVal === "object" && attrPropVal !== null && !cmpMeta.$serializers$?.[memberName]) warn(`<${cmpMeta.$tagName$}>'s "${memberName}" prop was given an object on the server, but has no @PropSerialize(), so the browser won't get it: the component will first render there without it. To keep it, use @Prop({ serialize: 'json' }), or a @PropSerialize() / @AttrDeserialize() pair for other formats.`);
 				const userSetter = !cstr.isProxied ? origSetter : void 0;
-				if (attrPropVal !== void 0 && !userSetter) hostRef?.$instanceValues$?.set(memberName, attrPropVal);
+				if (attrPropVal !== void 0 && !userSetter) {
+					hostRef?.$instanceValues$?.set(memberName, attrPropVal);
+					if (setFromOutside && cmpMeta.$serializers$?.[memberName]) applySerializers(hostRef, cmpMeta, memberName, attrPropVal, void 0);
+				}
 				const getterSetterDescriptor = {
 					get: function() {
 						return getValue(this, memberName);
@@ -5172,6 +5206,34 @@ function componentOnReady() {
 	return getHostRef(this)?.$onReadyPromise$;
 }
 function forceUpdate$1() {}
+/**
+* Read and remove an `ssrProp()` reference: a value a framework template passed to this prop,
+* which reached the server as an attribute pointing into the `ssrProp()` registry. Templates bind
+* it under the prop name, which HTML lower-cases (`chartData` -> `chartdata`), or dash-cased
+* (`chart-data`); complex props usually have no attribute name of their own.
+* @param elm the component's host element
+* @param attributeName the prop's attribute name
+* @param memberName the prop's name
+* @param warn report a problem with the render
+* @returns `undefined` if there's no reference, otherwise its value (`undefined` if it's gone)
+*/
+const takeSsrProp = (elm, attributeName, memberName, warn) => {
+	for (const name of /* @__PURE__ */ new Set([
+		attributeName,
+		memberName,
+		toDashCase(memberName)
+	])) {
+		const attr = elm.getAttribute(name);
+		if (!attr?.startsWith("__stencil_ssr_ref:")) continue;
+		elm.removeAttribute(name);
+		const id = attr.slice(18);
+		const registry = (typeof $stencilNativeGlobal !== "undefined" ? $stencilNativeGlobal : globalThis)[Symbol.for(SSR_PROPS_REGISTRY_KEY)];
+		const entry = registry?.get(id);
+		registry?.delete(id);
+		if (!entry) warn(`<${elm.tagName.toLowerCase()}>'s "${memberName}" was passed with ssrProp(), but its value isn't available here: it's only available to renderToString() in the same process, for a short time after the template ran.`);
+		return { value: entry?.value };
+	}
+};
 //#endregion
 //#region src/server/platform/ssr-app.ts
 /**
@@ -5253,7 +5315,13 @@ function ssrApp(win, opts, results, afterSsr, resolve, abortController) {
 						createdElements.add(elm);
 						elm.connectedCallback = patchedConnectedCallback;
 						registerHost(elm, Cstr.cmpMeta);
-						proxyHostElement(elm, Cstr);
+						proxyHostElement(elm, Cstr, (messageText) => results.diagnostics.push({
+							level: "warn",
+							type: "hydrate",
+							header: "SSR Warning",
+							messageText,
+							lines: []
+						}));
 					}
 				}
 			}

package/dist/runtime/server/runner.mjs

@@ -6772,7 +6772,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	value: mod,
 	enumerable: true
 }) : target, mod));
-const HYDRATE_ID = "s-id";
 const XML_NS = "http://www.w3.org/XML/1998/namespace";
 const XMLNS_NS = "http://www.w3.org/2000/xmlns/";
 /**
@@ -7767,19 +7766,7 @@ function* streamToHtml(node, opts, output) {
 						const isWithinWhitespaceSensitiveNode = opts.newLines || (opts.indentSpaces ?? 0) > 0 ? isWithinWhitespaceSensitive(node) : false;
 						if (!isWithinWhitespaceSensitiveNode && (opts.indentSpaces ?? 0) > 0 && ignoreTag === false) output.indent = output.indent + (opts.indentSpaces ?? 0);
 						for (let i = 0; i < childNodeLength; i++) {
-							/**
-							* In cases where a user would pass in a declarative shadow dom of a
-							* Stencil component, we want to skip over the template tag as we
-							* will be parsing the shadow root of the component again.
-							*
-							* We know it is a hydrated Stencil component by checking if the `HYDRATE_ID`
-							* is set on the node.
-							*/
-							const sId = node.attributes.getNamedItem(HYDRATE_ID);
-							if (childNodes[i].nodeName.toLowerCase() === "template" && sId) {
-								yield `\n${" ".repeat(output.indent)}<!--r.${sId.value}-->`;
-								continue;
-							}
+							if (childNodes[i].nodeName.toLowerCase() === "template" && node.attributes.getNamedItem("s-id")) continue;
 							yield* streamToHtml(childNodes[i], opts, output);
 						}
 						if (ignoreTag === false) {

package/dist/sys/node/index.mjs

@@ -1,2 +1,2 @@
-import { n as setupNodeProcess, r as createNodeLogger, t as createNodeSys } from "../../node-eg7pofz5.mjs";
+import { n as setupNodeProcess, r as createNodeLogger, t as createNodeSys } from "../../node-DwwBX_GL.mjs";
 export { createNodeLogger, createNodeSys, setupNodeProcess };

package/dist/sys/node/worker.mjs

@@ -1,5 +1,5 @@
-import { l as createWorkerMessageHandler } from "../../compiler-BpfMxpfR.mjs";
-import { t as createNodeSys } from "../../node-eg7pofz5.mjs";
+import { l as createWorkerMessageHandler } from "../../compiler-DHNkXDvK.mjs";
+import { t as createNodeSys } from "../../node-DwwBX_GL.mjs";
 //#region src/sys/node/node-worker-thread.ts
 /**
 * Initialize a worker thread, setting up various machinery for managing

package/dist/testing/index.mjs

@@ -33,7 +33,7 @@ import "@rollup/pluginutils";
 import { createHash } from "crypto";
 import { afterAll, vi } from "vitest";
 //#region src/version.ts
-const version = "5.0.0-beta.35";
+const version = "5.0.0-beta.36";
 const MEMBER_FLAGS = {
 	String: 1,
 	Number: 2,
@@ -1184,6 +1184,13 @@ const NODE_TYPE = {
 const HYDRATE_ID = "s-id";
 const HYDRATED_STYLE_ID = "sty-id";
 const HYDRATE_CHILD_ID = "c-id";
+/**
+* Starts an attribute value written by the `ssr` output's `ssrProp()` on a server: a reference to
+* a value it put in the registry below, for the SSR runtime to take out and set as the prop.
+*/
+const SSR_PROP_REF_PREFIX = "__stencil_ssr_ref:";
+/** `Symbol.for()` key of the `ssrProp()` registry on the server's real global object. */
+const SSR_PROPS_REGISTRY_KEY = "stencil.ssrProps";
 const HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
 const STENCIL_DOC_DATA = "_stencilDocData";
 const DEFAULT_DOC_DATA = {
@@ -1631,7 +1638,9 @@ const patchTextContent = (hostElementPrototype) => {
 	Object.defineProperty(hostElementPrototype, "textContent", {
 		get: function() {
 			let text = "";
-			(this.__childNodes ? this.childNodes : getSlottedChildNodes(this.childNodes)).forEach((node) => text += node.textContent || "");
+			(this.__childNodes ? this.childNodes : getSlottedChildNodes(this.childNodes)).forEach((node) => {
+				if (node.nodeType !== NODE_TYPE.CommentNode) text += node.textContent || "";
+			});
 			return text;
 		},
 		set: function(value) {
@@ -1639,7 +1648,7 @@ const patchTextContent = (hostElementPrototype) => {
 				if (node["s-ol"]) node["s-ol"].remove();
 				node.remove();
 			});
-			this.insertAdjacentHTML("beforeend", value);
+			if (value != null && value !== "") this.append(this.ownerDocument.createTextNode(String(value)));
 		}
 	});
 };
@@ -2171,7 +2180,7 @@ const effect = (fn, options) => getCore().effect(fn, options);
 function signal(value, options) {
 	return getCore().signal(value, options);
 }
-const getRegistry = () => customElements;
+const getRegistry = () => globalThis.customElements;
 /**
 * @param elm a defined component host
 * @returns the registry the host's class was defined in, else the active registry
@@ -4146,6 +4155,11 @@ const addSlottedNodes = (slottedNodes, slotNodeId, slotName, slotNode, hostId) =
 * @returns the first corresponding node of the type
 */
 const findCorrespondingNode = (node, type) => {
+	if (type === NODE_TYPE.TextNode) {
+		const next = node.nextSibling;
+		if (next?.nodeType === NODE_TYPE.TextNode) return next;
+		return node.parentNode.insertBefore(node.ownerDocument.createTextNode(""), next);
+	}
 	let sibling = node;
 	do
 		sibling = sibling.nextSibling;
@@ -5615,7 +5629,10 @@ const insertVNodeAnnotations = (doc, hostElm, vnode, docData, cmpData) => {
 	if (vnode != null) {
 		const hostId = ++docData.hostIds;
 		hostElm.setAttribute(HYDRATE_ID, hostId);
-		if (hostElm["s-cr"] != null) hostElm["s-cr"].nodeValue = `r.${hostId}`;
+		if (hostElm["s-cr"] != null) {
+			if (hostElm.shadowRoot) hostElm["s-cr"].remove();
+			else hostElm["s-cr"].nodeValue = `r.${hostId}`;
+		}
 		if (vnode.$children$ != null) {
 			const depth = 0;
 			vnode.$children$.forEach((vnodeChild, index) => {
@@ -5975,6 +5992,7 @@ new RegExp(`^(${[.../* @__PURE__ */ new Set([
 	"vm",
 	"zlib"
 ])].join("|")})$`);
+`${JSON.stringify(SSR_PROP_REF_PREFIX)}${JSON.stringify(SSR_PROPS_REGISTRY_KEY)}`;
 promisify(execFile);
 process.platform;
 new Set([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core",
-  "version": "5.0.0-beta.35",
+  "version": "5.0.0-beta.36",
   "description": "A Compiler for Web Components and Progressive Web Apps",
   "keywords": [
     "components",
@@ -126,9 +126,9 @@
     "terser": "^5.50.0",
     "tinyglobby": "^0.2.17",
     "typescript": ">5.0.0 <7.0.0",
-    "@stencil/cli": "5.0.0-beta.35",
-    "@stencil/dev-server": "5.0.0-beta.35",
-    "@stencil/mock-doc": "5.0.0-beta.35"
+    "@stencil/dev-server": "5.0.0-beta.36",
+    "@stencil/cli": "5.0.0-beta.36",
+    "@stencil/mock-doc": "5.0.0-beta.36"
   },
   "devDependencies": {
     "@ionic/prettier-config": "^4.0.0",