refactor: more ES6 code and code improvements

client/components/Button.jsx

@@ -1,12 +1,13 @@
 import cls from "classnames";
-import * as s from "./Button.css";
-import PureComponent from "../lib/PureComponent";
+import PureComponent from "../lib/PureComponent.jsx";
+
+import * as styles from "./Button.css";
 
 export default class Button extends PureComponent {
   render({ active, className, children, ...props }) {
     const classes = cls(className, {
-      [s.button]: true,
-      [s.active]: active,
+      [styles.button]: true,
+      [styles.active]: active,
     });
 
     return (

client/components/Checkbox.jsx

@@ -1,21 +1,21 @@
-import { Component } from "preact";
 import cls from "classnames";
+import { Component } from "preact";
 
-import * as s from "./Checkbox.css";
+import * as styles from "./Checkbox.css";
 
 export default class Checkbox extends Component {
   render() {
     const { checked, className, children } = this.props;
 
     return (
-      <label className={cls(s.label, className)}>
+      <label className={cls(styles.label, className)}>
         <input
-          className={s.checkbox}
+          className={styles.checkbox}
           type="checkbox"
           checked={checked}
           onChange={this.handleChange}
         />
-        <span className={s.itemText}>{children}</span>
+        <span className={styles.itemText}>{children}</span>
       </label>
     );
   }

client/components/CheckboxList.jsx

@@ -1,6 +1,7 @@
-import CheckboxListItem from "./CheckboxListItem";
-import * as s from "./CheckboxList.css";
-import PureComponent from "../lib/PureComponent";
+import PureComponent from "../lib/PureComponent.jsx";
+import CheckboxListItem from "./CheckboxListItem.jsx";
+
+import * as styles from "./CheckboxList.css";
 
 const ALL_ITEM = Symbol("ALL_ITEM");
 
@@ -40,8 +41,8 @@ export default class CheckboxList extends PureComponent {
     const { label, items, renderLabel } = this.props;
 
     return (
-      <div className={s.container}>
-        <div className={s.label}>{label}:</div>
+      <div className={styles.container}>
+        <div className={styles.label}>{label}:</div>
         <div>
           <CheckboxListItem
             item={ALL_ITEM}

client/components/CheckboxListItem.jsx

@@ -1,13 +1,14 @@
 import { Component } from "preact";
 
-import Checkbox from "./Checkbox";
-import CheckboxList from "./CheckboxList";
-import * as s from "./CheckboxList.css";
+import Checkbox from "./Checkbox.jsx";
+import CheckboxList from "./CheckboxList.jsx";
+
+import * as styles from "./CheckboxList.css";
 
 export default class CheckboxListItem extends Component {
   render() {
     return (
-      <div className={s.item}>
+      <div className={styles.item}>
         <Checkbox {...this.props} onChange={this.handleChange}>
           {this.renderLabel()}
         </Checkbox>

client/components/ContextMenu.jsx

@@ -1,10 +1,10 @@
 import cls from "classnames";
-import ContextMenuItem from "./ContextMenuItem";
-import PureComponent from "../lib/PureComponent";
-import { store } from "../store";
-import { elementIsOutside } from "../utils";
+import PureComponent from "../lib/PureComponent.jsx";
+import { store } from "../store.js";
+import { elementIsOutside } from "../utils.js";
+import ContextMenuItem from "./ContextMenuItem.jsx";
 
-import * as s from "./ContextMenu.css";
+import * as styles from "./ContextMenu.css";
 
 export default class ContextMenu extends PureComponent {
   componentDidMount() {
@@ -30,8 +30,8 @@ export default class ContextMenu extends PureComponent {
   render() {
     const { visible } = this.props;
     const containerClassName = cls({
-      [s.container]: true,
-      [s.hidden]: !visible,
+      [styles.container]: true,
+      [styles.hidden]: !visible,
     });
     const multipleChunksSelected = store.selectedChunks.length > 1;
     return (
@@ -93,14 +93,14 @@ export default class ContextMenu extends PureComponent {
   /**
    * Handle document-wide `mousedown` events to detect clicks
    * outside the context menu.
-   * @param {MouseEvent} e - DOM mouse event object
+   * @param {MouseEvent} event - DOM mouse event object
    * @returns {void}
    */
-  handleDocumentMousedown = (e) => {
-    const isSecondaryClick = e.ctrlKey || e.button === 2;
-    if (!isSecondaryClick && elementIsOutside(e.target, this.node)) {
-      e.preventDefault();
-      e.stopPropagation();
+  handleDocumentMousedown = (event) => {
+    const isSecondaryClick = event.ctrlKey || event.button === 2;
+    if (!isSecondaryClick && elementIsOutside(event.target, this.node)) {
+      event.preventDefault();
+      event.stopPropagation();
       this.hide();
     }
   };

client/components/ContextMenuItem.jsx

@@ -1,14 +1,15 @@
 import cls from "classnames";
-import * as s from "./ContextMenuItem.css";
+
+import * as styles from "./ContextMenuItem.css";
 
 function noop() {
   return false;
 }
 
 export default function ContextMenuItem({ children, disabled, onClick }) {
   const className = cls({
-    [s.item]: true,
-    [s.disabled]: disabled,
+    [styles.item]: true,
+    [styles.disabled]: disabled,
   });
   const handler = disabled ? noop : onClick;
   return (

client/components/Dropdown.jsx

@@ -1,7 +1,7 @@
 import { createRef } from "preact";
-import PureComponent from "../lib/PureComponent";
+import PureComponent from "../lib/PureComponent.jsx";
 
-import * as s from "./Dropdown.css";
+import * as styles from "./Dropdown.css";
 
 export default class Dropdown extends PureComponent {
   input = createRef();
@@ -29,12 +29,12 @@ export default class Dropdown extends PureComponent {
       : options;
 
     return (
-      <div className={s.container}>
-        <div className={s.label}>{label}:</div>
+      <div className={styles.container}>
+        <div className={styles.label}>{label}:</div>
         <div>
           <input
             ref={this.input}
-            className={s.input}
+            className={styles.input}
             type="text"
             value={this.state.query}
             onInput={this.handleInput}
@@ -45,7 +45,7 @@ export default class Dropdown extends PureComponent {
               {filteredOptions.map((option) => (
                 <div
                   key={option}
-                  className={s.option}
+                  className={styles.option}
                   onClick={this.getOptionClickHandler(option)}
                 >
                   {option}

client/components/Icon.jsx

@@ -1,11 +1,11 @@
 import cls from "classnames";
-import * as s from "./Icon.css";
-import PureComponent from "../lib/PureComponent";
-
 import iconArrowRight from "../assets/icon-arrow-right.svg";
-import iconPin from "../assets/icon-pin.svg";
 import iconMoon from "../assets/icon-moon.svg";
+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";
 
 const ICONS = {
   "arrow-right": {

client/components/ModuleItem.jsx

@@ -1,10 +1,10 @@
+import cls from "classnames";
 import escapeRegExp from "escape-string-regexp";
-import { escape } from "html-escaper";
 import { filesize } from "filesize";
-import cls from "classnames";
+import { escape } from "html-escaper";
+import PureComponent from "../lib/PureComponent.jsx";
 
-import PureComponent from "../lib/PureComponent";
-import * as s from "./ModuleItem.css";
+import * as styles from "./ModuleItem.css";
 
 export default class ModuleItem extends PureComponent {
   state = {
@@ -13,8 +13,8 @@ export default class ModuleItem extends PureComponent {
 
   render({ module, showSize }) {
     const invisible = !this.state.visible;
-    const classes = cls(s.container, s[this.itemType], {
-      [s.invisible]: invisible,
+    const classes = cls(styles.container, styles[this.itemType], {
+      [styles.invisible]: invisible,
     });
 
     return (
@@ -57,10 +57,11 @@ export default class ModuleItem extends PureComponent {
       } while (match);
 
       if (lastMatch) {
-        html =
-          escape(title.slice(0, lastMatch.index)) +
-          `<strong>${escape(lastMatch[0])}</strong>` +
-          escape(title.slice(lastMatch.index + lastMatch[0].length));
+        html = `${escape(
+          title.slice(0, lastMatch.index),
+        )}<strong>${escape(lastMatch[0])}</strong>${escape(
+          title.slice(lastMatch.index + lastMatch[0].length),
+        )}`;
       }
     }
 

client/components/ModulesList.jsx

@@ -1,12 +1,13 @@
 import cls from "classnames";
-import * as s from "./ModulesList.css";
-import ModuleItem from "./ModuleItem";
-import PureComponent from "../lib/PureComponent";
+import PureComponent from "../lib/PureComponent.jsx";
+import ModuleItem from "./ModuleItem.jsx";
+
+import * as styles from "./ModulesList.css";
 
 export default class ModulesList extends PureComponent {
   render({ modules, showSize, highlightedText, isModuleVisible, className }) {
     return (
-      <div className={cls(s.container, className)}>
+      <div className={cls(styles.container, className)}>
         {modules.map((module) => (
           <ModuleItem
             key={module.cid}