Get a basic dev mode working

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

package-lock.json

@@ -29060,16 +29060,6 @@
         "react-dom": "^16.13.1 || ^17.0.1"
       }
     },
-    "node_modules/react-material-ui-carousel/node_modules/@types/react": {
-      "version": "16.14.35",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.35.tgz",
-      "integrity": "sha512-NUEiwmSS1XXtmBcsm1NyRRPYjoZF2YTE89/5QiLt5mlGffYK9FQqOKuOLuXNrjPQV04oQgaZG+Yq02ZfHoFyyg==",
-      "dependencies": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
-      }
-    },
     "node_modules/react-material-ui-carousel/node_modules/auto-bind": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/auto-bind/-/auto-bind-2.1.1.tgz",
@@ -29081,11 +29071,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/react-material-ui-carousel/node_modules/csstype": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
-    },
     "node_modules/react-redux": {
       "version": "7.2.9",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
@@ -33399,9 +33384,9 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.76.1",
+      "version": "5.77.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.1.tgz",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.77.0.tgz",
-      "integrity": "sha512-4+YIK4Abzv8172/SGqObnUjaIHjLEuUasz9EwQj/9xmPPkYJy2Mh03Q/lJfSD3YLzbxy5FeTq5Uw0323Oh6SJQ==",
+      "integrity": "sha512-sbGNjBr5Ya5ss91yzjeJTLKyfiwo5C628AFjEa6WSXcZa4E+F57om3Cc8xLb1Jh0b243AWuSYRf3dn7HVeFQ9Q==",
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^0.0.51",
@@ -34541,7 +34526,7 @@
         "typedoc-plugin-markdown": "^3.13.6",
         "typescript": "^4.9.5",
         "typescript-plugin-css-modules": "^3.4.0",
-        "webpack": "^5.75.0",
+        "webpack": "^5.77.0",
         "webpack-cli": "^4.9.2",
         "webpack-dev-server": "^4.11.1",
         "webpack-node-externals": "^3.0.0",
@@ -35577,7 +35562,7 @@
         "typedoc-plugin-markdown": "^3.13.6",
         "typescript": "^4.9.5",
         "typescript-plugin-css-modules": "^4.1.1",
-        "webpack": "^5.75.0",
+        "webpack": "^5.77.0",
         "webpack-cli": "^5.0.1"
       }
     },
@@ -37229,7 +37214,7 @@
         "sass-loader": "^13.2.0",
         "style-loader": "^3.3.1",
         "ts-loader": "^9.4.1",
-        "webpack": "^5.76.0",
+        "webpack": "^5.77.0",
         "webpack-cli": "^4.10.0",
         "webpack-node-externals": "^3.0.0"
       }
@@ -37279,7 +37264,7 @@
         "@k8slens/extensions": "^6.5.0-alpha.3",
         "@types/node": "^16.18.16",
         "typescript": "^4.9.5",
-        "webpack": "^5.76.1",
+        "webpack": "^5.77.0",
         "webpack-cli": "^5.0.1"
       },
       "engines": {
@@ -37424,7 +37409,7 @@
         "ts-loader": "^9.4.2",
         "ts-node": "^10.9.1",
         "typescript": "^4.9.5",
-        "webpack": "^5.75.0",
+        "webpack": "^5.77.0",
         "webpack-cli": "^5.0.1"
       }
     },
@@ -37637,7 +37622,7 @@
         "typed-emitter": "^1.4.0",
         "typescript": "^4.9.5",
         "typescript-plugin-css-modules": "^4.1.1",
-        "webpack": "^5.75.0",
+        "webpack": "^5.77.0",
         "webpack-cli": "^4.9.2",
         "webpack-dev-server": "^4.11.1",
         "webpack-node-externals": "^3.0.0",

package.json

@@ -21,7 +21,8 @@
     "before-dev-actions": "cd packages/open-lens && rimraf static/build/ && npm run build:tray-icons && npm run download:binaries",
     "predev": "npm run build-pre-dev-packages && npm run before-dev-actions",
     "predev-package": "echo package=$LERNA_PACKAGE_NAME files=$LERNA_FILE_CHANGES",
-    "dev-package": "lerna run dev --verbose --stream --ignore=open-lens --scope $LERNA_PACKAGE_NAME",
+    "dev-package": "lerna run dev --verbose --stream --scope $LERNA_PACKAGE_NAME",
+    "predev:library": "lerna run dev --stream",
     "dev:library": "lerna watch -- LERNA_PACKAGE_NAME=\\$LERNA_PACKAGE_NAME npm run dev-package",
     "lint": "lerna run lint --stream",
     "lint:fix": "lerna run lint:fix --stream",

packages/core/package.json

@@ -291,7 +291,7 @@
     "typedoc-plugin-markdown": "^3.13.6",
     "typescript": "^4.9.5",
     "typescript-plugin-css-modules": "^3.4.0",
-    "webpack": "^5.75.0",
+    "webpack": "^5.77.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.11.1",
     "webpack-node-externals": "^3.0.0",

packages/core/src/main/routes/files/development.injectable.ts

