refactoring, split webpack configs + get rid of electron-webpack

src/common/register-static.ts

@@ -0,0 +1,25 @@
+// Setup static folder for common assets
+
+import path from "path";
+import { protocol } from "electron"
+import logger from "../main/logger";
+import { staticDir, staticProto } from "./vars";
+
+export function registerStaticProtocol(rootFolder = staticDir) {
+  const scheme = staticProto.replace("://", "");
+  protocol.registerFileProtocol(scheme, (request, callback) => {
+    const relativePath = request.url.replace(staticProto, "");
+    const absPath = path.resolve(rootFolder, relativePath);
+    callback(absPath);
+  }, (error) => {
+    logger.debug(`Failed to register protocol "${scheme}"`, error);
+  })
+}
+
+export function getStaticUrl(filePath: string) {
+  return staticProto + filePath;
+}
+
+export function getStaticPath(filePath: string) {
+  return path.resolve(staticDir, filePath);
+}

src/common/vars.ts

@@ -1,19 +1,21 @@
-// App's common paths/flags/etc. for any process
-import packageInfo from "../../package.json"
+// App's common configuration for any process (main, renderer, build pipeline, etc.)
 import path from "path";
 
-const { main, renderer } = packageInfo.electronWebpack;
-
-export const outDir = path.resolve(__dirname, "../dist");
-export const mainDir = path.resolve(__dirname, "../", main.sourceDirectory);
-export const rendererDir = path.resolve(__dirname, "../", renderer.sourceDirectory);
-
 export const isMac = process.platform === "darwin"
 export const isWindows = process.platform === "win32"
 export const isProduction = process.env.NODE_ENV === "production"
 export const isDevelopment = !isProduction;
 export const buildVersion = process.env.BUILD_VERSION;
 
+// Paths
+export const staticDir = path.resolve(__dirname, "../../static");
+export const outDir = path.resolve(__dirname, "../../dist");
+export const mainDir = path.resolve(__dirname, "../main");
+export const rendererDir = path.resolve(__dirname, "../renderer");
+
+// Apis
+export const staticProto = "static://"
+
 export const apiPrefix = {
   BASE: '/api',
   TERMINAL: '/api-terminal', // terminal api

src/main/index.ts

@@ -18,6 +18,7 @@ import { shellSync } from "./shell-sync"
 import { getFreePort } from "./port"
 import { mangleProxyEnv } from "./proxy-env"
 import { findMainWebContents } from "./webcontents"
+import { registerStaticProtocol } from "../common/register-static";
 import { isDevelopment, isMac } from "../common/vars";
 
 mangleProxyEnv()
@@ -41,12 +42,15 @@ async function main() {
   updater.start();
 
   tracker.event("app", "start");
+
+  registerStaticProtocol();
   protocol.registerFileProtocol('store', (request, callback) => {
     const url = request.url.substr(8)
     callback(path.normalize(`${app.getPath("userData")}/${url}`))
   }, (error) => {
     if (error) console.error('Failed to register protocol')
   })
+
   let port: number = null
   // find free port
   try {

src/main/router.ts

@@ -1,5 +1,6 @@
 import http from "http"
 import path from "path"
+import { readFile } from "fs"
 import { Cluster } from "./cluster"
 import { configRoute } from "./routes/config"
 import { helmApi } from "./helm-api"
@@ -8,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 { readFile } from "fs"
+import { getStaticPath } from "../common/register-static";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Call = require('@hapi/call');
@@ -84,8 +85,8 @@ export class Router {
     return request
   }
 
-  protected handleStaticFile(file: string, response: http.ServerResponse) {
-    const asset = path.join(__static, file)
+  protected handleStaticFile(filePath: string, response: http.ServerResponse) {
+    const asset = getStaticPath(filePath);
     readFile(asset, (err, data) => {
       if (err) {
         // default to index.html so that react routes work when page is refreshed

src/main/window-manager.ts

@@ -1,9 +1,9 @@
-import path from "path"
 import { BrowserWindow, shell } from "electron"
 import { PromiseIpc } from "electron-promise-ipc"
 import windowStateKeeper from "electron-window-state"
 import { tracker } from "./tracker";
 import { isDevelopment } from "../common/vars";
+import { getStaticUrl } from "../common/register-static";
 
 export class WindowManager {
   public mainWindow: BrowserWindow = null;
@@ -32,7 +32,7 @@ export class WindowManager {
       }
     })
     if (showSplash) {
-      this.splashWindow.loadFile(path.join(__static, "/splash.html"))
+      this.splashWindow.loadFile(getStaticUrl("splash.html"))
       this.splashWindow.show()
     }
 

src/renderer/_vue/components/WhatsNewPage.vue

@@ -28,16 +28,17 @@
 
 <script>
 import marked from 'marked'
-import fs from 'fs'
-import path from "path"
+import {readFileSync} from 'fs'
+import { getStaticPath } from "../../../common/register-static"
 
 export default {
   name: 'WhatsNewPage',
   data() {
+    let releaseNotes = getStaticPath("RELEASE_NOTES.md");
+    let content = marked(readFileSync(releaseNotes, 'utf8'));
     return {
       error: "",
-      // eslint-disable-next-line
-      content: marked(fs.readFileSync(path.join(__static, "RELEASE_NOTES.md"), 'utf8')),
+      content: content,
     }
   },
   components: {},

src/renderer/index.tsx

@@ -1,8 +1,10 @@
 // Renderer process
 
 import "../common/system-ca"
-import { App } from "./components/app";
+// import { App } from "./components/app";
 // import { appInitVue } from "./_vue";
 // appInitVue()
+// App.init();
 
-App.init();
+var app = document.getElementById("app")
+app.innerHTML = "RUNNING!!"

src/renderer/template.html

@@ -3,8 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Lens - The Kubernetes IDE</title>
-  <!--  <meta name="viewport" content="width=device-width, initial-scale=1">-->
-  <!--  <meta http-equiv="Content-Security-Policy" content="script-src 'self'">-->
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
 </head>
 <body>
 

src/renderer/webpack.renderer.js

@@ -1,46 +0,0 @@
-// fixme: convert to typescript (support webpack types, reuse vars.ts)
-const path = require("path");
-
-module.exports = function (config, env) {
-  const {module} = config;
-  const {rules} = module;
-
-  // localization support
-  // https://lingui.js.org/guides/typescript.html
-  patchLoader(".tsx", "ts-loader", loader => {
-    loader.options = Object.assign({}, loader.options, {
-      compilerOptions: {
-        jsx: "preserve", // @lingui/babel-preset-react
-        target: "es2016", // @lingui/babel-preset-react
-      }
-    })
-    return ["babel-loader", loader]
-  });
-
-  // sass common vars file import
-  patchLoader(".scss", "sass-loader", loader => {
-    loader.options = Object.assign({}, loader.options, {
-      prependData: '@import "vars.scss";',
-      sassOptions: {
-        includePaths: [
-          path.resolve(__dirname, "components")
-        ]
-      }
-    })
-    return loader;
-  });
-
-  function patchLoader(fileType, loaderName, updater) {
-    let rule = rules.find(rule => fileType.match(rule.test));
-    if (rule) {
-      let loaders = [rule.use].flat();
-      let index = loaders.findIndex(loader => loader === loaderName || loader.loader === loaderName);
-      let loader = typeof loaders[index] === "string" ? {loader: loaders[index]} : loaders[index];
-      loaders[index] = updater(loader);
-      rule.use = loaders.flat();
-      console.info(`Patched webpack's renderer config for "${loaderName}" in ${__filename}`, loader);
-    }
-  }
-
-  return config;
-}