chore: integrate new bundle size tool

azure-pipelines.bundlesize.yml

@@ -28,6 +28,21 @@ jobs:
           yarn lage bundle-size --no-cache --verbose $(sinceArg)
         displayName: build packages & create reports
 
+      - script: |
+          yarn bundle-size compare-reports --branch=$(System.PullRequest.TargetBranch) --output=markdown --verbose
+        displayName: compare bundle size with base (PR only)
+        condition: variables.isPR
+
+      - task: GithubPRComment@0
+        displayName: Post results to PR (PR only)
+        condition: eq(variables.isPR, true)
+        inputs:
+          githubOwner: microsoft
+          githubRepo: 'fluentui'
+          blobFilePath: 'packages/bundle-size/dist/bundle-size.md'
+          status: 'success'
+          uniqueId: 'bundleSizeComment9423'
+
       - script: |
           yarn bundle-size upload-report --branch=$(Build.SourceBranchName) --commit-sha $(Build.SourceVersion)
         displayName: upload a report (base only)

package.json

@@ -105,6 +105,7 @@
     "@types/jest-axe": "3.2.2",
     "@types/jju": "1.4.1",
     "@types/node": "10.17.55",
+    "@types/node-fetch": "2.5.7",
     "@types/prettier": "2.2.3",
     "@types/react": "16.9.42",
     "@types/react-dom": "16.9.10",
@@ -164,6 +165,7 @@
     "lage": "0.27.0",
     "lerna": "^3.21.0",
     "lint-staged": "^10.2.9",
+    "node-fetch": "2.6.1",
     "postcss": "8.2.10",
     "postcss-loader": "4.1.0",
     "postcss-modules": "4.1.3",
@@ -175,6 +177,7 @@
     "satisfied": "^1.1.1",
     "semver": "^6.2.0",
     "storybook-addon-performance": "0.14.0",
+    "strip-ansi": "6.0.0",
     "style-loader": "2.0.0",
     "syncpack": "5.6.10",
     "tsconfig-paths": "3.9.0",

packages/bundle-size/README.md

