epic: getting rid of vue -- part 1

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

src/common/user-store.ts

@@ -49,6 +49,7 @@ export class UserStore extends BaseStore<UserStoreModel> {
 
   @action
   saveLastSeenAppVersion() {
+    tracker.event("app", "whats-new-seen")
     this.lastSeenAppVersion = getAppVersion();
   }
 

src/common/vars.ts

@@ -1,9 +1,7 @@
 // App's common configuration for any process (main, renderer, build pipeline, etc.)
 import path from "path";
 
-// Temp
-export const reactAppName = "app_react"
-export const vueAppName = "app_vue"
+export const appName = "lens"
 
 // Flags
 export const isMac = process.platform === "darwin"

src/main/cluster-manager.ts

@@ -26,6 +26,7 @@ export class ClusterManager {
   }
 
   constructor(protected port: number) {
+    ClusterManager.ipcListen(this);
     autorun(() => {
       clusterStore.clusters.forEach((cluster: Cluster) => {
         if (!cluster.initialized) {
@@ -34,7 +35,6 @@ export class ClusterManager {
         }
       })
     });
-    this.listenIpcEvents();
   }
 
   stop() {
@@ -105,52 +105,52 @@ export class ClusterManager {
     return "store:///icons/" + fileName
   }
 
-  protected listenIpcEvents() {
+  static ipcListen(clusterManager: ClusterManager) {
     onMessages({
       [ClusterIpcMessage.CLUSTER_ADD]: async (model: ClusterModel): Promise<boolean> => {
         tracker.event("cluster", "add");
-        await this.addCluster(model);
+        await clusterManager.addCluster(model);
         return true;
       },
       [ClusterIpcMessage.CLUSTER_STOP]: (clusterId: ClusterId) => {
         tracker.event("cluster", "stop");
-        this.getCluster(clusterId)?.stopServer();
+        clusterManager.getCluster(clusterId)?.stopServer();
       },
       [ClusterIpcMessage.CLUSTER_REMOVE]: (clusterId: ClusterId) => {
         tracker.event("cluster", "remove");
-        this.removeCluster(clusterId);
+        clusterManager.removeCluster(clusterId);
       },
       [ClusterIpcMessage.CLUSTER_REMOVE_WORKSPACE]: (workspaceId: ClusterId) => {
-        this.removeAllByWorkspace(workspaceId);
+        clusterManager.removeAllByWorkspace(workspaceId);
       },
       [ClusterIpcMessage.CLUSTER_REFRESH]: (clusterId: ClusterId) => {
-        this.getCluster(clusterId)?.refreshCluster();
+        clusterManager.getCluster(clusterId)?.refreshCluster();
       },
       [ClusterIpcMessage.CLUSTER_EVENTS]: async (clusterId: ClusterId): Promise<number> => {
-        return await this.getCluster(clusterId)?.getEventCount() || 0;
+        return await clusterManager.getCluster(clusterId)?.getEventCount() || 0;
       },
       // todo: check feature failures
       [ClusterIpcMessage.FEATURE_INSTALL]: ({ clusterId, name, config }: FeatureInstallRequest) => {
         tracker.event("cluster", "install-feature")
-        return this.getCluster(clusterId)?.installFeature(name, config)
+        return clusterManager.getCluster(clusterId)?.installFeature(name, config)
       },
       [ClusterIpcMessage.FEATURE_UPGRADE]: ({ clusterId, name, config }: FeatureInstallRequest) => {
         tracker.event("cluster", "upgrade-feature")
-        return this.getCluster(clusterId)?.upgradeFeature(name, config)
+        return clusterManager.getCluster(clusterId)?.upgradeFeature(name, config)
       },
       [ClusterIpcMessage.FEATURE_REMOVE]: ({ clusterId, name }: FeatureInstallRequest) => {
         tracker.event("cluster", "uninstall-feature")
-        return this.getCluster(clusterId)?.uninstallFeature(name);
+        return clusterManager.getCluster(clusterId)?.uninstallFeature(name);
       },
       [ClusterIpcMessage.ICON_SAVE]: async ({ clusterId, name, path }: ClusterIconUpload) => {
         tracker.event("cluster", "upload-icon");
-        const cluster = this.getCluster(clusterId);
+        const cluster = clusterManager.getCluster(clusterId);
         if (!cluster) return false;
-        cluster.preferences.icon = await this.uploadClusterIcon(cluster, name, path);
+        cluster.preferences.icon = await clusterManager.uploadClusterIcon(cluster, name, path);
       },
       [ClusterIpcMessage.ICON_RESET]: async (clusterId: ClusterId) => {
         tracker.event("cluster", "reset-icon")
-        const cluster = this.getCluster(clusterId);
+        const cluster = clusterManager.getCluster(clusterId);
         if (!cluster) return false;
         cluster.preferences.icon = null; // todo: remove current file-icon ?
       },

src/main/index.ts

@@ -3,7 +3,7 @@
 import "../common/system-ca"
 import "../common/prometheus-providers"
 import { app, dialog, protocol } from "electron"
-import { isDevelopment, isMac, vueAppName } from "../common/vars";
+import { appName, isDevelopment, isMac } from "../common/vars";
 import { PromiseIpc } from "electron-promise-ipc"
 import path from "path"
 import { format as formatUrl } from "url"
@@ -40,7 +40,7 @@ let clusterManager: ClusterManager = null;
 let proxyServer: proxy.LensProxy = null;
 
 const vmURL = formatUrl({
-  pathname: path.join(__dirname, `${vueAppName}.html`),
+  pathname: path.join(__dirname, `${appName}.html`),
   protocol: "file",
   slashes: true,
 })

src/main/router.ts

@@ -11,7 +11,7 @@ import { kubeconfigRoute } from "./routes/kubeconfig"
 import { metricsRoute } from "./routes/metrics"
 import { watchRoute } from "./routes/watch"
 import { portForwardRoute } from "./routes/port-forward"
-import { apiPrefix, outDir, reactAppName } from "../common/vars";
+import { apiPrefix, outDir, appName } from "../common/vars";
 
 const mimeTypes: Record<string, string> = {
   "html": "text/html",
@@ -94,8 +94,7 @@ export class Router {
       response.write(data)
       response.end()
     } catch (err) {
-      // default to index.html so that react routes work when page is refreshed
-      this.handleStaticFile(`${reactAppName}.html`, response)
+      this.handleStaticFile(`${appName}.html`, response)
     }
   }
 

src/renderer/_vue/components/WhatsNewPage.vue

@@ -31,7 +31,6 @@ import marked from 'marked'
 import {readFileSync} from 'fs'
 import { getStaticPath } from "../../../common/register-static"
 import { userStore } from "../../../common/user-store"
-import { tracker } from "../../../common/tracker"
 
 export default {
   name: 'WhatsNewPage',
@@ -49,9 +48,6 @@ export default {
   methods: {
     toLanding: async function() {
       userStore.saveLastSeenAppVersion();
-      tracker.event("app", "whats-new-seen")
-
-      // await this.$store.dispatch("updateLastSeenAppVersion")
       this.$router.push({
         name: "landing-page",
       }).catch(err => {})

src/renderer/_vue/index.js

@@ -1,10 +1,7 @@
 import "../../common/system-ca"
 import "./assets/css/app.scss"
-import "prismjs";
-import "prismjs/components/prism-yaml"
 import { PromiseIpc } from 'electron-promise-ipc'
 import Vue from 'vue'
-import VueElectron from 'vue-electron'
 import BootstrapVue from 'bootstrap-vue'
 import App from './App'
 import router from './router'
@@ -20,7 +17,6 @@ promiseIpc.on('navigate', async (view) => {
 });
 
 Vue.config.productionTip = false
-Vue.use(VueElectron)
 Vue.use(BootstrapVue)
 
 Vue.mixin({

src/renderer/components/app.scss

@@ -167,6 +167,14 @@ a {
   }
 }
 
+.drag {
+  -webkit-app-region: drag;
+}
+
+.nodrag {
+  -webkit-app-region: no-drag;
+}
+
 // app's common loading indicator, displaying on the route transitions
 #loading {
   position: absolute;

src/renderer/components/app.tsx

@@ -82,6 +82,3 @@ export class App extends React.Component {
     )
   }
 }
-
-// run
-App.init();

src/renderer/index.ts

@@ -0,0 +1,14 @@
+import "../../common/system-ca"
+import { userStore } from "../common/user-store";
+import { workspaceStore } from "../common/workspace-store";
+import { clusterStore } from "../common/cluster-store";
+// import { App } from "./components/app";
+
+await Promise.all([
+  userStore.whenLoaded,
+  workspaceStore.whenLoaded,
+  clusterStore.whenLoaded,
+]);
+
+// App.init();
+document.getElementById("app").innerHTML = "<p>Hello from renderer!</p>"