refactor: esm webpack

leather-io · Feb 14, 2024 · 5085045 · 5085045
1 parent 81fea0d
commit 5085045
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 73 deletions.
diff --git a/package.json b/package.json
@@ -330,11 +330,11 @@
     "vm-browserify": "1.1.2",
     "web-ext": "7.8.0",
     "web-ext-submit": "7.8.0",
-    "webpack": "5.89.0",
+    "webpack": "5.90.1",
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",
-    "webpack-hot-middleware": "2.26.0",
+    "webpack-hot-middleware": "2.26.1",
     "webpack-shell-plugin": "0.5.0"
   },
   "resolutions": {

diff --git a/scripts/generate-manifest.js b/scripts/generate-manifest.js
@@ -1,7 +1,4 @@
-/**
- * @typedef {import('@schemastore/web-manifest').JSONSchemaForWebApplicationManifestFiles} Manifest
- */
-const deepMerge = require('deepmerge');
+import deepMerge from 'deepmerge';
 
 // Manifest can only be prod or dev
 const WALLET_ENVIRONMENT =
@@ -121,7 +118,7 @@ const prodManifest = {
   },
 };
 
-function generateManifest(packageVersion) {
+export default function generateManifest(packageVersion) {
   if (!packageVersion)
     throw new Error('Version number must be passed to `generateManifest` function');
 
@@ -139,5 +136,3 @@ function generateManifest(packageVersion) {
     environmentIcons[WALLET_ENVIRONMENT],
   ]);
 }
-
-module.exports = generateManifest;
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
     "target": "esnext",
-    "module": "commonjs",
+    "module": "ESNext",
+    "moduleResolution": "node",
     "lib": ["dom", "dom.iterable", "esnext"],
     "jsx": "react-jsx",
     "sourceMap": true,
