allow to customize both main & renderer

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

build/generate-tray-icons.ts

@@ -10,9 +10,9 @@ import sharp from "sharp";
 
 const size = Number(process.env.OUTPUT_SIZE || "16");
 const outputFolder = process.env.OUTPUT_DIR || "./static/build/tray";
-const inputFile = process.env.INPUT_SVG_PATH || "./src/renderer/components/icon/logo-lens.svg";
+const inputFile = process.env.INPUT_SVG_PATH || path.resolve(__dirname, "../src/renderer/components/icon/logo-lens.svg");
-const noticeFile = process.env.NOTICE_SVG_PATH || "./src/renderer/components/icon/notice.svg";
+const noticeFile = process.env.NOTICE_SVG_PATH || path.resolve(__dirname, "../src/renderer/components/icon/notice.svg");
-const spinnerFile = process.env.SPINNER_SVG_PATH || "./src/renderer/components/icon/arrow-spinner.svg";
+const spinnerFile = process.env.SPINNER_SVG_PATH || path.resolve(__dirname, "../src/renderer/components/icon/arrow-spinner.svg");
 
 async function ensureOutputFoler() {
   await ensureDir(outputFolder);

package.json

@@ -6,13 +6,26 @@
   "version": "6.3.0-alpha.0",
   "main": "static/build/main.js",
   "exports": {
-    ".": "./static/build/library/library.js"
+    "./main": "./static/build/library/main.js",
+    "./renderer": "./static/build/library/renderer.js",
+    "./styles": "./static/build/library/renderer.css"
+  },
+  "typesVersions": {
+    "*": {
+      "main": [
+        "./src/library.ts"
+      ],
+      "renderer": [
+        "./src/renderer/library.ts"
+      ]
+    }
   },
   "files": [
-    "static/**/*",
-    "!static/build/main.*",
     "build/**/*",
-    "templates/**/*"
+    "static/build/library/**/*",
+    "src/**/*",
+    "webpack/*",
+    "types/*"
   ],
   "copyright": "© 2022 OpenLens Authors",
   "license": "MIT",

src/library.ts

@@ -4,23 +4,20 @@
  */
 
 import type { DiContainer } from "@ogre-tools/injectable";
-import staticFilesDirectoryInjectable from "./common/vars/static-files-directory.injectable";
 import { registerInjectables } from "./main/register-injectables";
 import { afterApplicationIsLoadedInjectionToken } from "./main/start-main-application/runnable-tokens/after-application-is-loaded-injection-token";
 import { beforeApplicationIsLoadingInjectionToken } from "./main/start-main-application/runnable-tokens/before-application-is-loading-injection-token";
 import { beforeElectronIsReadyInjectionToken } from "./main/start-main-application/runnable-tokens/before-electron-is-ready-injection-token";
 import { onLoadOfApplicationInjectionToken } from "./main/start-main-application/runnable-tokens/on-load-of-application-injection-token";
 import startMainApplicationInjectable from "./main/start-main-application/start-main-application.injectable";
+import * as extensionApi from "./main/extension-api";
 
 interface AppConfig {
   di: DiContainer;
-  staticPath: string;
 }
 
 function startApp(conf: AppConfig) {
-  const { di, staticPath } = conf;
+  const { di } = conf;
-
-  di.override(staticFilesDirectoryInjectable, () => staticPath);
 
   return di.inject(startMainApplicationInjectable);
 }
@@ -28,6 +25,7 @@ function startApp(conf: AppConfig) {
 export { 
   registerInjectables,
   startApp,
+  extensionApi,
   afterApplicationIsLoadedInjectionToken,
   beforeApplicationIsLoadingInjectionToken,
   beforeElectronIsReadyInjectionToken,

src/main/extension-api.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import * as Mobx from "mobx";
+import { spawn } from "node-pty";
+import * as LensExtensionsCommonApi from "../extensions/common-api";
+import * as LensExtensionsMainApi from "../extensions/main-api";
+
+
+/**
+ * Exports for virtual package "@k8slens/extensions" for main-process.
+ * All exporting names available in global runtime scope:
+ * e.g. global.Mobx, global.LensExtensions
+ */
+const LensExtensions = {
+  Common: LensExtensionsCommonApi,
+  Main: LensExtensionsMainApi,
+};
+
+const Pty = {
+  spawn,
+};
+
+export { Mobx, LensExtensions, Pty };

src/main/index.ts

@@ -5,29 +5,12 @@
 
 // Main process
 
-import * as Mobx from "mobx";
-import { spawn } from "node-pty";
-import * as LensExtensionsCommonApi from "../extensions/common-api";
-import * as LensExtensionsMainApi from "../extensions/main-api";
 import { getDi } from "./getDi";
 import startMainApplicationInjectable from "./start-main-application/start-main-application.injectable";
+import { Mobx, LensExtensions, Pty } from "./extension-api";
 
 const di = getDi();
 
 void di.inject(startMainApplicationInjectable);
 
-/**
- * Exports for virtual package "@k8slens/extensions" for main-process.
- * All exporting names available in global runtime scope:
- * e.g. global.Mobx, global.LensExtensions
- */
-const LensExtensions = {
-  Common: LensExtensionsCommonApi,
-  Main: LensExtensionsMainApi,
-};
-
-const Pty = {
-  spawn,
-};
-
 export { Mobx, LensExtensions, Pty };

src/renderer/bootstrap.tsx

@@ -3,16 +3,8 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "./components/app.scss";
-
 import React from "react";
-import ReactDOM, { render, unmountComponentAtNode } from "react-dom";
+import { render, unmountComponentAtNode } from "react-dom";
-import * as Mobx from "mobx";
-import * as MobxReact from "mobx-react";
-import * as ReactRouter from "react-router";
-import * as ReactRouterDom from "react-router-dom";
-import * as LensExtensionsCommonApi from "../extensions/common-api";
-import * as LensExtensionsRendererApi from "../extensions/renderer-api";
 import { delay } from "../common/utils";
 import { isMac, isDevelopment } from "../common/vars";
 import { DefaultProps } from "./mui-base-theme";
@@ -21,7 +13,6 @@ import * as initializers from "./initializers";
 import logger from "../common/logger";
 import { WeblinkStore } from "../common/weblink-store";
 import { registerCustomThemes } from "./components/monaco-editor";
-import { getDi } from "./getDi";
 import { DiContextProvider } from "@ogre-tools/injectable-react";
 import type { DiContainer } from "@ogre-tools/injectable";
 import extensionLoaderInjectable from "../extensions/extension-loader/extension-loader.injectable";
@@ -46,9 +37,6 @@ import assert from "assert";
 import startFrameInjectable from "./start-frame/start-frame.injectable";
 import initializeSentryReportingWithInjectable from "../common/error-reporting/initialize-sentry-reporting.injectable";
 
-configurePackages(); // global packages
-registerCustomThemes(); // monaco editor themes
-
 /**
  * If this is a development build, wait a second to attach
  * Chrome Debugger to renderer process
@@ -61,6 +49,9 @@ async function attachChromeDebugger() {
 }
 
 export async function bootstrap(di: DiContainer) {
+  configurePackages(); // global packages
+  registerCustomThemes(); // monaco editor themes
+
   const initializeSentryReportingWith = di.inject(initializeSentryReportingWithInjectable);
 
   if (process.isMainFrame) {
@@ -171,28 +162,3 @@ export async function bootstrap(di: DiContainer) {
     rootElem,
   );
 }
-
-const di = getDi();
-
-// run
-bootstrap(di);
-
-/**
- * Exports for virtual package "@k8slens/extensions" for renderer-process.
- * All exporting names available in global runtime scope:
- * e.g. Devtools -> Console -> window.LensExtensions (renderer)
- */
-const LensExtensions = {
-  Common: LensExtensionsCommonApi,
-  Renderer: LensExtensionsRendererApi,
-};
-
-export {
-  React,
-  ReactDOM,
-  ReactRouter,
-  ReactRouterDom,
-  Mobx,
-  MobxReact,
-  LensExtensions,
-};

src/renderer/extension-api.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import ReactDOM from "react-dom";
+import * as Mobx from "mobx";
+import * as MobxReact from "mobx-react";
+import * as ReactRouter from "react-router";
+import * as ReactRouterDom from "react-router-dom";
+import * as LensExtensionsCommonApi from "../extensions/common-api";
+import * as LensExtensionsRendererApi from "../extensions/renderer-api";
+
+/**
+ * Exports for virtual package "@k8slens/extensions" for renderer-process.
+ * All exporting names available in global runtime scope:
+ * e.g. Devtools -> Console -> window.LensExtensions (renderer)
+ */
+const LensExtensions = {
+  Common: LensExtensionsCommonApi,
+  Renderer: LensExtensionsRendererApi,
+};
+
+export {
+  React,
+  ReactDOM,
+  ReactRouter,
+  ReactRouterDom,
+  Mobx,
+  MobxReact,
+  LensExtensions,
+};

src/renderer/getDi.tsx

@@ -4,29 +4,10 @@
  */
 
 import { createContainer } from "@ogre-tools/injectable";
-import { autoRegister } from "@ogre-tools/injectable-extension-for-auto-registration";
+import { registerInjectables } from "./register-injectables";
-import { registerMobX } from "@ogre-tools/injectable-extension-for-mobx";
-import { runInAction } from "mobx";
-import { Environments, setLegacyGlobalDiForExtensionApi } from "../extensions/as-legacy-globals-for-extension-api/legacy-global-di-for-extension-api";
 
 export const getDi = () => {
   const di = createContainer("renderer");
 
-  setLegacyGlobalDiForExtensionApi(di, Environments.renderer);
+  return registerInjectables(di);
-
-  runInAction(() => {
-    registerMobX(di);
-
-    autoRegister({
-      di,
-      requireContexts: [
-        require.context("./", true, CONTEXT_MATCHER_FOR_NON_FEATURES),
-        require.context("../common", true, CONTEXT_MATCHER_FOR_NON_FEATURES),
-        require.context("../extensions", true, CONTEXT_MATCHER_FOR_NON_FEATURES),
-        require.context("../features", true, CONTEXT_MATCHER_FOR_FEATURES),
-      ],
-    });
-  });
-
-  return di;
 };

src/renderer/index.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./components/app.scss";
+
+import { getDi } from "./getDi";
+import { bootstrap } from "./bootstrap";
+import { 
+  React, ReactDOM, ReactRouter, 
+  ReactRouterDom, Mobx, MobxReact, LensExtensions,
+} from "./extension-api";
+
+const di = getDi();
+
+// run
+bootstrap(di);
+
+export {
+  React,
+  ReactDOM,
+  ReactRouter,
+  ReactRouterDom,
+  Mobx,
+  MobxReact,
+  LensExtensions,
+};

src/renderer/library.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import "./components/app.scss";
+
+import { bootstrap } from "./bootstrap";
+import * as extensionApi from "./extension-api";
+import { registerInjectables } from "./register-injectables";
+
+export {
+  bootstrap,
+  extensionApi,
+  registerInjectables,
+};

src/renderer/register-injectables.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type { DiContainer } from "@ogre-tools/injectable";
+import { autoRegister } from "@ogre-tools/injectable-extension-for-auto-registration";
+import { registerMobX } from "@ogre-tools/injectable-extension-for-mobx";
+import { runInAction } from "mobx";
+import { Environments, setLegacyGlobalDiForExtensionApi } from "../extensions/as-legacy-globals-for-extension-api/legacy-global-di-for-extension-api";
+
+export function registerInjectables(di: DiContainer) {
+  setLegacyGlobalDiForExtensionApi(di, Environments.renderer);
+
+  runInAction(() => {
+    registerMobX(di);
+
+    autoRegister({
+      di,
+      requireContexts: [
+        require.context("./", true, CONTEXT_MATCHER_FOR_NON_FEATURES),
+        require.context("../common", true, CONTEXT_MATCHER_FOR_NON_FEATURES),
+        require.context("../extensions", true, CONTEXT_MATCHER_FOR_NON_FEATURES),
+        require.context("../features", true, CONTEXT_MATCHER_FOR_FEATURES),
+      ],
+    });
+  });
+
+  return di;
+}

webpack/library-bundle.ts

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import nodeExternals from "webpack-node-externals";
+import { platform } from "os";
+import path from "path";
+import { DefinePlugin, optimize } from "webpack";
+import { main, renderer } from "./library";
+import { buildDir } from "./vars";
+
+const config = [
+  {
+    ...main,
+    entry: {
+      main: path.resolve(__dirname, "..", "src", "library.ts"),
+    },
+    output: {
+      libraryTarget: "commonjs",
+      path: path.resolve(buildDir, "library"),
+    },
+    optimization: {
+      minimize: false,
+    },
+    plugins: [
+      new DefinePlugin({
+        CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
+        CONTEXT_MATCHER_FOR_FEATURES: `/\\/(main|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
+      }),
+    ],
+  },
+  {
+    ...renderer,
+    entry: {
+      renderer: path.resolve(__dirname, "..", "src", "renderer", "library.ts"),
+    },
+    output: {
+      libraryTarget: "commonjs",
+      path: path.resolve(buildDir, "library"),
+    },
+    optimization: {
+      minimize: false,
+    },
+    externals: [
+      nodeExternals(),
+    ],
+    plugins: [
+      new DefinePlugin({
+        CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
+        CONTEXT_MATCHER_FOR_FEATURES: `/\\/(renderer|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
+      }),
+      new MiniCssExtractPlugin({
+        filename: "[name].css",
+        runtime: false,
+      }),
+      new optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+    ],
+  },
+];
+
+export default config;

webpack/library.ts

@@ -5,112 +5,89 @@
 
 import path from "path";
 import type webpack from "webpack";
+import type { WebpackPluginInstance } from "webpack";
 import { DefinePlugin } from "webpack";
 import nodeExternals from "webpack-node-externals";
+import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
+import CircularDependencyPlugin from "circular-dependency-plugin";
+import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
 import getTypeScriptLoader from "./get-typescript-loader";
 import rendererConfig, { iconsAndImagesWebpackRules } from "./renderer";
-import { buildDir, isDevelopment, mainDir } from "./vars";
+import { appName, assetsFolderName, buildDir, htmlTemplate, isDevelopment, mainDir, publicPath } from "./vars";
 import { platform } from "process";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
 
-const configs: { (): webpack.Configuration }[] = [
+const renderer: webpack.Configuration = ({
-  rendererConfig,
+  ...rendererConfig({ showVars: false }),
-];
+  plugins: [
-
+    // see also: https://github.com/Microsoft/monaco-editor-webpack-plugin#options
-configs.push((): webpack.Configuration => {
+    new MonacoWebpackPlugin({
-  console.info("WEBPACK:library", {
+      // publicPath: "/",
-    isDevelopment,
+      // filename: "[name].worker.js",
-    buildDir,
+      languages: ["json", "yaml"],
-  });
+      globalAPI: isDevelopment,
-
+    }),
-  return {
+    new HtmlWebpackPlugin({
-    name: "lens-app-library",
+      filename: `${appName}.html`,
-    context: __dirname,
+      template: htmlTemplate,
-    target: "electron-main",
+      inject: true,
-    mode: isDevelopment ? "development" : "production",
+      hash: true,
-    devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
+      templateParameters: {
-    cache: isDevelopment ? { type: "filesystem" } : false,
+        assetPath: `${publicPath}${assetsFolderName}`,
-    entry: {
-      library: path.resolve(mainDir, "..", "library.ts"),
-    },
-    output: {
-      path: path.join(buildDir, "library"),
-      library: {
-        type: "commonjs",
       },
-    },
+    }),
-    resolve: {
+    new MiniCssExtractPlugin({
-      extensions: [".json", ".js", ".ts"],
+      filename: "[name].css",
-    },
+    }),
-    externals: [
+  ],
-      nodeExternals(),
-    ],
-    module: {
-      rules: [
-        {
-          test: /\.node$/,
-          use: "node-loader",
-        },
-        {
-          test: /\.tsx?$/,
-          loader: "ts-loader",
-          options: {
-            compilerOptions: {
-              declaration: true, // output .d.ts
-              sourceMap: false, // to override sourceMap: true in tsconfig.json
-              outDir: path.join(buildDir, "library"),
-            },
-          },
-        },
-        ...iconsAndImagesWebpackRules(),
-      ],
-    },
-    plugins: [
-      new DefinePlugin({
-        CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
-        CONTEXT_MATCHER_FOR_FEATURES: `/\\/(main|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
-      }),
-    ],
-  };
 });
 
-configs.push((): webpack.Configuration => {
+const main: webpack.Configuration = ({
-  console.info("WEBPACK:library:download-binaries", {
+  name: "lens-app-main",
-    isDevelopment,
+  context: __dirname,
-    buildDir,
+  target: "electron-main",
-  });
+  mode: isDevelopment ? "development" : "production",
-
+  devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
-  return {
+  cache: isDevelopment ? { type: "filesystem" } : false,
-    name: "lens-app-library-download-binaries",
+  entry: {
-    context: __dirname,
+    main: path.resolve(mainDir, "index.ts"),
-    target: "electron-main",
+  },
-    mode: isDevelopment ? "development" : "production",
+  output: {
-    devtool: false,
+    libraryTarget: "global",
-    cache: isDevelopment ? { type: "filesystem" } : false,
+    path: buildDir,
-    entry: {
+  },
-      download_binaries: path.resolve(process.cwd(), "build", "download_binaries.ts"),
+  resolve: {
-    },
+    extensions: [".json", ".js", ".ts"],
-    output: {
+  },
-      path: path.join(buildDir, "library"),
+  externals: [
-    },
+    nodeExternals(),
-    resolve: {
+  ],
-      extensions: [".json", ".js", ".ts"],
+  module: {
-    },
+    rules: [
-    externals: [
+      {
-      nodeExternals(),
+        test: /\.node$/,
+        use: "node-loader",
+      },
+      getTypeScriptLoader({}, /\.ts$/),
+      ...iconsAndImagesWebpackRules(),
     ],
-    module: {
+  },
-      rules: [
+  plugins: [
-        {
+    new DefinePlugin({
-          test: /\.node$/,
+      CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
-          use: "node-loader",
+      CONTEXT_MATCHER_FOR_FEATURES: `/\\/(main|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
-        },
+    }),
-        getTypeScriptLoader({}, /\.ts$/),
+    new ForkTsCheckerPlugin(),
-        ...iconsAndImagesWebpackRules(),
+    new CircularDependencyPlugin({
-      ],
+      cwd: __dirname,
-    },
+      exclude: /node_modules/,
-    plugins: [
+      failOnError: true,
-    ],
+    }) as unknown as WebpackPluginInstance,
-  };
+  ],
 });
 
-export default configs;
+export {
+  main,
+  renderer,
+};

webpack/renderer.ts

@@ -38,7 +38,7 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
     devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
     cache: isDevelopment ? { type: "filesystem" } : false,
     entry: {
-      [appName]: path.resolve(rendererDir, "bootstrap.tsx"),
+      [appName]: path.resolve(rendererDir, "index.ts"),
     },
     output: {
       libraryTarget: "global",
@@ -65,6 +65,7 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
     },
     externals: {
       "node-fetch": "commonjs node-fetch",
+      "npm": "commonjs npm",
     },
     optimization: {
       minimize: false,
@@ -192,7 +193,7 @@ export function cssModulesWebpackRule({ styleLoader }: CssModulesWebpackRuleOpti
           sourceMap: isDevelopment,
           postcssOptions: {
             plugins: [
-              "tailwindcss",
+              ["tailwindcss", { config: path.resolve(__dirname, "..", "tailwind.config.js") }],
             ],
           },
         },

webpack/vars.ts

@@ -10,16 +10,16 @@ import packageInfo from "../package.json";
 export const isDevelopment = process.env.NODE_ENV !== "production";
 export const mainDir = path.join(process.cwd(), "src", "main");
 export const buildDir = path.join(process.cwd(), "static", "build");
-export const extensionEntry = path.join(process.cwd(), "src", "extensions", "extension-api.ts");
+export const extensionEntry = path.join(__dirname, "..", "src", "extensions", "extension-api.ts");
-export const extensionOutDir = path.join(process.cwd(), "src", "extensions", "npm", "extensions", "dist");
+export const extensionOutDir = path.join(__dirname, "..", "src", "extensions", "npm", "extensions", "dist");
 export const assetsFolderName = "assets";
 export const rendererDir = path.join(process.cwd(), "src", "renderer");
 export const appName = isDevelopment
   ? `${packageInfo.productName}Dev`
   : packageInfo.productName;
-export const htmlTemplate = path.resolve(rendererDir, "template.html");
+export const htmlTemplate = path.resolve(__dirname, "..", "src/renderer", "template.html");
 export const publicPath = "/build/";
-export const sassCommonVars = path.resolve(rendererDir, "components/vars.scss");
+export const sassCommonVars = path.resolve(__dirname, "..", "src", "renderer", "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");