npm - @stencil/core - Versions diffs - 5.0.0-alpha.3 → 5.0.0-alpha.5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/dist/{client-CSm3x5ke.mjs → client-Dnio47yQ.mjs} +108 -19
package/dist/compiler/index.d.mts +2 -2
package/dist/compiler/index.mjs +2 -2
package/dist/compiler/utils/index.d.mts +2 -2
package/dist/compiler/utils/index.mjs +3 -3
package/dist/{compiler-D6iP7Bzb.mjs → compiler-Dxri2g8Z.mjs} +14994 -14303
package/dist/declarations/stencil-public-compiler.d.ts +342 -132
package/dist/declarations/stencil-public-compiler.js +2 -3
package/dist/declarations/stencil-public-runtime.d.ts +2 -0
package/dist/{index-hS-KBdAP.d.ts → index-D-XN9HW_.d.ts} +1 -1
package/dist/{index-tUR6pD3J.d.mts → index-D5zaocDq.d.mts} +411 -189
package/dist/{index-CyrGY82h.d.ts → index-D61XZw0f.d.ts} +2 -2
package/dist/{index-CXHCTQNt.d.mts → index-Dat4djoo.d.mts} +5 -1
package/dist/index.mjs +1 -1
package/dist/{jsx-runtime-DlDkTqps.d.ts → jsx-runtime-B3vQbWIW.d.ts} +1 -1
package/dist/jsx-runtime.d.ts +1 -1
package/dist/jsx-runtime.js +1 -1
package/dist/{node-Bg-mO5dw.mjs → node-pj6rF4Wt.mjs} +66 -69
package/dist/{regular-expression-D5pGVpCu.mjs → regular-expression-D0_N0PGa.mjs} +44 -26
package/dist/runtime/app-data/index.d.ts +1 -1
package/dist/runtime/client/index.d.ts +45 -8
package/dist/runtime/client/index.js +132 -40
package/dist/runtime/index.d.ts +33 -5
package/dist/runtime/index.js +2 -2
package/dist/runtime/server/index.d.mts +72 -28
package/dist/runtime/server/index.mjs +146 -46
package/dist/runtime/server/runner.d.mts +40 -26
package/dist/runtime/server/runner.mjs +28 -22
package/dist/{runtime-BBCnuprF.js → runtime-CKyUrF4i.js} +131 -39
package/dist/sys/node/index.d.mts +1 -1
package/dist/sys/node/index.mjs +1 -1
package/dist/sys/node/worker.mjs +2 -2
package/dist/testing/index.d.mts +2 -2
package/dist/testing/index.mjs +17 -16
package/dist/{validation-Byxie0Uk.mjs → validation-BA8nzXu_.mjs} +82 -58
package/package.json +11 -12

package/dist/runtime/client/index.d.ts CHANGED Viewed

