@stencil/core 5.0.0-alpha.4 → 5.0.0-alpha.5

package/dist/runtime/server/index.mjs

@@ -1094,7 +1094,8 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
 				styleElm.textContent = style;
 				const nonce = plt.$nonce$ ?? queryNonceMetaTagContent(win.document);
 				if (nonce != null) styleElm.setAttribute("nonce", nonce);
-				if ((BUILD$1.hydrateServerSide || BUILD$1.hotModuleReplacement) && (cmpMeta.$flags$ & CMP_FLAGS.scopedCssEncapsulation || cmpMeta.$flags$ & CMP_FLAGS.shadowNeedsScopedCss || cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation)) styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId);
+				if (BUILD$1.hydrateServerSide && (cmpMeta.$flags$ & CMP_FLAGS.scopedCssEncapsulation || cmpMeta.$flags$ & CMP_FLAGS.shadowNeedsScopedCss || cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) || BUILD$1.hotModuleReplacement) styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId);
+				if (BUILD$1.hotModuleReplacement && cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation) styleElm.setAttribute("data-slot-fb", "");
 				/**
 				* attach styles at the end of the head tag if we render scoped components
 				*/
@@ -2197,6 +2198,46 @@ const computeMode = (elm) => modeResolutionChain.map((h) => h(elm)).find((m) =>
 const setMode = (handler) => modeResolutionChain.push(handler);
 const getMode = (ref) => getHostRef(ref)?.$modeName$;
 //#endregion
+//#region src/runtime/normalize-watchers.ts
+/**
+* Normalizes watcher metadata to the current `{ [methodName]: flags }[]` format.
+*
+* Prior to Stencil 4.39.x (PR #6484), the `@Watch()` compiler emitted watcher
+* handlers as a plain string array: `{ "min": ["minChanged"] }`. The new format
+* wraps each entry in an object that carries option flags (e.g. `immediate`):
+* `{ "min": [{ "minChanged": 0 }] }`.
+*
+* When a library (e.g. Ionic Framework) was compiled with an older Stencil compiler
+* but consumed by an app using a newer Stencil runtime, the runtime's
+* `Object.entries(watcher)` call receives a string and misinterprets its character
+* indices as method names, causing:
+*   `TypeError: instance[watchMethodName] is not a function`
+*
+* This helper should be used at `$watchers$` assignment sites that need to
+* accept both legacy and current compiler metadata so downstream code on those
+* paths can safely assume the new object format.
+*
+* @param raw The raw watcher map from compiled metadata (new or legacy format).
+* @returns A normalized watcher map in the `{ [methodName]: flags }[]` format, or `undefined` if `raw` is `undefined` or empty.
+*/
+const normalizeWatchers = (raw) => {
+	if (!raw) return void 0;
+	const keys = Object.keys(raw);
+	if (keys.length === 0) return void 0;
+	let hasLegacy = false;
+	for (const propName of keys) {
+		if (hasLegacy) break;
+		for (const h of raw[propName]) if (typeof h === "string") {
+			hasLegacy = true;
+			break;
+		}
+	}
+	if (!hasLegacy) return raw;
+	const out = {};
+	for (const propName of keys) out[propName] = raw[propName].map((h) => typeof h === "string" ? { [h]: 0 } : h);
+	return out;
+};
+//#endregion
 //#region src/runtime/parse-property-value.ts
 /**
 * Parse a new property value for a given property type.
@@ -3547,7 +3588,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 	});
 	if (BUILD$1.member && cmpMeta.$members$ || BUILD$1.propChangeCallback) {
 		if (BUILD$1.propChangeCallback) {
-			if (Cstr.watchers && !cmpMeta.$watchers$) cmpMeta.$watchers$ = Cstr.watchers;
+			if (Cstr.watchers && !cmpMeta.$watchers$) cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
 			if (Cstr.deserializers && !cmpMeta.$deserializers$) cmpMeta.$deserializers$ = Cstr.deserializers;
 			if (Cstr.serializers && !cmpMeta.$serializers$) cmpMeta.$serializers$ = Cstr.serializers;
 		}
@@ -3697,7 +3738,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
 				if (!Cstr) throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
 				if (BUILD$1.member && !Cstr.isProxied) {
 					if (BUILD$1.propChangeCallback) {
-						cmpMeta.$watchers$ = Cstr.watchers;
+						cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
 						cmpMeta.$serializers$ = Cstr.serializers;
 						cmpMeta.$deserializers$ = Cstr.deserializers;
 					}
@@ -3873,7 +3914,59 @@ const disconnectedCallback = async (elm) => {
 	if (elm.shadowRoot && rootAppliedStyles.has(elm.shadowRoot)) rootAppliedStyles.delete(elm.shadowRoot);
 };
 //#endregion
-//#region src/runtime/bootstrap-custom-element.ts
+//#region src/runtime/hmr-component.ts
+/**
+* Kick off hot-module-replacement for a component. In order to replace the
+* component in-place we:
+*
+* 1. get a reference to the {@link d.HostRef} for the element
+* 2. reset the element's runtime flags
+* 3. re-run the initialization logic for the element (via
+*    {@link initializeComponent})
+*
+* For standalone (non-lazy) builds, we instead re-import the component module
+* and patch the prototype of the registered constructor in-place, then
+* force a re-render of all existing instances in the DOM.
+*
+* @param hostElement the host element for the component which we want to start
+* doing HMR
+* @param cmpMeta runtime metadata for the component
+* @param hmrVersionId the current HMR version ID
+*/
+const hmrStart = (hostElement, cmpMeta, hmrVersionId) => {
+	if (BUILD$1.lazyLoad) {
+		const hostRef = getHostRef(hostElement);
+		if (!hostRef) return;
+		hostRef.$flags$ = HOST_FLAGS.hasConnected;
+		initializeComponent(hostElement, hostRef, cmpMeta, hmrVersionId);
+	} else hmrStandalone(hostElement, cmpMeta, hmrVersionId);
+};
+const hmrStandalone = async (hostElement, cmpMeta, hmrVersionId) => {
+	const modulePath = hostElement.constructor.__stencil_module__;
+	console.log(`[Stencil HMR] hmrStandalone <${cmpMeta.$tagName$}> modulePath:`, modulePath);
+	if (!modulePath) {
+		console.warn(`[Stencil HMR] No __stencil_module__ on <${cmpMeta.$tagName$}> constructor — was this built with devMode?`);
+		return;
+	}
+	try {
+		const newModule = await import(
+			/* @vite-ignore */
+			`${modulePath}?s-hmr=${hmrVersionId}`
+);
+		const NewClass = Object.values(newModule).find((v) => typeof v === "function" && v.is === cmpMeta.$tagName$) ?? newModule.default;
+		if (!NewClass) return;
+		const ctor = customElements.get(cmpMeta.$tagName$);
+		if (ctor) for (const key of Object.getOwnPropertyNames(NewClass.prototype)) {
+			if (key === "constructor") continue;
+			Object.defineProperty(ctor.prototype, key, Object.getOwnPropertyDescriptor(NewClass.prototype, key));
+		}
+		document.querySelectorAll(cmpMeta.$tagName$).forEach((el) => forceUpdate(el));
+	} catch (e) {
+		console.error(`[Stencil HMR] Failed to reload <${cmpMeta.$tagName$}>`, e);
+	}
+};
+//#endregion
+//#region src/runtime/bootstrap-standalone.ts
 const defineCustomElement = (Cstr, compactMeta) => {
 	customElements.define(transformTag(compactMeta[1]), proxyCustomElement(Cstr, compactMeta));
 };
@@ -3887,12 +3980,15 @@ const proxyCustomElement = (Cstr, compactMeta) => {
 		if (BUILD$1.member) cmpMeta.$members$ = compactMeta[2];
 		if (BUILD$1.hostListener) cmpMeta.$listeners$ = compactMeta[3];
 		if (BUILD$1.propChangeCallback) {
-			cmpMeta.$watchers$ = Cstr.$watchers$;
+			cmpMeta.$watchers$ = normalizeWatchers(Cstr.$watchers$);
 			cmpMeta.$deserializers$ = Cstr.$deserializers$;
 			cmpMeta.$serializers$ = Cstr.$serializers$;
 		}
 		if (BUILD$1.reflect) cmpMeta.$attrsToReflect$ = [];
 		if (BUILD$1.shadowDom && !supportsShadow && cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) cmpMeta.$flags$ |= CMP_FLAGS.needsShadowDomShim;
+		if (BUILD$1.hotModuleReplacement) Cstr.prototype["s-hmr"] = function(hmrVersionId) {
+			hmrStart(this, cmpMeta, hmrVersionId);
+		};
 		if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) if (BUILD$1.experimentalSlotFixes || BUILD$1.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) patchPseudoShadowDom(Cstr.prototype);
 		else {
 			if (BUILD$1.slotChildNodesFix || BUILD$1.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(Cstr.prototype);
@@ -3973,29 +4069,7 @@ const forceModeUpdate = (elm) => {
 	}
 };
 //#endregion
-//#region src/runtime/hmr-component.ts
-/**
-* Kick off hot-module-replacement for a component. In order to replace the
-* component in-place we:
-*
-* 1. get a reference to the {@link d.HostRef} for the element
-* 2. reset the element's runtime flags
-* 3. re-run the initialization logic for the element (via
-*    {@link initializeComponent})
-*
-* @param hostElement the host element for the component which we want to start
-* doing HMR
-* @param cmpMeta runtime metadata for the component
-* @param hmrVersionId the current HMR version ID
-*/
-const hmrStart = (hostElement, cmpMeta, hmrVersionId) => {
-	const hostRef = getHostRef(hostElement);
-	if (!hostRef) return;
-	hostRef.$flags$ = HOST_FLAGS.hasConnected;
-	initializeComponent(hostElement, hostRef, cmpMeta, hmrVersionId);
-};
-//#endregion
-//#region src/runtime/bootstrap-lazy.ts
+//#region src/runtime/bootstrap-loader.ts
 const bootstrapLazy = (lazyBundles, options = {}) => {
 	if (BUILD$1.profile && performance.mark) performance.mark("st:app:start");
 	installDevTools();
@@ -4029,7 +4103,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
 			if (BUILD$1.hostListener) cmpMeta.$listeners$ = compactMeta[3];
 			if (BUILD$1.reflect) cmpMeta.$attrsToReflect$ = [];
 			if (BUILD$1.propChangeCallback) {
-				cmpMeta.$watchers$ = compactMeta[4] ?? {};
+				cmpMeta.$watchers$ = normalizeWatchers(compactMeta[4]);
 				cmpMeta.$serializers$ = compactMeta[5] ?? {};
 				cmpMeta.$deserializers$ = compactMeta[6] ?? {};
 			}
@@ -4481,15 +4555,26 @@ function componentOnReady() {
 }
 function forceUpdate$1() {}
 //#endregion
-//#region src/server/platform/hydrate-app.ts
-function hydrateApp(win, opts, results, afterHydrate, resolve) {
+//#region src/server/platform/ssr-app.ts
+/**
+* SSR a Document by patching the DOM APIs to wait for components to be connected and hydrated
+* before allowing them to be added to the document.
+* Once all components are hydrated, the `afterSsr` callback is called so that the caller can serialize
+* the document to HTML and send it back to the client.
+* @param win The window to use for SSR. This should be a patched window created by `patchDomImplementation`.
+* @param opts The options to use for SSR. This is used to configure which components should be hydrated, how long to wait for hydration, etc.
+* @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.
+*/
+function ssrApp(win, opts, results, afterSsr, resolve) {
 	const connectedElements = /* @__PURE__ */ new Set();
 	const createdElements = /* @__PURE__ */ new Set();
 	const waitingElements = /* @__PURE__ */ new Set();
 	const orgDocumentCreateElement = win.document.createElement;
 	const orgDocumentCreateElementNS = win.document.createElementNS;
 	const resolved = Promise.resolve();
-	setScopedSSR(opts);
+	setScopedSsr(opts);
 	let tmrId;
 	let ranCompleted = false;
 	function hydratedComplete() {
@@ -4499,7 +4584,7 @@ function hydrateApp(win, opts, results, afterHydrate, resolve) {
 		if (!ranCompleted) {
 			ranCompleted = true;
 			try {
-				if (opts.clientHydrateAnnotations) insertVdomAnnotations(win.document, opts.staticComponents);
+				if (opts.clientSsrAnnotations) insertVdomAnnotations(win.document, opts.staticComponents);
 				win.dispatchEvent(new win.Event("DOMContentLoaded"));
 				win.document.createElement = orgDocumentCreateElement;
 				win.document.createElementNS = orgDocumentCreateElementNS;
@@ -4507,7 +4592,7 @@ function hydrateApp(win, opts, results, afterHydrate, resolve) {
 				renderCatchError(opts, results, e);
 			}
 		}
-		afterHydrate(win, opts, results, resolve);
+		afterSsr(win, opts, results, resolve);
 	}
 	function hydratedError(err) {
 		renderCatchError(opts, results, err);
@@ -4853,7 +4938,7 @@ const getAssetPath = (path) => {
 };
 /**
 * Sets the base URL for resolving asset paths in the server/hydrate context.
-* @param path - The base URL to use for resolving asset paths. This should typically be set to the same value as the `resourcesUrl` option passed to `hydrateDocument` to ensure that asset paths are resolved correctly in the server/hydrate context.
+* @param path - The base URL to use for resolving asset paths. This should typically be set to the same value as the `resourcesUrl` option passed to `ssrDocument` to ensure that asset paths are resolved correctly in the server/hydrate context.
 * If not set, it defaults to './', which is a reasonable default for server-side rendering.
 * @returns void
 */
@@ -4862,10 +4947,10 @@ const setAssetPath = (path) => plt.$resourcesUrl$ = path;
 * Checks to see any components are rendered with `scoped`
 * @param opts - SSR options
 */
-const setScopedSSR = (opts) => {
+const setScopedSsr = (opts) => {
 	scopedSSR = BUILD$1.shadowDom && opts.serializeShadowRoot !== false && opts.serializeShadowRoot !== "declarative-shadow-dom";
 };
 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, getValue, hAsync as h, hydrateApp, 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, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, supportsShadow, 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, 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, supportsShadow, transformTag, win, writeTask };

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

@@ -7,7 +7,7 @@ type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
 type TagTransformer = (tag: string) => string;
 //#endregion
 //#region src/declarations/stencil-public-compiler.d.ts
-interface HydrateDocumentOptions {
+interface SsrDocumentOptions {
   /**
    * Build ID that will be added to `<html data-stencil-build="BUILD_ID">`. By default
    * a random ID will be generated
@@ -24,7 +24,7 @@ interface HydrateDocumentOptions {
    * JavaScript to read the structure of the HTML and rebuild each
    * component. Defaults to `true`.
    */
-  clientHydrateAnnotations?: boolean;
+  clientSsrAnnotations?: boolean;
   /**
    * Constrain `setTimeout()` to 1ms, but still async. Also
    * only allows `setInterval()` to fire once, also constrained to 1ms.
@@ -123,10 +123,14 @@ interface HydrateDocumentOptions {
     default: 'declarative-shadow-dom' | 'scoped';
   } | boolean;
 }
-interface SerializeDocumentOptions extends HydrateDocumentOptions {
+interface SerializeDocumentOptions extends SsrDocumentOptions {
   /**
    * Runs after the `document` has been hydrated.
    */
+  afterSsr?(document: any): any | Promise<any>;
+  /**
+   * @deprecated Use `afterSsr` instead.
+   */
   afterHydrate?(document: any): any | Promise<any>;
   /**
    * Sets an approximate line width the HTML should attempt to stay within.
@@ -139,6 +143,10 @@ interface SerializeDocumentOptions extends HydrateDocumentOptions {
   /**
    * Runs before the `document` has been hydrated.
    */
+  beforeSsr?(document: any): any | Promise<any>;
+  /**
+   * @deprecated Use `beforeSsr` instead.
+   */
   beforeHydrate?(document: any): any | Promise<any>;
   /**
    * Format the HTML in a nicely indented format.
@@ -176,7 +184,7 @@ interface SerializeDocumentOptions extends HydrateDocumentOptions {
    */
   modes?: ResolutionHandler[];
 }
-interface HydrateFactoryOptions extends SerializeDocumentOptions {
+interface SsrFactoryOptions extends SerializeDocumentOptions {
   serializeToHtml: boolean;
   destroyWindow: boolean;
   destroyDocument: boolean;
@@ -204,7 +212,7 @@ interface PrintLine {
   errorCharStart: number;
   errorLength?: number;
 }
-interface HydrateResults {
+interface SsrResults {
   buildId: string;
   diagnostics: Diagnostic[];
   url: string;
@@ -216,42 +224,42 @@ interface HydrateResults {
   search: string | null;
   hash: string | null;
   html: string | null;
-  components: HydrateComponent[];
-  anchors: HydrateAnchorElement[];
-  imgs: HydrateImgElement[];
-  scripts: HydrateScriptElement[];
-  styles: HydrateStyleElement[];
-  staticData: HydrateStaticData[];
+  components: SsrComponent[];
+  anchors: SsrAnchorElement[];
+  imgs: SsrImgElement[];
+  scripts: SsrScriptElement[];
+  styles: SsrStyleElement[];
+  staticData: SsrStaticData[];
   title: string | null;
   hydratedCount: number;
   httpStatus: number | null;
 }
-interface HydrateComponent {
+interface SsrComponent {
   tag: string;
   mode: string;
   count: number;
   depth: number;
 }
-interface HydrateElement {
+interface SsrElement {
   [attrName: string]: string | undefined;
 }
-interface HydrateAnchorElement extends HydrateElement {
+interface SsrAnchorElement extends SsrElement {
   href?: string;
   target?: string;
 }
-interface HydrateImgElement extends HydrateElement {
+interface SsrImgElement extends SsrElement {
   src?: string;
 }
-interface HydrateScriptElement extends HydrateElement {
+interface SsrScriptElement extends SsrElement {
   src?: string;
   type?: string;
 }
-interface HydrateStyleElement extends HydrateElement {
+interface SsrStyleElement extends SsrElement {
   id?: string;
   href?: string;
   content?: string;
 }
-interface HydrateStaticData {
+interface SsrStaticData {
   id: string;
   type: string;
   content: string;
@@ -265,7 +273,7 @@ interface HydrateStaticData {
  * @param options - serialization options
  * @returns the hydration results
  */
-declare function renderToString(html: string | any, options?: SerializeDocumentOptions): Promise<HydrateResults>;
+declare function renderToString(html: string | any, options?: SerializeDocumentOptions): Promise<SsrResults>;
 /**
  * Renders HTML and returns a Node.js Readable stream.
  * This is a Node.js-specific convenience wrapper around renderToString.
@@ -276,20 +284,26 @@ declare function renderToString(html: string | any, options?: SerializeDocumentO
  */
 declare function streamToString(html: string | any, options?: SerializeDocumentOptions): Readable;
 /**
- * Hydrates a document or HTML string, returning the full hydration results.
+ * Server side renders a document or HTML string, returning the full render results.
  * This is portable (no Node.js dependencies).
- * @param doc - the document or HTML string to hydrate
+ * @param doc - the document or HTML string to render
  * @param options - hydration options
- * @returns the hydration results
+ * @returns the render results
+ */
+declare function ssrDocument(doc: any | string, options?: SsrDocumentOptions): Promise<SsrResults>;
+/**
+ * v4 Compat
+ * @alias
+ * @deprecated Use `ssrDocument()` instead
  */
-declare function hydrateDocument(doc: any | string, options?: HydrateDocumentOptions): Promise<HydrateResults>;
-declare function serializeDocumentToString(doc: Document, opts: HydrateFactoryOptions): string;
+declare const hydrateDocument: typeof ssrDocument;
+declare function serializeDocumentToString(doc: Document, opts: SsrFactoryOptions): string;
 //#endregion
 //#region src/server/runner/window-initialize.d.ts
 /**
  * Reset the docData counters. Useful for testing to ensure deterministic IDs.
  */
-declare function resetHydrateDocData(): void;
+declare function resetSsrDocData(): void;
 //#endregion
 //#region src/runtime/tag-transform.d.ts
 /**
@@ -304,4 +318,4 @@ declare function transformTag<T extends string>(tag: T): T;
  */
 declare function setTagTransformer(transformer: TagTransformer): void;
 //#endregion
-export { createWindowFromHtml, hydrateDocument, renderToString, resetHydrateDocData, serializeDocumentToString, setTagTransformer, streamToString, transformTag };
+export { createWindowFromHtml, hydrateDocument, renderToString, resetSsrDocData, serializeDocumentToString, setTagTransformer, ssrDocument, streamToString, transformTag };

package/dist/runtime/server/runner.mjs

@@ -1,5 +1,5 @@
 import { Readable } from "node:stream";
-import { hydrateFactory } from "@stencil/core/runtime/server/hydrate-factory";
+import { ssrFactory } from "@stencil/core/runtime/server/ssr-factory";
 import { BUILD } from "@stencil/core/runtime/app-data";
 //#region ../../node_modules/.pnpm/parse5@7.2.1/node_modules/parse5/dist/common/unicode.js
 const UNDEFINED_CODE_POINTS = new Set([
@@ -8899,7 +8899,7 @@ function insertBefore(parentNode, newNode, referenceNode) {
 var MockHTMLElement = class extends MockElement {
 	__namespaceURI = "http://www.w3.org/1999/xhtml";
 	constructor(ownerDocument, nodeName) {
-		super(ownerDocument, typeof nodeName === "string" ? nodeName.toUpperCase() : null);
+		super(ownerDocument, nodeName ? nodeName.toUpperCase() : null);
 	}
 	get tagName() {
 		return this.nodeName ?? "";
@@ -13300,7 +13300,7 @@ function normalizeHydrateOptions(inputOpts) {
 		destroyWindow: false,
 		destroyDocument: false
 	}, inputOpts || {});
-	if (typeof outputOpts.clientHydrateAnnotations !== "boolean") outputOpts.clientHydrateAnnotations = true;
+	if (typeof outputOpts.clientSsrAnnotations !== "boolean") outputOpts.clientSsrAnnotations = true;
 	if (typeof outputOpts.constrainTimeouts !== "boolean") outputOpts.constrainTimeouts = true;
 	if (typeof outputOpts.maxHydrateCount !== "number") outputOpts.maxHydrateCount = 300;
 	if (typeof outputOpts.runtimeLogging !== "boolean") outputOpts.runtimeLogging = false;
@@ -13319,7 +13319,7 @@ function mapValidTags(tag) {
 }
 function generateHydrateResults(opts) {
 	if (typeof opts.url !== "string") opts.url = `https://hydrate.stenciljs.com/`;
-	if (typeof opts.buildId !== "string") opts.buildId = createHydrateBuildId();
+	if (typeof opts.buildId !== "string") opts.buildId = createSsrBuildId();
 	const results = {
 		buildId: opts.buildId,
 		diagnostics: [],
@@ -13357,7 +13357,7 @@ function generateHydrateResults(opts) {
 	}
 	return results;
 }
-const createHydrateBuildId = () => {
+const createSsrBuildId = () => {
 	let chars = "abcdefghijklmnopqrstuvwxyz";
 	let buildId = "";
 	while (buildId.length < 8) {
@@ -13447,7 +13447,7 @@ const docData = {
 /**
 * Reset the docData counters. Useful for testing to ensure deterministic IDs.
 */
-function resetHydrateDocData() {
+function resetSsrDocData() {
 	docData.hostIds = 0;
 	docData.rootLevelIds = 0;
 	docData.staticComponents.clear();
@@ -13510,7 +13510,7 @@ function renderToString(html, options) {
 	* Make sure we wait for components to be hydrated.
 	*/
 	opts.constrainTimeouts = false;
-	return hydrateDocument(html, opts);
+	return ssrDocument(html, opts);
 }
 /**
 * Renders HTML and returns a Node.js Readable stream.
@@ -13527,13 +13527,13 @@ function streamToString(html, options) {
 	return Readable.from(generateStream());
 }
 /**
-* Hydrates a document or HTML string, returning the full hydration results.
+* Server side renders a document or HTML string, returning the full render results.
 * This is portable (no Node.js dependencies).
-* @param doc - the document or HTML string to hydrate
+* @param doc - the document or HTML string to render
 * @param options - hydration options
-* @returns the hydration results
+* @returns the render results
 */
-function hydrateDocument(doc, options) {
+function ssrDocument(doc, options) {
 	const opts = normalizeHydrateOptions(options);
 	/**
 	* Defines whether we render the shadow root as a declarative shadow root or as scoped shadow root.
@@ -13566,6 +13566,12 @@ function hydrateDocument(doc, options) {
 	renderBuildError(results, `Invalid html or document. Must be either a valid "html" string, or DOM "document".`);
 	return Promise.resolve(results);
 }
+/**
+* v4 Compat
+* @alias
+* @deprecated Use `ssrDocument()` instead
+*/
+const hydrateDocument = ssrDocument;
 async function render(win, opts, results) {
 	if ("process" in globalThis && typeof process.on === "function" && !process.__stencilErrors) {
 		process.__stencilErrors = true;
@@ -13574,7 +13580,7 @@ async function render(win, opts, results) {
 		});
 	}
 	initializeWindow(win, win.document, opts, results);
-	const beforeHydrateFn = typeof opts.beforeHydrate === "function" ? opts.beforeHydrate : NOOP;
+	const beforeHydrateFn = typeof (opts.beforeSsr || opts.beforeHydrate) === "function" ? opts.beforeSsr || opts.beforeHydrate : NOOP;
 	try {
 		await Promise.resolve(beforeHydrateFn(win.document));
 		return new Promise((resolve) => {
@@ -13586,24 +13592,24 @@ async function render(win, opts, results) {
 				modeResolutionChain.length = 0;
 				opts.modes.forEach((mode) => setMode(mode));
 			}
-			return hydrateFactory(win, opts, results, afterHydrate, resolve);
+			return ssrFactory(win, opts, results, afterSsr, resolve);
 		});
 	} catch (e) {
 		renderCatchError(results, e);
-		return finalizeHydrate(win, win.document, opts, results);
+		return finalizeSsr(win, win.document, opts, results);
 	}
 }
-async function afterHydrate(win, opts, results, resolve) {
-	const afterHydrateFn = typeof opts.afterHydrate === "function" ? opts.afterHydrate : NOOP;
+async function afterSsr(win, opts, results, resolve) {
+	const afterSsrFn = typeof (opts.afterSsr || opts.afterHydrate) === "function" ? opts.afterSsr || opts.afterHydrate : NOOP;
 	try {
-		await Promise.resolve(afterHydrateFn(win.document));
-		return resolve(finalizeHydrate(win, win.document, opts, results));
+		await Promise.resolve(afterSsrFn(win.document));
+		return resolve(finalizeSsr(win, win.document, opts, results));
 	} catch (e) {
 		renderCatchError(results, e);
-		return resolve(finalizeHydrate(win, win.document, opts, results));
+		return resolve(finalizeSsr(win, win.document, opts, results));
 	}
 }
-function finalizeHydrate(win, doc, opts, results) {
+function finalizeSsr(win, doc, opts, results) {
 	try {
 		inspectElement(results, doc.documentElement, 0);
 		if (opts.removeUnusedStyles !== false) try {
@@ -13642,7 +13648,7 @@ function finalizeHydrate(win, doc, opts, results) {
 		} catch (e) {
 			renderCatchError(results, e);
 		}
-		if (opts.clientHydrateAnnotations) doc.documentElement.classList.add("hydrated");
+		if (opts.clientSsrAnnotations) doc.documentElement.classList.add("hydrated");
 		if (opts.serializeToHtml) results.html = serializeDocumentToString(doc, opts);
 	} catch (e) {
 		renderCatchError(results, e);
@@ -13687,4 +13693,4 @@ function removeScripts(elm) {
 	}
 }
 //#endregion
-export { createWindowFromHtml, hydrateDocument, renderToString, resetHydrateDocData, serializeDocumentToString, setTagTransformer, streamToString, transformTag };
+export { createWindowFromHtml, hydrateDocument, renderToString, resetSsrDocData, serializeDocumentToString, setTagTransformer, ssrDocument, streamToString, transformTag };