@bigbinary/neeto-commons-frontend 4.13.76 → 4.13.77

package/configs/esbuild/index.js

@@ -24,6 +24,7 @@ const postCssConfig = require("../../../../../postcss.config.js");
 const commonResolve = require("../webpack/resolve.js");
 
 const isProduction = process.env.NODE_ENV === "production";
+const enableMetafile = process.argv.includes("--analyze");
 const isWatchMode = process.argv.includes("--watch");
 const assetHost =
   process.env.ASSET_HOST &&
@@ -39,6 +40,7 @@ const config = {
   publicPath: `${assetHost ?? ""}/assets`,
   bundle: true,
   splitting: true,
+  metafile: enableMetafile,
   outdir: path.join(process.cwd(), "app/assets/builds"),
   minify: isProduction,
   sourcemap: isWatchMode ? true : "external",
@@ -68,7 +70,6 @@ const config = {
   conditions: ["style"],
   logLevel: isWatchMode ? "info" : "error",
   format: "esm",
-  metafile: true,
   platform: "browser",
   mainFields: ["browser", "module", "main"],
   loader: {

package/configs/esbuild/utils.js

@@ -1,5 +1,7 @@
 const esbuild = require("esbuild");
 const path = require("path");
+const fs = require("fs");
+const { execSync, spawn } = require("child_process");
 
 // colors for console output
 const consoleColors = {
@@ -19,16 +21,61 @@ const createDefinitions = process => {
 
 const entryPoint = file => path.join(process.cwd(), file);
 
+const writeMetafile = (metafile, outdir) => {
+  const metaFilePath = path.join(outdir, "meta.json");
+  fs.writeFileSync(metaFilePath, JSON.stringify(metafile, null, 2));
+  return metaFilePath;
+};
+
+const generateBundleReport = async (metaFilePath, outdir) => {
+  try {
+    console.info(
+      `${consoleColors.info}[bundle-analyzer]${consoleColors.reset} Generating bundle report...`
+    );
+
+    const htmlFilePath = path.join(outdir, "bundle-report.html");
+    execSync(
+      `npx esbuild-visualizer --metadata ${metaFilePath} --filename ${htmlFilePath}`,
+      { stdio: "inherit" }
+    );
+
+    console.info(
+      `${consoleColors.success}[bundle-analyzer]${consoleColors.reset} Bundle report generated at ${htmlFilePath}`
+    );
+
+    const command = process.platform === "win32" ? "start" : "open";
+    spawn(command, [htmlFilePath], { detached: true, stdio: "ignore" });
+    console.info(
+      `${consoleColors.success}[bundle-analyzer]${consoleColors.reset} Bundle report opened in browser`
+    );
+
+    return htmlFilePath;
+  } catch (error) {
+    console.error(
+      `${consoleColors.error}[bundle-analyzer]${consoleColors.reset} Failed to generate bundle report: ${error.message}`
+    );
+    throw error;
+  }
+};
+
 const build = async config => {
   try {
     console.info(
       `${consoleColors.info}[esbuild]${consoleColors.reset} Building...`
     );
-    await esbuild.build(config);
+
+    const result = await esbuild.build(config);
+
+    if (result.metafile) {
+      const metaFilePath = writeMetafile(result.metafile, config.outdir);
+      await generateBundleReport(metaFilePath, config.outdir);
+    }
+
     console.info(
       `${consoleColors.success}[esbuild]${consoleColors.reset} Build successful`
     );
-  } catch {
+  } catch (error) {
+    console.error(`Build error: ${error.message}`);
     const errorMessage = `${consoleColors.error}[esbuild]${consoleColors.reset} Build failed`;
     throw new Error(errorMessage);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-commons-frontend",
-  "version": "4.13.76",
+  "version": "4.13.77",
   "description": "A package encapsulating common code across neeto projects including initializers, utility functions, common components and hooks and so on.",
   "repository": "git@github.com:bigbinary/neeto-commons-frontend.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",
@@ -150,6 +150,7 @@
     "esbuild-plugins-node-modules-polyfill": "^1.6.8",
     "esbuild-rails": "^1.0.7",
     "esbuild-sass-plugin": "^3.3.1",
+    "esbuild-visualizer": "^0.4.0",
     "eslint": "^9.25.1",
     "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-import": "^2.31.0",