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

package/dist/testing/index.d.mts

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

package/dist/testing/index.mjs

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

package/package.json

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