Another log reformat

Author: kristoferbaxter

log.ts

@@ -16,13 +16,14 @@
 
 const kleur = require('kleur');
 const bytes = require('bytes');
-import { ItemConfig, CompressionMap, Context } from './validation/Condition';
+import { ItemConfig, CompressionMap, Context, OrderedCompressionValues } from './validation/Condition';
 
 // Disable output colors for test runs.
 kleur.enabled = !('AVA_PATH' in process.env);
 
 // Aliases to colors used.
-const { red, grey, green, bold } = kleur;
+// @ts-ignore
+const { red, grey, yellow, green, bold, dim } = kleur;
 
 /**
  * Format output as an error message.
@@ -49,71 +50,102 @@ function prettyBytes(size: number): string {
 }
 
 /**
- * Given a compression type, format it to a human readable file extension.
+ *
+ * @param size
+ * @param maxSize
+ * @param maxWidth
+ */
+function displaySize(size: number | null, maxSize: number | null, maxWidth: number): [boolean | null, string] {
+  if (size === null || maxSize === null) {
+    return [null, dim().grey('–'.padEnd(maxWidth))];
+  } else if (size < maxSize) {
+    if (1 - size / maxSize < 0.05) {
+      return [true, yellow(prettyBytes(size).padEnd(maxWidth))];
+    }
+    return [true, dim().green(prettyBytes(size).padEnd(maxWidth))];
+  } else {
+    return [false, red(prettyBytes(size).padEnd(maxWidth))];
+  }
+}
+
+/**
+ *
+ * @param report
+ * @param paths
  * @param compression
  */
