chore: improve package.json

client/components/Button.jsx

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

client/components/Checkbox.jsx

@@ -1,7 +1,7 @@
 import { Component } from "preact";
 import cls from "classnames";
 
-import s from "./Checkbox.css";
+import * as s from "./Checkbox.css";
 
 export default class Checkbox extends Component {
   render() {

client/components/CheckboxList.jsx

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

client/components/CheckboxListItem.jsx

@@ -2,7 +2,7 @@ import { Component } from "preact";
 
 import Checkbox from "./Checkbox";
 import CheckboxList from "./CheckboxList";
-import s from "./CheckboxList.css";
+import * as s from "./CheckboxList.css";
 
 export default class CheckboxListItem extends Component {
   render() {

client/components/ContextMenu.jsx

@@ -4,7 +4,7 @@ import PureComponent from "../lib/PureComponent";
 import { store } from "../store";
 import { elementIsOutside } from "../utils";
 
-import s from "./ContextMenu.css";
+import * as s from "./ContextMenu.css";
 
 export default class ContextMenu extends PureComponent {
   componentDidMount() {

client/components/ContextMenuItem.jsx

@@ -1,5 +1,5 @@
 import cls from "classnames";
-import s from "./ContextMenuItem.css";
+import * as s from "./ContextMenuItem.css";
 
 function noop() {
   return false;

client/components/Dropdown.jsx

@@ -1,7 +1,7 @@
 import { createRef } from "preact";
 import PureComponent from "../lib/PureComponent";
 
-import s from "./Dropdown.css";
+import * as s from "./Dropdown.css";
 
 export default class Dropdown extends PureComponent {
   input = createRef();
@@ -41,7 +41,7 @@ export default class Dropdown extends PureComponent {
             onFocus={this.handleFocus}
           />
           {this.state.showOptions ? (
-            <div className={s.options}>
+            <div>
               {filteredOptions.map((option) => (
                 <div
                   key={option}

client/components/Icon.jsx

@@ -1,5 +1,5 @@
 import cls from "classnames";
-import s from "./Icon.css";
+import * as s from "./Icon.css";
 import PureComponent from "../lib/PureComponent";
 
 import iconArrowRight from "../assets/icon-arrow-right.svg";

client/components/ModuleItem.jsx

@@ -1,10 +1,10 @@
 import escapeRegExp from "escape-string-regexp";
 import { escape } from "html-escaper";
-import filesize from "filesize";
+import { filesize } from "filesize";
 import cls from "classnames";
 
 import PureComponent from "../lib/PureComponent";
-import s from "./ModuleItem.css";
+import * as s from "./ModuleItem.css";
 
 export default class ModuleItem extends PureComponent {
   state = {

client/components/ModulesList.jsx

@@ -1,5 +1,5 @@
 import cls from "classnames";
-import s from "./ModulesList.css";
+import * as s from "./ModulesList.css";
 import ModuleItem from "./ModuleItem";
 import PureComponent from "../lib/PureComponent";
 

client/components/ModulesTreemap.jsx

@@ -1,6 +1,6 @@
 import { Component } from "preact";
-import filesize from "filesize";
-import { computed } from "mobx";
+import { filesize } from "filesize";
+import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 
 import { isChunkParsed } from "../utils";
@@ -13,7 +13,7 @@ import Checkbox from "./Checkbox";
 import CheckboxList from "./CheckboxList";
 import ContextMenu from "./ContextMenu";
 
-import s from "./ModulesTreemap.css";
+import * as s from "./ModulesTreemap.css";
 import Search from "./Search";
 import { store } from "../store";
 import ModulesList from "./ModulesList";
@@ -37,8 +37,7 @@ function getSizeSwitchItems() {
   return items;
 }
 
-@observer
-export default class ModulesTreemap extends Component {
+class ModulesTreemap extends Component {
   mouseCoords = {
     x: 0,
     y: 0,
@@ -53,6 +52,18 @@ export default class ModulesTreemap extends Component {
     tooltipContent: null,
   };
 
+  constructor() {
+    super();
+
+    makeObservable(this, {
+      sizeSwitchItems: computed,
+      activeSizeItem: computed,
+      chunkItems: computed,
+      highlightedModules: computed,
+      foundModulesInfo: computed,
+    });
+  }
+
   componentDidMount() {
     document.addEventListener("mousemove", this.handleMouseMove, true);
   }
@@ -192,17 +203,17 @@ export default class ModulesTreemap extends Component {
     return [`${label} (`, <strong>{filesize(size)}</strong>, ")"];
   };
 
-  @computed get sizeSwitchItems() {
+  get sizeSwitchItems() {
     return store.hasParsedSizes
       ? getSizeSwitchItems()
       : getSizeSwitchItems().slice(0, 1);
   }
 
-  @computed get activeSizeItem() {
+  get activeSizeItem() {
     return this.sizeSwitchItems.find((item) => item.prop === store.activeSize);
   }
 
-  @computed get chunkItems() {
+  get chunkItems() {
     const { allChunks, activeSize } = store;
     let chunkItems = [...allChunks];
 
@@ -217,11 +228,11 @@ export default class ModulesTreemap extends Component {
     return chunkItems;
   }
 
-  @computed get highlightedModules() {
+  get highlightedModules() {
     return new Set(store.foundModules);
   }
 
-  @computed get foundModulesInfo() {
+  get foundModulesInfo() {
     if (!store.isSearching) {
       // `&nbsp;` to reserve space
       return "\u00A0";
@@ -383,3 +394,5 @@ export default class ModulesTreemap extends Component {
     );
   }
 }
+
+export default observer(ModulesTreemap);

client/components/Search.jsx

@@ -1,7 +1,7 @@
 // TODO: switch to a more modern debounce package once we drop Node.js 10 support
 import debounce from "debounce";
 
-import s from "./Search.css";
+import * as s from "./Search.css";
 import Button from "./Button";
 import PureComponent from "../lib/PureComponent";
 

client/components/Sidebar.css

@@ -92,3 +92,7 @@
   top: 0;
   width: 7px;
 }
+
+:export {
+  toggleTime: 200ms;
+}

client/components/Sidebar.jsx

@@ -1,7 +1,7 @@
 import { Component } from "preact";
 import cls from "classnames";
 
-import s from "./Sidebar.css";
+import * as s from "./Sidebar.css";
 import Button from "./Button";
 import Icon from "./Icon";
 import ThemeToggle from "./ThemeToggle";

client/components/Switcher.jsx

@@ -1,5 +1,5 @@
 import SwitcherItem from "./SwitcherItem";
-import s from "./Switcher.css";
+import * as s from "./Switcher.css";
 import PureComponent from "../lib/PureComponent";
 
 export default class Switcher extends PureComponent {

client/components/ThemeToggle.jsx

@@ -1,13 +1,12 @@
 import { Component } from "preact";
 import { observer } from "mobx-react";
 
-import s from "./ThemeToggle.css";
+import * as s from "./ThemeToggle.css";
 import Button from "./Button";
 import Icon from "./Icon";
 import { store } from "../store";
 
-@observer
-export default class ThemeToggle extends Component {
+class ThemeToggle extends Component {
   render() {
     const { darkMode } = store;
 
@@ -27,3 +26,5 @@ export default class ThemeToggle extends Component {
     store.toggleDarkMode();
   };
 }
+
+export default observer(ThemeToggle);

client/components/Tooltip.jsx

@@ -1,7 +1,7 @@
 import { Component } from "preact";
 import cls from "classnames";
 
-import s from "./Tooltip.css";
+import * as s from "./Tooltip.css";
 
 export default class Tooltip extends Component {
   static marginX = 10;