@stencil/core 5.0.0-beta.10 → 5.0.0-beta.11

package/dist/runtime/server/index.mjs

@@ -1,6 +1,6 @@
 import { BUILD, BUILD as BUILD$1, Env, NAMESPACE, NAMESPACE as NAMESPACE$1 } from "@stencil/core/app-data";
 import { globalScripts, globalStyles } from "@stencil/core/app-globals";
-import { effect, effect as effect$1, signal } from "@preact/signals-core";
+import * as SignalsCore from "@preact/signals-core";
 const MEMBER_FLAGS = {
 	String: 1,
 	Number: 2,
@@ -1311,6 +1311,13 @@ const isComplexType = (o) => {
 	return o === "object" || o === "function";
 };
 //#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);
+function signal(value, options) {
+	return getCore().signal(value, options);
+}
+//#endregion
 //#region src/runtime/event-emitter.ts
 const createEvent = (ref, name, flags) => {
 	const elm = getElement(ref);
@@ -1380,7 +1387,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 		attrMap.get(memberName)?.();
 		if (!signalAttrDisposers.has(elm)) signalAttrDisposers.set(elm, attrMap);
 		let prevVal = oldValue;
-		attrMap.set(memberName, effect$1(() => {
+		attrMap.set(memberName, effect(() => {
 			const curVal = newValue.value;
 			setAccessor(elm, memberName, prevVal, curVal, isSvg, flags);
 			prevVal = curVal;
@@ -1619,7 +1626,7 @@ const disposeTextSignal = (textNode) => {
 * @param textSig the signal to subscribe to
 */
 const wireTextSignal = (textNode, textSig) => {
-	signalNodeDisposers.set(textNode, effect$1(() => {
+	signalNodeDisposers.set(textNode, effect(() => {
 		textNode.data = String(textSig.value);
 	}));
 };
@@ -1913,7 +1920,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = fal
 		}
 		if (BUILD$1.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;
@@ -2716,8 +2723,7 @@ const initializeSignals = (elm, hostRef, cmpMeta) => {
 	const instance = BUILD$1.lazyLoad ? hostRef.$lazyInstance$ : elm;
 	for (const [memberName, [memberFlags]] of Object.entries(cmpMeta.$members$ ?? {})) {
 		if (!(memberFlags & MEMBER_FLAGS.PropLike)) continue;
-		const initialVal = hostRef.$instanceValues$.get(memberName);
-		const sig = signal(initialVal);
+		const sig = signal(hostRef.$instanceValues$.get(memberName));
 		hostRef.$signalValues$.set(memberName, sig);
 		let prevScheduleVal = sig.peek();
 		disposers.push(effect(() => {
@@ -4019,16 +4025,21 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 							});
 							return;
 						}
-						const setterSetVal = () => {
+						const parsedValue = parsePropertyValue(newValue, memberFlags, BUILD$1.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
+						const setterSetVal = (val) => {
 							const currentValue = ref.$lazyInstance$[memberName];
 							if (!ref.$instanceValues$.get(memberName) && currentValue) ref.$instanceValues$.set(memberName, currentValue);
-							ref.$lazyInstance$[memberName] = parsePropertyValue(newValue, memberFlags, BUILD$1.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
+							ref.$lazyInstance$[memberName] = val;
 							setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
 						};
-						if (ref.$lazyInstance$) setterSetVal();
-						else ref.$fetchedCbList$.push(() => {
-							setterSetVal();
-						});
+						if (ref.$lazyInstance$) setterSetVal(parsedValue);
+						else {
+							ref.$instanceValues$.set(memberName, parsedValue);
+							ref.$fetchedCbList$.push(() => {
+								const pendingValue = ref.$instanceValues$.get(memberName);
+								if (ref.$lazyInstance$[memberName] !== pendingValue) setterSetVal(pendingValue);
+							});
+						}
 					}
 				} });
 			} else if (BUILD$1.lazyLoad && BUILD$1.method && flags & PROXY_FLAGS.isElementConstructor && memberFlags & MEMBER_FLAGS.Method) Object.defineProperty(prototype, memberName, { value(...args) {
@@ -4081,8 +4092,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 					if (BUILD$1.reflect && propMemberFlags & MEMBER_FLAGS.ReflectAttr && propMemberFlags & MEMBER_FLAGS.Any && !isComplexType(this[propName]) && reflectedAttrValue(this[propName]) === newValue) return;
 					const isSpuriousBooleanRemoval = isBooleanTarget && newValue === null && this[propName] === void 0;
 					if (isBooleanTarget) newValue = !(newValue === null || newValue === "false");
+					const currentValue = BUILD$1.lazyLoad && propMemberFlags & MEMBER_FLAGS.Setter ? hostRef.$instanceValues$.get(propName) : this[propName];
 					const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-					if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) this[propName] = newValue;
+					if (!isSpuriousBooleanRemoval && newValue != currentValue && (!propDesc.get || !!propDesc.set)) this[propName] = newValue;
 				});
 			};
 			Cstr.observedAttributes = Array.from(/* @__PURE__ */ new Set([...Object.keys(cmpMeta.$watchers$ ?? {}), ...members.filter(([_, m]) => m[0] & MEMBER_FLAGS.HasAttribute).map(([propName, m]) => {
@@ -5086,8 +5098,9 @@ function forceUpdate$1() {}
 * @param results The results object to store the hydration results.
 * @param afterSsr The callback to be called after SSR is complete.
 * @param resolve The resolve function to be called when SSR is complete.
+* @param abortController The AbortController to use for aborting in-flight fetch() calls and other cancellable work when SSR times out.
 */
-function ssrApp(win, opts, results, afterSsr, resolve) {
+function ssrApp(win, opts, results, afterSsr, resolve, abortController) {
 	const connectedElements = /* @__PURE__ */ new Set();
 	const createdElements = /* @__PURE__ */ new Set();
 	const waitingElements = /* @__PURE__ */ new Set();
@@ -5097,6 +5110,10 @@ function ssrApp(win, opts, results, afterSsr, resolve) {
 	setScopedSsr(opts);
 	let tmrId;
 	let ranCompleted = false;
+	const abortedPromise = new Promise((res) => {
+		if (abortController.signal.aborted) res();
+		else abortController.signal.addEventListener("abort", () => res(), { once: true });
+	});
 	function hydratedComplete() {
 		$nativeClearTimeout(tmrId);
 		createdElements.clear();
@@ -5116,6 +5133,7 @@ function ssrApp(win, opts, results, afterSsr, resolve) {
 	}
 	function hydratedError(err) {
 		renderCatchError(opts, results, err);
+		abortController.abort();
 		hydratedComplete();
 	}
 	function timeoutExceeded() {
@@ -5160,7 +5178,7 @@ function ssrApp(win, opts, results, afterSsr, resolve) {
 			if (isValidComponent(elm, opts) && results.hydratedCount < opts.maxHydrateCount) {
 				if (!connectedElements.has(elm) && shouldHydrate(elm)) {
 					connectedElements.add(elm);
-					return hydrateComponent.call(elm, win, results, elm.nodeName, elm, waitingElements);
+					return hydrateComponent.call(elm, win, results, elm.nodeName, elm, waitingElements, abortedPromise);
 				}
 			}
 			return resolved;
@@ -5189,7 +5207,7 @@ function ssrApp(win, opts, results, afterSsr, resolve) {
 		hydratedError(e);
 	}
 }
-async function hydrateComponent(win, results, tagName, elm, waitingElements) {
+async function hydrateComponent(win, results, tagName, elm, waitingElements, aborted) {
 	tagName = tagName.toLowerCase();
 	const Cstr = loadModule({
 		$tagName$: tagName,
@@ -5204,16 +5222,17 @@ async function hydrateComponent(win, results, tagName, elm, waitingElements) {
 			addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
 			try {
 				connectedCallback(elm);
-				await elm.componentOnReady();
-				results.hydratedCount++;
-				const ref = getHostRef(elm);
-				const modeName = !ref?.$modeName$ ? "$" : ref?.$modeName$;
-				if (!results.components.some((c) => c.tag === tagName && c.mode === modeName)) results.components.push({
-					tag: tagName,
-					mode: modeName,
-					count: 0,
-					depth: -1
-				});
+				if (!await Promise.race([elm.componentOnReady().then(() => false), aborted.then(() => true)])) {
+					results.hydratedCount++;
+					const ref = getHostRef(elm);
+					const modeName = !ref?.$modeName$ ? "$" : ref?.$modeName$;
+					if (!results.components.some((c) => c.tag === tagName && c.mode === modeName)) results.components.push({
+						tag: tagName,
+						mode: modeName,
+						count: 0,
+						depth: -1
+					});
+				}
 			} catch (e) {
 				win.console.error(e);
 			}

package/dist/runtime/server/runner.mjs

@@ -11927,11 +11927,14 @@ function resetWindow(win) {
 		if (win.document != null) try {
 			win.document.defaultView = win;
 		} catch {}
-		win.fetch = null;
-		win.Headers = null;
-		win.Request = null;
-		win.Response = null;
-		win.FetchError = null;
+		const windowDestroyed = () => {
+			throw new Error("MockWindow was already destroyed");
+		};
+		win.fetch = windowDestroyed;
+		win.Headers = windowDestroyed;
+		win.Request = windowDestroyed;
+		win.Response = windowDestroyed;
+		win.FetchError = windowDestroyed;
 	}
 }
 function resetWindowDimensions(win) {

package/dist/signals/index.d.ts

@@ -1,6 +1,15 @@
-import { ReadonlySignal, ReadonlySignal as ReadonlySignal$1, Signal, batch, computed, effect, signal, untracked } from "@preact/signals-core";
+import * as SignalsCore from "@preact/signals-core";
+import { ReadonlySignal, Signal } from "@preact/signals-core";
 import "rolldown";
 import "typescript";
+//#region src/runtime/signals-core.d.ts
+declare const batch: typeof SignalsCore.batch;
+declare const computed: typeof SignalsCore.computed;
+declare const effect: typeof SignalsCore.effect;
+declare const untracked: typeof SignalsCore.untracked;
+declare function signal<T>(value: T, options?: SignalsCore.SignalOptions<T>): SignalsCore.Signal<T>;
+declare function signal<T = undefined>(): SignalsCore.Signal<T | undefined>;
+//#endregion
 //#region src/runtime/signals.d.ts
 declare const STENCIL_SIGNALS_SYMBOL: unique symbol;
 //#endregion
@@ -22,7 +31,7 @@ declare const STENCIL_SIGNALS_SYMBOL: unique symbol;
  * @param prop - the `@Prop` member name
  * @returns the `ReadonlySignal` for the prop, or `null` if not found / not signal-backed
  */
-declare const getSignal: <T = unknown>(elm: Element, prop: string) => ReadonlySignal$1<T> | null;
+declare const getSignal: <T = unknown>(elm: Element, prop: string) => ReadonlySignal<T> | null;
 /**
  * Marks a class method as a reactive effect. Wraps the method in `effect()` after
  * signal initialization and registers cleanup on disconnect. Dependencies are

package/dist/signals/index.js

@@ -1,4 +1,4 @@
-import { batch, computed, effect, signal, untracked } 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.
@@ -140,6 +140,16 @@ const consoleDevWarn = (...m) => console.warn(...STENCIL_DEV_MODE, ...m);
 (typeof window !== "undefined" ? window : {}).HTMLElement;
 BUILD.constructableCSS;
 //#endregion
+//#region src/runtime/signals-core.ts
+const getCore = () => globalThis[Symbol.for("stencil.preact-signals-core")] ??= SignalsCore;
+const batch = (fn) => getCore().batch(fn);
+const computed = (fn, options) => getCore().computed(fn, options);
+const effect = (fn, options) => getCore().effect(fn, options);
+const untracked = (fn) => getCore().untracked(fn);
+function signal(value, options) {
+	return getCore().signal(value, options);
+}
+//#endregion
 //#region src/runtime/signals.ts
 const STENCIL_SIGNALS_SYMBOL = Symbol.for("stencil.signals");
 BUILD.lazyLoad || globalThis.HTMLElement;

package/dist/sys/node/index.d.mts

@@ -1,4 +1,4 @@
-import { J as CompilerSystem, jt as Logger } from "../../index-BvF31nqP.mjs";
+import { J as CompilerSystem, jt as Logger } from "../../index-Cw1NW9FW.mjs";
 //#region src/sys/node/logger/index.d.ts
 /**
  * Create a logger to run in a Node environment

package/dist/sys/node/index.mjs

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

package/dist/sys/node/worker.mjs

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

package/dist/testing/index.d.mts

@@ -2475,6 +2475,10 @@ interface OutputTargetSsr extends OutputTargetBase {
    */
   cjs?: boolean;
 }
+/**
+ * Compiles the SSR hydrate app to a WASM plugin (via `extism-js`/QuickJS-ng) that can run
+ * outside of Node
+ */
 interface OutputTargetSsrWasm extends OutputTargetBase {
   type: 'ssr-wasm';
   /** Output directory. @default 'dist/ssr-wasm' */

package/dist/testing/index.mjs

@@ -3,7 +3,7 @@ import { MockWindow, setupGlobal } from "@stencil/mock-doc";
 import "typescript";
 import fs from "node:fs";
 import "picomatch";
-import { effect, effect as effect$1, signal } from "@preact/signals-core";
+import * as SignalsCore from "@preact/signals-core";
 import path, { basename, dirname } from "path";
 import "postcss";
 import "postcss-safe-parser";
@@ -32,7 +32,7 @@ import "@rollup/pluginutils";
 import { createHash } from "crypto";
 import { afterAll, vi } from "vitest";
 //#region src/version.ts
-const version = "5.0.0-beta.10";
+const version = "5.0.0-beta.11";
 const MEMBER_FLAGS = {
 	String: 1,
 	Number: 2,
@@ -2110,6 +2110,13 @@ const hydrateScopedToShadow = () => {
 		registerStyle(scopeId, convertScopedToShadow(styleElements[i].innerHTML), allowCS);
 	}
 };
+//#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);
+function signal(value, options) {
+	return getCore().signal(value, options);
+}
 const getRegistry = () => customElements;
 //#endregion
 //#region src/runtime/vdom/set-accessor.ts
@@ -2154,7 +2161,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 		attrMap.get(memberName)?.();
 		if (!signalAttrDisposers.has(elm)) signalAttrDisposers.set(elm, attrMap);
 		let prevVal = oldValue;
-		attrMap.set(memberName, effect$1(() => {
+		attrMap.set(memberName, effect(() => {
 			const curVal = newValue.value;
 			setAccessor(elm, memberName, prevVal, curVal, isSvg, flags);
 			prevVal = curVal;
@@ -2393,7 +2400,7 @@ const disposeTextSignal = (textNode) => {
 * @param textSig the signal to subscribe to
 */
 const wireTextSignal = (textNode, textSig) => {
-	signalNodeDisposers.set(textNode, effect$1(() => {
+	signalNodeDisposers.set(textNode, effect(() => {
 		textNode.data = String(textSig.value);
 	}));
 };
@@ -2687,7 +2694,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;
@@ -3490,8 +3497,7 @@ const initializeSignals = (elm, hostRef, cmpMeta) => {
 	const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
 	for (const [memberName, [memberFlags]] of Object.entries(cmpMeta.$members$ ?? {})) {
 		if (!(memberFlags & MEMBER_FLAGS.PropLike)) continue;
-		const initialVal = hostRef.$instanceValues$.get(memberName);
-		const sig = signal(initialVal);
+		const sig = signal(hostRef.$instanceValues$.get(memberName));
 		hostRef.$signalValues$.set(memberName, sig);
 		let prevScheduleVal = sig.peek();
 		disposers.push(effect(() => {
@@ -4785,16 +4791,21 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 							});
 							return;
 						}
-						const setterSetVal = () => {
+						const parsedValue = parsePropertyValue(newValue, memberFlags, BUILD.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
+						const setterSetVal = (val) => {
 							const currentValue = ref.$lazyInstance$[memberName];
 							if (!ref.$instanceValues$.get(memberName) && currentValue) ref.$instanceValues$.set(memberName, currentValue);
-							ref.$lazyInstance$[memberName] = parsePropertyValue(newValue, memberFlags, BUILD.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
+							ref.$lazyInstance$[memberName] = val;
 							setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
 						};
-						if (ref.$lazyInstance$) setterSetVal();
-						else ref.$fetchedCbList$.push(() => {
-							setterSetVal();
-						});
+						if (ref.$lazyInstance$) setterSetVal(parsedValue);
+						else {
+							ref.$instanceValues$.set(memberName, parsedValue);
+							ref.$fetchedCbList$.push(() => {
+								const pendingValue = ref.$instanceValues$.get(memberName);
+								if (ref.$lazyInstance$[memberName] !== pendingValue) setterSetVal(pendingValue);
+							});
+						}
 					}
 				} });
 			} else if (BUILD.lazyLoad && BUILD.method && flags & PROXY_FLAGS.isElementConstructor && memberFlags & MEMBER_FLAGS.Method) Object.defineProperty(prototype, memberName, { value(...args) {
@@ -4847,8 +4858,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 					if (BUILD.reflect && propMemberFlags & MEMBER_FLAGS.ReflectAttr && propMemberFlags & MEMBER_FLAGS.Any && !isComplexType(this[propName]) && reflectedAttrValue(this[propName]) === newValue) return;
 					const isSpuriousBooleanRemoval = isBooleanTarget && newValue === null && this[propName] === void 0;
 					if (isBooleanTarget) newValue = !(newValue === null || newValue === "false");
+					const currentValue = BUILD.lazyLoad && propMemberFlags & MEMBER_FLAGS.Setter ? hostRef.$instanceValues$.get(propName) : this[propName];
 					const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-					if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) this[propName] = newValue;
+					if (!isSpuriousBooleanRemoval && newValue != currentValue && (!propDesc.get || !!propDesc.set)) this[propName] = newValue;
 				});
 			};
 			Cstr.observedAttributes = Array.from(/* @__PURE__ */ new Set([...Object.keys(cmpMeta.$watchers$ ?? {}), ...members.filter(([_, m]) => m[0] & MEMBER_FLAGS.HasAttribute).map(([propName, m]) => {

package/package.json

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