@stencil/core 5.0.0-alpha.15 → 5.0.0-alpha.17

package/dist/runtime/client/runtime.js

@@ -1597,7 +1597,12 @@ const hydrateScopedToShadow = () => {
 	if (!win.document) return;
 	const styleElements = win.document.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
 	let i = 0;
-	for (; i < styleElements.length; i++) registerStyle(styleElements[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styleElements[i].innerHTML), true);
+	for (; i < styleElements.length; i++) {
+		const scopeId = styleElements[i].getAttribute(HYDRATED_STYLE_ID);
+		const existing = styles.get(scopeId);
+		const allowCS = existing !== void 0 ? existing instanceof CSSStyleSheet : true;
+		registerStyle(scopeId, convertScopedToShadow(styleElements[i].innerHTML), allowCS);
+	}
 };
 //#endregion
 //#region src/utils/helpers.ts
@@ -4513,7 +4518,6 @@ const hmrStart = (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;
@@ -4526,9 +4530,17 @@ const hmrStandalone = async (hostElement, cmpMeta, 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));
+		if (ctor) {
+			for (const key of Object.getOwnPropertyNames(NewClass.prototype)) {
+				if (key === "constructor") continue;
+				Object.defineProperty(ctor.prototype, key, Object.getOwnPropertyDescriptor(NewClass.prototype, key));
+			}
+			const styleDesc = Object.getOwnPropertyDescriptor(NewClass, "style");
+			if (styleDesc) {
+				Object.defineProperty(ctor, "style", styleDesc);
+				const newStyle = NewClass.style;
+				if (newStyle) registerStyle(getScopeId(cmpMeta), newStyle, !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation));
+			}
 		}
 		document.querySelectorAll(cmpMeta.$tagName$).forEach((el) => {
 			if (BUILD$1.hostListener) {
@@ -4548,7 +4560,9 @@ const hmrStandalone = async (hostElement, cmpMeta, hmrVersionId) => {
 //#endregion
 //#region src/runtime/bootstrap-standalone.ts
 const defineCustomElement = (Cstr, compactMeta) => {
-	customElements.define(transformTag(compactMeta[1]), proxyCustomElement(Cstr, compactMeta));
+	const tag = transformTag(compactMeta[1]);
+	const proxied = proxyCustomElement(Cstr, compactMeta);
+	if (!customElements.get(tag)) customElements.define(tag, proxied);
 };
 const proxyCustomElement = (Cstr, compactMeta) => {
 	if (BUILD$1.profile && performance.mark && performance.getEntriesByName("st:app:start", "mark").length === 0) performance.mark("st:app:start");

package/dist/runtime/index.js

@@ -1468,7 +1468,12 @@ const hydrateScopedToShadow = () => {
 	if (!win.document) return;
 	const styleElements = win.document.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
 	let i = 0;
-	for (; i < styleElements.length; i++) registerStyle(styleElements[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styleElements[i].innerHTML), true);
+	for (; i < styleElements.length; i++) {
+		const scopeId = styleElements[i].getAttribute(HYDRATED_STYLE_ID);
+		const existing = styles.get(scopeId);
+		const allowCS = existing !== void 0 ? existing instanceof CSSStyleSheet : true;
+		registerStyle(scopeId, convertScopedToShadow(styleElements[i].innerHTML), allowCS);
+	}
 };
 //#endregion
 //#region src/utils/helpers.ts
@@ -4384,7 +4389,6 @@ const hmrStart = (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;
@@ -4397,9 +4401,17 @@ const hmrStandalone = async (hostElement, cmpMeta, 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));
+		if (ctor) {
+			for (const key of Object.getOwnPropertyNames(NewClass.prototype)) {
+				if (key === "constructor") continue;
+				Object.defineProperty(ctor.prototype, key, Object.getOwnPropertyDescriptor(NewClass.prototype, key));
+			}
+			const styleDesc = Object.getOwnPropertyDescriptor(NewClass, "style");
+			if (styleDesc) {
+				Object.defineProperty(ctor, "style", styleDesc);
+				const newStyle = NewClass.style;
+				if (newStyle) registerStyle(getScopeId(cmpMeta), newStyle, !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation));
+			}
 		}
 		document.querySelectorAll(cmpMeta.$tagName$).forEach((el) => {
 			if (BUILD.hostListener) {
@@ -4419,7 +4431,9 @@ const hmrStandalone = async (hostElement, cmpMeta, hmrVersionId) => {
 //#endregion
 //#region src/runtime/bootstrap-standalone.ts
 const defineCustomElement = (Cstr, compactMeta) => {
-	customElements.define(transformTag(compactMeta[1]), proxyCustomElement(Cstr, compactMeta));
+	const tag = transformTag(compactMeta[1]);
+	const proxied = proxyCustomElement(Cstr, compactMeta);
+	if (!customElements.get(tag)) customElements.define(tag, proxied);
 };
 const proxyCustomElement = (Cstr, compactMeta) => {
 	if (BUILD.profile && performance.mark && performance.getEntriesByName("st:app:start", "mark").length === 0) performance.mark("st:app:start");

package/dist/runtime/server/index.mjs

@@ -1245,7 +1245,12 @@ const hydrateScopedToShadow = () => {
 	if (!win.document) return;
 	const styleElements = win.document.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
 	let i = 0;
-	for (; i < styleElements.length; i++) registerStyle(styleElements[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styleElements[i].innerHTML), true);
+	for (; i < styleElements.length; i++) {
+		const scopeId = styleElements[i].getAttribute(HYDRATED_STYLE_ID);
+		const existing = styles.get(scopeId);
+		const allowCS = existing !== void 0 ? existing instanceof CSSStyleSheet : true;
+		registerStyle(scopeId, convertScopedToShadow(styleElements[i].innerHTML), allowCS);
+	}
 };
 //#endregion
 //#region src/utils/helpers.ts
@@ -4151,7 +4156,6 @@ const hmrStart = (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;
@@ -4164,9 +4168,17 @@ const hmrStandalone = async (hostElement, cmpMeta, 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));
+		if (ctor) {
+			for (const key of Object.getOwnPropertyNames(NewClass.prototype)) {
+				if (key === "constructor") continue;
+				Object.defineProperty(ctor.prototype, key, Object.getOwnPropertyDescriptor(NewClass.prototype, key));
+			}
+			const styleDesc = Object.getOwnPropertyDescriptor(NewClass, "style");
+			if (styleDesc) {
+				Object.defineProperty(ctor, "style", styleDesc);
+				const newStyle = NewClass.style;
+				if (newStyle) registerStyle(getScopeId(cmpMeta), newStyle, !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation));
+			}
 		}
 		document.querySelectorAll(cmpMeta.$tagName$).forEach((el) => {
 			if (BUILD$1.hostListener) {
@@ -4186,7 +4198,9 @@ const hmrStandalone = async (hostElement, cmpMeta, hmrVersionId) => {
 //#endregion
 //#region src/runtime/bootstrap-standalone.ts
 const defineCustomElement = (Cstr, compactMeta) => {
-	customElements.define(transformTag(compactMeta[1]), proxyCustomElement(Cstr, compactMeta));
+	const tag = transformTag(compactMeta[1]);
+	const proxied = proxyCustomElement(Cstr, compactMeta);
+	if (!customElements.get(tag)) customElements.define(tag, proxied);
 };
 const proxyCustomElement = (Cstr, compactMeta) => {
 	if (BUILD$1.profile && performance.mark && performance.getEntriesByName("st:app:start", "mark").length === 0) performance.mark("st:app:start");

package/dist/signals/index.js

@@ -74,7 +74,7 @@ const BUILD = {
 	isDev: false,
 	isTesting: false,
 	hydrateServerSide: false,
-	hydrateClientSide: false,
+	hydrateClientSide: true,
 	lifecycleDOMEvents: false,
 	lazyLoad: false,
 	profile: false,

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

@@ -1,4 +1,4 @@
-import { ei as Logger, vr as CompilerSystem } from "../../index-vY35H18z.mjs";
+import { ti as Logger, yr as CompilerSystem } from "../../index-F3IidHM1.mjs";
 
 //#region src/sys/node/logger/index.d.ts
 /**

package/dist/sys/node/index.mjs

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

package/dist/sys/node/worker.mjs

@@ -1,5 +1,5 @@
-import { l as createWorkerMessageHandler } from "../../compiler-DFO3q3RZ.mjs";
-import { t as createNodeSys } from "../../node-BSwezCWj.mjs";
+import { l as createWorkerMessageHandler } from "../../compiler-CXWiPNlE.mjs";
+import { t as createNodeSys } from "../../node-jFf98r0u.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

@@ -1,5 +1,5 @@
-import { $r as LogLevel, B as ComponentCompilerMeta, Br as Diagnostic, Dt as HostRef, E as CompilerCtx, Et as HostElement, Nt as Module, Rt as NewSpecPageOptions, Zn as Compiler, Zr as LoadConfigInit, a as BuildCtx, aa as ValidatedConfig, cn as RuntimeRef, ei as Logger, fa as RafCallback, ha as UserBuildConditionals, ia as UnvalidatedConfig, kr as Config, mt as ComponentRuntimeMeta, ni as LoggerTimeSpan, pn as SpecPage, ua as ErrorHandler, vr as CompilerSystem } from "../index-vY35H18z.mjs";
-import { a as h, b as Env, d as getMode, g as getElement, h as createEvent, i as Host, m as Fragment, o as forceUpdate, p as Mixin, s as getRenderingRef, v as getAssetPath, y as setAssetPath } from "../index-BvkyxSY6.mjs";
+import { Ar as Config, B as ComponentCompilerMeta, Dt as HostRef, E as CompilerCtx, Et as HostElement, Nt as Module, Qn as Compiler, Qr as LoadConfigInit, Rt as NewSpecPageOptions, Vr as Diagnostic, a as BuildCtx, aa as UnvalidatedConfig, cn as RuntimeRef, da as ErrorHandler, ei as LogLevel, ga as UserBuildConditionals, mt as ComponentRuntimeMeta, oa as ValidatedConfig, pa as RafCallback, pn as SpecPage, ri as LoggerTimeSpan, ti as Logger, yr as CompilerSystem } from "../index-F3IidHM1.mjs";
+import { a as h, b as Env, d as getMode, g as getElement, h as createEvent, i as Host, m as Fragment, o as forceUpdate, p as Mixin, s as getRenderingRef, v as getAssetPath, y as setAssetPath } from "../index-3fu7WQs4.mjs";
 import { Mock } from "vitest";
 
 //#region src/testing/testing-logger.d.ts

package/dist/testing/index.mjs

@@ -1,12 +1,12 @@
-import { A as HYDRATE_ID, C as setAssetPath, D as DEFAULT_DOC_DATA, F as reWireGetterSetter, M as STENCIL_DOC_DATA, P as getHostRef$1, S as getAssetPath, X as Env, Y as BUILD, _ as insertBefore, b as getElement, c as Fragment, 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 Mixin, u as getMode, v as renderVdom, y as createEvent } from "../client-aTQ7xHxx.mjs";
+import { A as HYDRATE_ID, C as setAssetPath, D as DEFAULT_DOC_DATA, F as reWireGetterSetter, M as STENCIL_DOC_DATA, P as getHostRef$1, S as getAssetPath, X as Env, Y as BUILD, _ as insertBefore, b as getElement, c as Fragment, 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 Mixin, u as getMode, v as renderVdom, y as createEvent } from "../client-CgXNkftm.mjs";
 import { L as EVENT_FLAGS, h as noop, w as CMP_FLAGS } from "../regular-expression-CFVJOTUh.mjs";
-import { _ as getBuildFeatures, c as createWorkerContext, g as BuildContext, h as Cache, i as createSystem, o as loadConfig, p as createInMemoryFs, s as createCompiler } from "../compiler-DFO3q3RZ.mjs";
-import { wt as formatLazyBundleRuntimeMeta } from "../validation-CtaOJgnM.mjs";
-import { o as buildEvents } from "../node-BSwezCWj.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-CXWiPNlE.mjs";
+import { wt as formatLazyBundleRuntimeMeta } from "../validation-ByxKj8bC.mjs";
+import { o as buildEvents } from "../node-jFf98r0u.mjs";
 import fs from "node:fs";
-import nodePath from "node:path";
+import path from "node:path";
 import { fileURLToPath } from "node:url";
-import path from "path";
+import path$1 from "path";
 import { MockWindow, setupGlobal } from "@stencil/mock-doc";
 import { createHash } from "crypto";
 import { afterAll, vi } from "vitest";
@@ -88,7 +88,7 @@ const createTestingSystem = () => {
 	let diskReads = 0;
 	let diskWrites = 0;
 	const sys = createSystem();
-	sys.platformPath = path;
+	sys.platformPath = path$1;
 	sys.generateContentHash = (content, length) => {
 		let hash = createHash("sha1").update(content).digest("hex").toLowerCase();
 		if (typeof length === "number") hash = hash.slice(0, length);
@@ -264,7 +264,7 @@ const mockComponentMeta = (overrides = {}) => ({
 */
 function mockValidatedConfig(overrides = {}) {
 	const baseConfig = mockConfig(overrides);
-	const rootDir = nodePath.resolve("/");
+	const rootDir = path.resolve("/");
 	return {
 		...baseConfig,
 		cacheDir: ".stencil",
@@ -279,7 +279,7 @@ function mockValidatedConfig(overrides = {}) {
 		minifyJs: false,
 		namespace: "Testing",
 		outputTargets: baseConfig.outputTargets ?? [],
-		packageJsonFilePath: nodePath.join(rootDir, "package.json"),
+		packageJsonFilePath: path.join(rootDir, "package.json"),
 		rootDir,
 		sourceMap: true,
 		srcDir: "/src",
@@ -300,7 +300,7 @@ function mockValidatedConfig(overrides = {}) {
 * @returns the mock Stencil configuration
 */
 function mockConfig(overrides = {}) {
-	const rootDir = nodePath.resolve("/");
+	const rootDir = path.resolve("/");
 	let { sys } = overrides;
 	if (!sys) sys = createTestingSystem();
 	sys.getCurrentDirectory = () => rootDir;
@@ -482,8 +482,8 @@ const mockModule = (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");
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const TESTING_TSCONFIG = path.resolve(__dirname, "fixtures/tsconfig.testing.json");
 /**
 * Builds a patched sys that falls through to real disk for TypeScript lib files.
 *
@@ -538,7 +538,7 @@ const createPatchedSys = () => {
 			return mem;
 		}
 	};
-	sys.getCompilerExecutingPath = () => nodePath.resolve(__dirname, "../../dist/compiler/index.mjs");
+	sys.getCompilerExecutingPath = () => path.resolve(__dirname, "../../dist/compiler/index.mjs");
 	return sys;
 };
 /**
@@ -634,7 +634,7 @@ const createTestCompiler = async (options = {}) => {
 		...tsconfigObj,
 		include: [validatedConfig.srcDir]
 	}));
-	await compiler.fs.writeFile(nodePath.join(validatedConfig.srcDir, "components.d.ts"), "");
+	await compiler.fs.writeFile(path.join(validatedConfig.srcDir, "components.d.ts"), "");
 	return {
 		compiler,
 		config: validatedConfig,

package/dist/{validation-CtaOJgnM.mjs → validation-ByxKj8bC.mjs}

@@ -1,6 +1,6 @@
 import { t as __exportAll } from "./chunk-z9aeyW2b.mjs";
 import { $ as VALID_CONFIG_OUTPUT_TARGETS, C as ASSETS, F as DOCS_README, H as LISTENER_FLAGS, I as DOCS_VSCODE, J as STANDALONE, M as DOCS_CUSTOM, N as DOCS_CUSTOM_ELEMENTS_MANIFEST, O as COPY, P as DOCS_JSON, Q as TYPES, R as GENERATED_DTS, T as COLLECTION, U as LOADER_BUNDLE, W as MEMBER_FLAGS, Y as STATS, _ as sortBy, b as toTitleCase, et as WATCH_FLAGS, i as flatOne, j as DIST_LAZY, k as CUSTOM, n as dashToPascalCase, p as isString, q as SSR_WASM, r as escapeWithPattern, u as isIterable, w as CMP_FLAGS, y as toDashCase, z as GLOBAL_STYLE } from "./regular-expression-CFVJOTUh.mjs";
-import nodePath, { basename, dirname, relative } from "node:path";
+import path, { basename, dirname, relative } from "node:path";
 import picomatch from "picomatch";
 //#region src/utils/byte-size.ts
 /**
@@ -749,7 +749,7 @@ function relative$1(from, to) {
 	* path. However, our algorithm does differ from that of Node's, as described in this function's JSDoc when a zero
 	* length string is encountered.
 	*/
-	return normalizePath(nodePath.relative(from, to), false);
+	return normalizePath(path.relative(from, to), false);
 }
 /**
 * A wrapped version of node.js' {@link path.join} which adds our custom
@@ -772,7 +772,7 @@ function join$1(...paths) {
 	* Note that our algorithm does differ from Node's, as described in this function's JSDoc regarding trailing
 	* slashes.
 	*/
-	return normalizePath(nodePath.join(...paths), false);
+	return normalizePath(path.join(...paths), false);
 }
 /**
 * A wrapped version of node.js' {@link path.resolve} which adds our custom
@@ -789,7 +789,7 @@ 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);
+	return normalizePath(path.resolve(...paths), false);
 }
 /**
 * A wrapped version of node.js' {@link path.normalize} which adds our custom
@@ -806,7 +806,7 @@ function normalize(toNormalize) {
 	* When normalizing, we should _not_ attempt to relativize the path returned by the native Node `normalize` method.
 	* When calculating the path from each of the string-based parts, Node does not prepend './' to the calculated path.
 	*/
-	return normalizePath(nodePath.normalize(toNormalize), false);
+	return normalizePath(path.normalize(toNormalize), false);
 }
 //#endregion
 //#region src/utils/logger/logger-typescript.ts

package/package.json

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