Fixing Singleton typing to correctly return child class (#1914)

- Add distinction between `getInstance` and `getInstanceOrCreate` since
  it is not always possible to create an instance (since you might not
  know the correct arguments)

- Remove all the `export const *Store = *Store.getInstance<*Store>();`
  calls as it defeats the purpose of `Singleton`. Plus with the typing
  changes the appropriate `*Store.getInstance()` is "short enough".

- Special case the two extension export facades to not need to use
  `getInstanceOrCreate`. Plus since they are just facades it is always
  possible to create them.

- Move some other types to be also `Singleton`'s: ExtensionLoader,
  ExtensionDiscovery, ThemeStore, LocalizationStore, ...

- Fixed dev-run always using the same port with electron inspect

- Update Store documentation with new recommendations about creating
  instances of singletons

- Fix all unit tests to create their dependent singletons

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

src/renderer/components/dock/__test__/dock-tabs.test.tsx

@@ -16,6 +16,20 @@ const getComponent = () => (
   />
 );
 
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
 const renderTabs = () => render(getComponent());
 
 const getTabKinds = () => dockStore.tabs.map(tab => tab.kind);

src/renderer/components/dock/__test__/log-resource-selector.test.tsx

@@ -7,6 +7,8 @@ import { Pod } from "../../../api/endpoints";
 import { LogResourceSelector } from "../log-resource-selector";
 import { LogTabData } from "../log-tab.store";
 import { dockerPod, deploymentPod1 } from "./pod.mock";
+import { ThemeStore } from "../../../theme.store";
+import { UserStore } from "../../../../common/user-store";
 
 const getComponent = (tabData: LogTabData) => {
   return (
@@ -41,6 +43,16 @@ const getFewPodsTabData = (): LogTabData => {
 };
 
 describe("<LogResourceSelector />", () => {
+  beforeEach(() => {
+    UserStore.getInstanceOrCreate();
+    ThemeStore.getInstanceOrCreate();
+  });
+
+  afterEach(() => {
+    UserStore.resetInstance();
+    ThemeStore.resetInstance();
+  });
+
   it("renders w/o errors", () => {
     const tabData = getOnePodTabData();
     const { container } = render(getComponent(tabData));

src/renderer/components/dock/log-list.tsx

@@ -10,7 +10,7 @@ import moment from "moment-timezone";
 import { Align, ListOnScrollProps } from "react-window";
 
 import { SearchStore, searchStore } from "../../../common/search-store";
-import { userStore } from "../../../common/user-store";
+import { UserStore } from "../../../common/user-store";
 import { cssNames } from "../../utils";
 import { Button } from "../button";
 import { Icon } from "../icon";
@@ -81,7 +81,7 @@ export class LogList extends React.Component<Props> {
   @computed
   get logs() {
     const showTimestamps = logTabStore.getData(this.props.id).showTimestamps;
-    const { preferences } = userStore;
+    const { preferences } = UserStore.getInstance();
 
     if (!showTimestamps) {
       return logStore.logsWithoutTimestamps;

src/renderer/components/dock/terminal-window.tsx

@@ -7,7 +7,7 @@ import { cssNames } from "../../utils";
 import { IDockTab } from "./dock.store";
 import { Terminal } from "./terminal";
 import { terminalStore } from "./terminal.store";
-import { themeStore } from "../../theme.store";
+import { ThemeStore } from "../../theme.store";
 
 interface Props {
   className?: string;
@@ -38,7 +38,7 @@ export class TerminalWindow extends React.Component<Props> {
 
     return (
       <div
-        className={cssNames("TerminalWindow", className, themeStore.activeTheme.type)}
+        className={cssNames("TerminalWindow", className, ThemeStore.getInstance().activeTheme.type)}
         ref={e => this.elem = e}
       />
     );

src/renderer/components/dock/terminal.ts

@@ -4,9 +4,10 @@ import { Terminal as XTerm } from "xterm";
 import { FitAddon } from "xterm-addon-fit";
 import { dockStore, TabId } from "./dock.store";
 import { TerminalApi } from "../../api/terminal-api";
-import { themeStore } from "../../theme.store";
+import { ThemeStore } from "../../theme.store";
 import { autobind } from "../../utils";
 import { isMac } from "../../../common/vars";
+import { camelCase } from "lodash";
 
 export class Terminal {
   static spawningPool: HTMLElement;
@@ -40,16 +41,10 @@ export class Terminal {
     // Replacing keys stored in styles to format accepted by terminal
     // E.g. terminalBrightBlack -> brightBlack
     const colorPrefix = "terminal";
-    const terminalColors = Object.entries(colors)
+    const terminalColorEntries = Object.entries(colors)
       .filter(([name]) => name.startsWith(colorPrefix))
-      .reduce<any>((colors, [name, color]) => {
-        const colorName = name.split("").slice(colorPrefix.length);
-
-        colorName[0] = colorName[0].toLowerCase();
-        colors[colorName.join("")] = color;
-
-        return colors;
-      }, {});
+      .map(([name, color]) => [camelCase(name.slice(colorPrefix.length)), color]);
+    const terminalColors = Object.fromEntries(terminalColorEntries);
 
     this.xterm.setOption("theme", terminalColors);
   }
@@ -109,7 +104,7 @@ export class Terminal {
     window.addEventListener("resize", this.onResize);
 
     this.disposers.push(
-      reaction(() => toJS(themeStore.activeTheme.colors), this.setTheme, {
+      reaction(() => toJS(ThemeStore.getInstance().activeTheme.colors), this.setTheme, {
         fireImmediately: true
       }),
       dockStore.onResize(this.onResize),