@@ -497,6 +497,7 @@ declare namespace JSXBase {
     importance?: 'low' | 'auto' | 'high';
     height?: number | string;
     loading?: 'lazy' | 'auto' | 'eager';
+    referrerPolicy?: ReferrerPolicy;
     sizes?: string;
     src?: string;
     srcSet?: string;
@@ -1284,7 +1285,7 @@ interface CustomElementsDefineOptions {
 }
 //#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
@@ -1301,7 +1302,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.
@@ -1400,10 +1401,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.
@@ -1416,6 +1421,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.
@@ -1453,7 +1462,7 @@ interface SerializeDocumentOptions extends HydrateDocumentOptions {
    */
   modes?: ResolutionHandler[];
 }
-interface HydrateFactoryOptions extends SerializeDocumentOptions {
+interface SsrFactoryOptions extends SerializeDocumentOptions {
   serializeToHtml: boolean;
   destroyWindow: boolean;
   destroyDocument: boolean;
@@ -2122,7 +2131,7 @@ declare const setErrorHandler: (handler: ErrorHandler) => ErrorHandler;
 //#region src/client/client-style.d.ts
 declare const styles: StyleMap;
 declare const modeResolutionChain: ResolutionHandler[];
-declare const setScopedSSR: (_opts: HydrateFactoryOptions) => void;
+declare const setScopedSsr: (_opts: SsrFactoryOptions) => void;
 declare const needsScopedSSR: () => boolean;
 //#endregion
 //#region src/client/client-task-queue.d.ts
@@ -2154,12 +2163,12 @@ declare const supportsMutableAdoptedStyleSheets: boolean;
 declare const getAssetPath: (path: string) => string;
 declare const setAssetPath: (path: string) => string;
 //#endregion
-//#region src/runtime/bootstrap-custom-element.d.ts
+//#region src/runtime/bootstrap-standalone.d.ts
 declare const defineCustomElement: (Cstr: any, compactMeta: ComponentRuntimeMetaCompact) => void;
 declare const proxyCustomElement: (Cstr: any, compactMeta: ComponentRuntimeMetaCompact) => any;
 declare const forceModeUpdate: (elm: RenderNode) => void;
 //#endregion
-//#region src/runtime/bootstrap-lazy.d.ts
+//#region src/runtime/bootstrap-loader.d.ts
 declare const bootstrapLazy: (lazyBundles: LazyBundlesRuntimeData, options?: CustomElementsDefineOptions) => void;
 //#endregion
 //#region src/runtime/connected-callback.d.ts
@@ -2211,6 +2220,30 @@ declare const getMode: (ref: RuntimeRef) => string;
  */
 declare const setNonce: (nonce: string) => string;
 //#endregion
+//#region src/runtime/normalize-watchers.d.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.
+ */
+declare const normalizeWatchers: (raw: ComponentConstructorChangeHandlers | undefined) => ComponentConstructorChangeHandlers | undefined;
+//#endregion
 //#region src/runtime/parse-property-value.d.ts
 /**
  * Parse a new property value for a given property type.
@@ -2269,6 +2302,10 @@ declare const proxyComponent: (Cstr: ComponentConstructor, cmpMeta: ComponentRun
 /**
  * Method to render a virtual DOM tree to a container element.
  *
+ * Supports efficient re-renders: calling `render()` again on the same container
+ * will diff the new VNode tree against the previous one and only update what changed,
+ * preserving existing DOM elements and their state.
+ *
  * @example
  * ```tsx
  * import { render } from '@stencil/core';
@@ -2365,4 +2402,4 @@ declare const insertVdomAnnotations: (doc: Document, staticComponents: string[])
  */
 declare const renderVdom: (hostRef: HostRef, renderFnResults: VNode | VNode[], isInitialLoad?: boolean) => void;
 //#endregion
-export { AttachInternals, AttrDeserialize, BUILD, Build, Component, Element$1 as Element, Env, Event, Fragment, H, H as HTMLElement, type HTMLStencilElement, HYDRATED_STYLE_ID, Host, type JSXBase, Listen, Method, Mixin, NAMESPACE, Prop, PropSerialize, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRenderingRef, getShadowRoot, getValue, h, insertVdomAnnotations, isMemberInElement, jsx, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, render, renderVdom, resolveVar, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setScopedSSR, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, supportsShadow, transformTag, win, writeTask };
+export { AttachInternals, AttrDeserialize, BUILD, Build, Component, Element$1 as Element, Env, Event, Fragment, H, H as HTMLElement, type HTMLStencilElement, HYDRATED_STYLE_ID, Host, type JSXBase, Listen, Method, Mixin, NAMESPACE, Prop, PropSerialize, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRenderingRef, getShadowRoot, getValue, h, insertVdomAnnotations, isMemberInElement, jsx, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, normalizeWatchers, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, render, renderVdom, resolveVar, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setScopedSsr, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, supportsShadow, transformTag, win, writeTask };

package/dist/runtime/client/index.js CHANGED Viewed

@@ -379,7 +379,7 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 //#region src/client/client-style.ts
 const styles = /* @__PURE__ */ new Map();
 const modeResolutionChain = [];
-const setScopedSSR = (_opts) => {};
+const setScopedSsr = (_opts) => {};
 const needsScopedSSR = () => false;
 //#endregion
 //#region src/runtime/runtime-constants.ts
@@ -1427,7 +1427,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
 				*/
@@ -2538,6 +2539,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.
@@ -3888,7 +3929,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;
 		}
@@ -3993,9 +4034,11 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 						return;
 					}
 					const propFlags = members.find(([m]) => m === propName);
-					if (propFlags && propFlags[1][0] & MEMBER_FLAGS.Boolean) newValue = newValue !== null && newValue !== "false";
+					const isBooleanTarget = propFlags && propFlags[1][0] & MEMBER_FLAGS.Boolean;
+					const isSpuriousBooleanRemoval = isBooleanTarget && newValue === null && this[propName] === void 0;
+					if (isBooleanTarget) newValue = !(newValue === null || newValue === "false");
 					const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-					if (newValue != this[propName] && (!propDesc.get || !!propDesc.set)) this[propName] = newValue;
+					if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) this[propName] = newValue;
 				});
 			};
 			Cstr.observedAttributes = Array.from(new Set([...Object.keys(cmpMeta.$watchers$ ?? {}), ...members.filter(([_, m]) => m[0] & MEMBER_FLAGS.HasAttribute).map(([propName, m]) => {
@@ -4036,7 +4079,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;
 					}
@@ -4212,7 +4255,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));
 };
@@ -4226,12 +4321,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);
@@ -4312,29 +4410,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();
@@ -4368,7 +4444,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] ?? {};
 			}
