Introduce competition for starting react application inside the Feature

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

package-lock.json

@@ -4634,6 +4634,10 @@
       "resolved": "packages/node-fetch",
       "link": true
     },
+    "node_modules/@k8slens/react-application-root": {
+      "resolved": "packages/technical-features/react-application-root",
+      "link": true
+    },
     "node_modules/@k8slens/react-testing-library-discovery": {
       "resolved": "packages/utility-features/react-testing-library-discovery",
       "link": true
@@ -34327,6 +34331,57 @@
       "integrity": "sha512-ZOzvDRWp8dCVBmgnkIqYCArgdFOO9YzocZp8Ra25N/RStKiWvMOXHMz+GjSeVNe5TstaTmTWPucGJkDw0XXJWA==",
       "dev": true
     },
+    "packages/business-features/dock": {
+      "name": "@k8slens/dock",
+      "version": "1.0.0-alpha.0",
+      "extraneous": true,
+      "license": "MIT",
+      "devDependencies": {
+        "@async-fn/jest": "^1.6.4",
+        "@k8slens/eslint-config": "6.5.0-alpha.1",
+        "@k8slens/react-testing-library-discovery": "^1.0.0-alpha.0"
+      },
+      "peerDependencies": {
+        "@k8slens/feature-core": "^6.5.0-alpha.0",
+        "@ogre-tools/fp": "^15.1.2",
+        "@ogre-tools/injectable": "^15.1.2",
+        "@ogre-tools/injectable-extension-for-auto-registration": "^15.1.2",
+        "lodash": "^4.17.21"
+      }
+    },
+    "packages/business-features/dock/agnostic": {
+      "version": "1.0.0-alpha.0",
+      "extraneous": true,
+      "license": "MIT",
+      "devDependencies": {
+        "@async-fn/jest": "^1.6.4",
+        "@k8slens/eslint-config": "6.5.0-alpha.1"
+      },
+      "peerDependencies": {
+        "@k8slens/feature-core": "^6.5.0-alpha.0",
+        "@ogre-tools/injectable": "^15.1.2",
+        "@ogre-tools/injectable-extension-for-auto-registration": "^15.1.2"
+      }
+    },
+    "packages/business-features/keyboard-shortcuts": {
+      "name": "@k8slens/keyboard-shortcuts",
+      "version": "1.0.0-alpha.0",
+      "extraneous": true,
+      "license": "MIT",
+      "devDependencies": {
+        "@async-fn/jest": "^1.6.4",
+        "@k8slens/eslint-config": "6.5.0-alpha.1",
+        "@k8slens/react-testing-library-discovery": "^1.0.0-alpha.0"
+      },
+      "peerDependencies": {
+        "@k8slens/application": "6.5.0-alpha.2",
+        "@k8slens/feature-core": "^6.5.0-alpha.0",
+        "@ogre-tools/fp": "^15.1.2",
+        "@ogre-tools/injectable": "^15.1.2",
+        "@ogre-tools/injectable-extension-for-auto-registration": "^15.1.2",
+        "lodash": "^4.17.21"
+      }
+    },
     "packages/cluster-settings": {
       "name": "@k8slens/cluster-settings",
       "version": "6.5.0-alpha.1",
@@ -39143,7 +39198,32 @@
         "lodash": "^4.17.21"
       }
     },
