@atlaspack/reporter-cli 2.15.1-canary.35 → 2.15.1-canary.350

package/src/{CLIReporter.js → CLIReporter.ts}

@@ -1,14 +1,19 @@
-// @flow
-import type {ReporterEvent, PluginOptions} from '@atlaspack/types';
+import type {
+  ReporterEvent,
+  PluginOptions,
+  PluginLogger,
+} from '@atlaspack/types';
 import type {Diagnostic} from '@atlaspack/diagnostic';
-import type {Color} from 'chalk';
 
+import {getFeatureFlag} from '@atlaspack/feature-flags';
 import {Reporter} from '@atlaspack/plugin';
 import {
   getProgressMessage,
+  getPackageProgressMessage,
   prettifyTime,
   prettyDiagnostic,
   throttle,
+  debugTools,
 } from '@atlaspack/utils';
 import chalk from 'chalk';
 
@@ -23,8 +28,10 @@ import {
   isTTY,
   resetWindow,
   persistMessage,
+  table,
 } from './render';
 import * as emoji from './emoji';
+// @ts-expect-error TS7016
 import wrapAnsi from 'wrap-ansi';
 
 const THROTTLE_DELAY = 100;
@@ -32,23 +39,77 @@ const seenWarnings = new Set();
 const seenPhases = new Set();
 const seenPhasesGen = new Set();
 
-let phaseStartTimes = {};
+let phaseStartTimes: Record<string, any> = {};
 let pendingIncrementalBuild = false;
+let packagingProgress = 0;
+
+let updatePackageProgress = (completeBundles: number, totalBundles: number) => {
+  let updateThreshold = 0;
+  if (totalBundles > 5000) {
+    // If more than 5000 bundles, update every 5%
+    updateThreshold = 5;
+  } else if (totalBundles > 1000) {
+    // If more than 1000 bundles, update every 10%
+    updateThreshold = 10;
+  } else {
+    // othewise update every 25%
+    updateThreshold = 25;
+  }
+
+  let percent = Math.floor((completeBundles / totalBundles) * 100);
+  if (percent - packagingProgress >= updateThreshold) {
+    packagingProgress = percent;
+    updateSpinner(getPackageProgressMessage(completeBundles, totalBundles));
+  }
+};
 
 let statusThrottle = throttle((message: string) => {
   updateSpinner(message);
 }, THROTTLE_DELAY);
 
