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/item-object-list/item-list-layout.tsx

@@ -16,11 +16,11 @@ import { Filter, FilterType, pageFilters } from "./page-filters.store";
 import { PageFiltersList } from "./page-filters-list";
 import { PageFiltersSelect } from "./page-filters-select";
 import { NamespaceSelectFilter } from "../+namespaces/namespace-select-filter";
-import { themeStore } from "../../theme.store";
+import { ThemeStore } from "../../theme.store";
 import { MenuActions } from "../menu/menu-actions";
 import { MenuItem } from "../menu";
 import { Checkbox } from "../checkbox";
-import { userStore } from "../../../common/user-store";
+import { UserStore } from "../../../common/user-store";
 import { namespaceStore } from "../+namespaces/namespace.store";
 
 // todo: refactor, split to small re-usable components
@@ -440,7 +440,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
     const { removeItemsDialog, items } = this;
     const { selectedItems } = store;
     const selectedItemId = detailsItem && detailsItem.getId();
-    const classNames = cssNames(className, "box", "grow", themeStore.activeTheme.type);
+    const classNames = cssNames(className, "box", "grow", ThemeStore.getInstance().activeTheme.type);
 
     return (
       <div className="items box grow flex column">
@@ -469,7 +469,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
   }
 
   @computed get hiddenColumns() {
-    return userStore.getHiddenTableColumns(this.props.tableId);
+    return UserStore.getInstance().getHiddenTableColumns(this.props.tableId);
   }
 
   isHiddenColumn({ id: columnId, showWithColumn }: TableCellProps): boolean {
@@ -491,7 +491,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
       hiddenColumns.delete(columnId);
     }
 
-    userStore.setHiddenTableColumns(this.props.tableId, hiddenColumns);
+    UserStore.getInstance().setHiddenTableColumns(this.props.tableId, hiddenColumns);
   }
 
   renderColumnVisibilityMenu() {