@@ -1,29 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { getInjectable } from "@ogre-tools/injectable";
-import httpProxy from "http-proxy";
-import { webpackDevServerPort } from "../../../../webpack/vars";
-import { publicPath } from "../../../common/vars";
-import type { LensApiRequest, RouteResponse } from "../../router/route";
-
-const devStaticFileRouteHandlerInjectable = getInjectable({
-  id: "dev-static-file-route-handler",
-  instantiate: () => {
-    const proxy = httpProxy.createProxy();
-    const proxyTarget = `http://127.0.0.1:${webpackDevServerPort}`;
-
-    return async ({ raw: { req, res }}: LensApiRequest<"/{path*}">): Promise<RouteResponse<Buffer>> => {
-      if (req.url === "/" || !req.url || !req.url.startsWith(publicPath)) {
-        req.url = `${publicPath}/index.html`;
-      }
-
-      proxy.web(req, res, { target: proxyTarget });
-
-      return { proxy };
-    };
-  },
-});
-
-export default devStaticFileRouteHandlerInjectable;

packages/core/src/main/routes/files/route-handler.injectable.ts

@@ -13,8 +13,8 @@ import { contentTypes } from "../../router/router-content-types";
 import loggerInjectable from "../../../common/logger.injectable";
 import { publicPath } from "../../../common/vars";
 
-const prodStaticFileRouteHandlerInjectable = getInjectable({
+const staticFileRouteHandlerInjectable = getInjectable({
-  id: "prod-static-file-route-handler",
+  id: "tatic-file-route-handler",
   instantiate: (di) => {
     const readFileBuffer = di.inject(readFileBufferInjectable);
     const joinPaths = di.inject(joinPathsInjectable);
@@ -56,4 +56,4 @@ const prodStaticFileRouteHandlerInjectable = getInjectable({
   },
 });
 
-export default prodStaticFileRouteHandlerInjectable;
+export default staticFileRouteHandlerInjectable;

packages/core/src/main/routes/files/static-file-route.injectable.ts

@@ -3,26 +3,16 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getRouteInjectable } from "../../router/router.injectable";
-import isDevelopmentInjectable from "../../../common/vars/is-development.injectable";
 import { route } from "../../router/route";
-import prodStaticFileRouteHandlerInjectable from "./production.injectable";
+import staticFileRouteHandlerInjectable from "./route-handler.injectable";
-import devStaticFileRouteHandlerInjectable from "./development.injectable";
 
 const staticFileRouteInjectable = getRouteInjectable({
   id: "static-file-route",
 
-  instantiate: (di) => {
+  instantiate: (di) => route({
-    const isDevelopment = di.inject(isDevelopmentInjectable);
+    method: "get",
-
+    path: `/{path*}`,
-    return route({
+  })(di.inject(staticFileRouteHandlerInjectable)),
-      method: "get",
-      path: `/{path*}`,
-    })(
-      isDevelopment
-        ? di.inject(devStaticFileRouteHandlerInjectable)
-        : di.inject(prodStaticFileRouteHandlerInjectable),
-    );
-  },
 });
 
 export default staticFileRouteInjectable;

packages/core/webpack/vars.ts

@@ -3,7 +3,6 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import assert from "assert";
 import path from "path";
 import packageInfo from "../package.json";
 
@@ -20,6 +19,3 @@ export const appName = isDevelopment
 export const htmlTemplate = path.resolve(rendererDir, "template.html");
 export const publicPath = "/build/";
 export const sassCommonVars = path.resolve(rendererDir, "components/vars.scss");
-export const webpackDevServerPort = Number(process.env.WEBPACK_DEV_SERVER_PORT) || 9191;
-
-assert(Number.isInteger(webpackDevServerPort), "WEBPACK_DEV_SERVER_PORT environment variable must only be an integer");

packages/extension-api/package.json

@@ -44,7 +44,7 @@
     "typedoc-plugin-markdown": "^3.13.6",
     "typescript": "^4.9.5",
     "typescript-plugin-css-modules": "^4.1.1",
-    "webpack": "^5.75.0",
+    "webpack": "^5.77.0",
     "webpack-cli": "^5.0.1"
   }
 }

packages/infrastructure/webpack/package.json

@@ -30,7 +30,7 @@
     "sass-loader": "^13.2.0",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.4.1",
-    "webpack": "^5.76.0",
+    "webpack": "^5.77.0",
     "webpack-cli": "^4.10.0",
     "webpack-node-externals": "^3.0.0"
   }

packages/legacy-extension-example/package.json

@@ -40,7 +40,7 @@
     "@k8slens/extensions": "^6.5.0-alpha.3",
     "@types/node": "^16.18.16",
     "typescript": "^4.9.5",
-    "webpack": "^5.76.1",
+    "webpack": "^5.77.0",
     "webpack-cli": "^5.0.1"
   }
 }

packages/node-fetch/package.json

@@ -29,7 +29,7 @@
     "ts-loader": "^9.4.2",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5",
