Allow to import app as a library (#6722)

* unify build fs layout

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

* use currentApp path for static files

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

* lint fix

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

* allow to import open-lens

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

* allow to customize both main & renderer

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

* fix compile-library script

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

* remove bundled extensions

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

* similar interface for both main & renderer

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

* use startApp on both sides

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

* fix startApp import

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

* fix startApp import

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

* Fix injection cycle (somehow)

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

* use cwd in download_binaries

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

* introduce applicationInformationToken

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

* register applicationInformationInjectable in main & renderer

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

* allow to define bundled extensions via appStart

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

* compile node-fetch automatically via prepare

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

* define peerDependencies

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

* webpack fixes

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

* rename application-information-token.injectable.ts -> application-information-token.ts

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

* monaco-editor as externals

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

* refactor application-information

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

* introduce bundledExtensionInjectionToken

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

* mark library exports as experimental

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

* move extension npm package files & add release automation

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

* add missing build files to package

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

* fix bad merge conflict resolve

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

* fix package.json name

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

* allow to set mode via startApp

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

* revert unnecessary changes

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

* webpack: fix extensionOutDir

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

* remove unnecessary peerDependencies

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

* introduce nodeEnvInjectionToken

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

* remove NODE_ENV from environmentVariablesInjectable

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

* fix jest modulePathIgnorePatterns

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

* fix duplicate injectable registration

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

* fix build executableName

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

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Signed-off-by: Sebastian Malton <sebastian@malton.name>
Co-authored-by: Sebastian Malton <sebastian@malton.name>

src/renderer/bootstrap.tsx

@@ -6,15 +6,8 @@
 import "./components/app.scss";
 
 import React from "react";
-import ReactDOM, { 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 { render, unmountComponentAtNode } from "react-dom";
 import { DefaultProps } from "./mui-base-theme";
-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";
@@ -80,28 +73,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/create-app.ts

@@ -0,0 +1,34 @@
+/**
+ * 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 type { DiContainer } from "@ogre-tools/injectable";
+import { getInjectable } from "@ogre-tools/injectable";
+import nodeEnvInjectionToken from "../common/vars/node-env-injection-token";
+import { runInAction } from "mobx";
+import { registerInjectables } from "./register-injectables";
+
+interface AppConfig {
+  di: DiContainer;
+  mode: string;
+}
+
+export function createApp(conf: AppConfig) {
+  const { di, mode } = conf;
+
+  runInAction(() => {
+    di.register(getInjectable({
+      id: "node-env",
+      instantiate: () => mode,
+      injectionToken: nodeEnvInjectionToken,
+    }));
+    registerInjectables(di);
+  });
+  
+  return {
+    start: () => bootstrap(di),
+  };
+}

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/frames/cluster-frame/cluster-frame-layout-child-component.injectable.tsx

@@ -9,51 +9,62 @@ import { MainLayout } from "../../components/layout/main-layout";
 import { Sidebar } from "../../components/layout/sidebar";
 import { Dock } from "../../components/dock";
 import styles from "./cluster-frame.module.css";
+import type { IComputedValue } from "mobx";
 import { computed } from "mobx";
 import currentRouteComponentInjectable from "../../routes/current-route-component.injectable";
 import { Redirect } from "react-router";
 import startUrlInjectable from "./start-url.injectable";
 import currentPathInjectable from "../../routes/current-path.injectable";
 import { observer } from "mobx-react";
+import { withInjectables } from "@ogre-tools/injectable-react";
+
+interface Dependencies {
+  currentRouteComponent: IComputedValue<React.ElementType<any> | undefined>;
+  startUrl: IComputedValue<string>;
+  currentPath: IComputedValue<string>;
+}
+
+const NonInjectedClusterFrameLayout = observer((props: Dependencies) => {
+  const Component = props.currentRouteComponent.get();
+  const starting = props.startUrl.get();
+  const current = props.currentPath.get();
+
+  return (
+    <MainLayout sidebar={<Sidebar />} footer={<Dock />}>
+      {Component ? (
+        <Component />
+      ) : // NOTE: this check is to prevent an infinite loop
+        starting !== current ? (
+          <Redirect to={starting} />
+        ) : (
+          <div className={styles.centering}>
+            <div className="error">
+              An error has occured. No route can be found matching the
+              current route, which is also the starting route.
+            </div>
+          </div>
+        )}
+    </MainLayout>
+  );
+});
+
+const ClusterFrameLayout = withInjectables<Dependencies>(NonInjectedClusterFrameLayout, {
+  getProps: (di, props) => ({
+    ...props,
+    currentRouteComponent: di.inject(currentRouteComponentInjectable),
+    startUrl: di.inject(startUrlInjectable),
+    currentPath: di.inject(currentPathInjectable),
+  }),
+});
 
 const clusterFrameLayoutChildComponentInjectable = getInjectable({
   id: "cluster-frame-layout-child-component",
 
-  instantiate: (di) => {
-    const currentRouteComponent = di.inject(currentRouteComponentInjectable);
-    const startUrl = di.inject(startUrlInjectable);
-    const currentPath = di.inject(currentPathInjectable);
-
-    return {
-      id: "cluster-frame-layout",
-
-      shouldRender: computed(() => true),
-
-      Component: observer(() => {
-        const Component = currentRouteComponent.get();
-        const starting = startUrl.get();
-        const current = currentPath.get();
-
-        return (
-          <MainLayout sidebar={<Sidebar />} footer={<Dock />}>
-            {Component ? (
-              <Component />
-            ) : // NOTE: this check is to prevent an infinite loop
-              starting !== current ? (
-                <Redirect to={startUrl.get()} />
-              ) : (
-                <div className={styles.centering}>
-                  <div className="error">
-                    An error has occured. No route can be found matching the
-                    current route, which is also the starting route.
-                  </div>
-                </div>
-              )}
-          </MainLayout>
-        );
-      }),
-    };
-  },
+  instantiate: () => ({
+    id: "cluster-frame-layout",
+    shouldRender: computed(() => true),
+    Component: ClusterFrameLayout,
+  }),
 
   injectionToken: clusterFrameChildComponentInjectionToken,
 });

src/renderer/getDi.tsx

@@ -4,28 +4,14 @@
  */
 
 import { createContainer } 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";
+import applicationInformationInjectable from "../common/vars/application-information-injectable";
 
 export const getDi = () => {
   const di = createContainer("renderer");
 
-  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),
-      ],
-    });
+    di.register(applicationInformationInjectable);
   });
 
   return di;

