Use webpack to build umd files and fix fflate imports for node.js

README.md

@@ -6,7 +6,7 @@
 
 Modern Toolsets for [Privacy Pools](https://www.forbes.com/sites/tomerniv/2023/09/07/privacy-pools-bridging-the-gap-between-blockchain-and-regulatory-compliance) on Ethereum
 
-[![Telegram Badge](https://img.shields.io/badge/Join%20Group-telegram?style=flat&logo=telegram&color=blue&link=https%3A%2F%2Ft.me%2Ftornadocli)](https://t.me/tornadocli) [![Element Badge](https://img.shields.io/badge/Join%20Element%20Chat-Element?style=flat&logo=element&color=green&link=https%3A%2F%2Felement.tornadocash.social%2F)](https://element.tornadocash.social) [![Discourse Badge](https://img.shields.io/badge/Discourse-Discourse?style=flat&logo=Discourse&color=black&link=https%3A%2F%2Fforum.tornado.ws%2F)](https://forum.tornado.ws/)
+[![Telegram Badge](https://img.shields.io/badge/Join%20Group-telegram?style=flat&logo=telegram&color=blue&link=https%3A%2F%2Ft.me%2Ftornadoofficial)](https://t.me/tornadoofficial) [![Element Badge](https://img.shields.io/badge/Join%20Element%20Chat-Element?style=flat&logo=element&color=green&link=https%3A%2F%2Felement.tornadocash.social%2F)](https://element.tornadocash.social) [![Discourse Badge](https://img.shields.io/badge/Discourse-Discourse?style=flat&logo=Discourse&color=black&link=https%3A%2F%2Fforum.tornado.ws%2F)](https://forum.tornado.ws/)
 
 </div>
 

package.json

@@ -5,6 +5,8 @@
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "unpkg": "./dist/index.umd.js",
+  "jsdelivr": "./dist/index.umd.js",
   "bin": {
     "tornado-cli": "./dist/cli.js"
   },
@@ -12,7 +14,9 @@
     "typechain": "typechain --target ethers-v6 --out-dir src/typechain src/abi/*.json",
     "types": "tsc --declaration --emitDeclarationOnly",
     "lint": "eslint src/**/*.ts --ext .ts --ignore-pattern src/typechain",
-    "build": "yarn types && rollup -c",
+    "build:node": "ts-node scripts/fflate.ts && rollup -c",
+    "build:web": "webpack",
+    "build": "yarn build:node && yarn build:web",
     "start": "ts-node src/cli.ts",
     "startHelp": "ts-node src/cli.ts help",
     "createDeposit": "ts-node src/cli.ts create",
@@ -46,23 +50,22 @@
     "yarn.lock"
   ],
   "dependencies": {
-    "@colors/colors": "1.5.0",
     "@tornado/contracts": "1.0.0",
     "@tornado/fixed-merkle-tree": "0.7.3",
     "@tornado/snarkjs": "0.1.20",
     "@tornado/websnark": "0.0.4",
     "ajv": "^8.12.0",
-    "bignumber.js": "^9.1.2",
     "bn.js": "^5.2.1",
     "circomlibjs": "0.1.7",
-    "cli-table3": "^0.6.4",
-    "commander": "^12.0.0",
     "cross-fetch": "^4.0.0",
-    "dotenv": "^16.4.5",
     "ethers": "^6.12.0",
     "ffjavascript": "0.2.48",
-    "fflate": "^0.8.2",
+    "fflate": "^0.8.2"
-    "figlet": "^1.7.0",
+  },
+  "optionalDependencies": {
+    "@colors/colors": "1.5.0",
+    "cli-table3": "^0.6.4",
+    "commander": "^12.0.0",
     "http-proxy-agent": "^7.0.2",
     "https-proxy-agent": "^7.0.4",
     "moment": "^2.30.1",
@@ -72,7 +75,6 @@
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-replace": "^5.0.5",
     "@typechain/ethers-v6": "^0.5.1",
     "@types/bn.js": "^5.1.5",
     "@types/circomlibjs": "^0.1.6",
@@ -81,18 +83,24 @@
     "@types/node-fetch": "^2.6.11",
     "@typescript-eslint/eslint-plugin": "^7.6.0",
     "@typescript-eslint/parser": "^7.6.0",
+    "dotenv": "^16.4.5",
     "esbuild": "^0.20.2",
+    "esbuild-loader": "^4.1.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
+    "figlet": "^1.7.0",
+    "node-polyfill-webpack-plugin": "^3.0.0",
     "prettier": "^3.2.5",
     "rollup": "^4.14.1",
     "rollup-plugin-esbuild": "^6.1.1",
     "ts-node": "^10.9.2",
     "tsc": "^2.0.4",
     "typechain": "^8.3.2",
-    "typescript": "^5.4.4"
+    "typescript": "^5.4.4",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4"
   }
 }

rollup.config.mjs

@@ -2,13 +2,15 @@ import esbuild from 'rollup-plugin-esbuild';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import json from '@rollup/plugin-json';
-import replace from '@rollup/plugin-replace';
 import pkgJson from './package.json' assert { type: 'json' };
 
-const external = Object.keys(pkgJson.dependencies).concat(...[
+const external = Object.keys(pkgJson.dependencies).concat(
+  Object.keys(pkgJson.optionalDependencies),
+  [
     '@tornado/websnark/src/utils',
     '@tornado/websnark/src/groth16',
-]);
+  ]
+);
 
 const config = [
   {
@@ -28,8 +30,8 @@ const config = [
         sourceMap: true,
         target: 'es2016',
       }),
-      nodeResolve(),
       commonjs(),
+      nodeResolve(),
       json()
     ],
   },
@@ -70,8 +72,8 @@ const config = [
         sourceMap: true,
         target: 'es2016',
       }),
-      nodeResolve(),
       commonjs(),
+      nodeResolve(),
       json()
     ],
   },
