@stencil/core 2.14.0 → 2.14.1

package/cli/index.cjs

@@ -1,5 +1,5 @@
 /*!
- Stencil CLI (CommonJS) v2.14.0 | MIT Licensed | https://stenciljs.com
+ Stencil CLI (CommonJS) v2.14.1 | MIT Licensed | https://stenciljs.com
  */
 'use strict';
 
@@ -513,7 +513,7 @@ const getNpmConfigEnvArgs = (sys) => {
 const dependencies = [
 	{
 		name: "@stencil/core",
-		version: "2.14.0",
+		version: "2.14.1",
 		main: "compiler/stencil.js",
 		resources: [
 			"package.json",

package/cli/index.js

@@ -1,5 +1,5 @@
 /*!
- Stencil CLI v2.14.0 | MIT Licensed | https://stenciljs.com
+ Stencil CLI v2.14.1 | MIT Licensed | https://stenciljs.com
  */
 const toLowerCase = (str) => str.toLowerCase();
 const dashToPascalCase = (str) => toLowerCase(str)
@@ -489,7 +489,7 @@ const getNpmConfigEnvArgs = (sys) => {
 const dependencies = [
 	{
 		name: "@stencil/core",
-		version: "2.14.0",
+		version: "2.14.1",
 		main: "compiler/stencil.js",
 		resources: [
 			"package.json",

package/cli/package.json

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

package/compiler/package.json

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

package/compiler/stencil.js

@@ -1,5 +1,5 @@
 /*!
- Stencil Compiler v2.14.0 | MIT Licensed | https://stenciljs.com
+ Stencil Compiler v2.14.1 | MIT Licensed | https://stenciljs.com
  */
 (function(exports) {
 'use strict';
@@ -3967,7 +3967,7 @@ const createCustomResolverAsync = (sys, inMemoryFs, exts) => {
   };
 };
 
-const buildId = '20220214175725';
+const buildId = '20220307172718';
 const minfyJsId = 'terser5.6.1_7';
 const optimizeCssId = 'autoprefixer10.2.5_postcss8.2.8_7';
 const parse5Version = '6.0.1';
@@ -3975,8 +3975,8 @@ const rollupVersion = '2.42.3';
 const sizzleVersion = '2.42.3';
 const terserVersion = '5.6.1';
 const typescriptVersion = '4.5.4';
-const vermoji = '💫';
-const version$3 = '2.14.0';
+const vermoji = '🐦';
+const version$3 = '2.14.1';
 const versions = {
   stencil: version$3,
   parse5: parse5Version,
@@ -40941,9 +40941,24 @@ const createComponentExport = (cmp) => {
   return `export { ${originalClassName} as ${underscoredClassName} } from '${filePath}';`;
 };
 
+/**
+ * Rollup plugin that aids in resolving the entry points (1 or more files) for a Stencil project. For example, a project
+ * using the `dist-custom-elements` output target may have a single 'entry point' for each file containing a component.
+ * Each of those files will be independently resolved and loaded by this plugin for further processing by Rollup later
+ * in the bundling process.
+ * @param entries the Stencil project files to process. It should be noted that the keys in this object may not
+ * necessarily be an absolute or relative path to a file, but may be a Rollup Virtual Module (which begin with \0).
+ * @returns the rollup plugin that loads and process a Stencil project's entry points
+ */
 const loaderPlugin = (entries = {}) => {
   return {
     name: 'stencilLoaderPlugin',
+    /**
+     * A rollup build hook for resolving the imports of individual Stencil project files. This hook only resolves
+     * modules that are contained in the plugin's `entries` argument. [Source](https://rollupjs.org/guide/en/#resolveid)
+     * @param id the importee to resolve
+     * @returns a string that resolves an import to some id, null otherwise
+     */
     resolveId(id) {
       if (id in entries) {
         return {
@@ -40952,6 +40967,12 @@ const loaderPlugin = (entries = {}) => {
       }
       return null;
     },
+    /**
+     * A rollup build hook for loading individual Stencil project files [Source](https://rollupjs.org/guide/en/#load)
+     * @param id the path of the module to load. It should be noted that the keys in this object may not necessarily
+     * be an absolute or relative path to a file, but may be a Rollup Virtual Module.
+     * @returns the module matched, null otherwise
+     */
     load(id) {
       if (id in entries) {
         return entries[id];
@@ -41569,9 +41590,22 @@ const getTsResolveExtension = (p) => {
 };
 const shouldPatchRemoteTypeScript = (compilerExe) => !IS_NODE_ENV && isRemoteUrl(compilerExe);
 
+/**
+ * Rollup plugin that aids in resolving the TypeScript files and performing the transpilation step.
+ * @param compilerCtx the current compiler context
+ * @param bundleOpts Rollup bundling options to apply during TypeScript compilation
+ * @param config the Stencil configuration for the project
+ * @returns the rollup plugin for handling TypeScript files.
+ */
 const typescriptPlugin = (compilerCtx, bundleOpts, config) => {
   return {
     name: `${bundleOpts.id}TypescriptPlugin`,
+    /**
+     * A rollup build hook for loading TypeScript files and their associated source maps (if they exist).
+     * [Source](https://rollupjs.org/guide/en/#load)
+     * @param id the path of the file to load
+     * @returns the module matched (with its sourcemap if it exists), null otherwise
+     */
     load(id) {
       if (isAbsolute$1(id)) {
         const fsFilePath = normalizeFsPath(id);
@@ -41587,6 +41621,13 @@ const typescriptPlugin = (compilerCtx, bundleOpts, config) => {
       }
       return null;
     },
+    /**
+     * Performs TypeScript compilation/transpilation, including applying any transformations against the Abstract Syntax
+     * Tree (AST) specific to stencil
+     * @param _code the code to modify, unused
+     * @param id module's identifier
+     * @returns the transpiled code, with its associated sourcemap. null otherwise
+     */
     transform(_code, id) {
       if (isAbsolute$1(id)) {
         const fsFilePath = normalizeFsPath(id);
@@ -53750,6 +53791,14 @@ const bundleOutput = async (config, compilerCtx, buildCtx, bundleOpts) => {
   }
   return undefined;
 };
+/**
+ * Build the rollup options that will be used to transpile, minify, and otherwise transform a Stencil project
+ * @param config the Stencil configuration for the project
+ * @param compilerCtx the current compiler context
+ * @param buildCtx a context object containing information about the current build
+ * @param bundleOpts Rollup bundling options to apply to the base configuration setup by this function
+ * @returns the rollup options to be used
+ */
 const getRollupOptions = (config, compilerCtx, buildCtx, bundleOpts) => {
   var _a;
   const customResolveOptions = createCustomResolverAsync(config.sys, compilerCtx.fs, [
@@ -54554,11 +54603,46 @@ const addModuleMetadataProxies = (tsSourceFile, moduleFile) => {
 const addComponentMetadataProxy = (compilerMeta) => {
   return t.createStatement(createComponentMetadataProxy(compilerMeta));
 };
+/**
+ * Create a call expression for wrapping a component in a proxy. This call expression takes a form:
+ * ```ts
+ * PROXY_CUSTOM_ELEMENT(ComponentClassName, Metadata);
+ * ```
+ * where
+ * - `PROXY_CUSTOM_ELEMENT` is a Stencil internal identifier that will be replaced with the name of the actual function
+ * name at compile name
+ * - `ComponentClassName` is the name Stencil component's class
+ * - `Metadata` is the compiler metadata associated with the Stencil component
+ *
+ * @param compilerMeta compiler metadata associated with the component to be wrapped in a proxy
+ * @returns the generated call expression
+ */
 const createComponentMetadataProxy = (compilerMeta) => {
   const compactMeta = formatComponentRuntimeMeta(compilerMeta, true);
-  const literalCmpClassName = t.createIdentifier(compilerMeta.componentClassName);
+  const literalCmpClassName = t.factory.createIdentifier(compilerMeta.componentClassName);
+  const literalMeta = convertValueToLiteral(compactMeta);
+  return t.factory.createCallExpression(t.factory.createIdentifier(PROXY_CUSTOM_ELEMENT), [], [literalCmpClassName, literalMeta]);
+};
+/**
+ * Create a call expression for wrapping a component represented as an anonymous class in a proxy. This call expression
+ * takes a form:
+ * ```ts
+ * PROXY_CUSTOM_ELEMENT(Clazz, Metadata);
+ * ```
+ * where
+ * - `PROXY_CUSTOM_ELEMENT` is a Stencil internal identifier that will be replaced with the name of the actual function
+ * name at compile name
+ * - `Clazz` is an anonymous class to be proxied
+ * - `Metadata` is the compiler metadata associated with the Stencil component
+ *
+ * @param compilerMeta compiler metadata associated with the component to be wrapped in a proxy
+ * @param clazz the anonymous class to proxy
+ * @returns the generated call expression
+ */
+const createAnonymousClassMetadataProxy = (compilerMeta, clazz) => {
+  const compactMeta = formatComponentRuntimeMeta(compilerMeta, true);
   const literalMeta = convertValueToLiteral(compactMeta);
-  return t.createCall(t.createIdentifier(PROXY_CUSTOM_ELEMENT), [], [literalCmpClassName, literalMeta]);
+  return t.factory.createCallExpression(t.factory.createIdentifier(PROXY_CUSTOM_ELEMENT), [], [clazz, literalMeta]);
 };
 
 const defineCustomElement = (tsSourceFile, moduleFile, transformOpts) => {
@@ -54833,7 +54917,7 @@ const createConstClass = (transformOpts, classNode, heritageClauses, members) =>
   }
   return t.createVariableStatement(constModifiers, t.createVariableDeclarationList([
     t.createVariableDeclaration(className, undefined, t.createClassExpression(classModifiers, undefined, classNode.typeParameters, heritageClauses, members)),
-  ], t.NodeFlags.Let));
+  ], t.NodeFlags.Const));
 };
 
 const addCreateEvents = (moduleFile, cmp) => {
@@ -55114,16 +55198,9 @@ const addDefineCustomElementFunctions = (compilerCtx, components, outputTarget)
       const newStatements = [];
       const caseStatements = [];
       const tagNames = [];
-      addCoreRuntimeApi(moduleFile, RUNTIME_APIS.proxyCustomElement);
       if (moduleFile.cmps.length) {
         const principalComponent = moduleFile.cmps[0];
         tagNames.push(principalComponent.tagName);
-        // wraps the initial component class in a `proxyCustomElement` wrapper.
-        // This is what will be exported and called from the `defineCustomElement` call.
-        const proxyDefinition = createComponentMetadataProxy(principalComponent);
-        const metaExpression = t.factory.createExpressionStatement(t.factory.createBinaryExpression(t.factory.createIdentifier(principalComponent.componentClassName), t.factory.createToken(t.SyntaxKind.EqualsToken), proxyDefinition));
-        newStatements.push(metaExpression);
-        t.addSyntheticLeadingComment(proxyDefinition, t.SyntaxKind.MultiLineCommentTrivia, '@__PURE__', false);
         // define the current component - `customElements.define(tagName, MyProxiedComponent);`
         const customElementsDefineCallExpression = t.factory.createCallExpression(t.factory.createPropertyAccessExpression(t.factory.createIdentifier('customElements'), 'define'), undefined, [t.factory.createIdentifier('tagName'), t.factory.createIdentifier(principalComponent.componentClassName)]);
         // create a `case` block that defines the current component. We'll add them to our switch statement later.
@@ -55240,6 +55317,71 @@ function createAutoDefinitionExpression(componentName) {
   ]));
 }
 
+/**
+ * Proxy custom elements for the `dist-custom-elements` output target. This function searches for a Stencil component's
+ * class initializer (found on the righthand side of the '=' operator):
+ *
+ * ```ts
+ * const MyComponent = class extends HTMLElement { // Implementation omitted }
+ * ```
+ *
+ * and wraps the initializer into a `proxyCustomElement` call:
+ *
+ * ```ts
+ * const MyComponent = proxyCustomElement(class extends HTMLElement { // Implementation omitted }, componentMetadata);
+ * ```
+ *
+ * This is to work around an issue where treeshaking does not work for webpack users, whose details are captured in full
+ * in [this issue on the webpack GitHub repo](https://github.com/webpack/webpack/issues/14963).
+ *
+ * @param compilerCtx current compiler context
+ * @param transformOpts transpilation options for the current build
+ * @returns a TypeScript AST transformer factory function that performs the above described transformation
+ */
+const proxyCustomElement = (compilerCtx, transformOpts) => {
+  return () => {
+    return (tsSourceFile) => {
+      const moduleFile = getModuleFromSourceFile(compilerCtx, tsSourceFile);
+      if (!moduleFile.cmps.length) {
+        return tsSourceFile;
+      }
+      const principalComponent = moduleFile.cmps[0];
+      for (let [stmtIndex, stmt] of tsSourceFile.statements.entries()) {
+        if (t.isVariableStatement(stmt)) {
+          for (let [declarationIndex, declaration] of stmt.declarationList.declarations.entries()) {
+            if (declaration.name.getText() !== principalComponent.componentClassName) {
+              continue;
+            }
+            // wrap the Stencil component's class declaration in a component proxy
+            const proxyCreationCall = createAnonymousClassMetadataProxy(principalComponent, declaration.initializer);
+            t.addSyntheticLeadingComment(proxyCreationCall, t.SyntaxKind.MultiLineCommentTrivia, '@__PURE__', false);
+            // update the component's variable declaration to use the new initializer
+            const proxiedComponentDeclaration = t.factory.updateVariableDeclaration(declaration, declaration.name, declaration.exclamationToken, declaration.type, proxyCreationCall);
+            // update the declaration list that contains the updated variable declaration
+            const updatedDeclarationList = t.factory.updateVariableDeclarationList(stmt.declarationList, [
+              ...stmt.declarationList.declarations.slice(0, declarationIndex),
+              proxiedComponentDeclaration,
+              ...stmt.declarationList.declarations.slice(declarationIndex + 1),
+            ]);
+            // update the variable statement containing the updated declaration list
+            const updatedVariableStatement = t.factory.updateVariableStatement(stmt, [t.factory.createModifier(t.SyntaxKind.ExportKeyword)], updatedDeclarationList);
+            // update the source file's statements to use the new variable statement
+            tsSourceFile = t.factory.updateSourceFile(tsSourceFile, [
+              ...tsSourceFile.statements.slice(0, stmtIndex),
+              updatedVariableStatement,
+              ...tsSourceFile.statements.slice(stmtIndex + 1),
+            ]);
+            // finally, ensure that the proxyCustomElement function is imported
+            tsSourceFile = addImports(transformOpts, tsSourceFile, [RUNTIME_APIS.proxyCustomElement], transformOpts.coreImportPath);
+            return tsSourceFile;
+          }
+        }
+      }
+      return tsSourceFile;
+    };
+  };
+};
+
 const updateStencilCoreImports = (updatedCoreImportPath) => {
   return () => {
     return (tsSourceFile) => {
@@ -55314,19 +55456,19 @@ const bundleCustomElements$1 = async (config, compilerCtx, buildCtx, outputTarge
       id: 'customElements',
       platform: 'client',
       conditionals: getCustomElementsBuildConditionals(config, buildCtx.components),
-      customTransformers: getCustomElementBundleCustomTransformer$1(config, compilerCtx, buildCtx.components, outputTarget),
+      customTransformers: getCustomElementCustomTransformer(config, compilerCtx, buildCtx.components, outputTarget),
       externalRuntime: !!outputTarget.externalRuntime,
       inlineWorkers: true,
       inputs: {
         index: '\0core',
       },
       loader: {
-        '\0core': generateEntryPoint$1(outputTarget, buildCtx),
+        '\0core': generateEntryPoint$1(outputTarget),
       },
       inlineDynamicImports: outputTarget.inlineDynamicImports,
       preserveEntrySignatures: 'allow-extension',
     };
-    addCustomElementInputs(outputTarget, buildCtx, bundleOpts);
+    addCustomElementInputs(buildCtx, bundleOpts);
     const build = await bundleOutput(config, compilerCtx, buildCtx, bundleOpts);
     if (build) {
       const rollupOutput = await build.generate({
@@ -55372,7 +55514,12 @@ const bundleCustomElements$1 = async (config, compilerCtx, buildCtx, outputTarge
     catchError(buildCtx.diagnostics, e);
   }
 };
-const addCustomElementInputs = (_outputTarget, buildCtx, bundleOpts) => {
+/**
+ * Create the virtual modules/input modules for the `dist-custom-elements` output target.
+ * @param buildCtx the context for the current build
+ * @param bundleOpts the bundle options to store the virtual modules under. acts as an output parameter
+ */
+const addCustomElementInputs = (buildCtx, bundleOpts) => {
   const components = buildCtx.components;
   components.forEach((cmp) => {
     const exp = [];
@@ -55384,6 +55531,7 @@ const addCustomElementInputs = (_outputTarget, buildCtx, bundleOpts) => {
       exp.push(`export { ${importName} as ${exportName} } from '${cmp.sourceFilePath}';`);
     }
     else {
+      // the `importName` may collide with the `exportName`, alias it just in case it does with `importAs`
       exp.push(`import { ${importName} as ${importAs}, defineCustomElement as cmpDefCustomEle } from '${cmp.sourceFilePath}';`);
       exp.push(`export const ${exportName} = ${importAs};`);
       exp.push(`export const defineCustomElement = cmpDefCustomEle;`);
@@ -55392,16 +55540,29 @@ const addCustomElementInputs = (_outputTarget, buildCtx, bundleOpts) => {
     bundleOpts.loader[coreKey] = exp.join('\n');
   });
 };
-const generateEntryPoint$1 = (outputTarget, _buildCtx) => {
+/**
+ * Generate the entrypoint (`index.ts` file) contents for the `dist-custom-elements` output target
+ * @param outputTarget the output target's configuration
+ * @returns the stringified contents to be placed in the entrypoint
+ */
+const generateEntryPoint$1 = (outputTarget) => {
   const imp = [];
-  const exp = [];
   imp.push(`export { setAssetPath, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}';`, `export * from '${USER_INDEX_ENTRY_ID}';`);
   if (outputTarget.includeGlobalScripts !== false) {
     imp.push(`import { globalScripts } from '${STENCIL_APP_GLOBALS_ID}';`, `globalScripts();`);
   }
-  return [...imp, ...exp].join('\n') + '\n';
+  return imp.join('\n') + '\n';
 };
-const getCustomElementBundleCustomTransformer$1 = (config, compilerCtx, components, outputTarget) => {
+/**
+ * Get the series of custom transformers that will be applied to a Stencil project's source code during the TypeScript
+ * transpilation process
+ * @param config the configuration for the Stencil project
+ * @param compilerCtx the current compiler context
+ * @param components the components that will be compiled as a part of the current build
+ * @param outputTarget the output target configuration
+ * @returns a list of transformers to use in the transpilation process
+ */
+const getCustomElementCustomTransformer = (config, compilerCtx, components, outputTarget) => {
   const transformOpts = {
     coreImportPath: STENCIL_INTERNAL_CLIENT_ID,
     componentExport: null,
@@ -55415,6 +55576,7 @@ const getCustomElementBundleCustomTransformer$1 = (config, compilerCtx, componen
     addDefineCustomElementFunctions(compilerCtx, components, outputTarget),
     updateStencilCoreImports(transformOpts.coreImportPath),
     nativeComponentTransform(compilerCtx, transformOpts),
+    proxyCustomElement(compilerCtx, transformOpts),
     removeCollectionImports(compilerCtx),
   ];
 };
@@ -63816,7 +63978,7 @@ const getComponentPathContent = (componentGraph, outputTarget) => {
 const dependencies = [
 	{
 		name: "@stencil/core",
-		version: "2.14.0",
+		version: "2.14.1",
 		main: "compiler/stencil.js",
 		resources: [
 			"package.json",
@@ -65002,7 +65164,7 @@ const validateTesting = (config, diagnostics) => {
     testing.pixelmatchThreshold = DEFAULT_PIXEL_MATCH_THRESHOLD;
   }
   if (testing.testRegex === undefined) {
-    testing.testRegex = '(/__tests__/.*|\\.?(test|spec|e2e))\\.(tsx?|ts?|jsx?|js?)$';
+    testing.testRegex = '(/__tests__/.*|\\.(test|spec|e2e))\\.(tsx|ts|jsx|js)$';
   }
   if (Array.isArray(testing.testMatch)) {
     delete testing.testRegex;