Repository: parcel-bundler/parcel
File: packages/reporters/cli/src/bundleReport.js (JavaScript)

Code before:
// @flow
import type {BundleGraph, FilePath} from '@parcel/types';
import type {FileSystem} from '@parcel/fs';

import {generateBundleReport, prettifyTime} from '@parcel/utils';
import filesize from 'filesize';
import chalk from 'chalk';

import * as emoji from './emoji';
import {writeOut, table} from './render';
import {formatFilename} from './utils';

const LARGE_BUNDLE_SIZE = 1024 * 1024;
const COLUMNS = [
  {align: 'left'}, // name
  {align: 'right'}, // size
  {align: 'right'}, // time
];

export default async function bundleReport(
  bundleGraph: BundleGraph,
  fs: FileSystem,
  projectRoot: FilePath,
) {
  // Get a list of bundles sorted by size
  // $FlowFixMe not entirely sure why this fails?
  let {bundles} = await generateBundleReport(bundleGraph, fs, projectRoot);
  let rows = [];

  for (let bundle of bundles) {
    // Add a row for the bundle
    rows.push([
      formatFilename(bundle.filePath || '', chalk.cyan.bold),
      chalk.bold(prettifySize(bundle.size, bundle.size > LARGE_BUNDLE_SIZE)),
      chalk.green.bold(prettifyTime(bundle.time)),
    ]);

    let largestAssets = bundle.assets.slice(0, 10);
    for (let asset of largestAssets) {
      // Add a row for the asset.
      rows.push([
        (asset == largestAssets[largestAssets.length - 1] ? '└── ' : '├── ') +
          formatFilename(asset.filePath, chalk.reset),
        chalk.dim(prettifySize(asset.size)),
        chalk.dim(chalk.green(prettifyTime(asset.time))),
      ]);
    }

    if (bundle.totalAssets > largestAssets.length) {
      rows.push([
        '└── ' +

Review comment (suggestion):
You access `bundle.totalAssets`  below but `totalAssets` does't exist in `BundleStats`.
This really is the most confusing flow error, not on the callsite, but on the await expression 🤷‍♂️ 

Code after:
// @flow
import type {BundleGraph, FilePath} from '@parcel/types';
import type {FileSystem} from '@parcel/fs';

import {generateBuildMetrics, prettifyTime} from '@parcel/utils';
import filesize from 'filesize';
import chalk from 'chalk';

import * as emoji from './emoji';
import {writeOut, table} from './render';
import {formatFilename} from './utils';

const LARGE_BUNDLE_SIZE = 1024 * 1024;
const COLUMNS = [
  {align: 'left'}, // name
  {align: 'right'}, // size
  {align: 'right'}, // time
];

export default async function bundleReport(
  bundleGraph: BundleGraph,
  fs: FileSystem,
  projectRoot: FilePath,
) {
  // Get a list of bundles sorted by size
  let {bundles} = await generateBuildMetrics(
    bundleGraph.getBundles().filter(b => !b.isInline),
    fs,
    projectRoot,
  );
  let rows = [];

  for (let bundle of bundles) {
    // Add a row for the bundle
    rows.push([
      formatFilename(bundle.filePath || '', chalk.cyan.bold),
      chalk.bold(prettifySize(bundle.size, bundle.size > LARGE_BUNDLE_SIZE)),
      chalk.green.bold(prettifyTime(bundle.time)),
    ]);

    let largestAssets = bundle.assets.slice(0, 10);
    for (let asset of largestAssets) {
      // Add a row for the asset.
      rows.push([
        (asset == largestAssets[largestAssets.length - 1] ? '└── ' : '├── ') +
          formatFilename(asset.filePath, chalk.reset),
        chalk.dim(prettifySize(asset.size)),
        chalk.dim(chalk.green(prettifyTime(asset.time))),
      ]);
    }