-const cacheWriteState: {|
-  startTime: number | null,
-|} = {
+const cacheWriteState: {
+  startTime: number | null;
+} = {
   startTime: null,
 };
 
+function calculateWrappingStats(
+  scopeHoistingStats:
+    | {
+        totalAssets: number;
+        wrappedAssets: number;
+      }
+    | undefined,
+  logger: PluginLogger,
+) {
+  if (!scopeHoistingStats) {
+    logger.info({
+      message: 'No scope hoisting data collected.',
+      origin: '@atlaspack/reporter-cli',
+    });
+    return;
+  }
+
+  let {totalAssets, wrappedAssets} = scopeHoistingStats;
+  let hoistedAssets = totalAssets - wrappedAssets;
+  let percentage = totalAssets > 0 ? (hoistedAssets / totalAssets) * 100 : 0;
+
+  table(
+    [{align: 'left'}, {align: 'right'}],
+    [
+      ['Wrapped Assets', wrappedAssets.toString()],
+      ['Total Assets', totalAssets.toString()],
+      ['Hoisted Assets', hoistedAssets.toString()],
+      ['Percentage Hoisted', `${percentage.toFixed(3)}%`],
+    ],
+  );
+}
+
 // Exported only for test
 export async function _report(
   event: ReporterEvent,
   options: PluginOptions,
+  logger: PluginLogger,
 ): Promise<void> {
   let logLevelFilter = logLevels[options.logLevel || 'info'];
 
@@ -94,11 +155,23 @@ export async function _report(
         seenPhasesGen.add(event.phase);
       }
 
+      if (
+        getFeatureFlag('cliProgressReportingImprovements') &&
+        (event.phase === 'packaging' || event.phase === 'optimizing')
+      ) {
+        // If the flag is turned on, we ignore the old `packaging` and
+        // `optimizing` event types, and only consider `packagingAndOptimizing`
+        // events
+        break;
+      }
+
       if (!isTTY && logLevelFilter != logLevels.verbose) {
         if (event.phase == 'transforming' && !seenPhases.has('transforming')) {
           updateSpinner('Building...');
         } else if (event.phase == 'bundling' && !seenPhases.has('bundling')) {
           updateSpinner('Bundling...');
+        } else if (event.phase === 'packagingAndOptimizing') {
+          updatePackageProgress(event.completeBundles, event.totalBundles);
         } else if (
           (event.phase == 'packaging' || event.phase == 'optimizing') &&
           !seenPhases.has('packaging') &&
@@ -134,12 +207,21 @@ export async function _report(
       );
 
       if (options.mode === 'production') {
-        await bundleReport(
-          event.bundleGraph,
-          options.outputFS,
-          options.projectRoot,
-          options.detailedReport?.assetsPerBundle,
-        );
+        if (debugTools['scope-hoisting-stats']) {
+          calculateWrappingStats(event.scopeHoistingStats, logger);
+        }
+        if (debugTools['simple-cli-reporter']) {
+          writeOut(
+            `🛠️ Built ${event.bundleGraph.getBundles().length} bundles.`,
+          );
+        } else {
+          await bundleReport(
+            event.bundleGraph,
+            options.outputFS,
+            options.projectRoot,
+            options.detailedReport?.assetsPerBundle,
+          );
+        }
       } else {
         pendingIncrementalBuild = true;
       }
@@ -214,6 +296,7 @@ export async function _report(
           await writeDiagnostic(options, event.diagnostics, 'red', true);
           break;
         default:
+          // @ts-expect-error TS2339
           throw new Error('Unknown log level ' + event.level);
       }
     }
@@ -223,6 +306,7 @@ export async function _report(
 async function writeDiagnostic(
   options: PluginOptions,
   diagnostics: Array<Diagnostic>,
+  // @ts-expect-error TS2749
   color: Color,
   isError: boolean = false,
 ) {
@@ -232,7 +316,7 @@ async function writeDiagnostic(
   for (let diagnostic of diagnostics) {
     let {message, stack, codeframe, hints, documentation} =
       await prettyDiagnostic(diagnostic, options, columns - indent);
-    // $FlowFixMe[incompatible-use]
+    // @ts-expect-error TS7053
     message = chalk[color](message);
 
     if (spaceAfter) {
@@ -281,6 +365,7 @@ async function writeDiagnostic(
       );
     }
 
+    // @ts-expect-error TS2322
     spaceAfter = stack || codeframe || hints.length > 0 || documentation;
   }
 
@@ -289,7 +374,7 @@ async function writeDiagnostic(
   }
 }
 
-function wrapWithIndent(string, indent = 0, initialIndent = indent) {
+function wrapWithIndent(string: string, indent = 0, initialIndent = indent) {
   let width = getTerminalWidth().columns;
   return indentString(
     wrapAnsi(string.trimEnd(), width - indent, {trim: false}),
@@ -298,14 +383,15 @@ function wrapWithIndent(string, indent = 0, initialIndent = indent) {
   );
 }
 
+// @ts-expect-error TS7006
 function indentString(string, indent = 0, initialIndent = indent) {
   return (
     ' '.repeat(initialIndent) + string.replace(/\n/g, '\n' + ' '.repeat(indent))
   );
 }
 
-export default (new Reporter({
-  report({event, options}) {
-    return _report(event, options);
+export default new Reporter({
+  report({event, options, logger}) {
+    return _report(event, options, logger);
   },
-}): Reporter);
+}) as Reporter;

package/src/{bundleReport.js → bundleReport.ts}

@@ -1,4 +1,3 @@
-// @flow
 import type {BundleGraph, FilePath, PackagedBundle} from '@atlaspack/types';
 import type {FileSystem} from '@atlaspack/fs';
 
@@ -40,7 +39,7 @@ export default async function bundleReport(
             };
           }),
         };
-  let rows = [];
+  let rows: Array<Array<string>> = [];
 
   for (let bundle of bundles) {
     // Add a row for the bundle
@@ -55,6 +54,7 @@ export default async function bundleReport(
       for (let asset of largestAssets) {
         let columns: Array<string> = [
           asset == largestAssets[largestAssets.length - 1] ? '└── ' : '├── ',
+          // @ts-expect-error TS2554
           chalk.dim(prettifySize(asset.size)),
           chalk.dim(chalk.green(prettifyTime(asset.time))),
         ];
@@ -87,10 +87,11 @@ export default async function bundleReport(
 
   // Render table
   writeOut('');
+  // @ts-expect-error TS2345
   table(COLUMNS, rows);
 }
 
-function prettifySize(size, isLarge) {
+function prettifySize(size: number, isLarge: undefined | boolean) {
   let res = filesize(size);
   if (isLarge) {
     return chalk.yellow(emoji.warning + '  ' + res);

package/src/{emoji.js → emoji.ts}

@@ -1,5 +1,3 @@
-// @flow strict-local
-
 // From https://github.com/sindresorhus/is-unicode-supported/blob/8f123916d5c25a87c4f966dcc248b7ca5df2b4ca/index.js
 // This package is ESM-only so it has to be vendored
 function isUnicodeSupported() {

package/src/{logLevels.js → logLevels.ts}

@@ -1,5 +1,3 @@
-// @flow strict-local
-
 const logLevels = {
   none: 0,
   error: 1,
@@ -8,6 +6,6 @@ const logLevels = {
   progress: 3,
   success: 3,
   verbose: 4,
-};
+} as const;
 
 export default logLevels;

package/src/{phaseReport.js → phaseReport.ts}

@@ -1,11 +1,10 @@
-// @flow
 import {prettifyTime} from '@atlaspack/utils';
 import chalk from 'chalk';
 import {writeOut} from './render';
 import invariant from 'assert';
 
-export default function phaseReport(phaseStartTimes: {[string]: number}) {
-  let phaseTimes = {};
+export default function phaseReport(phaseStartTimes: {[key: string]: number}) {
+  let phaseTimes: Record<string, any> = {};
   if (phaseStartTimes['transforming'] && phaseStartTimes['bundling']) {
     phaseTimes['Transforming'] =
       phaseStartTimes['bundling'] - phaseStartTimes['transforming'];

package/src/{render.js → render.ts}

@@ -1,4 +1,3 @@
-// @flow
 import type {Writable} from 'stream';
 
 import readline from 'readline';
@@ -9,12 +8,11 @@ import type {PadAlign} from './utils';
 import {pad, countLines} from './utils';
 import * as emoji from './emoji';
 
-type ColumnType = {|
-  align: PadAlign,
-|};
+type ColumnType = {
+  align: PadAlign;
+};
 
 export const isTTY: any | boolean | true =
-  // $FlowFixMe
   process.env.NODE_ENV !== 'test' && process.stdout.isTTY;
 
 let stdout = process.stdout;
@@ -33,7 +31,9 @@ let errorLineCount = 0;
 let statusPersisted = false;
 
 export function _setStdio(stdoutLike: Writable, stderrLike: Writable) {
+  // @ts-expect-error TS2322
   stdout = stdoutLike;
+  // @ts-expect-error TS2322
   stderr = stderrLike;
 }
 
@@ -42,7 +42,7 @@ let spinner = ora({
   stream: stdout,
   discardStdin: false,
 });
-let persistedMessages = [];
+let persistedMessages: Array<string> = [];
 
 export function writeOut(message: string, isError: boolean = false) {
   let processedMessage = message + '\n';
@@ -132,7 +132,7 @@ export function resetWindow() {
 
 export function table(columns: Array<ColumnType>, table: Array<Array<string>>) {
   // Measure column widths
-  let colWidths = [];
+  let colWidths: Array<number> = [];
   for (let row of table) {
     let i = 0;
     for (let item of row) {

package/src/{utils.js → utils.ts}

@@ -1,4 +1,3 @@
-// @flow
 import path from 'path';
 import chalk from 'chalk';
 import stringWidth from 'string-width';

package/test/{CLIReporter.test.js → CLIReporter.test.ts}

@@ -1,5 +1,3 @@
-// @flow strict-local
-
 import assert from 'assert';
 import sinon from 'sinon';
 import {PassThrough} from 'stream';
@@ -39,13 +37,13 @@ const EMPTY_OPTIONS = {
     assetsPerBundle: 10,
   },
   featureFlags: DEFAULT_FEATURE_FLAGS,
-};
+} as const;
 
 describe('CLIReporter', () => {
-  let originalStdout;
-  let originalStderr;
-  let stdoutOutput;
-  let stderrOutput;
+  let originalStdout: any;
+  let originalStderr: any;
+  let stdoutOutput: any;
+  let stderrOutput: any;
 
   beforeEach(async () => {
     // Stub these out to avoid writing noise to real stdio and to read from these
@@ -57,9 +55,15 @@ describe('CLIReporter', () => {
     stderrOutput = '';
 
     let mockStdout = new PassThrough();
-    mockStdout.on('data', (d) => (stdoutOutput += stripAnsi(d.toString())));
+    mockStdout.on(
+      'data',
+      (d: any) => (stdoutOutput += stripAnsi(d.toString())),
+    );
     let mockStderr = new PassThrough();
-    mockStderr.on('data', (d) => (stderrOutput += stripAnsi(d.toString())));
+    mockStderr.on(
+      'data',
+      (d: any) => (stderrOutput += stripAnsi(d.toString())),
+    );
     _setStdio(mockStdout, mockStderr);
 
     await _report(
@@ -200,7 +204,6 @@ describe('CLIReporter', () => {
     // emit a buildSuccess event to reset the timings and seen phases
     // from the previous test
     process.env['ATLASPACK_SHOW_PHASE_TIMES'] = undefined;
-    // $FlowFixMe
     await _report({type: 'buildSuccess'}, EMPTY_OPTIONS);
 
     process.env['ATLASPACK_SHOW_PHASE_TIMES'] = 'true';
@@ -210,17 +213,16 @@ describe('CLIReporter', () => {
     );
     await _report({type: 'buildProgress', phase: 'bundling'}, EMPTY_OPTIONS);
     await _report(
-      // $FlowFixMe
       {
         type: 'buildProgress',
         phase: 'packaging',
+
         bundle: {
           displayName: 'test',
         },
       },
       EMPTY_OPTIONS,
     );
-    // $FlowFixMe
     await _report({type: 'buildSuccess'}, EMPTY_OPTIONS);
     const expected =
       /Building...\nBundling...\nPackaging & Optimizing...\nTransforming finished in [0-9]ms\nBundling finished in [0-9]ms\nPackaging & Optimizing finished in [0-9]ms/;
@@ -235,17 +237,16 @@ describe('CLIReporter', () => {
     );
     await _report({type: 'buildProgress', phase: 'bundling'}, EMPTY_OPTIONS);
     await _report(
-      // $FlowFixMe
       {
         type: 'buildProgress',
         phase: 'packaging',
+
         bundle: {
           displayName: 'test',
         },
       },
       EMPTY_OPTIONS,
     );
-    // $FlowFixMe
     await _report({type: 'buildSuccess'}, EMPTY_OPTIONS);
 
     assert.equal(

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "../../core/feature-flags/tsconfig.json"
+    },
+    {
+      "path": "../../core/plugin/tsconfig.json"
+    },
+    {
+      "path": "../../core/types/tsconfig.json"
+    },
+    {
+      "path": "../../core/utils/tsconfig.json"
+    }
+  ]
+}