@stencil/core 5.0.0-beta.30 → 5.0.0-beta.32

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.30";
+const version = "5.0.0-beta.32";
 const MEMBER_FLAGS = {
 	String: 1,
 	Number: 2,
@@ -1472,6 +1472,7 @@ const patchSlotAppendChild = (HostElementPrototype) => {
 		const { slotName, slotNode } = findSlotFromSlottedNode(newChild, this);
 		if (slotNode) {
 			addSlotRelocateNode(newChild, slotNode);
+			patchSlottedNode(newChild);
 			const slotChildNodes = getSlotChildSiblings(slotNode, slotName);
 			const appendAfter = slotChildNodes[slotChildNodes.length - 1];
 			const insertedNode = internalCall(internalCall(appendAfter, "parentNode"), "insertBefore")(newChild, appendAfter.nextSibling);
@@ -1494,8 +1495,10 @@ const patchSlotRemoveChild = (ElementPrototype) => {
 	ElementPrototype.__removeChild = ElementPrototype.removeChild;
 	ElementPrototype.removeChild = function(toRemove) {
 		if (toRemove && typeof toRemove["s-sn"] !== "undefined") {
-			if (getHostSlotNodes(this.__childNodes || this.childNodes, this.tagName, toRemove["s-sn"]) && toRemove.isConnected) {
-				toRemove.remove();
+			const slotNode = getHostSlotNodes(this.__childNodes || this.childNodes, this.tagName, toRemove["s-sn"]);
+			if (slotNode && toRemove.isConnected) {
+				removeSlottedNode(toRemove);
+				if (slotNode[0]) dispatchSlotChangeEvent(slotNode[0]);
 				updateFallbackSlotVisibility(this);
 				return;
 			}
@@ -1518,6 +1521,7 @@ const patchSlotPrepend = (HostElementPrototype) => {
 			const slotNode = getHostSlotNodes(internalCall(this, "childNodes"), this.tagName, slotName)[0];
 			if (slotNode) {
 				addSlotRelocateNode(newChild, slotNode, true);
+				patchSlottedNode(newChild);
 				const appendAfter = getSlotChildSiblings(slotNode, slotName)[0];
 				const toReturn = internalCall(internalCall(appendAfter, "parentNode"), "insertBefore")(newChild, internalCall(appendAfter, "nextSibling"));
 				dispatchSlotChangeEvent(slotNode);
@@ -1593,6 +1597,7 @@ const patchInsertBefore = (HostElementPrototype) => {
 					}
 					if (slotName === currentChild["s-sn"]) {
 						addSlotRelocateNode(newChild, slotNode);
+						patchSlottedNode(newChild);
 						internalCall(internalCall(currentChild, "parentNode"), "insertBefore")(newChild, currentChild);
 						dispatchSlotChangeEvent(slotNode);
 					}
@@ -1671,10 +1676,21 @@ const patchChildSlotNodes = (elm) => {
 	} });
 };
 /**
-* Patches sibling accessors of a 'slotted' node within a non-shadow component.
-* Meaning whilst stepping through a non-shadow element's nodes, only the mock 'lightDOM' nodes are returned.
-* Especially relevant when rendering components via SSR... Frameworks will often try to reconcile their
-* VDOM with the real DOM by stepping through nodes with 'nextSibling' et al.
+* 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);
+};
+/**
+* Patches a slotted node from SSR markup: everything {@link patchSlottedNode} does, plus its
+* sibling accessors, so whilst stepping through a non-shadow element's nodes only the mock
+* 'lightDOM' nodes are returned. Frameworks hydrating SSR output often reconcile their VDOM with
+* the real DOM by stepping through nodes with 'nextSibling' et al.
 * - `nextSibling`
 * - `nextElementSibling`
 * - `previousSibling`
@@ -1682,11 +1698,11 @@ const patchChildSlotNodes = (elm) => {
 *
 * @param node the slotted node to be patched
 */
-const patchSlottedNode = (node) => {
+const patchSsrSlottedNode = (node) => {
 	if (!node || node.__nextSibling !== void 0 || !globalThis.Node) return;
 	patchNextSibling(node);
 	patchPreviousSibling(node);
-	patchParentNode(node);
+	patchSlottedNode(node);
 	if (node.nodeType === Node.ELEMENT_NODE) {
 		patchNextElementSibling(node);
 		patchPreviousElementSibling(node);
@@ -1753,6 +1769,39 @@ const patchPreviousElementSibling = (element) => {
 	} });
 };
 /**
+* 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
@@ -2382,6 +2431,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). */
@@ -2936,10 +2986,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;
 		}
 	}
@@ -3095,6 +3148,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;
@@ -3847,7 +3905,7 @@ const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
 				}
 				addSlotRelocateNode(siNode, siSlot, false, siNode["s-oo"] || currentPos);
 				if (siNode.parentElement?.shadowRoot && siNode["getAttribute"] && siNode.getAttribute("slot")) siNode.removeAttribute("slot");
-				if (BUILD.lightDomPatches || BUILD.slotChildNodes || BUILD.patchAll && hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll) patchSlottedNode(siNode);
+				if (BUILD.lightDomPatches || BUILD.slotChildNodes || BUILD.patchAll && hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll) patchSsrSlottedNode(siNode);
 			}
 			currentPos = (siNode["s-oo"] || currentPos) + 1;
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core",
-  "version": "5.0.0-beta.30",
+  "version": "5.0.0-beta.32",
   "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.30",
-    "@stencil/mock-doc": "5.0.0-beta.30",
-    "@stencil/dev-server": "5.0.0-beta.30"
+    "@stencil/cli": "5.0.0-beta.32",
+    "@stencil/dev-server": "5.0.0-beta.32",
+    "@stencil/mock-doc": "5.0.0-beta.32"
   },
   "devDependencies": {
     "@ionic/prettier-config": "^4.0.0",