Adding stats and feedback from Lars

Author: splitinfinities

src/compiler/build/build-stats.ts

@@ -1,4 +1,4 @@
-import { byteSize } from '@utils';
+import { byteSize, sortBy } from '@utils';
 import type * as d from '../../declarations';
 
 /**
@@ -10,14 +10,15 @@ import type * as d from '../../declarations';
  */
 export function generateBuildStats(config: d.Config, buildCtx: d.BuildCtx) {
   const buildResults = buildCtx.buildResults;
-  let jsonData: any;
 
-  if (buildResults.hasError) {
-    jsonData = {
-      diagnostics: buildResults.diagnostics,
-    };
-  } else {
-    try {
+  let jsonData: d.CompilerBuildStats | { diagnostics: d.Diagnostic[] };
+
+  try {
+    if (buildResults.hasError) {
+      jsonData = {
+        diagnostics: buildResults.diagnostics,
+      };
+    } else {
       const stats: d.CompilerBuildStats = {
         timestamp: buildResults.timestamp,
         compiler: {
@@ -39,22 +40,27 @@ export function generateBuildStats(config: d.Config, buildCtx: d.BuildCtx) {
           hashedFileNameLength: config.hashedFileNameLength,
           buildEs5: config.buildEs5,
         },
-        esmBrowser: sanitizeBundlesForStats(buildCtx.esmBrowserComponentBundle),
-        esm: sanitizeBundlesForStats(buildCtx.esmComponentBundle),
-        es5: sanitizeBundlesForStats(buildCtx.es5ComponentBundle),
-        system: sanitizeBundlesForStats(buildCtx.systemComponentBundle),
-        commonjs: sanitizeBundlesForStats(buildCtx.commonJsComponentBundle),
+        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,
-        sourceGraph: buildResults.componentGraph,
+        componentGraph: buildResults.componentGraph,
+        sourceGraph: getSourceGraph(config, buildCtx),
         rollupResults: buildCtx.rollupResults,
         collections: getCollections(config, buildCtx),
       };
 
       jsonData = stats;
-    } catch (e) {
-      console.log(e);
     }
+  } catch (e) {
+    jsonData = {
+      diagnostics: [e.message],
+    };
   }
 
   return jsonData;
@@ -96,6 +102,17 @@ function sanitizeBundlesForStats(bundleArray: d.BundleModule[]): d.CompilerBuild
   });
 }
 
+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 {

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/declarations/stencil-private.ts

@@ -1,3 +1,4 @@
+import { BuildResultsComponentGraph } from '.';
 import type {
   BuildEvents,
   BuildLog,
@@ -287,15 +288,18 @@ export interface CompilerBuildStats {
     hashedFileNameLength: number;
     buildEs5: boolean | 'prod';
   };
-  esmBrowser: CompilerBuildStatBundle[];
-  esm: CompilerBuildStatBundle[];
-  es5: CompilerBuildStatBundle[];
-  system: CompilerBuildStatBundle[];
-  commonjs: CompilerBuildStatBundle[];
+  formats: {
+    esmBrowser: CompilerBuildStatBundle[];
+    esm: CompilerBuildStatBundle[];
+    es5: CompilerBuildStatBundle[];
+    system: CompilerBuildStatBundle[];
+    commonjs: CompilerBuildStatBundle[];
+  };
   components: BuildComponent[];
   entries: EntryModule[];
   rollupResults: RollupResults;
-  sourceGraph: BuildSourceGraph;
+  sourceGraph?: BuildSourceGraph;
+  componentGraph: BuildResultsComponentGraph;
   collections: {
     name: string;
     source: string;