feat: add support for browser es modules

web3.js/.babelrc

@@ -1,27 +0,0 @@
-{
-  "presets": [
-    [ "@babel/preset-env", { "modules": false } ],
-    "@babel/preset-flow",
-  ],
-
-  "plugins": [
-    ["module-resolver", {
-      "root": ["./src"],
-    }],
-    "@babel/transform-runtime",
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-proposal-function-bind",
-  ],
-
-  "env": {
-    "test": {
-      "plugins": [
-        "@babel/transform-runtime",
-      ],
-      "presets": [
-        "@babel/preset-env",
-        "@babel/preset-flow",
-      ],
-    },
-  },
-}

web3.js/.eslintrc.js

@@ -9,7 +9,7 @@ module.exports = {
     'plugin:import/errors',
     'plugin:import/warnings',
   ],
-  parser: 'babel-eslint',
+  parser: 'babel-eslint', // upgrade to @babel/eslint-parser blocked on eslint-plugin-flowtype
   parserOptions: {
     sourceType: 'module',
     ecmaVersion: 8,

web3.js/babel.config.json

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    ["@babel/preset-env", {"targets": "> 0.25%, not dead"}],
+    ["@babel/preset-flow"]
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ],
+  "env": {
+    "test": {
+      "plugins": ["@babel/plugin-transform-runtime"],
+      "presets": ["@babel/preset-flow"]
+    }
+  }
+}

web3.js/flow-typed/js-sha3.js

@@ -1,4 +1,4 @@
-declare module 'keccak' {
+declare module 'js-sha3' {
   // TODO: Fill in types
   declare module.exports: any;
 }

web3.js/module.d.ts

@@ -1,4 +1,5 @@
 declare module '@solana/web3.js' {
+  import {Buffer} from 'buffer';
   import * as BufferLayout from 'buffer-layout';
 
   // === src/publickey.js ===

web3.js/package.json

@@ -19,6 +19,7 @@
   "publishConfig": {
     "access": "public"
   },
+  "browser": "lib/index.browser.esm.js",
   "main": "lib/index.cjs.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
@@ -74,39 +75,37 @@
     "testEnvironment": "./jest-environment"
   },
   "dependencies": {
-    "@babel/runtime": "^7.3.1",
+    "@babel/runtime": "^7.12.5",
     "bn.js": "^5.0.0",
     "bs58": "^4.0.1",
-    "buffer": "^6.0.1",
+    "buffer": "6.0.1",
     "buffer-layout": "^1.2.0",
     "crypto-hash": "^1.2.2",
-    "esdoc-inject-style-plugin": "^1.0.0",
+    "jayson": "^3.4.4",
-    "jayson": "^3.0.1",
+    "js-sha3": "^0.8.0",
-    "keccak": "^3.0.1",
+    "node-fetch": "^2.6.1",
-    "mz": "^2.7.0",
-    "node-fetch": "^2.2.0",
-    "npm-run-all": "^4.1.5",
     "rpc-websockets": "^7.4.2",
     "secp256k1": "^4.0.2",
     "superstruct": "^0.8.3",
-    "tweetnacl": "^1.0.0",
+    "tweetnacl": "^1.0.0"
-    "ws": "^7.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.3.3",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-proposal-class-properties": "^7.3.3",
+    "@babel/plugin-transform-runtime": "^7.12.10",
-    "@babel/plugin-proposal-function-bind": "^7.2.0",
+    "@babel/preset-env": "^7.12.11",
-    "@babel/plugin-transform-runtime": "^7.2.0",
+    "@babel/preset-flow": "^7.12.1",
-    "@babel/preset-env": "^7.3.1",
-    "@babel/preset-flow": "^7.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@commitlint/travis-cli": "^11.0.0",
+    "@rollup/plugin-babel": "^5.2.3",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^11.1.1",
+    "@rollup/plugin-replace": "^2.3.4",
     "@solana/spl-token": "^0.0.13",
-    "@typescript-eslint/eslint-plugin": "^4.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.14.2",
-    "@typescript-eslint/parser": "^3.10.1",
+    "@typescript-eslint/parser": "^4.14.2",
     "acorn": "^8.0.1",
-    "babel-eslint": "10.1.0",
+    "babel-eslint": "^11.0.0-beta.2",
-    "babel-plugin-module-resolver": "4.0.0",
     "codecov": "^3.0.4",
     "cross-env": "7.0.3",
     "elfy": "^1.0.0",
@@ -115,33 +114,35 @@
     "esdoc-ecmascript-proposal-plugin": "^1.0.0",
     "esdoc-flow-type-plugin": "^1.1.0",
     "esdoc-importpath-plugin": "^1.0.2",
+    "esdoc-inject-style-plugin": "^1.0.0",
     "esdoc-standard-plugin": "^1.0.0",
+<<<<<<< HEAD
     "eslint": "7.19.0",
+=======
+    "eslint": "^7.19.0",
+>>>>>>> 37215dbc2... feat: add support for browser es modules
     "eslint-config-prettier": "^7.0.0",
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jest": "22.19.0",
     "eslint-plugin-prettier": "^3.0.0",
     "flow-bin": "0.130.0",
+    "flow-remove-types": "^2.143.1",
     "flow-typed": "3.2.1",
     "fs-file-tree": "1.1.1",
     "jest": "26.6.3",
     "marked": "^1.1.0",
+    "mz": "^2.7.0",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.0.0",
     "rimraf": "3.0.2",
     "rollup": "2.38.5",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^10.0.0",
     "rollup-plugin-copy": "^3.3.0",
-    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-node-polyfills": "^0.2.1",
-    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-node-globals": "^1.2.1",
-    "rollup-plugin-node-resolve": "5.2.0",
-    "rollup-plugin-replace": "2.2.0",
-    "rollup-plugin-terser": "^7.0.0",
     "semantic-release": "^17.0.2",
     "start-server-and-test": "^1.11.6",
-    "typescript": "^4.0.2",
+    "typescript": "^4.1.3",
     "watch": "^1.0.2"
   }
 }

