Explode BaseComponent class to a function.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

app/renderer/js/components/base.ts

@@ -1,9 +1,7 @@
 import type {HTML} from "../../../common/html";
 
-export default class BaseComponent {
-  generateNodeFromHTML(html: HTML): Element | null {
-    const wrapper = document.createElement("div");
-    wrapper.innerHTML = html.html;
-    return wrapper.firstElementChild;
-  }
+export function generateNodeFromHTML(html: HTML): Element | null {
+  const wrapper = document.createElement("div");
+  wrapper.innerHTML = html.html;
+  return wrapper.firstElementChild;
 }

app/renderer/js/components/functional-tab.ts

@@ -1,6 +1,7 @@
 import type {HTML} from "../../../common/html";
 import {html} from "../../../common/html";
 
+import {generateNodeFromHTML} from "./base";
 import type {TabProps} from "./tab";
 import Tab from "./tab";
 
@@ -10,7 +11,7 @@ export default class FunctionalTab extends Tab {
   constructor(props: TabProps) {
     super(props);
 
-    this.$el = this.generateNodeFromHTML(this.templateHTML());
+    this.$el = generateNodeFromHTML(this.templateHTML());
     if (this.props.name !== "Settings") {
       this.props.$root.append(this.$el);
       this.$closeButton = this.$el.querySelector(".server-tab-badge");

app/renderer/js/components/server-tab.ts

@@ -4,6 +4,7 @@ import type {HTML} from "../../../common/html";
 import {html} from "../../../common/html";
 import * as SystemUtil from "../utils/system-util";
 
+import {generateNodeFromHTML} from "./base";
 import type {TabProps} from "./tab";
 import Tab from "./tab";
 
@@ -13,7 +14,7 @@ export default class ServerTab extends Tab {
   constructor(props: TabProps) {
     super(props);
 
-    this.$el = this.generateNodeFromHTML(this.templateHTML());
+    this.$el = generateNodeFromHTML(this.templateHTML());
     this.props.$root.append(this.$el);
     this.registerListeners();
     this.$badge = this.$el.querySelector(".server-tab-badge");

app/renderer/js/components/tab.ts

@@ -1,4 +1,3 @@
-import BaseComponent from "./base";
 import type WebView from "./webview";
 
 export interface TabProps {
@@ -16,13 +15,11 @@ export interface TabProps {
   onDestroy?: () => void;
 }
 
-export default class Tab extends BaseComponent {
+export default class Tab {
   props: TabProps;
   webview: WebView;
   $el: Element;
   constructor(props: TabProps) {
-    super();
-
     this.props = props;
     this.webview = this.props.webview;
   }

app/renderer/js/components/webview.ts

@@ -6,7 +6,7 @@ import * as ConfigUtil from "../../../common/config-util";
 import {HTML, html} from "../../../common/html";
 import * as SystemUtil from "../utils/system-util";
 
-import BaseComponent from "./base";
+import {generateNodeFromHTML} from "./base";
 import {contextMenu} from "./context-menu";
 import handleExternalLink from "./handle-external-link";
 
@@ -30,7 +30,7 @@ interface WebViewProps {
   hasPermission?: (origin: string, permission: string) => boolean;
 }
 
-export default class WebView extends BaseComponent {
+export default class WebView {
   props: WebViewProps;
   zoomFactor: number;
   badgeCount: number;
@@ -41,8 +41,6 @@ export default class WebView extends BaseComponent {
   domReady?: Promise<void>;
 
   constructor(props: WebViewProps) {
-    super();
-
     this.props = props;
     this.zoomFactor = 1;
     this.loading = true;
@@ -74,9 +72,7 @@ export default class WebView extends BaseComponent {
   }
 
   init(): void {
-    this.$el = this.generateNodeFromHTML(
-      this.templateHTML(),
-    ) as Electron.WebviewTag;
+    this.$el = generateNodeFromHTML(this.templateHTML()) as Electron.WebviewTag;
     this.domReady = new Promise((resolve) => {
       this.$el.addEventListener(
         "dom-ready",

app/renderer/js/pages/preference/base-section.ts

@@ -2,7 +2,7 @@ import {ipcRenderer} from "electron";
 
 import type {HTML} from "../../../../common/html";
 import {html} from "../../../../common/html";
-import BaseComponent from "../../components/base";
+import {generateNodeFromHTML} from "../../components/base";
 
 interface BaseSectionProps {
   $element: HTMLElement;
@@ -11,13 +11,13 @@ interface BaseSectionProps {
   clickHandler: () => void;
 }
 
-export default class BaseSection extends BaseComponent {
+export default class BaseSection {
   generateSettingOption(props: BaseSectionProps): void {
     const {$element, disabled, value, clickHandler} = props;
 
     $element.textContent = "";
 
-    const $optionControl = this.generateNodeFromHTML(
+    const $optionControl = generateNodeFromHTML(
       this.generateOptionHTML(value, disabled),
     );
     $element.append($optionControl);

app/renderer/js/pages/preference/find-accounts.ts

@@ -1,20 +1,19 @@
 import type {HTML} from "../../../../common/html";
 import {html} from "../../../../common/html";
 import * as t from "../../../../common/translation-util";
-import BaseComponent from "../../components/base";
+import {generateNodeFromHTML} from "../../components/base";
 import * as LinkUtil from "../../utils/link-util";
 
 interface FindAccountsProps {
   $root: Element;
 }
 
-export default class FindAccounts extends BaseComponent {
+export default class FindAccounts {
   props: FindAccountsProps;
   $findAccounts: Element | null;
   $findAccountsButton: Element | null;
   $serverUrlField: HTMLInputElement | null;
   constructor(props: FindAccountsProps) {
-    super();
     this.props = props;
   }
 
@@ -35,7 +34,7 @@ export default class FindAccounts extends BaseComponent {
   }
 
   init(): void {
-    this.$findAccounts = this.generateNodeFromHTML(this.templateHTML());
+    this.$findAccounts = generateNodeFromHTML(this.templateHTML());
     this.props.$root.append(this.$findAccounts);
     this.$findAccountsButton = this.$findAccounts.querySelector(
       "#find-accounts-button",

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

@@ -1,7 +1,7 @@
 import type {HTML} from "../../../../common/html";
 import {html} from "../../../../common/html";
 import * as t from "../../../../common/translation-util";
-import BaseComponent from "../../components/base";
+import {generateNodeFromHTML} from "../../components/base";
 
 export type NavItem =
   | "General"
@@ -15,12 +15,11 @@ interface PreferenceNavProps {
   onItemSelected: (navItem: NavItem) => void;
 }
 
-export default class PreferenceNav extends BaseComponent {
+export default class PreferenceNav {
   props: PreferenceNavProps;
   navItems: NavItem[];
   $el: Element;
   constructor(props: PreferenceNavProps) {
-    super();
     this.props = props;
     this.navItems = [
       "General",
@@ -50,7 +49,7 @@ export default class PreferenceNav extends BaseComponent {
   }
 
   init(): void {
-    this.$el = this.generateNodeFromHTML(this.templateHTML());
+    this.$el = generateNodeFromHTML(this.templateHTML());
     this.props.$root.append(this.$el);
     this.registerListeners();
   }

app/renderer/js/pages/preference/new-server-form.ts

@@ -3,7 +3,7 @@ import {ipcRenderer, remote} from "electron";
 import {html} from "../../../../common/html";
 import type {HTML} from "../../../../common/html";
 import * as t from "../../../../common/translation-util";
-import BaseComponent from "../../components/base";
+import {generateNodeFromHTML} from "../../components/base";
 import * as DomainUtil from "../../utils/domain-util";
 import * as LinkUtil from "../../utils/link-util";
 
@@ -14,13 +14,12 @@ interface NewServerFormProps {
   onChange: () => void;
 }
 
-export default class NewServerForm extends BaseComponent {
+export default class NewServerForm {
   props: NewServerFormProps;
   $newServerForm: Element;
   $saveServerButton: HTMLButtonElement;
   $newServerUrl: HTMLInputElement;
   constructor(props: NewServerFormProps) {
-    super();
     this.props = props;
   }
 
@@ -68,7 +67,7 @@ export default class NewServerForm extends BaseComponent {
   }
 
   initForm(): void {
-    this.$newServerForm = this.generateNodeFromHTML(this.templateHTML());
+    this.$newServerForm = generateNodeFromHTML(this.templateHTML());
     this.$saveServerButton = this.$newServerForm.querySelector("#connect");
     this.props.$root.textContent = "";
     this.props.$root.append(this.$newServerForm);

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

@@ -1,7 +1,6 @@
 import {ipcRenderer} from "electron";
 
 import type {DNDSettings} from "../../../../common/dnd-util";
-import BaseComponent from "../../components/base";
 
 import ConnectedOrgSection from "./connected-org-section";
 import GeneralSection from "./general-section";
@@ -18,13 +17,12 @@ type Section =
   | ConnectedOrgSection
   | ShortcutsSection;
 
-export default class PreferenceView extends BaseComponent {
+export default class PreferenceView {
   $sidebarContainer: Element;
   $settingsContainer: Element;
   nav: Nav;
   section: Section;
   constructor() {
-    super();
     this.$sidebarContainer = document.querySelector("#sidebar");
     this.$settingsContainer = document.querySelector("#settings-container");
   }

app/renderer/js/pages/preference/server-info-form.ts

@@ -5,7 +5,7 @@ import type {HTML} from "../../../../common/html";
 import * as Messages from "../../../../common/messages";
 import * as t from "../../../../common/translation-util";
 import type {ServerConf} from "../../../../common/types";
-import BaseComponent from "../../components/base";
+import {generateNodeFromHTML} from "../../components/base";
 import * as DomainUtil from "../../utils/domain-util";
 
 const {dialog} = remote;
@@ -17,7 +17,7 @@ interface ServerInfoFormProps {
   onChange: () => void;
 }
 
-export default class ServerInfoForm extends BaseComponent {
+export default class ServerInfoForm {
   props: ServerInfoFormProps;
   $serverInfoForm: Element;
   $serverInfoAlias: Element;
@@ -25,7 +25,6 @@ export default class ServerInfoForm extends BaseComponent {
   $deleteServerButton: Element;
   $openServerButton: Element;
   constructor(props: ServerInfoFormProps) {
-    super();
     this.props = props;
   }
 
@@ -61,7 +60,7 @@ export default class ServerInfoForm extends BaseComponent {
   }
 
   initForm(): void {
-    this.$serverInfoForm = this.generateNodeFromHTML(this.templateHTML());
+    this.$serverInfoForm = generateNodeFromHTML(this.templateHTML());
     this.$serverInfoAlias = this.$serverInfoForm.querySelector(
       ".server-info-alias",
     );