Browser Bundle Improvements (#200)

* bump `ed25519` and `secp256k1` libs
* 0.0.18
* import specific `lodash` method to reduce bundle size
* output bundle metadata
* improve browser bundle
* include safari and firefox as targets
* run headless browser tests in safari and firefox
* use non-abandoned polyfill lib
* add cjs dist and include  in
* patch security vuln
* include `package.json` in `dist/cjs` to override `type: module` in parent `package.json`
* add react-native directive to package.json

Author: mistermoe

.gitignore

@@ -1,3 +1,6 @@
+# bundle metadata
+bundle-metadata.json
+
 # js deps
 node_modules
 # bundler output location

build/create-browser-bundle.cjs

@@ -1,6 +1,11 @@
 const browserConfig = require('./esbuild-browser-config.cjs');
+const fs = require('fs');
 
 require('esbuild').build({
   ...browserConfig,
-  outfile: 'dist/bundles/browser.js',
+  metafile : true,
+  outfile  : 'dist/bundles/browser.js',
+}).then(result => {
+  const serializedMetafile = JSON.stringify(result.metafile, null, 4);
+  fs.writeFileSync(`${__dirname}/../bundle-metadata.json`, serializedMetafile, { encoding: 'utf8' });
 });

build/esbuild-browser-config.cjs

@@ -1,13 +1,17 @@
-const { NodeGlobalsPolyfillPlugin } = require('@esbuild-plugins/node-globals-polyfill');
+const polyfillProviderPlugin = require('node-stdlib-browser/helpers/esbuild/plugin');
+const stdLibBrowser = require('node-stdlib-browser');
 
+/** @type {import('esbuild').BuildOptions} */
 module.exports = {
   entryPoints : ['./src/index.ts'],
   bundle      : true,
   format      : 'esm',
   sourcemap   : true,
+  minify      : true,
   platform    : 'browser',
-  target      : ['chrome101'],
-  plugins     : [NodeGlobalsPolyfillPlugin()],
+  target      : ['chrome101', 'firefox108', 'safari16'],
+  inject      : [require.resolve('node-stdlib-browser/helpers/esbuild/shim')],
+  plugins     : [polyfillProviderPlugin(stdLibBrowser)],
   define      : {
     'global': 'globalThis'
   }

build/publish-unstable.sh

@@ -19,4 +19,5 @@ npm version $new_unstable_version --no-git-tag-version
 npm publish --tag unstable --no-git-tag-version
 
 # Reset changes to the package.json
-git checkout -- package.json
+git checkout -- package.json
+git checkout -- package-lock.json

karma.conf.cjs

@@ -1,12 +1,19 @@
 // Karma is what we're using to run our tests in browser environments
 // Karma does not support .mjs
 
+// playwright acts as a safari executable on windows and mac
+const playwright = require('playwright');
 const esbuildBrowserConfig = require('./build/esbuild-browser-config.cjs');
 
+// set playwright as run-target for webkit tests
+process.env.WEBKIT_HEADLESS_BIN = playwright.webkit.executablePath();
+
 module.exports = function(config) {
   config.set({
     plugins: [
       require('karma-chrome-launcher'),
+      require('karma-firefox-launcher'),
+      require('karma-webkit-launcher'),
       require('karma-esbuild'),
       require('karma-mocha'),
       require('karma-mocha-reporter')
@@ -47,9 +54,11 @@ module.exports = function(config) {
     // config.LOG_INFO || config.LOG_DEBUG
     logLevel: config.LOG_INFO,
 
+    concurrency: 1,
+
     // start these browsers
     // available browser launchers: https://www.npmjs.com/search?q=keywords:karma-launcher
-    browsers: ['ChromeHeadless'],
+    browsers: ['ChromeHeadless', 'FirefoxHeadless', 'WebkitHeadless'],
 
     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits