@stencil/core 2.17.3 → 2.17.4

package/cli/index.cjs

@@ -1,5 +1,5 @@
 /*!
- Stencil CLI (CommonJS) v2.17.3 | MIT Licensed | https://stenciljs.com
+ Stencil CLI (CommonJS) v2.17.4 | MIT Licensed | https://stenciljs.com
  */
 'use strict';
 
@@ -829,7 +829,7 @@ LOG_LEVELS.includes(maybeLogLevel);
 const dependencies = [
 	{
 		name: "@stencil/core",
-		version: "2.17.3",
+		version: "2.17.4",
 		main: "compiler/stencil.js",
 		resources: [
 			"package.json",
@@ -937,6 +937,11 @@ const dependencies = [
 	}
 ];
 
+/**
+ * Attempt to find a Stencil configuration file on the file system
+ * @param opts the options needed to find the configuration file
+ * @returns the results of attempting to find a configuration file on disk
+ */
 const findConfig = async (opts) => {
     const sys = opts.sys;
     const cwd = sys.getCurrentDirectory();
@@ -948,7 +953,7 @@ const findConfig = async (opts) => {
     let configPath = opts.configPath;
     if (isString(configPath)) {
         if (!sys.platformPath.isAbsolute(configPath)) {
-            // passed in a custom stencil config location
+            // passed in a custom stencil config location,
             // but it's relative, so prefix the cwd
             configPath = normalizePath(sys.platformPath.join(cwd, configPath));
         }
@@ -2313,14 +2318,15 @@ const run = async (init) => {
  * @public
  */
 const runTask = async (coreCompiler, config, task, sys) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const logger = (_a = config.logger) !== null && _a !== void 0 ? _a : createLogger();
     const strictConfig = {
         ...config,
         flags: createConfigFlags((_b = config.flags) !== null && _b !== void 0 ? _b : { task }),
         logger,
         outputTargets: (_c = config.outputTargets) !== null && _c !== void 0 ? _c : [],
-        sys: sys !== null && sys !== void 0 ? sys : coreCompiler.createSystem({ logger }),
+        sys: (_d = sys !== null && sys !== void 0 ? sys : config.sys) !== null && _d !== void 0 ? _d : coreCompiler.createSystem({ logger }),
+        testing: (_e = config.testing) !== null && _e !== void 0 ? _e : {},
     };
     switch (task) {
         case 'build':

package/cli/index.js

@@ -1,5 +1,5 @@
 /*!
- Stencil CLI v2.17.3 | MIT Licensed | https://stenciljs.com
+ Stencil CLI v2.17.4 | MIT Licensed | https://stenciljs.com
  */
 /**
  * This sets the log level hierarchy for our terminal logger, ranging from
@@ -805,7 +805,7 @@ LOG_LEVELS.includes(maybeLogLevel);
 const dependencies = [
 	{
 		name: "@stencil/core",
-		version: "2.17.3",
+		version: "2.17.4",
 		main: "compiler/stencil.js",
 		resources: [
 			"package.json",
@@ -913,6 +913,11 @@ const dependencies = [
 	}
 ];
 
+/**
+ * Attempt to find a Stencil configuration file on the file system
+ * @param opts the options needed to find the configuration file
+ * @returns the results of attempting to find a configuration file on disk
+ */
 const findConfig = async (opts) => {
     const sys = opts.sys;
     const cwd = sys.getCurrentDirectory();
@@ -924,7 +929,7 @@ const findConfig = async (opts) => {
     let configPath = opts.configPath;
     if (isString(configPath)) {
         if (!sys.platformPath.isAbsolute(configPath)) {
-            // passed in a custom stencil config location
+            // passed in a custom stencil config location,
             // but it's relative, so prefix the cwd
             configPath = normalizePath(sys.platformPath.join(cwd, configPath));
         }
@@ -2289,14 +2294,15 @@ const run = async (init) => {
  * @public
  */
 const runTask = async (coreCompiler, config, task, sys) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const logger = (_a = config.logger) !== null && _a !== void 0 ? _a : createLogger();
     const strictConfig = {
         ...config,
         flags: createConfigFlags((_b = config.flags) !== null && _b !== void 0 ? _b : { task }),
         logger,
         outputTargets: (_c = config.outputTargets) !== null && _c !== void 0 ? _c : [],
-        sys: sys !== null && sys !== void 0 ? sys : coreCompiler.createSystem({ logger }),
+        sys: (_d = sys !== null && sys !== void 0 ? sys : config.sys) !== null && _d !== void 0 ? _d : coreCompiler.createSystem({ logger }),
+        testing: (_e = config.testing) !== null && _e !== void 0 ? _e : {},
     };
     switch (task) {
         case 'build':

package/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/cli",
-  "version": "2.17.3",
+  "version": "2.17.4",
   "description": "Stencil CLI.",
   "main": "./index.cjs",
   "module": "./index.js",

package/compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/compiler",
-  "version": "2.17.3",
+  "version": "2.17.4",
   "description": "Stencil Compiler.",
   "main": "./stencil.js",
   "types": "./stencil.d.ts",

package/compiler/stencil.js

@@ -1,5 +1,5 @@
 /*!
- Stencil Compiler v2.17.3 | MIT Licensed | https://stenciljs.com
+ Stencil Compiler v2.17.4 | MIT Licensed | https://stenciljs.com
  */
 (function(exports) {
 'use strict';
@@ -4065,7 +4065,7 @@ const createCustomResolverAsync = (sys, inMemoryFs, exts) => {
   };
 };
 
-const buildId = '20220802224219';
+const buildId = '20220822163920';
 const minfyJsId = 'terser5.6.1_7';
 const optimizeCssId = 'autoprefixer10.2.5_postcss8.2.13_7';
 const parse5Version = '6.0.1';
@@ -4073,8 +4073,8 @@ const rollupVersion = '2.42.3';
 const sizzleVersion = '2.42.3';
 const terserVersion = '5.6.1';
 const typescriptVersion = '4.5.4';
-const vermoji = '🌭';
-const version$3 = '2.17.3';
+const vermoji = '🐞';
+const version$3 = '2.17.4';
 const versions = {
   stencil: version$3,
   parse5: parse5Version,
@@ -11522,6 +11522,20 @@ const scopeCss = (cssText, scopeId, commentOriginalSelector) => {
   return cssText;
 };
 
+/**
+ * Serialize data about a style import to an annotated path, where
+ * the filename has a URL queryparams style string appended to it.
+ * This could look like:
+ *
+ * ```
+ * './some-file.CSS?tag=my-tag&mode=ios&encapsulation=scoped');
+ * ```
+ *
+ * @param data import data to be serialized
+ * @param styleImportData an argument which controls whether the import data
+ * will be added to the path (formatted as queryparams)
+ * @returns a formatted string
+ */
 const serializeImportPath = (data, styleImportData) => {
   let p = data.importeePath;
   if (isString$1(p)) {
@@ -11552,6 +11566,13 @@ const serializeImportPath = (data, styleImportData) => {
   }
   return p;
 };
+/**
+ * Parse import paths (filepaths possibly annotated w/ component metadata,
+ * formatted as URL queryparams) into a structured format.
+ *
+ * @param importPath an annotated import path to examine
+ * @returns formatted information about the import
+ */
 const parseImportPath = (importPath) => {
   const parsedPath = {
     importPath,
@@ -41367,29 +41388,73 @@ const formatUrl = (config, pluginCtx, code, filePath, ext) => {
   return `const ${varName} = 'data:${mime};base64,${base64}';export default ${varName};`;
 };
 
+/**
+ * A Rollup plugin which bundles up some transformation of CSS imports as well
+ * as writing some files to disk for the `DIST_COLLECTION` output target.
+ *
+ * @param config a user-supplied configuration
+ * @param compilerCtx the current compiler context
+ * @param buildCtx the current build context
+ * @param bundleOpts bundle options for Rollup
+ * @returns a Rollup plugin which carries out the necessary work
+ */
 const extTransformsPlugin = (config, compilerCtx, buildCtx, bundleOpts) => {
   return {
     name: 'extTransformsPlugin',
+    /**
+     * A custom function targeting the `transform` build hook in Rollup. See here for details:
+     * https://rollupjs.org/guide/en/#transform
+     *
+     * Here we are ignoring the first argument (which contains the module's source code) and
+     * only looking at the `id` argument. We use that `id` to get information about the module
+     * in question from disk ourselves so that we can then do some transformations on it.
+     *
+     * @param _ an unused parameter (normally the code for a given module)
+     * @param id the id of a module
+     * @returns metadata for Rollup or null if no transformation should be done
+     */
     async transform(_, id) {
+      var _a, _b;
       if (/\0/.test(id)) {
         return null;
       }
+      // The `id` here was possibly previously updated using
+      // `serializeImportPath` to annotate the filepath with various metadata
+      // serialized to query-params. If that was done for this particular `id`
+      // then the `data` prop will not be null.
       const { data } = parseImportPath(id);
       if (data != null) {
-        let cmp;
+        let cmp = undefined;
         const filePath = normalizeFsPath(id);
         const code = await compilerCtx.fs.readFile(filePath);
         if (typeof code !== 'string') {
           return null;
         }
         const pluginTransforms = await runPluginTransformsEsmImports(config, compilerCtx, buildCtx, code, filePath);
-        const commentOriginalSelector = bundleOpts.platform === 'hydrate' && data.encapsulation === 'shadow';
+        // We need to check whether the current build is a dev-mode watch build w/ HMR enabled in
+        // order to know how we'll want to set `commentOriginalSelector` (below). If we are doing
+        // a hydrate build we need to set this to `true` because commenting-out selectors is what
+        // gives us support for scoped CSS w/ hydrated components (we don't support shadow DOM and
+        // styling via that route for them). However, we don't want to comment selectors in dev
+        // mode when using HMR in the browser, since there we _do_ support putting stylesheets into
+        // the shadow DOM and commenting out e.g. the `:host` selector in those stylesheets will
+        // break components' CSS when an HMR update is sent to the browser.
+        //
+        // See https://github.com/ionic-team/stencil/issues/3461 for details
+        const isDevWatchHMRBuild = config.flags.watch &&
+          config.flags.dev &&
+          config.flags.serve &&
+          ((_b = (_a = config.devServer) === null || _a === void 0 ? void 0 : _a.reloadStrategy) !== null && _b !== void 0 ? _b : null) === 'hmr';
+        const commentOriginalSelector = bundleOpts.platform === 'hydrate' && data.encapsulation === 'shadow' && !isDevWatchHMRBuild;
         if (data.tag) {
           cmp = buildCtx.components.find((c) => c.tagName === data.tag);
           const moduleFile = cmp && compilerCtx.moduleMap.get(cmp.sourceFilePath);
           if (moduleFile) {
             const collectionDirs = config.outputTargets.filter(isOutputTargetDistCollection);
             const relPath = relative$1(config.srcDir, pluginTransforms.id);
+            // If we found a `moduleFile` in the module map above then we
+            // should write the transformed CSS file (found in the return value
+            // of `runPluginTransformsEsmImports`, above) to disk.
             await Promise.all(collectionDirs.map(async (outputTarget) => {
               const collectionPath = join(outputTarget.collectionDir, relPath);
               await compilerCtx.fs.writeFile(collectionPath, pluginTransforms.code);
@@ -57185,13 +57250,13 @@ const generateReadmeDocs = async (config, compilerCtx, docsData, outputTargets)
   }
   const strictCheck = readmeOutputTargets.some((o) => o.strict);
   if (strictCheck) {
-    strickCheckDocs(config, docsData);
+    strictCheckDocs(config, docsData);
   }
   await Promise.all(docsData.components.map((cmpData) => {
     return generateReadme(config, compilerCtx, readmeOutputTargets, cmpData, docsData.components);
   }));
 };
-const strickCheckDocs = (config, docsData) => {
+const strictCheckDocs = (config, docsData) => {
   docsData.components.forEach((component) => {
     component.props.forEach((prop) => {
       if (!prop.docs && prop.deprecation === undefined) {
@@ -64679,6 +64744,7 @@ const getConfig = (userConfig) => {
     logger,
     outputTargets: (_c = userConfig.outputTargets) !== null && _c !== void 0 ? _c : [],
     sys: (_d = userConfig.sys) !== null && _d !== void 0 ? _d : createSystem({ logger }),
+    testing: userConfig !== null && userConfig !== void 0 ? userConfig : {},
   };
   setPlatformPath(config.sys.platformPath);
   if (config.flags.debug || config.flags.verbose) {
@@ -65385,7 +65451,7 @@ const getComponentPathContent = (componentGraph, outputTarget) => {
 const dependencies = [
 	{
 		name: "@stencil/core",
-		version: "2.17.3",
+		version: "2.17.4",
 		main: "compiler/stencil.js",
 		resources: [
 			"package.json",
@@ -65798,7 +65864,7 @@ const validateHydrated = (config) => {
  * Validate and return DIST_COLLECTION output targets, ensuring that the `dir`
  * property is set on them.
  *
- * @param config the user-supplied configuration object
+ * @param config a validated configuration object
  * @param userOutputs an array of output targets
  * @returns an array of validated DIST_COLLECTION output targets
  */
@@ -66107,20 +66173,20 @@ const validateVScodeDocsOutputTarget = (diagnostics, outputTarget) => {
   return outputTarget;
 };
 
-const validateAngular = (userConfig, userOutputs) => {
+const validateAngular = (config, userOutputs) => {
   const angularOutputTargets = userOutputs.filter(isOutputTargetAngular);
   return angularOutputTargets.map((outputTarget) => {
     let directivesProxyFile = outputTarget.directivesProxyFile;
     if (directivesProxyFile && !isAbsolute$1(directivesProxyFile)) {
-      directivesProxyFile = join(userConfig.rootDir, directivesProxyFile);
+      directivesProxyFile = join(config.rootDir, directivesProxyFile);
     }
     let directivesArrayFile = outputTarget.directivesArrayFile;
     if (directivesArrayFile && !isAbsolute$1(directivesArrayFile)) {
-      directivesArrayFile = join(userConfig.rootDir, directivesArrayFile);
+      directivesArrayFile = join(config.rootDir, directivesArrayFile);
     }
     let directivesUtilsFile = outputTarget.directivesUtilsFile;
     if (directivesUtilsFile && !isAbsolute$1(directivesUtilsFile)) {
-      directivesUtilsFile = join(userConfig.rootDir, directivesUtilsFile);
+      directivesUtilsFile = join(config.rootDir, directivesUtilsFile);
     }
     return {
       type: 'angular',
@@ -66738,7 +66804,7 @@ const validateWorkers = (config) => {
  * @returns an object with config and diagnostics props
  */
 const validateConfig = (userConfig = {}, bootstrapConfig) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const config = Object.assign({}, userConfig); // not positive it's json safe
   const diagnostics = [];
   const logger = bootstrapConfig.logger || config.logger || createLogger();
@@ -66749,6 +66815,7 @@ const validateConfig = (userConfig = {}, bootstrapConfig) => {
     logger,
     outputTargets: (_a = config.outputTargets) !== null && _a !== void 0 ? _a : [],
     sys: (_c = (_b = config.sys) !== null && _b !== void 0 ? _b : bootstrapConfig.sys) !== null && _c !== void 0 ? _c : createSystem({ logger }),
+    testing: (_d = config.testing) !== null && _d !== void 0 ? _d : {},
   };
   // default devMode false
   if (validatedConfig.flags.prod) {