@stencil/core 5.0.0-beta.3 → 5.0.0-beta.31

package/dist/app-data/index.d.ts

@@ -1,2 +1,2 @@
-import { n as Env, r as NAMESPACE, t as BUILD } from "../index-BXAcVN2j.js";
+import { n as Env, r as NAMESPACE, t as BUILD } from "../index-CicD4Pgn.js";
 export { BUILD, Env, NAMESPACE };

package/dist/{client-BRu0GtRn.mjs → client-DIvBaMnB.mjs}

@@ -1,5 +1,5 @@
 import { B as HOST_FLAGS, C as CMP_FLAGS, G as NODE_TYPES, Z as SVG_NS, o as isComplexType, s as isDef, x as queryNonceMetaTagContent } from "./helpers-Cpp3qc3u.mjs";
-import { effect } from "@preact/signals-core";
+import * as SignalsCore from "@preact/signals-core";
 //#region src/app-data/index.ts
 /**
 * A collection of default build flags for a Stencil project.
@@ -104,41 +104,6 @@ const BUILD = {
 	asyncQueue: false
 };
 //#endregion
-//#region src/client/client-build.ts
-const Build = {
-	isDev: BUILD.isDev,
-	isBrowser: true,
-	isServer: false,
-	isTesting: BUILD.isTesting
-};
-//#endregion
-//#region src/client/client-host-ref.ts
-/**
-* Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
-*
-* @param ref the runtime ref of interest
-* @returns the Host reference (if found) or undefined
-*/
-const getHostRef = (ref) => {
-	if (ref.__s_ghr) return ref.__s_ghr();
-};
-const isMemberInElement = (elm, memberName) => memberName in elm;
-//#endregion
-//#region src/client/client-log.ts
-let customError;
-const consoleError = (e, el) => (customError || console.error)(e, el);
-const STENCIL_DEV_MODE = BUILD.isTesting ? ["STENCIL:"] : ["%cstencil", "color: white;background:#4c47ff;font-weight: bold; font-size:10px; padding:2px 6px; border-radius: 5px"];
-const consoleDevError = (...m) => console.error(...STENCIL_DEV_MODE, ...m);
-const consoleDevWarn = (...m) => console.warn(...STENCIL_DEV_MODE, ...m);
-const setErrorHandler = (handler) => customError = handler;
-//#endregion
-//#region src/client/client-load-module.ts
-/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
-//#endregion
-//#region src/client/client-style.ts
-const styles = /*@__PURE__*/ new Map();
-const modeResolutionChain = [];
-//#endregion
 //#region src/runtime/runtime-constants.ts
 /**
 * Bit flags for recording various properties of VDom nodes
@@ -191,6 +156,62 @@ const HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
 */
 const SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
 const XLINK_NS = "http://www.w3.org/1999/xlink";
+/**
+* `Build` values fixed per platform. Shared by each runtime's `Build` export and the compiler's
+* `Build.*` folding (`compiler/bundle/build-flags-plugin.ts`), so the two can't disagree.
+*/
+const CLIENT_BUILD_FLAGS = {
+	isBrowser: true,
+	isServer: false
+};
+const SERVER_BUILD_FLAGS = {
+	isBrowser: false,
+	isServer: true,
+	isDev: false,
+	isTesting: false
+};
+//#endregion
+//#region src/client/client-build.ts
+/**
+* `isDev` / `isTesting` are getters, not copies: the transpile path (e.g. `@stencil/unplugin`)
+* sets `BUILD.*` overrides from each component module, which runs after this module is evaluated.
+*/
+const Build = {
+	...CLIENT_BUILD_FLAGS,
+	get isDev() {
+		return BUILD.isDev;
+	},
+	get isTesting() {
+		return BUILD.isTesting;
+	}
+};
+//#endregion
+//#region src/client/client-host-ref.ts
+/**
+* Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
+*
+* @param ref the runtime ref of interest
+* @returns the Host reference (if found) or undefined
+*/
+const getHostRef = (ref) => {
+	if (ref.__s_ghr) return ref.__s_ghr();
+};
+const isMemberInElement = (elm, memberName) => memberName in elm;
+//#endregion
+//#region src/client/client-log.ts
+let customError;
+const consoleError = (e, el) => (customError || console.error)(e, el);
+const STENCIL_DEV_MODE = BUILD.isTesting ? ["STENCIL:"] : ["%cstencil", "color: white;background:#4c47ff;font-weight: bold; font-size:10px; padding:2px 6px; border-radius: 5px"];
+const consoleDevError = (...m) => console.error(...STENCIL_DEV_MODE, ...m);
+const consoleDevWarn = (...m) => console.warn(...STENCIL_DEV_MODE, ...m);
+const setErrorHandler = (handler) => customError = handler;
+//#endregion
+//#region src/client/client-load-module.ts
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
+//#endregion
+//#region src/client/client-style.ts
+const styles = /*@__PURE__*/ new Map();
+const modeResolver = [];
 //#endregion
 //#region src/client/client-window.ts
 const win = typeof window !== "undefined" ? window : {};
