Change how page titles work, updating to z-pagerouter 1.0.2.

package.json

@@ -43,6 +43,6 @@
     "webpack-cli": "^4.7.0",
     "webpack-dev-server": "^3.11.2",
     "z-makeelement": "^1.0.3",
-    "z-pagerouter": "^1.0.1"
+    "z-pagerouter": "^1.0.2"
   }
 }

src/pages/Secrets/KeyValue/KeyValueDelete.tsx

@@ -41,8 +41,11 @@ export class KeyValueDeletePage extends Page {
     );
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("kv_delete_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("kv_delete_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {

src/pages/Secrets/KeyValue/KeyValueNew.tsx

@@ -61,8 +61,11 @@ export class KeyValueNewPage extends Page {
     }
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("kv_new_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("kv_new_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {

src/pages/Secrets/KeyValue/KeyValueSecret.tsx

@@ -162,8 +162,8 @@ export class KeyValueSecretPage extends Page {
     document.getElementById("loadingText").remove();
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router);
+  async renderPageTitle(): Promise<void> {
+    render(<SecretTitleElement router={this.router} />, this.router.pageTitleElement);
   }
 
   get name(): string {

src/pages/Secrets/KeyValue/KeyValueSecretsEdit.tsx

@@ -4,6 +4,7 @@ import { SecretTitleElement } from "../SecretTitleElement";
 import { createOrUpdateSecret } from "../../../api/kv/createOrUpdateSecret";
 import { getSecret } from "../../../api/kv/getSecret";
 import { makeElement } from "z-makeelement";
+import { render } from "preact";
 import { setErrorText } from "../../../pageUtils";
 import { sortedObjectMap, verifyJSONString } from "../../../utils";
 import i18next from "i18next";
@@ -79,8 +80,11 @@ export class KeyValueSecretEditPage extends Page {
     };
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("kv_sec_edit_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("kv_sec_edit_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {

src/pages/Secrets/KeyValue/KeyValueVersions.tsx

@@ -42,8 +42,11 @@ export class KeyValueVersionsPage extends Page {
     );
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("kv_sec_versions_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("kv_sec_versions_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {

src/pages/Secrets/KeyValue/KeyValueView.tsx

@@ -89,8 +89,8 @@ export class KeyValueViewPage extends Page {
     );
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router);
+  async renderPageTitle(): Promise<void> {
+    render(<SecretTitleElement router={this.router} />, this.router.pageTitleElement);
   }
 
   get name(): string {

src/pages/Secrets/SecretTitleElement.tsx

@@ -1,6 +1,6 @@
+import { JSX } from "preact/jsx-runtime";
 import { PageRouter } from "z-pagerouter";
 import { PageState } from "../../PageState";
-import { makeElement } from "z-makeelement";
 
 function currentTitleSecretText(state: PageState): string {
   let secretItemText = state.secretItem;
@@ -8,15 +8,20 @@ function currentTitleSecretText(state: PageState): string {
   return secretItemText;
 }
 
-export async function SecretTitleElement(router: PageRouter, suffix = ""): Promise<HTMLElement> {
+type SecretTitleElementProps = {
+  router: PageRouter;
+  suffix?: string;
+};
+
+export function SecretTitleElement(props: SecretTitleElementProps): JSX.Element {
+  const router = props.router;
+  const suffix = props.suffix || "";
   const state = router.state as PageState;
-  const titleElement = makeElement({
-    tag: "div",
-    children: [
-      makeElement({
-        tag: "a",
-        text: state.baseMount + " ",
-        onclick: async () => {
+
+  return (
+    <div>
+      <a
+        onClick={async () => {
           state.secretPath = [];
           state.secretItem = "";
           state.secretVersion = null;
@@ -28,32 +33,25 @@ export async function SecretTitleElement(router: PageRouter, suffix = ""): Promi
           } else if (state.secretMountType == "transit") {
             await router.changePage("TRANSIT_VIEW");
           }
-        },
-      }),
-      ...state.secretPath.map((secretPath, index, secretPaths) => {
-        return makeElement({
-          tag: "a",
-          text: secretPath + " ",
-          onclick: async () => {
+        }}
+      >
+        {state.baseMount + " "}
+      </a>
+      {...state.secretPath.map((secretPath, index, secretPaths) => (
+        <a
+          onClick={async () => {
             state.secretVersion = null;
             if (state.secretMountType.startsWith("kv")) {
               state.secretPath = secretPaths.slice(0, index + 1);
               await router.changePage("KEY_VALUE_VIEW");
             }
-          },
-        });
-      }),
-      makeElement({
-        tag: "span",
-        condition: state.secretItem.length != 0,
-        text: currentTitleSecretText(state),
-      }),
-      makeElement({
-        tag: "span",
-        condition: suffix.length != 0,
-        text: suffix,
-      }),
-    ],
-  });
-  return titleElement;
+          }}
+        >
+          {secretPath + " "}
+        </a>
+      ))}
+      {state.secretItem.length != 0 && <span>{currentTitleSecretText(state)}</span>}
+      {suffix.length != 0 && <span>{suffix}</span>}
+    </div>
+  );
 }

src/pages/Secrets/TOTP/TOTPDelete.tsx

@@ -35,8 +35,11 @@ export class TOTPDeletePage extends Page {
     );
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("totp_delete_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("totp_delete_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {

src/pages/Secrets/TOTP/TOTPNew.tsx

@@ -81,8 +81,11 @@ export class TOTPNewPage extends Page {
     }
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("totp_new_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("totp_new_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {

src/pages/Secrets/TOTP/TOTPView.tsx

@@ -114,8 +114,8 @@ export class TOTPViewPage extends Page {
     );
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router);
+  async renderPageTitle(): Promise<void> {
+    render(<SecretTitleElement router={this.router} />, this.router.pageTitleElement);
   }
 
   get name(): string {

src/pages/Secrets/Transit/NewTransitKey.tsx

@@ -76,8 +76,11 @@ export class NewTransitKeyPage extends Page {
     }
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("transit_new_key_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("transit_new_key_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {

src/pages/Secrets/Transit/TransitDecrypt.tsx

@@ -82,8 +82,11 @@ export class TransitDecryptPage extends Page {
     }
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("transit_decrypt_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("transit_decrypt_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {

src/pages/Secrets/Transit/TransitEncrypt.tsx

@@ -79,8 +79,11 @@ export class TransitEncryptPage extends Page {
     }
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("transit_encrypt_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("transit_encrypt_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {

src/pages/Secrets/Transit/TransitRewrap.tsx

@@ -94,8 +94,11 @@ export class TransitRewrapPage extends Page {
     }
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("transit_rewrap_suffix"));
+  async renderPageTitle(): Promise<void> {
+    render(
+      <SecretTitleElement router={this.router} suffix={i18next.t("transit_rewrap_suffix")} />,
+      this.router.pageTitleElement,
+    );
   }
 
   get name(): string {

src/pages/Secrets/Transit/TransitView.tsx

@@ -97,8 +97,8 @@ export class TransitViewPage extends Page {
     );
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router);
+  async renderPageTitle(): Promise<void> {
+    render(<SecretTitleElement router={this.router} />, this.router.pageTitleElement);
   }
 
   get name(): string {

src/pages/Secrets/Transit/TransitViewSecret.tsx

@@ -51,8 +51,8 @@ export class TransitViewSecretPage extends Page {
     );
   }
 
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router);
+  async renderPageTitle(): Promise<void> {
+    render(<SecretTitleElement router={this.router} />, this.router.pageTitleElement);
   }
 
   get name(): string {

src/types/Page.ts

@@ -13,8 +13,8 @@ export class Page {
   get name(): string {
     return "Page";
   }
-  async getPageTitle(): Promise<Element | string> {
-    return this.name;
+  async renderPageTitle(): Promise<void> {
+    this.router.pageTitleElement.innerText = this.name;
   }
   async goBack(): Promise<void> {
     await this.router.changePage("HOME");