feat: add support for browser es modules

solana-labs · Feb 7, 2021 · af83ff2 · af83ff2
1 parent e706a3c
commit af83ff2
Show file tree

Hide file tree

Showing 20 changed files with 5,189 additions and 9,386 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.eslintrc.js b/.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,

diff --git a/babel.config.json b/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"]
+    }
+  }
+}
diff --git a/flow-typed/keccak.js → flow-typed/js-sha3.js b/flow-typed/keccak.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;
 }
diff --git a/module.d.ts b/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 ===

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,61 +1,107 @@
-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':
-      config.output = [
-        {
-          file: 'lib/index.iife.js',
-          format: 'iife',
-          name: 'solanaWeb3',
-          sourcemap: true,
-        },
-      ];
-      config.plugins.push(builtins());
-      config.plugins.push(globals());
-      config.plugins.push(
-        nodeResolve({
-          browser: true,
-        }),
-      );
+      switch (format) {
+        case 'esm': {
+          config.output = [
+            {
+              file: 'lib/index.browser.esm.js',
+              format: 'es',
+              sourcemap: true,
+            },
+          ];
 
-      if (env === 'production') {
-        config.plugins.push(
-          terser({
-            mangle: false,
-            compress: false,
-          }),
-        );
+          // 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',
+              format: 'iife',
+              name: 'solanaWeb3',
+              sourcemap: true,
+            },
+            {
+              file: 'lib/index.iife.min.js',
+              format: 'iife',
+              name: 'solanaWeb3',
+              sourcemap: true,
+              plugins: [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':
       config.output = [
@@ -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,
+    }),
+  };
+}