Migrate package to ESM

.mocharc.json

@@ -2,5 +2,9 @@
   "extension": ["ts"],
   "spec": "src/**/*.spec.ts",
   "require": ["ts-node/register", "isomorphic-fetch", "jsdom-global/register"],
+  "node-option": [
+    "experimental-specifier-resolution=node",
+    "loader=ts-node/esm"
+  ],
   "exit": true
 }

karma-live-data.conf.js

@@ -1,16 +0,0 @@
-// import settings from default config file
-let properties = null;
-const originalConfigFn = require("./karma.conf.js");
-originalConfigFn({
-  set: function (arg) {
-    properties = arg;
-  },
-});
-
-// pass `--grep '[live data]'` to mocha to only run live data tests
-properties.client.args = ["--grep", "[live data]]"];
-
-// export settings
-module.exports = function (config) {
-  config.set(properties);
-};

karma.conf.cjs

@@ -0,0 +1,28 @@
+process.env.CHROME_BIN = require("puppeteer").executablePath();
+const webpackConfig = require("./webpack.config.cjs");
+
+module.exports = function (config) {
+  config.set({
+    frameworks: ["webpack", "mocha"],
+    files: ["src/lib/**/!(node).spec.ts"],
+    preprocessors: {
+      "src/lib/**/!(node).spec.ts": ["env", "webpack"],
+    },
+    envPreprocessor: ["CI"],
+    reporters: ["progress"],
+    browsers: ["ChromeHeadless"],
+    singleRun: true,
+    client: {
+      mocha: {
+        timeout: 6000, // Default is 2s
+      },
+    },
+    webpack: {
+      mode: "production",
+      module: webpackConfig.module,
+      plugins: webpackConfig.plugins,
+      resolve: webpackConfig.resolve,
+      stats: { warnings: false },
+    },
+  });
+};

karma.conf.js

@@ -1,46 +0,0 @@
-process.env.CHROME_BIN = require("puppeteer").executablePath();
-
-module.exports = function (config) {
-  config.set({
-    frameworks: ["mocha", "karma-typescript"],
-    files: ["src/lib/**/*.ts", "src/proto/**/*.ts"],
-    preprocessors: {
-      "**/*.ts": ["karma-typescript", "env"],
-    },
-    envPreprocessor: ["CI"],
-    plugins: [
-      require("karma-mocha"),
-      require("karma-typescript"),
-      require("karma-chrome-launcher"),
-      require("karma-env-preprocessor"),
-    ],
-    reporters: ["progress", "karma-typescript"],
-    browsers: ["ChromeHeadless"],
-    singleRun: true,
-    client: {
-      mocha: {
-        timeout: 6000, // Default is 2s
-      },
-    },
-    karmaTypescriptConfig: {
-      bundlerOptions: {
-        entrypoints: /^.*[^(node)]\.spec\.ts$/,
-      },
-      coverageOptions: {
-        instrumentation: false,
-      },
-      tsconfig: "./tsconfig.json",
-      compilerOptions: {
-        noEmit: false,
-      },
-      include: {
-        mode: "replace",
-        values: ["src/lib/**/*.ts", "src/proto/**/*.ts"],
-      },
-      exclude: {
-        mode: "replace",
-        values: ["node_modules/**"],
-      },
-    },
-  });
-};

package.json

@@ -2,16 +2,13 @@
   "name": "js-waku",
   "version": "0.24.0",
   "description": "TypeScript implementation of the Waku v2 protocol",
-  "main": "build/main/index.js",
+  "types": "./build/esm/index.d.ts",
-  "typings": "build/main/index.d.ts",
-  "module": "build/esm/index.js",
   "exports": {
     "node": {
-      "module": "./build/esm/index.js",
+      "import": "./build/esm/index.js"
-      "import": "./build/main/index.js"
+    }
-    },
-    "default": "./build/main/index.js"
   },
