update eslint and apply eslint-config-webpack

.github/workflows/main.yml

@@ -47,5 +47,8 @@ jobs:
       - name: Download deps
         uses: bahmutov/npm-install@v1
 
+      - name: Build sources
+        run: npm run build
+
       - name: Run lint
         run: npm run lint

README.md

@@ -24,8 +24,7 @@ yarn add -D webpack-bundle-analyzer
 <h2 align="center">Usage (as a plugin)</h2>
 
 ```js
-const BundleAnalyzerPlugin =
-  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
+const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 
 module.exports = {
   plugins: [new BundleAnalyzerPlugin()],
@@ -48,6 +47,7 @@ And it also shows their gzipped, Brotli, or Zstandard sizes!
 
 <h2 align="center">Options (for plugin)</h2>
 
+<!-- eslint-skip -->
 ```js
 new BundleAnalyzerPlugin(options?: object)
 ```

client/components/CheckboxList.jsx

@@ -1,7 +1,6 @@
 import PureComponent from "../lib/PureComponent.jsx";
-import CheckboxListItem from "./CheckboxListItem.jsx";
-
 import * as styles from "./CheckboxList.css";
+import CheckboxListItem from "./CheckboxListItem.jsx";
 
 const ALL_ITEM = Symbol("ALL_ITEM");
 

client/components/CheckboxListItem.jsx

@@ -1,9 +1,8 @@
 import { Component } from "preact";
 
 import Checkbox from "./Checkbox.jsx";
-import CheckboxList from "./CheckboxList.jsx";
-
 import * as styles from "./CheckboxList.css";
+import CheckboxList from "./CheckboxList.jsx";
 
 export default class CheckboxListItem extends Component {
   render() {

client/components/ContextMenu.jsx

@@ -2,9 +2,8 @@ import cls from "classnames";
 import PureComponent from "../lib/PureComponent.jsx";
 import { store } from "../store.js";
 import { elementIsOutside } from "../utils.js";
-import ContextMenuItem from "./ContextMenuItem.jsx";
-
 import * as styles from "./ContextMenu.css";
+import ContextMenuItem from "./ContextMenuItem.jsx";
 
 export default class ContextMenu extends PureComponent {
   componentDidMount() {

client/components/Dropdown.jsx

@@ -63,10 +63,7 @@ export default class Dropdown extends PureComponent {
     if (el && event && !el.contains(event.target)) {
       this.setState({ showOptions: false });
       // If the query is not in the options, reset the selection
-      if (
-        this.state.query &&
-        !this.props.options.some((option) => option === this.state.query)
-      ) {
+      if (this.state.query && !this.props.options.includes(this.state.query)) {
         this.setState({ query: "" });
         this.props.onSelectionChange(undefined);
       }

client/components/Icon.jsx

@@ -5,7 +5,7 @@ import iconPin from "../assets/icon-pin.svg";
 import iconSun from "../assets/icon-sun.svg";
 import PureComponent from "../lib/PureComponent.jsx";
 
-import * as s from "./Icon.css";
+import * as styles from "./Icon.css";
 
 const ICONS = {
   "arrow-right": {
@@ -28,7 +28,7 @@ const ICONS = {
 
 export default class Icon extends PureComponent {
   render({ className }) {
-    return <i className={cls(s.icon, className)} style={this.style} />;
+    return <i className={cls(styles.icon, className)} style={this.style} />;
   }
 
   get style() {

client/components/ModuleItem.jsx

@@ -26,7 +26,13 @@ export default class ModuleItem extends PureComponent {
         onMouseLeave={this.handleMouseLeave}
       >
         <span dangerouslySetInnerHTML={{ __html: this.titleHtml }} />
-        {showSize && [" (", <strong>{filesize(module[showSize])}</strong>, ")"]}
+        {showSize && (
+          <>
+            {" ("}
+            <strong>{filesize(module[showSize])}</strong>
+            {")"}
+          </>
+        )}
       </div>
     );
   }

client/components/ModulesTreemap.jsx

@@ -11,29 +11,28 @@ import CheckboxList from "./CheckboxList.jsx";
 import ContextMenu from "./ContextMenu.jsx";
 import Dropdown from "./Dropdown.jsx";
 import ModulesList from "./ModulesList.jsx";
+import * as styles from "./ModulesTreemap.css";
 import Search from "./Search.jsx";
 import Sidebar from "./Sidebar.jsx";
 import Switcher from "./Switcher.jsx";
 import Tooltip from "./Tooltip.jsx";
 import Treemap from "./Treemap.jsx";
 
-import * as styles from "./ModulesTreemap.css";
-
 function getSizeSwitchItems() {
   const items = [
     { label: "Stat", prop: "statSize" },
     { label: "Parsed", prop: "parsedSize" },
   ];
 
-  if (window.compressionAlgorithm === "gzip") {
+  if (globalThis.compressionAlgorithm === "gzip") {
     items.push({ label: "Gzipped", prop: "gzipSize" });
   }
 
-  if (window.compressionAlgorithm === "brotli") {
+  if (globalThis.compressionAlgorithm === "brotli") {
     items.push({ label: "Brotli", prop: "brotliSize" });
   }
 
-  if (window.compressionAlgorithm === "zstd") {
+  if (globalThis.compressionAlgorithm === "zstd") {
     items.push({ label: "Zstandard", prop: "zstdSize" });
   }
 
@@ -205,7 +204,11 @@ class ModulesTreemap extends Component {
     const label = isAllItem ? "All" : item.label;
     const size = isAllItem ? store.totalChunksSize : item[store.activeSize];
 
-    return [`${label} (`, <strong>{filesize(size)}</strong>, ")"];
+    return (
+      <>
+        {label} (<strong>{filesize(size)}</strong>)
+      </>
+    );
   };
 
   get sizeSwitchItems() {
@@ -244,14 +247,16 @@ class ModulesTreemap extends Component {
     }
 
     if (store.hasFoundModules) {
-      return [
-        <div className={styles.foundModulesInfoItem}>
-          Count: <strong>{store.foundModules.length}</strong>
-        </div>,
-        <div className={styles.foundModulesInfoItem}>
-          Total size: <strong>{filesize(store.foundModulesSize)}</strong>
-        </div>,
-      ];
+      return (
+        <>
+          <div className={styles.foundModulesInfoItem}>
+            Count: <strong>{store.foundModules.length}</strong>
+          </div>
+          <div className={styles.foundModulesInfoItem}>
+            Total size: <strong>{filesize(store.foundModulesSize)}</strong>
+          </div>
+        </>
+      );
     }
 
     return `Nothing found${store.allChunksSelected ? "" : " in selected chunks"}`;
@@ -379,7 +384,7 @@ class ModulesTreemap extends Component {
         {this.renderModuleSize(module, "stat")}
         {!module.inaccurateSizes && this.renderModuleSize(module, "parsed")}
         {!module.inaccurateSizes &&
-          this.renderModuleSize(module, window.compressionAlgorithm)}
+          this.renderModuleSize(module, globalThis.compressionAlgorithm)}
         {module.path && (
           <div>
             Path: <strong>{module.path}</strong>

client/components/Sidebar.jsx

@@ -3,11 +3,10 @@ import { Component } from "preact";
 
 import Button from "./Button.jsx";
 import Icon from "./Icon.jsx";
-import ThemeToggle from "./ThemeToggle.jsx";
-
 import * as styles from "./Sidebar.css";
+import ThemeToggle from "./ThemeToggle.jsx";
 
-const toggleTime = parseInt(styles.toggleTime, 10);
+const toggleTime = Number.parseInt(styles.toggleTime, 10);
 
 export default class Sidebar extends Component {
   static defaultProps = {

client/components/Switcher.jsx

@@ -1,7 +1,6 @@
 import PureComponent from "../lib/PureComponent.jsx";
-import SwitcherItem from "./SwitcherItem.jsx";
-
 import * as styles from "./Switcher.css";
+import SwitcherItem from "./SwitcherItem.jsx";
 
 export default class Switcher extends PureComponent {
   render() {

client/components/Treemap.jsx

@@ -1,6 +1,20 @@
 import FoamTree from "@carrotsearch/foamtree";
 import { Component } from "preact";
 
+function preventDefault(event) {
+  event.preventDefault();
+}
+
+function hashCode(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const code = str.charCodeAt(i);
+    hash = (hash << 5) - hash + code;
+    hash &= hash;
+  }
+  return hash;
+}
+
 export default class Treemap extends Component {
   constructor(props) {
     super(props);
@@ -75,7 +89,7 @@ export default class Treemap extends Component {
         const chunkName = component.getChunkNamePart(root.label);
         const hash = /[^0-9]/u.test(chunkName)
           ? hashCode(chunkName)
-          : (Number.parseInt(chunkName) / 1000) * 360;
+          : (Number.parseInt(chunkName, 10) / 1000) * 360;
         variables.groupColor = {
           model: "hsla",
           h: Math.round(Math.abs(hash) % 360),
@@ -246,17 +260,3 @@ export default class Treemap extends Component {
     );
   }
 }
-
-function preventDefault(event) {
-  event.preventDefault();
-}
-
-function hashCode(str) {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    const code = str.charCodeAt(i);
-    hash = (hash << 5) - hash + code;
-    hash &= hash;
-  }
-  return hash;
-}

client/lib/PureComponent.jsx

@@ -1,11 +1,5 @@
 import { Component } from "preact";
 
-export default class PureComponent extends Component {
-  shouldComponentUpdate(nextProps, nextState) {
-    return !isEqual(nextProps, this.props) || !isEqual(this.state, nextState);
-  }
-}
-
 function isEqual(obj1, obj2) {
   if (obj1 === obj2) return true;
   const keys = Object.keys(obj1);
@@ -16,3 +10,9 @@ function isEqual(obj1, obj2) {
   }
   return true;
 }
+
+export default class PureComponent extends Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return !isEqual(nextProps, this.props) || !isEqual(this.state, nextState);
+  }
+}

client/localStorage.js

@@ -3,15 +3,17 @@ const KEY_PREFIX = "wba";
 export default {
   getItem(key) {
     try {
-      return JSON.parse(window.localStorage.getItem(`${KEY_PREFIX}.${key}`));
+      return JSON.parse(
+        globalThis.localStorage.getItem(`${KEY_PREFIX}.${key}`),
+      );
     } catch {
       return null;
     }
   },
 
   setItem(key, value) {
     try {
-      window.localStorage.setItem(
+      globalThis.localStorage.setItem(
         `${KEY_PREFIX}.${key}`,
         JSON.stringify(value),
       );
@@ -22,7 +24,7 @@ export default {
 
   removeItem(key) {
     try {
-      window.localStorage.removeItem(`${KEY_PREFIX}.${key}`);
+      globalThis.localStorage.removeItem(`${KEY_PREFIX}.${key}`);
     } catch {
       /* ignored */
     }

client/store.js

@@ -1,6 +1,6 @@
 import { computed, makeObservable, observable } from "mobx";
-import localStorage from "./localStorage";
-import { isChunkParsed, walkModules } from "./utils";
+import localStorage from "./localStorage.js";
+import { isChunkParsed, walkModules } from "./utils.js";
 
 export class Store {
   cid = 0;
@@ -27,7 +27,7 @@ export class Store {
     localStorage.getItem("showConcatenatedModulesContent") === true;
 
   darkMode = (() => {
-    const systemPrefersDark = window.matchMedia(
+    const systemPrefersDark = globalThis.matchMedia(
       "(prefers-color-scheme: dark)",
     ).matches;
 
@@ -127,7 +127,7 @@ export class Store {
   }
 
   get isSearching() {
-    return !!this.searchQueryRegexp;
+    return Boolean(this.searchQueryRegexp);
   }
 
   get foundModulesByChunk() {
@@ -184,12 +184,12 @@ export class Store {
         };
       })
       .filter((result) => result.modules.length > 0)
-      .sort((c1, c2) => c1.modules.length - c2.modules.length);
+      .toSorted((c1, c2) => c1.modules.length - c2.modules.length);
   }
 
   get foundModules() {
     return this.foundModulesByChunk.reduce(
-      (arr, chunk) => arr.concat(chunk.modules),
+      (arr, chunk) => [...arr, ...chunk.modules],
       [],
     );
   }
@@ -253,9 +253,9 @@ export class Store {
 
   updateTheme() {
     if (this.darkMode) {
-      document.documentElement.setAttribute("data-theme", "dark");
+      document.documentElement.dataset.theme = "dark";
     } else {
-      document.documentElement.removeAttribute("data-theme");
+      delete document.documentElement.dataset.theme;
     }
   }
 }