Add webpack multi-target build, linting

package.json

@@ -3,18 +3,25 @@
   "version": "0.0.1",
   "description": "mempool.space wallet connector kit",
   "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "module": "dist/index.esm.js",
+  "browser": "dist/index.umd.js",
+  "types": "dist/types/index.d.ts",
   "scripts": {
     "tsc": "tsc",
-    "build": "npm run tsc",
+    "build": "npm run tsc && webpack --mode production",
     "start": "node dist/index.js"
   },
   "license": "GNU Affero General Public License v3.0",
   "devDependencies": {
     "@types/ws": "^8.5.5",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/parser": "^6.7.0",
     "eslint": "^8.49.0",
-    "typescript": "^5.2.2"
+    "eslint-config-prettier": "^9.0.0",
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.2.2",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
     "cross-fetch": "^4.0.0",

src/address.ts

@@ -1,4 +1,4 @@
-import { AddressState, Transaction, Utxo, WalletState } from "./interfaces";
+import { AddressState, Transaction, Utxo } from "./interfaces";
 
 /**
  * Utility class for keeping track of address state
@@ -19,7 +19,7 @@ export class AddressTracker {
   private spent: Set<string>;
 
   // While loadingApi=true, websocket events are withheld in a pending queue
-  private loadingApi: boolean = true;
+  private loadingApi = true;
   private pending: { event: 'add' | 'remove', tx?: Transaction, txid?: string }[] = [];
 
   constructor(address: string) {
@@ -69,7 +69,7 @@ export class AddressTracker {
    * Idempotent, but the most recent confirmation status applies,
    * so ordering matters
    */
-  public addTransaction(tx: Transaction, fromWs: boolean = false): void {
+  public addTransaction(tx: Transaction, fromWs = false): void {
     // delay websocket events until we finished processing transactions from the REST API
     if (this.loadingApi && fromWs) {
       this.pending.push({ event: 'add', tx });

src/wallet.ts

@@ -13,7 +13,7 @@ export class MempoolWallet {
   private observerId = 0;
   private observers: {
     [event: string]: {
-      [oid in number]: (args: any) => void
+      [oid in number]: (args: unknown) => void
     }
   } = {
     addressReady: {},
@@ -43,18 +43,18 @@ export class MempoolWallet {
     this.ws.off('connected');
   }
 
-  private onTransactionUnconfirmed(address?: string, tx?: Transaction, live: boolean = false): void {
+  private onTransactionUnconfirmed(address?: string, tx?: Transaction, fromWs = false): void {
     if (tx && address && address in this.tracking) {
-      this.tracking[address].addTransaction(tx, live);
+      this.tracking[address].addTransaction(tx, fromWs);
       Object.values(this.observers.txAdded).forEach(observer => observer({address, tx}));
       Object.values(this.observers.txEvent).forEach(observer => observer({event: 'added', address, tx}));
     }
   }
 
-  private onTransactionConfirmed(address?: string, tx?: Transaction, live: boolean = false): void {
+  private onTransactionConfirmed(address?: string, tx?: Transaction, fromWs = false): void {
     if (tx && address && address in this.tracking) {
       const isKnown = this.tracking[address].hasTransaction(tx.txid);
-      this.tracking[address].addTransaction(tx, live);
+      this.tracking[address].addTransaction(tx, fromWs);
       if (!isKnown) {
         Object.values(this.observers.txAdded).forEach(observer => observer({address, tx}));
         Object.values(this.observers.txEvent).forEach(observer => observer({event: 'added', address, tx}));
@@ -64,9 +64,9 @@ export class MempoolWallet {
     }
   }
 
-  private onTransactionRemoved(address?: string, tx?: Transaction, live: boolean = false): void {
+  private onTransactionRemoved(address?: string, tx?: Transaction, fromWs = false): void {
     if (tx && address && address in this.tracking) {
-      this.tracking[address].removeTransaction(tx.txid, live);
+      this.tracking[address].removeTransaction(tx.txid, fromWs);
       Object.values(this.observers.txRemoved).forEach(observer => observer({address, tx}));
       Object.values(this.observers.txEvent).forEach(observer => observer({event: 'removed', address, tx}));
     }
@@ -99,7 +99,7 @@ export class MempoolWallet {
 
   // register a handler for an event type
   // returns an unsubscribe function
-  public subscribe(event: WalletEvent, fn: (args: any) => void): () => void {
+  public subscribe(event: WalletEvent, fn: (args: unknown) => void): () => void {
     const oid = this.observerId++;
     this.observers[event][oid] = fn;
     return () => { delete this.observers[event][oid]; };

tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "target": "es2016",
-    "module": "commonjs",
+    "target": "ES2016",
+    "module": "ESNext",
     "declaration": true,
-    "outDir": "dist",
+    "outDir": "dist/types",
     "strict": true,
     "esModuleInterop": true,
     "moduleResolution": "node",

webpack.config.js

@@ -0,0 +1,52 @@
+const path = require('path');
+
+const common = {
+  entry: './src/index.ts',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+};
+
+const umdConfig = {
+  ...common,
+  output: {
+    filename: 'index.umd.js',
+    path: path.resolve(__dirname, 'dist'),
+    libraryTarget: 'umd',
+    library: 'Mwck',
+    umdNamedDefine: true,
+    globalObject: 'this',
+  },
+};
+
+const commonJSConfig = {
+  ...common,
+  target: 'node',
+  output: {
+    filename: 'index.js',
+    path: path.resolve(__dirname, 'dist'),
+    libraryTarget: 'commonjs2',
+  },
+};
+
+const esmConfig = {
+  ...common,
+  output: {
+    filename: 'index.esm.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  optimization: {
+    runtimeChunk: false
+  }
+};
+
+module.exports = [umdConfig, commonJSConfig, esmConfig];