@@ -18,7 +19,6 @@
     "noUnusedParameters": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "moduleResolution": "node",
     "resolveJsonModule": true,
     "baseUrl": "src",
     "paths": {

diff --git a/webpack/dev-server.js b/webpack/dev-server.js
@@ -1,15 +1,17 @@
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-const WebpackDevServer = require('webpack-dev-server');
-const webpack = require('webpack');
-const path = require('path');
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+import path from 'path';
+import * as url from 'url';
+import webpack from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
 
+import { config } from './webpack.config.dev.js';
+
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 const WALLET_ENVIRONMENT = process.env.WALLET_ENVIRONMENT;
 
 const HOST = 'localhost';
 const PORT = process.env.PORT || '8080';
 
-const config = require('./webpack.config.dev');
-
 // This is important bc it allows for fast refresh to work
 // We don't want to inject our fast refresh helpers into these entry points
 const excludeEntriesFromHotModuleReload = ['content-script', 'inpage'];
@@ -53,9 +55,9 @@ const server = new WebpackDevServer(
   compiler
 );
 
-if (WALLET_ENVIRONMENT === 'development' && module.hot) {
-  module.hot.accept();
-}
+// if (WALLET_ENVIRONMENT === 'development' && module.hot) {
+//   module.hot.accept();
+// }
 
 server.startCallback(() => {
   console.log('Starting server on http://localhost:8080');

diff --git a/webpack/webpack.config.base.js b/webpack/webpack.config.base.js
@@ -1,19 +1,25 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const path = require('path');
-const webpack = require('webpack');
-const { version: _version } = require('../package.json');
-const generateManifest = require('../scripts/generate-manifest');
-const Dotenv = require('dotenv-webpack');
-const GenerateJsonPlugin = require('generate-json-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+  import { execSync } from 'node:child_process';
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import Dotenv from 'dotenv-webpack';
+import GenerateJsonPlugin from 'generate-json-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+import ProgressBarPlugin from 'progress-bar-webpack-plugin';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+import webpack from 'webpack';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import * as url from 'url';
+
+import packageJson from '../package.json' assert { type: 'json' };
+import generateManifest from '../scripts/generate-manifest.js';
+
+
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
 const SRC_ROOT_PATH = path.join(__dirname, '../', 'src');
 const DIST_ROOT_PATH = path.join(__dirname, '../', 'dist');
-const { execSync } = require('child_process');
 
 const WALLET_ENVIRONMENT = process.env.WALLET_ENVIRONMENT ?? 'development';
 const ANALYZE_BUNDLE = process.env.ANALYZE === 'true';
@@ -38,10 +44,12 @@ console.log({
   locallyExe: executeGitCommand('git rev-parse HEAD'),
 });
 
+const require = createRequire(import.meta.url);
+
 // For non main branch builds, add a random number
 const getVersionWithRandomSuffix = ref => {
-  if (ref === MAIN_BRANCH || !ref || IS_PUBLISHING) return _version;
-  return `${_version}.${Math.floor(Math.floor(Math.random() * 1000))}`;
+  if (ref === MAIN_BRANCH || !ref || IS_PUBLISHING) return packageJson.version;
+  return `${packageJson.version}.${Math.floor(Math.floor(Math.random() * 1000))}`;
 };
 const VERSION = getVersionWithRandomSuffix(BRANCH_NAME);
 
@@ -82,7 +90,7 @@ const aliases = {
   'leather-styles': path.resolve('leather-styles'),
 };
 
-const config = {
+export const config = {
   entry: {
     background: path.join(SRC_ROOT_PATH, 'background', 'background.ts'),
     inpage: path.join(SRC_ROOT_PATH, 'inpage', 'inpage.ts'),
@@ -260,13 +268,11 @@ const config = {
   },
 };
 
-module.exports = config;
-
-if (IS_PROD) {
-  module.exports.plugins.push(
-    new CleanWebpackPlugin({ verbose: true, dry: false, cleanStaleWebpackAssets: false })
-  );
-}
-if (ANALYZE_BUNDLE) {
-  module.exports.plugins.push(new BundleAnalyzerPlugin());
-}
+// if (IS_PROD) {
+//   module.exports.plugins.push(
+//     new CleanWebpackPlugin({ verbose: true, dry: false, cleanStaleWebpackAssets: false })
+//   );
+// }
+// if (ANALYZE_BUNDLE) {
+//   module.exports.plugins.push(new BundleAnalyzerPlugin());
+// }
diff --git a/webpack/webpack.config.dev.js b/webpack/webpack.config.dev.js
@@ -1,7 +1,6 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const baseConfig = require('./webpack.config.base');
+import { config as baseConfig } from './webpack.config.base.js';
 
-const config = {
+export const config = {
   ...baseConfig,
   devtool: 'inline-source-map',
   mode: 'development',
@@ -19,5 +18,3 @@ const config = {
     splitChunks: false,
   },
 };
-
-module.exports = config;
diff --git a/webpack/webpack.config.prod.js b/webpack/webpack.config.prod.js
@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const config = require('./webpack.config.base');
-const packageJson = require('../package.json');
-const { sentryWebpackPlugin } = require('@sentry/webpack-plugin');
-const webpack = require('webpack');
+import { sentryWebpackPlugin } from '@sentry/webpack-plugin';
+import webpack from 'webpack';
+
+import packageJson from '../package.json';
+import config from './webpack.config.base';
 
 const sentryAuthToken = process.env.SENTRY_AUTH_TOKEN;
 
@@ -58,4 +59,4 @@ config.plugins = [
 
 config.devtool = false;
 
-module.exports = config;
+export default config;
diff --git a/yarn.lock b/yarn.lock
@@ -462,11 +462,16 @@
     chalk "^5.3.0"
     js-tokens "^8.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.15", "@babel/parser@^7.20.5", "@babel/parser@^7.20.7", "@babel/parser@^7.21.3", "@babel/parser@^7.22.15", "@babel/parser@^7.23.0", "@babel/parser@^7.23.3", "@babel/parser@^7.23.6":
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.15", "@babel/parser@^7.20.7", "@babel/parser@^7.21.3", "@babel/parser@^7.23.3", "@babel/parser@^7.23.6":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.6.tgz#ba1c9e512bda72a47e285ae42aff9d2a635a9e3b"
   integrity sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==
 
+"@babel/parser@^7.20.5", "@babel/parser@^7.23.0", "@babel/parser@^7.23.9":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b"
+  integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.23.3":
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.23.3.tgz#5cd1c87ba9380d0afb78469292c954fee5d2411a"
@@ -1249,13 +1254,13 @@
     regenerator-runtime "^0.14.0"
 
 "@babel/template@^7.22.15":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
-  integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.23.9.tgz#f881d0487cba2828d3259dcb9ef5005a9731011a"
+  integrity sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==
   dependencies:
-    "@babel/code-frame" "^7.22.13"
-    "@babel/parser" "^7.22.15"
-    "@babel/types" "^7.22.15"
+    "@babel/code-frame" "^7.23.5"
+    "@babel/parser" "^7.23.9"
+    "@babel/types" "^7.23.9"
 
 "@babel/[email protected]":
   version "7.23.2"
@@ -1297,7 +1302,7 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.17.0", "@babel/types@^7.18.9", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.3", "@babel/types@^7.23.4", "@babel/types@^7.23.6", "@babel/types@^7.4.4":
+"@babel/types@^7.0.0", "@babel/types@^7.18.9", "@babel/types@^7.20.7", "@babel/types@^7.22.19", "@babel/types@^7.23.3", "@babel/types@^7.23.4", "@babel/types@^7.4.4":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.6.tgz#be33fdb151e1f5a56877d704492c240fc71c7ccd"
   integrity sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==
@@ -1306,6 +1311,15 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.17.0", "@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6", "@babel/types@^7.23.9":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.9.tgz#1dd7b59a9a2b5c87f8b41e52770b5ecbf492e002"
+  integrity sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==
+  dependencies:
+    "@babel/helper-string-parser" "^7.23.4"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    to-fast-properties "^2.0.0"
+
 "@base2/[email protected]":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz#371ba8be66d556812dc7fb169ebc3c08378f69d4"
@@ -2463,7 +2477,15 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.18", "@jridgewell/trace-mapping@^0.3.20", "@jridgewell/trace-mapping@^0.3.9":
+"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.22"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz#72a621e5de59f5f1ef792d0793a82ee20f645e4c"
+  integrity sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@jridgewell/trace-mapping@^0.3.18", "@jridgewell/trace-mapping@^0.3.20":
   version "0.3.20"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz#72e45707cf240fa6b081d0366f8265b0cd10197f"
   integrity sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==
@@ -7070,7 +7092,7 @@
     "@types/estree" "*"
     "@types/json-schema" "*"
 
-"@types/estree@*", "@types/[email protected]", "@types/estree@^1.0.0":
+"@types/estree@*", "@types/[email protected]", "@types/estree@^1.0.0", "@types/estree@^1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
@@ -17136,9 +17158,9 @@ prettier@^2.8.0, prettier@^2.8.8:
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
 prettier@^3.0.3:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.1.1.tgz#6ba9f23165d690b6cbdaa88cb0807278f7019848"
-  integrity sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
+  integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
 
 pretty-error@^4.0.0:
   version "4.0.0"
@@ -19424,7 +19446,7 @@ tempy@^1.0.1:
     type-fest "^0.16.0"
     unique-string "^2.0.0"
 
-terser-webpack-plugin@^5.3.1, terser-webpack-plugin@^5.3.7:
+terser-webpack-plugin@^5.3.1, terser-webpack-plugin@^5.3.10, terser-webpack-plugin@^5.3.7:
   version "5.3.10"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz#904f4c9193c6fd2a03f693a2150c62a92f40d199"
   integrity sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==
@@ -20593,7 +20615,16 @@ [email protected]:
     webpack-dev-middleware "^5.3.1"
     ws "^8.13.0"
 
-[email protected], webpack-hot-middleware@^2.25.1:
+[email protected]:
+  version "2.26.1"
+  resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.26.1.tgz#87214f1e3f9f3acab9271fef9e6ed7b637d719c0"
+  integrity sha512-khZGfAeJx6I8K9zKohEWWYN6KDlVw2DHownoe+6Vtwj1LP9WFgegXnVMSkZ/dBEBtXFwrkkydsaPFlB7f8wU2A==
+  dependencies:
+    ansi-html-community "0.0.8"
+    html-entities "^2.1.0"
+    strip-ansi "^6.0.0"
+
+webpack-hot-middleware@^2.25.1:
   version "2.26.0"
   resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.26.0.tgz#0a103c9b2836c1f27d7f74bbe0e96c99c82d0265"
   integrity sha512-okzjec5sAEy4t+7rzdT8eRyxsk0FDSmBPN2KwX4Qd+6+oQCfe5Ve07+u7cJvofgB+B4w5/4dO4Pz0jhhHyyPLQ==
@@ -20639,7 +20670,7 @@ webpack-virtual-modules@^0.6.1:
   resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz#ac6fdb9c5adb8caecd82ec241c9631b7a3681b6f"
   integrity sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==
 
-webpack@5, webpack@5.89.0, webpack@^5:
+webpack@5, webpack@^5:
   version "5.89.0"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.89.0.tgz#56b8bf9a34356e93a6625770006490bf3a7f32dc"
   integrity sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw==
@@ -20669,6 +20700,36 @@ webpack@5, [email protected], webpack@^5:
     watchpack "^2.4.0"
     webpack-sources "^3.2.3"
 
+[email protected]:
+  version "5.90.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.90.1.tgz#62ab0c097d7cbe83d32523dbfbb645cdb7c3c01c"
+  integrity sha512-SstPdlAC5IvgFnhiRok8hqJo/+ArAbNv7rhU4fnWGHNVfN59HSQFaxZDSAL3IFG2YmqxuRs+IU33milSxbPlog==
+  dependencies:
+    "@types/eslint-scope" "^3.7.3"
+    "@types/estree" "^1.0.5"
+    "@webassemblyjs/ast" "^1.11.5"
+    "@webassemblyjs/wasm-edit" "^1.11.5"
+    "@webassemblyjs/wasm-parser" "^1.11.5"
+    acorn "^8.7.1"
+    acorn-import-assertions "^1.9.0"
+    browserslist "^4.21.10"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.15.0"
+    es-module-lexer "^1.2.1"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.9"
+    json-parse-even-better-errors "^2.3.1"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.2.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.3.10"
+    watchpack "^2.4.0"
+    webpack-sources "^3.2.3"
+
 websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"