+  "type": "module",
   "repository": "https://github.com/status-im/js-waku",
   "license": "MIT OR Apache-2.0",
   "keywords": [
@@ -25,15 +22,14 @@
   "scripts": {
     "prepare": "husky install",
     "build": "rimraf ./build; run-p build:**",
-    "build:main": "tsc -p tsconfig.json",
+    "build:esm": "tsc",
-    "build:esm": "tsc --module es2015 --target es2015 --outDir build/esm",
+    "build:umd": "webpack --config webpack.config.cjs",
-    "build:umd": "webpack --config webpack.config.js",
+    "build:umd:min": "webpack --config webpack.config.min.cjs",
-    "build:umd:min": "webpack --config webpack.config.min.js",
+    "build:umd:bundle": "webpack --config webpack.config.bundle.cjs",
-    "build:umd:bundle": "webpack --config webpack.config.bundle.js",
+    "build:umd:min:bundle": "webpack --config webpack.config.min.bundle.cjs",
-    "build:umd:min:bundle": "webpack --config webpack.config.min.bundle.js",
     "size": "npm run build:esm && size-limit",
     "fix": "run-s fix:*",
-    "fix:prettier": "prettier \"src/**/*.ts\" \"./*.json\" \"*.conf.js\" \".github/**/*.yml\" --write",
+    "fix:prettier": "prettier \"src/**/*.ts\" \"./*.json\" \"*.*js\" \".github/**/*.yml\" --write",
     "fix:lint": "eslint src --ext .ts --fix",
     "pretest": "run-s pretest:*",
     "pretest:1-init-git-submodules": "[ -f './nim-waku/build/wakunode2' ] || git submodule update --init --recursive",
@@ -43,11 +39,11 @@
     "nim-waku:force-build": "(cd nim-waku && rm -rf ./build/ ./vendor && make -j$(nproc --all 2>/dev/null || echo 2) update) && run-s nim-waku:build",
     "test": "run-s test:*",
     "test:lint": "eslint src --ext .ts",
-    "test:prettier": "prettier \"src/**/*.ts\" \"./*.json\" \"*.conf.js\" \".github/**/*.yml\" --list-different",
+    "test:prettier": "prettier \"src/**/*.ts\" \"./*.json\" \"*.*js\" \".github/**/*.yml\" --list-different",
     "test:spelling": "cspell \"{README.md,.github/*.md,guides/*.md,src/**/*.ts}\"",
     "test:tsc": "tsc -p tsconfig.dev.json",
     "test:unit": "nyc --silent mocha",
-    "test:karma": "karma start",
+    "test:karma": "karma start karma.conf.cjs",
     "examples:test": "run-s examples:pretest; for d in examples/*/; do (cd $d && npm test;); done",
     "proto": "run-s proto:*",
     "proto:lint": "buf lint",
@@ -121,6 +117,7 @@
     "fast-check": "^2.14.0",
     "gh-pages": "^3.2.3",
     "husky": "^7.0.4",
+    "ignore-loader": "^0.1.2",
     "isomorphic-fetch": "^3.0.0",
     "jsdom": "^19.0.0",
     "jsdom-global": "^3.0.2",
@@ -128,7 +125,7 @@
     "karma-chrome-launcher": "^3.1.0",
     "karma-env-preprocessor": "^0.1.1",
     "karma-mocha": "^2.0.1",
-    "karma-typescript": "^5.5.3",
+    "karma-webpack": "^5.0.0",
     "lint-staged": "^12.3.4",
     "mocha": "^9.1.3",
     "npm-run-all": "^4.1.5",
@@ -151,7 +148,6 @@
     "webpack-cli": "^4.9.0"
   },
   "files": [
-    "build/main",
     "build/esm",
     "build/umd",
     "!**/*.spec.*",

src/lib/crypto.ts

@@ -1,7 +1,7 @@
 import nodeCrypto from "crypto";
 
 import * as secp from "@noble/secp256k1";
-import * as sha3 from "js-sha3";
+import sha3 from "js-sha3";
 import { concat } from "uint8arrays/concat";
 
 import { Asymmetric, Symmetric } from "./waku_message/constants";

src/lib/discovery/dns.ts

@@ -1,4 +1,4 @@
-import { debug } from "debug";
+import debug from "debug";
 
 import { ENR } from "../enr";
 

src/lib/discovery/enrtree.ts

@@ -1,4 +1,4 @@
-import * as base32 from "hi-base32";
+import base32 from "hi-base32";
 import { fromString } from "uint8arrays/from-string";
 
 import { keccak256, verifySignature } from "../crypto";

src/lib/discovery/fetch_nodes.ts

@@ -1,4 +1,4 @@
-import { debug } from "debug";
+import debug from "debug";
 
 import { ENR, Waku2 } from "../enr";
 

src/lib/waku_light_push/push_rpc.ts

@@ -1,9 +1,11 @@
-import { Reader } from "protobufjs/minimal";
+import protobufjs from "protobufjs/minimal";
 import { v4 as uuid } from "uuid";
 
 import * as proto from "../../proto/waku/v2/light_push";
 import { WakuMessage } from "../waku_message";
 
+const { Reader } = protobufjs;
+
 export class PushRPC {
   public constructor(public proto: proto.PushRPC) {}
 

src/lib/waku_message/index.ts

@@ -1,12 +1,13 @@
 import debug from "debug";
 import Long from "long";
-import { Reader } from "protobufjs/minimal";
+import protobufjs from "protobufjs/minimal";
 
 import * as proto from "../../proto/waku/v2/message";
 import { bytesToUtf8, utf8ToBytes } from "../utils";
 
 import * as version_1 from "./version_1";
 
+const { Reader } = protobufjs;
 const DefaultVersion = 0;
 const dbg = debug("waku:message");
 

src/lib/waku_store/history_rpc.ts

@@ -1,5 +1,5 @@
 import Long from "long";
-import { Reader } from "protobufjs/minimal";
+import protobufjs from "protobufjs/minimal";
 import { v4 as uuid } from "uuid";
 
 import * as protoV2Beta3 from "../../proto/waku/v2/store/v2beta3/store";
@@ -7,6 +7,8 @@ import * as protoV2Beta4 from "../../proto/waku/v2/store/v2beta4/store";
 
 import { StoreCodecs } from "./constants";
 
+const { Reader } = protobufjs;
+
 export enum PageDirection {
   BACKWARD = "backward",
   FORWARD = "forward",

tsconfig.json

@@ -1,11 +1,11 @@
 {
   "compilerOptions": {
     "incremental": true,
-    "target": "es2020",
+    "target": "es2015",
-    "outDir": "build/main",
+    "outDir": "build/esm",
     "rootDir": "src",
     "moduleResolution": "node",
-    "module": "commonjs",
+    "module": "es2020",
     "declaration": true,
     "sourceMap": true,
     "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,

webpack.config.bundle.cjs

@@ -0,0 +1,40 @@
+const webpack = require("webpack");
+const path = require("path");
+
+module.exports = {
+  mode: "development",
+  entry: {
+    "js-waku": "./src/index.ts",
+  },
+  devtool: "inline-source-map",
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: "ts-loader",
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: "process/browser.js",
+      Buffer: ["buffer", "Buffer"],
+    }),
+  ],
+  resolve: {
+    extensions: [".ts", ".js"],
+    fallback: {
+      buffer: require.resolve("buffer/"),
+      crypto: false,
+      stream: require.resolve("stream-browserify"),
+    },
+  },
+  output: {
+    filename: "[name].bundle.js",
+    path: path.resolve(__dirname, "build/umd"),
+    library: "jswaku",
+    libraryTarget: "umd",
+    globalObject: "this",
+  },
+};

webpack.config.bundle.js

@@ -1,38 +0,0 @@
-const webpack = require('webpack');
-const path = require('path');
-
-module.exports = {
-  mode: 'development',
-  entry: {
-    "js-waku": './src/index.ts'
-  },
-  devtool: 'inline-source-map',
-  module: {
-    rules: [{
-      test: /\.ts$/,
-      use: 'ts-loader',
-      exclude: /node_modules/
-    }]
-  },
-  plugins: [
-    new webpack.ProvidePlugin({
-      process: 'process/browser.js',
-      Buffer: ['buffer', 'Buffer'],
-    })
-  ],
-  resolve: {
-    extensions: ['.ts', '.js'],
-    fallback: {
-      buffer: require.resolve('buffer/'),
-      crypto: false,
-      stream: require.resolve('stream-browserify'),
-    },
-  },
-  output: {
-    filename: '[name].bundle.js',
-    path: path.resolve(__dirname, 'build/umd'),
-    library: 'jswaku',
-    libraryTarget: 'umd',
-    globalObject: 'this',
-  }
-};

webpack.config.cjs

@@ -0,0 +1,50 @@
+const webpack = require("webpack");
+const path = require("path");
+
+module.exports = {
+  mode: "development",
+  entry: {
+    "js-waku": "./src/index.ts",
+  },
+  devtool: "inline-source-map",
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: "ts-loader",
+        exclude: /(node_modules)|(node\.spec\.ts)/,
+      },
+      {
+        test: /node\.spec\.ts$/,
+        use: "ignore-loader",
+      },
+    ],
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: "process/browser.js",
+      Buffer: ["buffer", "Buffer"],
+    }),
+  ],
+  resolve: {
+    extensions: [".ts", ".js"],
+    fallback: {
+      buffer: require.resolve("buffer/"),
+      crypto: false,
+      stream: require.resolve("stream-browserify"),
+    },
+  },
+  output: {
+    filename: "[name].js",
+    path: path.resolve(__dirname, "build/umd"),
+    library: "jswaku",
+    libraryTarget: "umd",
+    globalObject: "this",
+  },
+  optimization: {
+    splitChunks: {
+      name: "vendors",
+      chunks: "all",
+    },
+  },
+};

