feat: Good looking console output

Author: aklinker1

src/cli/utils/defineCommand.ts

@@ -9,9 +9,10 @@ export function defineCommand(cb: (...args: any[]) => void | Promise<void>) {
 
       await cb(...args);
 
-      consola.success(`Done in ${Date.now() - startTime} ms`);
+      consola.success(`Finished in ${Date.now() - startTime} ms`);
     } catch (err) {
-      consola.fail(`Command failed after ${Date.now() - startTime} ms`, err);
+      consola.fail(`Command failed after ${Date.now() - startTime} ms`);
+      consola.error(err);
       process.exit(1);
     }
   };

src/cli/utils/printHeader.ts

@@ -3,5 +3,5 @@ import { version } from '../..';
 import { consola } from 'consola';
 
 export function printHeader() {
-  consola.log(`\n${pc.dim('Exvite')} ${pc.dim(pc.bold(version))}`);
+  consola.log(`\n${pc.gray('Exvite')} ${pc.gray(pc.bold(version))}`);
 }

src/index.ts

@@ -10,22 +10,34 @@ import { generateTypesDir } from './utils/generateTypesDir';
 export { version } from '../package.json';
 export * from './types/external';
 export * from './utils/defineConfig';
+import pc from 'picocolors';
 
 /**
  * Bundles the extension for production. Returns a promise of the build result.
  */
 export async function build(config: InlineConfig): Promise<BuildOutput> {
   const internalConfig = await getInternalConfig(config, 'build');
+  const verb = internalConfig.command === 'serve' ? 'Prerendering' : 'Building';
+  const target = `${internalConfig.browser}-mv${internalConfig.manifestVersion}`;
+  internalConfig.logger.info(
+    `${verb} ${pc.cyan(target)} for ${pc.cyan(internalConfig.mode)}`,
+  );
+
+  // Cleanup
   await fs.rm(internalConfig.outDir, { recursive: true, force: true });
   await fs.ensureDir(internalConfig.outDir);
 
+  // Build
   const entrypoints = await findEntrypoints(internalConfig);
   await generateTypesDir(entrypoints, internalConfig);
   const output = await buildEntrypoints(entrypoints, internalConfig);
 
+  // Write manifest
   const manifest = await generateMainfest(entrypoints, output, internalConfig);
-  await writeManifest(manifest, internalConfig);
+  await writeManifest(manifest, output, internalConfig);
 
+  // Post-build
+  internalConfig.logger.success('Entrypoints built');
   await printBuildSummary(output, internalConfig);
 
   return output;

src/types/external.ts

@@ -42,6 +42,7 @@ export interface Logger {
   warn(...args: any[]): void;
   error(...args: any[]): void;
   fatal(...args: any[]): void;
+  success(...args: any[]): void;
 }
 
 export interface BaseEntrypoint {

src/utils/printBuildSummary.ts

@@ -17,21 +17,32 @@ export async function printBuildSummary(
     return lWeight - rWeight;
   });
 
+  let totalSize = 0;
+
   const chunkRows: string[][] = await Promise.all(
-    chunks.map(async (chunk) => {
+    chunks.map(async (chunk, i) => {
       const file = [
         relative(process.cwd(), config.outDir) + path.sep,
         chunk.fileName,
       ];
       const ext = extname(chunk.fileName);
+      const prefix = i === chunks.length - 1 ? '  └─' : '  ├─';
       const color = CHUNK_COLORS[ext] ?? DEFAULT_COLOR;
       const stats = await fs.lstat(resolve(config.outDir, chunk.fileName));
+      totalSize += stats.size;
       const size = String(filesize(stats.size));
-      return [`${pc.dim(file[0])}${color(file[1])}`, pc.dim(size)];
+      return [
+        `${pc.gray(prefix)} ${pc.dim(file[0])}${color(file[1])}`,
+        pc.dim(size),
+      ];
     }),
   );
 
-  printTable(config.logger.log, [['Chunks'], ...chunkRows]);
+  printTable(config.logger.log, chunkRows);
+
+  config.logger.log(
+    `${pc.cyan('Σ Total size:')} ${String(filesize(totalSize))}`,
+  );
 }
 
 const DEFAULT_SORT_WEIGHT = 100;

src/utils/printTable.ts

@@ -21,7 +21,7 @@ export function printTable(
       str += col.padEnd(columnWidths[j], ' ');
       if (j !== row.length - 1) str += ''.padEnd(gap, ' ');
     });
-    str += '\n';
+    if (i !== rows.length - 1) str += '\n';
   });
 
   log(str);