Introduce abstraction for a state that is shared between environments

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

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

src/common/sync-box/create-sync-box.injectable.ts

@@ -0,0 +1,45 @@
+/**
+ * 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 type { IComputedValue } from "mobx";
+import { computed } from "mobx";
+import syncBoxChannelInjectable from "./sync-box-channel.injectable";
+import { sendToAgnosticChannelInjectionToken } from "./channel/send-to-agnostic-channel-injection-token";
+import syncBoxStateInjectable from "./sync-box-state.injectable";
+
+const createSyncBoxInjectable = getInjectable({
+  id: "create-sync-box",
+
+  instantiate: (di) => {
+    const syncBoxChannel = di.inject(syncBoxChannelInjectable);
+    const sendToAgnosticChannel = di.inject(sendToAgnosticChannelInjectionToken);
+    const getSyncBoxState = (id: string) => di.inject(syncBoxStateInjectable, id);
+
+    return (id: string): SyncBox<any> => {
+      const state = getSyncBoxState(id);
+
+      return {
+        id,
+
+        value: computed(() => state.get()),
+
+        set: (value) => {
+          state.set(value);
+
+          sendToAgnosticChannel(syncBoxChannel, { id, value });
+        },
+      };
+    };
+  },
+});
+
+export default createSyncBoxInjectable;
+
+
+export interface SyncBox<TValue> {
+  id: string;
+  value: IComputedValue<TValue>;
+  set: (value: TValue) => void;
+}

src/common/sync-box/sync-box-channel-listener.injectable.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 { getInjectable } from "@ogre-tools/injectable";
+import syncBoxChannelInjectable from "./sync-box-channel.injectable";
+import { channelListenerInjectionToken } from "./channel/channel-listener-injection-token";
+import syncBoxStateInjectable from "./sync-box-state.injectable";
+
+const syncBoxChannelListenerInjectable = getInjectable({
+  id: "sync-box-channel-listener",
+
+  instantiate: (di) => {
+    const getSyncBoxState = (id: string) => di.inject(syncBoxStateInjectable, id);
+
+    return {
+      channel: di.inject(syncBoxChannelInjectable),
+
+      handler: ({ id, value }) => {
+        const target = getSyncBoxState(id);
+
+        if (target) {
+          target.set(value);
+        }
+      },
+    };
+  },
+
+  injectionToken: channelListenerInjectionToken,
+});
+
+export default syncBoxChannelListenerInjectable;

src/common/sync-box/sync-box-channel.injectable.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 { channelInjectionToken } from "./channel/channel-injection-token";
+
+const syncBoxChannelInjectable = getInjectable({
+  id: "sync-box-channel",
+
+  instantiate: () => ({
+    id: "sync-box-channel",
+  }),
+
+  injectionToken: channelInjectionToken,
+});
+
+export default syncBoxChannelInjectable;

src/common/sync-box/sync-box-state.injectable.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { observable } from "mobx";
+
+const syncBoxStateInjectable = getInjectable({
+  id: "sync-box-state",
+
+  instantiate: () => observable.box(),
+
+  lifecycle: lifecycleEnum.keyedSingleton({
+    getInstanceKey: (di, id: string) => id,
+  }),
+});
+
+export default syncBoxStateInjectable;

src/common/sync-box/sync-box.test.ts

@@ -0,0 +1,116 @@
+/**
+ * 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 { observe, runInAction } from "mobx";
+import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
+import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
+import type { SyncBox } from "./create-sync-box.injectable";
+import createSyncBoxInjectable from "./create-sync-box.injectable";
+import applicationWindowInjectable from "../../main/start-main-application/lens-window/application-window/application-window.injectable";
+
+describe("sync-box", () => {
+  let syncBoxInMain: SyncBox<string>;
+  let syncBoxInRenderer: SyncBox<string>;
+  let applicationBuilder: ApplicationBuilder;
+
+  beforeEach(() => {
+    applicationBuilder = getApplicationBuilder();
+
+    const someInjectable = getInjectable({
+      id: "some-injectable",
+
+      instantiate: (di) => {
+        const createSyncBox = di.inject(createSyncBoxInjectable);
+
+        return createSyncBox("some-state");
+      },
+    });
+
+    applicationBuilder.dis.mainDi.register(someInjectable);
+    applicationBuilder.dis.rendererDi.register(someInjectable);
+
+    syncBoxInMain = applicationBuilder.dis.mainDi.inject(someInjectable);
+    syncBoxInRenderer = applicationBuilder.dis.rendererDi.inject(someInjectable);
+  });
+
+  describe("when application starts", () => {
+    beforeEach(() => {
+
+    });
+
+    it("", () => {
+
+    });
+
+    describe("when window starts", () => {
+      it("", () => {
+
+      });
+    });
+  });
+
+  describe("when application starts with a window", () => {
+    let valueInRenderer: string;
+    let valueInMain: string;
+
+    beforeEach(async () => {
+      await applicationBuilder.render();
+
+      const applicationWindow = applicationBuilder.dis.mainDi.inject(
+        applicationWindowInjectable,
+      );
+
+      await applicationWindow.show();
+
+      observe(syncBoxInRenderer.value, ({ newValue }) => {
+        valueInRenderer = newValue as string;
+      }, true);
+
+      observe(syncBoxInMain.value, ({ newValue }) => {
+        valueInMain = newValue as string;
+      }, true);
+    });
+
+    it("does not know default value in main", () => {
+      expect(valueInMain).toBeUndefined();
+    });
+
+    it("does not know default value in renderer", () => {
+      expect(valueInRenderer).toBeUndefined();
+    });
+
+    describe("when value is set from main", () => {
+      beforeEach(() => {
+        runInAction(() => {
+          syncBoxInMain.set("some-value-from-main");
+        });
+      });
+
+      it("has value in main", () => {
+        expect(valueInMain).toBe("some-value-from-main");
+      });
+
+      it("has value in renderer", () => {
+        expect(valueInRenderer).toBe("some-value-from-main");
+      });
+
+      describe("when value is set from renderer", () => {
+        beforeEach(() => {
+          runInAction(() => {
+            syncBoxInRenderer.set("some-value-from-renderer");
+          });
+        });
+
+        it("has value in main", () => {
+          expect(valueInMain).toBe("some-value-from-renderer");
+        });
+
+        it("has value in renderer", () => {
+          expect(valueInRenderer).toBe("some-value-from-renderer");
+        });
+      });
+    });
+  });
+});