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

package/dist/runtime/server/index.d.mts

@@ -1069,6 +1069,32 @@ declare const Fragment: FunctionalComponent;
 //#region src/runtime/host-listener.d.ts
 declare const addHostEventListeners: (elm: HostElement, hostRef: HostRef, listeners?: ComponentRuntimeHostListener[]) => void;
 //#endregion
+//#region src/runtime/inject-side-effect-style.d.ts
+/**
+ * Registers a root (a shadow root, or `document`) to receive every side-effect CSS import
+ * (a plain, non-component `import './foo.css'`), now and in future. Call in `connectedCallback`,
+ * paired with `unregisterSideEffectStyleTarget` in `disconnectedCallback` so the registry doesn't
+ * hold disconnected roots forever.
+ * @param root the root to register
+ */
+declare function registerSideEffectStyleTarget(root: DocumentOrShadowRoot): void;
+/**
+ * Removes a root registered via `registerSideEffectStyleTarget` - call in `disconnectedCallback`.
+ * @param root the root to unregister
+ */
+declare function unregisterSideEffectStyleTarget(root: DocumentOrShadowRoot): void;
+/**
+ * Applies plain (non-component) CSS text to every registered root - respects shadow DOM
+ * encapsulation instead of always reaching for the top-level document. Not meant to be called
+ * directly: this is what the compiler's CSS-to-ESM output calls for CSS with no Stencil `tag`
+ * (i.e. not a component's own `styleUrl`), typically a third-party dependency's CSS import.
+ *
+ * `@font-face` rules are pulled out and adopted onto top-level `document` not per-root
+ * (Chromium (https://issues.chromium.org/issues/41085401) per-root never loads).
+ * @param cssText the CSS text to apply
+ */
+declare function injectSideEffectStyle(cssText: string): void;
+//#endregion
 //#region src/runtime/mixin.d.ts
 type Ctor<T = {}> = new (...args: any[]) => T;
 declare function Mixin(...mixins: ((base: Ctor) => Ctor)[]): Ctor<{}>;
@@ -1248,4 +1274,4 @@ declare const setAssetPath: (path: string) => string;
 declare const setScopedSsr: (opts: SsrFactoryOptions) => void;
 declare const needsScopedSSR: () => boolean;
 //#endregion
-export { BUILD, Build, Env, Fragment, Host, Mixin, NAMESPACE, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRenderingRef, getShadowRoot, getValue, hAsync as h, insertVdomAnnotations, isMemberInElement, jsx, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, parsePropertyValue, plt, postUpdateComponent, proxyComponent, proxyCustomElement, readTask, registerComponents, registerHost, registerInstance, renderVdom, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setScopedSsr, setTagTransformer, setValue, ssrApp, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, win, writeTask };
+export { BUILD, Build, Env, Fragment, Host, Mixin, NAMESPACE, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRenderingRef, getShadowRoot, getValue, hAsync as h, injectSideEffectStyle, insertVdomAnnotations, isMemberInElement, jsx, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, parsePropertyValue, plt, postUpdateComponent, proxyComponent, proxyCustomElement, readTask, registerComponents, registerHost, registerInstance, registerSideEffectStyleTarget, renderVdom, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setScopedSsr, setTagTransformer, setValue, ssrApp, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, unregisterSideEffectStyleTarget, win, writeTask };

package/dist/runtime/server/index.mjs

