@stencil/core 2.15.1 → 2.15.2

package/compiler/stencil.js

@@ -1,5 +1,5 @@
 /*!
- Stencil Compiler v2.15.1 | MIT Licensed | https://stenciljs.com
+ Stencil Compiler v2.15.2 | MIT Licensed | https://stenciljs.com
  */
 (function(exports) {
 'use strict';
@@ -3974,16 +3974,16 @@ const createCustomResolverAsync = (sys, inMemoryFs, exts) => {
   };
 };
 
-const buildId = '20220418164701';
+const buildId = '20220509165949';
 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.1';
+const vermoji = '🎢';
+const version$3 = '2.15.2';
 const versions = {
   stencil: version$3,
   parse5: parse5Version,
@@ -58929,6 +58929,68 @@ 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 (let typeReference of Object.values(typeReferences)) {
+    const importResolvedFile = getTypeImportPath(typeReference.path, sourceFilePath);
+    if (!typeImportData.hasOwnProperty(importResolvedFile)) {
+      continue;
+    }
+    for (let 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
@@ -58970,14 +59032,13 @@ const sortImportNames = (a, b) => {
 /**
  * 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
  * @returns the generated type metadata
  */
-const generateEventTypes = (cmpMeta) => {
+const generateEventTypes = (cmpMeta, typeImportData) => {
   return cmpMeta.events.map((cmpEvent) => {
     const name = `on${toTitleCase(cmpEvent.name)}`;
-    const type = cmpEvent.complexType.original
-      ? `(event: CustomEvent<${cmpEvent.complexType.original}>) => void`
-      : `CustomEvent`;
+    const type = getEventType$1(cmpEvent, typeImportData, cmpMeta.sourceFilePath);
     return {
       name,
       type,
@@ -58988,33 +59049,59 @@ const generateEventTypes = (cmpMeta) => {
     };
   });
 };
+/**
+ * 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 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, typeImportData, componentSourcePath) => {
+  if (!cmpEvent.complexType.original) {
+    return 'CustomEvent';
+  }
+  const updatedTypeName = updateTypeIdentifierNames(cmpEvent.complexType.references, typeImportData, componentSourcePath, cmpEvent.complexType.original);
+  return `(event: CustomEvent<${updatedTypeName}>) => void`;
+};
 
 /**
  * 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) => {
+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);
+}
 
 /**
  * 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) => {
+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,
@@ -59030,20 +59117,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);
-  const eventAttributes = generateEventTypes(cmp);
+  const propAttributes = generatePropTypes(cmp, typeImportData);
+  const methodAttributes = generateMethodTypes(cmp, typeImportData);
+  const eventAttributes = generateEventTypes(cmp, typeImportData);
   const componentAttributes = attributesToMultiLineString([...propAttributes, ...methodAttributes], false, areTypesInternal);
   const isDep = cmp.isCollectionDependency;
   const jsxAttributes = attributesToMultiLineString([...propAttributes, ...eventAttributes], true, areTypesInternal);
@@ -59089,64 +59187,76 @@ const attributesToMultiLineString = (attributes, jsxAttributes, internal) => {
 
 /**
  * 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;
   };
 };
 
@@ -59196,11 +59306,18 @@ const generateComponentTypesFile = (config, buildCtx, areTypesInternal) => {
   const allTypes = new Map();
   const components = buildCtx.components.filter((m) => !m.isCollectionDependency);
   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);
+    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;
@@ -64140,7 +64257,7 @@ const getComponentPathContent = (componentGraph, outputTarget) => {
 const dependencies = [
 	{
 		name: "@stencil/core",
-		version: "2.15.1",
+		version: "2.15.2",
 		main: "compiler/stencil.js",
 		resources: [
 			"package.json",
@@ -64597,9 +64714,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';
@@ -64619,7 +64746,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,
@@ -64629,7 +64756,6 @@ const validateDist = (config, userOutputs) => {
       type: DIST_TYPES,
       dir: distOutputTarget.dir,
       typesDir: distOutputTarget.typesDir,
-      empty: distOutputTarget.empty,
     });
     if (config.buildDist) {
       if (distOutputTarget.collectionDir) {
@@ -64674,39 +64800,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';