feat: use esbuild and playwright-test

- remove webpack, karma and some babel packages
- use esbuild to bundle
- use playwright-test for browser tests

cmds/test.js

@@ -65,7 +65,7 @@ module.exports = {
           default: true
         },
         colors: {
-          describe: 'Enable colors on output (only available in node runs)',
+          describe: 'Enable colors on output',
           type: 'boolean',
           default: true
         },

package.json

@@ -51,14 +51,10 @@
   },
   "dependencies": {
     "@achingbrain/dependency-check": "^4.1.0",
-    "@babel/cli": "^7.12.10",
-    "@babel/core": "^7.12.10",
-    "@babel/plugin-transform-regenerator": "^7.12.1",
-    "@babel/plugin-transform-runtime": "^7.12.10",
-    "@babel/preset-env": "^7.12.10",
+    "@babel/core": "^7.12.13",
+    "@babel/preset-env": "^7.12.13",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/register": "^7.12.10",
-    "@babel/runtime": "^7.12.5",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@commitlint/lint": "^11.0.0",
@@ -74,7 +70,6 @@
     "@types/mocha": "^8.2.0",
     "@types/node": "^14.14.22",
     "@types/sinon": "^9.0.10",
-    "babel-loader": "^8.2.2",
     "buffer": "^6.0.3",
     "bytes": "^3.1.0",
     "camelcase": "^6.2.0",
@@ -87,6 +82,7 @@
     "cors": "^2.8.5",
     "dirty-chai": "^2.0.1",
     "electron-mocha": "^10.0.0",
+    "esbuild": "^0.8.39",
     "eslint": "^7.18.0",
     "eslint-config-ipfs": "^2.0.0",
     "execa": "^5.0.0",
@@ -98,16 +94,6 @@
     "globby": "^11.0.2",
     "ipfs-utils": "^6.0.0",
     "it-glob": "~0.0.10",
-    "json-loader": "~0.5.7",
-    "karma": "^6.0.3",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-cli": "^2.0.0",
-    "karma-firefox-launcher": "^2.1.0",
-    "karma-mocha": "^2.0.1",
-    "karma-mocha-reporter": "^2.2.5",
-    "karma-mocha-webworker": "^1.3.0",
-    "karma-sourcemap-loader": "~0.3.8",
-    "karma-webpack": "4.0.2",
     "lilconfig": "^2.0.2",
     "listr": "~0.14.2",
     "merge-options": "^3.0.4",
@@ -117,6 +103,7 @@
     "ora": "^5.3.0",
     "p-map": "^4.0.0",
     "pascalcase": "^1.0.0",
+    "playwright-test": "hugomrdias/playwright-test#feat/esbuild",
     "polka": "^0.5.2",
     "premove": "^3.0.1",
     "prompt-promise": "^1.0.3",
@@ -125,14 +112,9 @@
     "simple-git": "^2.28.0",
     "strip-bom": "^4.0.0",
     "strip-json-comments": "^3.1.1",
-    "terser-webpack-plugin": "^3.0.5",
     "typedoc": "^0.20.17",
     "typescript": "4.1.x",
     "update-notifier": "^5.0.0",
-    "webpack": "^4.43.0",
-    "webpack-bundle-analyzer": "^3.7.0",
-    "webpack-cli": "^3.3.10",
-    "webpack-merge": "^4.2.2",
     "yargs": "^16.2.0",
     "yargs-parser": "^20.2.3"
   },

src/build/index.js

@@ -1,14 +1,17 @@
 /* eslint-disable no-console */
 'use strict'
-
+const esbuild = require('esbuild')
 const path = require('path')
-const { readJsonSync } = require('fs-extra')
+const pascalcase = require('pascalcase')
 const bytes = require('bytes')
-const execa = require('execa')
 const { premove: del } = require('premove')
-const { fromAegir, gzipSize, pkg, hasTsconfig } = require('./../utils')
+const { gzipSize, pkg, hasTsconfig, fromRoot, paths } = require('./../utils')
 const tsCmd = require('../ts')
 const { userConfig } = require('../config/user')
+const merge = require('merge-options').bind({
+  ignoreUndefined: true,
+  concatArrays: true
+})
 
 /**
  * @typedef {import("../types").GlobalOptions} GlobalOptions
@@ -21,47 +24,22 @@ const { userConfig } = require('../config/user')
  * @param {GlobalOptions & BuildOptions} argv
  */
 module.exports = async (argv) => {
-  const input = argv._.slice(1)
-  const forwardOptions = argv['--'] ? argv['--'] : []
-  const useBuiltinConfig = !forwardOptions.includes('--config')
-  const progress = !forwardOptions.includes('--progress') && !process.env.CI ? ['--progress'] : []
-  const webpackConfig = useBuiltinConfig
-    ? ['--config', fromAegir('src/config/webpack.config.js')]
-    : []
-
   // Clean dist
   await del(path.join(process.cwd(), 'dist'))
 
   if (argv.bundle) {
-    // Run webpack
-    await execa('webpack-cli', [
-      ...webpackConfig,
-      ...progress,
-      ...input,
-      ...forwardOptions
-    ], {
-      env: {
-        NODE_ENV: process.env.NODE_ENV || 'production',
-        AEGIR_BUILD_ANALYZE: argv.bundlesize ? 'true' : 'false',
-        AEGIR_NODE: argv.node ? 'true' : 'false',
-        AEGIR_TS: argv.tsRepo ? 'true' : 'false'
-      },
-      localDir: path.join(__dirname, '../..'),
-      preferLocal: true,
-      stdio: 'inherit'
-    })
+    const outfile = await build(argv)
 
     if (argv.bundlesize) {
       // @ts-ignore
       if (userConfig.bundlesize?.maxSize) {
         throw new Error('Config property `bundlesize.maxSize` is deprecated, use `build.bundlesizeMax`!')
       }
-      const stats = readJsonSync(path.join(process.cwd(), 'dist/stats.json'))
-      const gzip = await gzipSize(path.join(stats.outputPath, stats.assets[0].name))
+      const gzip = await gzipSize(outfile)
       const maxsize = bytes(userConfig.build.bundlesizeMax)
       const diff = gzip - maxsize
 
-      console.log('Use http://webpack.github.io/analyse/ to load "./dist/stats.json".')
+      console.log('Use https://www.bundle-buddy.com/ to load "./dist/stats.json".')
       console.log(`Check previous sizes in https://bundlephobia.com/result?p=${pkg.name}@${pkg.version}`)
 
       if (diff > 0) {
@@ -80,3 +58,31 @@ module.exports = async (argv) => {
     })
   }
 }
+
+/**
+ * Build command
+ *
+ * @param {GlobalOptions & BuildOptions} argv
+ */
+const build = async (argv) => {
+  const outfile = path.join(paths.dist, 'index.js')
+  await esbuild.build(merge(
+    {
+      entryPoints: [fromRoot('src', argv.tsRepo ? 'index.ts' : 'index.js')],
+      bundle: true,
+      format: 'iife',
+      mainFields: ['browser', 'module', 'main'],
+      sourcemap: argv.bundlesize,
+      minify: true,
+      globalName: pascalcase(pkg.name),
+      metafile: argv.bundlesize ? path.join(paths.dist, 'stats.json') : undefined,
+      outfile,
+      define: {
+        'process.env.NODE_ENV': '"production"'
+      }
+    },
+    userConfig.build.config
+  ))
+
+  return outfile
+}