Remove webpack.*.ts importing values from src/

- Remove global modifying __static

Signed-off-by: Sebastian Malton <sebastian@malton.name>

package.json

@@ -17,11 +17,11 @@
     "debug-build": "concurrently yarn:compile:main yarn:compile:extension-types",
     "dev-run": "nodemon --watch ./static/build/main.js --exec \"electron --remote-debugging-port=9223 --inspect .\"",
     "dev:main": "yarn run compile:main --watch --progress",
-    "dev:renderer": "yarn run ts-node webpack.dev-server.ts",
+    "dev:renderer": "yarn run ts-node webpack/dev-server.ts",
     "compile": "env NODE_ENV=production concurrently yarn:compile:*",
-    "compile:main": "yarn run webpack --config webpack.main.ts",
-    "compile:renderer": "yarn run webpack --config webpack.renderer.ts",
-    "compile:extension-types": "yarn run webpack --config webpack.extensions.ts",
+    "compile:main": "yarn run webpack --config webpack/main.ts",
+    "compile:renderer": "yarn run webpack --config webpack/renderer.ts",
+    "compile:extension-types": "yarn run webpack --config webpack/extensions.ts",
     "npm:fix-build-version": "yarn run ts-node build/set_build_version.ts",
     "npm:fix-package-version": "yarn run ts-node build/set_npm_version.ts",
     "build:linux": "yarn run compile && electron-builder --linux --dir",

src/common/utils/index.ts

@@ -20,7 +20,6 @@ export * from "./collection-functions";
 export * from "./convertCpu";
 export * from "./convertMemory";
 export * from "./debouncePromise";
-export * from "./defineGlobal";
 export * from "./delay";
 export * from "./disposer";
 export * from "./downloadFile";

src/common/vars.ts

@@ -7,7 +7,6 @@
 import path from "path";
 import { SemVer } from "semver";
 import packageInfo from "../../package.json";
-import { defineGlobal } from "./utils/defineGlobal";
 import { lazyInitialized } from "./utils/lazy-initialized";
 
 export const isMac = process.platform === "darwin";
@@ -78,26 +77,12 @@ export const helmBinaryName = getBinaryName("helm");
 export const helmBinaryPath = lazyInitialized(() => path.join(baseBinariesDir.get(), helmBinaryName));
 export const kubectlBinaryName = getBinaryName("kubectl");
 export const kubectlBinaryPath = lazyInitialized(() => path.join(baseBinariesDir.get(), kubectlBinaryName));
-
-// Webpack build paths
-export const contextDir = process.cwd();
-export const buildDir = path.join(contextDir, "static", publicPath);
-export const preloadEntrypoint = path.join(contextDir, "src/preload.ts");
-export const mainDir = path.join(contextDir, "src/main");
-export const rendererDir = path.join(contextDir, "src/renderer");
-export const htmlTemplate = path.resolve(rendererDir, "template.html");
-export const sassCommonVars = path.resolve(rendererDir, "components/vars.scss");
-
-// Special runtime paths
-defineGlobal("__static", {
-  get() {
-    const root = isDevelopment
-      ? contextDir
-      : (process.resourcesPath ?? contextDir);
-
-    return path.resolve(root, "static");
-  },
-});
+export const staticFilesDirectory = path.resolve(
+  isDevelopment
+    ? process.cwd()
+    : process.resourcesPath,
+  "static",
+);
 
 // Apis
 export const apiPrefix = "/api" as string; // local router apis

src/extensions/extension-discovery/extension-discovery.ts

@@ -16,7 +16,7 @@ import logger from "../../main/logger";
 import type { ExtensionsStore } from "../extensions-store/extensions-store";
 import type { ExtensionLoader } from "../extension-loader";
 import type { LensExtensionId, LensExtensionManifest } from "../lens-extension";
-import { isProduction } from "../../common/vars";
+import { isProduction, staticFilesDirectory } from "../../common/vars";
 import type { ExtensionInstallationStateStore } from "../extension-installation-state-store/extension-installation-state-store";
 import type { PackageJson } from "type-fest";
 import { extensionDiscoveryStateChannel } from "../../common/ipc/extension-handling";
