@stencil/core 2.15.0 → 2.16.0

package/compiler/stencil.js

@@ -1,5 +1,5 @@
 /*!
- Stencil Compiler v2.15.0 | MIT Licensed | https://stenciljs.com
+ Stencil Compiler v2.16.0 | MIT Licensed | https://stenciljs.com
  */
 (function(exports) {
 'use strict';
@@ -872,7 +872,7 @@ const normalizeDiagnostic = (compilerCtx, diagnostic) => {
       diagnostic.messageText = diagnostic.messageText.message;
     }
     else if (typeof diagnostic.messageText === 'string' && diagnostic.messageText.indexOf('Error: ') === 0) {
-      diagnostic.messageText = diagnostic.messageText.substr(7);
+      diagnostic.messageText = diagnostic.messageText.slice(7);
     }
   }
   if (diagnostic.messageText) {
@@ -1161,7 +1161,7 @@ const loadRollupDiagnostics = (config, compilerCtx, buildCtx, rollupError) => {
             };
             diagnostic.lineNumber = errorLine.lineNumber;
             diagnostic.columnNumber = errorLine.errorCharStart;
-            const highlightLine = errorLine.text.substr(loc.column);
+            const highlightLine = errorLine.text.slice(loc.column);
             for (let i = 0; i < highlightLine.length; i++) {
               if (charBreak.has(highlightLine.charAt(i))) {
                 break;
@@ -1588,7 +1588,7 @@ const createJsVarName = (fileName) => {
     fileName = fileName.replace(/[|;$%@"<>()+,.{}_\!\/\\]/g, '-');
     fileName = dashToPascalCase$1(fileName);
     if (fileName.length > 1) {
-      fileName = fileName[0].toLowerCase() + fileName.substr(1);
+      fileName = fileName[0].toLowerCase() + fileName.slice(1);
     }
     else {
       fileName = fileName.toLowerCase();
@@ -1711,15 +1711,16 @@ const SKIP_DEPS = ['@stencil/core'];
  * @returns an error message if the tag has an invalid name, undefined if the tag name passes all checks
  */
 const validateComponentTag = (tag) => {
+  // we want to check this first since we call some String.prototype methods below
+  if (typeof tag !== 'string') {
+    return `Tag "${tag}" must be a string type`;
+  }
   if (tag !== tag.trim()) {
     return `Tag can not contain white spaces`;
   }
   if (tag !== tag.toLowerCase()) {
     return `Tag can not contain upper case characters`;
   }
-  if (typeof tag !== 'string') {
-    return `Tag "${tag}" must be a string type`;
-  }
   if (tag.length === 0) {
     return `Received empty tag value`;
   }
@@ -2235,10 +2236,36 @@ const createWebWorkerMainController = (sys, maxConcurrentWorkers) => {
 
 const COMMON_DIR_MODULE_EXTS = ['.tsx', '.ts', '.mjs', '.js', '.jsx', '.json', '.md'];
 const COMMON_DIR_FILENAMES = ['package.json', 'index.js', 'index.mjs'];
+/**
+ * Determine if a stringified file path is a TypeScript declaration file based on the extension at the end of the path.
+ * @param p the path to evaluate
+ * @returns `true` if the path ends in `.d.ts` (case-sensitive), `false` otherwise.
+ */
 const isDtsFile = (p) => p.endsWith('.d.ts');
+/**
+ * Determine if a stringified file path is a TypeScript file based on the extension at the end of the path. This
+ * function does _not_ consider type declaration files (`.d.ts` files) to be TypeScript files.
+ * @param p the path to evaluate
+ * @returns `true` if the path ends in `.ts` (case-sensitive) but does _not_ end in `.d.ts`, `false` otherwise.
+ */
 const isTsFile = (p) => !isDtsFile(p) && p.endsWith('.ts');
+/**
+ * Determine if a stringified file path is a TSX file based on the extension at the end of the path
+ * @param p the path to evaluate
+ * @returns `true` if the path ends in `.tsx` (case-sensitive), `false` otherwise.
+ */
 const isTsxFile = (p) => p.endsWith('.tsx');
+/**
+ * Determine if a stringified file path is a JSX file based on the extension at the end of the path
+ * @param p the path to evaluate
+ * @returns `true` if the path ends in `.jsx` (case-sensitive), `false` otherwise.
+ */
 const isJsxFile = (p) => p.endsWith('.jsx');
+/**
+ * Determine if a stringified file path is a JavaScript file based on the extension at the end of the path
+ * @param p the path to evaluate
+ * @returns `true` if the path ends in `.js` (case-sensitive), `false` otherwise.
+ */
 const isJsFile = (p) => p.endsWith('.js');
 const isJsonFile = (p) => p.endsWith('.json');
 const getCommonDirName = (dirPath, fileName) => dirPath + '/' + fileName;
@@ -3973,16 +4000,16 @@ const createCustomResolverAsync = (sys, inMemoryFs, exts) => {
   };
 };
 
-const buildId = '20220328165835';
+const buildId = '20220531163847';
 const minfyJsId = 'terser5.6.1_7';
-const optimizeCssId = 'autoprefixer10.2.5_postcss8.2.8_7';
+const optimizeCssId = 'autoprefixer10.2.5_postcss8.2.13_7';
 const parse5Version = '6.0.1';
 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.15.0';
+const vermoji = '🎉';
+const version$3 = '2.16.0';
 const versions = {
   stencil: version$3,
   parse5: parse5Version,
@@ -4442,7 +4469,7 @@ const createSystem = (c) => {
     const hashArray = Array.from(new Uint8Array(arrayBuffer)); // convert buffer to byte array
     let hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
     if (typeof hashLength === 'number') {
-      hashHex = hashHex.substr(0, hashLength);
+      hashHex = hashHex.slice(0, hashLength);
     }
     return hashHex;
   };
@@ -5067,13 +5094,13 @@ const getCssSelectors = (sel) => {
     if (items[i].length === 0)
       continue;
     if (items[i].charAt(0) === '.') {
-      SELECTORS.classNames.push(items[i].substr(1));
+      SELECTORS.classNames.push(items[i].slice(1));
     }
     else if (items[i].charAt(0) === '#') {
-      SELECTORS.ids.push(items[i].substr(1));
+      SELECTORS.ids.push(items[i].slice(1));
     }
     else if (items[i].charAt(0) === '[') {
-      items[i] = items[i].substr(1).split('=')[0].split(']')[0].trim();
+      items[i] = items[i].slice(1).split('=')[0].split(']')[0].trim();
       SELECTORS.attrs.push(items[i].toLowerCase());
     }
     else if (/[a-z]/g.test(items[i].charAt(0))) {
@@ -8662,7 +8689,7 @@ const loadMinifyJsDiagnostics = (sourceText, diagnostics, error) => {
     };
     d.lineNumber = errorLine.lineNumber;
     d.columnNumber = errorLine.errorCharStart;
-    const highlightLine = errorLine.text.substr(d.columnNumber);
+    const highlightLine = errorLine.text.slice(d.columnNumber);
     for (let i = 0; i < highlightLine.length; i++) {
       if (MINIFY_CHAR_BREAK.has(highlightLine.charAt(i))) {
         break;
@@ -9516,7 +9543,7 @@ const standardNormalizeHref = (prerenderConfig, diagnostics, url) => {
         // url should NOT have a trailing slash
         if (href.endsWith('/') && url.pathname !== '/') {
           // this has a trailing slash and it's not the root path
-          href = href.substr(0, href.length - 1);
+          href = href.slice(0, -1);
         }
       }
       return href;
@@ -10999,7 +11026,6 @@ const CSS_PROP_ANNOTATION = `@prop`;
 const safeSelector = (selector) => {
   const placeholders = [];
   let index = 0;
-  let content;
   // Replaces attribute selectors with placeholders.
   // The WS in [attr="va lue"] would otherwise be interpreted as a selector separator.
   selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
@@ -11010,7 +11036,7 @@ const safeSelector = (selector) => {
   });
   // Replaces the expression in `:nth-child(2n + 1)` with a placeholder.
   // WS and "+" would otherwise be interpreted as selector separators.
-  content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
+  const content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
     const replaceBy = `__ph-${index}__`;
     placeholders.push(exp);
     index++;
@@ -12031,25 +12057,33 @@ const isOutputTargetWww = (o) => o.type === WWW;
 const isOutputTargetStats = (o) => o.type === STATS;
 const isOutputTargetDistTypes = (o) => o.type === DIST_TYPES;
 const getComponentsFromModules = (moduleFiles) => sortBy(flatOne(moduleFiles.map((m) => m.cmps)), (c) => c.tagName);
-const ANGULAR = `angular`;
+const ANGULAR = 'angular';
 const COPY = 'copy';
-const CUSTOM = `custom`;
-const DIST = `dist`;
-const DIST_COLLECTION = `dist-collection`;
-const DIST_CUSTOM_ELEMENTS = `dist-custom-elements`;
-const DIST_CUSTOM_ELEMENTS_BUNDLE = `dist-custom-elements-bundle`;
-const DIST_TYPES = `dist-types`;
-const DIST_HYDRATE_SCRIPT = `dist-hydrate-script`;
-const DIST_LAZY = `dist-lazy`;
-const DIST_LAZY_LOADER = `dist-lazy-loader`;
+const CUSTOM = 'custom';
+const DIST = 'dist';
+const DIST_COLLECTION = 'dist-collection';
+const DIST_CUSTOM_ELEMENTS = 'dist-custom-elements';
+const DIST_CUSTOM_ELEMENTS_BUNDLE = 'dist-custom-elements-bundle';
+const DIST_TYPES = 'dist-types';
+const DIST_HYDRATE_SCRIPT = 'dist-hydrate-script';
+const DIST_LAZY = 'dist-lazy';
+const DIST_LAZY_LOADER = 'dist-lazy-loader';
 const DIST_GLOBAL_STYLES = 'dist-global-styles';
 const DOCS_CUSTOM = 'docs-custom';
-const DOCS_JSON = `docs-json`;
-const DOCS_README = `docs-readme`;
-const DOCS_VSCODE = `docs-vscode`;
-const STATS = `stats`;
-const WWW = `www`;
-const VALID_TYPES = [
+const DOCS_JSON = 'docs-json';
+const DOCS_README = 'docs-readme';
+const DOCS_VSCODE = 'docs-vscode';
+const STATS = 'stats';
+const WWW = 'www';
+/**
+ * Valid output targets to specify in a Stencil config.
+ *
+ * Note that there are some output targets (e.g. `DIST_TYPES`) which are
+ * programmatically set as output targets by the compiler when other output
+ * targets (in that case `DIST`) are set, but which are _not_ supported in a
+ * Stencil config. This is enforced in the output target validation code.
+ */
+const VALID_CONFIG_OUTPUT_TARGETS = [
   // DIST
   WWW,
   DIST,
@@ -12069,6 +12103,20 @@ const VALID_TYPES = [
   CUSTOM,
   STATS,
 ];
+/**
+ * Check whether a given output target is a valid one to be set in a Stencil config
+ *
+ * @param targetType the type which we want to check
+ * @returns whether or not the targetType is a valid, configurable output target.
+ */
+function isValidConfigOutputTarget(targetType) {
+  // unfortunately `includes` is typed on `ReadonlyArray<T>` as `(el: T):
+  // boolean` so a `string` cannot be passed to `includes` on a
+  // `ReadonlyArray` 😢 thus we `as any`
+  //
+  // see microsoft/TypeScript#31018 for some discussion of this
+  return VALID_CONFIG_OUTPUT_TARGETS.includes(targetType);
+}
 const GENERATED_DTS$1 = 'components.d.ts';
 
 var concatMap$1 = function (xs, fn) {
@@ -13674,6 +13722,7 @@ const generateBuildResults = (config, compilerCtx, buildCtx) => {
  * @returns CompilerBuildStats or an Object including diagnostics.
  */
 function generateBuildStats(config, buildCtx) {
+  // TODO(STENCIL-461): Investigate making this return only a single type
   const buildResults = buildCtx.buildResults;
   let jsonData;
   try {
@@ -13766,7 +13815,7 @@ function sanitizeBundlesForStats(bundleArray) {
   });
 }
 function getSourceGraph(config, buildCtx) {
-  let sourceGraph = {};
+  const sourceGraph = {};
   sortBy(buildCtx.moduleFiles, (m) => m.sourceFilePath).forEach((moduleFile) => {
     const key = relativePath$1(config, moduleFile.sourceFilePath);
     sourceGraph[key] = moduleFile.localImports.map((localImport) => relativePath$1(config, localImport)).sort();
@@ -14367,7 +14416,7 @@ function toDataAttribute(str) {
       .toLowerCase());
 }
 function dashToPascalCase(str) {
-  str = String(str).substr(5);
+  str = String(str).slice(5);
   return str
     .split('-')
     .map((segment, index) => {
@@ -14571,7 +14620,7 @@ function cssCaseToJsCase(str) {
       .split('-')
       .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
       .join('');
-    str = str.substr(0, 1).toLowerCase() + str.substr(1);
+    str = str.slice(0, 1).toLowerCase() + str.slice(1);
   }
   return str;
 }
@@ -15514,7 +15563,11 @@ class MockNode {
     if (otherNode === this) {
       return true;
     }
-    return this.childNodes.includes(otherNode);
+    const childNodes = Array.from(this.childNodes);
+    if (childNodes.includes(otherNode)) {
+      return true;
+    }
+    return childNodes.some((node) => this.contains.bind(node)(otherNode));
   }
   removeChild(childNode) {
     const index = this.childNodes.indexOf(childNode);
@@ -16924,6 +16977,17 @@ MockElement.prototype.cloneNode = function (deep) {
   return cloned;
 };
 
+let sharedDocument;
+function parseHtmlToDocument(html, ownerDocument = null) {
+  if (ownerDocument == null) {
+    if (sharedDocument == null) {
+      sharedDocument = new MockDocument();
+    }
+    ownerDocument = sharedDocument;
+  }
+  return parseDocumentUtil(ownerDocument, html);
+}
+
 class MockHeaders {
   constructor(init) {
     this._values = [];
@@ -17131,6 +17195,15 @@ class MockResponse {
   }
 }
 
+class MockDOMParser {
+  parseFromString(htmlToParse, mimeType) {
+    if (mimeType !== 'text/html') {
+      console.error('XML parsing not implemented yet, continuing as html');
+    }
+    return parseHtmlToDocument(htmlToParse);
+  }
+}
+
 function addGlobalsToWindowPrototype(mockWinPrototype) {
   GLOBAL_CONSTRUCTORS.forEach(([cstrName, Cstr]) => {
     Object.defineProperty(mockWinPrototype, cstrName, {
@@ -17153,6 +17226,7 @@ const GLOBAL_CONSTRUCTORS = [
   ['MouseEvent', MockMouseEvent],
   ['Request', MockRequest],
   ['Response', MockResponse],
+  ['DOMParser', MockDOMParser],
   ['HTMLAnchorElement', MockAnchorElement],
   ['HTMLBaseElement', MockBaseElement],
   ['HTMLButtonElement', MockButtonElement],
@@ -40751,7 +40825,7 @@ const parseDevModuleUrl = (config, u) => {
     const url = new URL(u, 'https://stenciljs.com');
     let reqPath = basename(url.pathname);
     reqPath = reqPath.substring(0, reqPath.length - 3);
-    let splt = reqPath.split('@');
+    const splt = reqPath.split('@');
     if (splt.length === 2) {
       parsedUrl.nodeModuleId = decodeURIComponent(splt[0]);
       parsedUrl.nodeModuleVersion = decodeURIComponent(splt[1]);
@@ -42636,7 +42710,14 @@ const parse$1 = (input, options) => {
     }
 
     if (token.inner.includes('*') && (rest = remaining()) && /^\.[^\\/.]+$/.test(rest)) {
-    output = token.close = `)${rest})${extglobStar})`;
+    // Any non-magical string (`.ts`) or even nested expression (`.{ts,tsx}`) can follow after the closing parenthesis.
+    // In this case, we need to parse the string and use it in the output of the original pattern.
+    // Suitable patterns: `/!(*.d).ts`, `/!(*.d).{ts,tsx}`, `**/!(*-dbg).@(js)`.
+    //
+    // Disabling the `fastpaths` option due to a problem with parsing strings as `.ts` in the pattern like `**/!(*.d).ts`.
+    const expression = parse$1(rest, { ...options, fastpaths: false }).output;
+
+    output = token.close = `)${expression})${extglobStar})`;
     }
 
     if (token.prev.type === 'bos') {
@@ -54300,31 +54381,55 @@ const getTextOfPropertyName = (propName) => {
   }
   return undefined;
 };
+/**
+ * Generate a series of type references for a given AST node
+ * @param baseNode the AST node to pull type references from
+ * @param sourceFile the source file in which the provided `baseNode` exists
+ * @returns the generated series of type references
+ */
 const getAttributeTypeInfo = (baseNode, sourceFile) => {
   const allReferences = {};
-  getAllTypeReferences(baseNode).forEach((rt) => {
-    allReferences[rt] = getTypeReferenceLocation(rt, sourceFile);
+  getAllTypeReferences(baseNode).forEach((typeName) => {
+    allReferences[typeName] = getTypeReferenceLocation(typeName, sourceFile);
   });
   return allReferences;
 };
+/**
+ * Get the text-based name from a TypeScript `EntityName`, which is an identifier of some form
+ * @param entity a TypeScript `EntityName` to retrieve the name of an entity from
+ * @returns the entity's name
+ */
 const getEntityName = (entity) => {
   if (t.isIdentifier(entity)) {
     return entity.escapedText.toString();
   }
   else {
+    // We have qualified name - e.g. const x: Foo.Bar.Baz;
+    // Recurse until we find the 'base' of the qualified name
     return getEntityName(entity.left);
   }
 };
+/**
+ * Recursively walks the provided AST to collect all TypeScript type references that are found
+ * @param node the node to walk to retrieve type information
+ * @returns the collected type references
+ */
 const getAllTypeReferences = (node) => {
   const referencedTypes = [];
   const visit = (node) => {
+    /**
+     * A type reference node will refer to some type T.
+     * e.g: In `const foo: Bar = {...}` the reference node will contain semantic information about `Bar`.
+     * In TypeScript, types that are also keywords (e.g. `number` in `const foo: number`) are not `TypeReferenceNode`s.
+     */
     if (t.isTypeReferenceNode(node)) {
       referencedTypes.push(getEntityName(node.typeName));
       if (node.typeArguments) {
+        // a type may contain types itself (e.g. generics - Foo<Bar>)
         node.typeArguments
-          .filter((ta) => t.isTypeReferenceNode(ta))
-          .forEach((tr) => {
-          const typeName = tr.typeName;
+          .filter((typeArg) => t.isTypeReferenceNode(typeArg))
+          .forEach((typeRef) => {
+          const typeName = typeRef.typeName;
           if (typeName && typeName.escapedText) {
             referencedTypes.push(typeName.escapedText.toString());
           }
@@ -54345,6 +54450,22 @@ const validateReferences = (diagnostics, references, node) => {
     }
   });
 };
+/**
+ * Determine where a TypeScript type reference originates from. This is accomplished by interrogating the AST node in
+ * which the type's name appears
+ *
+ * A type may originate:
+ * - from the same file where it is used (a type is declared in some file, `foo.ts`, and later used in the same file)
+ * - from another file (I.E. it is imported and should have an import statement somewhere in the file)
+ * - from a global context
+ * - etc.
+ *
+ * The type may be declared using the `type` or `interface` keywords.
+ *
+ * @param typeName the name of the type to find the origination of
+ * @param tsNode the TypeScript AST node being searched for the provided `typeName`
+ * @returns the context stating where the type originates from
+ */
 const getTypeReferenceLocation = (typeName, tsNode) => {
   const sourceFileObj = tsNode.getSourceFile();
   // Loop through all top level imports to find any reference to the type for 'import' reference location
@@ -55352,9 +55473,9 @@ const proxyCustomElement = (compilerCtx, transformOpts) => {
         return tsSourceFile;
       }
       const principalComponent = moduleFile.cmps[0];
-      for (let [stmtIndex, stmt] of tsSourceFile.statements.entries()) {
+      for (const [stmtIndex, stmt] of tsSourceFile.statements.entries()) {
         if (t.isVariableStatement(stmt)) {
-          for (let [declarationIndex, declaration] of stmt.declarationList.declarations.entries()) {
+          for (const [declarationIndex, declaration] of stmt.declarationList.declarations.entries()) {
             if (declaration.name.getText() !== principalComponent.componentClassName) {
               continue;
             }
@@ -56519,6 +56640,20 @@ const strickCheckDocs = (config, docsData) => {
   });
 };
 
+/**
+ * Generate [custom data](https://github.com/microsoft/vscode-custom-data) to augment existing HTML types in VS Code.
+ * This function writes the custom data as a JSON file to disk, which can be used in VS Code to inform the IDE about
+ * custom elements generated by Stencil.
+ *
+ * The JSON generated by this function must conform to the
+ * [HTML custom data schema](https://github.com/microsoft/vscode-html-languageservice/blob/e7ae8a7170df5e721a13cee1b86e293b24eb3b20/docs/customData.schema.json).
+ *
+ * This function generates custom data for HTML only at this time (it does not generate custom data for CSS).
+ *
+ * @param compilerCtx the current compiler context
+ * @param docsData an intermediate representation documentation derived from compiled Stencil components
+ * @param outputTargets the output target(s) the associated with the current build
+ */
 const generateVscodeDocs = async (compilerCtx, docsData, outputTargets) => {
   const vsCodeOutputTargets = outputTargets.filter(isOutputTargetDocsVscode);
   if (vsCodeOutputTargets.length === 0) {
@@ -56526,6 +56661,13 @@ const generateVscodeDocs = async (compilerCtx, docsData, outputTargets) => {
   }
   await Promise.all(vsCodeOutputTargets.map(async (outputTarget) => {
     const json = {
+      /**
+       * the 'version' top-level field is required by the schema. changes to the JSON generated by Stencil must:
+       * - comply with v1.X of the schema _OR_
+       * - increment this field as a part of updating the JSON generation. This should be considered a breaking change
+       *
+       * {@link https://github.com/microsoft/vscode-html-languageservice/blob/e7ae8a7170df5e721a13cee1b86e293b24eb3b20/src/htmlLanguageTypes.ts#L184}
+       */
       version: 1.1,
       tags: docsData.components.map((cmp) => ({
         name: cmp.tag,
@@ -56533,20 +56675,31 @@ const generateVscodeDocs = async (compilerCtx, docsData, outputTargets) => {
           kind: 'markdown',
           value: cmp.docs,
         },
-        attributes: cmp.props.filter((p) => p.attr).map(serializeAttribute),
+        attributes: cmp.props
+          .filter((p) => p.attr !== undefined && p.attr.length > 0)
+          .map(serializeAttribute),
         references: getReferences(cmp, outputTarget.sourceCodeBaseUrl),
       })),
     };
+    // fields in the custom data may have a value of `undefined`. calling `stringify` will remove such fields.
     const jsonContent = JSON.stringify(json, null, 2);
     await compilerCtx.fs.writeFile(outputTarget.file, jsonContent);
   }));
 };
+/**
+ * Generate a 'references' section for a component's documentation.
+ * @param cmp the Stencil component to generate a references section for
+ * @param repoBaseUrl an optional URL, that when provided, will add a reference to the source code for the component
+ * @returns the generated references section, or undefined if no references could be generated
+ */
 const getReferences = (cmp, repoBaseUrl) => {
+  var _a;
+  // collect any `@reference` JSDoc tags on the component
   const references = getNameText('reference', cmp.docsTags).map(([name, url]) => ({ name, url }));
   if (repoBaseUrl) {
     references.push({
       name: 'Source code',
-      url: join(repoBaseUrl, cmp.filePath),
+      url: join(repoBaseUrl, (_a = cmp.filePath) !== null && _a !== void 0 ? _a : ''),
     });
   }
   if (references.length > 0) {
@@ -56554,14 +56707,19 @@ const getReferences = (cmp, repoBaseUrl) => {
   }
   return undefined;
 };
+/**
+ * Serialize a component's class member decorated with `@Prop` to be written to disk
+ * @param prop the intermediate representation of the documentation to serialize
+ * @returns the serialized data
+ */
 const serializeAttribute = (prop) => {
   const attribute = {
     name: prop.attr,
     description: prop.docs,
   };
   const values = prop.values
-    .filter(({ type, value }) => type === 'string' && value !== undefined)
-    .map(({ value }) => ({ name: value }));
+    .filter((jsonDocValue) => jsonDocValue.type === 'string' && jsonDocValue.value !== undefined)
+    .map((jsonDocValue) => ({ name: jsonDocValue.value }));
   if (values.length > 0) {
     attribute.values = values;
   }
@@ -57372,6 +57530,7 @@ const getBundleId = async (config, entryKey, shouldHash, code, sufix) => {
 };
 
 const generateLazyModules = async (config, compilerCtx, buildCtx, outputTargetType, destinations, results, sourceTarget, isBrowserBuild, sufix) => {
+  var _a;
   if (!Array.isArray(destinations) || destinations.length === 0) {
     return [];
   }
@@ -57379,14 +57538,15 @@ const generateLazyModules = async (config, compilerCtx, buildCtx, outputTargetTy
   const rollupResults = results.filter((r) => r.type === 'chunk');
   const entryComponentsResults = rollupResults.filter((rollupResult) => rollupResult.isComponent);
   const chunkResults = rollupResults.filter((rollupResult) => !rollupResult.isComponent && !rollupResult.isEntry);
-  const [bundleModules] = await Promise.all([
-    Promise.all(entryComponentsResults.map((rollupResult) => {
-      return generateLazyEntryModule(config, compilerCtx, buildCtx, rollupResult, outputTargetType, destinations, sourceTarget, shouldMinify, isBrowserBuild, sufix);
-    })),
-    Promise.all(chunkResults.map((rollupResult) => {
-      return writeLazyChunk(config, compilerCtx, buildCtx, rollupResult, outputTargetType, destinations, sourceTarget, shouldMinify, isBrowserBuild);
-    })),
-  ]);
+  const bundleModules = await Promise.all(entryComponentsResults.map((rollupResult) => {
+    return generateLazyEntryModule(config, compilerCtx, buildCtx, rollupResult, outputTargetType, destinations, sourceTarget, shouldMinify, isBrowserBuild, sufix);
+  }));
+  if (!!((_a = config.extras) === null || _a === void 0 ? void 0 : _a.experimentalImportInjection) && !isBrowserBuild) {
+    addStaticImports(rollupResults, bundleModules);
+  }
+  await Promise.all(chunkResults.map((rollupResult) => {
+    return writeLazyChunk(config, compilerCtx, buildCtx, rollupResult, outputTargetType, destinations, sourceTarget, shouldMinify, isBrowserBuild);
+  }));
   const lazyRuntimeData = formatLazyBundlesRuntimeMeta(bundleModules);
   const entryResults = rollupResults.filter((rollupResult) => !rollupResult.isComponent && rollupResult.isEntry);
   await Promise.all(entryResults.map((rollupResult) => {
@@ -57401,6 +57561,74 @@ const generateLazyModules = async (config, compilerCtx, buildCtx, outputTargetTy
   }));
   return bundleModules;
 };
+/**
+ * Add imports for each bundle to Stencil's lazy loader. Some bundlers that are built atop of Rollup strictly impose
+ * the limitations that are laid out in https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations.
+ * This function injects an explicit import statement for each bundle that can be lazily loaded.
+ * @param rollupChunkResults the results of running Rollup across a Stencil project
+ * @param bundleModules lazy-loadable modules that can be resolved at runtime
+ */
+const addStaticImports = (rollupChunkResults, bundleModules) => {
+  rollupChunkResults.filter(isStencilCoreResult).forEach((index) => {
+    const generateCjs = isCjsFormat(index) ? generateCaseClauseCjs : generateCaseClause;
+    index.code = index.code.replace('/*!__STENCIL_STATIC_IMPORT_SWITCH__*/', `
+    if (!hmrVersionId || !BUILD.hotModuleReplacement) {
+      const processMod = importedModule => {
+        cmpModules.set(bundleId, importedModule);
+        return importedModule[exportName];
+      }
+      switch(bundleId) {
+        ${bundleModules.map((mod) => generateCjs(mod.output.bundleId)).join('')}
+      }
+    }`);
+  });
+};
+/**
+ * Determine if a Rollup output chunk contains Stencil runtime code
+ * @param rollupChunkResult the rollup chunk output to test
+ * @returns true if the output chunk contains Stencil runtime code, false otherwise
+ */
+const isStencilCoreResult = (rollupChunkResult) => {
+  return (rollupChunkResult.isCore &&
+    rollupChunkResult.entryKey === 'index' &&
+    (rollupChunkResult.moduleFormat === 'es' ||
+      rollupChunkResult.moduleFormat === 'esm' ||
+      isCjsFormat(rollupChunkResult)));
+};
+/**
+ * Helper function to determine if a Rollup chunk has a commonjs module format
+ * @param rollupChunkResult the Rollup result to test
+ * @returns true if the Rollup chunk has a commonjs module format, false otherwise
+ */
+const isCjsFormat = (rollupChunkResult) => {
+  return rollupChunkResult.moduleFormat === 'cjs' || rollupChunkResult.moduleFormat === 'commonjs';
+};
+/**
+ * Generate a 'case' clause to be used within a `switch` statement. The case clause generated will key-off the provided
+ * bundle ID for a component, and load a file (tied to that ID) at runtime.
+ * @param bundleId the name of the bundle to load
+ * @returns the case clause that will load the component's file at runtime
+ */
+const generateCaseClause = (bundleId) => {
+  return `
+        case '${bundleId}':
+          return import(
+            /* webpackMode: "lazy" */
+            './${bundleId}.entry.js').then(processMod, consoleError);`;
+};
+/**
+ * Generate a 'case' clause to be used within a `switch` statement. The case clause generated will key-off the provided
+ * bundle ID for a component, and load a CommonJS file (tied to that ID) at runtime.
+ * @param bundleId the name of the bundle to load
+ * @returns the case clause that will load the component's file at runtime
+ */
+const generateCaseClauseCjs = (bundleId) => {
+  return `
+        case '${bundleId}':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './${bundleId}.entry.js')); }).then(processMod, consoleError);`;
+};
 const generateLazyEntryModule = async (config, compilerCtx, buildCtx, rollupResult, outputTargetType, destinations, sourceTarget, shouldMinify, isBrowserBuild, sufix) => {
   const entryModule = buildCtx.entryModules.find((entryModule) => entryModule.entryKey === rollupResult.entryKey);
   const shouldHash = config.hashFileNames && isBrowserBuild;
@@ -57429,7 +57657,7 @@ const writeLazyEntry = async (config, compilerCtx, buildCtx, rollupResult, outpu
   if (isBrowserBuild && ['loader'].includes(rollupResult.entryKey)) {
     return;
   }
-  let inputCode = rollupResult.code.replace(`[/*!__STENCIL_LAZY_DATA__*/]`, `${lazyRuntimeData}`);
+  const inputCode = rollupResult.code.replace(`[/*!__STENCIL_LAZY_DATA__*/]`, `${lazyRuntimeData}`);
   const { code, sourceMap } = await convertChunk(config, compilerCtx, buildCtx, sourceTarget, shouldMinify, false, isBrowserBuild, inputCode, rollupResult.map);
   await Promise.all(destinations.map((dst) => {
     const filePath = join(dst, rollupResult.fileName);
@@ -57447,7 +57675,7 @@ const formatLazyBundlesRuntimeMeta = (bundleModules) => {
   return stringifyRuntimeData(lazyBundles);
 };
 const formatLazyRuntimeBundle = (bundleModule) => {
-  let bundleId = bundleModule.output.bundleId;
+  const bundleId = bundleModule.output.bundleId;
   const bundleCmps = bundleModule.cmps.slice().sort(sortBundleComponents);
   return [bundleId, bundleCmps.map((cmp) => formatComponentRuntimeMeta(cmp, true))];
 };
@@ -58867,11 +59095,73 @@ const updateStencilTypesImports = (typesDir, dtsFilePath, dtsContent) => {
   }
   return dtsContent;
 };
+/**
+ * Utility for ensuring that naming collisions do not appear in type declaration files for a component's class members
+ * decorated with @Prop, @Event, and @Method
+ * @param typeReferences all type names used by a component class member
+ * @param typeImportData locally/imported/globally used type names, which may be used to prevent naming collisions
+ * @param sourceFilePath the path to the source file of a component using the type being inspected
+ * @param initialType the name of the type that may be updated
+ * @returns the updated type name, which may be the same as the initial type name provided as an argument to this
+ * function
+ */
+const updateTypeIdentifierNames = (typeReferences, typeImportData, sourceFilePath, initialType) => {
+  let currentTypeName = initialType;
+  // iterate over each of the type references, as there may be >1 reference to inspect
+  for (const typeReference of Object.values(typeReferences)) {
+    const importResolvedFile = getTypeImportPath(typeReference.path, sourceFilePath);
+    if (!typeImportData.hasOwnProperty(importResolvedFile)) {
+      continue;
+    }
+    for (const typesImportDatumElement of typeImportData[importResolvedFile]) {
+      currentTypeName = updateTypeName(currentTypeName, typesImportDatumElement);
+    }
+  }
+  return currentTypeName;
+};
+/**
+ * Determine the path of a given type reference, relative to the path of a source file
+ * @param importResolvedFile the path to the file containing the resolve type. may be absolute or relative
+ * @param sourceFilePath the component source file path to resolve against
+ * @returns the path of the type import
+ */
+const getTypeImportPath = (importResolvedFile, sourceFilePath) => {
+  const isPathRelative = importResolvedFile && importResolvedFile.startsWith('.');
+  if (isPathRelative) {
+    importResolvedFile = resolve$1(dirname(sourceFilePath), importResolvedFile);
+  }
+  return importResolvedFile;
+};
+/**
+ * Determine whether the string representation of a type should be replaced with an alias
+ * @param currentTypeName the current string representation of a type
+ * @param typeAlias a type member and a potential different name associated with the type member
+ * @returns the updated string representation of a type. If the type is not updated, the original type name is returned
+ */
+const updateTypeName = (currentTypeName, typeAlias) => {
+  if (!typeAlias.importName) {
+    return currentTypeName;
+  }
+  // TODO(STENCIL-419): Update this functionality to no longer use a regex
+  // negative lookahead specifying that quotes that designate a string in JavaScript cannot follow some expression
+  const endingStrChar = '(?!("|\'|`))';
+  /**
+   * A regular expression that looks at type names along a [word boundary](https://www.regular-expressions.info/wordboundaries.html).
+   * This is used as the best approximation for replacing type collisions, as this stage of compilation has only
+   * 'flattened' type information in the form of a String.
+   *
+   * This regex should be expected to capture types that are found in generics, unions, intersections, etc., but not
+   * those in string literals. We do not check for a starting quote (" | ' | `) here as some browsers do not support
+   * negative lookbehind. This works "well enough" until STENCIL-419 is completed.
+   */
+  const typeNameRegex = new RegExp(`${typeAlias.localName}\\b${endingStrChar}`, 'g');
+  return currentTypeName.replace(typeNameRegex, typeAlias.importName);
+};
 /**
  * Writes Stencil core typings file to disk for a dist-* output target
  * @param config the Stencil configuration associated with the project being compiled
  * @param compilerCtx the current compiler context
- * @returns
+ * @returns the results of writing one or more type declaration files to disk
  */
 const copyStencilCoreDts = async (config, compilerCtx) => {
   const typesOutputTargets = config.outputTargets.filter(isOutputTargetDistTypes).filter((o) => o.typesDir);
@@ -58905,13 +59195,19 @@ const sortImportNames = (a, b) => {
   return 0;
 };
 
-const generateEventTypes = (cmpEvents) => {
-  return cmpEvents.map((cmpEvent) => {
+/**
+ * Generates the individual event types for all @Event() decorated events in a component
+ * @param cmpMeta component runtime metadata for a single component
+ * @param typeImportData locally/imported/globally used type names, which may be used to prevent naming collisions
+ * @param cmpClassName The pascal cased name of the component class
+ * @returns the generated type metadata
+ */
+const generateEventTypes = (cmpMeta, typeImportData, cmpClassName) => {
+  return cmpMeta.events.map((cmpEvent) => {
     const name = `on${toTitleCase(cmpEvent.name)}`;
-    const type = cmpEvent.complexType.original
-      ? `(event: CustomEvent<${cmpEvent.complexType.original}>) => void`
-      : `CustomEvent`;
-    return {
+    const cmpEventDetailInterface = `${cmpClassName}CustomEvent`;
+    const type = getEventType$1(cmpEvent, cmpEventDetailInterface, typeImportData, cmpMeta.sourceFilePath);
+    const typeInfo = {
       name,
       type,
       optional: false,
@@ -58919,25 +59215,63 @@ const generateEventTypes = (cmpEvents) => {
       internal: cmpEvent.internal,
       jsdoc: getTextDocs(cmpEvent.docs),
     };
+    return typeInfo;
   });
 };
+/**
+ * Determine the correct type name for all type(s) used by a class member annotated with `@Event()`
+ * @param cmpEvent the compiler metadata for a single `@Event()`
+ * @param cmpEventDetailInterface the name of the custom event type to use in the generated type
+ * @param typeImportData locally/imported/globally used type names, which may be used to prevent naming collisions
+ * @param componentSourcePath the path to the component on disk
+ * @returns the type associated with a `@Event()`
+ */
+const getEventType$1 = (cmpEvent, cmpEventDetailInterface, typeImportData, componentSourcePath) => {
+  if (!cmpEvent.complexType.original) {
+    return 'CustomEvent';
+  }
+  const updatedTypeName = updateTypeIdentifierNames(cmpEvent.complexType.references, typeImportData, componentSourcePath, cmpEvent.complexType.original);
+  return `(event: ${cmpEventDetailInterface}<${updatedTypeName}>) => void`;
+};
 
-const generateMethodTypes = (cmpMethods) => {
-  return cmpMethods.map((cmpMethod) => ({
+/**
+ * Generates the individual event types for all @Method() decorated events in a component
+ * @param cmpMeta component runtime metadata for a single component
+ * @param typeImportData locally/imported/globally used type names, which may be used to prevent naming collisions
+ * @returns the generated type metadata
+ */
+const generateMethodTypes = (cmpMeta, typeImportData) => {
+  return cmpMeta.methods.map((cmpMethod) => ({
     name: cmpMethod.name,
-    type: cmpMethod.complexType.signature,
+    type: getType$1(cmpMethod, typeImportData, cmpMeta.sourceFilePath),
     optional: false,
     required: false,
     internal: cmpMethod.internal,
     jsdoc: getTextDocs(cmpMethod.docs),
   }));
 };
+/**
+ * Determine the correct type name for all type(s) used by a class member annotated with `@Method()`
+ * @param cmpMethod the compiler metadata for a single `@Method()`
+ * @param typeImportData locally/imported/globally used type names, which may be used to prevent naming collisions
+ * @param componentSourcePath the path to the component on disk
+ * @returns the type associated with a `@Method()`
+ */
+function getType$1(cmpMethod, typeImportData, componentSourcePath) {
+  return updateTypeIdentifierNames(cmpMethod.complexType.references, typeImportData, componentSourcePath, cmpMethod.complexType.signature);
+}
 
-const generatePropTypes = (cmpMeta) => {
+/**
+ * Generates the individual event types for all @Prop() decorated events in a component
+ * @param cmpMeta component runtime metadata for a single component
+ * @param typeImportData locally/imported/globally used type names, which may be used to prevent naming collisions
+ * @returns the generated type metadata
+ */
+const generatePropTypes = (cmpMeta, typeImportData) => {
   return [
     ...cmpMeta.properties.map((cmpProp) => ({
       name: cmpProp.name,
-      type: cmpProp.complexType.original,
+      type: getType(cmpProp, typeImportData, cmpMeta.sourceFilePath),
       optional: cmpProp.optional,
       required: cmpProp.required,
       internal: cmpProp.internal,
@@ -58953,20 +59287,31 @@ const generatePropTypes = (cmpMeta) => {
     })),
   ];
 };
+/**
+ * Determine the correct type name for all type(s) used by a class member annotated with `@Prop()`
+ * @param cmpProp the compiler metadata for a single `@Prop()`
+ * @param typeImportData locally/imported/globally used type names, which may be used to prevent naming collisions
+ * @param componentSourcePath the path to the component on disk
+ * @returns the type associated with a `@Prop()`
+ */
+function getType(cmpProp, typeImportData, componentSourcePath) {
+  return updateTypeIdentifierNames(cmpProp.complexType.references, typeImportData, componentSourcePath, cmpProp.complexType.original);
+}
 
 /**
  * Generate a string based on the types that are defined within a component
  * @param cmp the metadata for the component that a type definition string is generated for
+ * @param typeImportData locally/imported/globally used type names, which may be used to prevent naming collisions
  * @param areTypesInternal `true` if types being generated are for a project's internal purposes, `false` otherwise
  * @returns the generated types string alongside additional metadata
  */
-const generateComponentTypes = (cmp, areTypesInternal) => {
+const generateComponentTypes = (cmp, typeImportData, areTypesInternal) => {
   const tagName = cmp.tagName.toLowerCase();
   const tagNameAsPascal = dashToPascalCase$1(tagName);
   const htmlElementName = `HTML${tagNameAsPascal}Element`;
-  const propAttributes = generatePropTypes(cmp);
-  const methodAttributes = generateMethodTypes(cmp.methods);
-  const eventAttributes = generateEventTypes(cmp.events);
+  const propAttributes = generatePropTypes(cmp, typeImportData);
+  const methodAttributes = generateMethodTypes(cmp, typeImportData);
+  const eventAttributes = generateEventTypes(cmp, typeImportData, tagNameAsPascal);
   const componentAttributes = attributesToMultiLineString([...propAttributes, ...methodAttributes], false, areTypesInternal);
   const isDep = cmp.isCollectionDependency;
   const jsxAttributes = attributesToMultiLineString([...propAttributes, ...eventAttributes], true, areTypesInternal);
@@ -59010,66 +59355,111 @@ const attributesToMultiLineString = (attributes, jsxAttributes, internal) => {
   return attributesStr !== '' ? `${attributesStr}\n` : '';
 };
 
+/**
+ * Generates the custom event interface for each component that combines the `CustomEvent` interface with
+ * the HTMLElement target. This is used to allow implementers to use strict typings on event handlers.
+ *
+ * The generated interface accepts a generic for the event detail type. This allows implementers to use
+ * custom typings for individual events without Stencil needing to generate an interface for each event.
+ *
+ * @param cmp The component compiler metadata
+ * @returns The generated interface type definition.
+ */
+const generateEventDetailTypes = (cmp) => {
+  const tagName = cmp.tagName.toLowerCase();
+  const tagNameAsPascal = dashToPascalCase$1(tagName);
+  const htmlElementName = `HTML${tagNameAsPascal}Element`;
+  const isDep = cmp.isCollectionDependency;
+  const cmpEventInterface = `${tagNameAsPascal}CustomEvent`;
+  const cmpInterface = [
+    `export interface ${cmpEventInterface}<T> extends CustomEvent<T> {`,
+    `    detail: T;`,
+    `    target: ${htmlElementName};`,
+    `}`,
+  ];
+  return {
+    isDep,
+    tagName,
+    tagNameAsPascal,
+    htmlElementName,
+    component: cmpInterface.join('\n'),
+    jsx: cmpInterface.join('\n'),
+    element: cmpInterface.join('\n'),
+  };
+};
+
 /**
  * Find all referenced types by a component and add them to the `importDataObj` parameter
- * @param importDataObj key/value of type import file, each value is an array of imported types
- * @param allTypes an output parameter containing a map of seen types and the number of times the type has been seen
+ * @param importDataObj an output parameter that contains the imported types seen thus far by the compiler
+ * @param typeCounts a map of seen types and the number of times the type has been seen
  * @param cmp the metadata associated with the component whose types are being inspected
  * @param filePath the path of the component file
  * @returns the updated import data
  */
-const updateReferenceTypeImports = (importDataObj, allTypes, cmp, filePath) => {
-  const updateImportReferences = updateImportReferenceFactory(allTypes, filePath);
+const updateReferenceTypeImports = (importDataObj, typeCounts, cmp, filePath) => {
+  const updateImportReferences = updateImportReferenceFactory(typeCounts, filePath);
   return [...cmp.properties, ...cmp.events, ...cmp.methods]
     .filter((cmpProp) => cmpProp.complexType && cmpProp.complexType.references)
-    .reduce((obj, cmpProp) => {
-    return updateImportReferences(obj, cmpProp.complexType.references);
+    .reduce((typesImportData, cmpProp) => {
+    return updateImportReferences(typesImportData, cmpProp.complexType.references);
   }, importDataObj);
 };
-const updateImportReferenceFactory = (allTypes, filePath) => {
+/**
+ * Factory function to create an `ImportReferenceUpdater` instance
+ * @param typeCounts a key-value store of seen type names and the number of times the type name has been seen
+ * @param filePath the path of the file containing the component whose imports are being inspected
+ * @returns an `ImportReferenceUpdater` instance for updating import references in the provided `filePath`
+ */
+const updateImportReferenceFactory = (typeCounts, filePath) => {
+  /**
+   * Determines the number of times that a type identifier (name) has been used. If an identifier has been used before,
+   * append the number of times the identifier has been seen to its name to avoid future naming collisions
+   * @param name the identifier name to check for previous usages
+   * @returns the identifier name, potentially with an integer appended to its name if it has been seen before.
+   */
   function getIncrementTypeName(name) {
-    const counter = allTypes.get(name);
+    const counter = typeCounts.get(name);
     if (counter === undefined) {
-      allTypes.set(name, 1);
+      typeCounts.set(name, 1);
       return name;
     }
-    allTypes.set(name, counter + 1);
+    typeCounts.set(name, counter + 1);
     return `${name}${counter}`;
   }
-  return (obj, typeReferences) => {
+  return (existingTypeImportData, typeReferences) => {
     Object.keys(typeReferences)
       .map((typeName) => {
       return [typeName, typeReferences[typeName]];
     })
-      .forEach(([typeName, type]) => {
-      let importFileLocation;
+      .forEach(([typeName, typeReference]) => {
+      let importResolvedFile;
       // If global then there is no import statement needed
-      if (type.location === 'global') {
+      if (typeReference.location === 'global') {
         return;
         // If local then import location is the current file
       }
-      else if (type.location === 'local') {
-        importFileLocation = filePath;
+      else if (typeReference.location === 'local') {
+        importResolvedFile = filePath;
       }
-      else if (type.location === 'import') {
-        importFileLocation = type.path;
+      else if (typeReference.location === 'import') {
+        importResolvedFile = typeReference.path;
       }
       // If this is a relative path make it absolute
-      if (importFileLocation.startsWith('.')) {
-        importFileLocation = resolve$1(dirname(filePath), importFileLocation);
+      if (importResolvedFile.startsWith('.')) {
+        importResolvedFile = resolve$1(dirname(filePath), importResolvedFile);
       }
-      obj[importFileLocation] = obj[importFileLocation] || [];
+      existingTypeImportData[importResolvedFile] = existingTypeImportData[importResolvedFile] || [];
       // If this file already has a reference to this type move on
-      if (obj[importFileLocation].find((df) => df.localName === typeName)) {
+      if (existingTypeImportData[importResolvedFile].find((df) => df.localName === typeName)) {
         return;
       }
       const newTypeName = getIncrementTypeName(typeName);
-      obj[importFileLocation].push({
+      existingTypeImportData[importResolvedFile].push({
         localName: typeName,
         importName: newTypeName,
       });
     });
-    return obj;
+    return existingTypeImportData;
   };
 };
 
@@ -59107,7 +59497,7 @@ const generateAppTypes = async (config, compilerCtx, buildCtx, destination) => {
   return hasComponentsDtsChanged;
 };
 /**
- * Generates a `component.d.ts` file's contents, which contains the typings for all components in a Stencil project
+ * Generates a `components.d.ts` file's contents, which contains the typings for all components in a Stencil project
  * @param config the Stencil configuration associated with the project being compiled
  * @param buildCtx the context associated with the current build
  * @param areTypesInternal determines if non-exported type definitions are being generated or not
@@ -59118,12 +59508,26 @@ const generateComponentTypesFile = (config, buildCtx, areTypesInternal) => {
   const c = [];
   const allTypes = new Map();
   const components = buildCtx.components.filter((m) => !m.isCollectionDependency);
+  const componentEventDetailTypes = [];
   const modules = components.map((cmp) => {
+    /**
+     * Generate a key-value store that uses the path to the file where an import is defined as the key, and an object
+     * containing the import's original name and any 'new' name we give it to avoid collisions. We're generating this
+     * data structure for each Stencil component in series, therefore the memory footprint of this entity will likely
+     * grow as more components (with additional types) are processed.
+     */
     typeImportData = updateReferenceTypeImports(typeImportData, allTypes, cmp, cmp.sourceFilePath);
-    return generateComponentTypes(cmp, areTypesInternal);
+    if (cmp.events.length > 0) {
+      /**
+       * Only generate event detail types for components that have events.
+       */
+      componentEventDetailTypes.push(generateEventDetailTypes(cmp));
+    }
+    return generateComponentTypes(cmp, typeImportData, areTypesInternal);
   });
   c.push(COMPONENTS_DTS_HEADER);
   c.push(`import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";`);
+  // write the import statements for our type declaration file
   c.push(...Object.keys(typeImportData).map((filePath) => {
     const typeData = typeImportData[filePath];
     let importFilePath;
@@ -59145,7 +59549,10 @@ const generateComponentTypesFile = (config, buildCtx, areTypesInternal) => {
     })
       .join(`, `)} } from "${importFilePath}";`;
   }));
-  c.push(`export namespace Components {\n${modules.map((m) => `${m.component}`).join('\n')}\n}`);
+  c.push(`export namespace Components {`);
+  c.push(...modules.map((m) => `${m.component}`));
+  c.push(`}`);
+  c.push(...componentEventDetailTypes.map((m) => `${m.component}`));
   c.push(`declare global {`);
   c.push(...modules.map((m) => m.element));
   c.push(`    interface HTMLElementTagNameMap {`);
@@ -62066,7 +62473,7 @@ const validateManifestJsonIcon = async (compilerCtx, buildCtx, manifestFilePath,
     return;
   }
   if (iconSrc.startsWith('/')) {
-    iconSrc = iconSrc.substr(1);
+    iconSrc = iconSrc.slice(1);
   }
   const manifestDir = dirname(manifestFilePath);
   const iconPath = join(manifestDir, iconSrc);
@@ -62176,52 +62583,114 @@ const getTsOptionsToExtend = (config) => {
   return tsOptions;
 };
 
+/**
+ * Create a TypeScript Program ({@link ts.Program}) to perform builds of a Stencil project using the provided
+ * `buildCallback` entity
+ * @param config a Stencil configuration to apply to a full build of a Stencil project
+ * @param buildCallback a callback that invokes the actual transpilation of a Stencil project
+ * @returns a Program that marries the TypeScript and Stencil compilers together.
+ */
 const createTsBuildProgram = async (config, buildCallback) => {
-  let isRunning = false;
-  let timeoutId;
+  let isBuildRunning = false;
+  let currentBuildTimeoutId;
   const optionsToExtend = getTsOptionsToExtend(config);
+  /**
+   * Create a {@link ts.System}. The System is responsible for handling all interactions between the TypeScript compiler
+   * and the host operating system.
+   */
   const tsWatchSys = {
     ...t.sys,
-    watchFile(path, callback) {
-      if (path.endsWith(`/${GENERATED_DTS$1}`)) {
-        return t.sys.watchFile(path, callback);
-      }
+    /**
+     * Watch changes in source files, missing files needed to update the program or config file
+     * @returns a no-op file watcher
+     */
+    watchFile() {
       return {
         close() { },
       };
     },
+    /**
+     * Watch a resolved module's failed lookup locations, config file specs, type roots where auto type reference
+     * directives are added
+     * @returns a no-op file watcher
+     */
     watchDirectory() {
       return {
         close() { },
       };
     },
-    setTimeout(callback, time) {
-      timeoutId = setInterval(() => {
-        if (!isRunning) {
+    /**
+     * Set delayed compilation, so that multiple changes in short span are compiled together
+     * @param callback a callback to invoke upon the completion of compilation. this function is provided to Stencil by
+     * the TypeScript compiler.
+     * @param timeoutMs the minimum time to wait (in milliseconds) before checking if compilation is complete or not
+     * @returns the identifier for the interval that's created
+     */
+    setTimeout(callback, timeoutMs) {
+      currentBuildTimeoutId = setInterval(() => {
+        if (!isBuildRunning) {
           callback();
-          clearInterval(timeoutId);
+          clearInterval(currentBuildTimeoutId);
         }
-      }, config.sys.watchTimeout || time);
-      return timeoutId;
+      }, config.sys.watchTimeout || timeoutMs);
+      return currentBuildTimeoutId;
     },
-    clearTimeout(id) {
-      return clearInterval(id);
+    /**
+     * Reset existing delayed compilation
+     * @param timeoutId the current build timeout identifier to clear
+     */
+    clearTimeout(timeoutId) {
+      clearInterval(timeoutId);
     },
   };
-  config.sys.addDestory(() => tsWatchSys.clearTimeout(timeoutId));
+  config.sys.addDestory(() => tsWatchSys.clearTimeout(currentBuildTimeoutId));
+  /**
+   * Create a {@link ts.WatchCompilerHost}. A CompilerHost allows a {@link ts.Program} to interact with the
+   * {@link ts.System}, by acting as an intermediary:
+   * ```
+   * ┌────────────┐   ┌──────────────────────┐   ┌───────────┐   ┌──────────────────┐
+   * │ ts.Program │<->│ ts.WatchCompilerHost │<->│ ts.System │<->│ Operating System │
+   * └────────────┘   └──────────────────────┘   └───────────┘   └──────────────────┘
+   * ```
+   *
+   * Strictly speaking, the created entity is a subclass of a WatchCompilerHost. The
+   * {@link ts.WatchCompilerHostOfConfigFile} class has the following features that makes it useful to Stencil (even
+   * when Stencil is performing a single, full build):
+   * - it provides the opportunity to extend/alter an existing tsconfig file, allowing users to override specific
+   * configuration options via {@link ts.WatchCompilerHostOfConfigFile#optionsToExtend}, which is a provided as an
+   * argument in the constructor
+   * - it includes the {@link ts.WatchCompilerHost#afterProgramCreate} function in its interface, which Stencil
+   * overrides to invoke a build callback (not as a part of this object's creation)
+   */
   const tsWatchHost = t.createWatchCompilerHost(config.tsconfig, optionsToExtend, tsWatchSys, t.createEmitAndSemanticDiagnosticsBuilderProgram, (reportDiagnostic) => {
     config.logger.debug('watch reportDiagnostic:' + reportDiagnostic.messageText);
   }, (reportWatchStatus) => {
     config.logger.debug(reportWatchStatus.messageText);
   });
+  /**
+   * Override {@link ts.WatchCompilerHost#afterProgramCreate} to invoke the build callback that was provided as an
+   * argument to this function.
+   * @param tsBuilder a {@link ts.BuilderProgram} to manage the {@link ts.Program} in the provided build context
+   */
   tsWatchHost.afterProgramCreate = async (tsBuilder) => {
-    isRunning = true;
+    isBuildRunning = true;
     await buildCallback(tsBuilder);
-    isRunning = false;
+    isBuildRunning = false;
   };
+  /**
+   * Create the initial {@link ts.Program} using Stencil's custom {@link ts.WatchCompilerHostOfConfigFile}. The Program
+   * represents the _TypeScript_ compiler context, that will work in tandem with Stencil's compiler context and build
+   * context
+   */
   return t.createWatchProgram(tsWatchHost);
 };
 
+/**
+ * Build a callable function to perform a full build of a Stencil project
+ * @param config a Stencil configuration to apply to a full build of a Stencil project
+ * @param compilerCtx the current Stencil compiler context
+ * @returns the results of a full build of Stencil
+ */
 const createFullBuild = async (config, compilerCtx) => {
   return new Promise((resolve) => {
     let tsWatchProgram = null;
@@ -62229,6 +62698,10 @@ const createFullBuild = async (config, compilerCtx) => {
       config.logger.debug(`fileUpdate: ${p}`);
       compilerCtx.fs.clearFileCache(p);
     });
+    /**
+     * A function that kicks off the transpilation process for both the TypeScript and Stencil compilers
+     * @param tsBuilder the manager of the {@link ts.Program} state
+     */
     const onBuild = async (tsBuilder) => {
       const buildCtx = new BuildContext(config, compilerCtx);
       buildCtx.isRebuild = false;
@@ -63383,6 +63856,11 @@ const patchFs = (userSys) => {
   Object.assign(fsObj.__sys, userSys);
 };
 
+/**
+ * Generate a Stencil compiler instance
+ * @param config a Stencil configuration to apply to the compiler instance
+ * @returns a new instance of a Stencil compiler
+ */
 const createCompiler = async (config) => {
   // actual compiler code
   // could be in a web worker on the browser
@@ -64063,7 +64541,7 @@ const getComponentPathContent = (componentGraph, outputTarget) => {
 const dependencies = [
 	{
 		name: "@stencil/core",
-		version: "2.15.0",
+		version: "2.16.0",
 		main: "compiler/stencil.js",
 		resources: [
 			"package.json",
@@ -64177,29 +64655,55 @@ const getAbsolutePath = (config, dir) => {
   }
   return dir;
 };
+/**
+ * This function does two things:
+ *
+ * 1. If you pass a `flagName`, it will hoist that `flagName` out of the
+ *  `ConfigFlags` object and onto the 'root' level (if you will) of the
+ *  `config` under the `configName` (`keyof d.Config`) that you pass.
+ * 2. If you _don't_  pass a `flagName` it will just set the value you supply
+ *  on the config.
+ *
+ * @param config the config that we want to update
+ * @param configName the key we're setting on the config
+ * @param flagName either the name of a ConfigFlag prop we want to hoist up or null
+ * @param defaultValue the default value we should set!
+ */
 const setBooleanConfig = (config, configName, flagName, defaultValue) => {
+  var _a;
   if (flagName) {
-    if (typeof config.flags[flagName] === 'boolean') {
-      config[configName] = config.flags[flagName];
+    const flagValue = (_a = config.flags) === null || _a === void 0 ? void 0 : _a[flagName];
+    if (isBoolean$1(flagValue)) {
+      config[configName] = flagValue;
     }
   }
   const userConfigName = getUserConfigName(config, configName);
   if (typeof config[userConfigName] === 'function') {
     config[userConfigName] = !!config[userConfigName]();
   }
-  if (typeof config[userConfigName] === 'boolean') {
+  if (isBoolean$1(config[userConfigName])) {
     config[configName] = config[userConfigName];
   }
   else {
     config[configName] = defaultValue;
   }
 };
+/**
+ * Find any possibly mis-capitalized configuration names on the config, logging
+ * and warning if one is found.
+ *
+ * @param config the user-supplied config that we're dealing with
+ * @param correctConfigName the configuration name that we're checking for right now
+ * @returns a string container a mis-capitalized config name found on the
+ * config object, if any.
+ */
 const getUserConfigName = (config, correctConfigName) => {
+  var _a;
   const userConfigNames = Object.keys(config);
   for (const userConfigName of userConfigNames) {
     if (userConfigName.toLowerCase() === correctConfigName.toLowerCase()) {
       if (userConfigName !== correctConfigName) {
-        config.logger.warn(`config "${userConfigName}" should be "${correctConfigName}"`);
+        (_a = config.logger) === null || _a === void 0 ? void 0 : _a.warn(`config "${userConfigName}" should be "${correctConfigName}"`);
         return userConfigName;
       }
       break;
@@ -64209,19 +64713,20 @@ const getUserConfigName = (config, correctConfigName) => {
 };
 
 const validateDevServer = (config, diagnostics) => {
-  var _a;
+  var _a, _b, _c, _d, _e, _f, _g;
   if ((config.devServer === null || config.devServer) === false) {
-    return null;
+    return undefined;
   }
-  const flags = config.flags;
+  const flags = (_a = config.flags) !== null && _a !== void 0 ? _a : {};
   const devServer = { ...config.devServer };
-  if (isString$1(flags.address)) {
+  if (flags.address && isString$1(flags.address)) {
     devServer.address = flags.address;
   }
   else if (!isString$1(devServer.address)) {
     devServer.address = '0.0.0.0';
   }
-  let addressProtocol;
+  // default to http for localdev
+  let addressProtocol = 'http';
   if (devServer.address.toLowerCase().startsWith('http://')) {
     devServer.address = devServer.address.substring(7);
     addressProtocol = 'http';
@@ -64231,8 +64736,13 @@ const validateDevServer = (config, diagnostics) => {
     addressProtocol = 'https';
   }
   devServer.address = devServer.address.split('/')[0];
-  let addressPort;
+  // split on `:` to get the domain and the (possibly present) port
+  // separately. we've already sliced off the protocol (if present) above
+  // so we can safely split on `:` here.
   const addressSplit = devServer.address.split(':');
+  const isLocalhost = addressSplit[0] === 'localhost' || !isNaN(addressSplit[0].split('.')[0]);
+  // if localhost we use 3333 as a default port
+  let addressPort = isLocalhost ? 3333 : undefined;
   if (addressSplit.length > 1) {
     if (!isNaN(addressSplit[1])) {
       devServer.address = addressSplit[0];
@@ -64246,12 +64756,6 @@ const validateDevServer = (config, diagnostics) => {
     if (isNumber$1(addressPort)) {
       devServer.port = addressPort;
     }
-    else if (devServer.address === 'localhost' || !isNaN(devServer.address.split('.')[0])) {
-      devServer.port = 3333;
-    }
-    else {
-      devServer.port = null;
-    }
   }
   if (devServer.reloadStrategy === undefined) {
     devServer.reloadStrategy = 'hmr';
@@ -64271,14 +64775,14 @@ const validateDevServer = (config, diagnostics) => {
   if (!isBoolean$1(devServer.websocket)) {
     devServer.websocket = true;
   }
-  if ((_a = config === null || config === void 0 ? void 0 : config.flags) === null || _a === void 0 ? void 0 : _a.ssr) {
+  if ((_b = config === null || config === void 0 ? void 0 : config.flags) === null || _b === void 0 ? void 0 : _b.ssr) {
     devServer.ssr = true;
   }
   else {
     devServer.ssr = !!devServer.ssr;
   }
   if (devServer.ssr) {
-    const wwwOutput = config.outputTargets.find(isOutputTargetWww);
+    const wwwOutput = ((_c = config.outputTargets) !== null && _c !== void 0 ? _c : []).find(isOutputTargetWww);
     devServer.prerenderConfig = wwwOutput === null || wwwOutput === void 0 ? void 0 : wwwOutput.prerenderConfig;
   }
   if (isString$1(config.srcIndexHtml)) {
@@ -64302,16 +64806,17 @@ const validateDevServer = (config, diagnostics) => {
   else if (flags.prerender && !config.watch) {
     devServer.openBrowser = false;
   }
-  let serveDir = null;
-  let basePath = null;
-  const wwwOutputTarget = config.outputTargets.find(isOutputTargetWww);
+  let serveDir;
+  let basePath;
+  const wwwOutputTarget = ((_d = config.outputTargets) !== null && _d !== void 0 ? _d : []).find(isOutputTargetWww);
   if (wwwOutputTarget) {
-    const baseUrl = new URL(wwwOutputTarget.baseUrl, 'http://config.stenciljs.com');
+    const baseUrl = new URL((_e = wwwOutputTarget.baseUrl) !== null && _e !== void 0 ? _e : '', 'http://config.stenciljs.com');
     basePath = baseUrl.pathname;
-    serveDir = wwwOutputTarget.appDir;
+    serveDir = (_f = wwwOutputTarget.appDir) !== null && _f !== void 0 ? _f : '';
   }
   else {
-    serveDir = config.rootDir;
+    basePath = '';
+    serveDir = (_g = config.rootDir) !== null && _g !== void 0 ? _g : '';
   }
   if (!isString$1(basePath) || basePath.trim() === '') {
     basePath = `/`;
@@ -64393,7 +64898,8 @@ const validateNamespace = (c, diagnostics) => {
   }
 };
 const validateDistNamespace = (config, diagnostics) => {
-  const hasDist = config.outputTargets.some(isOutputTargetDist);
+  var _a;
+  const hasDist = ((_a = config.outputTargets) !== null && _a !== void 0 ? _a : []).some(isOutputTargetDist);
   if (hasDist) {
     if (!isString$1(config.namespace) || config.namespace.toLowerCase() === 'app') {
       const err = buildError(diagnostics);
@@ -64403,10 +64909,25 @@ const validateDistNamespace = (config, diagnostics) => {
 };
 const DEFAULT_NAMESPACE = 'App';
 
+/**
+ * Check the provided `.hydratedFlag` prop and return a properly-validated value.
+ *
+ * @param config the configuration we're examining
+ * @returns a suitable value for the hydratedFlag property
+ */
 const validateHydrated = (config) => {
+  /**
+   * If `config.hydratedFlag` is set to `null` that is an explicit signal that we
+   * should _not_ create a default configuration when validating and should instead
+   * just return `undefined`.
+   *
+   * See {@link HydratedFlag} for more details.
+   */
   if (config.hydratedFlag === null || config.hydratedFlag === false) {
-    return null;
+    return undefined;
   }
+  // Here we start building up a default config since `.hydratedFlag` wasn't set to
+  // `null` on the provided config.
   const hydratedFlag = { ...config.hydratedFlag };
   if (!isString$1(hydratedFlag.name) || hydratedFlag.property === '') {
     hydratedFlag.name = `hydrated`;
@@ -64520,9 +65041,19 @@ const validateCustomOutput = (config, diagnostics, userOutputs) => {
   });
 };
 
+/**
+ * Validate that the "dist" output targets are valid and ready to go.
+ *
+ * This function will also add in additional output targets to its output, based on the input supplied.
+ *
+ * @param config the compiler config, what else?
+ * @param userOutputs a user-supplied list of output targets.
+ * @returns a list of OutputTargets which have been validated for us.
+ */
 const validateDist = (config, userOutputs) => {
   const distOutputTargets = userOutputs.filter(isOutputTargetDist);
   return distOutputTargets.reduce((outputs, o) => {
+    var _a;
     const distOutputTarget = validateOutputTargetDist(config, o);
     outputs.push(distOutputTarget);
     const namespace = config.fsNamespace || 'app';
@@ -64542,7 +65073,7 @@ const validateDist = (config, userOutputs) => {
       type: COPY,
       dir: lazyDir,
       copyAssets: 'dist',
-      copy: [...distOutputTarget.copy],
+      copy: ((_a = distOutputTarget.copy) !== null && _a !== void 0 ? _a : []).concat(),
     });
     outputs.push({
       type: DIST_GLOBAL_STYLES,
@@ -64552,7 +65083,6 @@ const validateDist = (config, userOutputs) => {
       type: DIST_TYPES,
       dir: distOutputTarget.dir,
       typesDir: distOutputTarget.typesDir,
-      empty: distOutputTarget.empty,
     });
     if (config.buildDist) {
       if (distOutputTarget.collectionDir) {
@@ -64597,39 +65127,44 @@ const validateDist = (config, userOutputs) => {
     return outputs;
   }, []);
 };
+/**
+ * Validate that an OutputTargetDist object has what it needs to do it's job.
+ * To enforce this, we have this function return
+ * `Required<d.OutputTargetDist>`, giving us a compile-time check that all
+ * properties are defined (with either user-supplied or default values).
+ *
+ * @param config the current config
+ * @param o the OutputTargetDist object we want to validate
+ * @returns `Required<d.OutputTargetDist>`, i.e. `d.OutputTargetDist` with all
+ * optional properties rendered un-optional.
+ */
 const validateOutputTargetDist = (config, o) => {
+  var _a;
+  // we need to create an object with a bunch of default values here so that
+  // the typescript compiler can infer their types correctly
   const outputTarget = {
     ...o,
     dir: getAbsolutePath(config, o.dir || DEFAULT_DIR),
+    buildDir: isString$1(o.buildDir) ? o.buildDir : DEFAULT_BUILD_DIR,
+    collectionDir: o.collectionDir !== undefined ? o.collectionDir : DEFAULT_COLLECTION_DIR,
+    typesDir: o.typesDir || DEFAULT_TYPES_DIR,
+    esmLoaderPath: o.esmLoaderPath || DEFAULT_ESM_LOADER_DIR,
+    copy: validateCopy((_a = o.copy) !== null && _a !== void 0 ? _a : [], []),
+    polyfills: isBoolean$1(o.polyfills) ? o.polyfills : undefined,
+    empty: isBoolean$1(o.empty) ? o.empty : true,
   };
-  if (!isString$1(outputTarget.buildDir)) {
-    outputTarget.buildDir = DEFAULT_BUILD_DIR;
-  }
   if (!isAbsolute$1(outputTarget.buildDir)) {
     outputTarget.buildDir = join(outputTarget.dir, outputTarget.buildDir);
   }
-  if (outputTarget.collectionDir === undefined) {
-    outputTarget.collectionDir = DEFAULT_COLLECTION_DIR;
-  }
   if (outputTarget.collectionDir && !isAbsolute$1(outputTarget.collectionDir)) {
     outputTarget.collectionDir = join(outputTarget.dir, outputTarget.collectionDir);
   }
-  if (!outputTarget.esmLoaderPath) {
-    outputTarget.esmLoaderPath = DEFAULT_ESM_LOADER_DIR;
-  }
   if (!isAbsolute$1(outputTarget.esmLoaderPath)) {
     outputTarget.esmLoaderPath = resolve$1(outputTarget.dir, outputTarget.esmLoaderPath);
   }
-  if (!outputTarget.typesDir) {
-    outputTarget.typesDir = DEFAULT_TYPES_DIR;
-  }
   if (!isAbsolute$1(outputTarget.typesDir)) {
     outputTarget.typesDir = join(outputTarget.dir, outputTarget.typesDir);
   }
-  if (!isBoolean$1(outputTarget.empty)) {
-    outputTarget.empty = true;
-  }
-  outputTarget.copy = validateCopy(outputTarget.copy, []);
   return outputTarget;
 };
 const DEFAULT_DIR = 'dist';
@@ -65029,9 +65564,9 @@ const validateCustomElementBundle = (config, userOutputs) => {
 const validateOutputTargets = (config, diagnostics) => {
   const userOutputs = (config.outputTargets || []).slice();
   userOutputs.forEach((outputTarget) => {
-    if (!VALID_TYPES.includes(outputTarget.type)) {
+    if (!isValidConfigOutputTarget(outputTarget.type)) {
       const err = buildError(diagnostics);
-      err.messageText = `Invalid outputTarget type "${outputTarget.type}". Valid outputTarget types include: ${VALID_TYPES.map((t) => `"${t}"`).join(', ')}`;
+      err.messageText = `Invalid outputTarget type "${outputTarget.type}". Valid outputTarget types include: ${VALID_CONFIG_OUTPUT_TARGETS.map((t) => `"${t}"`).join(', ')}`;
     }
     else if (outputTarget.type === DIST_CUSTOM_ELEMENTS_BUNDLE) {
       // TODO(STENCIL-260): Remove this check when the 'dist-custom-elements-bundle' is removed
@@ -65167,6 +65702,7 @@ const DEFAULT_ROLLUP_CONFIG = {
 };
 
 const validateTesting = (config, diagnostics) => {
+  var _a;
   const testing = (config.testing = Object.assign({}, config.testing || {}));
   if (!config.flags || (!config.flags.e2e && !config.flags.spec)) {
     return;
@@ -65221,10 +65757,11 @@ const validateTesting = (config, diagnostics) => {
     testing.testPathIgnorePatterns = DEFAULT_IGNORE_PATTERNS.map((ignorePattern) => {
       return join(testing.rootDir, ignorePattern);
     });
-    config.outputTargets
+    ((_a = config.outputTargets) !== null && _a !== void 0 ? _a : [])
       .filter((o) => (isOutputTargetDist(o) || isOutputTargetWww(o)) && o.dir)
       .forEach((outputTarget) => {
-      testing.testPathIgnorePatterns.push(outputTarget.dir);
+      var _a;
+      (_a = testing.testPathIgnorePatterns) === null || _a === void 0 ? void 0 : _a.push(outputTarget.dir);
     });
   }
   if (typeof testing.preset !== 'string') {
@@ -65341,7 +65878,15 @@ const validateWorkers = (config) => {
   }
 };
 
-const validateConfig = (userConfig) => {
+/**
+ * Validate a Config object, ensuring that all its field are present and
+ * consistent with our expectations. This function transforms an
+ * `UnvalidatedConfig` to a `Config`.
+ *
+ * @param userConfig an unvalidated config that we've gotten from a user
+ * @returns an object with config and diagnostics props
+ */
+const validateConfig = (userConfig = {}) => {
   const config = Object.assign({}, userConfig || {}); // not positive it's json safe
   const diagnostics = [];
   // copy flags (we know it'll be json safe)
@@ -65374,7 +65919,7 @@ const validateConfig = (userConfig) => {
   setBooleanConfig(config, 'sourceMap', null, typeof config.sourceMap === 'undefined' ? false : config.sourceMap);
   setBooleanConfig(config, 'watch', 'watch', false);
   setBooleanConfig(config, 'buildDocs', 'docs', !config.devMode);
-  setBooleanConfig(config, 'buildDist', 'esm', !config.devMode || config.buildEs5);
+  setBooleanConfig(config, 'buildDist', null, !config.devMode || config.buildEs5);
   setBooleanConfig(config, 'profile', 'profile', config.devMode);
   setBooleanConfig(config, 'writeLog', 'log', false);
   setBooleanConfig(config, 'buildAppCore', null, true);