migration additions -- part 4 (isolate mobx for app & extensions)

Signed-off-by: Roman <ixrock@gmail.com>

extensions/example-extension/webpack.config.js

@@ -18,7 +18,6 @@ module.exports = [
     externals: [
       {
         "@k8slens/extensions": "var global.LensExtensions",
-        "mobx": "var global.Mobx",
         "react": "var global.React"
       }
     ],
@@ -49,7 +48,6 @@ module.exports = [
       {
         "@k8slens/extensions": "var global.LensExtensions",
         "react": "var global.React",
-        "mobx": "var global.Mobx"
       }
     ],
     resolve: {

extensions/kube-object-event-status/webpack.config.js

@@ -19,7 +19,6 @@ module.exports = [
       {
         "@k8slens/extensions": "var global.LensExtensions",
         "react": "var global.React",
-        "mobx": "var global.Mobx"
       }
     ],
     resolve: {

extensions/license-menu-item/webpack.config.ts

@@ -19,7 +19,6 @@ export default [
     },
     externals: {
       "@k8slens/extensions": "var global.LensExtensions",
-      "mobx": "var global.Mobx",
     },
     resolve: {
       extensions: [".tsx", ".ts", ".js"],

extensions/metrics-cluster-feature/webpack.config.js

@@ -19,7 +19,6 @@ module.exports = [
       {
         "@k8slens/extensions": "var global.LensExtensions",
         "react": "var global.React",
-        "mobx": "var global.Mobx"
       }
     ],
     resolve: {

extensions/node-menu/webpack.config.js

@@ -19,7 +19,6 @@ module.exports = [
       {
         "@k8slens/extensions": "var global.LensExtensions",
         "react": "var global.React",
-        "mobx": "var global.Mobx"
       }
     ],
     resolve: {

extensions/pod-menu/webpack.config.js

@@ -19,7 +19,6 @@ module.exports = [
       {
         "@k8slens/extensions": "var global.LensExtensions",
         "react": "var global.React",
-        "mobx": "var global.Mobx"
       }
     ],
     resolve: {

extensions/survey/package-lock.json

@@ -5159,6 +5159,27 @@
         "minimist": "^1.2.5"
       }
     },
+    "mobx": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.2.0.tgz",
+      "integrity": "sha512-j5f16JIq2v4flvYCqaAB9tMtJt/y5efR2OO5Xy+w4/MBMeQ1WeGR0T8BtiNgmxM/OQzPFUKb5DTex9Y8a/yk+g==",
+      "dev": true
+    },
+    "mobx-react": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-6.3.1.tgz",
+      "integrity": "sha512-IOxdJGnRSNSJrL2uGpWO5w9JH5q5HoxEqwOF4gye1gmZYdjoYkkMzSGMDnRCUpN/BNzZcFoMdHXrjvkwO7KgaQ==",
+      "dev": true,
+      "requires": {
+        "mobx-react-lite": "^2.2.0"
+      }
+    },
+    "mobx-react-lite": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-2.2.2.tgz",
+      "integrity": "sha512-2SlXALHIkyUPDsV4VTKVR9DW7K3Ksh1aaIv3NrNJygTbhXe2A9GrcKHZ2ovIiOp/BXilOcTYemfHHZubP431dg==",
+      "dev": true
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

extensions/survey/package.json

@@ -13,11 +13,12 @@
     "dev": "webpack --watch",
     "test": "jest --passWithNoTests --env=jsdom src $@"
   },
-  "dependencies": {},
   "devDependencies": {
     "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
     "got": "^11.8.1",
     "jest": "^26.6.3",
+    "mobx": "^6.2.0",
+    "mobx-react": "^6.2.2",
     "node-machine-id": "^1.1.12",
     "react": "^16.13.1",
     "refiner-js": "^1.0.1",

extensions/survey/src/survey-preferences-store.ts

@@ -1,5 +1,5 @@
 import { Store } from "@k8slens/extensions";
-import { observable, toJS, when, makeObservable } from "mobx";
+import { observable, toJS, when } from "mobx";
 
 export type SurveyPreferencesModel = {
   enabled: boolean;
@@ -18,7 +18,6 @@ export class SurveyPreferencesStore extends Store.ExtensionStore<SurveyPreferenc
         enabled: true
       }
     });
-    makeObservable(this);
   }
 
   protected fromStore({ enabled }: SurveyPreferencesModel): void {

extensions/survey/webpack.config.js

@@ -19,7 +19,6 @@ module.exports = [
       {
         "@k8slens/extensions": "var global.LensExtensions",
         "react": "var global.React",
-        "mobx": "var global.Mobx"
       }
     ],
     resolve: {
@@ -50,8 +49,6 @@ module.exports = [
       {
         "@k8slens/extensions": "var global.LensExtensions",
         "react": "var global.React",
-        "mobx": "var global.Mobx",
-        "mobx-react": "var global.MobxReact"
       }
     ],
     resolve: {

extensions/telemetry/src/telemetry-preferences-store.ts

@@ -1,5 +1,5 @@
 import { Store } from "@k8slens/extensions";
-import { observable, toJS, makeObservable } from "mobx";
+import { observable, toJS } from "mobx";
 
 export type TelemetryPreferencesModel = {
   enabled: boolean;
@@ -16,7 +16,6 @@ export class TelemetryPreferencesStore extends Store.ExtensionStore<TelemetryPre
         enabled: true
       }
     });
-    makeObservable(this);
   }
 
   protected fromStore({ enabled }: TelemetryPreferencesModel): void {

extensions/telemetry/webpack.config.js

@@ -19,7 +19,6 @@ module.exports = [
       {
         "@k8slens/extensions": "var global.LensExtensions",
         "react": "var global.React",
-        "mobx": "var global.Mobx"
       }
     ],
     resolve: {
@@ -50,8 +49,6 @@ module.exports = [
       {
         "@k8slens/extensions": "var global.LensExtensions",
         "react": "var global.React",
-        "mobx": "var global.Mobx",
-        "mobx-react": "var global.MobxReact"
       }
     ],
     resolve: {

src/common/libs-config.ts

@@ -5,10 +5,10 @@ import { enableMapSet, setAutoFreeze } from "immer";
 
 // Mobx
 configure({
-  isolateGlobalState: true, // might allow to use different versions of mobx in extensions
+  isolateGlobalState: true, // allow to use different versions of mobx in app & extensions
   enforceActions: "never", // skip usage of @action for class methods
 });
 
 // Immer
 setAutoFreeze(false); // allow to merge observables
-enableMapSet(); // allow merging maps and sets
+enableMapSet(); // allow to merge Map() and Set()

src/extensions/registries/page-menu-registry.ts

@@ -2,7 +2,6 @@
 import type { IconProps } from "../../renderer/components/icon";
 import type React from "react";
 import type { PageTarget, RegisteredPage } from "./page-registry";
-import { action, makeObservable } from "mobx";
 import { BaseRegistry } from "./base-registry";
 import { LensExtension } from "../lens-extension";
 
@@ -22,12 +21,6 @@ export interface PageMenuComponents {
 }
 
 export class PageMenuRegistry<T extends PageMenuRegistration> extends BaseRegistry<T> {
-  constructor() {
-    super();
-
-    makeObservable(this);
-  }
-
   add(items: T[], ext: LensExtension) {
     const normalizedItems = items.map(menuItem => {
       menuItem.target = {

src/main/index.ts

@@ -3,7 +3,6 @@
 import "../common/system-ca";
 import "../common/libs-config";
 import "../common/prometheus-providers";
-import * as Mobx from "mobx";
 import * as LensExtensions from "../extensions/core-api";
 import { app, autoUpdater, ipcMain, dialog, powerMonitor } from "electron";
 import { appName, isMac } from "../common/vars";
@@ -254,6 +253,5 @@ export const LensExtensionsApi = {
 };
 
 export {
-  Mobx,
   LensExtensionsApi as LensExtensions,
 };

src/main/router.ts

@@ -139,7 +139,7 @@ export class Router {
       res.end();
     } catch (err) {
       if (retryCount > 5) {
-        logger.error("handleStaticFile:", err.toString());
+        logger.error("handleStaticFile:", err);
         res.statusCode = 404;
         res.end();
 

src/renderer/bootstrap.tsx

@@ -1,16 +1,14 @@
 import "./components/app.scss";
 import "../common/libs-config";
-import React from "react";
-import * as Mobx from "mobx";
-import * as MobxReact from "mobx-react";
+import * as React from "react";
 import * as ReactRouter from "react-router";
 import * as ReactRouterDom from "react-router-dom";
+import * as LensExtensions from "../extensions/extension-api";
 import { render, unmountComponentAtNode } from "react-dom";
 import { clusterStore } from "../common/cluster-store";
 import { userStore } from "../common/user-store";
 import { delay } from "../common/utils";
-import { isMac, isDevelopment } from "../common/vars";
-import * as LensExtensions from "../extensions/extension-api";
+import { isDevelopment, isMac } from "../common/vars";
 import { extensionDiscovery } from "../extensions/extension-discovery";
 import { extensionLoader } from "../extensions/extension-loader";
 import { extensionsStore } from "../extensions/extensions-store";
@@ -39,8 +37,6 @@ export {
   React,
   ReactRouter,
   ReactRouterDom,
-  Mobx,
-  MobxReact,
   LensExtensions
 };
 
@@ -79,8 +75,8 @@ export async function bootstrap(App: AppComponent) {
     }
   });
   render(<>
-    {isMac && <div id="draggable-top" />}
-    <App />
+    {isMac && <div id="draggable-top"/>}
+    <App/>
   </>, rootElem);
 }