Using travis-size-report (#596)

* Using travis-size-report

* No maps in size report

config/size-report.js

@@ -1,203 +0,0 @@
-const path = require('path');
-const { URL } = require('url');
-
-const gzipSize = require('gzip-size');
-const fetch = require('node-fetch');
-const prettyBytes = require('pretty-bytes');
-const escapeRE = require('escape-string-regexp');
-const readdirp = require('readdirp');
-const chalk = new require('chalk').constructor({ level: 4 });
-
-function fetchTravis(path, options = {}) {
-  const url = new URL(path, 'https://api.travis-ci.org');
-  url.search = new URLSearchParams(options);
-
-  return fetch(url, {
-    headers: { 'Travis-API-Version': '3' },
-  });
-}
-
-function fetchTravisBuildInfo(user, repo, branch) {
-  return fetchTravis(`/repo/${encodeURIComponent(`${user}/${repo}`)}/builds`, {
-    'branch.name': branch,
-    state: 'passed',
-    limit: 1,
-    event_type: 'push',
-  }).then(r => r.json());
-}
-
-function fetchTravisText(path) {
-  return fetchTravis(path).then(r => r.text());
-}
-
-/**
- * Recursively-read a directory and turn it into an array of { name, size, gzipSize }
- */
-async function dirToInfoArray(startPath) {
-  const results = await new Promise((resolve, reject) => {
-    readdirp({ root: startPath }, (err, results) => {
-      if (err) reject(err); else resolve(results);
-    });
-  });
-
-  return Promise.all(
-    results.files.map(async (entry) => ({
-      name: entry.path,
-      gzipSize: await gzipSize.file(entry.fullPath),
-      size: entry.stat.size,
-    })),
-  );
-}
-
-/**
- * Try to treat two entries with different file name hashes as the same file.
- */
-function findHashedMatch(name, buildInfo) {
-  const nameParts = /^(.+\.)[a-f0-9]+(\..+)$/.exec(name);
-  if (!nameParts) return;
-
-  const matchRe = new RegExp(`^${escapeRE(nameParts[1])}[a-f0-9]+${escapeRE(nameParts[2])}$`);
-  const matchingEntry = buildInfo.find(entry => matchRe.test(entry.name));
-  return matchingEntry;
-}
-
-const buildSizePrefix = '=== BUILD SIZES: ';
-const buildSizePrefixRe = new RegExp(`^${escapeRE(buildSizePrefix)}(.+)$`, 'm');
-
-async function getPreviousBuildInfo() {
-  const buildData = await fetchTravisBuildInfo('GoogleChromeLabs', 'squoosh', 'master');
-  const jobUrl = buildData.builds[0].jobs[0]['@href'];
-  const log = await fetchTravisText(jobUrl + '/log.txt');
-  const reResult = buildSizePrefixRe.exec(log);
-
-  if (!reResult) return;
-  return JSON.parse(reResult[1]);
-}
-
-/**
- * Generate an array that represents the difference between builds.
- * Returns an array of { beforeName, afterName, beforeSize, afterSize }.
- * Sizes are gzipped size.
- * Before/after properties are missing if resource isn't in the previous/new build.
- */
-function getChanges(previousBuildInfo, buildInfo) {
-  const buildChanges = [];
-  const alsoInPreviousBuild = new Set();
-
-  for (const oldEntry of previousBuildInfo) {
-    const newEntry = buildInfo.find(entry => entry.name === oldEntry.name) ||
-      findHashedMatch(oldEntry.name, buildInfo);
-
-    // Entry is in previous build, but not the new build.
-    if (!newEntry) {
-      buildChanges.push({
-        beforeName: oldEntry.name,
-        beforeSize: oldEntry.gzipSize,
-      });
-      continue;
-    }
-
-    // Mark this entry so we know we've dealt with it.
-    alsoInPreviousBuild.add(newEntry);
-
-    // If they're the same, just ignore.
-    // Using size rather than gzip size. I've seen different platforms produce different zipped
-    // sizes.
-    if (
-      oldEntry.size === newEntry.size &&
-      oldEntry.name === newEntry.name
-    ) continue;
-
-    // Entry is in both builds (maybe renamed).
-    buildChanges.push({
-      beforeName: oldEntry.name,
-      afterName: newEntry.name,
-      beforeSize: oldEntry.gzipSize,
-      afterSize: newEntry.gzipSize,
-    });
-  }
-
-  // Look for entries that are only in the new build.
-  for (const newEntry of buildInfo) {
-    if (alsoInPreviousBuild.has(newEntry)) continue;
-
-    buildChanges.push({
-      afterName: newEntry.name,
-      afterSize: newEntry.gzipSize,
-    });
-  }
-
-  return buildChanges;
-}
-
-async function main() {
-  // Output the current build sizes for later retrieval.
-  const buildInfo = await dirToInfoArray(__dirname + '/../build');
-  console.log(buildSizePrefix + JSON.stringify(buildInfo));
-  console.log('\nBuild change report:');
-
-  let previousBuildInfo;
-
-  try {
-    previousBuildInfo = await getPreviousBuildInfo();
-  } catch (err) {
-    console.log(`  Couldn't parse previous build info`);
-    return;
-  }
-
-  if (!previousBuildInfo) {
-    console.log(`  Couldn't find previous build info`);
-    return;
-  }
-
-  const buildChanges = getChanges(previousBuildInfo, buildInfo);
-
-  if (buildChanges.length === 0) {
-    console.log('  No changes');
-    return;
-  }
-
-  // One letter references, so it's easier to get the spacing right.
-  const y = chalk.yellow;
-  const g = chalk.green;
-  const r = chalk.red;
-
-  for (const change of buildChanges) {
-    // New file.
-    if (!change.beforeSize) {
-      console.log(`  ${g('ADDED')}   ${change.afterName} - ${prettyBytes(change.afterSize)}`);
-      continue;
-    }
-
-    // Removed file.
-    if (!change.afterSize) {
-      console.log(`  ${r('REMOVED')} ${change.beforeName} - was ${prettyBytes(change.beforeSize)}`);
-      continue;
-    }
-
-    // Changed file.
-    let size;
-
-    if (change.beforeSize === change.afterSize) {
-      // Just renamed.
-      size = `${prettyBytes(change.afterSize)} -> no change`;
-    } else {
-      const color = change.afterSize > change.beforeSize ? r : g;
-      const sizeDiff = prettyBytes(change.afterSize - change.beforeSize, { signed: true });
-      const relativeDiff = Math.round((change.afterSize / change.beforeSize) * 1000) / 1000;
-
-      size = `${prettyBytes(change.beforeSize)} -> ${prettyBytes(change.afterSize)}` +
-        ' (' +
-        color(`${sizeDiff}, ${relativeDiff}x`) +
-        ')';
-    }
-
-    console.log(`  ${y('CHANGED')} ${change.afterName} - ${size}`);
-
-    if (change.beforeName !== change.afterName) {
-      console.log(`    Renamed from: ${change.beforeName}`);
-    }
-  }
-}
-
-main();

package.json

@@ -8,7 +8,7 @@
     "build": "webpack -p",
     "lint": "tslint -c tslint.json  -p tsconfig.json -t verbose",
     "lintfix": "tslint -c tslint.json -p tsconfig.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'",
-    "sizereport": "node config/size-report.js"
+    "sizereport": "sizereport --config"
   },
   "husky": {
     "hooks": {
@@ -22,8 +22,8 @@
     "@webcomponents/custom-elements": "1.2.4",
     "@webpack-cli/serve": "0.1.5",
     "assets-webpack-plugin": "3.9.10",
-    "chokidar": "3.0.0",
     "chalk": "2.4.2",
+    "chokidar": "3.0.0",
     "classnames": "2.2.6",
     "clean-webpack-plugin": "1.0.1",
     "comlink": "3.1.1",
@@ -58,6 +58,7 @@
     "source-map-loader": "0.2.4",
     "style-loader": "0.23.1",
     "terser-webpack-plugin": "1.2.4",
+    "travis-size-report": "^1.0.1",
     "ts-loader": "6.0.1",
     "tslint": "5.16.0",
     "tslint-config-airbnb": "5.11.1",

sizereport.config.js

@@ -0,0 +1,14 @@
+const escapeRE = require("escape-string-regexp");
+
+module.exports = {
+  repo: "GoogleChromeLabs/squoosh",
+  path: "build/**/!(*.map)",
+  branch: "master",
+  findRenamed(path, newPaths) {
+    const nameParts = /^(.+\.)[a-f0-9]+(\..+)$/.exec(path);
+    if (!nameParts) return;
+
+    const matchRe = new RegExp(`^${escapeRE(nameParts[1])}[a-f0-9]+${escapeRE(nameParts[2])}$`);
+    return newPaths.find(newPath => matchRe.test(newPath));
+  }
+};