+    "packages/technical-features/react-application-root": {
+      "name": "@k8slens/react-application-root",
+      "version": "1.0.0-alpha.0",
+      "license": "MIT",
+      "devDependencies": {
+        "@async-fn/jest": "^1.6.4",
+        "@k8slens/eslint-config": "6.5.0-alpha.1",
+        "@k8slens/react-testing-library-discovery": "*",
+        "@testing-library/react": "^12.1.5"
+      },
+      "peerDependencies": {
+        "@k8slens/application": "^6.5.0-alpha.2",
+        "@k8slens/feature-core": "^6.5.0-alpha.0",
+        "@ogre-tools/fp": "^15.1.2",
+        "@ogre-tools/injectable": "^15.1.2",
+        "@ogre-tools/injectable-extension-for-auto-registration": "^15.1.2",
+        "@ogre-tools/injectable-extension-for-mobx": "^15.1.2",
+        "@ogre-tools/injectable-react": "^15.1.2",
+        "lodash": "^4.17.15",
+        "mobx": "^6.8.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+      }
+    },
     "packages/utility-features/react-testing-library-discovery": {
+      "name": "@k8slens/react-testing-library-discovery",
       "version": "1.0.0-alpha.0",
       "license": "MIT",
       "dependencies": {

packages/technical-features/react-application-root/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@k8slens/eslint-config/eslint",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  }
+}

packages/technical-features/react-application-root/.prettierrc

@@ -0,0 +1 @@
+"@k8slens/eslint-config/prettier"

packages/technical-features/react-application-root/README.md

@@ -0,0 +1,19 @@
+# @k8slens/react-application-root
+
+# Usage
+
+```bash
+$ npm install @k8slens/react-application-root
+```
+
+```typescript
+import { reactApplicationRootFeature } from "@k8slens/application";
+import { registerFeature } from "@k8slens/feature-core";
+import { createContainer } from "@ogre-tools/injectable";
+
+const di = createContainer("some-container");
+
+registerFeature(di, reactApplicationRootFeature);
+```
+
+## Extendability

packages/technical-features/react-application-root/index.ts

@@ -0,0 +1,10 @@
+export { renderInjectionToken } from "./src/render-application/render.injectable";
+export type { Render } from "./src/render-application/render.injectable";
+
+export { reactApplicationChildrenInjectionToken } from "./src/react-application/react-application-children-injection-token";
+export type { ReactApplicationChildren } from "./src/react-application/react-application-children-injection-token";
+
+export { reactApplicationWrapperInjectionToken } from "./src/react-application/react-application-wrapper-injection-token";
+export type { ReactApplicationWrapper } from "./src/react-application/react-application-wrapper-injection-token";
+
+export { reactApplicationRootFeature } from "./src/feature";

packages/technical-features/react-application-root/jest.config.js

@@ -0,0 +1 @@
+module.exports = require("@k8slens/jest").monorepoPackageConfig(__dirname).configForReact;

packages/technical-features/react-application-root/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@k8slens/react-application-root",
+  "private": false,
+  "version": "1.0.0-alpha.0",
+  "description": "Package for Application Root in React",
+  "type": "commonjs",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lensapp/lens.git"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "author": {
+    "name": "OpenLens Authors",
+    "email": "info@k8slens.dev"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/lensapp/lens",
+  "scripts": {
+    "build": "webpack",
+    "dev": "webpack --mode=development --watch",
+    "test:unit": "jest --coverage --runInBand",
+    "lint": "lens-lint",
+    "lint:fix": "lens-lint --fix"
+  },
+  "peerDependencies": {
+    "@k8slens/feature-core": "^6.5.0-alpha.0",
+    "@k8slens/application": "^6.5.0-alpha.2",
+    "@ogre-tools/fp": "^15.1.2",
+    "@ogre-tools/injectable": "^15.1.2",
+    "@ogre-tools/injectable-extension-for-auto-registration": "^15.1.2",
+    "@ogre-tools/injectable-extension-for-mobx": "^15.1.2",
+    "@ogre-tools/injectable-react": "^15.1.2",
+    "lodash": "^4.17.15",
+    "mobx": "^6.8.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@async-fn/jest": "^1.6.4",
+    "@k8slens/eslint-config": "6.5.0-alpha.1",
+    "@testing-library/react": "^12.1.5",
+    "@k8slens/react-testing-library-discovery": "*"
+  }
+}

packages/technical-features/react-application-root/src/__snapshots__/react-application.test.tsx.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react-application renders 1`] = `
+<body>
+  <div />
+</body>
+`;
+
+exports[`react-application when children is registered and enabled renders 1`] = `
+<body>
+  <div>
+    <div
+      data-some-children-test="true"
+    >
+      Some children
+    </div>
+  </div>
+</body>
+`;
+
+exports[`react-application when children is registered and enabled when children is enabled renders 1`] = `
+<body>
+  <div />
+</body>
+`;
+
+exports[`react-application when children is registered and enabled when wrapper is registered renders 1`] = `
+<body>
+  <div>
+    <div
+      data-some-wrapper-test="true"
+    >
+      <div
+        data-some-children-test="true"
+      >
+        Some children
+      </div>
+    </div>
+  </div>
+</body>
+`;

packages/technical-features/react-application-root/src/feature.ts

@@ -0,0 +1,17 @@
+import { getFeature } from "@k8slens/feature-core";
+import { autoRegister } from "@ogre-tools/injectable-extension-for-auto-registration";
+import { applicationFeature } from "@k8slens/application";
+
+export const reactApplicationRootFeature = getFeature({
+  id: "react-application-root",
+
+  register: (di) => {
+    autoRegister({
+      di,
+      targetModule: module,
+      getRequireContexts: () => [require.context("./", true, /\.injectable\.(ts|tsx)$/)],
+    });
+  },
+
+  dependencies: [applicationFeature],
+});

packages/technical-features/react-application-root/src/react-application.test.tsx

@@ -0,0 +1,135 @@
+import { registerFeature } from "@k8slens/feature-core";
+import { createContainer, DiContainer, getInjectable } from "@ogre-tools/injectable";
+import { registerMobX } from "@ogre-tools/injectable-extension-for-mobx";
+import { registerInjectableReact } from "@ogre-tools/injectable-react";
+import { reactApplicationRootFeature } from "./feature";
+import { runInAction, computed, observable, IObservableValue } from "mobx";
+import { startApplicationInjectionToken } from "@k8slens/application";
+import type { RenderResult } from "@testing-library/react";
+import { render, act } from "@testing-library/react";
+import renderInjectable from "./render-application/render.injectable";
+import { reactApplicationChildrenInjectionToken } from "./react-application/react-application-children-injection-token";
+import React from "react";
+import { Discover, discoverFor } from "@k8slens/react-testing-library-discovery";
+import { reactApplicationWrapperInjectionToken } from "./react-application/react-application-wrapper-injection-token";
+
+const SomeChildren = () => <div data-some-children-test>Some children</div>;
+
+describe("react-application", () => {
+  let rendered: RenderResult;
+  let di: DiContainer;
+  let discover: Discover;
+
+  beforeEach(async () => {
+    di = createContainer("some-container");
+
+    registerInjectableReact(di);
+
+    registerMobX(di);
+
+    runInAction(() => {
+      registerFeature(di, reactApplicationRootFeature);
+    });
+
+    di.override(renderInjectable, () => (application) => {
+      rendered = render(application);
+    });
+
+    const startApplication = di.inject(startApplicationInjectionToken);
+
+    await startApplication();
+
+    discover = discoverFor(() => rendered);
+  });
+
+  it("renders", () => {
+    expect(rendered.baseElement).toMatchSnapshot();
+  });
+
+  describe("when children is registered and enabled", () => {
+    let someObservable: IObservableValue<boolean>;
+
+    beforeEach(() => {
+      someObservable = observable.box(true);
+
+      const someChildrenInjectable = getInjectable({
+        id: "some-children",
+
+        instantiate: () => ({
+          id: "some-children",
+          Component: SomeChildren,
+          enabled: computed(() => someObservable.get()),
+        }),
+
+        injectionToken: reactApplicationChildrenInjectionToken,
+      });
+
+      runInAction(() => {
+        di.register(someChildrenInjectable);
+      });
+    });
+
+    it("renders", () => {
+      expect(rendered.baseElement).toMatchSnapshot();
+    });
+
+    it("renders the children", () => {
+      const { discovered } = discover.getSingleElement("some-children");
+
+      expect(discovered).not.toBeNull();
+    });
+
+    describe("when wrapper is registered", () => {
+      beforeEach(() => {
+        const someWrapperInjectable = getInjectable({
+          id: "some-wrapper",
+
+          instantiate: () => (Component) => () =>
+            (
+              <div data-some-wrapper-test>
+                <Component />
+              </div>
+            ),
+
+          injectionToken: reactApplicationWrapperInjectionToken,
+        });
+
+        runInAction(() => {
+          di.register(someWrapperInjectable);
+        });
+      });
+
+      it("renders", () => {
+        expect(rendered.baseElement).toMatchSnapshot();
+      });
+
+      it("renders the children inside the wrapper", () => {
+        const { discovered } = discover
+          .getSingleElement("some-wrapper")
+          .getSingleElement("some-children");
+
+        expect(discovered).not.toBeNull();
+      });
+    });
+
+    describe("when children is enabled", () => {
+      beforeEach(() => {
+        act(() => {
+          runInAction(() => {
+            someObservable.set(false);
+          });
+        });
+      });
+
+      it("renders", () => {
+        expect(rendered.baseElement).toMatchSnapshot();
+      });
+
+      it("does not render the children", () => {
+        const { discovered } = discover.querySingleElement("some-children");
+
+        expect(discovered).toBeNull();
+      });
+    });
+  });
+});

packages/technical-features/react-application-root/src/react-application/react-application-children-injection-token.ts

@@ -0,0 +1,13 @@
+import { getInjectionToken } from "@ogre-tools/injectable";
+import type React from "react";
+import type { IComputedValue } from "mobx";
+
+export interface ReactApplicationChildren {
+  id: string;
+  Component: React.ComponentType;
+  enabled: IComputedValue<boolean>;
+}
+
+export const reactApplicationChildrenInjectionToken = getInjectionToken<ReactApplicationChildren>({
+  id: "react-application-children-injection-token",
+});

packages/technical-features/react-application-root/src/react-application/react-application-content.tsx

@@ -0,0 +1,29 @@
+import { withInjectables } from "@ogre-tools/injectable-react";
+import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
+import React from "react";
+import {
+  ReactApplicationChildren,
+  reactApplicationChildrenInjectionToken,
+} from "./react-application-children-injection-token";
+import type { IComputedValue } from "mobx";
+import { observer, Observer } from "mobx-react";
+
+type Dependencies = { children: IComputedValue<ReactApplicationChildren[]> };
+
+const NonInjectedContent = observer(({ children }: Dependencies) => (
+  <>
+    {children.get().map((child) => (
+      <Observer key={child.id}>{() => (child.enabled.get() ? <child.Component /> : null)}</Observer>
+    ))}
+  </>
+));
+
+export const ReactApplicationContent = withInjectables<Dependencies>(
+  NonInjectedContent,
+
+  {
+    getProps: (di) => ({
+      children: di.inject(computedInjectManyInjectable)(reactApplicationChildrenInjectionToken),
+    }),
+  },
+);

packages/technical-features/react-application-root/src/react-application/react-application-wrapper-injection-token.ts

@@ -0,0 +1,8 @@
+import { getInjectionToken } from "@ogre-tools/injectable";
+import type React from "react";
+
+export type ReactApplicationWrapper = (Component: React.ComponentType) => React.ComponentType;
+
+export const reactApplicationWrapperInjectionToken = getInjectionToken<ReactApplicationWrapper>({
+  id: "react-application-wrapper-injection-token",
+});

packages/technical-features/react-application-root/src/react-application/react-application.tsx

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import type { DiContainerForInjection } from "@ogre-tools/injectable";
+import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
+import { DiContextProvider } from "@ogre-tools/injectable-react";
+import { flow, identity } from "lodash/fp";
+import { observer } from "mobx-react";
+import React from "react";
+import { reactApplicationWrapperInjectionToken } from "./react-application-wrapper-injection-token";
+
+import { ReactApplicationContent } from "./react-application-content";
+
+interface ReactApplicationProps {
+  di: DiContainerForInjection;
+}
+
+export const ReactApplication = observer(({ di }: ReactApplicationProps) => {
+  const computedInjectMany = di.inject(computedInjectManyInjectable);
+
+  const wrappers = computedInjectMany(reactApplicationWrapperInjectionToken);
+
+  const ContentWithWrappers = flow(identity, ...wrappers.get())(ReactApplicationContent);
+
+  return (
+    <DiContextProvider value={{ di }}>
+      <ContentWithWrappers />
+    </DiContextProvider>
+  );
+});

packages/technical-features/react-application-root/src/render-application/render-application-when-application-is-ready.injectable.tsx

@@ -0,0 +1,21 @@
+import { getInjectable } from "@ogre-tools/injectable";
+import { afterApplicationIsLoadedInjectionToken } from "@k8slens/application";
+import renderInjectable from "./render.injectable";
+import { ReactApplication } from "../react-application/react-application";
+import React from "react";
+
+export const renderApplicationWhenApplicationIsReadyInjectable = getInjectable({
+  id: "render-application-when-application-is-ready",
+
+  instantiate: (di) => {
+    const render = di.inject(renderInjectable);
+
+    return {
+      run: () => {
+        render(<ReactApplication di={di} />);
+      },
+    };
+  },
+
+  injectionToken: afterApplicationIsLoadedInjectionToken,
+});

packages/technical-features/react-application-root/src/render-application/render.injectable.tsx

@@ -0,0 +1,22 @@
+import { getInjectable, getInjectionToken } from "@ogre-tools/injectable";
+import { render } from "react-dom";
+import type React from "react";
+
+export type Render = (application: React.ReactElement) => void;
+
+export const renderInjectionToken = getInjectionToken<Render>({
+  id: "render-injection-token",
+});
+
+const renderInjectable = getInjectable({
+  id: "render",
+
+  /* c8 ignore next */
+  instantiate: () => (application) => render(application, document.getElementById("app")),
+
+  causesSideEffects: true,
+
+  injectionToken: renderInjectionToken,
+});
+
+export default renderInjectable;

packages/technical-features/react-application-root/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@k8slens/typescript/config/base.json",
+  "include": ["**/*.ts", "**/*.tsx"]
+}

packages/technical-features/react-application-root/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require("@k8slens/webpack").configForReact;