Migrated to esbuild

.babelrc

@@ -1,8 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", { "targets": { "node": "12" } }],
-    "@babel/preset-typescript",
-    "@babel/preset-react"
-  ],
-  "plugins": []
-}

esbuild.config.mjs

@@ -0,0 +1,42 @@
+import { build } from "esbuild";
+import { mkdir, copyFile } from "fs/promises";
+import { join } from "path";
+
+build({
+  bundle: true,
+  outdir: "./dist",
+  minify: false,
+  platform: 'node',
+  target: "es6",
+  color: true,
+  jsx: "transform",
+  sourcemap: true,
+  tsconfig: "./tsconfig.json",
+  entryPoints: ["src/index.tsx"],
+  target: ['node12'],
+  loader: {
+    ".png": "file",
+    ".jpg": "file",
+    ".gif": "file",
+    ".svg": "file",
+    ".node": "file"
+  },
+  plugins: [
+    {
+      name: "Native Addon",
+      setup(build) {
+        build.onResolve({ filter: /\.node$/ }, async (arg) => {
+          const pluginName = arg.path.split("/").reverse()[0]
+          mkdir(join(process.cwd(), "dist"), {recursive: true})
+          await copyFile(join(arg.resolveDir, arg.path), join(process.cwd(), "dist", pluginName))
+          return {
+            external: true,
+            path: "./"+pluginName,
+            namespace: "js",
+            pluginName
+          }
+        })
+      }
+    },
+  ]
+}).catch(() => process.exit(1));

package.json

@@ -7,14 +7,15 @@
   "private": true,
   "scripts": {
     "build": "webpack --mode=production",
-    "dev": "cross-env TSC_WATCHFILE=UseFsEvents webpack --mode=development",
-    "start": "qode ./dist/index.js",
-    "start:watch": "nodemon -e node -w ./*.babelrc -x \"npm start\"",
-    "start-dev": "concurrently -n \"webpack,spotube\" -p \"{name}-{pid}\" -c \"bgBlue.black.bold,bgGreen.black.bold\" -i --default-input-target spotube \"npm run dev\" \"npm run start:watch\"",
-    "debug-dev": "concurrently -n \"webpack,spotube\" -p \"{name}-{pid}\" -c \"bgBlue.black.bold,bgGreen.black.bold\" -i --default-input-target spotube \"npm run dev\" \"npm run debug:watch\"",
+    "dev": "nodemon -w src/** -e ts,tsx -x 'node esbuild.config.mjs'",
+    "check-types": "tsc --noEmit --watch",
+    "start": "cd dist && qode index.js",
+    "start:watch": "nodemon -w dist -e js -x \"npm start\"",
+    "start-dev": "concurrently -n \"esbuild,spotube,tsc\" -p \"{name}\" -c \"bgYellow.black.bold,bgGreen.black.bold,bgBlue.black.bold\" -i --default-input-target spotube \"npm run dev\" \"npm run start:watch\" \"npm run check-types\"",
+    "debug-dev": "concurrently -n \"esbuild,spotube,tsc\" -p \"{name}\" -c \"bgYellow.black.bold,bgGreen.black.bold,bgBlue.black.bold\" -i --default-input-target spotube \"npm run dev\" \"npm run debug:watch\" \"npm run check-types\"",
     "start:trace": "qode ./dist/index.js --trace",
-    "debug": "qode --inspect ./dist/index.js",
-    "debug:watch": "nodemon -e node -w ./*.babelrc -x \"npm run debug\"",
+    "debug": "cd dist && qode --inspect index.js",
+    "debug:watch": "nodemon -w dist -e js -x \"npm run debug\"",
     "pack": "nodegui-packer -p ./dist",
     "pack-deb": "node scripts/build-deb.js",
     "pack-win32": "powershell.exe -ExecutionPolicy Unrestricted -Command \". '.\\scripts\\build-win32.ps1'\""
@@ -45,10 +46,6 @@
     "ytdl-core": "^4.5.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.10",
-    "@babel/preset-env": "^7.13.12",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/preset-typescript": "^7.13.0",
     "@nodegui/devtools": "^1.0.1",
     "@nodegui/packer": "^1.4.1",
     "@types/color": "^3.0.1",
@@ -63,10 +60,12 @@
     "@types/spotify-web-api-node": "^5.0.0",
     "@types/uuid": "^8.3.0",
     "@types/webpack-env": "^1.15.3",
-    "babel-loader": "^8.1.0",
+    "@vitejs/plugin-react-refresh": "^1.3.3",
     "clean-webpack-plugin": "^3.0.0",
     "concurrently": "^6.0.0",
     "cross-env": "^7.0.3",
+    "esbuild": "^0.12.8",
+    "esbuild-loader": "^2.13.1",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^6.2.0",
     "native-addon-loader": "^2.0.1",

tsconfig.json

@@ -11,8 +11,13 @@
     "alwaysStrict": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "incremental": true
   },
-  "include": ["**/*"],
-  "exclude": ["**/node_modules/*"]
-}
+  "include": [
+    "**/*"
+  ],
+  "exclude": [
+    "**/node_modules/*"
+  ]
+}

webpack.config.js

@@ -2,8 +2,13 @@ const path = require("path");
 const webpack = require("webpack");
 const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const { ESBuildMinifyPlugin } = require("esbuild-loader")
+
 
 module.exports = (env, argv) => {
+  /**
+   * @type {import("webpack").Configuration}
+   */
   const config = {
     mode: "production",
     entry: ["./src/index.tsx"],
@@ -15,11 +20,30 @@ module.exports = (env, argv) => {
     module: {
       rules: [
         {
-          test: /\.(j|t)sx?$/,
+          test: /\.js?$/,
           exclude: /node_modules/,
-          use: {
-            loader: "babel-loader",
-            options: { cacheDirectory: true, cacheCompression: false },
+          loader: 'esbuild-loader',
+          options: {
+            loader: 'jsx',
+            target: 'es2015'
+          },
+        },
+        {
+          test: /\.tsx?$/,
+          exclude: /node_modules/,
+          loader: 'esbuild-loader',
+          options: {
+            loader: 'tsx',
+            target: 'es2015'
+          },
+        },
+        {
+          test: /\.ts?$/,
+          exclude: /node_modules/,
+          loader: 'esbuild-loader',
+          options: {
+            loader: 'ts',
+            target: 'es2015'
           },
         },
         {
@@ -46,6 +70,11 @@ module.exports = (env, argv) => {
       new webpack.DefinePlugin({"global.GENTLY": false}),
       new CleanWebpackPlugin(),
     ],
+    optimization: {
+      minimizer: [
+        new ESBuildMinifyPlugin({target: 'es2015'})
+      ]
+    },
     resolve: {
       extensions: [".tsx", ".ts", ".js", ".jsx", ".json"],
     },