chore: update mobx

Author: alexander-akait

client/components/ModulesTreemap.jsx

@@ -1,6 +1,6 @@
 import { Component } from "preact";
 import { filesize } from "filesize";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 
 import { isChunkParsed } from "../utils";
@@ -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/ThemeToggle.jsx

@@ -6,8 +6,7 @@ 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/store.js

@@ -1,4 +1,4 @@
-import { observable, computed } from "mobx";
+import { observable, computed, makeObservable } from "mobx";
 import { isChunkParsed, walkModules } from "./utils";
 import localStorage from "./localStorage";
 
@@ -12,14 +12,14 @@ export class Store {
     "zstdSize",
   ]);
 
-  @observable.ref allChunks;
-  @observable.shallow selectedChunks;
-  @observable searchQuery = "";
-  @observable defaultSize;
-  @observable selectedSize;
-  @observable showConcatenatedModulesContent =
+  allChunks;
+  selectedChunks;
+  searchQuery = "";
+  defaultSize;
+  selectedSize;
+  showConcatenatedModulesContent =
     localStorage.getItem("showConcatenatedModulesContent") === true;
-  @observable darkMode = (() => {
+  darkMode = (() => {
     const systemPrefersDark = window.matchMedia(
       "(prefers-color-scheme: dark)",
     ).matches;
@@ -34,6 +34,31 @@ export class Store {
     return systemPrefersDark;
   })();
 
+  constructor() {
+    makeObservable(this, {
+      allChunks: observable.ref,
+      selectedChunks: observable.shallow,
+      searchQuery: observable,
+      defaultSize: observable,
+      selectedSize: observable,
+      showConcatenatedModulesContent: observable,
+      darkMode: observable,
+
+      hasParsedSizes: computed,
+      activeSize: computed,
+      visibleChunks: computed,
+      allChunksSelected: computed,
+      totalChunksSize: computed,
+      searchQueryRegexp: computed,
+      isSearching: computed,
+      foundModulesByChunk: computed,
+      foundModules: computed,
+      hasFoundModules: computed,
+      hasConcatenatedModules: computed,
+      foundModulesSize: computed,
+    });
+  }
+
   setModules(modules) {
     walkModules(modules, (module) => {
       module.cid = this.cid++;
@@ -47,11 +72,11 @@ export class Store {
     this.entrypoints = entrypoints;
   }
 
-  @computed get hasParsedSizes() {
+  get hasParsedSizes() {
     return this.allChunks.some(isChunkParsed);
   }
 
-  @computed get activeSize() {
+  get activeSize() {
     const activeSize = this.selectedSize || this.defaultSize;
 
     if (!this.hasParsedSizes || !this.sizes.has(activeSize)) {
@@ -61,26 +86,26 @@ export class Store {
     return activeSize;
   }
 
-  @computed get visibleChunks() {
+  get visibleChunks() {
     const visibleChunks = this.allChunks.filter((chunk) =>
       this.selectedChunks.includes(chunk),
     );
 
     return this.filterModulesForSize(visibleChunks, this.activeSize);
   }
 
-  @computed get allChunksSelected() {
+  get allChunksSelected() {
     return this.visibleChunks.length === this.allChunks.length;
   }
 
-  @computed get totalChunksSize() {
+  get totalChunksSize() {
     return this.allChunks.reduce(
       (totalSize, chunk) => totalSize + (chunk[this.activeSize] || 0),
       0,
     );
   }
 
-  @computed get searchQueryRegexp() {
+  get searchQueryRegexp() {
     const query = this.searchQuery.trim();
 
     if (!query) {
@@ -94,11 +119,11 @@ export class Store {
     }
   }
 
-  @computed get isSearching() {
+  get isSearching() {
     return !!this.searchQueryRegexp;
   }
 
-  @computed get foundModulesByChunk() {
+  get foundModulesByChunk() {
     if (!this.isSearching) {
       return [];
     }
@@ -155,18 +180,18 @@ export class Store {
       .sort((c1, c2) => c1.modules.length - c2.modules.length);
   }
 
-  @computed get foundModules() {
+  get foundModules() {
     return this.foundModulesByChunk.reduce(
       (arr, chunk) => arr.concat(chunk.modules),
       [],
     );
   }
 
-  @computed get hasFoundModules() {
+  get hasFoundModules() {
     return this.foundModules.length > 0;
   }
 
-  @computed get hasConcatenatedModules() {
+  get hasConcatenatedModules() {
     let result = false;
 
     walkModules(this.visibleChunks, (module) => {
@@ -179,7 +204,7 @@ export class Store {
     return result;
   }
 
-  @computed get foundModulesSize() {
+  get foundModulesSize() {
     return this.foundModules.reduce(
       (summ, module) => summ + module[this.activeSize],
       0,