web3.js/rollup.config.js

@@ -1,36 +1,80 @@
-import babel from 'rollup-plugin-babel';
+import babel from '@rollup/plugin-babel';
-import builtins from 'rollup-plugin-node-builtins';
+import commonjs from '@rollup/plugin-commonjs';
-import commonjs from 'rollup-plugin-commonjs';
 import copy from 'rollup-plugin-copy';
-import globals from 'rollup-plugin-node-globals';
+import flowRemoveTypes from 'flow-remove-types';
-import json from 'rollup-plugin-json';
+import json from '@rollup/plugin-json';
-import nodeResolve from 'rollup-plugin-node-resolve';
+import nodeResolve from '@rollup/plugin-node-resolve';
-import replace from 'rollup-plugin-replace';
+import nodePolyfills from 'rollup-plugin-node-polyfills';
+import replace from '@rollup/plugin-replace';
 import {terser} from 'rollup-plugin-terser';
 
 const env = process.env.NODE_ENV;
 
-function generateConfig(configType) {
+function generateConfig(configType, format) {
+  const browser = configType === 'browser';
+  const bundle = format === 'iife';
+
   const config = {
     input: 'src/index.js',
     plugins: [
-      json(),
+      flow(),
+      commonjs(),
+      nodeResolve({browser, preferBuiltins: !browser, dedupe: ['bn.js']}),
       babel({
         exclude: '**/node_modules/**',
-        runtimeHelpers: true,
+        babelHelpers: bundle ? 'bundled' : 'runtime',
+        plugins: bundle ? [] : ['@babel/plugin-transform-runtime'],
       }),
       replace({
         'process.env.NODE_ENV': JSON.stringify(env),
+        'process.env.BROWSER': JSON.stringify(browser),
       }),
-      commonjs(),
       copy({
         targets: [{src: 'module.d.ts', dest: 'lib', rename: 'index.d.ts'}],
       }),
     ],
+    onwarn: function (warning, rollupWarn) {
+      if (warning.code !== 'CIRCULAR_DEPENDENCY') {
+        rollupWarn(warning);
+      }
+    },
+    treeshake: {
+      moduleSideEffects: false,
+    },
   };
 
   switch (configType) {
     case 'browser':
+      switch (format) {
+        case 'esm': {
+          config.output = [
+            {
+              file: 'lib/index.browser.esm.js',
+              format: 'es',
+              sourcemap: true,
+            },
+          ];
+
+          // Prevent dependencies from being bundled
+          config.external = [
+            /@babel\/runtime/,
+            'bn.js',
+            'bs58',
+            'buffer',
+            'buffer-layout',
+            'crypto-hash',
+            'jayson/lib/client/browser',
+            'js-sha3',
+            'node-fetch',
+            'rpc-websockets',
+            'secp256k1',
+            'superstruct',
+            'tweetnacl',
+          ];
+
+          break;
+        }
+        case 'iife': {
           config.output = [
             {
               file: 'lib/index.iife.js',
@@ -38,23 +82,25 @@ function generateConfig(configType) {
               name: 'solanaWeb3',
               sourcemap: true,
             },
+            {
+              file: 'lib/index.iife.min.js',
+              format: 'iife',
+              name: 'solanaWeb3',
+              sourcemap: true,
+              plugins: [terser({mangle: false, compress: false})],
+            },
           ];
-      config.plugins.push(builtins());
-      config.plugins.push(globals());
-      config.plugins.push(
-        nodeResolve({
-          browser: true,
-        }),
-      );
 
-      if (env === 'production') {
+          break;
-        config.plugins.push(
-          terser({
-            mangle: false,
-            compress: false,
-          }),
-        );
         }
+        default:
+          throw new Error(`Unknown format: ${format}`);
+      }
+
+      // TODO: Find a workaround to avoid resolving the following JSON file:
+      // `node_modules/secp256k1/node_modules/elliptic/package.json`
+      config.plugins.push(json());
+      config.plugins.push(nodePolyfills());
 
       break;
     case 'node':
@@ -71,43 +117,20 @@ function generateConfig(configType) {
         },
       ];
 
-      // Quash 'Unresolved dependencies' complaints for modules listed in the
+      // Prevent dependencies from being bundled
-      // package.json "dependencies" section.  Unfortunately this list is manually
-      // maintained.
       config.external = [
-        'assert',
+        /@babel\/runtime/,
-        '@babel/runtime/core-js/get-iterator',
-        '@babel/runtime/core-js/json/stringify',
-        '@babel/runtime/core-js/object/assign',
-        '@babel/runtime/core-js/object/get-prototype-of',
-        '@babel/runtime/core-js/object/keys',
-        '@babel/runtime/core-js/promise',
-        '@babel/runtime/helpers/asyncToGenerator',
-        '@babel/runtime/helpers/classCallCheck',
-        '@babel/runtime/helpers/createClass',
-        '@babel/runtime/helpers/defineProperty',
-        '@babel/runtime/helpers/get',
-        '@babel/runtime/helpers/getPrototypeOf',
-        '@babel/runtime/helpers/inherits',
-        '@babel/runtime/helpers/possibleConstructorReturn',
-        '@babel/runtime/helpers/slicedToArray',
-        '@babel/runtime/helpers/toConsumableArray',
-        '@babel/runtime/helpers/typeof',
-        '@babel/runtime/regenerator',
         'bn.js',
         'bs58',
         'buffer-layout',
         'crypto-hash',
-        'http',
-        'https',
         'jayson/lib/client/browser',
+        'js-sha3',
         'node-fetch',
         'rpc-websockets',
+        'secp256k1',
         'superstruct',
         'tweetnacl',
-        'url',
-        'secp256k1',
-        'keccak',
       ];
       break;
     default:
@@ -117,4 +140,20 @@ function generateConfig(configType) {
   return config;
 }
 
-export default [generateConfig('node'), generateConfig('browser')];
+export default [
+  generateConfig('node'),
+  generateConfig('browser', 'esm'),
+  generateConfig('browser', 'iife'),
+];
+
+// Using this instead of rollup-plugin-flow due to
+// https://github.com/leebyron/rollup-plugin-flow/issues/5
+function flow() {
+  return {
+    name: 'flow-remove-types',
+    transform: code => ({
+      code: flowRemoveTypes(code).toString(),
+      map: null,
+    }),
+  };
+}

web3.js/src/agent-manager.js

@@ -26,9 +26,6 @@ export class AgentManager {
   }
 
   requestStart(): http.Agent | https.Agent {
-    // $FlowExpectedError - Don't manage agents in the browser
-    if (process.browser) return;
-
     this._activeRequests++;
     clearTimeout(this._destroyTimeout);
     this._destroyTimeout = null;
@@ -36,9 +33,6 @@ export class AgentManager {
   }
 
   requestEnd() {
-    // $FlowExpectedError - Don't manage agents in the browser
-    if (process.browser) return;
-
     this._activeRequests--;
     if (this._activeRequests === 0 && this._destroyTimeout === null) {
       this._destroyTimeout = setTimeout(() => {

web3.js/src/connection.js

@@ -2,12 +2,14 @@
 
 import assert from 'assert';
 import bs58 from 'bs58';
+import {Buffer} from 'buffer';
 import {parse as urlParse, format as urlFormat} from 'url';
 import fetch from 'node-fetch';
 import jayson from 'jayson/lib/client/browser';
 import {struct} from 'superstruct';
 import {Client as RpcWebSocketClient} from 'rpc-websockets';
 
+import {AgentManager} from './agent-manager';
 import {NonceAccount} from './nonce-account';
 import {PublicKey} from './publickey';
 import {MS_PER_SLOT} from './timing';
@@ -21,7 +23,6 @@ import type {FeeCalculator} from './fee-calculator';
 import type {Account} from './account';
 import type {TransactionSignature} from './transaction';
 import type {CompiledInstruction} from './message';
-import {AgentManager} from './agent-manager';
 
 export const BLOCKHASH_CACHE_TIMEOUT_MS = 30 * 1000;
 
@@ -578,10 +579,13 @@ type PerfSample = {
 };
 
 function createRpcRequest(url: string, useHttps: boolean): RpcRequest {
-  const agentManager = new AgentManager(useHttps);
+  let agentManager;
+  if (!process.env.BROWSER) {
+    agentManager = new AgentManager(useHttps);
+  }
 
   const server = jayson(async (request, callback) => {
-    const agent = agentManager.requestStart();
+    const agent = agentManager ? agentManager.requestStart() : undefined;
     const options = {
       method: 'POST',
       body: request,
@@ -620,7 +624,7 @@ function createRpcRequest(url: string, useHttps: boolean): RpcRequest {
     } catch (err) {
       callback(err);
     } finally {
-      agentManager.requestEnd();
+      agentManager && agentManager.requestEnd();
     }
   });
 

web3.js/src/instruction.js

@@ -1,5 +1,6 @@
 // @flow
 
+import {Buffer} from 'buffer';
 import * as BufferLayout from 'buffer-layout';
 
 import * as Layout from './layout';

web3.js/src/layout.js

@@ -1,5 +1,6 @@
 // @flow
 
+import {Buffer} from 'buffer';
 import * as BufferLayout from 'buffer-layout';
 
 /**

web3.js/src/loader.js

@@ -1,5 +1,6 @@
 // @flow
 
+import {Buffer} from 'buffer';
 import * as BufferLayout from 'buffer-layout';
 
 import {Account} from './account';

web3.js/src/message.js

@@ -1,6 +1,7 @@
 // @flow
 
 import bs58 from 'bs58';
+import {Buffer} from 'buffer';
 import * as BufferLayout from 'buffer-layout';
 
 import {PublicKey} from './publickey';

web3.js/src/publickey.js

@@ -4,6 +4,7 @@ import BN from 'bn.js';
 import bs58 from 'bs58';
 import nacl from 'tweetnacl';
 import {sha256} from 'crypto-hash';
+import {Buffer} from 'buffer';
 
 //$FlowFixMe
 let naclLowLevel = nacl.lowlevel;

web3.js/src/secp256k1-program.js

@@ -1,9 +1,10 @@
 // @flow
 
+import {Buffer} from 'buffer';
 import * as BufferLayout from 'buffer-layout';
 import secp256k1 from 'secp256k1';
-import createKeccakHash from 'keccak';
 import assert from 'assert';
+import {keccak_256} from 'js-sha3';
 
 import {PublicKey} from './publickey';
 import {TransactionInstruction} from './transaction';
@@ -135,9 +136,9 @@ export class Secp256k1Program {
 
     try {
       const publicKey = publicKeyCreate(privateKey, false);
-      const messageHash = createKeccakHash('keccak256')
+      const messageHash = Buffer.from(
-        .update(toBuffer(message))
+        keccak_256.update(toBuffer(message)).digest(),
-        .digest();
+      );
       const {signature, recid: recoveryId} = ecdsaSign(messageHash, privateKey);
 
       return this.createInstructionWithPublicKey({
@@ -152,11 +153,12 @@ export class Secp256k1Program {
   }
 }
 
-export function constructEthPubkey(
+function constructEthPubkey(
   publicKey: Buffer | Uint8Array | Array<number>,
 ): Buffer {
-  return createKeccakHash('keccak256')
+  return Buffer.from(
+    keccak_256
       .update(toBuffer(publicKey.slice(1))) // throw away leading byte
-    .digest()
+      .digest(),
-    .slice(-HASHED_PUBKEY_SERIALIZED_SIZE);
+  ).slice(-HASHED_PUBKEY_SERIALIZED_SIZE);
 }

web3.js/src/transaction.js

@@ -3,6 +3,7 @@
 import invariant from 'assert';
 import nacl from 'tweetnacl';
 import bs58 from 'bs58';
+import {Buffer} from 'buffer';
 
 import type {CompiledInstruction} from './message';
 import {Message} from './message';

web3.js/src/util/to-buffer.js

@@ -1,5 +1,7 @@
 // @flow
 
+import {Buffer} from 'buffer';
+
 export const toBuffer = (arr: Buffer | Uint8Array | Array<number>): Buffer => {
   if (arr instanceof Buffer) {
     return arr;

web3.js/src/validator-info.js

@@ -1,5 +1,6 @@
 // @flow
 
+import {Buffer} from 'buffer';
 import {struct} from 'superstruct';
 
 import * as Layout from './layout';

web3.js/test/secp256k1-program.test.js

@@ -1,6 +1,6 @@
 // @flow
 
-import createKeccakHash from 'keccak';
+import {keccak_256} from 'js-sha3';
 import secp256k1 from 'secp256k1';
 import {randomBytes} from 'crypto';
 
@@ -35,7 +35,7 @@ test('live create secp256k1 instruction with public key', async () => {
   } while (!privateKeyVerify(privateKey));
 
   const publicKey = publicKeyCreate(privateKey, false);
-  const messageHash = createKeccakHash('keccak256').update(message).digest();
+  const messageHash = Buffer.from(keccak_256.update(message).digest());
   const {signature, recid: recoveryId} = ecdsaSign(messageHash, privateKey);
 
   const instruction = Secp256k1Program.createInstructionWithPublicKey({