src/renderer/getDiForUnitTesting.tsx

@@ -5,7 +5,7 @@
 
 import { noop, chunk } from "lodash/fp";
 import type { DiContainer, Injectable } from "@ogre-tools/injectable";
-import { createContainer, isInjectable } from "@ogre-tools/injectable";
+import { createContainer, isInjectable, getInjectable } from "@ogre-tools/injectable";
 import { Environments, setLegacyGlobalDiForExtensionApi } from "../extensions/as-legacy-globals-for-extension-api/legacy-global-di-for-extension-api";
 import requestFromChannelInjectable from "./utils/channel/request-from-channel.injectable";
 import loggerInjectable from "../common/logger.injectable";
@@ -41,6 +41,8 @@ import legacyOnChannelListenInjectable from "./ipc/legacy-channel-listen.injecta
 import storageSaveDelayInjectable from "./utils/create-storage/storage-save-delay.injectable";
 import environmentVariablesInjectable from "../common/utils/environment-variables.injectable";
 import type { GlobalOverride } from "../common/test-utils/get-global-override";
+import applicationInformationInjectable from "../common/vars/application-information-injectable";
+import nodeEnvInjectionToken from "../common/vars/node-env-injection-token";
 
 export const getDiForUnitTesting = (
   opts: { doGeneralOverrides?: boolean } = {},
@@ -49,6 +51,12 @@ export const getDiForUnitTesting = (
 
   const di = createContainer("renderer");
 
+  di.register(getInjectable({
+    id: "node-env",
+    instantiate: () => "test",
+    injectionToken: nodeEnvInjectionToken,
+  }));
+
   di.preventSideEffects();
 
   setLegacyGlobalDiForExtensionApi(di, Environments.renderer);
@@ -63,7 +71,8 @@ export const getDiForUnitTesting = (
 
   runInAction(() => {
     registerMobX(di);
-
+    di.register(applicationInformationInjectable);
+    
     chunk(100)(injectables).forEach((chunkInjectables) => {
       di.register(...chunkInjectables);
     });

src/renderer/index.ts

@@ -0,0 +1,32 @@
+/**
+ * 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 { 
+  React, ReactDOM, ReactRouter, 
+  ReactRouterDom, Mobx, MobxReact, LensExtensions,
+} from "./extension-api";
+import { createApp } from "./create-app";
+
+const di = getDi();
+const app = createApp({
+  di,
+  mode: process.env.NODE_ENV || "development",
+});
+
+// run
+app.start();
+
+export {
+  React,
+  ReactDOM,
+  ReactRouter,
+  ReactRouterDom,
+  Mobx,
+  MobxReact,
+  LensExtensions,
+};

src/renderer/library.ts

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

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;
+}

src/renderer/vars/application-information.global-override-for-injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getGlobalOverride } from "../../common/test-utils/get-global-override";
+import applicationInformationInjectable from "../../common/vars/application-information-injectable";
+
+export default getGlobalOverride(applicationInformationInjectable, () => ({
+  name: "some-product-name",
+  productName: "some-product-name",
+  version: "6.0.0",
+  build: {} as any,
+  config: {
+    k8sProxyVersion: "0.2.1",
+    bundledKubectlVersion: "1.23.3",
+    bundledHelmVersion: "3.7.2",
+    sentryDsn: "",
+    contentSecurityPolicy: "script-src 'unsafe-eval' 'self'; frame-src http://*.localhost:*/; img-src * data:",
+    welcomeRoute: "/welcome",
+  },
+  copyright: "some-copyright-information",
+  description: "some-descriptive-text",
+}));