update eslint and apply eslint-config-webpack (#701)

* refactor: no use before define

* refactor: fix `react/jsx-key`

* refactor: tests

* refactor: fix more `react/jsx-key`

* refactor: fix more

* refactor: add webpack eslint config

* refactor: fix problem places

* chore: fix lock file

* test: fix

* chore: build before lint due mapping requires to lib

* chore: fix ci

* chore: fix lint

Author: alexander-akait

.eslintignore

@@ -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

.eslintrc.json

@@ -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,8 @@ And it also shows their gzipped, Brotli, or Zstandard sizes!
 
 <h2 align="center">Options (for plugin)</h2>
 
+<!-- eslint-skip -->
+
 ```js
 new BundleAnalyzerPlugin(options?: object)
 ```

.github/workflows/main.yml

@@ -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");
 

README.md

@@ -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/CheckboxList.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/CheckboxListItem.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/ContextMenu.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/Dropdown.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>
     );
   }