feat: support multiple output files (#1785)

Don't try to force the output target to be `dist/index.min.js`
if there are multiple `build.config.entryPoints` entries.

Also allow specifying `build.bundleSizeMax` as a map to allow
setting a max bundle size for each output file.

Author: achingbrain

package-lock.json

@@ -26,7 +26,6 @@ const defaults = merge.bind({
  * @param {GlobalOptions & BuildOptions} argv
  */
 const build = async (argv) => {
-  const outfile = path.join(paths.dist, 'index.min.js')
   const globalName = pascalCase(pkg.name)
   const umdPre = `(function (root, factory) {(typeof module === 'object' && module.exports) ? module.exports = factory() : root.${globalName} = factory()}(typeof self !== 'undefined' ? self : this, function () {`
   const umdPost = `return ${globalName}}));`
@@ -36,32 +35,47 @@ const build = async (argv) => {
     entryPoint = fromRoot('dist', 'src', 'index.js')
   }
 
-  const result = await esbuild.build(defaults(
-    {
-      entryPoints: [entryPoint],
-      bundle: true,
-      format: 'iife',
-      conditions: ['production'],
-      sourcemap: argv.bundlesize,
-      minify: true,
-      globalName,
-      banner: { js: umdPre },
-      footer: { js: umdPost },
-      metafile: argv.bundlesize,
-      outfile,
-      define: {
-        global: 'globalThis',
-        'process.env.NODE_ENV': '"production"'
-      }
-    },
-    argv.fileConfig.build.config
-  ))
+  /** @type {esbuild.BuildOptions} */
+  const config = defaults({
+    bundle: true,
+    format: 'iife',
+    conditions: ['production'],
+    sourcemap: true,
+    minify: true,
+    globalName,
+    banner: { js: umdPre },
+    footer: { js: umdPost },
+    metafile: true,
+    define: {
+      global: 'globalThis',
+      'process.env.NODE_ENV': '"production"'
+    }
+  }, argv.fileConfig.build.config)
+
+  // use default single-file build
+  if (config.entryPoints == null) {
+    config.entryPoints = [entryPoint]
+    config.outfile = path.join(paths.dist, 'index.min.js')
+  }
+
+  const entryPoints = Array.isArray(config.entryPoints) ? config.entryPoints : Object.keys(config.entryPoints)
+
+  // support multi-output-file build
+  if (entryPoints.length > 1) {
+    delete config.outfile
+
+    if (config.outdir == null) {
+      config.outdir = 'dist'
+    }
+  }
+
+  const result = await esbuild.build(config)
 
-  if (result.metafile) {
+  if (result.metafile && argv.bundlesize) {
     fs.writeJSONSync(path.join(paths.dist, 'stats.json'), result.metafile)
   }
 
-  return outfile
+  return result.metafile?.outputs
 }
 
 const tasks = new Listr([
@@ -88,24 +102,41 @@ const tasks = new Listr([
      * @param {Task} task
      */
     task: async (ctx, task) => {
-      const outfile = await build(ctx)
+      const outputs = await build(ctx)
 
-      if (ctx.bundlesize) {
-        const gzip = await gzipSize(outfile)
-        const maxSize = bytes(ctx.bundlesizeMax)
+      if (ctx.bundlesize && outputs != null) {
+        task.output = 'Use https://esbuild.github.io/analyze/ to load "./dist/stats.json".'
 
-        if (maxSize == null) {
-          throw new Error(`Could not parse bytes from "${ctx.bundlesizeMax}"`)
-        }
+        const maxSizes = typeof ctx.bundlesizeMax === 'string'
+          ? {
+              'dist/index.min.js': ctx.bundlesizeMax
+            }
+          : ctx.bundlesizeMax
 
-        const diff = gzip - maxSize
+        for (const file of Object.keys(outputs)) {
+          if (file.endsWith('.map')) {
+            continue
+          }
 
-        task.output = 'Use https://esbuild.github.io/analyze/ to load "./dist/stats.json".'
+          if (maxSizes[file] == null) {
+            task.output = `Size for ${file} missing from bundlesizeMax in .aegir.js`
+            continue
+          }
+
+          const gzip = await gzipSize(file)
+          const maxSize = bytes(maxSizes[file])
+
+          if (maxSize == null) {
+            throw new Error(`Could not parse bytes from "${ctx.bundlesizeMax}"`)
+          }
+
+          const diff = gzip - maxSize
 
-        if (diff > 0) {
-          throw new Error(`${bytes(gzip)} (▲${bytes(diff)} / ${bytes(maxSize)})`)
-        } else {
-          task.output = `${bytes(gzip)} (▼${bytes(diff)} / ${bytes(maxSize)})`
+          if (diff > 0) {
+            throw new Error(`${file} ${bytes(gzip)} (▲${bytes(diff)} / ${bytes(maxSize)})`)
+          } else {
+            task.output = `${file} ${bytes(gzip)} (▼${bytes(diff)} / ${bytes(maxSize)})`
+          }
         }
       }
     }

src/build/index.js

@@ -30,10 +30,10 @@ export default async (argv, execaOptions) => {
   const files = argv.files.length > 0
     ? argv.files
     : [
-        'test/**/*.spec.{js,cjs,mjs}',
-        'test/browser.{js,cjs,mjs}',
-        'dist/test/**/*.spec.{js,cjs,mjs}',
-        'dist/test/browser.{js,cjs,mjs}'
+        'test/**/*.spec.*js',
+        'test/browser.*js',
+        'dist/test/**/*.spec.*js',
+        'dist/test/browser.*js'
       ]
 
   // before hook

src/test/browser.js

@@ -23,8 +23,8 @@ export default async (argv, execaOptions) => {
   const files = argv.files.length > 0
     ? [...argv.files]
     : [
-        'test/**/*.spec.{js,mjs,cjs}',
-        'dist/test/**/*.spec.{js,cjs,mjs}'
+        'test/**/*.spec.*js',
+        'dist/test/**/*.spec.*js'
       ]
   const grep = argv.grep ? ['--grep', argv.grep] : []
   const progress = argv.progress ? ['--reporter=progress'] : []

src/test/electron.js

@@ -34,10 +34,10 @@ export default async function testNode (argv, execaOptions) {
   const files = argv.files.length > 0
     ? argv.files
     : [
-        'test/node.{js,cjs,mjs}',
-        'test/**/*.spec.{js,cjs,mjs}',
-        'dist/test/node.{js,cjs,mjs}',
-        'dist/test/**/*.spec.{js,cjs,mjs}'
+        'test/node.*js',
+        'test/**/*.spec.*js',
+        'dist/test/node.*js',
+        'dist/test/**/*.spec.*js'
       ]
 
   const args = [

src/test/node.js

@@ -29,8 +29,10 @@ export default async (argv, execaOptions) => {
   const files = argv.files.length > 0
     ? argv.files
     : [
-        'test/**/*.spec.{js,ts,cjs,mjs}',
-        'test/browser.{js,ts,cjs,mjs}'
+        'test/**/*.spec.*js',
+        'test/**/*.spec.ts',
+        'test/browser.*js',
+        'test/browser.ts'
       ]
 
   // before hook

src/test/react-native.js

@@ -121,9 +121,19 @@ interface BuildOptions {
    */
   bundlesize: boolean
   /**
-   * Max threshold for the bundle size.
-   */
-  bundlesizeMax: string
+   * Max threshold for the bundle size(s).  Either a single string for when only
+   * `dist/index.min.js` is built or an object of key/value pairs, e.g.
+   *
+   * ```json
+   * {
+   *   "bundlesizeMax": {
+   *     "dist/index.min.js": "50KB",
+   *     "dist/worker.min.js": "80KB"
+   *   }
+   * }
+   * ```
+   */
+  bundlesizeMax: string | Record<string, string>
   /**
    * Build the Typescript type declarations.
    */

src/types.ts

@@ -46,4 +46,23 @@ describe('build', () => {
       expect(fs.existsSync(join(projectDir, 'dist', 'index.min.js'))).to.be.true()
     })
   })
+
+  describe('multiple output files', () => {
+    let projectDir = ''
+
+    before(async () => {
+      projectDir = await setUpProject('a-multiple-output-project')
+    })
+
+    it('should build a typescript project with multiple outputs', async function () {
+      this.timeout(120 * 1000) // slow ci is slow
+
+      await execa(bin, ['build'], {
+        cwd: projectDir
+      })
+
+      expect(fs.existsSync(join(projectDir, 'dist', 'index.js'))).to.be.true()
+      expect(fs.existsSync(join(projectDir, 'dist', 'sw.js'))).to.be.true()
+    })
+  })
 })

test/build.js

@@ -0,0 +1,16 @@
+// @ts-check
+
+/** @type {import('../../../..').PartialOptions} */
+const options = {
+  build: {
+    config: {
+      entryPoints: ['./src/index.js', './src/sw.js']
+    },
+    bundlesizeMax: {
+      'dist/index.js': '400KB',
+      'dist/sw.js': '400KB'
+    }
+  }
+}
+
+export default options

test/fixtures/projects/a-multiple-output-project/.aegir.js

@@ -0,0 +1,25 @@
+{
+  "name": "a-ts-project",
+  "version": "1.0.0",
+  "description": "",
+  "homepage": "https://github.com/ipfs/aegir#readme",
+  "exports": {
+    ".": {
+      "import": "./dist/src/index.js"
+    }
+  },
+  "type": "module",
+  "types": "./dist/src/index.d.ts",
+  "scripts": {
+    "build": "aegir build",
+    "test": "aegir test"
+  },
+  "author": "",
+  "license": "ISC",
+  "eslintConfig": {
+    "extends": "ipfs",
+    "parserOptions": {
+      "sourceType": "module"
+    }
+  }
+}

test/fixtures/projects/a-multiple-output-project/package.json

@@ -0,0 +1,3 @@
+export function main (): string {
+  return 'hello world!'
+}

test/fixtures/projects/a-multiple-output-project/src/index.ts

@@ -0,0 +1,3 @@
+export function main (): string {
+  return 'hello world from sw!'
+}

test/fixtures/projects/a-multiple-output-project/src/sw.ts

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+      "strict": true,
+      // project options
+      "outDir": "dist",
+      "allowJs": true,
+      "checkJs": true,
+      "target": "ES2020",
+      "module": "ES2020",
+      "lib": ["ES2021", "ES2021.Promise", "ES2021.String", "ES2020.BigInt", "DOM", "DOM.Iterable"],
+      "noEmit": false,
+      "noEmitOnError": true,
+      "emitDeclarationOnly": false,
+      "declaration": true,
+      "declarationMap": true,
+      "incremental": true,
+      "composite": true,
+      "isolatedModules": true,
+      "removeComments": false,
+      "sourceMap": true,
+      // module resolution
+      "esModuleInterop": true,
+      "moduleResolution": "node",
+      // linter checks
+      "noImplicitReturns": false,
+      "noFallthroughCasesInSwitch": true,
+      "noUnusedLocals": true,
+      "noUnusedParameters": false,
+      // advanced
+      "verbatimModuleSyntax": true,
+      "forceConsistentCasingInFileNames": true,
+      "skipLibCheck": true,
+      "stripInternal": true,
+      "resolveJsonModule": true
+  },
+  "include": [
+      "src",
+      "test"
+  ]
+}