fixing circular dependencies, part 1

package.json

@@ -210,6 +210,7 @@
     "@lingui/react": "^3.0.0-13",
     "@material-ui/core": "^4.10.1",
     "@types/chart.js": "^2.9.21",
+    "@types/circular-dependency-plugin": "^5.0.1",
     "@types/color": "^3.0.1",
     "@types/dompurify": "^2.0.2",
     "@types/hapi": "^18.0.3",
@@ -246,6 +247,7 @@
     "bootstrap": "^4.5.0",
     "bootstrap-vue": "^2.15.0",
     "chart.js": "^2.9.3",
+    "circular-dependency-plugin": "^5.2.0",
     "color": "^3.1.2",
     "concurrently": "^5.2.0",
     "css-element-queries": "^1.2.3",
@@ -253,7 +255,6 @@
     "dompurify": "^2.0.11",
     "electron-builder": "^22.7.0",
     "electron-notarize": "^0.3.0",
-    "electron-serve": "^1.0.0",
     "file-loader": "^6.0.0",
     "flex.box": "^3.4.4",
     "fork-ts-checker-webpack-plugin": "^5.0.0",

src/common/register-static.ts

@@ -23,7 +23,3 @@ export function getStaticUrl(filePath: string) {
 export function getStaticPath(filePath: string) {
   return path.resolve(staticDir, filePath);
 }
-
-export function getOutPath(filePath: string) {
-  return path.resolve(outDir, filePath);
-}

src/main/router.ts

@@ -9,7 +9,7 @@ import { kubeconfigRoute } from "./routes/kubeconfig"
 import { metricsRoute } from "./routes/metrics"
 import { watchRoute } from "./routes/watch"
 import { portForwardRoute } from "./routes/port-forward"
-import { getOutPath } from "../common/register-static";
+import { outDir, reactAppName } from "../common/vars";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Call = require('@hapi/call');
@@ -86,11 +86,11 @@ export class Router {
   }
 
   protected handleStaticFile(filePath: string, response: http.ServerResponse) {
-    const asset = getOutPath(filePath);
+    const asset = path.resolve(outDir, filePath);
     readFile(asset, (err, data) => {
       if (err) {
         // default to index.html so that react routes work when page is refreshed
-        this.handleStaticFile("app_react.html", response)
+        this.handleStaticFile(`${reactAppName}.html`, response)
       } else {
         const type = mimeTypes[path.extname(asset).slice(1)] || "text/plain";
         response.setHeader("Content-Type", type);

src/renderer/api/api-manager.ts

@@ -1,9 +1,10 @@
-import React from "react";
+import type { KubeObjectStore } from "../kube-object.store";
+import type { KubeObjectDetailsProps, KubeObjectListLayoutProps, KubeObjectMenuProps } from "../components/kube-object";
+import type React from "react";
+
 import { observable } from "mobx";
 import { autobind } from "../utils/autobind";
 import { KubeApi } from "./kube-api";
-import { KubeObjectStore } from "../kube-object.store";
-import { KubeObjectDetailsProps, KubeObjectListLayoutProps, KubeObjectMenuProps } from "../components/kube-object";
 
 export interface ApiComponents {
   List?: React.ComponentType<KubeObjectListLayoutProps>;

src/renderer/api/kube-watch-api.ts

@@ -2,9 +2,9 @@
 
 import { computed, observable, reaction } from "mobx";
 import { stringify } from "querystring"
-import { autobind, EventEmitter, interval } from "../utils";
+import { autobind, EventEmitter } from "../utils";
 import { KubeJsonApiData } from "./kube-json-api";
-import { KubeObjectStore } from "../kube-object.store";
+import type { KubeObjectStore } from "../kube-object.store";
 import { KubeApi } from "./kube-api";
 import { configStore } from "../config.store";
 import { apiManager } from "./api-manager";
@@ -105,8 +105,7 @@ export class KubeWatchApi {
     const data = JSON.parse(evt.data);
     if ((data as IKubeWatchEvent).object) {
       this.onData.emit(data);
-    }
+    } else {
-    else {
       this.onRouteEvent(data);
     }
   }

src/renderer/components/input/input.validators.ts

@@ -1,6 +1,6 @@
+import type { InputProps } from "./input";
 import { ReactNode } from "react";
 import { t } from "@lingui/macro";
-import { InputProps } from "./input";
 import { _i18n } from '../../i18n';
 
 export interface Validator {

src/renderer/components/input/search-input.tsx

@@ -7,7 +7,7 @@ import { disposeOnUnmount, observer } from "mobx-react";
 import { t } from "@lingui/macro";
 import { Icon } from "../icon";
 import { cssNames } from "../../utils";
-import { Input, InputProps } from "../input";
+import { Input, InputProps } from "./input";
 import { getSearch, setSearch } from "../../navigation";
 import { _i18n } from '../../i18n';
 

src/renderer/components/layout/sidebar.tsx

@@ -1,3 +1,4 @@
+import type { TabRoute } from "./main-layout";
 import "./sidebar.scss";
 
 import React from "react";
@@ -19,7 +20,6 @@ import { Config, configRoute, configURL } from "../+config";
 import { eventRoute, eventsURL } from "../+events";
 import { Apps, appsRoute, appsURL } from "../+apps";
 import { namespaceStore } from "../+namespaces/namespace.store";
-import { TabRoute } from "./main-layout";
 import { Workloads } from "../+workloads";
 import { UserManagement } from "../+user-management";
 import { Storage } from "../+storage";

src/renderer/components/table/table-cell.tsx

@@ -1,8 +1,8 @@
 import "./table-cell.scss";
+import type { SortBy, SortParams } from "./table";
 
 import React, { ReactNode } from "react";
 import { autobind, cssNames } from "../../utils";
-import { SortBy, SortParams } from "./table";
 import { Icon } from "../icon";
 import { Checkbox } from "../checkbox";
 

webpack.renderer.ts

@@ -4,6 +4,7 @@ import HtmlWebpackPlugin from "html-webpack-plugin";
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
 import TerserPlugin from "terser-webpack-plugin";
 import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin"
+import CircularDependencyPlugin from "circular-dependency-plugin"
 import { VueLoaderPlugin } from "vue-loader"
 import { htmlTemplate, isDevelopment, isProduction, outDir, reactAppName, rendererDir, sassCommonVars, vueAppName } from "./src/common/vars";
 
@@ -126,6 +127,14 @@ export function webpackConfigReact(): webpack.Configuration {
     plugins: [
       new ForkTsCheckerPlugin(),
 
+      // detect circular dependencies
+      new CircularDependencyPlugin({
+        cwd: __dirname,
+        exclude: /node_modules/,
+        allowAsyncCycles: true,
+        failOnError: false,
+      }),
+
       // todo: check if this actually works in mode=production files
       // new webpack.DllReferencePlugin({
       //   context: process.cwd(),

yarn.lock

@@ -1650,6 +1650,13 @@
   dependencies:
     moment "^2.10.2"
 
+"@types/circular-dependency-plugin@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@types/circular-dependency-plugin/-/circular-dependency-plugin-5.0.1.tgz#7d9313b78192395b74a05f78778ac91d0a1e8e1f"
+  integrity sha512-FdtMz/DdrqeSTTXwvb7SRUF+Lmh8a8snyGDb7+1+SxxgjHUScyZQDq/1RcL2JCmPAhbNODfqxgRNkB1HWLcZnQ==
+  dependencies:
+    "@types/webpack" "*"
+
 "@types/clean-css@*":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@types/clean-css/-/clean-css-4.2.1.tgz#cb0134241ec5e6ede1b5344bc829668fd9871a8d"
@@ -3578,6 +3585,11 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+circular-dependency-plugin@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/circular-dependency-plugin/-/circular-dependency-plugin-5.2.0.tgz#e09dbc2dd3e2928442403e2d45b41cea06bc0a93"
+  integrity sha512-7p4Kn/gffhQaavNfyDFg7LS5S/UT1JAjyGd4UqR2+jzoYF02eDkj0Ec3+48TsIa4zghjLY87nQHIh/ecK9qLdw==
+
 class-utils@^0.3.5:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"