webpack.config.js

@@ -1,44 +0,0 @@
-const webpack = require('webpack');
-const path = require('path');
-
-module.exports = {
-  mode: 'development',
-  entry: {
-    "js-waku": './src/index.ts'
-  },
-  devtool: 'inline-source-map',
-  module: {
-    rules: [{
-      test: /\.ts$/,
-      use: 'ts-loader',
-      exclude: /node_modules/
-    }]
-  },
-  plugins: [
-    new webpack.ProvidePlugin({
-      process: 'process/browser.js',
-      Buffer: ['buffer', 'Buffer'],
-    })
-  ],
-  resolve: {
-    extensions: ['.ts', '.js'],
-    fallback: {
-      buffer: require.resolve('buffer/'),
-      crypto: false,
-      stream: require.resolve('stream-browserify'),
-    },
-  },
-  output: {
-    filename: '[name].js',
-    path: path.resolve(__dirname, 'build/umd'),
-    library: 'jswaku',
-    libraryTarget: 'umd',
-    globalObject: 'this',
-  },
-  optimization: {
-    splitChunks: {
-      name: 'vendors',
-      chunks: 'all',
-    }
-  }
-};

webpack.config.min.bundle.cjs

@@ -0,0 +1,40 @@
+const webpack = require("webpack");
+const path = require("path");
+
+module.exports = {
+  mode: "production",
+  entry: {
+    "js-waku": "./src/index.ts",
+  },
+  devtool: "inline-source-map",
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: "ts-loader",
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: "process/browser.js",
+      Buffer: ["buffer", "Buffer"],
+    }),
+  ],
+  resolve: {
+    extensions: [".ts", ".js"],
+    fallback: {
+      buffer: require.resolve("buffer/"),
+      crypto: false,
+      stream: require.resolve("stream-browserify"),
+    },
+  },
+  output: {
+    filename: "[name].min.bundle.js",
+    path: path.resolve(__dirname, "build/umd"),
+    library: "jswaku",
+    libraryTarget: "umd",
+    globalObject: "this",
+  },
+};