@@ -4524,8 +4600,19 @@ const setPlatformOptions = (opts) => Object.assign(plt, opts);
 //#endregion
 //#region src/runtime/render.ts
 /**
+* A WeakMap to persist HostRef objects across multiple render() calls to the
+* same container. This enables VNode diffing on re-renders — without it, each
+* call creates a fresh HostRef with no previous VNode, causing renderVdom to
+* replace the entire DOM subtree instead of patching only what changed.
+*/
+const hostRefCache = /* @__PURE__ */ new WeakMap();
+/**
 * Method to render a virtual DOM tree to a container element.
 *
+* Supports efficient re-renders: calling `render()` again on the same container
+* will diff the new VNode tree against the previous one and only update what changed,
+* preserving existing DOM elements and their state.
+*
 * @example
 * ```tsx
 * import { render } from '@stencil/core';
@@ -4542,14 +4629,19 @@ const setPlatformOptions = (opts) => Object.assign(plt, opts);
 * @param container - The container element to render the virtual DOM tree to
 */
 function render(vnode, container) {
-	renderVdom({
-		$flags$: 0,
-		$cmpMeta$: {
+	let ref = hostRefCache.get(container);
+	if (!ref) {
+		ref = {
 			$flags$: 0,
-			$tagName$: container.tagName
-		},
-		$hostElement$: container
-	}, vnode);
+			$cmpMeta$: {
+				$flags$: 0,
+				$tagName$: container.tagName
+			},
+			$hostElement$: container
+		};
+		hostRefCache.set(container, ref);
+	}
+	renderVdom(ref, vnode);
 }
 //#endregion
 //#region src/runtime/tag-transform.ts
@@ -4774,4 +4866,4 @@ const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, in
 	}
 };
 //#endregion
