Restructure to monorepo (#6907)

* wip: restructure to monorepo Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * refactor create-release-pr to a package Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * build fixes Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * github workflow fixes Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix typo Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * add webpack-env types to core Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix github workflows Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * refactor/fix integration tests Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * lint fix Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * yarn run dev Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * eslint settings for vscode Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * move templates to right package Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * open-lens build fixes Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * integration test fix Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix nx task dependencies Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * use bash shell for unit tests in test workflow Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix test:unit for windows Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix win-ca webpack error in open-lens Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix win-ca webpack error in open-lens Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix build:app on windows Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * remove ELECTRON_BUILDER_EXTRA_ARGS Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * sync src/ from master Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * remove Makefile from core Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
2025-05-20 05:10:56 +00:00 · 2023-01-24 10:46:26 -08:00
1 parent 0066ca4ea2
commit 2657df2293
@@ -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 { buildDir, webpackDevServerPort } 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",
+  port: webpackDevServerPort,
+  static: buildDir, // aka `devServer.contentBase` in webpack@4
+  hot: true,
+  liveReload: false,
+  historyApiFallback: true,
+  compress: true, // enable gzip for everything served
+  devMiddleware: {
+    writeToDisk: false,
+    index: "OpenLensDev.html",
+    publicPath: "/build",
+  },
+  client: {
+    reconnect: true,
+    overlay: false, // don't show warnings and errors on top of rendered app view
+    logging: "info",
+  },
+}, compiler);
+
+console.info(`[WEBPACK-DEV-SERVER]: created with options`, server.options);
+
+server.start();
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import esbuild from "esbuild";
+import type { Options as TSLoaderOptions } from "ts-loader";
+
+/**
+ * A function returning webpack ts/tsx loader
+ * depends on env LENS_DEV_USE_ESBUILD_LOADER to use esbuild-loader (faster) or good-old ts-loader
+ * @returns ts/tsx webpack loader configuration object
+ */
+export default function getTypescriptLoader(options: Partial<TSLoaderOptions> = {}, testRegExp?: RegExp) {
+  testRegExp ??= /\.tsx?$/; // by default covers react/jsx-stuff
+  options.transpileOnly ??= true;
+
+  if (process.env.LENS_DEV_USE_ESBUILD_LOADER === "true") {
+    console.info(`\n🚀 using esbuild-loader for ts(x)`);
+
+    return {
+      test: testRegExp,
+      loader: "esbuild-loader",
+      options: {
+        loader: "tsx",
+        target: "ES2019", // supported by >= electron@14
+        implementation: esbuild,
+      },
+    };
+  }
+
+  return {
+    test: testRegExp,
+    exclude: /node_modules/,
+    use: {
+      loader: "ts-loader",
+      options,
+    },
+  };
+}
@@ -0,0 +1,118 @@
+/**
+ * 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 { platform } from "os";
+import path from "path";
+import { DefinePlugin, optimize } from "webpack";
+import main from "./main";
+import renderer, { iconsAndImagesWebpackRules } from "./renderer";
+import { buildDir } from "./vars";
+
+const rendererConfig = renderer({ showVars: false });
+
+const config = [
+  {
+    ...main(),
+    entry: {
+      main: path.resolve(__dirname, "..", "src", "main", "library.ts"),
+    },
+    output: {
+      library: {
+        type: "commonjs2",
+      },
+      path: path.resolve(buildDir, "library"),
+    },
+    optimization: {
+      minimize: false,
+    },
+    module: {
+      parser: {
+        javascript: {
+          commonjsMagicComments: true,
+        },
+      },
+      rules: [
+        {
+          test: /\.node$/,
+          use: "node-loader",
+        },
+        {
+          test: /\.ts$/,
+          exclude: /node_modules/,
+          use: {
+            loader: "ts-loader",
+            options: {
+              compilerOptions: {
+                declaration: true,
+                sourceMap: false,
+              },
+            },
+          },
+        },
+        ...iconsAndImagesWebpackRules(),
+      ],
+    },
+    plugins: [
+      new DefinePlugin({
+        CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
+        CONTEXT_MATCHER_FOR_FEATURES: `/\\/(main|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
+      }),
+    ],
+  },
+  {
+    ...main(),
+    name: "lens-app-common",
+    entry: {
+      common: path.resolve(__dirname, "..", "src", "common", "library.ts"),
+    },
+    output: {
+      publicPath: "",
+      library: {
+        type: "commonjs2",
+      },
+      path: path.resolve(buildDir, "library"),
+    },
+    optimization: {
+      minimize: false,
+    },
+    plugins: [],
+  },
+  {
+    ...rendererConfig,
+    entry: {
+      renderer: path.resolve(__dirname, "..", "src", "renderer", "library.ts"),
+    },
+    output: {
+      library: {
+        type: "commonjs2",
+      },
+      path: path.resolve(buildDir, "library"),
+    },
+    optimization: {
+      minimize: false,
+    },
+    externals: [
+      ...(rendererConfig.externals as any).filter(Boolean),
+      {
+        "monaco-editor": "commonjs monaco-editor",
+      },
+    ],
+    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;
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import path from "path";
+import type webpack from "webpack";
+import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
+import nodeExternals from "webpack-node-externals";
+import getTypeScriptLoader from "./get-typescript-loader";
+import CircularDependencyPlugin from "circular-dependency-plugin";
+import { iconsAndImagesWebpackRules } from "./renderer";
+import type { WebpackPluginInstance } from "webpack";
+import { DefinePlugin } from "webpack";
+import { additionalExternals, buildDir, isDevelopment, mainDir } from "./vars";
+import { platform } from "process";
+
+const main = ({ showVars = true } = {}): webpack.Configuration => {
+  if (showVars) {
+    console.info("WEBPACK:main", {
+      isDevelopment,
+      mainDir,
+      buildDir,
+    });
+  }
+
+  return {
+    name: "lens-app-main",
+    context: __dirname,
+    target: "electron-main",
+    mode: isDevelopment ? "development" : "production",
+    devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
+    cache: isDevelopment ? { type: "filesystem" } : false,
+    entry: {
+      main: path.resolve(mainDir, "index.ts"),
+    },
+    output: {
+      libraryTarget: "global",
+      path: buildDir,
+    },
+    resolve: {
+      extensions: [".json", ".js", ".ts"],
+    },
+    externals: [
+      nodeExternals(),
+      ...additionalExternals,
+    ],
+    module: {
+      parser: {
+        javascript: {
+          commonjsMagicComments: true,
+        },
+      },
+      rules: [
+        {
+          test: /\.node$/,
+          use: "node-loader",
+        },
+        getTypeScriptLoader({}, /\.ts$/),
+        ...iconsAndImagesWebpackRules(),
+      ],
+    },
+    plugins: [
+      new DefinePlugin({
+        CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
+        CONTEXT_MATCHER_FOR_FEATURES: `/\\/(main|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
+      }),
+      new ForkTsCheckerPlugin(),
+      new CircularDependencyPlugin({
+        cwd: __dirname,
+        exclude: /node_modules/,
+        failOnError: true,
+      }) as unknown as WebpackPluginInstance,
+    ],
+  };
+};
+
+export default main;
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import path from "path";
+
+export default {
+  entry: "./node_modules/node-fetch/src/index.js",
+  output: {
+    path: path.resolve(__dirname, "..", "build", "webpack"),
+    filename: "node-fetch.bundle.js",
+    library: {
+      name: "NodeFetch",
+      type: "commonjs",
+    },
+    clean: true,
+    asyncChunks: false, // This is required so that only one file is created
+  },
+  mode: "production",
+  target: "electron-renderer",
+  optimization: {
+    concatenateModules: true,
+    minimize: true,
+  },
+  externalsPresets: {
+    node: true,
+  },
+  resolve: {
+    extensions: [".js"],
+  },
+};
@@ -0,0 +1,225 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import path from "path";
+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";
+import type { WebpackPluginInstance } from "webpack";
+import { DefinePlugin } from "webpack";
+import getTypescriptLoader from "./get-typescript-loader";
+import { assetsFolderName, isDevelopment, rendererDir, buildDir, appName, htmlTemplate, publicPath, sassCommonVars, additionalExternals } from "./vars";
+import { platform } from "process";
+
+export function webpackLensRenderer({ showVars = true } = {}): webpack.Configuration {
+  if (showVars) {
+    console.info("WEBPACK:renderer", {
+      assetsFolderName,
+      isDevelopment,
+      rendererDir,
+      buildDir,
+      appName,
+      htmlTemplate,
+      publicPath,
+    });
+  }
+
+  return {
+    target: "electron-renderer",
+    name: "lens-app-renderer",
+    mode: isDevelopment ? "development" : "production",
+    // https://webpack.js.org/configuration/devtool/ (see description of each option)
+    devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
+    cache: isDevelopment ? { type: "filesystem" } : false,
+    entry: {
+      [appName]: path.resolve(rendererDir, "index.ts"),
+    },
+    output: {
+      libraryTarget: "global",
+      globalObject: "this",
+      publicPath,
+      path: buildDir,
+      filename: "[name].js",
+      chunkFilename: "chunks/[name].js",
+      assetModuleFilename: `${assetsFolderName}/[name][ext][query]`,
+    },
+    watchOptions: {
+      ignored: /node_modules/, // https://webpack.js.org/configuration/watch/
+    },
+    ignoreWarnings: [
+      /Critical dependency: the request of a dependency is an expression/,
+      /require.extensions is not supported by webpack./, // handlebars
+      /\[ReactRefreshPlugin] .*?HMR.*? is not enabled/, // enabled in webpack.dev-server
+    ],
+    resolve: {
+      extensions: [
+        ".js", ".jsx", ".json",
+        ".ts", ".tsx",
+      ],
+    },
+    externals: [
+      {
+        "node-fetch": "commonjs node-fetch",
+        "win-ca": "commonjs win-ca",
+      },
+      ...additionalExternals,
+    ],
+    optimization: {
+      minimize: false,
+    },
+    module: {
+      parser: {
+        javascript: {
+          commonjsMagicComments: true,
+        },
+      },
+      rules: [
+        {
+          test: /\.node$/,
+          use: "node-loader",
+        },
+        getTypescriptLoader({
+          getCustomTransformers: () => ({
+            before: isDevelopment ? [require("react-refresh-typescript")()] : [],
+          }),
+        }),
+        cssModulesWebpackRule(),
+        ...iconsAndImagesWebpackRules(),
+        ...fontsLoaderWebpackRules(),
+      ],
+    },
+
+    plugins: [
+      new DefinePlugin({
+        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({
+        // publicPath: "/",
+        // filename: "[name].worker.js",
+        languages: ["json", "yaml"],
+        globalAPI: isDevelopment,
+      }),
+
+      new HtmlWebpackPlugin({
+        filename: "index.html",
+        template: htmlTemplate,
+        inject: true,
+        hash: true,
+        templateParameters: {
+          assetPath: `${publicPath}${assetsFolderName}`,
+        },
+      }),
+
+      new CircularDependencyPlugin({
+        cwd: __dirname,
+        exclude: /node_modules/,
+        failOnError: true,
+      }) as unknown as WebpackPluginInstance,
+
+      new MiniCssExtractPlugin({
+        filename: "[name].css",
+      }),
+
+      ...(
+        isDevelopment
+          ? [new ReactRefreshWebpackPlugin({ overlay: false })]
+          : []
+      ),
+    ],
+  };
+}
+
+/**
+ * Import icons and image files.
+ * Read more about asset types: https://webpack.js.org/guides/asset-modules/
+ */
+export function iconsAndImagesWebpackRules(): webpack.RuleSetRule[] {
+  return [
+    {
+      test: /\.svg$/,
+      type: "asset/source", // exports the source code of the asset, so we get XML
+    },
+    {
+      test: /\.(jpg|png|ico)$/,
+      type: "asset/resource", // path to file, e.g. "/static/build/assets/*"
+    },
+  ];
+}
+
+/**
+ * Import custom fonts as URL.
+ */
+export function fontsLoaderWebpackRules(): webpack.RuleSetRule[] {
+  return [
+    {
+      test: /\.(ttf|eot|woff2?)$/,
+      type: "asset/resource",
+    },
+  ];
+}
+
+export interface CssModulesWebpackRuleOptions {
+  styleLoader?: string;
+}
+
+/**
+ * Import CSS or SASS styles with modules support (*.module.scss)
+ */
+export function cssModulesWebpackRule({ styleLoader }: CssModulesWebpackRuleOptions = {}): webpack.RuleSetRule {
+  styleLoader ??= isDevelopment
+    ? "style-loader"
+    : MiniCssExtractPlugin.loader;
+
+  return {
+    test: /\.s?css$/,
+    use: [
+      styleLoader,
+      {
+        loader: "css-loader",
+        options: {
+          sourceMap: isDevelopment,
+          modules: {
+            auto: /\.module\./i, // https://github.com/webpack-contrib/css-loader#auto
+            mode: "local", // :local(.selector) by default
+            localIdentName: "[name]__[local]--[hash:base64:5]",
+          },
+        },
+      },
+      {
+        loader: "postcss-loader",
+        options: {
+          sourceMap: isDevelopment,
+          postcssOptions: {
+            plugins: [
+              "tailwindcss",
+            ],
+          },
+        },
+      },
+      {
+        loader: "sass-loader",
+        options: {
+          sourceMap: isDevelopment,
+          additionalData: `@import "${path.basename(sassCommonVars)}";`,
+          sassOptions: {
+            includePaths: [
+              path.dirname(sassCommonVars),
+            ],
+          },
+        },
+      },
+    ],
+  };
+}
+
+export default webpackLensRenderer;
@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".."
+  }
+}
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * 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";
+
+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 extensionOutDir = path.join(process.cwd(), "packages", "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 publicPath = "/build/";
+export const sassCommonVars = path.resolve(rendererDir, "components/vars.scss");
+export const webpackDevServerPort = Number(process.env.WEBPACK_DEV_SERVER_PORT) || 9191;
+export const additionalExternals = (process.env.LENS_BUILD_ADDITIONAL_WEBPACK_EXTERNALS || "")
+  .split(",")
+  .map(s => s.trim());
+
+assert(Number.isInteger(webpackDevServerPort), "WEBPACK_DEV_SERVER_PORT environment variable must only be an integer");