@@ -1597,16 +1597,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$1(() => {
+		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
@@ -1628,13 +1645,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex) => {
 	if (BUILD$1.isDev && newVNode.$elm$) newVNode.$text$ !== null ? `${newVNode.$text$}` : `${String(newVNode.$tag$)}`;
 	if (BUILD$1.vdomText && newVNode.$text$ != null) {
 		elm = newVNode.$elm$ = win.document.createTextNode(newVNode.$text$);
-		if (BUILD$1.vdomSignals && newVNode.$signal$) {
-			const textSig = newVNode.$signal$;
-			const textNode = elm;
-			signalNodeDisposers.set(textNode, effect$1(() => {
-				textNode.data = String(textSig.value);
-			}));
-		}
+		if (BUILD$1.vdomSignals && newVNode.$signal$) wireTextSignal(elm, newVNode.$signal$);
 	} else if (BUILD$1.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotReference) {
 		elm = newVNode.$elm$ = BUILD$1.isDebug || BUILD$1.hydrateServerSide ? slotReferenceDebugNode(newVNode) : win.document.createTextNode("");
 		if (typeof newVNode.$attrs$?.slot === "string") elm["s-sa"] = newVNode.$attrs$.slot;
@@ -1995,7 +2006,17 @@ const patch = (oldVNode, newVNode, isInitialRender = false) => {
 		else if (BUILD$1.hydrateClientSide && isInitialRender && BUILD$1.updatable && oldChildren !== null && newChildren === null) newVNode.$children$ = oldChildren;
 		if (BUILD$1.svg && isSvgMode && tag === "svg") isSvgMode = false;
 	} else if (BUILD$1.vdomText && BUILD$1.slotRelocation && (defaultHolder = elm["s-cr"])) defaultHolder.parentNode.textContent = text;
-	else if (BUILD$1.vdomText && oldVNode.$text$ !== text) elm.data = text;
+	else if (BUILD$1.vdomText) {
+		if (BUILD$1.vdomSignals && newVNode.$signal$) {
+			if (newVNode.$signal$ !== oldVNode.$signal$) {
+				disposeTextSignal(elm);
+				wireTextSignal(elm, newVNode.$signal$);
+			}
+		} else {
+			if (BUILD$1.vdomSignals && oldVNode.$signal$) disposeTextSignal(elm);
+			if (oldVNode.$text$ !== text) elm.data = text;
+		}
+	}
 };
 /**
 * Component-global information about nodes which are either currently being
@@ -3329,12 +3350,13 @@ const restoreSafeSelector = (placeholders, content) => {
 const _polyfillHost = "-shadowcsshost";
 const _polyfillSlotted = "-shadowcssslotted";
 const _polyfillHostContext = "-shadowcsscontext";
+const _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)";
 let _cssColonHostRe;
 let _cssColonHostContextRe;
 let _cssColonSlottedRe;
-const getCssColonHostRe = () => _cssColonHostRe ??= /* @__PURE__ */ new RegExp("(-shadowcsshost)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
-const getCssColonHostContextRe = () => _cssColonHostContextRe ??= /* @__PURE__ */ new RegExp("(-shadowcsscontext)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
-const getCssColonSlottedRe = () => _cssColonSlottedRe ??= /* @__PURE__ */ new RegExp("(-shadowcssslotted)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
+const getCssColonHostRe = () => _cssColonHostRe ??= new RegExp("(-shadowcsshost" + _parenSuffix, "gim");
+const getCssColonHostContextRe = () => _cssColonHostContextRe ??= new RegExp("(-shadowcsscontext" + _parenSuffix, "gim");
+const getCssColonSlottedRe = () => _cssColonSlottedRe ??= new RegExp("(-shadowcssslotted" + _parenSuffix, "gim");
 const _polyfillHostNoCombinator = "-shadowcsshost-no-combinator";
 const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
 const _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
@@ -3597,12 +3619,13 @@ const scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector)
 		else return shallowPart.trim();
 	}).join(", ");
 };
+const isScopableAtRule = (selector) => selector.startsWith("@media") || selector.startsWith("@supports") || selector.startsWith("@page") || selector.startsWith("@document") || selector.startsWith("@layer");
 const scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
 	return processRules(cssText, (rule) => {
 		let selector = rule.selector;
 		let content = rule.content;
 		if (rule.selector[0] !== "@") selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);
-		else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector);
+		else if (isScopableAtRule(rule.selector)) content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector);
 		return {
 			selector: selector.replace(/\s{2,}/g, " ").trim(),
 			content
@@ -3694,14 +3717,12 @@ const scopeCss = (cssText, scopeId, commentOriginalSelector) => {
 			rule.selector = placeholder + rule.selector;
 			return rule;
 		};
-		cssText = processRules(cssText, (rule) => {
+		const commentSelectors = (input) => processRules(input, (rule) => {
 			if (rule.selector[0] !== "@") return processCommentedSelector(rule);
-			else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) {
-				rule.content = processRules(rule.content, processCommentedSelector);
-				return rule;
-			}
+			if (isScopableAtRule(rule.selector)) rule.content = commentSelectors(rule.content);
 			return rule;
 		});
+		cssText = commentSelectors(cssText);
 	}
 	const scoped = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector);
 	cssText = [scoped.cssText, ...commentsWithHash].join("\n");
