refactor: cleanup & migrate to rspack

Seldszar · Seldszar · commit a48d545ab98f · 2025-05-28T23:02:47.000+02:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-typescript", ["@babel/preset-react", { "runtime": "automatic" }]],
+  "plugins": ["@emotion/babel-plugin", "babel-plugin-macros"]
+}
diff --git a/babel.config.js b/babel.config.js
diff --git a/package.json b/package.json
@@ -1,9 +1,11 @@
 {
+  "private": true,
+  "packageManager": "yarn@1.22.22",
   "scripts": {
-    "build:chrome": "webpack --env platform=chrome --mode=production",
-    "build:firefox": "webpack --env platform=firefox --mode=production",
-    "develop:chrome": "webpack --env platform=chrome --mode=development --watch",
-    "develop:firefox": "webpack --env platform=firefox --mode=development --watch",
+    "build:chrome": "rspack --env platform=chrome --mode=production",
+    "build:firefox": "rspack --env platform=firefox --mode=production",
+    "develop:chrome": "rspack --env platform=chrome --mode=development --watch",
+    "develop:firefox": "rspack --env platform=firefox --mode=development --watch",
     "prepare": "husky install",
     "test": "tsc --noEmit && eslint --ext=tsx,ts ."
   },
@@ -14,7 +16,7 @@
     "@emotion/styled": "^11.10.8",
     "@floating-ui/react": "^0.25.0",
     "@tabler/icons-react": "^2.30.0",
-    "lodash-es": "^4.17.21",
+    "es-toolkit": "^1.38.0",
     "overlayscrollbars": "^2.2.1",
     "overlayscrollbars-react": "^0.5.1",
     "react": "^18.2.0",
@@ -27,15 +29,14 @@
   },
   "devDependencies": {
     "@babel/core": "^7.22.9",
-    "@babel/plugin-transform-runtime": "^7.22.9",
-    "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^17.6.7",
     "@emotion/babel-plugin": "^11.10.8",
+    "@rspack/cli": "^1.3.12",
+    "@rspack/core": "^1.3.12",
     "@seldszar/yael": "^2.2.0",
-    "@types/lodash-es": "^4.17.8",
     "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",
     "@types/webextension-polyfill": "^0.10.1",
@@ -44,26 +45,17 @@
     "autoprefixer": "^10.4.14",
     "babel-loader": "^9.1.3",
     "babel-plugin-macros": "^3.1.0",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.8.1",
     "dotenv": "^16.3.1",
     "eslint": "^8.46.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.1",
-    "html-webpack-plugin": "^5.5.3",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.3",
-    "mini-css-extract-plugin": "^2.7.6",
-    "postcss": "^8.4.27",
-    "postcss-loader": "^7.3.3",
     "prettier": "^3.0.1",
-    "style-loader": "^3.3.3",
     "tailwindcss": "^3.3.3",
     "twin.macro": "^3.4.0",
     "typescript": "^5.1.6",
-    "webpack": "^5.88.2",
-    "webpack-cli": "^5.1.4",
     "webpack-merge": "^5.9.0"
   },
   "babelMacros": {
diff --git a/postcss.config.js b/postcss.config.js
diff --git a/rspack.config.js b/rspack.config.js
@@ -2,13 +2,10 @@ require("dotenv/config");
 
 const fs = require("fs");
 const path = require("path");
-const webpack = require("webpack");
-const { merge } = require("webpack-merge");
 
+const { rspack } = require("@rspack/core");
 const { EntryWrapperPlugin } = require("@seldszar/yael");
-
-const CopyWebpackPlugin = require("copy-webpack-plugin");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { merge } = require("webpack-merge");
 
 const localeReplacements = [
   {
@@ -24,13 +21,10 @@ module.exports = (env, argv) => {
     devtool: isDevelopment ? "inline-cheap-source-map" : false,
     output: {
       path: path.resolve("dist"),
-      publicPath: "",
     },
     resolve: {
-      extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
-      alias: {
-        "~": path.resolve("src"),
-      },
+      extensions: [".tsx", ".ts", ".js", ".json", ".wasm"],
+      tsConfig: path.resolve("tsconfig.json"),
     },
     module: {
       rules: [
@@ -42,15 +36,14 @@ module.exports = (env, argv) => {
       ],
     },
     plugins: [
-      new webpack.EnvironmentPlugin({
+      new rspack.EnvironmentPlugin({
         TWITCH_CLIENT_ID: undefined,
         TWITCH_REDIRECT_URI: undefined,
-        SENTRY_DSN: null,
       }),
-      new webpack.ProvidePlugin({
+      new rspack.ProvidePlugin({
         browser: "webextension-polyfill",
       }),
-      new CopyWebpackPlugin({
+      new rspack.CopyRspackPlugin({
         patterns: [
           {
             from: "**/*",
@@ -88,12 +81,6 @@ module.exports = (env, argv) => {
         ],
       }),
     ],
-    cache: {
-      type: "filesystem",
-      buildDependencies: {
-        config: [__filename],
-      },
-    },
   };
 
   return [
@@ -103,31 +90,20 @@ module.exports = (env, argv) => {
         popup: "./src/browser/pages/popup.tsx",
         settings: "./src/browser/pages/settings.tsx",
       },
-      module: {
-        rules: [
-          {
-            test: /\.css$/,
-            use: ["style-loader", "css-loader", "postcss-loader"],
-          },
-        ],
-      },
-      optimization: {
-        splitChunks: {
-          name: "commons",
-          chunks: "all",
-        },
+      experiments: {
+        css: true,
       },
       plugins: [
         new EntryWrapperPlugin({
           template: "./src/browser/entry-template.tsx",
           test: /\.tsx$/,
         }),
-        new HtmlWebpackPlugin({
+        new rspack.HtmlRspackPlugin({
           template: "./src/browser/entry-template.html",
           filename: "popup.html",
           chunks: ["popup"],
         }),
-        new HtmlWebpackPlugin({
+        new rspack.HtmlRspackPlugin({
           template: "./src/browser/entry-template.html",
           filename: "settings.html",
           chunks: ["settings"],
diff --git a/src/background/index.ts b/src/background/index.ts
@@ -1,4 +1,4 @@
-import { get } from "lodash-es";
+import { get } from "es-toolkit/compat";
 
 import { openUrl } from "~/common/helpers";
 import { stores } from "~/common/stores";
diff --git a/src/background/modules/maintenance.ts b/src/background/modules/maintenance.ts
@@ -1,4 +1,4 @@
-import { get } from "lodash-es";
+import { get } from "es-toolkit/compat";
 
 import { stores, StoreState } from "~/common/stores";
 import { Dictionary } from "~/common/types";
diff --git a/src/background/modules/twitch.ts b/src/background/modules/twitch.ts
@@ -1,4 +1,4 @@
-import { camelCase, castArray, chunk, find, get, snakeCase, toString } from "lodash-es";
+import { camelCase, castArray, chunk, find, get, snakeCase, toString } from "es-toolkit/compat";
 
 import { allPromises, changeCase, isRerunStream, matchString, openUrl, t } from "~/common/helpers";
 import { stores } from "~/common/stores";
diff --git a/src/browser/components/CheckboxGrid.tsx b/src/browser/components/CheckboxGrid.tsx
@@ -1,4 +1,4 @@
-import { map, xor } from "lodash-es";
+import { map, xor } from "es-toolkit/compat";
 import { ReactNode } from "react";
 import tw, { styled } from "twin.macro";
 
diff --git a/src/browser/components/CollectionList.tsx b/src/browser/components/CollectionList.tsx
@@ -1,5 +1,5 @@
 import { IconPencil, IconSettings, IconTrash } from "@tabler/icons-react";
-import { reject } from "lodash-es";
+import { reject } from "es-toolkit/compat";
 import { Fragment, ReactNode, useMemo, useState } from "react";
 import tw, { styled } from "twin.macro";
 
diff --git a/src/browser/components/FilterBar.tsx b/src/browser/components/FilterBar.tsx
@@ -1,4 +1,4 @@
-import { filter } from "lodash-es";
+import { filter } from "es-toolkit/compat";
 import { useMemo } from "react";
 import tw, { styled } from "twin.macro";
 
diff --git a/src/browser/components/ListManager.tsx b/src/browser/components/ListManager.tsx
@@ -3,7 +3,7 @@ import { SortableContext, arrayMove, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { FloatingPortal } from "@floating-ui/react";
 import { IconEdit, IconGripVertical, IconList, IconPlus, IconTrash } from "@tabler/icons-react";
-import { concat, set, without } from "lodash-es";
+import { concat, set, without } from "es-toolkit/compat";
 import { HTMLAttributes, Key, ReactNode, forwardRef, useEffect, useState } from "react";
 import tw, { css, styled } from "twin.macro";
 
diff --git a/src/browser/contexts/settings.tsx b/src/browser/contexts/settings.tsx
@@ -1,4 +1,4 @@
-import { get, set } from "lodash-es";
+import { get, set } from "es-toolkit/compat";
 import { ReactNode, createContext, useContext } from "react";
 
 import { Settings } from "~/common/types";
diff --git a/src/browser/helpers/array.ts b/src/browser/helpers/array.ts
@@ -1,4 +1,4 @@
-import { escapeRegExp } from "lodash-es";
+import { escapeRegExp } from "es-toolkit/compat";
 
 export function isEmpty<T extends unknown[]>(value?: T): value is undefined {
   return !value?.length;
diff --git a/src/browser/hooks/query.ts b/src/browser/hooks/query.ts
@@ -1,4 +1,4 @@
-import { chunk, flatMap, get, has } from "lodash-es";
+import { chunk, flatten, get, has } from "es-toolkit/compat";
 import { useMemo } from "react";
 import useSWR, { SWRConfiguration } from "swr";
 import useSWRInfinite, { SWRInfiniteConfiguration } from "swr/infinite";
@@ -214,7 +214,7 @@ function createFetcherByID<T>(path: string) {
           return data as T[];
         });
 
-        return flatMap(promises);
+        return flatten(promises);
       },
       config,
     );
diff --git a/src/browser/hooks/store.ts b/src/browser/hooks/store.ts
@@ -1,4 +1,4 @@
-import { xor } from "lodash-es";
+import { xor } from "es-toolkit/compat";
 import { useEffect, useState } from "react";
 
 import { Store, stores } from "~/common/stores";
diff --git a/src/browser/views/popup/FollowedStreams.tsx b/src/browser/views/popup/FollowedStreams.tsx
@@ -1,4 +1,4 @@
-import { orderBy } from "lodash-es";
+import { orderBy } from "es-toolkit/compat";
 import { useMemo, useState } from "react";
 import { styled } from "twin.macro";
 
diff --git a/src/browser/views/popup/FollowedUsers.tsx b/src/browser/views/popup/FollowedUsers.tsx
@@ -1,4 +1,4 @@
-import { find, map, orderBy } from "lodash-es";
+import { find, map, orderBy } from "es-toolkit/compat";
 import { useMemo, useState } from "react";
 import tw, { styled } from "twin.macro";
 
diff --git a/src/browser/views/popup/TopCategories.tsx b/src/browser/views/popup/TopCategories.tsx
@@ -1,4 +1,4 @@
-import { flatMap, sortBy } from "lodash-es";
+import { flatMap, sortBy } from "es-toolkit/compat";
 import { Link } from "react-router";
 import tw, { styled } from "twin.macro";
 
diff --git a/src/browser/views/settings/NotificationSettings.tsx b/src/browser/views/settings/NotificationSettings.tsx
@@ -1,4 +1,4 @@
-import { sortBy } from "lodash-es";
+import { sortBy } from "es-toolkit/compat";
 import { useMemo } from "react";
 import tw, { styled } from "twin.macro";
 
diff --git a/src/common/helpers.ts b/src/common/helpers.ts
@@ -1,4 +1,4 @@
-import { isPlainObject, lowerCase, reduce } from "lodash-es";
+import { isPlainObject, lowerCase, reduce } from "es-toolkit/compat";
 import { MouseEvent } from "react";
 
 import { ClickBehavior } from "./constants";
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,13 +1,18 @@
 {
   "compilerOptions": {
     "strict": true,
+
     "module": "esnext",
-    "target": "esnext",
     "moduleResolution": "bundler",
+    "target": "esnext",
+
+    "jsxImportSource": "@emotion/react",
     "jsx": "react-jsx",
+
     "strictNullChecks": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
+
     "baseUrl": ".",
     "paths": {
       "~/*": [
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "presets": ["@babel/preset-typescript", ["@babel/preset-react", { "runtime": "automatic" }]],
 +  "plugins": ["@emotion/babel-plugin", "babel-plugin-macros"]
 +}
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { get } from "lodash-es";`
	`1`	`+import { get } from "es-toolkit/compat";`
`2`	`2`
`3`	`3`	`import { openUrl } from "~/common/helpers";`
`4`	`4`	`import { stores } from "~/common/stores";`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { camelCase, castArray, chunk, find, get, snakeCase, toString } from "lodash-es";`
	`1`	`+import { camelCase, castArray, chunk, find, get, snakeCase, toString } from "es-toolkit/compat";`
`2`	`2`
`3`	`3`	`import { allPromises, changeCase, isRerunStream, matchString, openUrl, t } from "~/common/helpers";`
`4`	`4`	`import { stores } from "~/common/stores";`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { map, xor } from "lodash-es";`
	`1`	`+import { map, xor } from "es-toolkit/compat";`
`2`	`2`	`import { ReactNode } from "react";`
`3`	`3`	`import tw, { styled } from "twin.macro";`
`4`	`4`