-export { AttachInternals, AttrDeserialize, BUILD, Build, Component, Element$1 as Element, Env, Event, Fragment, H, H as HTMLElement, HYDRATED_STYLE_ID, Host, Listen, Method, Mixin, NAMESPACE, Prop, PropSerialize, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRenderingRef, getShadowRoot, getValue, h, insertVdomAnnotations, isMemberInElement, jsx, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, render, renderVdom, resolveVar, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setScopedSSR, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, supportsShadow, transformTag, win, writeTask };
+export { AttachInternals, AttrDeserialize, BUILD, Build, Component, Element$1 as Element, Env, Event, Fragment, H, H as HTMLElement, HYDRATED_STYLE_ID, Host, Listen, Method, Mixin, NAMESPACE, Prop, PropSerialize, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRenderingRef, getShadowRoot, getValue, h, insertVdomAnnotations, isMemberInElement, jsx, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, normalizeWatchers, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, render, renderVdom, resolveVar, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setScopedSsr, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, supportsShadow, transformTag, win, writeTask };

package/dist/runtime/index.d.ts CHANGED Viewed

@@ -1,16 +1,16 @@
-import { _ as ResolutionHandler, a as ComponentRuntimeMeta, c as HostRef, d as RenderNode, f as RuntimeRef, g as JSXBase, h as HTMLStencilElement, i as ComponentRuntimeHostListener, l as LazyBundlesRuntimeData, n as ChildType, o as ComponentRuntimeMetaCompact, p as CustomElementsDefineOptions, r as ComponentConstructor, s as HostElement, u as PlatformRuntime, v as TagTransformer, y as VNode } from "../index-CyrGY82h.js";
-import { n as jsxs, r as Fragment, t as jsx } from "../jsx-runtime-DlDkTqps.js";
+import { _ as JSXBase, a as ComponentRuntimeHostListener, b as VNode, c as HostElement, d as PlatformRuntime, f as RenderNode, g as HTMLStencilElement, i as ComponentConstructorChangeHandlers, l as HostRef, m as CustomElementsDefineOptions, n as ChildType, o as ComponentRuntimeMeta, p as RuntimeRef, r as ComponentConstructor, s as ComponentRuntimeMetaCompact, u as LazyBundlesRuntimeData, v as ResolutionHandler, y as TagTransformer } from "../index-D61XZw0f.js";
+import { n as jsxs, r as Fragment, t as jsx } from "../jsx-runtime-B3vQbWIW.js";
 //#region src/runtime/asset-path.d.ts
 declare const getAssetPath: (path: string) => string;
 declare const setAssetPath: (path: string) => string;
 //#endregion
-//#region src/runtime/bootstrap-custom-element.d.ts
+//#region src/runtime/bootstrap-standalone.d.ts
 declare const defineCustomElement: (Cstr: any, compactMeta: ComponentRuntimeMetaCompact) => void;
 declare const proxyCustomElement: (Cstr: any, compactMeta: ComponentRuntimeMetaCompact) => any;
 declare const forceModeUpdate: (elm: RenderNode) => void;
 //#endregion
-//#region src/runtime/bootstrap-lazy.d.ts
+//#region src/runtime/bootstrap-loader.d.ts
 declare const bootstrapLazy: (lazyBundles: LazyBundlesRuntimeData, options?: CustomElementsDefineOptions) => void;
 //#endregion
 //#region src/runtime/connected-callback.d.ts
@@ -59,6 +59,30 @@ declare const getMode: (ref: RuntimeRef) => string;
  */
 declare const setNonce: (nonce: string) => string;
 //#endregion
+//#region src/runtime/normalize-watchers.d.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.
+ */
+declare const normalizeWatchers: (raw: ComponentConstructorChangeHandlers | undefined) => ComponentConstructorChangeHandlers | undefined;
+//#endregion
 //#region src/runtime/parse-property-value.d.ts
 /**
  * Parse a new property value for a given property type.
@@ -117,6 +141,10 @@ declare const proxyComponent: (Cstr: ComponentConstructor, cmpMeta: ComponentRun
 /**
  * Method to render a virtual DOM tree to a container element.
  *
+ * Supports efficient re-renders: calling `render()` again on the same container
+ * will diff the new VNode tree against the previous one and only update what changed,
+ * preserving existing DOM elements and their state.
+ *
  * @example
  * ```tsx
  * import { render } from '@stencil/core';
@@ -191,4 +219,4 @@ declare const insertVdomAnnotations: (doc: Document, staticComponents: string[])
  */
 declare const renderVdom: (hostRef: HostRef, renderFnResults: VNode | VNode[], isInitialLoad?: boolean) => void;
 //#endregion