@@ -3900,6 +3921,14 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 //#endregion
 //#region src/runtime/proxy-component.ts
 /**
+* Serialize a prop value the way `setAccessor()` does when it reflects it, so the runtime can
+* recognize an `attributeChangedCallback` it triggered itself.
+*
+* @param propValue the current value of a reflected prop
+* @returns the string the attribute would hold, or `null` if the attribute would be removed
+*/
+const reflectedAttrValue = (propValue) => propValue == null || propValue === false ? null : propValue === true ? "" : String(propValue);
+/**
 * Attach a series of runtime constructs to a compiled Stencil component
 * constructor, including getters and setters for the `@Prop` and `@State`
 * decorators, callbacks for when attributes change, and so on.
@@ -4047,7 +4076,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 						return;
 					}
 					const propFlags = members.find(([m]) => m === propName);
-					const isBooleanTarget = propFlags && propFlags[1][0] & MEMBER_FLAGS.Boolean;
+					const propMemberFlags = propFlags ? propFlags[1][0] : 0;
+					const isBooleanTarget = propMemberFlags & MEMBER_FLAGS.Boolean;
+					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 propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
@@ -4660,6 +4691,86 @@ const getHostListenerTarget = (doc, elm, flags) => {
 };
 const hostListenerOpts = (flags) => (flags & LISTENER_FLAGS.Capture) !== 0;
 //#endregion
+//#region src/runtime/inject-side-effect-style.ts
+const styleSheets = /* @__PURE__ */ new Map();
+const knownRoots = /* @__PURE__ */ new Set();
+const adoptedRoots = /* @__PURE__ */ new WeakMap();
+const knownFontFaces = /* @__PURE__ */ new Set();
+const adopt = (root, sheet) => {
+	let roots = adoptedRoots.get(sheet);
+	if (!roots) {
+		roots = /* @__PURE__ */ new WeakSet();
+		adoptedRoots.set(sheet, roots);
+	}
+	if (!roots.has(root)) {
+		roots.add(root);
+		root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+	}
+};
+/**
+* Registers a root (a shadow root, or `document`) to receive every side-effect CSS import
+* (a plain, non-component `import './foo.css'`), now and in future. Call in `connectedCallback`,
+* paired with `unregisterSideEffectStyleTarget` in `disconnectedCallback` so the registry doesn't
+* hold disconnected roots forever.
+* @param root the root to register
+*/
+function registerSideEffectStyleTarget(root) {
+	knownRoots.add(root);
+	for (const sheet of styleSheets.values()) adopt(root, sheet);
+}
+/**
+* Removes a root registered via `registerSideEffectStyleTarget` - call in `disconnectedCallback`.
+* @param root the root to unregister
+*/
+function unregisterSideEffectStyleTarget(root) {
+	knownRoots.delete(root);
+}
+const FONT_FACE_RE = /@font-face\s*\{[^{}]*\}/g;
+/**
+* Splits `@font-face` rules out of a CSS text - exported standalone (from private
+* module state - usually 3rd party node_modules) exported for testing
+* @param cssText the CSS text to split
+* @returns the font-face rules joined together (`null` if there were none) and the remaining CSS
+*/
+function splitFontFaces(cssText) {
+	const fontFaces = cssText.match(FONT_FACE_RE);
+	if (!fontFaces) return {
+		fontFaceText: null,
+		rest: cssText
+	};
+	return {
+		fontFaceText: fontFaces.join("\n"),
+		rest: cssText.replace(FONT_FACE_RE, "")
+	};
+}
+/**
+* Applies plain (non-component) CSS text to every registered root - respects shadow DOM
+* encapsulation instead of always reaching for the top-level document. Not meant to be called
+* directly: this is what the compiler's CSS-to-ESM output calls for CSS with no Stencil `tag`
+* (i.e. not a component's own `styleUrl`), typically a third-party dependency's CSS import.
+*
+* `@font-face` rules are pulled out and adopted onto top-level `document` not per-root
+* (Chromium (https://issues.chromium.org/issues/41085401) per-root never loads).
+* @param cssText the CSS text to apply
+*/
+function injectSideEffectStyle(cssText) {
+	const { fontFaceText, rest } = splitFontFaces(cssText);
+	if (fontFaceText && !knownFontFaces.has(fontFaceText)) {
+		knownFontFaces.add(fontFaceText);
+		const fontFaceSheet = new CSSStyleSheet();
+		fontFaceSheet.replaceSync(fontFaceText);
+		document.adoptedStyleSheets = [...document.adoptedStyleSheets, fontFaceSheet];
+	}
+	if (!rest.trim()) return;
+	let sheet = styleSheets.get(rest);
+	if (!sheet) {
+		sheet = new CSSStyleSheet();
+		sheet.replaceSync(rest);
+		styleSheets.set(rest, sheet);
+	}
+	for (const root of knownRoots) adopt(root, sheet);
+}
+//#endregion
 //#region src/runtime/mixin.ts
 const baseClass = BUILD$1.lazyLoad ? class {} : globalThis.HTMLElement || class {};
 function Mixin(...mixins) {
@@ -5363,4 +5474,4 @@ const setScopedSsr = (opts) => {
 const needsScopedSSR = () => scopedSSR;
 let scopedSSR = false;
 //#endregion
-export { BUILD, Build, Env, Fragment, Host, Mixin, NAMESPACE, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRenderingRef, getShadowRoot, getValue, hAsync as h, insertVdomAnnotations, isMemberInElement, jsx, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, parsePropertyValue, plt, postUpdateComponent, proxyComponent, proxyCustomElement, readTask, registerComponents, registerHost, registerInstance, renderVdom, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setScopedSsr, setTagTransformer, setValue, ssrApp, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, win, writeTask };
+export { BUILD, Build, Env, Fragment, Host, Mixin, NAMESPACE, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRenderingRef, getShadowRoot, getValue, hAsync as h, injectSideEffectStyle, insertVdomAnnotations, isMemberInElement, jsx, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, parsePropertyValue, plt, postUpdateComponent, proxyComponent, proxyCustomElement, readTask, registerComponents, registerHost, registerInstance, registerSideEffectStyleTarget, renderVdom, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setScopedSsr, setTagTransformer, setValue, ssrApp, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, unregisterSideEffectStyleTarget, win, writeTask };

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

@@ -1,4 +1,4 @@
-import { J as CompilerSystem, jt as Logger } from "../../index-RrQfiPWK.mjs";
+import { J as CompilerSystem, jt as Logger } from "../../index-BvF31nqP.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-75gQKkFz.mjs";
+import { n as setupNodeProcess, r as createNodeLogger, t as createNodeSys } from "../../node-BKtLn2R9.mjs";
 export { createNodeLogger, createNodeSys, setupNodeProcess };

package/dist/sys/node/worker.mjs

@@ -1,5 +1,5 @@
-import { l as createWorkerMessageHandler } from "../../compiler-NrvbUOX1.mjs";
-import { t as createNodeSys } from "../../node-75gQKkFz.mjs";
+import { l as createWorkerMessageHandler } from "../../compiler-PoywOlbq.mjs";
+import { t as createNodeSys } from "../../node-BKtLn2R9.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

@@ -919,7 +919,8 @@ interface StencilConfig {
    * Will generate {@link https://nodejs.org/api/packages.html#packages_exports export map} entry points
    * for each component in the build when `true`.
    *
-   * @default false
+   * Defaults to `true` for "no-config" projects (no `stencil.config.ts`/`.js` file), and `false`
+   * whenever a config file is present - set this explicitly to opt an existing project in or out.
    */
   generateExportMaps?: boolean;
   /**
@@ -973,10 +974,19 @@ interface StencilConfig {
    */
   rolldownConfig?: RolldownConfig;
   /**
-   * Sets if the JS browser files are minified or not. Stencil uses `terser` under the hood.
+   * Sets if the JS browser files are minified or not.
    * Defaults to `false` in dev mode and `true` in production mode.
    */
   minifyJs?: boolean;
+  /**
+   * Which minifier to use for JS output when `minifyJs` is enabled.
+   *
+   * - `oxc`: built into rolldown. Much faster than terser. Output may be slightly larger.
+   * - `terser`: slower, but currently produces the smallest output.
+   *
+   * Defaults to `oxc`.
+   */
+  jsMinifier?: 'terser' | 'oxc';
   /**
    * Sets if the CSS is minified or not.
    * Defaults to `false` in dev mode and `true` in production mode.
@@ -1322,7 +1332,7 @@ type RequireFields<T, K extends keyof T> = T & { [P in K]-?: T[P]; };
 /**
  * Fields in {@link Config} to make required for {@link ValidatedConfig}
  */
-type StrictConfigFields = keyof Pick<Config, 'cacheDir' | 'devServer' | 'compat' | 'fsNamespace' | 'hydratedFlag' | 'logLevel' | 'logger' | 'minifyCss' | 'minifyJs' | 'namespace' | 'outputTargets' | 'packageJsonFilePath' | 'rolldownConfig' | 'rootDir' | 'srcDir' | 'srcIndexHtml' | 'sys' | 'transformAliasedImportPaths'>;
+type StrictConfigFields = keyof Pick<Config, 'cacheDir' | 'devServer' | 'compat' | 'fsNamespace' | 'hydratedFlag' | 'jsMinifier' | 'logLevel' | 'logger' | 'minifyCss' | 'minifyJs' | 'namespace' | 'outputTargets' | 'packageJsonFilePath' | 'rolldownConfig' | 'rootDir' | 'srcDir' | 'srcIndexHtml' | 'sys' | 'transformAliasedImportPaths'>;
 /**
  * A version of {@link Config} that makes certain fields required. This type represents a valid configuration entity.
  * When a configuration is received by the user, it is a bag of unverified data. In order to make stricter guarantees
@@ -4480,6 +4490,12 @@ interface TransformCssToEsmOutput {
     varName: string;
     importPath: string;
   }[];
+  /**
+   * Whether `output` itself has an observable side effect (a plain, untagged CSS file's
+   * generated module self-injects CSSStyleSheets; a Stencil component's tagged `styleUrl`
+   * output doesn't)
+   */
+  moduleSideEffects?: boolean;
 }
 interface PackageJsonData {
   name?: string;

package/dist/testing/index.mjs

@@ -1,6 +1,6 @@
 import nodePath from "node:path";
 import { MockWindow, setupGlobal } from "@stencil/mock-doc";
-import ts from "typescript";
+import "typescript";
 import fs from "node:fs";
 import "picomatch";
 import { effect, effect as effect$1, signal } from "@preact/signals-core";
@@ -11,6 +11,7 @@ import "postcss-selector-parser";
 import "magic-string";
 import "rolldown";
 import resolve from "resolve";
+import "rolldown/utils";
 import "terser";
 import "css-what";
 import { execFile } from "node:child_process";
@@ -31,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.0";
+const version = "5.0.0-beta.10";
 const MEMBER_FLAGS = {
 	String: 1,
 	Number: 2,
@@ -378,10 +379,6 @@ const trimFalsy = (data) => {
 */
 const isDef = (v) => v != null && v !== void 0;
 /**
-* This is just a no-op, don't expect it to do anything.
-*/
-const noop = () => {};
-/**
 * Check whether a value is a 'complex type', defined here as an object or a
 * function.
 *
@@ -534,23 +531,6 @@ function join(...paths) {
 	*/
 	return normalizePath(nodePath.join(...paths), false);
 }
-/**
-* A wrapped version of node.js' {@link path.resolve} which adds our custom
-* normalization logic. This resolves a path to a given (relative or absolute)
-* path.
-*
-* @throws the underlying node function will throw if any argument is not a
-* string
-* @param paths a path or path fragments to resolve
-* @returns a resolved path!
-*/
-function resolve$1(...paths) {
-	/**
-	* When normalizing, we should _not_ attempt to relativize the path returned by the native Node `resolve` method. When
-	* calculating the path from each of the string-based parts, Node does not prepend './' to the calculated path.
-	*/
-	return normalizePath(nodePath.resolve(...paths), false);
-}
 //#endregion
 //#region src/utils/query-nonce-meta-tag-content.ts
 /**
@@ -2391,16 +2371,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$1(() => {
+		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
@@ -2422,13 +2419,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$1(() => {
-				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;
@@ -2789,7 +2780,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
@@ -4116,12 +4117,13 @@ const restoreSafeSelector = (placeholders, content) => {
 const _polyfillHost = "-shadowcsshost";
 const _polyfillSlotted = "-shadowcssslotted";
 const _polyfillHostContext = "-shadowcsscontext";
+const _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)";
 let _cssColonHostRe;
 let _cssColonHostContextRe;
 let _cssColonSlottedRe;
-const getCssColonHostRe = () => _cssColonHostRe ??= /* @__PURE__ */ new RegExp("(-shadowcsshost)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
-const getCssColonHostContextRe = () => _cssColonHostContextRe ??= /* @__PURE__ */ new RegExp("(-shadowcsscontext)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
-const getCssColonSlottedRe = () => _cssColonSlottedRe ??= /* @__PURE__ */ new RegExp("(-shadowcssslotted)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
+const getCssColonHostRe = () => _cssColonHostRe ??= new RegExp("(-shadowcsshost" + _parenSuffix, "gim");
+const getCssColonHostContextRe = () => _cssColonHostContextRe ??= new RegExp("(-shadowcsscontext" + _parenSuffix, "gim");
+const getCssColonSlottedRe = () => _cssColonSlottedRe ??= new RegExp("(-shadowcssslotted" + _parenSuffix, "gim");
 const _polyfillHostNoCombinator = "-shadowcsshost-no-combinator";
 const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
 const _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
@@ -4384,12 +4386,13 @@ const scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector)
 		else return shallowPart.trim();
 	}).join(", ");
 };
+const isScopableAtRule = (selector) => selector.startsWith("@media") || selector.startsWith("@supports") || selector.startsWith("@page") || selector.startsWith("@document") || selector.startsWith("@layer");
 const scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
 	return processRules(cssText, (rule) => {
 		let selector = rule.selector;
 		let content = rule.content;
 		if (rule.selector[0] !== "@") selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);
-		else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector);
+		else if (isScopableAtRule(rule.selector)) content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector);
 		return {
 			selector: selector.replace(/\s{2,}/g, " ").trim(),
 			content
@@ -4481,14 +4484,12 @@ const scopeCss = (cssText, scopeId, commentOriginalSelector) => {
 			rule.selector = placeholder + rule.selector;
 			return rule;
 		};
-		cssText = processRules(cssText, (rule) => {
+		const commentSelectors = (input) => processRules(input, (rule) => {
 			if (rule.selector[0] !== "@") return processCommentedSelector(rule);
-			else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) {
-				rule.content = processRules(rule.content, processCommentedSelector);
-				return rule;
-			}
+			if (isScopableAtRule(rule.selector)) rule.content = commentSelectors(rule.content);
 			return rule;
 		});
+		cssText = commentSelectors(cssText);
 	}
 	const scoped = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector);
 	cssText = [scoped.cssText, ...commentsWithHash].join("\n");
@@ -4686,6 +4687,14 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 //#endregion
 //#region src/runtime/proxy-component.ts
 /**
+* Serialize a prop value the way `setAccessor()` does when it reflects it, so the runtime can
+* recognize an `attributeChangedCallback` it triggered itself.
+*
+* @param propValue the current value of a reflected prop
+* @returns the string the attribute would hold, or `null` if the attribute would be removed
+*/
+const reflectedAttrValue = (propValue) => propValue == null || propValue === false ? null : propValue === true ? "" : String(propValue);
+/**
 * Attach a series of runtime constructs to a compiled Stencil component
 * constructor, including getters and setters for the `@Prop` and `@State`
 * decorators, callbacks for when attributes change, and so on.
@@ -4833,7 +4842,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 						return;
 					}
 					const propFlags = members.find(([m]) => m === propName);
-					const isBooleanTarget = propFlags && propFlags[1][0] & MEMBER_FLAGS.Boolean;
+					const propMemberFlags = propFlags ? propFlags[1][0] : 0;
+					const isBooleanTarget = propMemberFlags & MEMBER_FLAGS.Boolean;
+					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 propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
@@ -5863,28 +5874,6 @@ new RegExp(`^(${[.../* @__PURE__ */ new Set([
 ])].join("|")})$`);
 promisify(execFile);
 process.platform;
-//#endregion
-//#region src/compiler/sys/typescript/typescript-sys.ts
-const patchTypeScriptSysMinimum = () => {
-	if (!ts.sys) ts.sys = {
-		args: [],
-		createDirectory: noop,
-		directoryExists: () => false,
-		exit: noop,
-		fileExists: () => false,
-		getCurrentDirectory: process.cwd,
-		getDirectories: () => [],
-		getExecutingFilePath: () => "./",
-		readDirectory: () => [],
-		readFile: noop,
-		newLine: "\n",
-		resolvePath: resolve$1,
-		useCaseSensitiveFileNames: false,
-		write: noop,
-		writeFile: noop
-	};
-};
-patchTypeScriptSysMinimum();
 new Set([
 	"CheckboxStateChange",
 	"DOMContentLoaded",
@@ -7764,6 +7753,7 @@ function mockValidatedConfig(overrides = {}) {
 		logger: mockLogger(),
 		minifyCss: false,
 		minifyJs: false,
+		jsMinifier: "oxc",
 		namespace: "Testing",
 		outputTargets: baseConfig.outputTargets ?? [],
 		packageJsonFilePath: nodePath.join(rootDir, "package.json"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core",
-  "version": "5.0.0-beta.0",
+  "version": "5.0.0-beta.10",
   "description": "A Compiler for Web Components and Progressive Web Apps",
   "keywords": [
     "components",
@@ -43,6 +43,10 @@
       "types": "./dist/compiler/utils/index.d.mts",
       "import": "./dist/compiler/utils/index.mjs"
     },
+    "./compiler/browser": {
+      "types": "./dist/compiler/browser.d.ts",
+      "import": "./dist/compiler/browser.js"
+    },
     "./jsx-runtime": {
       "types": "./dist/jsx-runtime.d.mts",
       "import": "./dist/jsx-runtime.mjs"
@@ -116,14 +120,14 @@
     "postcss-safe-parser": "^7.0.1",
     "postcss-selector-parser": "^7.1.5",
     "resolve": "^1.22.12",
-    "rolldown": "^1.2.4",
+    "rolldown": "^1.2.6",
     "semver": "^7.8.5",
     "terser": "^5.50.0",
     "tinyglobby": "^0.2.17",
     "typescript": ">5.0.0 <7.0.0",
-    "@stencil/cli": "5.0.0-beta.0",
-    "@stencil/dev-server": "5.0.0-beta.0",
-    "@stencil/mock-doc": "5.0.0-beta.0"
+    "@stencil/dev-server": "5.0.0-beta.10",
+    "@stencil/cli": "5.0.0-beta.10",
+    "@stencil/mock-doc": "5.0.0-beta.10"
   },
   "devDependencies": {
     "@ionic/prettier-config": "^4.0.0",