@@ -223,7 +244,7 @@ let queuePending = false;
 const queueDomReads = [];
 const queueDomWrites = [];
 const queueDomWritesLow = [];
-const scheduleFlush = () => win.document?.hidden ? nextTick(flush) : plt.raf(flush);
+const scheduleFlush = () => win.document?.hidden ? setTimeout(flush, 16) : plt.raf(flush);
 const queueTask = (queue, write) => (cb) => {
 	queue.push(cb);
 	if (!queuePending) {
@@ -438,6 +459,50 @@ function findSlotFromSlottedNode(slottedNode, parentHost) {
 //#endregion
 //#region src/runtime/dom-extras.ts
 /**
+* Patches a node slotted into a non-shadow component so it behaves as it would in a native slot:
+* - `parentNode` returns the host element
+* - `remove()` fires `slotchange` on the node's slot
+*
+* @param node the slotted node to be patched
+*/
+const patchSlottedNode = (node) => {
+	patchParentNode(node);
+	patchSlottedRemove(node);
+};
+/**
+* Detaches a slotted node from where it physically sits in the component's rendered DOM, through
+* the unpatched accessors. Not via `remove()`: mock-doc's `remove()` calls
+* `parentNode.removeChild()`, and a slotted node's patched `parentNode` is the host, whose patched
+* `removeChild()` would come straight back here.
+*
+* @param node the slotted node to detach
+*/
+const removeSlottedNode = (node) => {
+	const parent = internalCall(node, "parentNode");
+	if (parent) internalCall(parent, "removeChild")(node);
+};
+/**
+* Patches `remove()` on a node slotted into a non-shadow component, so that removing it fires
+* `slotchange` on its slot (and updates fallback content), as removing a node from a native slot
+* does. Stencil's own node moves, while `isTmpDisconnected` is set, don't fire it.
+*
+* @param node the slotted node to patch
+*/
+const patchSlottedRemove = (node) => {
+	const child = node;
+	if (!child || child.__remove || typeof child.remove !== "function") return;
+	child.__remove = child.remove;
+	child.remove = function() {
+		const host = this["s-ol"]?.parentElement;
+		const { slotNode } = findSlotFromSlottedNode(this);
+		removeSlottedNode(this);
+		if (slotNode && !(plt.$flags$ & PLATFORM_FLAGS.isTmpDisconnected)) {
+			dispatchSlotChangeEvent(slotNode);
+			updateFallbackSlotVisibility(host);
+		}
+	};
+};
+/**
 * Patches the `parentNode` accessor of a non-shadow slotted node
 *
 * @param node the slotted node to be patched
@@ -722,6 +787,10 @@ const attachStyles = (hostRef) => {
 */
 const getScopeId = (cmp, mode) => "sc-" + (BUILD.mode && mode && cmp.$flags$ & CMP_FLAGS.hasMode ? cmp.$tagName$ + "-" + mode : cmp.$tagName$);
 //#endregion
+//#region src/runtime/signals-core.ts
+const getCore = () => globalThis[Symbol.for("stencil.preact-signals-core")] ??= SignalsCore;
+const effect = (fn, options) => getCore().effect(fn, options);
+//#endregion
 //#region src/runtime/event-emitter.ts
 /**
 * Helper function to create & dispatch a custom Event on a provided target
@@ -736,6 +805,11 @@ const emitEvent = (elm, name, opts) => {
 	return ev;
 };
 const getRegistry = () => customElements;
+/**
+* @param elm a defined component host
+* @returns the registry the host's class was defined in, else the active registry
+*/
+const getHostRegistry = (elm) => elm.constructor._registry ?? getRegistry();
 //#endregion
 //#region src/runtime/vdom/set-accessor.ts
 /**
@@ -859,10 +933,10 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 		const isComplex = isComplexType(newValue);
 		if (!BUILD.lazyLoad) {
 			const isStandardAttr = ln.startsWith("aria-") || ln.startsWith("data-");
-			if (!isProp && !isStandardAttr && elm.tagName?.includes("-") && elm.tagName !== "SLOT-FB" && typeof customElements !== "undefined" && !customElements.get(elm.tagName.toLowerCase())) {
+			if (!isProp && !isStandardAttr && elm.tagName?.includes("-") && elm.tagName !== "SLOT-FB" && !customElements.get(elm.tagName.toLowerCase())) {
 				if (!elm["s-pp"]) elm["s-pp"] = /* @__PURE__ */ new Map();
 				elm["s-pp"].set(memberName, newValue);
-				return;
+				if (isComplex || /[A-Z]/.test(memberName)) return;
 			}
 		}
 		if ((isProp || isComplex && newValue !== null) && !isSvg) try {
@@ -980,6 +1054,7 @@ function sortedAttrNames(attrNames) {
 let scopeId;
 let contentRef;
 let hostTagName;
+let hostRegistry;
 let useNativeShadowDom = false;
 let checkSlotFallbackVisibility = false;
 let checkSlotRelocate = false;
@@ -989,6 +1064,7 @@ let isSvgMode = false;
 * These ensure that ref callbacks are called in the correct order:
 * first all removal callbacks (with null), then all attachment callbacks (with elements).
 */
+const initialSlotChanges = /* @__PURE__ */ new Set();
 const refCallbacksToRemove = [];
 const refCallbacksToAttach = [];
 /** Disposers for signal subscriptions on individual DOM nodes (text nodes, <s-show> wrappers). */
@@ -996,16 +1072,33 @@ const signalNodeDisposers = /* @__PURE__ */ new WeakMap();
 const disposeSignalVNode = (vnode) => {
 	const elm = vnode.$elm$;
 	if (elm) {
-		const dispose = signalNodeDisposers.get(elm);
-		if (dispose) {
-			dispose();
-			signalNodeDisposers.delete(elm);
-		}
+		disposeTextSignal(elm);
 		disposeAllSignalAttrs(elm);
 	}
 	vnode.$children$?.forEach(disposeSignalVNode);
 };
 /**
+* Tear down a text node's signal subscription, if it has one.
+* @param textNode the text node to unsubscribe
+*/
+const disposeTextSignal = (textNode) => {
+	const dispose = signalNodeDisposers.get(textNode);
+	if (dispose) {
+		dispose();
+		signalNodeDisposers.delete(textNode);
+	}
+};
+/**
+* Subscribe a text node to a signal, keeping its `data` in sync on every change.
+* @param textNode the text node to keep in sync
+* @param textSig the signal to subscribe to
+*/
+const wireTextSignal = (textNode, textSig) => {
+	signalNodeDisposers.set(textNode, effect(() => {
+		textNode.data = String(textSig.value);
+	}));
+};
+/**
 * Create a DOM Node corresponding to one of the children of a given VNode.
 *
 * @param oldParentVNode the parent VNode from the previous render
@@ -1027,13 +1120,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex) => {
 	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`);
 	if (BUILD.vdomText && newVNode.$text$ != null) {
 		elm = newVNode.$elm$ = win.document.createTextNode(newVNode.$text$);
-		if (BUILD.vdomSignals && newVNode.$signal$) {
-			const textSig = newVNode.$signal$;
-			const textNode = elm;
-			signalNodeDisposers.set(textNode, effect(() => {
-				textNode.data = String(textSig.value);
-			}));
-		}
+		if (BUILD.vdomSignals && newVNode.$signal$) wireTextSignal(elm, newVNode.$signal$);
 	} else if (BUILD.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotReference) {
 		elm = newVNode.$elm$ = BUILD.isDebug || BUILD.hydrateServerSide ? slotReferenceDebugNode(newVNode) : win.document.createTextNode("");
 		if (typeof newVNode.$attrs$?.slot === "string") elm["s-sa"] = newVNode.$attrs$.slot;
@@ -1042,8 +1129,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex) => {
 		if (BUILD.svg && !isSvgMode) isSvgMode = newVNode.$tag$ === "svg";
 		if (!win.document) throw new Error("No DOM environment available for rendering.");
 		const tag = !useNativeShadowDom && BUILD.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotFallback ? "slot-fb" : newVNode.$tag$;
-		const _reg = getRegistry();
-		const registryOpts = _reg !== win.customElements && tag.includes("-") ? { customElementRegistry: _reg } : void 0;
+		const registryOpts = hostRegistry !== win.customElements && tag.includes("-") ? { customElementRegistry: hostRegistry } : void 0;
 		elm = newVNode.$elm$ = BUILD.svg && isSvgMode ? win.document.createElementNS(SVG_NS, tag) : win.document.createElement(tag, registryOpts);
 		if (BUILD.svg && isSvgMode && newVNode.$tag$ === "foreignObject") isSvgMode = false;
 		if (BUILD.vdomAttribute) updateElement(null, newVNode, isSvgMode);
@@ -1301,7 +1387,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = fal
 		}
 		if (BUILD.vdomKey && idxInOld >= 0) {
 			elmToMove = oldCh[idxInOld];
-			if (elmToMove.$tag$ !== newStartVnode.$tag$) node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
+			if (elmToMove.$tag$ !== newStartVnode.$tag$) node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
 			else {
 				patch(elmToMove, newStartVnode, isInitialRender);
 				oldCh[idxInOld] = void 0;
@@ -1394,7 +1480,17 @@ const patch = (oldVNode, newVNode, isInitialRender = false) => {
 		else if (BUILD.hydrateClientSide && isInitialRender && BUILD.updatable && oldChildren !== null && newChildren === null) newVNode.$children$ = oldChildren;
 		if (BUILD.svg && isSvgMode && tag === "svg") isSvgMode = false;
 	} else if (BUILD.vdomText && BUILD.slotRelocation && (defaultHolder = elm["s-cr"])) defaultHolder.parentNode.textContent = text;
-	else if (BUILD.vdomText && oldVNode.$text$ !== text) elm.data = text;
+	else if (BUILD.vdomText) {
+		if (BUILD.vdomSignals && newVNode.$signal$) {
+			if (newVNode.$signal$ !== oldVNode.$signal$) {
+				disposeTextSignal(elm);
+				wireTextSignal(elm, newVNode.$signal$);
+			}
+		} else {
+			if (BUILD.vdomSignals && oldVNode.$signal$) disposeTextSignal(elm);
+			if (oldVNode.$text$ !== text) elm.data = text;
+		}
+	}
 };
 /**
 * Component-global information about nodes which are either currently being
@@ -1523,10 +1619,13 @@ const insertBefore = (parent, newNode, reference, isInitialLoad) => {
 		if (BUILD.scoped && typeof newNode["s-sn"] === "string" && !!newNode["s-sr"] && !!newNode["s-cr"]) addRemoveSlotScopedClass(newNode["s-cr"], newNode, parent, newNode.parentElement);
 		else if (typeof newNode["s-sn"] === "string") {
 			const hostElm = newNode["s-hn"] && parent.closest?.(newNode["s-hn"]);
-			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);
+			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);
 			parent.insertBefore(newNode, reference);
 			const { slotNode } = findSlotFromSlottedNode(newNode);
-			if (slotNode && !isInitialLoad) dispatchSlotChangeEvent(slotNode);
+			if (slotNode) {
+				if (isInitialLoad) initialSlotChanges.add(slotNode);
+				else dispatchSlotChangeEvent(slotNode);
+			}
 			return newNode;
 		}
 	}
@@ -1582,6 +1681,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
 	const oldVNode = hostRef.$vnode$ || newVNode(null, null);
 	const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
 	hostTagName = hostElm.tagName;
+	hostRegistry = getHostRegistry(hostElm);
 	if (BUILD.isDev && Array.isArray(renderFnResults) && renderFnResults.some(isHost)) throw new Error(`The <Host> must be the single root component.
 Looks like the render() function of "${hostTagName.toLowerCase()}" is returning an array that contains the <Host>.
 
@@ -1681,6 +1781,11 @@ render() {
 		if (checkSlotFallbackVisibility) updateFallbackSlotVisibility(rootVnode.$elm$);
 		plt.$flags$ &= ~PLATFORM_FLAGS.isTmpDisconnected;
 		relocateNodes.length = 0;
+		if (initialSlotChanges.size) {
+			const slotNodes = [...initialSlotChanges];
+			initialSlotChanges.clear();
+			nextTick(() => slotNodes.forEach(dispatchSlotChangeEvent));
+		}
 	}
 	if (BUILD.slotRelocation && !useNativeShadowDom && !(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && hostElm["s-cr"]) {
 		const children = rootVnode.$elm$.__childNodes || rootVnode.$elm$.childNodes;
@@ -2097,9 +2202,7 @@ const h = (nodeName, vnodeData, ...children) => {
 			if (classData && !(BUILD.vdomSignals && isSignalLike(classData))) vnodeData.class = typeof classData !== "object" ? classData : Object.keys(classData).filter((k) => classData[k]).join(" ");
 		}
 	}
-	if (BUILD.isDev && vNodeChildren.some(isHost)) consoleDevError(`The <Host> must be the single root component. Make sure:
-- You are NOT using hostData() and <Host> in the same component.
-- <Host> is used once, and it's the single root component of the render() function.`);
+	if (BUILD.isDev && vNodeChildren.some(isHost)) consoleDevError(`The <Host> must be used once, and be the single root component of the render() function.`);
 	if (BUILD.vdomFunctional && typeof nodeName === "function") return nodeName(vnodeData === null ? {} : vnodeData, vNodeChildren, vdomFnUtils);
 	const vnode = newVNode(nodeName, null);
 	vnode.$attrs$ = vnodeData;
@@ -2152,17 +2255,23 @@ const vdomFnUtils = {
 * Convert a {@link d.VNode} to a {@link d.ChildNode} in order to present a
 * friendlier public interface (hence, 'convertToPublic').
 *
-* @param node the virtual DOM node to convert
+* Functional components receive primitive children unwrapped, so those
+* become text-only child nodes.
+*
+* @param node the virtual DOM node (or primitive child) to convert
 * @returns a converted child node
 */
-const convertToPublic = (node) => ({
+const convertToPublic = (node) => typeof node !== "object" ? {
+	vtag: null,
+	vtext: String(node)
+} : {
 	vattrs: node.$attrs$,
 	vchildren: node.$children$,
 	vkey: node.$key$,
 	vname: node.$name$,
 	vtag: node.$tag$,
 	vtext: node.$text$
-});
+};
 /**
 * Convert a {@link d.ChildNode} back to an equivalent {@link d.VNode} in
 * order to use the resulting object in the virtual DOM. The initial object was
@@ -2179,11 +2288,11 @@ const convertToPrivate = (node) => {
 		if (node.vname) vnodeData.name = node.vname;
 		return h(node.vtag, vnodeData, ...node.vchildren || []);
 	}
-	const vnode = newVNode(node.vtag, node.vtext);
-	vnode.$attrs$ = node.vattrs;
-	vnode.$children$ = node.vchildren;
-	vnode.$key$ = node.vkey;
-	vnode.$name$ = node.vname;
+	const vnode = newVNode(node.vtag ?? null, node.vtext);
+	vnode.$attrs$ = node.vattrs ?? null;
+	vnode.$children$ = node.vchildren ?? null;
+	vnode.$key$ = node.vkey ?? null;
+	vnode.$name$ = node.vname ?? null;
 	return vnode;
 };
 /**
@@ -2203,7 +2312,10 @@ const validateInputProperties = (inputElm) => {
 };
 //#endregion
 //#region src/runtime/mode.ts
-const setMode = (handler) => modeResolutionChain.push(handler);
+const setMode = (handler) => {
+	modeResolver.length = 0;
+	modeResolver.push(handler);
+};
 const getMode = (ref) => getHostRef(ref)?.$modeName$;
 //#endregion
 //#region src/runtime/mixin.ts
@@ -2365,4 +2477,4 @@ function hasKeys(obj) {
 	return false;
 }
 //#endregion
-export { setErrorHandler as C, HYDRATED_CSS as S, getAssetPath as _, transformTag as a, writeTask as b, Mixin as c, Host as d, h as f, getShadowRoot as g, getElement as h, setTagTransformer as i, getMode as l, getRenderingRef as m, jsxDEV as n, render as o, forceUpdate as p, jsxs as r, ReactiveControllerHost as s, jsx as t, setMode as u, setAssetPath as v, Build as w, setPlatformHelpers as x, readTask as y };
+export { Build as C, SERVER_BUILD_FLAGS as E, setErrorHandler as S, HYDRATED_CSS as T, getAssetPath as _, transformTag as a, writeTask as b, Mixin as c, Host as d, h as f, getShadowRoot as g, getElement as h, setTagTransformer as i, getMode as l, getRenderingRef as m, jsxDEV as n, render as o, forceUpdate as p, jsxs as r, ReactiveControllerHost as s, jsx as t, setMode as u, setAssetPath as v, CLIENT_BUILD_FLAGS as w, setPlatformHelpers as x, readTask as y };