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

package/dist/testing/index.mjs

@@ -1,10 +1,13 @@
-import { B as BUILD, E as reWireGetterSetter, V as Env, _ as getElement, a as Mixin, b as setAssetPath, c as forceUpdate, d as createEvent, f as getMode, g as h, h as Host, l as getRenderingRef, o as Fragment, s as bootstrapLazy, t as insertVdomAnnotations, u as renderVdom, y as getAssetPath } from "../client-CSm3x5ke.mjs";
-import { C as CMP_FLAGS, V as EVENT_FLAGS, h as noop } from "../regular-expression-D5pGVpCu.mjs";
-import { _ as getBuildFeatures, c as createWorkerContext, h as BuildContext, i as createSystem, m as Cache, p as createInMemoryFs } from "../compiler-D6iP7Bzb.mjs";
-import { St as formatLazyBundleRuntimeMeta } from "../validation-Byxie0Uk.mjs";
-import { o as buildEvents } from "../node-Bg-mO5dw.mjs";
-import path from "node:path";
-import path$1 from "path";
+import { A as HYDRATE_ID, C as setAssetPath, D as DEFAULT_DOC_DATA, F as reWireGetterSetter, L as BUILD, M as STENCIL_DOC_DATA, P as getHostRef$1, R as Env, S as getAssetPath, _ as insertBefore, b as getElement, c as Mixin, g as getRenderingRef, h as forceUpdate, j as NODE_TYPE, k as HYDRATE_CHILD_ID, l as bootstrapLazy, m as h, p as Host, s as ReactiveControllerHost, u as getMode, v as renderVdom, y as createEvent } from "../client-D1MsT-Rp.mjs";
+import { R as EVENT_FLAGS, h as noop, w as CMP_FLAGS } from "../regular-expression-XqU5zmPp.mjs";
+import { t as Fragment } from "../fragment-Di1hWOC8.mjs";
+import { b as getBuildFeatures, c as createWorkerContext, h as Cache, i as createSystem, o as loadConfig, p as createInMemoryFs, s as createCompiler, v as BuildContext } from "../compiler-Cddp97Pg.mjs";
+import { C as formatLazyBundleRuntimeMeta } from "../validation-Dd3g77T5.mjs";
+import { o as buildEvents } from "../node-BQR4L-TG.mjs";
+import fs from "node:fs";
+import nodePath from "node:path";
+import { fileURLToPath } from "node:url";
+import path from "path";
 import { MockWindow, setupGlobal } from "@stencil/mock-doc";
 import { createHash } from "crypto";
 import { afterAll, vi } from "vitest";