@@ -26,6 +26,14 @@ export default {
 
 ### Commands
 
+#### `compare-reports`
+
+Compares local (requires call of `bundle-size measure` first) and remote results, provides output to CLI or to a Markdown file.
+
+```sh
+yarn bundle-size compare-reports --branch=main --output=["cli"|"markdown"] [--quiet]
+```
+
 #### `measure`
 
 ```sh

packages/bundle-size/__fixture__/sampleComparedReport.js

@@ -0,0 +1,41 @@
+const { emptyDiff } = require('../src/utils/compareResultsInReports');
+
+/** @type {import('../src/utils/compareResultsInReports').ComparedReport} */
+const sampleComparedReport = [
+  {
+    packageName: 'foo-package',
+    name: 'New entry',
+    path: 'foo.fixture.js',
+    minifiedSize: 1000,
+    gzippedSize: 100,
+    diff: emptyDiff,
+  },
+  {
+    packageName: 'bar-package',
+    name: 'An entry without diff',
+    path: 'bar.fixture.js',
+    minifiedSize: 1000,
+    gzippedSize: 100,
+    diff: {
+      empty: false,
+
+      minified: { delta: 0, percent: '0%' },
+      gzip: { delta: 0, percent: '0%' },
+    },
+  },
+  {
+    packageName: 'baz-package',
+    name: 'An entry with diff',
+    path: 'baz.fixture.js',
+    minifiedSize: 1000,
+    gzippedSize: 100,
+    diff: {
+      empty: false,
+
+      minified: { delta: 1000, percent: '100%' },
+      gzip: { delta: 100, percent: '100%' },
+    },
+  },
+];
+
+module.exports = sampleComparedReport;

packages/bundle-size/__fixture__/sampleReport.js

@@ -0,0 +1,26 @@
+/** @type {import('../src/utils/collectLocalReport').BundleSizeReport} */
+const sampleReport = [
+  {
+    packageName: 'foo-package',
+    name: 'New entry',
+    path: 'foo.fixture.js',
+    minifiedSize: 1000,
+    gzippedSize: 100,
+  },
+  {
+    packageName: 'bar-package',
+    name: 'An entry without diff',
+    path: 'bar.fixture.js',
+    minifiedSize: 1000,
+    gzippedSize: 100,
+  },
+  {
+    packageName: 'baz-package',
+    name: 'An entry with diff',
+    path: 'baz.fixture.js',
+    minifiedSize: 1000,
+    gzippedSize: 100,
+  },
+];
+
+module.exports = sampleReport;

packages/bundle-size/src/commands/compareReports.js

@@ -0,0 +1,82 @@
+const chalk = require('chalk');
+
+const cliReporter = require('../reporters/cliReporter');
+const markdownReporter = require('../reporters/markdownReporter');
+const collectLocalReport = require('../utils/collectLocalReport');
+const { compareResultsInReports } = require('../utils/compareResultsInReports');
+const getRemoteReport = require('../utils/getRemoteReport');
+const { hrToSeconds } = require('../utils/helpers');
+
+/**
+ * @param {typeof import('../index') & { branch: string, output: 'cli' | 'markdown' }} options
+ */
+async function compareReports(options) {
+  const { branch, output, quiet } = options;
+  const startTime = process.hrtime();
+
+  const localReportStartTime = process.hrtime();
+  const localReport = await collectLocalReport();
+
+  if (!quiet) {
+    console.log(
+      [chalk.blue('[i]'), `Local report prepared in ${hrToSeconds(process.hrtime(localReportStartTime))}`].join(' '),
+    );
+  }
+
+  const remoteReportStartTime = process.hrtime();
+  const { commitSHA, remoteReport } = await getRemoteReport(branch);
+
+  if (!quiet) {
+    if (commitSHA === '') {
+      console.log([chalk.blue('[i]'), `Remote report for "${branch}" branch was not found`].join(' '));
+    } else {
+      console.log(
+        [
+          chalk.blue('[i]'),
+          `Remote report for "${commitSHA}" commit fetched in ${hrToSeconds(process.hrtime(remoteReportStartTime))}`,
+        ].join(' '),
+      );
+    }
+  }
+
+  const result = compareResultsInReports(localReport, remoteReport);
+
+  switch (output) {
+    case 'cli':
+      await cliReporter(result);
+      break;
+    case 'markdown':
+      await markdownReporter(result, commitSHA, quiet);
+      break;
+  }
+
+  if (!quiet) {
+    console.log(`Completed in ${hrToSeconds(process.hrtime(startTime))}`);
+  }
+}
+
+// ---
+
+/** @type {import('yargs').CommandModule} */
+const api = {
+  command: 'compare-reports',
+  describe: 'compares local and remote results',
+  builder: {
+    branch: {
+      alias: 'b',
+      type: 'string',
+      description: 'A branch to compare against',
+      default: 'main',
+    },
+    output: {
+      alias: 'o',
+      type: 'string',
+      choices: ['cli', 'markdown'],
+      description: 'Defines a reporter to produce output',
+      default: 'cli',
+    },
+  },
+  handler: compareReports,
+};
+
+module.exports = api;

packages/bundle-size/src/commands/compareReports.test.js

@@ -0,0 +1,29 @@
+const getRemoteReport = jest.fn();
+const collectLocalReport = jest.fn();
+const compareResultsInReports = jest.fn();
+const cliReporter = jest.fn();
+
+jest.mock('../reporters/cliReporter', () => cliReporter);
+jest.mock('../utils/collectLocalReport', () => collectLocalReport);
+jest.mock('../utils/compareResultsInReports', () => ({ compareResultsInReports }));
+jest.mock('../utils/getRemoteReport', () => getRemoteReport);
+
+const sampleReport = require('../../__fixture__/sampleReport');
+const sampleComparedReport = require('../../__fixture__/sampleComparedReport');
+const { handler } = require('./compareReports');
+
+describe('compareReports', () => {
+  it('fetches remote report and compares it with a local data', async () => {
+    const branchName = 'master';
+
+    getRemoteReport.mockImplementation(() => ({ commitSHA: 'test', remoteReport: sampleReport }));
+    collectLocalReport.mockImplementation(() => sampleReport);
+    compareResultsInReports.mockImplementation(() => sampleComparedReport);
+
+    await handler({ quiet: true, branch: branchName, output: 'cli' });
+
+    expect(getRemoteReport).toHaveBeenCalledWith(branchName);
+    expect(compareResultsInReports).toHaveBeenCalledWith(sampleReport, sampleReport);
+    expect(cliReporter).toHaveBeenCalledWith(sampleComparedReport);
+  });
+});

packages/bundle-size/src/commands/measure.js

@@ -4,10 +4,9 @@ const fs = require('fs').promises;
 const del = require('del');
 const glob = require('glob');
 const path = require('path');
-const prettyBytes = require('pretty-bytes');
 
 const buildFixture = require('../utils/buildFixture');
-const { hrToSeconds } = require('../utils/helpers');
+const { formatBytes, hrToSeconds } = require('../utils/helpers');
 const prepareFixture = require('../utils/prepareFixture');
 
 /**
@@ -49,7 +48,7 @@ async function measure(options) {
     const sortedMeasurements = [...measurements].sort((a, b) => a.path.localeCompare(b.path));
 
     sortedMeasurements.forEach(r => {
-      table.push([r.name, prettyBytes(r.minifiedSize), prettyBytes(r.gzippedSize)]);
+      table.push([r.name, formatBytes(r.minifiedSize), formatBytes(r.gzippedSize)]);
     });
 
     console.log(table.toString());

packages/bundle-size/src/index.js

@@ -1,13 +1,14 @@
 const yargs = require('yargs');
 
 const cliSetup = yargs
-  .commandDir('commands')
+  .commandDir('commands', { exclude: /.test\.js$/ })
   .option('quiet', {
     alias: 'q',
     type: 'boolean',
     description: 'Suppress verbose build output',
     default: false,
   })
+  .scriptName('bundle-size')
   .version(false).argv;
 
 module.exports = cliSetup;

packages/bundle-size/src/reporters/__snapshots__/markdownReporter.test.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`markdownReporter renders a report to a file 1`] = `
+"## 📊 Bundle size report
+
+| Package & Exports                                                                      | Baseline (minified/GZIP) |                  PR |                                                                                                                                                                                                                                                Change |
+| :------------------------------------------------------------------------------------- | -----------------------: | ------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+| <samp>baz-package</samp> <br /> <abbr title='baz.fixture.js'>An entry with diff</abbr> |      \`2 kB\`<br />\`200 B\` | \`1 kB\`<br />\`100 B\` | \`1 kB\` <img aria-hidden=\\"true\\" src=\\"https://microsoft.github.io/sizeAuditor-website/images/icons/IncreaseYellow.svg\\" /><br />\`100 B\` <img aria-hidden=\\"true\\" src=\\"https://microsoft.github.io/sizeAuditor-website/images/icons/IncreaseYellow.svg\\" /> |
+| <samp>foo-package</samp> <br /> <abbr title='foo.fixture.js'>New entry</abbr>          |         \`0 B\`<br />\`0 B\` | \`1 kB\`<br />\`100 B\` |                                                                                                                                                                                                                                          🆕 New entry |
+
+<details>
+<summary>Unchanged fixtures</summary>
+
+| Package & Exports                                                                         | Size (minified/GZIP) |
+| ----------------------------------------------------------------------------------------- | -------------------: |
+| <samp>bar-package</samp> <br /> <abbr title='bar.fixture.js'>An entry without diff</abbr> |  \`1 kB\`<br />\`100 B\` |
+
+</details>
+<sub>🤖 This report was generated against <a href='https://github.com/microsoft/fluentui/commit/commit-hash'>commit-hash</a></sub>
+"
+`;

packages/bundle-size/src/reporters/cliReporter.js

@@ -0,0 +1,72 @@
+const chalk = require('chalk');
+const Table = require('cli-table3');
+
+const getChangedEntriesInReport = require('../utils/getChangedEntriesInReport');
+const { formatBytes } = require('../utils/helpers');
+
+/**
+ * @param {number} value
+ *
+ * @return {string}
+ */
+function getDirectionSymbol(value) {
+  if (value < 0) {
+    return '↓';
+  }
+
+  if (value > 0) {
+    return '↑';
+  }
+
+  return '';
+}
+
+/**
+ * @param {import('../utils/calculateDiffByMetric').DiffByMetric} diff
+ *
+ * @return {string}
+ */
+function formatDelta({ delta, percent }) {
+  if (delta === 0) {
+    return '';
+  }
+
+  const colorFn = delta > 0 ? chalk.red : chalk.green;
+
+  return colorFn(percent + getDirectionSymbol(delta));
+}
+
+/**
+ * @param {import('../utils/compareResultsInReports').ComparedReport} report
+ */
+module.exports = async function cliReporter(report) {
+  const result = new Table({
+    colAligns: ['left', 'right', 'right'],
+    head: ['Fixture', 'Before', 'After (minified/GZIP)'],
+  });
+  const { changedEntries } = getChangedEntriesInReport(report);
+
+  changedEntries.forEach(entry => {
+    const { diff, gzippedSize, minifiedSize, name, packageName } = entry;
+    const fixtureColumn = chalk.bold(packageName) + '\n' + name + (diff.empty ? chalk.cyan(' (new)') : '');
+
+    const minifiedBefore = diff.empty ? 'N/A' : formatBytes(minifiedSize + diff.minified.delta);
+    const gzippedBefore = diff.empty ? 'N/A' : formatBytes(gzippedSize + diff.gzip.delta);
+
+    const minifiedAfter = formatBytes(minifiedSize);
+    const gzippedAfter = formatBytes(gzippedSize);
+
+    const beforeColumn = minifiedBefore + '\n' + gzippedBefore;
+    const afterColumn =
+      formatDelta(diff.minified) + ' ' + minifiedAfter + '\n' + formatDelta(diff.gzip) + ' ' + gzippedAfter;
+
+    result.push([fixtureColumn, beforeColumn, afterColumn]);
+  });
+
+  if (result.length > 0) {
+    console.log(result.toString());
+    return;
+  }
+
+  console.log(`${chalk.green('[✔]')} No changes found`);
+};