@@ -112,7 +112,7 @@ export class ExtensionDiscovery {
   }
 
   get inTreeFolderPath(): string {
-    return path.resolve(__static, "../extensions");
+    return path.resolve(staticFilesDirectory, "../extensions");
   }
 
   get nodeModulesPath(): string {

src/main/index.ts

@@ -11,7 +11,7 @@ import httpProxy from "http-proxy";
 import * as LensExtensionsCommonApi from "../extensions/common-api";
 import * as LensExtensionsMainApi from "../extensions/main-api";
 import { app, autoUpdater, dialog, powerMonitor } from "electron";
-import { appName, isIntegrationTesting, isMac, isWindows, productName } from "../common/vars";
+import { appName, isIntegrationTesting, isMac, isWindows, productName, staticFilesDirectory } from "../common/vars";
 import { LensProxy } from "./lens-proxy";
 import { WindowManager } from "./window-manager";
 import { ClusterManager } from "./cluster-manager";
@@ -133,7 +133,7 @@ di.runSetups().then(() => {
 
     powerMonitor.on("shutdown", () => app.exit());
 
-    registerFileProtocol("static", __static);
+    registerFileProtocol("static", staticFilesDirectory);
 
     PrometheusProviderRegistry.createInstance();
     initializers.initPrometheusProviderRegistry();

src/main/router.ts

@@ -10,7 +10,7 @@ import type httpProxy from "http-proxy";
 import path from "path";
 import { readFile } from "fs-extra";
 import type { Cluster } from "../common/cluster/cluster";
-import { apiPrefix, appName, publicPath } from "../common/vars";
+import { apiPrefix, appName, publicPath, staticFilesDirectory } from "../common/vars";
 import { HelmApiRoute, KubeconfigRoute, MetricsRoute, PortForwardRoute, ResourceApplierApiRoute, VersionRoute } from "./routes";
 import logger from "./logger";
 
@@ -69,7 +69,6 @@ interface Dependencies {
 
 export class Router {
   protected router = new Call.Router();
-  protected static rootPath = path.resolve(__static);
 
   public constructor(private dependencies: Dependencies) {
     this.addRoutes();
@@ -117,10 +116,10 @@ export class Router {
     let filePath = params.path;
 
     for (let retryCount = 0; retryCount < 5; retryCount += 1) {
-      const asset = path.join(Router.rootPath, filePath);
+      const asset = path.join(staticFilesDirectory, filePath);
       const normalizedFilePath = path.resolve(asset);
 
-      if (!normalizedFilePath.startsWith(Router.rootPath)) {
+      if (!normalizedFilePath.startsWith(staticFilesDirectory)) {
         response.statusCode = 404;
 
         return response.end();
@@ -162,7 +161,7 @@ export class Router {
     } else {
       this.router.add({ method: "get", path: "/{path*}" }, Router.handleStaticFile);
     }
-    
+
 
     this.router.add({ method: "get", path: "/version" }, VersionRoute.getVersion);
     this.router.add({ method: "get", path: `${apiPrefix}/kubeconfig/service-account/{namespace}/{account}` }, KubeconfigRoute.routeServiceAccountRoute);

src/main/tray/tray.ts

@@ -11,7 +11,7 @@ import { showAbout } from "../menu/menu";
 import { checkForUpdates, isAutoUpdateEnabled } from "../app-updater";
 import type { WindowManager } from "../window-manager";
 import logger from "../logger";
-import { isDevelopment, isWindows, productName } from "../../common/vars";
+import { isDevelopment, isWindows, productName, staticFilesDirectory } from "../../common/vars";
 import { exitApp } from "../exit-app";
 import { preferencesURL } from "../../common/routes";
 import { toJS } from "../../common/utils";
@@ -24,7 +24,7 @@ export let tray: Tray;
 
 export function getTrayIcon(): string {
   return path.resolve(
-    __static,
+    staticFilesDirectory,
     isDevelopment ? "../build/tray" : "icons", // copied within electron-builder extras
     "trayIconTemplate.png",
   );

src/renderer/components/dock/create-resource/lens-templates.injectable.ts

@@ -5,7 +5,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import path from "path";
 import { hasCorrectExtension } from "./has-correct-extension";
-import "../../../../common/vars";
+import { staticFilesDirectory } from "../../../../common/vars";
 import readFileInjectable from "../../../../common/fs/read-file.injectable";
 import readDirInjectable from "../../../../common/fs/read-dir.injectable";
 import type { RawTemplates } from "./create-resource-templates.injectable";
@@ -16,7 +16,7 @@ interface Dependencies {
 }
 
 async function getTemplates({ readDir, readFile }: Dependencies) {
-  const templatesFolder = path.resolve(__static, "../templates/create-resource");
+  const templatesFolder = path.resolve(staticFilesDirectory, "../templates/create-resource");
 
   /**
    * Mapping between file names and their contents

tsconfig.json

@@ -32,7 +32,11 @@
         "types/*"
       ]
     },
-    "plugins": [{ "name": "typescript-plugin-css-modules" }]
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules"
+      }
+    ]
   },
   "ts-node": {
     "transpileOnly": true,
@@ -42,7 +46,8 @@
   },
   "include": [
     "src/**/*",
-    "types/*.d.ts"
+    "types/*.d.ts",
+    "webpack/*.ts"
   ],
   "exclude": [
     "node_modules",

types/mocks.d.ts

@@ -8,9 +8,6 @@ declare module "win-ca/api"
 declare module "@hapi/call"
 declare module "@hapi/subtext"
 
-// Global path to static assets
-declare const __static: string;
-
 // Support import for custom module extensions
 // https://www.typescriptlang.org/docs/handbook/modules.html#wildcard-module-declarations
 declare module "*.module.scss" {

webpack/dev-server.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import Webpack from "webpack";
+import WebpackDevServer from "webpack-dev-server";
+import { webpackLensRenderer } from "./renderer";
+import logger from "../src/common/logger";
+import { buildDir } from "./vars";
+
+/**
+ * API docs:
+ * @url https://webpack.js.org/configuration/dev-server/
+ * @url https://github.com/chimurai/http-proxy-middleware
+ */
+const config = webpackLensRenderer({ showVars: false });
+const compiler = Webpack(config);
+
+const server = new WebpackDevServer({
+  setupExitSignals: true,
+  headers: {
+    "Access-Control-Allow-Origin": "*",
+  },
+  allowedHosts: "all",
+  host: "localhost",
+  static: buildDir, // aka `devServer.contentBase` in webpack@4
+  hot: "only", // use HMR only without errors
+  liveReload: false,
+  devMiddleware: {
+    writeToDisk: false,
+    index: "OpenLensDev.html",
+    publicPath: "/build",
+  },
+  proxy: {
+    "^/$": "/build/",
+  },
+  client: {
+    overlay: false, // don't show warnings and errors on top of rendered app view
+    logging: "error",
+  },
+}, compiler);
+
+logger.info(`[WEBPACK-DEV-SERVER]: created with options`, server.options);
+
+server.start();

webpack.extensions.ts → webpack/extensions.ts

@@ -6,25 +6,21 @@
 
 import path from "path";
 import type webpack from "webpack";
-import * as vars from "./src/common/vars";
-import { cssModulesWebpackRule, fontsLoaderWebpackRules, iconsAndImagesWebpackRules } from "./webpack.renderer";
+import { cssModulesWebpackRule, fontsLoaderWebpackRules, iconsAndImagesWebpackRules } from "./renderer";
+import { extensionEntry, extensionOutDir, isDevelopment } from "./vars";
 
 export default function generateExtensionTypes(): webpack.Configuration {
-  const { isDevelopment } = vars;
-  const entry = "./src/extensions/extension-api.ts";
-  const outDir = "./src/extensions/npm/extensions/dist";
-
   return {
     // Compile for Electron for renderer process
     // see <https://webpack.js.org/configuration/target/>
     target: "electron-renderer",
-    entry,
+    entry: extensionEntry,
     // this is the default mode, so we should make it explicit to silence the warning
     mode: isDevelopment ? "development" : "production",
     output: {
       filename: "extension-api.js",
       // need to be an absolute path
-      path: path.resolve(__dirname, `${outDir}/src/extensions`),
+      path: path.resolve(extensionOutDir, "src", "extensions"),
       // can be use in commonjs environments
       // e.g. require('@k8slens/extensions')
       libraryTarget: "commonjs",
@@ -54,7 +50,7 @@ export default function generateExtensionTypes(): webpack.Configuration {
             compilerOptions: {
               declaration: true, // output .d.ts
               sourceMap: false, // to override sourceMap: true in tsconfig.json
-              outDir, // where the .d.ts should be located
+              outDir: extensionOutDir, // where the .d.ts should be located
             },
           },
         },