renderer: Add async constructors for functional tabs.

Signed-off-by: Anders Kaseorg <[email protected]>

Author: andersk

app/renderer/js/main.ts

@@ -547,7 +547,7 @@ export class ServerManagerView {
   async openFunctionalTab(tabProps: {
     name: string;
     materialIcon: string;
-    makeView: () => Element;
+    makeView: () => Promise<Element>;
     destroyView: () => void;
   }): Promise<void> {
     if (this.functionalTabs.has(tabProps.name)) {
@@ -559,7 +559,7 @@ export class ServerManagerView {
     this.functionalTabs.set(tabProps.name, index);
 
     const tabIndex = this.getTabIndex();
-    const $view = tabProps.makeView();
+    const $view = await tabProps.makeView();
     this.$webviewsContainer.append($view);
 
     this.tabs.push(
@@ -590,8 +590,8 @@ export class ServerManagerView {
     await this.openFunctionalTab({
       name: "Settings",
       materialIcon: "settings",
-      makeView: () => {
-        this.preferenceView = new PreferenceView();
+      makeView: async () => {
+        this.preferenceView = await PreferenceView.create();
         this.preferenceView.$view.classList.add("functional-view");
         return this.preferenceView.$view;
       },
@@ -609,8 +609,8 @@ export class ServerManagerView {
     await this.openFunctionalTab({
       name: "About",
       materialIcon: "sentiment_very_satisfied",
-      makeView() {
-        aboutView = new AboutView();
+      async makeView() {
+        aboutView = await AboutView.create();
         aboutView.$view.classList.add("functional-view");
         return aboutView.$view;
       },

app/renderer/js/pages/about.ts

@@ -3,9 +3,13 @@ import {app} from "@electron/remote";
 import {html} from "../../../common/html.js";
 
 export class AboutView {
+  static async create(): Promise<AboutView> {
+    return new AboutView();
+  }
+
   readonly $view: HTMLElement;
 
-  constructor() {
+  private constructor() {
     this.$view = document.createElement("div");
     const $shadow = this.$view.attachShadow({mode: "open"});
     $shadow.innerHTML = html`

app/renderer/js/pages/preference/preference.ts

@@ -13,13 +13,17 @@ import {initServersSection} from "./servers-section.js";
 import {initShortcutsSection} from "./shortcuts-section.js";
 
 export class PreferenceView {
+  static async create(): Promise<PreferenceView> {
+    return new PreferenceView();
+  }
+
   readonly $view: HTMLElement;
   private readonly $shadow: ShadowRoot;
   private readonly $settingsContainer: Element;
   private readonly nav: Nav;
   private navItem: NavItem = "General";
 
-  constructor() {
+  private constructor() {
     this.$view = document.createElement("div");
     this.$shadow = this.$view.attachShadow({mode: "open"});
     this.$shadow.innerHTML = html`