@@ -92,36 +94,10 @@ const config = [
         sourceMap: true,
         target: 'es2016',
       }),
-      nodeResolve(),
       commonjs(),
+      nodeResolve(),
       json()
     ],
-  },
-  {
-    input: 'src/merkleTreeWorker.ts',
-    output: [
-      {
-        file: 'static/merkleTreeWorker.umd.js',
-        format: "umd",
-        esModule: false
-      },
-    ],
-    treeshake: 'smallest',
-    external: ['web-worker'],
-    plugins: [
-      esbuild({
-        include: /\.[jt]sx?$/,
-        minify: false,
-        sourceMap: true,
-        target: 'es2016',
-      }),
-      nodeResolve(),
-      commonjs(),
-      json(),
-      replace({
-        'process.browser': 'true'
-      })
-    ],
   }
 ]
 

scripts/fflate.ts

@@ -0,0 +1,39 @@
+/**
+ * Correct the resolve field of fflate as we don't use browser esm
+ * 
+ * See issue https://github.com/101arrowz/fflate/issues/211
+ */
+import fs from 'fs';
+
+const pkgJson = JSON.parse(fs.readFileSync('./node_modules/fflate/package.json', { encoding: 'utf8' }));
+const backupJson = JSON.stringify(pkgJson, null, 2);
+
+let changes = false
+
+if (pkgJson.module.includes('browser')) {
+  pkgJson.module = './esm/index.mjs';
+
+  changes = true;
+}
+
+if (pkgJson.exports['.']?.import?.types && pkgJson.exports?.['.']?.import?.types.includes('browser')) {
+  pkgJson.exports['.'] = {
+    ...pkgJson.exports['.'],
+    "import": {
+      "types": "./esm/index.d.mts",
+      "default": "./esm/index.mjs"
+    },
+    "require": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.cjs"
+    }
+  }
+
+  changes = true;
+}
+
+
+if (changes) {
+  fs.writeFileSync('./node_modules/fflate/package.backup.json', backupJson + '\n');
+  fs.writeFileSync('./node_modules/fflate/package.json', JSON.stringify(pkgJson, null, 2) + '\n');
+}

webpack.config.js

@@ -0,0 +1,80 @@
+const esbuild = require('esbuild');
+const path = require('path');
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
+
+const esbuildLoader = {
+  test: /\.ts?$/,
+  loader: 'esbuild-loader',
+  options: {
+    loader: 'ts',
+    target: 'es2016',
+    implementation: esbuild
+  }
+}
+
+const commonAlias = {
+  fs: false,
+  'fs/promises': false,
+  'path': false,
+  'url': false,
+  'worker_threads': false,
+  'fflate': 'fflate/browser',
+  '@colors/colors': false,
+  'cli-table3': false,
+  'commander': false,
+  'http-proxy-agent': false,
+  'https-proxy-agent': false,
+  'socks-proxy-agent': false,
+}
+
+module.exports = [
+  {
+    mode: 'production',
+    module: {
+      rules: [esbuildLoader]
+    },
+    entry: './src/index.ts',
+    output: {
+      filename: 'index.umd.js',
+      path: path.resolve(__dirname, './dist'),
+      library: 'Tornado',
+      libraryTarget: 'umd'
+    },
+    plugins: [
+      new NodePolyfillPlugin(),
+    ],
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js'],
+      alias: {
+        ...commonAlias,
+      }
+    },
+    optimization: {
+      minimize: false,
+    }
+  },
+  {
+    mode: 'production',
+    module: {
+      rules: [esbuildLoader]
+    },
+    entry: './src/merkleTreeWorker.ts',
+    output: {
+      filename: 'merkleTreeWorker.umd.js',
+      path: path.resolve(__dirname, './static'),
+      libraryTarget: 'umd'
+    },
+    plugins: [
+      new NodePolyfillPlugin(),
+    ],
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js'],
+      alias: {
+        ...commonAlias,
+      }
+    },
+    optimization: {
+      minimize: false,
+    }
+  }
+];