feat: add support for browser es modules

2021-02-02 10:53:24 +08:00
parent bbae23358c
commit 08ff2d12f2
20 changed files with 4235 additions and 8432 deletions
--- a/web3.js/.babelrc
+++ b/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",
-      ],
-    },
-  },
-}
--- a/web3.js/.eslintrc.js
+++ b/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,
--- a/web3.js/babel.config.json
+++ b/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"]
+    }
+  }
+}
--- a/web3.js/flow-typed/js-sha3.js
+++ b/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;
 }
--- a/web3.js/module.d.ts
+++ b/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 ===
--- a/web3.js/package-lock.json
+++ b/web3.js/package-lock.json
--- a/web3.js/package.json
+++ b/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.0.1",
-    "keccak": "^3.0.1",
-    "mz": "^2.7.0",
-    "node-fetch": "^2.2.0",
-    "npm-run-all": "^4.1.5",
+    "jayson": "^3.4.4",
+    "js-sha3": "^0.8.0",
+    "node-fetch": "^2.6.1",
    "rpc-websockets": "^7.4.2",
    "secp256k1": "^4.0.2",
    "superstruct": "^0.8.3",
-    "tweetnacl": "^1.0.0",
-    "ws": "^7.0.0"
+    "tweetnacl": "^1.0.0"
  },
  "devDependencies": {
-    "@babel/core": "^7.3.3",
-    "@babel/plugin-proposal-class-properties": "^7.3.3",
-    "@babel/plugin-proposal-function-bind": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.2.0",
-    "@babel/preset-env": "^7.3.1",
-    "@babel/preset-flow": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-flow": "^7.12.1",
    "@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/parser": "^3.10.1",
+    "@typescript-eslint/eslint-plugin": "^4.14.2",
+    "@typescript-eslint/parser": "^4.14.2",
    "acorn": "^8.0.1",
-    "babel-eslint": "10.1.0",
-    "babel-plugin-module-resolver": "4.0.0",
+    "babel-eslint": "^11.0.0-beta.2",
    "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-builtins": "^2.1.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",
+    "rollup-plugin-node-polyfills": "^0.2.1",
+    "rollup-plugin-terser": "^7.0.2",
    "semantic-release": "^17.0.2",
    "start-server-and-test": "^1.11.6",
-    "typescript": "^4.0.2",
+    "typescript": "^4.1.3",
    "watch": "^1.0.2"
  }
 }
--- a/web3.js/rollup.config.js
+++ b/web3.js/rollup.config.js
@@ -1,36 +1,80 @@
-import babel from 'rollup-plugin-babel';
-import builtins from 'rollup-plugin-node-builtins';
-import commonjs from 'rollup-plugin-commonjs';
+import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
 import copy from 'rollup-plugin-copy';
-import globals from 'rollup-plugin-node-globals';
-import json from 'rollup-plugin-json';
-import nodeResolve from 'rollup-plugin-node-resolve';
-import replace from 'rollup-plugin-replace';
+import flowRemoveTypes from 'flow-remove-types';
+import json from '@rollup/plugin-json';
+import nodeResolve from '@rollup/plugin-node-resolve';
+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') {
-        config.plugins.push(
-          terser({
-            mangle: false,
-            compress: false,
-          }),
-        );
+          break;
        }
+        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
-      // package.json "dependencies" section.  Unfortunately this list is manually
-      // maintained.
+      // Prevent dependencies from being bundled
      config.external = [
-        'assert',
-        '@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',
+        /@babel\/runtime/,
        '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,
+    }),
+  };
+}
--- a/web3.js/src/agent-manager.js
+++ b/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(() => {
--- a/web3.js/src/connection.js
+++ b/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();
    }
  });

--- a/web3.js/src/instruction.js
+++ b/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';
--- a/web3.js/src/layout.js
+++ b/web3.js/src/layout.js
@@ -1,5 +1,6 @@
 // @flow

+import {Buffer} from 'buffer';
 import * as BufferLayout from 'buffer-layout';

 /**
--- a/web3.js/src/loader.js
+++ b/web3.js/src/loader.js
@@ -1,5 +1,6 @@
 // @flow

+import {Buffer} from 'buffer';
 import * as BufferLayout from 'buffer-layout';

 import {Account} from './account';
--- a/web3.js/src/message.js
+++ b/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';
--- a/web3.js/src/publickey.js
+++ b/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;
--- a/web3.js/src/secp256k1-program.js
+++ b/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')
-        .update(toBuffer(message))
-        .digest();
+      const messageHash = Buffer.from(
+        keccak_256.update(toBuffer(message)).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()
-    .slice(-HASHED_PUBKEY_SERIALIZED_SIZE);
+      .digest(),
+  ).slice(-HASHED_PUBKEY_SERIALIZED_SIZE);
 }
--- a/web3.js/src/transaction.js
+++ b/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';
--- a/web3.js/src/util/to-buffer.js
+++ b/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;
--- a/web3.js/src/validator-info.js
+++ b/web3.js/src/validator-info.js
@@ -1,5 +1,6 @@
 // @flow

+import {Buffer} from 'buffer';
 import {struct} from 'superstruct';

 import * as Layout from './layout';
--- a/web3.js/test/secp256k1-program.test.js
+++ b/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({