@size-limit/esbuild-why: Automatically open esbuild reports (#328)

* feat: automatically open esbuild report on complete

* docs: update readme with auto open note

README.md

@@ -583,7 +583,7 @@ You will need to install `@size-limit/esbuild-why` or `@size-limit/webpack-why`
 depends on which bundler you are using (default is `esbuild`).
 
 For `@size-limit/esbuild-why`,
-it will generate a `esbuild-why.html` at the current directory.
+it will generate a `esbuild-why.html` at the current directory & open it in the browser.
 
 If you also specify `--save-bundle <DIR>`,
 the report will be generated inside `<DIR>`.

packages/esbuild-why/index.js

@@ -1,6 +1,7 @@
 let { visualizer } = require('esbuild-visualizer')
 let { join } = require('path')
 let { writeFileSync } = require('fs')
+let open = require('open')
 
 let { getReportName } = require('./report')
 
@@ -11,8 +12,16 @@ let self = {
     if (config.why && check.esbuildMetafile) {
       let result = await visualizer(check.esbuildMetafile)
       let file = join(config.saveBundle ?? '', getReportName(config, check))
+      check.esbuildVisualizerFile = file;
       writeFileSync(file, result)
     }
+  },
+  async finally(config, check) {
+    let {esbuildVisualizerFile} = check
+
+    if (esbuildVisualizerFile) {
+      await open(esbuildVisualizerFile)
+    }
   }
 }
 

packages/esbuild-why/package.json

@@ -20,7 +20,8 @@
     "size-limit": "8.2.4"
   },
   "dependencies": {
-    "esbuild-visualizer": "^0.4.0"
+    "esbuild-visualizer": "^0.4.0",
+    "open": "^8.4.2"
   },
   "devDependencies": {
     "@size-limit/esbuild": "workspace:^",

packages/esbuild-why/test/index.test.js

@@ -1,7 +1,10 @@
-let { readFile } = require('fs').promises
+let {readFile} = require('fs').promises
 let [esbuild] = require('@size-limit/esbuild')
-let { join } = require('path')
+let {join} = require('path')
 let rm = require('size-limit/rm')
+let open = require('open')
+
+jest.mock('open');
 
 let [esbuildWhy] = require('..')
 
@@ -22,7 +25,7 @@ it('supports --why', async () => {
     project: 'superProject',
     why: true,
     saveBundle: DIST,
-    checks: [{ files: [fixture('big.js')] }]
+    checks: [{files: [fixture('big.js')]}]
   }
   try {
     await esbuild.before(config)
@@ -37,3 +40,24 @@ it('supports --why', async () => {
     await esbuild.finally(config, config.checks[0])
   }
 })
+
+it('supports open esbuild visualizer on complete', async () => {
+  let config = {
+    project: 'superProject',
+    why: true,
+    saveBundle: DIST,
+    checks: [{files: [fixture('big.js')]}]
+  }
+  try {
+    await esbuild.before(config)
+    await esbuild.step20(config, config.checks[0])
+    await esbuild.step40(config, config.checks[0])
+    await esbuildWhy.step81(config, config.checks[0])
+  } finally {
+    await esbuild.finally(config, config.checks[0])
+    await esbuildWhy.finally(config, config.checks[0])
+  }
+
+  expect(open).toHaveBeenCalledTimes(1);
+  expect(open).toHaveBeenCalledWith(expect.stringMatching( /.*\/out\/esbuild-why.html$/));
+})