-export { Fragment, type HTMLStencilElement, HYDRATED_STYLE_ID, Host, type JSXBase, Mixin, addHostEventListeners, bootstrapLazy, connectedCallback, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getMode, getRenderingRef, getShadowRoot, getValue, h, insertVdomAnnotations, jsx, jsxs, parsePropertyValue, postUpdateComponent, proxyComponent, proxyCustomElement, render, renderVdom, setAssetPath, setMode, setNonce, setPlatformOptions, setTagTransformer, setValue, transformTag };
+export { Fragment, type HTMLStencilElement, HYDRATED_STYLE_ID, Host, type JSXBase, Mixin, addHostEventListeners, bootstrapLazy, connectedCallback, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getMode, getRenderingRef, getShadowRoot, getValue, h, insertVdomAnnotations, jsx, jsxs, normalizeWatchers, parsePropertyValue, postUpdateComponent, proxyComponent, proxyCustomElement, render, renderVdom, setAssetPath, setMode, setNonce, setPlatformOptions, setTagTransformer, setValue, transformTag };

package/dist/runtime/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import { A as h, C as postUpdateComponent, D as getMode, E as parsePropertyValue, F as HYDRATED_STYLE_ID, M as getShadowRoot, N as getAssetPath, O as setMode, P as setAssetPath, S as getRenderingRef, T as createEvent, _ as connectedCallback, a as transformTag, b as setValue, c as setNonce, d as Fragment, f as bootstrapLazy, g as disconnectedCallback, h as proxyCustomElement, i as setTagTransformer, j as getElement, k as Host, l as Mixin, m as forceModeUpdate, n as jsx, o as render, p as defineCustomElement, r as jsxs, s as setPlatformOptions, t as insertVdomAnnotations, u as addHostEventListeners, v as proxyComponent, w as renderVdom, x as forceUpdate, y as getValue } from "../runtime-BBCnuprF.js";
-export { Fragment, HYDRATED_STYLE_ID, Host, Mixin, addHostEventListeners, bootstrapLazy, connectedCallback, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getMode, getRenderingRef, getShadowRoot, getValue, h, insertVdomAnnotations, jsx, jsxs, parsePropertyValue, postUpdateComponent, proxyComponent, proxyCustomElement, render, renderVdom, setAssetPath, setMode, setNonce, setPlatformOptions, setTagTransformer, setValue, transformTag };
+import { A as Host, C as postUpdateComponent, D as normalizeWatchers, E as parsePropertyValue, F as setAssetPath, I as HYDRATED_STYLE_ID, M as getElement, N as getShadowRoot, O as getMode, P as getAssetPath, S as getRenderingRef, T as createEvent, _ as connectedCallback, a as transformTag, b as setValue, c as setNonce, d as Fragment, f as bootstrapLazy, g as disconnectedCallback, h as proxyCustomElement, i as setTagTransformer, j as h, k as setMode, l as Mixin, m as forceModeUpdate, n as jsx, o as render, p as defineCustomElement, r as jsxs, s as setPlatformOptions, t as insertVdomAnnotations, u as addHostEventListeners, v as proxyComponent, w as renderVdom, x as forceUpdate, y as getValue } from "../runtime-CKyUrF4i.js";
+export { Fragment, HYDRATED_STYLE_ID, Host, Mixin, addHostEventListeners, bootstrapLazy, connectedCallback, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getMode, getRenderingRef, getShadowRoot, getValue, h, insertVdomAnnotations, jsx, jsxs, normalizeWatchers, parsePropertyValue, postUpdateComponent, proxyComponent, proxyCustomElement, render, renderVdom, setAssetPath, setMode, setNonce, setPlatformOptions, setTagTransformer, setValue, transformTag };