@@ -86,7 +89,7 @@ const createTestingSystem = () => {
 	let diskReads = 0;
 	let diskWrites = 0;
 	const sys = createSystem();
-	sys.platformPath = path$1;
+	sys.platformPath = path;
 	sys.generateContentHash = (content, length) => {
 		let hash = createHash("sha1").update(content).digest("hex").toLowerCase();
 		if (typeof length === "number") hash = hash.slice(0, length);
@@ -223,9 +226,11 @@ const mockComponentMeta = (overrides = {}) => ({
 	hasVdomStyle: false,
 	hasVdomText: false,
 	hasVdomXlink: false,
+	hasSignalsImport: false,
 	hasWatchCallback: false,
 	htmlAttrNames: [],
 	htmlParts: [],
+	htmlSlots: [],
 	htmlTagNames: [],
 	internal: false,
 	isCollectionDependency: false,
@@ -246,6 +251,7 @@ const mockComponentMeta = (overrides = {}) => ({
 	states: [],
 	styleDocs: [],
 	styles: [],
+	globalStyles: [],
 	tagName: "stub-cmp",
 	virtualProperties: [],
 	watchers: [],
@@ -260,16 +266,17 @@ const mockComponentMeta = (overrides = {}) => ({
 */
 function mockValidatedConfig(overrides = {}) {
 	const baseConfig = mockConfig(overrides);
-	const rootDir = path.resolve("/");
+	const rootDir = nodePath.resolve("/");
 	return {
 		...baseConfig,
 		cacheDir: ".stencil",
 		devMode: true,
 		devServer: {},
-		extras: {},
+		compat: {
+			suppressPublicNameWarnings: false,
+			suppressEventNameWarnings: false
+		},
 		fsNamespace: "testing",
-		hashFileNames: false,
-		hashedFileNameLength: 8,
 		hydratedFlag: null,
 		logLevel: "info",
 		logger: mockLogger(),
@@ -277,19 +284,14 @@ function mockValidatedConfig(overrides = {}) {
 		minifyJs: false,
 		namespace: "Testing",
 		outputTargets: baseConfig.outputTargets ?? [],
-		packageJsonFilePath: path.join(rootDir, "package.json"),
+		packageJsonFilePath: nodePath.join(rootDir, "package.json"),
 		rootDir,
 		sourceMap: true,
 		srcDir: "/src",
 		srcIndexHtml: "src/index.html",
-		suppressReservedPublicNameWarnings: false,
 		sys: createTestingSystem(),
 		transformAliasedImportPaths: true,
-		rolldownConfig: {
-			inputOptions: {},
-			outputOptions: {}
-		},
-		validatePrimaryPackageOutputTarget: false,
+		rolldownConfig: {},
 		...overrides
 	};
 }
@@ -301,20 +303,21 @@ function mockValidatedConfig(overrides = {}) {
 * @returns the mock Stencil configuration
 */
 function mockConfig(overrides = {}) {
-	const rootDir = path.resolve("/");
+	const rootDir = nodePath.resolve("/");
 	let { sys } = overrides;
 	if (!sys) sys = createTestingSystem();
 	sys.getCurrentDirectory = () => rootDir;
 	return {
 		_isTesting: true,
 		buildAppCore: false,
-		buildDist: true,
 		bundles: null,
 		devMode: true,
 		enableCache: false,
-		extras: {},
+		compat: {
+			suppressPublicNameWarnings: false,
+			suppressEventNameWarnings: false
+		},
 		globalScript: null,
-		hashFileNames: false,
 		logger: new TestingLogger(),
 		maxConcurrentWorkers: 0,
 		minifyCss: false,
@@ -328,7 +331,6 @@ function mockConfig(overrides = {}) {
 		},
 		rootDir,
 		sourceMap: true,
-		suppressReservedPublicNameWarnings: false,
 		sys,
 		validateTypes: false,
 		...overrides
@@ -348,7 +350,6 @@ const mockLoadConfigInit = (overrides) => {
 	return {
 		config: {},
 		configPath: void 0,
-		initTsConfig: true,
 		logger: void 0,
 		sys: void 0,
 		...overrides
@@ -366,7 +367,7 @@ function mockCompilerCtx(config) {
 		activeFilesUpdated: [],
 		addWatchDir: noop,
 		addWatchFile: noop,
-		cachedGlobalStyle: null,
+		globalStyleCache: /* @__PURE__ */ new Map(),
 		changedFiles: /* @__PURE__ */ new Set(),
 		changedModules: /* @__PURE__ */ new Set(),
 		collections: [],
@@ -383,11 +384,14 @@ function mockCompilerCtx(config) {
 		reset: noop,
 		resolvedCollections: /* @__PURE__ */ new Set(),
 		rolldownCache: /* @__PURE__ */ new Map(),
-		rolldownCacheHydrate: null,
+		rolldownCacheSsr: null,
 		rolldownCacheLazy: null,
 		rolldownCacheNative: null,
+		transpileCache: /* @__PURE__ */ new Map(),
+		prevStylesMap: /* @__PURE__ */ new Map(),
 		styleModeNames: /* @__PURE__ */ new Set(),
-		worker: createWorkerContext(innerConfig.sys)
+		worker: createWorkerContext(innerConfig.sys),
+		cssTransformCache: /* @__PURE__ */ new Map()
 	};
 	Object.defineProperty(compilerCtx, "fs", { get() {
 		if (this._fs == null) this._fs = createInMemoryFs(innerConfig.sys);
@@ -401,7 +405,8 @@ function mockCompilerCtx(config) {
 }
 function mockBuildCtx(config, compilerCtx) {
 	const validatedConfig = config || mockValidatedConfig();
-	return new BuildContext(validatedConfig, compilerCtx || mockCompilerCtx(validatedConfig));
+	const validatedCompilerCtx = compilerCtx || mockCompilerCtx(validatedConfig);
+	return new BuildContext(validatedConfig, validatedCompilerCtx);
 }
 function mockCache(config, compilerCtx) {
 	config.enableCache = true;
@@ -453,6 +458,7 @@ const mockModule = (mod = {}) => ({
 	htmlAttrNames: [],
 	htmlTagNames: [],
 	htmlParts: [],
+	htmlSlots: [],
 	isCollectionDependency: false,
 	isLegacy: false,
 	jsFilePath: "",
@@ -477,9 +483,173 @@ const mockModule = (mod = {}) => ({
 	hasVdomStyle: false,
 	hasVdomText: false,
 	hasVdomXlink: false,
+	hasSignalsImport: false,
 	...mod
 });
 //#endregion
+//#region src/testing/create-test-compiler.ts
+const __dirname = nodePath.dirname(fileURLToPath(import.meta.url));
+const TESTING_TSCONFIG = nodePath.resolve(__dirname, "fixtures/tsconfig.testing.json");
+/**
+* Builds a patched sys that falls through to real disk for TypeScript lib files.
+*
+* @returns A compiler system instance with patched readFileSync, readFile, accessSync, and statSync methods
+*/
+const createPatchedSys = () => {
+	const sys = mockCompilerSystem();
+	const originalReadFileSync = sys.readFileSync.bind(sys);
+	sys.readFileSync = (p) => {
+		const mem = originalReadFileSync(p);
+		if (mem !== void 0) return mem;
+		try {
+			return fs.readFileSync(p, "utf-8");
+		} catch {
+			return;
+		}
+	};
+	const originalReadFile = sys.readFile.bind(sys);
+	sys.readFile = async (p) => {
+		const mem = await originalReadFile(p);
+		if (mem !== void 0) return mem;
+		try {
+			return fs.readFileSync(p, "utf-8");
+		} catch {
+			return;
+		}
+	};
+	const originalAccessSync = sys.accessSync.bind(sys);
+	sys.accessSync = (p) => {
+		if (originalAccessSync(p)) return true;
+		try {
+			fs.accessSync(p);
+			return true;
+		} catch {
+			return false;
+		}
+	};
+	const originalStatSync = sys.statSync.bind(sys);
+	sys.statSync = (p) => {
+		const mem = originalStatSync(p);
+		if (!mem.error) return mem;
+		try {
+			const s = fs.statSync(p);
+			return {
+				isDirectory: s.isDirectory(),
+				isFile: s.isFile(),
+				isSymbolicLink: s.isSymbolicLink(),
+				size: s.size,
+				error: null
+			};
+		} catch {
+			return mem;
+		}
+	};
+	sys.getCompilerExecutingPath = () => nodePath.resolve(__dirname, "../../dist/compiler/index.mjs");
+	return sys;
+};
+/**
+* Runs the expensive one-time setup for a test compiler suite: patching the
+* sys, reading and validating the tsconfig. Use this in a `beforeAll` block
+* when a describe block contains multiple tests that each need a fresh
+* compiler, to avoid repeating `loadConfig` on every test.
+*
+* @param options - Configuration options for preparing the test compiler
+* @returns A {@link PreparedTestCompiler} that can be passed to {@link createTestCompiler}
+*
+* @example
+* ```ts
+* let setup: PreparedTestCompiler;
+* beforeAll(async () => { setup = await prepareTestCompiler(); });
+* beforeEach(async () => {
+*   const { compiler } = await createTestCompiler({ setup });
+* });
+* ```
+*/
+const prepareTestCompiler = async (options = {}) => {
+	const sys = createPatchedSys();
+	const tsconfigPath = options.tsconfig ?? TESTING_TSCONFIG;
+	const userConfig = {
+		devMode: true,
+		sourceMap: false,
+		enableCache: false,
+		minifyJs: false,
+		minifyCss: false,
+		namespace: "Testing",
+		tsconfig: tsconfigPath,
+		...options.config
+	};
+	const { config: validatedConfig } = await loadConfig({
+		sys,
+		config: userConfig
+	});
+	return {
+		_validatedConfig: validatedConfig,
+		_tsconfigPath: tsconfigPath
+	};
+};
+/**
+* Creates a test compiler instance with a hybrid filesystem (reads from disk, writes to memory).
+* This utility handles the common setup pattern for compiler tests.
+*
+* When multiple tests in the same suite need independent compiler instances,
+* pass a {@link PreparedTestCompiler} from {@link prepareTestCompiler} as
+* `options.setup` to skip the expensive `loadConfig` step on each test.
+*
+* @param options - Configuration options for the test compiler
+* @returns An object with the compiler, validated config, and system instance
+*
+* @example
+* ```ts
+* const { compiler, config } = await createTestCompiler({
+*   config: { minifyCss: true }
+* });
+* await compiler.fs.writeFile('/src/index.html', '<cmp-a></cmp-a>');
+* const result = await compiler.build();
+* ```
+*/
+const createTestCompiler = async (options = {}) => {
+	let validatedConfig;
+	let tsconfigPath;
+	if (options.setup) {
+		const freshSys = createPatchedSys();
+		validatedConfig = {
+			...options.setup._validatedConfig,
+			sys: freshSys
+		};
+		tsconfigPath = options.setup._tsconfigPath;
+	} else {
+		const sys = createPatchedSys();
+		tsconfigPath = options.tsconfig ?? TESTING_TSCONFIG;
+		const userConfig = {
+			devMode: true,
+			sourceMap: false,
+			enableCache: false,
+			minifyJs: false,
+			minifyCss: false,
+			namespace: "Testing",
+			tsconfig: tsconfigPath,
+			...options.config
+		};
+		const { config } = await loadConfig({
+			sys,
+			config: userConfig
+		});
+		validatedConfig = config;
+	}
+	const compiler = await createCompiler(validatedConfig);
+	const tsconfigObj = JSON.parse(fs.readFileSync(tsconfigPath, "utf-8"));
+	await compiler.fs.writeFile(tsconfigPath, JSON.stringify({
+		...tsconfigObj,
+		include: [validatedConfig.srcDir]
+	}));
+	await compiler.fs.writeFile(nodePath.join(validatedConfig.srcDir, "components.d.ts"), "");
+	return {
+		compiler,
+		config: validatedConfig,
+		sys: validatedConfig.sys
+	};
+};
+//#endregion
 //#region src/testing/platform/testing-constants.ts
 const styles = /* @__PURE__ */ new Map();
 const modeResolutionChain = [];
@@ -515,7 +685,7 @@ const Build = {
 * @returns the corresponding Stencil reference data structure, or undefined if one cannot be found
 */
 const getHostRef = (elm) => {
-	if (elm.__stencil__getHostRef) return elm.__stencil__getHostRef();
+	if (elm.__s_ghr) return elm.__s_ghr();
 };
 /**
 * Add the provided `hostRef` instance to the global {@link hostRefs} map, using the provided `lazyInstance` as a key.
@@ -536,7 +706,7 @@ const registerInstance = (lazyInstance, hostRef) => {
 		});
 		hostRef = getHostRef(elm);
 	}
-	lazyInstance.__stencil__getHostRef = () => hostRef;
+	lazyInstance.__s_ghr = () => hostRef;
 	hostRef.$lazyInstance$ = lazyInstance;
 	if (hostRef.$cmpMeta$?.$flags$ & CMP_FLAGS.hasModernPropertyDecls && (BUILD.state || BUILD.prop)) reWireGetterSetter(lazyInstance, hostRef);
 	const Cstr = lazyInstance.constructor;
@@ -587,7 +757,7 @@ const registerHost = (elm, cmpMeta) => {
 	hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
 	elm["s-p"] = [];
 	elm["s-rc"] = [];
-	elm.__stencil__getHostRef = () => hostRef;
+	elm.__s_ghr = () => hostRef;
 };
 const setErrorHandler = (handler) => handler;
 //#endregion
@@ -727,6 +897,8 @@ function flushLoadModule(bundleId) {
 const isVitestEnvironment = typeof process !== "undefined" && process.env?.VITEST;
 const existingWindow = typeof globalThis !== "undefined" && globalThis.window;
 const win = isVitestEnvironment && existingWindow ? existingWindow : setupGlobal(global);
+//#endregion
+//#region src/testing/platform/testing-platform.ts
 const plt = {
 	$flags$: 0,
 	$resourcesUrl$: "",
@@ -737,14 +909,6 @@ const plt = {
 	ce: (eventName, opts) => new win.CustomEvent(eventName, opts)
 };
 /**
-* Helper function to programmatically set shadow DOM support in testing scenarios.
-*
-* This function modifies the global {@link supportsShadow} variable.
-*
-* @param supports `true` if shadow DOM is supported, `false` otherwise
-*/
-const setSupportsShadowDom = (supports) => {};
-/**
 * Resets global testing variables and collections, so that a new set of tests can be started with a "clean slate".
 *
 * It is expected that this function be called between spec tests, and should be automatically configured by Stencil to
@@ -808,6 +972,162 @@ function registerModule(bundleId, Cstr) {
 	moduleLoaded.set(bundleId, Cstr);
 }
 //#endregion
+//#region src/runtime/vdom/vdom-annotations.ts
+/**
+* Updates the DOM generated on the server with annotations such as node attributes and
+* comment nodes to facilitate future client-side hydration. These annotations are used for things
+* like moving elements back to their original hosts if using Shadow DOM on the client, and for quickly
+* reconstructing the vNode representations of the DOM.
+*
+* @param doc The DOM generated by the server.
+* @param staticComponents Any components that should be considered static and do not need client-side hydration.
+*/
+const insertVdomAnnotations = (doc, staticComponents) => {
+	if (doc != null) {
+		/**
+		* Initiated `docData` object from the document if it exists to ensure we
+		* maintain the same `docData` object across multiple hydration hydration runs.
+		*/
+		const docData = "_stencilDocData" in doc ? doc[STENCIL_DOC_DATA] : { ...DEFAULT_DOC_DATA };
+		docData.staticComponents = new Set(staticComponents);
+		const orgLocationNodes = [];
+		parseVNodeAnnotations(doc, doc.body, docData, orgLocationNodes);
+		orgLocationNodes.forEach((orgLocationNode) => {
+			if (orgLocationNode != null && orgLocationNode["s-nr"]) {
+				const nodeRef = orgLocationNode["s-nr"];
+				let hostId = nodeRef["s-host-id"];
+				let nodeId = nodeRef["s-node-id"];
+				let childId = `${hostId}.${nodeId}`;
+				if (hostId == null) {
+					hostId = 0;
+					docData.rootLevelIds++;
+					nodeId = docData.rootLevelIds;
+					childId = `${hostId}.${nodeId}`;
+					if (nodeRef.nodeType === NODE_TYPE.ElementNode) {
+						nodeRef.setAttribute(HYDRATE_CHILD_ID, childId);
+						if (typeof nodeRef["s-sn"] === "string" && !nodeRef.getAttribute("slot")) nodeRef.setAttribute("s-sn", nodeRef["s-sn"]);
+					} else if (nodeRef.nodeType === NODE_TYPE.TextNode) {
+						if (hostId === 0) {
+							if (nodeRef.nodeValue?.trim() === "") {
+								orgLocationNode.remove();
+								return;
+							}
+						}
+						const commentBeforeTextNode = doc.createComment(childId);
+						commentBeforeTextNode.nodeValue = `t.${childId}`;
+						insertBefore(nodeRef.parentNode, commentBeforeTextNode, nodeRef);
+					} else if (nodeRef.nodeType === NODE_TYPE.CommentNode) {
+						const commentBeforeTextNode = doc.createComment(childId);
+						commentBeforeTextNode.nodeValue = `c.${childId}`;
+						nodeRef.parentNode.insertBefore(commentBeforeTextNode, nodeRef);
+					}
+				}
+				let orgLocationNodeId = `o.${childId}`;
+				const orgLocationParentNode = orgLocationNode.parentElement;
+				if (orgLocationParentNode) {
+					if (orgLocationParentNode["s-en"] === "") orgLocationNodeId += `.`;
+					else if (orgLocationParentNode["s-en"] === "c") orgLocationNodeId += `.c`;
+				}
+				orgLocationNode.nodeValue = orgLocationNodeId;
+			}
+		});
+	}
+};
+/**
+* Recursively parses a node generated by the server and its children to set host and child id
+* attributes read during client-side hydration. This function also tracks whether each node is
+* an original location reference node meaning that a node has been moved via slot relocation.
+*
+* @param doc The DOM generated by the server.
+* @param node The node to parse.
+* @param docData An object containing metadata about the document.
+* @param orgLocationNodes An array of nodes that have been moved via slot relocation.
+*/
+const parseVNodeAnnotations = (doc, node, docData, orgLocationNodes) => {
+	if (node == null) return;
+	if (node["s-nr"] != null) orgLocationNodes.push(node);
+	if (node.nodeType === NODE_TYPE.ElementNode) [...Array.from(node.childNodes), ...Array.from(node.shadowRoot?.childNodes || [])].forEach((childNode) => {
+		const hostRef = getHostRef$1(childNode);
+		if (hostRef != null && !docData.staticComponents.has(childNode.nodeName.toLowerCase())) insertVNodeAnnotations(doc, childNode, hostRef.$vnode$, docData, { nodeIds: 0 });
+		parseVNodeAnnotations(doc, childNode, docData, orgLocationNodes);
+	});
+};
+/**
+* Insert attribute annotations on an element for its host ID and, potentially, its child ID.
+* Also makes calls to insert annotations on the element's children, keeping track of the depth of
+* the component tree.
+*
+* @param doc The DOM generated by the server.
+* @param hostElm The element to insert annotations for.
+* @param vnode The vNode representation of the element.
+* @param docData An object containing metadata about the document.
+* @param cmpData An object containing metadata about the component.
+*/
+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 (vnode.$children$ != null) {
+			const depth = 0;
+			vnode.$children$.forEach((vnodeChild, index) => {
+				insertChildVNodeAnnotations(doc, vnodeChild, cmpData, hostId, depth, index);
+			});
+		}
+		if (hostElm && vnode && vnode.$elm$ && !hostElm.hasAttribute("c-id")) {
+			const parent = hostElm.parentElement;
+			if (parent && parent.childNodes) {
+				const parentChildNodes = Array.from(parent.childNodes);
+				const comment = parentChildNodes.find((node) => node.nodeType === NODE_TYPE.CommentNode && node["s-sr"]);
+				if (comment) {
+					const index = parentChildNodes.indexOf(hostElm) - 1;
+					vnode.$elm$.setAttribute(HYDRATE_CHILD_ID, `${comment["s-host-id"]}.${comment["s-node-id"]}.0.${index}`);
+				}
+			}
+		}
+	}
+};
+/**
+* Recursively analyzes the type of a child vNode and inserts annotations on the vNodes's element based on its type.
+* Element nodes receive a child ID attribute, text nodes have a comment with the child ID inserted before them,
+* and comment nodes representing a slot have their node value set to a slot node ID containing the child ID.
+*
+* @param doc The DOM generated by the server.
+* @param vnodeChild The vNode to insert annotations for.
+* @param cmpData An object containing metadata about the component.
+* @param hostId The host ID of this element's parent.
+* @param depth How deep this element sits in the component tree relative to its parent.
+* @param index The index of this element in its parent's children array.
+*/
+const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, index) => {
+	const childElm = vnodeChild.$elm$;
+	if (childElm == null) return;
+	const nodeId = cmpData.nodeIds++;
+	const childId = `${hostId}.${nodeId}.${depth}.${index}`;
+	childElm["s-host-id"] = hostId;
+	childElm["s-node-id"] = nodeId;
+	if (childElm.nodeType === NODE_TYPE.ElementNode) {
+		childElm.setAttribute(HYDRATE_CHILD_ID, childId);
+		if (typeof childElm["s-sn"] === "string" && !childElm.getAttribute("slot")) childElm.setAttribute("s-sn", childElm["s-sn"]);
+	} else if (childElm.nodeType === NODE_TYPE.TextNode) {
+		const parentNode = childElm.parentNode;
+		const nodeName = parentNode?.nodeName;
+		if (nodeName !== "STYLE" && nodeName !== "SCRIPT") {
+			const textNodeId = `t.${childId}`;
+			const commentBeforeTextNode = doc.createComment(textNodeId);
+			insertBefore(parentNode, commentBeforeTextNode, childElm);
+		}
+	} else if (childElm.nodeType === NODE_TYPE.CommentNode) {
+		if (childElm["s-sr"]) childElm.nodeValue = `s.${childId}.${childElm["s-sn"] || ""}`;
+	}
+	if (vnodeChild.$children$ != null) {
+		const childDepth = depth + 1;
+		vnodeChild.$children$.forEach((vnode, childIndex) => {
+			insertChildVNodeAnnotations(doc, vnode, cmpData, hostId, childDepth, childIndex);
+		});
+	}
+};
+//#endregion
 //#region src/testing/platform/index.ts
 const setMode = (handler) => {
 	modeResolutionChain.length = 0;
@@ -860,13 +1180,13 @@ function resetBuildConditionals(b) {
 	b.hydratedAttribute = false;
 	b.hydratedClass = true;
 	b.invisiblePrehydration = true;
-	b.appendChildSlotFix = false;
-	b.cloneNodeFix = false;
+	b.staticHydrationStyles = false;
+	b.lightDomPatches = false;
+	b.slotChildNodes = false;
+	b.slotCloneNode = false;
+	b.slotDomMutations = false;
+	b.slotTextContent = false;
 	b.hotModuleReplacement = false;
-	b.scopedSlotTextContentFix = false;
-	b.slotChildNodesFix = false;
-	b.experimentalSlotFixes = false;
-	b.experimentalScopedSlotChanges = false;
 }
 //#endregion
 //#region src/testing/spec-page.ts
@@ -886,14 +1206,8 @@ async function newSpecPage(opts) {
 	resetBuildConditionals(BUILD);
 	if (Array.isArray(opts.components)) registerComponents(opts.components);
 	if (opts.hydrateClientSide) opts.includeAnnotations = true;
-	if (opts.hydrateServerSide) {
-		opts.includeAnnotations = true;
-		setSupportsShadowDom(false);
-	} else {
-		opts.includeAnnotations = !!opts.includeAnnotations;
-		if (opts.supportsShadowDom === false) setSupportsShadowDom(false);
-		else setSupportsShadowDom(true);
-	}
+	if (opts.hydrateServerSide) opts.includeAnnotations = true;
+	else opts.includeAnnotations = !!opts.includeAnnotations;
 	BUILD.cssAnnotations = opts.includeAnnotations;
 	const cmpTags = /* @__PURE__ */ new Set();
 	win["__stencil_spec_options"] = opts;
@@ -916,7 +1230,13 @@ async function newSpecPage(opts) {
 		/**
 		* just pass through functional components that don't have styles nor any other metadata
 		*/
-		if (Cstr.COMPILER_META == null) return formatLazyBundleRuntimeMeta(`fc.${generateRandBundleId()}`, []);
+		if (Cstr.COMPILER_META == null) {
+			/**
+			* the bundleId can be arbitrary, but must be unique
+			*/
+			const arbitraryBundleId = `fc.${generateRandBundleId()}`;
+			return formatLazyBundleRuntimeMeta(arbitraryBundleId, []);
+		}
 		cmpTags.add(Cstr.COMPILER_META.tagName);
 		Cstr.isProxied = false;
 		proxyComponentLifeCycles(Cstr);
@@ -934,7 +1254,8 @@ async function newSpecPage(opts) {
 		registerModule(bundleId, Cstr);
 		return formatLazyBundleRuntimeMeta(bundleId, [Cstr.COMPILER_META]);
 	});
-	const cmpBuild = getBuildFeatures(opts.components.filter((Cstr) => Cstr.COMPILER_META != null).map((Cstr) => Cstr.COMPILER_META));
+	const cmpCompilerMeta = opts.components.filter((Cstr) => Cstr.COMPILER_META != null).map((Cstr) => Cstr.COMPILER_META);
+	const cmpBuild = getBuildFeatures(cmpCompilerMeta);
 	if (opts.strictBuild) Object.assign(BUILD, cmpBuild);
 	else Object.keys(cmpBuild).forEach((key) => {
 		if (cmpBuild[key] === true) BUILD[key] = true;
@@ -947,9 +1268,8 @@ async function newSpecPage(opts) {
 		BUILD.hydrateServerSide = true;
 		BUILD.hydrateClientSide = false;
 	}
-	BUILD.cloneNodeFix = false;
-	BUILD.shadowDomShim = false;
-	BUILD.attachStyles = !!opts.attachStyles;
+	BUILD.slotCloneNode = false;
+	if (opts.buildFlags) Object.assign(BUILD, opts.buildFlags);
 	if (typeof opts.url === "string") page.win.location.href = opts.url;
 	if (typeof opts.direction === "string") page.doc.documentElement.setAttribute("dir", opts.direction);
 	if (typeof opts.language === "string") page.doc.documentElement.setAttribute("lang", opts.language);
@@ -962,18 +1282,23 @@ async function newSpecPage(opts) {
 	if (typeof opts.userAgent === "string") try {
 		page.win.navigator.userAgent = opts.userAgent;
 	} catch {}
+	if (opts.hydrateServerSide && opts.serializeShadowRoot === "scoped") {
+		for (const [, cmps] of lazyBundles) for (const cmp of cmps) if (cmp[0] & CMP_FLAGS.shadowDomEncapsulation) cmp[0] |= CMP_FLAGS.shadowNeedsScopedCss;
+	}
 	bootstrapLazy(lazyBundles);
-	if (typeof opts.template === "function") renderVdom({
-		$ancestorComponent$: void 0,
-		$flags$: 0,
-		$modeName$: void 0,
-		$cmpMeta$: {
+	if (typeof opts.template === "function") {
+		const ref = {
+			$ancestorComponent$: void 0,
 			$flags$: 0,
-			$tagName$: "body"
-		},
-		$hostElement$: page.body
-	}, opts.template());
-	else if (typeof opts.html === "string") page.body.innerHTML = opts.html;
+			$modeName$: void 0,
+			$cmpMeta$: {
+				$flags$: 0,
+				$tagName$: "body"
+			},
+			$hostElement$: page.body
+		};
+		renderVdom(ref, opts.template());
+	} else if (typeof opts.html === "string") page.body.innerHTML = opts.html;
 	if (opts.flushQueue !== false) await page.waitForChanges();
 	let rootComponent = null;
 	Object.defineProperty(page, "root", { get() {
@@ -1167,4 +1492,4 @@ function setupConsoleMocker() {
 	};
 }
 //#endregion
-export { Build, Env, Fragment, Host, Mixin, createEvent, createTestingSystem, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRenderingRef, h, mockBuildCtx, mockCompilerCtx, mockCompilerSystem, mockComponentMeta, mockConfig, mockDocument, mockLoadConfigInit, mockLogger, mockModule, mockValidatedConfig, mockWindow, newSpecPage, readTask, registerHost, registerInstance, setAssetPath, setErrorHandler, setMode, setupConsoleMocker, shuffleArray, writeTask };
+export { Build, Env, Fragment, Host, Mixin, ReactiveControllerHost, createEvent, createTestCompiler, createTestingSystem, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRenderingRef, h, mockBuildCtx, mockCompilerCtx, mockCompilerSystem, mockComponentMeta, mockConfig, mockDocument, mockLoadConfigInit, mockLogger, mockModule, mockValidatedConfig, mockWindow, newSpecPage, prepareTestCompiler, readTask, registerHost, registerInstance, setAssetPath, setErrorHandler, setMode, setupConsoleMocker, shuffleArray, writeTask };