-    "webpack": "^5.75.0",
+    "webpack": "^5.77.0",
     "webpack-cli": "^5.0.1"
   }
 }

packages/open-lens/package.json

@@ -28,10 +28,10 @@
     "build:dir": "npm run compile && electron-builder --dir",
     "compile": "cross-env NODE_ENV=production webpack --config webpack/webpack.ts --progress",
     "postcompile": "npm run build:tray-icons && npm run download:binaries",
-    "dev": "concurrently -i -k \"npm run dev-run -C\" npm:dev:*",
+    "dev": "npm run dev:main && npm run dev:renderer",
     "dev-run": "nodemon --watch ./static/build/main.js --exec \"electron --remote-debugging-port=9223 --inspect .\"",
-    "dev:main": "cross-env NODE_ENV=development webpack --config webpack/main.ts --progress --watch",
+    "dev:main": "cross-env NODE_ENV=development webpack --config webpack/main.ts --progress",
-    "dev:renderer": "cross-env NODE_ENV=development ts-node ./webpack/dev-server.ts",
+    "dev:renderer": "cross-env NODE_ENV=development webpack --config webpack/renderer.ts --progress",
     "test:integration": "jest -xyz --runInBand --detectOpenHandles --forceExit --modulePaths=[\"<rootDir>/integration/\"];",
     "build:tray-icons": "generate-tray-icons --output ./static/build/tray --input ../../node_modules/@k8slens/core/src/renderer/components/icon/logo-lens.svg --notice-icon ../../node_modules/@k8slens/core/src/renderer/components/icon/notice.svg --spinner-icon ../../node_modules/@k8slens/core/src/renderer/components/icon/arrow-spinner.svg",
     "download:binaries": "ensure-binaries --package ./package.json --base-dir ./binaries/client",
@@ -257,7 +257,7 @@
     "typed-emitter": "^1.4.0",
     "typescript": "^4.9.5",
     "typescript-plugin-css-modules": "^4.1.1",
-    "webpack": "^5.75.0",
+    "webpack": "^5.77.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.11.1",
     "webpack-node-externals": "^3.0.0",

packages/open-lens/webpack/dev-server.ts

@@ -1,45 +0,0 @@
-/**
- * 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 renderer from "./renderer";
-import { buildDir, webpackDevServerPort } from "./vars";
-
-/**
- * API docs:
- * @url https://webpack.js.org/configuration/dev-server/
- * @url https://github.com/chimurai/http-proxy-middleware
- */
-const compiler = Webpack(renderer);
-
-const server = new WebpackDevServer({
-  setupExitSignals: true,
-  headers: {
-    "Access-Control-Allow-Origin": "*",
-  },
-  allowedHosts: ".lens.app",
-  host: "localhost",
-  port: webpackDevServerPort,
-  static: buildDir, // aka `devServer.contentBase` in webpack@4
-  hot: "only", // use HMR only without errors
-  liveReload: false,
-  devMiddleware: {
-    writeToDisk: true,
-    index: "index.html",
-    publicPath: "/build",
-  },
-  proxy: {
-    "^/$": "/build/",
-  },
-  client: {
-    overlay: false, // don't show warnings and errors on top of rendered app view
-    logging: "error",
-  },
-}, compiler);
-
-console.info(`[WEBPACK-DEV-SERVER]: created with options`, server.options);
-
-server.start();

packages/open-lens/webpack/renderer.ts

@@ -7,7 +7,6 @@
  import type webpack from "webpack";
  import HtmlWebpackPlugin from "html-webpack-plugin";
  import MiniCssExtractPlugin from "mini-css-extract-plugin";
- import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
  import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
  import CircularDependencyPlugin from "circular-dependency-plugin";
  import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
@@ -84,7 +83,6 @@
       CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
       CONTEXT_MATCHER_FOR_FEATURES: `/\\/(renderer|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
     }),
-    new ForkTsCheckerPlugin(),
 
     // see also: https://github.com/Microsoft/monaco-editor-webpack-plugin#options
     new MonacoWebpackPlugin({

packages/open-lens/webpack/vars.ts

@@ -3,7 +3,6 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import assert from "assert";
 import path from "path";
 
 export const isDevelopment = process.env.NODE_ENV !== "production";
@@ -12,10 +11,7 @@ export const buildDir = path.join(process.cwd(), "static", "build");
 export const assetsFolderName = "assets";
 export const rendererDir = path.join(process.cwd(), "src", "renderer");
 export const publicPath = "/build/";
-export const webpackDevServerPort = Number(process.env.WEBPACK_DEV_SERVER_PORT) || 9191;
 
 // TODO: Figure out a way to access these without relative paths
 export const htmlTemplate = path.resolve(__dirname, "..", "..", "..", "node_modules", "@k8slens", "core", "src/renderer", "template.html");
 export const sassCommonVars = path.resolve(__dirname, "..", "..", "..", "node_modules", "@k8slens", "core", "src", "renderer", "components/vars.scss");
-
-assert(Number.isInteger(webpackDevServerPort), "WEBPACK_DEV_SERVER_PORT environment variable must only be an integer");