feat(build): add vite-build-logger

utils/plugins/vite-build-logger.ts

@@ -0,0 +1,81 @@
+import chalk from 'chalk';
+import type { Plugin } from 'vite';
+
+/**
+ * Options to configure the build logger.
+ */
+interface BuildLoggerOptions {
+    includeEnvVars?: string[]; // Specific env vars to display
+    includeTimestamp?: boolean;
+    includeBuildTime?: boolean;
+    customMetadata?: Record<string, () => string | Promise<string>>;
+}
+
+/**
+ * Vite plugin to log build information.
+ *
+ * @param Options - to configure the build logger.
+ *
+ * @returns Vite plugin object.
+ */
+export function buildLogger(options: BuildLoggerOptions = {}): Plugin {
+    const startTime = Date.now();
+
+    return {
+        name: 'vite-build-logger',
+        enforce: 'post',
+
+        async closeBundle() {
+            console.log(`\n${chalk.bold.cyan('=== Build Information ===')}`);
+
+            // Environment
+            console.log(chalk.yellow('\nBuild Environment:'));
+            console.log(`🔧 Node Build Mode: ${process.env.NODE_ENV}`);
+            console.log(`🎯 Browser Target: ${process.env.BROWSER_TARGET}`);
+
+            // Timestamp
+            if (options.includeTimestamp) {
+                console.log(chalk.yellow('\nBuild Timestamp:'));
+                console.log(`📅 ${new Date().toISOString()}`);
+            }
+
+            // Build Time
+            if (options.includeBuildTime) {
+                const buildTime = Date.now() - startTime;
+                console.log(chalk.yellow('\nBuild Time:'));
+                console.log(`⏱️  ${buildTime}ms (${(buildTime / 1000).toFixed(2)}s)`);
+            }
+
+            // Selected Environment Variables
+            if (options.includeEnvVars?.length) {
+                console.log(chalk.yellow('\nEnvironment Variables:'));
+                for (const envVar of options.includeEnvVars) {
+                    if (process.env[envVar]) {
+                        // Mask sensitive variables that might contain tokens or keys
+                        const isSensitive =
+                            envVar.toLowerCase().includes('key') ||
+                            envVar.toLowerCase().includes('token') ||
+                            envVar.toLowerCase().includes('secret');
+
+                        const value = isSensitive ? '****' : process.env[envVar];
+                        console.log(`${envVar}: ${value}`);
+                    } else {
+                        console.log(`${envVar}: ${chalk.red('Not defined')}`);
+                    }
+                }
+            }
+
+            // Custom Metadata
+            if (options.customMetadata) {
+                console.log(chalk.yellow('\nCustom Metadata:'));
+                for (const [key, getter] of Object.entries(options.customMetadata)) {
+                    // eslint-disable-next-line no-await-in-loop
+                    const value = await getter();
+                    console.log(`${key}: ${value}`);
+                }
+            }
+
+            console.log(`\n${chalk.bold.cyan('=====================')}\n`);
+        },
+    };
+}

vite.config.ts

@@ -1,6 +1,7 @@
 /// <reference types="vitest" />
 import { crx } from '@crxjs/vite-plugin';
 import react from '@vitejs/plugin-react-swc';
+import { execSync } from 'child_process';
 import { resolve } from 'path';
 import UnoCSS from 'unocss/vite';
 import Icons from 'unplugin-icons/vite';
@@ -11,17 +12,27 @@ import inspect from 'vite-plugin-inspect';
 import packageJson from './package.json';
 import manifest from './src/manifest';
 import vitePluginRunCommandOnDemand from './utils/plugins/run-command-on-demand';
+import { buildLogger } from './utils/plugins/vite-build-logger';
+
+const BROWSER_TARGET = process.env.BROWSER_TARGET || 'chrome';
+
+// Set browser target environment variable default
+process.env.BROWSER_TARGET = BROWSER_TARGET;
 
 const root = resolve(__dirname, 'src');
 const pagesDir = resolve(root, 'pages');
 const assetsDir = resolve(root, 'assets');
 const publicDir = resolve(__dirname, 'public');
 
+// Set default environment variables
+process.env.PROD = process.env.NODE_ENV === 'production' ? 'true' : 'false';
+
 const isBeta = !!process.env.BETA;
 if (isBeta) {
     process.env.VITE_BETA_BUILD = 'true';
 }
 process.env.VITE_PACKAGE_VERSION = packageJson.version;
+// TODO: Debug this. If PROD is false, VITE_SENTRY_ENVIRONMENT is in production mode
 if (process.env.PROD) {
     process.env.VITE_SENTRY_ENVIRONMENT = 'production';
 } else if (isBeta) {
@@ -162,6 +173,23 @@ export default defineConfig({
             // afterServerStart: 'pnpm gulp forceDisableUseDynamicUrl',
             closeBundle: 'pnpm gulp forceDisableUseDynamicUrl',
         }),
+        buildLogger({
+            includeEnvVars: [
+                'VITE_PACKAGE_VERSION',
+                'NODE_ENV',
+                'BROWSER_TARGET',
+                'PROD',
+                'VITE_SENTRY_ENVIRONMENT',
+                'VITE_BETA_BUILD',
+            ],
+            includeTimestamp: true,
+            includeBuildTime: true,
+            customMetadata: {
+                gitBranch: () => execSync('git rev-parse --abbrev-ref HEAD').toString().trim(),
+                gitCommit: () => execSync('git rev-parse --short HEAD').toString().trim(),
+                nodeVersion: () => process.version,
+            },
+        }),
     ],
     resolve: {
         alias: {
@@ -205,6 +233,8 @@ export default defineConfig({
     },
     build: {
         target: ['chrome120', 'edge120', 'firefox120'],
+        // NOTE: Eventually we will add this back once we support multiple browsers
+        // outDir: `dist/${process.env.BROWSER_TARGET || 'chrome'}`,
         emptyOutDir: true,
         reportCompressedSize: false,
         sourcemap: true,