fix: restore stats output target functionality.

src/compiler/build/build-ctx.ts

@@ -17,6 +17,12 @@ export class BuildContext implements d.BuildCtx {
   componentGraph = new Map<string, string[]>();
   config: d.Config;
   data: any = {};
+  buildStats?: d.CompilerBuildStats = undefined;
+  esmBrowserComponentBundle: d.BundleModule[];
+  esmComponentBundle: d.BundleModule[];
+  es5ComponentBundle: d.BundleModule[];
+  systemComponentBundle: d.BundleModule[];
+  commonJsComponentBundle: d.BundleModule[];
   diagnostics: d.Diagnostic[] = [];
   dirsAdded: string[] = [];
   dirsDeleted: string[] = [];

src/compiler/build/build-finish.ts

@@ -1,5 +1,6 @@
 import type * as d from '../../declarations';
 import { generateBuildResults } from './build-results';
+import { generateBuildStats, writeBuildStats } from './build-stats';
 import { isFunction, isRemoteUrl } from '@utils';
 import { IS_NODE_ENV } from '../sys/environment';
 import { relative } from 'path';
@@ -12,6 +13,7 @@ export const buildFinish = async (buildCtx: d.BuildCtx) => {
     messages: buildCtx.buildMessages.slice(),
     progress: 1,
   };
+
   buildCtx.compilerCtx.events.emit('buildLog', buildLog);
 
   return results;
@@ -31,6 +33,12 @@ const buildDone = async (config: d.Config, compilerCtx: d.CompilerCtx, buildCtx:
   // create the build results data
   buildCtx.buildResults = generateBuildResults(config, compilerCtx, buildCtx);
 
+  // After the build results are available on the buildCtx, call the stats and set it.
+  // We will use this later to write the files.
+  buildCtx.buildStats = generateBuildStats(config, buildCtx);
+
+  await writeBuildStats(config, buildCtx.buildStats);
+
   buildCtx.debug(`${aborted ? 'aborted' : 'finished'} build, ${buildCtx.buildResults.duration}ms`);
 
   // log any errors/warnings

src/compiler/build/build-stats.ts

@@ -0,0 +1,180 @@
+import { byteSize, sortBy } from '@utils';
+import type * as d from '../../declarations';
+import { isOutputTargetStats } from '../output-targets/output-utils';
+
+/**
+ *
+ * @param config the project build configuration
+ * @param buildCtx An instance of the build which holds the details about the build
+ * @returns CompilerBuildStats or an Object including diagnostics.
+ */
+export function generateBuildStats(
+  config: d.Config,
+  buildCtx: d.BuildCtx
+): d.CompilerBuildStats | { diagnostics: d.Diagnostic[] } {
+  const buildResults = buildCtx.buildResults;
+
+  let jsonData: d.CompilerBuildStats | { diagnostics: d.Diagnostic[] };
+
+  try {
+    if (buildResults.hasError) {
+      jsonData = {
+        diagnostics: buildResults.diagnostics,
+      };
+    } else {
+      const stats: d.CompilerBuildStats = {
+        timestamp: buildResults.timestamp,
+        compiler: {
+          name: config.sys.name,
+          version: config.sys.version,
+        },
+        app: {
+          namespace: config.namespace,
+          fsNamespace: config.fsNamespace,
+          components: Object.keys(buildResults.componentGraph).length,
+          entries: Object.keys(buildResults.componentGraph).length,
+          bundles: buildResults.outputs.reduce((total, en) => total + en.files.length, 0),
+          outputs: getAppOutputs(config, buildResults),
+        },
+        options: {
+          minifyJs: config.minifyJs,
+          minifyCss: config.minifyCss,
+          hashFileNames: config.hashFileNames,
+          hashedFileNameLength: config.hashedFileNameLength,
+          buildEs5: config.buildEs5,
+        },
+        formats: {
+          esmBrowser: sanitizeBundlesForStats(buildCtx.esmBrowserComponentBundle),
+          esm: sanitizeBundlesForStats(buildCtx.esmComponentBundle),
+          es5: sanitizeBundlesForStats(buildCtx.es5ComponentBundle),
+          system: sanitizeBundlesForStats(buildCtx.systemComponentBundle),
+          commonjs: sanitizeBundlesForStats(buildCtx.commonJsComponentBundle),
+        },
+        components: getComponentsFileMap(config, buildCtx),
+        entries: buildCtx.entryModules,
+        componentGraph: buildResults.componentGraph,
+        sourceGraph: getSourceGraph(config, buildCtx),
+        rollupResults: buildCtx.rollupResults,
+        collections: getCollections(config, buildCtx),
+      };
+
+      jsonData = stats;
+    }
+  } catch (e) {
+    jsonData = {
+      diagnostics: [e.message],
+    };
+  }
+
+  return jsonData;
+}
+
+/**
+ *
+ * @param config the project build configuration
+ * @param buildCtx An instance of the build which holds the details about the build
+ * @returns
+ */
+export async function writeBuildStats(config: d.Config, data: d.CompilerBuildStats | { diagnostics: d.Diagnostic[] }) {
+  const statsTargets = config.outputTargets.filter(isOutputTargetStats);
+
+  await Promise.all(
+    statsTargets.map(async (outputTarget) => {
+      const result = await config.sys.writeFile(outputTarget.file, JSON.stringify(data, null, 2));
+
+      if (result.error) {
+        config.logger.warn([`Stats failed to write file to ${outputTarget.file}: ${result.error}`]);
+      }
+    })
+  );
+}
+
+function sanitizeBundlesForStats(bundleArray: ReadonlyArray<d.BundleModule>): ReadonlyArray<d.CompilerBuildStatBundle> {
+  if (!bundleArray) {
+    return [];
+  }
+
+  return bundleArray.map((bundle) => {
+    return {
+      key: bundle.entryKey,
+      components: bundle.cmps.map((c) => c.tagName),
+      bundleId: bundle.output.bundleId,
+      fileName: bundle.output.fileName,
+      imports: bundle.rollupResult.imports,
+      // code: bundle.rollupResult.code, // (use this to debug)
+      // Currently, this number is inaccurate vs what seems to be on disk.
+      originalByteSize: byteSize(bundle.rollupResult.code),
+    };
+  });
+}
+
+function getSourceGraph(config: d.Config, buildCtx: d.BuildCtx) {
+  let sourceGraph: d.BuildSourceGraph = {};
+
+  sortBy(buildCtx.moduleFiles, (m) => m.sourceFilePath).forEach((moduleFile) => {
+    const key = relativePath(config, moduleFile.sourceFilePath);
+    sourceGraph[key] = moduleFile.localImports.map((localImport) => relativePath(config, localImport)).sort();
+  });
+
+  return sourceGraph;
+}
+
+function getAppOutputs(config: d.Config, buildResults: d.CompilerBuildResults) {
+  return buildResults.outputs.map((output) => {
+    return {
+      name: output.type,
+      files: output.files.length,
+      generatedFiles: output.files.map((file) => relativePath(config, file)),
+    };
+  });
+}
+
+function getComponentsFileMap(config: d.Config, buildCtx: d.BuildCtx) {
+  return buildCtx.components.map((component) => {
+    return {
+      tag: component.tagName,
+      path: relativePath(config, component.jsFilePath),
+      source: relativePath(config, component.sourceFilePath),
+      elementRef: component.elementRef,
+      componentClassName: component.componentClassName,
+      assetsDirs: component.assetsDirs,
+      dependencies: component.dependencies,
+      dependents: component.dependents,
+      directDependencies: component.directDependencies,
+      directDependents: component.directDependents,
+      docs: component.docs,
+      encapsulation: component.encapsulation,
+      excludeFromCollection: component.excludeFromCollection,
+      events: component.events,
+      internal: component.internal,
+      legacyConnect: component.legacyConnect,
+      legacyContext: component.legacyContext,
+      listeners: component.listeners,
+      methods: component.methods,
+      potentialCmpRefs: component.potentialCmpRefs,
+      properties: component.properties,
+      shadowDelegatesFocus: component.shadowDelegatesFocus,
+      states: component.states,
+    };
+  });
+}
+
+function getCollections(config: d.Config, buildCtx: d.BuildCtx) {
+  return buildCtx.collections
+    .map((c) => {
+      return {
+        name: c.collectionName,
+        source: relativePath(config, c.moduleDir),
+        tags: c.moduleFiles.map((m) => m.cmps.map((cmp: d.ComponentCompilerMeta) => cmp.tagName)).sort(),
+      };
+    })
+    .sort((a, b) => {
+      if (a.name < b.name) return -1;
+      if (a.name > b.name) return 1;
+      return 0;
+    });
+}
+
+function relativePath(config: d.Config, file: string) {
+  return config.sys.normalizePath(config.sys.platformPath.relative(config.rootDir, file));
+}

src/compiler/build/test/build-stats.spec.ts

@@ -0,0 +1,59 @@
+import type * as d from '@stencil/core/declarations';
+import { mockConfig, mockCompilerCtx, mockBuildCtx } from '@stencil/core/testing';
+import { generateBuildResults } from '../build-results';
+import { generateBuildStats } from '../build-stats';
+import path from 'path';
+
+describe('generateBuildStats', () => {
+  const root = path.resolve('/');
+  const config = mockConfig();
+  let compilerCtx: d.CompilerCtx;
+  let buildCtx: d.BuildCtx;
+
+  beforeEach(() => {
+    compilerCtx = mockCompilerCtx(config);
+    buildCtx = mockBuildCtx(config, compilerCtx);
+  });
+
+  it('should return a structured json object', async () => {
+    buildCtx.buildResults = generateBuildResults(config, compilerCtx, buildCtx);
+
+    const result = generateBuildStats(config, buildCtx);
+
+    if (result.hasOwnProperty('timestamp')) {
+      delete result.timestamp;
+    }
+
+    expect(result).toStrictEqual({
+      app: { bundles: 0, components: 0, entries: 0, fsNamespace: undefined, namespace: 'Testing', outputs: [] },
+      collections: [],
+      compiler: { name: 'in-memory', version: '0.0.0-dev.20210827160156' },
+      componentGraph: {},
+      components: [],
+      entries: [],
+      formats: { commonjs: [], es5: [], esm: [], esmBrowser: [], system: [] },
+      options: {
+        buildEs5: false,
+        hashFileNames: false,
+        hashedFileNameLength: undefined,
+        minifyCss: false,
+        minifyJs: false,
+      },
+      rollupResults: undefined,
+      sourceGraph: {},
+    });
+  });
+
+  it('should return diagnostics if an error is hit', async () => {
+    buildCtx.buildResults = generateBuildResults(config, compilerCtx, buildCtx);
+
+    buildCtx.buildResults.hasError = true;
+    buildCtx.buildResults.diagnostics = ['Something bad happened'];
+
+    const result = generateBuildStats(config, buildCtx);
+
+    expect(result).toStrictEqual({
+      diagnostics: ['Something bad happened'],
+    });
+  });
+});

src/compiler/entries/component-graph.ts

@@ -1,7 +1,7 @@
 import type * as d from '../../declarations';
 import { getScopeId } from '../style/scope-css';
 
-export const generateModuleGraph = (cmps: d.ComponentCompilerMeta[], bundleModules: d.BundleModule[]) => {
+export const generateModuleGraph = (cmps: d.ComponentCompilerMeta[], bundleModules: ReadonlyArray<d.BundleModule>) => {
   const cmpMap = new Map<string, string[]>();
   cmps.forEach((cmp) => {
     const bundle = bundleModules.find((b) => b.cmps.includes(cmp));

src/compiler/output-targets/dist-lazy/generate-cjs.ts

@@ -11,7 +11,7 @@ export const generateCjs = async (
   buildCtx: d.BuildCtx,
   rollupBuild: RollupBuild,
   outputTargets: d.OutputTargetDistLazy[]
-) => {
+): Promise<d.BuildCtx> => {
   const cjsOutputs = outputTargets.filter((o) => !!o.cjsDir);
 
   if (cjsOutputs.length > 0) {
@@ -25,7 +25,8 @@ export const generateCjs = async (
     const results = await generateRollupOutput(rollupBuild, esmOpts, config, buildCtx.entryModules);
     if (results != null) {
       const destinations = cjsOutputs.map((o) => o.cjsDir);
-      await generateLazyModules(
+
+      buildCtx.commonJsComponentBundle = await generateLazyModules(
         config,
         compilerCtx,
         buildCtx,
@@ -36,16 +37,19 @@ export const generateCjs = async (
         false,
         '.cjs'
       );
+
       await generateShortcuts(compilerCtx, results, cjsOutputs);
     }
   }
+
+  return buildCtx;
 };
 
 const generateShortcuts = (
   compilerCtx: d.CompilerCtx,
   rollupResult: d.RollupResult[],
   outputTargets: d.OutputTargetDistLazy[]
-) => {
+): Promise<void[]> => {
   const indexFilename = rollupResult.find((r) => r.type === 'chunk' && r.isIndex).fileName;
   return Promise.all(
     outputTargets.map(async (o) => {

src/compiler/output-targets/dist-lazy/generate-esm-browser.ts

@@ -10,7 +10,7 @@ export const generateEsmBrowser = async (
   buildCtx: d.BuildCtx,
   rollupBuild: RollupBuild,
   outputTargets: d.OutputTargetDistLazy[]
-) => {
+): Promise<d.BuildCtx> => {
   const esmOutputs = outputTargets.filter((o) => !!o.esmDir && !!o.isBrowserBuild);
   if (esmOutputs.length) {
     const outputTargetType = esmOutputs[0].type;
@@ -29,7 +29,7 @@ export const generateEsmBrowser = async (
 
     if (output != null) {
       const es2017destinations = esmOutputs.map((o) => o.esmDir);
-      const componentBundle = await generateLazyModules(
+      buildCtx.esmBrowserComponentBundle = await generateLazyModules(
         config,
         compilerCtx,
         buildCtx,
@@ -40,8 +40,7 @@ export const generateEsmBrowser = async (
         true,
         ''
       );
-      return componentBundle;
     }
   }
-  return undefined;
+  return buildCtx;
 };