fix(build-stats): esbuild and webpack stats under build-stats dir (#595)

* fix(build-stats): esbuild and webpack stats under build-stats dir

* chore(one-app-bundler/build-stats): micro refactor build stats path

packages/one-app-bundler/bin/postProcessOneAppBundle.js

@@ -39,8 +39,14 @@ module.exports = async function postProcessBuild() {
   };
   const { hash } = await hashElement(tmpPath, options);
   const buildVersion = `${version}-${hash.slice(0, 8)}`;
-  const modernBrowserChunkAssets = require(path.resolve(pkgPath, '../.webpack-stats.browser.json')).assetsByChunkName;
-  const legacyBrowserChunkAssets = require(path.resolve(pkgPath, '../.webpack-stats.legacyBrowser.json')).assetsByChunkName;
+
+  const buildStatsPath = path.resolve(pkgPath, '../.build-stats');
+
+  if (!fs.existsSync(buildStatsPath)) {
+    fs.mkdirSync(buildStatsPath);
+  }
+  const modernBrowserChunkAssets = require(path.resolve(buildStatsPath, '.webpack-stats.browser.json')).assetsByChunkName;
+  const legacyBrowserChunkAssets = require(path.resolve(buildStatsPath, '.webpack-stats.legacyBrowser.json')).assetsByChunkName;
 
   fs.renameSync(tmpPath, path.resolve(tmpPath, `../${buildVersion}`));
   const metaFilePath = path.resolve(pkgPath, '../.build-meta.json');

packages/one-app-bundler/bin/webpackCallback.js

@@ -42,7 +42,12 @@ module.exports = function getWebpackCallback(label, isModuleBuild) {
       });
     }
 
-    fs.writeFileSync(path.join(process.cwd(), `.webpack-stats.${label}.json`), JSON.stringify(jsonStats));
+    const buildStatsPath = path.join(process.cwd(), '.build-stats');
+    if (!fs.existsSync(buildStatsPath)) {
+      fs.mkdirSync(buildStatsPath);
+    }
+
+    fs.writeFileSync(path.join(buildStatsPath, `.webpack-stats.${label}.json`), JSON.stringify(jsonStats));
 
     if (isModuleBuild) {
       generateIntegrityManifest(

packages/one-app-dev-bundler/__tests__/esbuild/plugins/time-build.spec.js

@@ -24,7 +24,9 @@ jest.spyOn(console, 'log');
 jest.mock('node:fs', () => ({
   promises: {
     writeFile: jest.fn(),
+    mkdir: jest.fn(),
   },
+  existsSync: jest.fn(() => true),
 }));
 
 describe('Esbuild plugin timeBuild', () => {
@@ -89,8 +91,35 @@ describe('Esbuild plugin timeBuild', () => {
         expect(console.log).toHaveBeenCalledTimes(1);
         expect(console.log).toHaveBeenCalledWith('mockBundleName bundle built in 3ms');
         expect(fs.promises.writeFile).toHaveBeenCalledTimes(1);
-        expect(fs.promises.writeFile).toHaveBeenCalledWith('.esbuild-stats.mockBundleName.json', '{"file.js":{},"durationMs":3}');
+        expect(fs.promises.writeFile).toHaveBeenCalledWith('./.build-stats/.esbuild-stats.mockBundleName.json', '{"file.js":{},"durationMs":3}');
       });
+
+      it('creates .build-stats directory if it does not exist', async () => {
+        fs.existsSync.mockReturnValue(false);
+
+        const plugin = timeBuild({ bundleName: 'mockBundleName', watch: false });
+        const hooks = runSetupAndGetLifeHooks(plugin);
+        const onStart = hooks.onStart[0];
+        const onEnd = hooks.onEnd[0];
+
+        process.hrtime.bigint.mockImplementation(() => BigInt(1000000)); // 1ms in nanoseconds
+        onStart(); // call onStart to load in the start time
+        jest.clearAllMocks();
+
+        process.hrtime.bigint.mockImplementation(() => BigInt(4000000)); // 4ms in nanoseconds
+
+        await onEnd({
+          metafile: {
+            outputs: {
+              'file.js': {},
+            },
+          },
+        });
+
+        expect(fs.promises.mkdir).toHaveBeenCalledTimes(1);
+        expect(fs.promises.mkdir).toHaveBeenCalledWith('.build-stats');
+      });
+
       it('should sanatize bundlename replacing `/` with `-`', async () => {
         const plugin = timeBuild({ bundleName: '@scoped/mockBundleName', watch: false });
         const hooks = runSetupAndGetLifeHooks(plugin);
@@ -111,7 +140,7 @@ describe('Esbuild plugin timeBuild', () => {
           },
         });
 
-        expect(fs.promises.writeFile).toHaveBeenCalledWith('[email protected]', '{"file.js":{},"durationMs":3}');
+        expect(fs.promises.writeFile).toHaveBeenCalledWith('./.build-stats/.[email protected]', '{"file.js":{},"durationMs":3}');
       });
       it('should not log in watch mode', async () => {
         const plugin = timeBuild({ bundleName: 'mockBundleName', watch: true });

packages/one-app-dev-bundler/__tests__/utils/analyze-bundles.spec.js

@@ -43,7 +43,7 @@ describe('analyze-bundles', () => {
     jest.clearAllMocks();
   });
 
-  it('reports the analysis comparting webpack vs esbuild', async () => {
+  it('reports the analysis comparing webpack vs esbuild', async () => {
     fs.promises.readFile.mockImplementation((absolutePath) => {
       const fileName = absolutePath.split(path.sep).reverse()[0];
 

packages/one-app-dev-bundler/esbuild/plugins/time-build.js

@@ -32,7 +32,10 @@ const timeBuild = ({ bundleName, watch }) => ({
       if (!watch) { // watch has its own logging
         console.log(`${bundleName} bundle built in ${result.durationMs}ms`);
         const sanitizedName = bundleName.replace('/', '-');
-        await fs.promises.writeFile(`.esbuild-stats.${sanitizedName}.json`, JSON.stringify({
+        if (!fs.existsSync('.build-stats')) {
+          await fs.promises.mkdir('.build-stats');
+        }
+        await fs.promises.writeFile(`./.build-stats/.esbuild-stats.${sanitizedName}.json`, JSON.stringify({
           ...result.metafile.outputs,
           durationMs: result.durationMs,
         }));

packages/one-app-dev-bundler/utils/analyze-bundles.js

@@ -25,7 +25,7 @@ const BUNDLERS = ['webpack', 'esbuild'];
 
 const readStatsFile = async (fileName) => {
   try {
-    const content = await fs.promises.readFile(path.resolve(process.cwd(), fileName), 'utf-8');
+    const content = await fs.promises.readFile(path.resolve(process.cwd(), '.build-stats', fileName), 'utf-8');
 
     return content;
   } catch (error) {