webpack.config.min.bundle.js

@@ -1,38 +0,0 @@
-const webpack = require('webpack');
-const path = require('path');
-
-module.exports = {
-  mode: 'production',
-  entry: {
-    "js-waku": './src/index.ts'
-  },
-  devtool: 'inline-source-map',
-  module: {
-    rules: [{
-      test: /\.ts$/,
-      use: 'ts-loader',
-      exclude: /node_modules/
-    }]
-  },
-  plugins: [
-    new webpack.ProvidePlugin({
-      process: 'process/browser.js',
-      Buffer: ['buffer', 'Buffer'],
-    })
-  ],
-  resolve: {
-    extensions: ['.ts', '.js'],
-    fallback: {
-      buffer: require.resolve('buffer/'),
-      crypto: false,
-      stream: require.resolve('stream-browserify'),
-    },
-  },
-  output: {
-    filename: '[name].min.bundle.js',
-    path: path.resolve(__dirname, 'build/umd'),
-    library: 'jswaku',
-    libraryTarget: 'umd',
-    globalObject: 'this',
-  }
-};

webpack.config.min.cjs

@@ -0,0 +1,46 @@
+const webpack = require("webpack");
+const path = require("path");
+
+module.exports = {
+  mode: "production",
+  entry: {
+    "js-waku": "./src/index.ts",
+  },
+  devtool: "inline-source-map",
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: "ts-loader",
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: "process/browser.js",
+      Buffer: ["buffer", "Buffer"],
+    }),
+  ],
+  resolve: {
+    extensions: [".ts", ".js"],
+    fallback: {
+      buffer: require.resolve("buffer/"),
+      crypto: false,
+      stream: require.resolve("stream-browserify"),
+    },
+  },
+  output: {
+    filename: "[name].min.js",
+    path: path.resolve(__dirname, "build/umd"),
+    library: "jswaku",
+    libraryTarget: "umd",
+    globalObject: "this",
+  },
+  optimization: {
+    splitChunks: {
+      name: "vendors",
+      chunks: "all",
+    },
+  },
+};

webpack.config.min.js

@@ -1,44 +0,0 @@
-const webpack = require('webpack');
-const path = require('path');
-
-module.exports = {
-  mode: 'production',
-  entry: {
-    "js-waku": './src/index.ts'
-  },
-  devtool: 'inline-source-map',
-  module: {
-    rules: [{
-      test: /\.ts$/,
-      use: 'ts-loader',
-      exclude: /node_modules/
-    }]
-  },
-  plugins: [
-    new webpack.ProvidePlugin({
-      process: 'process/browser.js',
-      Buffer: ['buffer', 'Buffer'],
-    })
-  ],
-  resolve: {
-    extensions: ['.ts', '.js'],
-    fallback: {
-      buffer: require.resolve('buffer/'),
-      crypto: false,
-      stream: require.resolve('stream-browserify'),
-    },
-  },
-  output: {
-    filename: '[name].min.js',
-    path: path.resolve(__dirname, 'build/umd'),
-    library: 'jswaku',
-    libraryTarget: 'umd',
-    globalObject: 'this',
-  },
-  optimization: {
-    splitChunks: {
-      name: 'vendors',
-      chunks: 'all',
-    }
-  }
-};