-function compressedExtension(compression: string): string {
-  if (compression === 'none') {
-    return ''.padEnd(3);
+function maxLengthForCompression(report: Map<ItemConfig['path'], CompressionMap>, paths: Array<string>, compression: string): number {
+  const reportedValueStrings: Array<number> = [];
+
+  for (const path of paths) {
+    const value = report.get(path)?.get(compression);
+    if (value) {
+      const [size] = value;
+      if (size !== null) {
+        reportedValueStrings.push(prettyBytes(size).length);
+      }
+    }
   }
-  return '.' + compression.substring(0, 2);
+
+  return Math.max.apply(null, reportedValueStrings) + 2;
+}
+
+/**
+ * Given a compression type, format it to a human readable file extension.
+ * @param compression
+ */
+function compressedExtension(compression: string, padEnd: number): string {
+  return compression.padEnd(padEnd);
 }
 
 /**
  * Display report to the console.
  * @param report
  */
 export function LogReport({ silent }: Context, report: Map<ItemConfig['path'], CompressionMap>) {
+  if (silent) {
+    return;
+  }
+
+  const paths = Array.from(report.keys());
+  const pathMaxLength = Math.max.apply(
+    null,
+    paths.map(path => path.length + 2),
+  );
+  const formatMaxLengths = OrderedCompressionValues.map(compression => maxLengthForCompression(report, paths, compression));
+  const compressionHeaders = OrderedCompressionValues.map((compression, index) => compressedExtension(compression, formatMaxLengths[index]));
   let success: number = 0;
   let failure: number = 0;
 
-  if (!silent && [...report.keys()].length > 0) {
-    console.log(bold('\nFilesize Report'));
-    for (const [originalPath, values] of report) {
-      const multipleOutputs = Array.from(values.values()).filter(([before]) => before !== null).length > 1;
-      if (multipleOutputs) {
-        console.log(grey(`\npath: ${originalPath}`));
-        for (const [compression, compressionResults] of values) {
-          const [size, maxSize] = compressionResults;
-          const compressedPath = originalPath + grey(compressedExtension(compression));
-          if (size === null || maxSize === null) {
-            continue;
-          } else if (size < maxSize) {
-            success++;
-            console.log(`  ✔️  ${compressedPath} ${prettyBytes(size)} ${green('<')} ${prettyBytes(maxSize)}`);
-          } else {
-            failure++;
-            console.log(`  ❌ ${compressedPath} ${prettyBytes(size)} ${red('>')} ${prettyBytes(maxSize)}`);
-          }
-        }
-      } else {
-        const maximumPath =
-          Math.max.apply(
-            null,
-            Array.from(report.keys()).map(item => item.length),
-          ) + 1;
-        for (const [compression, compressionResults] of values) {
-          const [size, maxSize] = compressionResults;
-          const compressedPath = originalPath + grey(compressedExtension(compression)) + new Array(maximumPath - originalPath.length).join(' ');
-          if (size === null || maxSize === null) {
-            continue;
-          } else if (size < maxSize) {
-            success++;
-            console.log(`  ✔️  ${compressedPath} ${prettyBytes(size)} ${green('<')} ${prettyBytes(maxSize)}`);
-          } else {
-            failure++;
-            console.log(`  ❌ ${compressedPath} ${prettyBytes(size)} ${red('>')} ${prettyBytes(maxSize)}`);
-          }
-        }
-      }
+  console.log(bold('\nFilesizes'));
+  console.log(''.padEnd(pathMaxLength) + ' ' + compressionHeaders.join(''));
+  for (const path of paths) {
+    const compressionMap = report.get(path);
+    if (!compressionMap) {
+      continue;
     }
-    if (success > 0 || failure > 0) {
-      console.log('\n  ' + green(success + ` ${success === 1 ? 'check' : 'checks'} passed`) + (failure === 0 ? ' 🎉' : ''));
-      const failureColor = failure < 1 ? grey : red;
-      console.log('  ' + failureColor(failure + ` ${failure === 1 ? 'check' : 'checks'} failed`));
+
+    let message = path.padEnd(pathMaxLength) + ' ';
+    let compressionIndex = 0;
+    for (const compression of OrderedCompressionValues) {
+      const padding = compressionHeaders[compressionIndex].length;
+      const [size, maxSize] = compressionMap.get(compression) as [number | null, number | null];
+
+      const [successful, compressionMessage] = displaySize(size, maxSize, padding);
+      if (successful) {
+        success++;
+      } else if (successful !== null) {
+        failure++;
+      }
+      message += compressionMessage;
+      compressionIndex++;
     }
-    console.log();
-  } else if (!silent) {
-    MakeError('No report available.');
+    console.log(message);
+  }
+  if (success > 0 || failure > 0) {
+    console.log('\n  ' + green(success + ` ${success === 1 ? 'check' : 'checks'} passed`) + (failure === 0 ? ' 🎉' : ''));
+    const failureColor = failure < 1 ? grey : red;
+    console.log('  ' + failureColor(failure + ` ${failure === 1 ? 'check' : 'checks'} failed`));
   }
+  console.log();
 }

package.json

@@ -58,12 +58,15 @@
   },
   "filesize": {
     "./dist/filesize": {
-      "brotli": "3.5 kB",
+      "brotli": "3 kB",
       "gzip": "3.6 kB",
       "none": "20 kB"
     },
     "./dist/index.js": {
       "brotli": "10 kB"
+    },
+    "./dist/api.mjs": {
+      "gzip": "10 kB"
     }
   },
   "ava": {

test/tsconfig.json

@@ -7,7 +7,7 @@
     "outDir": "output",
     "sourceMap": true,
     "moduleResolution": "node",
-    "target": "esnext",
+    "target": "ES2019",
     "module": "commonjs",
     "allowJs": false,
     "noUnusedLocals": true,

tsconfig.json

@@ -7,7 +7,7 @@
     "outDir": "output",
     "sourceMap": true,
     "moduleResolution": "node",
-    "target": "esnext",
+    "target": "ES2019",
     "module": "esnext",
     "allowJs": false,
     "noUnusedLocals": true,

validation/Condition.ts

@@ -21,7 +21,7 @@ export enum Compression {
   GZIP = 'gzip',
   BROTLI = 'brotli',
 }
-const OrderedCompressionValues = [Compression.BROTLI, Compression.GZIP, Compression.NONE];
+export const OrderedCompressionValues = [Compression.BROTLI, Compression.GZIP, Compression.NONE];
 
 export type CompressionMapValue = [number | null, number | null];
 export type CompressionMap = Map<string, CompressionMapValue>;