Move makeElement to z-makeelement library.

package.json

@@ -39,6 +39,7 @@
     "webpack": "^5.37.0",
     "webpack-cli": "^4.7.0",
     "webpack-dev-server": "^3.11.2",
+    "z-makeelement": "^1.0.1",
     "z-pagerouter": "^1.0.1"
   }
 }

src/elements/CopyableInputBox.ts

@@ -1,6 +1,6 @@
 import { MarginInline } from "./MarginInline";
 import { addClipboardNotifications } from "../pageUtils";
-import { makeElement } from "../htmlUtils";
+import { makeElement } from "z-makeelement";
 import ClipboardJS from "clipboard";
 import i18next from "i18next";
 

src/elements/CopyableModal.ts

@@ -1,5 +1,5 @@
 import { addClipboardNotifications } from "../pageUtils";
-import { makeElement } from "../htmlUtils";
+import { makeElement } from "z-makeelement";
 import ClipboardJS from "clipboard";
 import FileSaver from "file-saver";
 import UIkit from "uikit";

src/elements/FileUploadInput.ts

@@ -1,4 +1,4 @@
-import { makeElement } from "../htmlUtils";
+import { makeElement } from "z-makeelement";
 import i18next from "i18next";
 
 export function FileUploadInput(name: string): Element {

src/elements/ListItem.ts

@@ -1,4 +1,4 @@
-import { makeElement } from "../htmlUtils";
+import { makeElement } from "z-makeelement";
 
 export function ListItem(children: Element[] | Element): HTMLElement {
   return makeElement({

src/elements/Margin.ts

@@ -1,4 +1,4 @@
-import { makeElement } from "../htmlUtils";
+import { makeElement } from "z-makeelement";
 
 export function Margin(children: Element | Element[]): Element {
   return makeElement({

src/elements/MarginInline.ts

@@ -1,4 +1,4 @@
-import { makeElement } from "../htmlUtils";
+import { makeElement } from "z-makeelement";
 
 export function MarginInline(children: Element | Element[]): Element {
   return makeElement({

src/elements/NavBar.ts

@@ -1,6 +1,6 @@
 import { ListItem } from "./ListItem";
 import { PageRouter } from "z-pagerouter";
-import { makeElement } from "../htmlUtils";
+import { makeElement } from "z-makeelement";
 import i18next from "i18next";
 
 export function NavBar(router: PageRouter): HTMLElement {

src/elements/Option.ts

@@ -1,4 +1,4 @@
-import { makeElement } from "../htmlUtils";
+import { makeElement } from "z-makeelement";
 
 export function Option(label: string, value: string): HTMLElement {
   return makeElement({

src/elements/QRScanner.ts

@@ -1,5 +1,5 @@
 import { Margin } from "./Margin";
-import { makeElement } from "../htmlUtils";
+import { makeElement } from "z-makeelement";
 import QrScanner from "qr-scanner";
 
 /* eslint-disable import/no-unresolved */

src/elements/SecretTitleElement.ts

@@ -1,6 +1,6 @@
 import { PageRouter } from "z-pagerouter";
 import { PageState } from "../PageState";
-import { makeElement } from "../htmlUtils";
+import { makeElement } from "z-makeelement";
 
 function currentTitleSecretText(state: PageState, suffix = ""): string {
   let currentSecretText = state.currentSecret;

src/elements/Tile.ts

@@ -1,4 +1,4 @@
-import { makeElement } from "../htmlUtils";
+import { makeElement } from "z-makeelement";
 
 type TileParams = {
   condition?: boolean;

src/htmlUtils.ts

@@ -1,70 +1,3 @@
-import { getObjectKeys } from "./utils";
-
-type optionsFunctionsObject = {
-  [key: string]: (e: Element, arg: unknown) => void;
-};
-
-const optionsFunctions: optionsFunctionsObject = {
-  class: (e: Element, arg: string | string[]) => {
-    if (!Array.isArray(arg)) {
-      arg = String(arg).split(" ");
-    }
-    e.classList.add(...arg);
-  },
-  id: (e: Element, arg: string) => (e.id = arg),
-  html: (e: Element, arg: string) => (e.innerHTML = arg),
-  onclick: (e: Element, arg: () => void) => ((e as HTMLButtonElement).onclick = arg),
-  attributes: setElementAttributes,
-  text: (e: Element, arg: string) => ((e as HTMLParagraphElement).innerText = arg),
-  children: (e: Element, arg: Element | Element[]) => {
-    if (Array.isArray(arg)) {
-      arg.forEach((child) => {
-        if (child != null) e.appendChild(child);
-      });
-    } else {
-      if (arg != null) e.appendChild(arg);
-    }
-  },
-  thenRun: (e: Element, arg: (e: Element) => void) => arg(e),
-};
-
-interface ElementInfo {
-  condition?: boolean;
-  tag: string;
-  class?: string | string[];
-  id?: string;
-  html?: string;
-  attributes?: Record<string, string>;
-  children?: Element | Element[];
-  text?: string;
-  thenRun?: (e: Element) => void;
-  onclick?: () => void;
-  [propName: string]: unknown;
-}
-
-export function makeElement(elementInfo: ElementInfo): HTMLElement {
-  if ("condition" in elementInfo) {
-    if (!elementInfo.condition) {
-      return null;
-    }
-  }
-  const element = document.createElement(elementInfo.tag);
-
-  for (const key of Object.getOwnPropertyNames(elementInfo)) {
-    if (getObjectKeys(optionsFunctions).includes(key)) {
-      optionsFunctions[key](element, elementInfo[key]);
-    }
-  }
-
-  return element;
-}
-
-export function setElementAttributes(element: Element, attributes: Record<string, string>): void {
-  for (const key of Object.getOwnPropertyNames(attributes)) {
-    element.setAttribute(key, attributes[key]);
-  }
-}
-
 export const fileToBase64 = (file: File): Promise<string> =>
   new Promise((resolve, reject) => {
     const reader = new FileReader();

src/main.ts

@@ -23,7 +23,7 @@ import { NavBar } from "./elements/NavBar";
 import { PageRouter } from "z-pagerouter";
 import { formatDistance } from "./formatDistance";
 import { getSealStatus } from "./api/sys/getSealStatus";
-import { makeElement } from "./htmlUtils";
+import { makeElement } from "z-makeelement";
 import { pageList } from "./allPages";
 import { pageState } from "./globalPageState";
 import { playground } from "./playground";

src/pages/Home.ts

@@ -2,7 +2,7 @@ import { MountType, getMounts } from "../api/sys/getMounts";
 import { Page } from "../types/Page";
 import { getCapabilitiesPath } from "../api/sys/getCapabilities";
 import { lookupSelf } from "../api/sys/lookupSelf";
-import { makeElement } from "../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { prePageChecks, setErrorText } from "../pageUtils";
 import { sortedObjectMap } from "../utils";
 import i18next from "i18next";

src/pages/KeyValue/KeyValueDelete.ts

@@ -1,7 +1,7 @@
 import { Page } from "../../types/Page";
 import { SecretTitleElement } from "../../elements/SecretTitleElement";
 import { deleteSecret } from "../../api/kv/deleteSecret";
-import { makeElement } from "../../htmlUtils";
+import { makeElement } from "z-makeelement";
 import i18next from "i18next";
 
 export class KeyValueDeletePage extends Page {

src/pages/KeyValue/KeyValueNew.ts

@@ -1,7 +1,7 @@
 import { Page } from "../../types/Page";
 import { SecretTitleElement } from "../../elements/SecretTitleElement";
 import { createOrUpdateSecret } from "../../api/kv/createOrUpdateSecret";
-import { makeElement } from "../../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { setErrorText } from "../../pageUtils";
 import i18next from "i18next";
 

src/pages/KeyValue/KeyValueSecret.ts

@@ -3,7 +3,7 @@ import { Page } from "../../types/Page";
 import { SecretTitleElement } from "../../elements/SecretTitleElement";
 import { getCapabilities } from "../../api/sys/getCapabilities";
 import { getSecret } from "../../api/kv/getSecret";
-import { makeElement } from "../../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { sortedObjectMap } from "../../utils";
 import { undeleteSecret } from "../../api/kv/undeleteSecret";
 import Prism from "prismjs";

src/pages/KeyValue/KeyValueSecretsEdit.ts

@@ -3,7 +3,7 @@ import { Page } from "../../types/Page";
 import { SecretTitleElement } from "../../elements/SecretTitleElement";
 import { createOrUpdateSecret } from "../../api/kv/createOrUpdateSecret";
 import { getSecret } from "../../api/kv/getSecret";
-import { makeElement } from "../../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { setErrorText } from "../../pageUtils";
 import { sortedObjectMap, verifyJSONString } from "../../utils";
 import i18next from "i18next";

src/pages/KeyValue/KeyValueVersions.ts

@@ -1,7 +1,7 @@
 import { Page } from "../../types/Page";
 import { SecretTitleElement } from "../../elements/SecretTitleElement";
 import { getSecretMetadata } from "../../api/kv/getSecretMetadata";
-import { makeElement } from "../../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { objectToMap } from "../../utils";
 import i18next from "i18next";
 

src/pages/KeyValue/KeyValueView.ts

@@ -2,7 +2,7 @@ import { DoesNotExistError } from "../../types/internalErrors";
 import { Page } from "../../types/Page";
 import { SecretTitleElement } from "../../elements/SecretTitleElement";
 import { getSecrets } from "../../api/kv/getSecrets";
-import { makeElement } from "../../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { setErrorText } from "../../pageUtils";
 import i18next from "i18next";
 

src/pages/Login.ts

@@ -2,7 +2,7 @@ import { Margin } from "../elements/Margin";
 import { MarginInline } from "../elements/MarginInline";
 import { Page } from "../types/Page";
 import { lookupSelf } from "../api/sys/lookupSelf";
-import { makeElement } from "../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { setErrorText } from "../pageUtils";
 import { usernameLogin } from "../api/auth/usernameLogin";
 import i18next from "i18next";

src/pages/Me.ts

@@ -1,7 +1,7 @@
 import { Page } from "../types/Page";
 import { addClipboardNotifications, prePageChecks, setErrorText } from "../pageUtils";
 import { getCapabilitiesPath } from "../api/sys/getCapabilities";
-import { makeElement } from "../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { renewSelf } from "../api/sys/renewSelf";
 import { sealVault } from "../api/sys/sealVault";
 import ClipboardJS from "clipboard";

src/pages/NewEngines/NewKVEngine.ts

@@ -1,7 +1,7 @@
 import { Margin } from "../../elements/Margin";
 import { Option } from "../../elements/Option";
 import { Page } from "../../types/Page";
-import { makeElement } from "../../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { newMount } from "../../api/sys/newMount";
 import { setErrorText } from "../../pageUtils";
 import i18next from "i18next";

src/pages/NewEngines/NewTOTPEngine.ts

@@ -1,6 +1,6 @@
 import { Margin } from "../../elements/Margin";
 import { Page } from "../../types/Page";
-import { makeElement } from "../../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { newMount } from "../../api/sys/newMount";
 import { setErrorText } from "../../pageUtils";
 import i18next from "i18next";

src/pages/NewEngines/NewTransitEngine.ts

@@ -1,6 +1,6 @@
 import { Margin } from "../../elements/Margin";
 import { Page } from "../../types/Page";
-import { makeElement } from "../../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { newMount } from "../../api/sys/newMount";
 import { setErrorText } from "../../pageUtils";
 import i18next from "i18next";

src/pages/NewSecretsEngine.ts

@@ -1,6 +1,6 @@
 import { Page } from "../types/Page";
 import { Tile } from "../elements/Tile";
-import { makeElement } from "../htmlUtils";
+import { makeElement } from "z-makeelement";
 import i18next from "i18next";
 
 export class NewSecretsEnginePage extends Page {

src/pages/PwGen.ts

@@ -2,7 +2,7 @@ import { CopyableInputBox, CopyableInputBoxType } from "../elements/CopyableInpu
 import { Margin } from "../elements/Margin";
 import { Option } from "../elements/Option";
 import { Page } from "../types/Page";
-import { makeElement } from "../htmlUtils";
+import { makeElement } from "z-makeelement";
 import i18next from "i18next";
 
 const passwordLengthMin = 1;

src/pages/SetLanguage.ts

@@ -1,6 +1,6 @@
 import { Margin } from "../elements/Margin";
 import { Page } from "../types/Page";
-import { makeElement } from "../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { reloadNavBar } from "../elements/NavBar";
 import i18next from "i18next";
 

src/pages/SetVaultURL.ts

@@ -1,5 +1,5 @@
 import { Page } from "../types/Page";
-import { makeElement } from "../htmlUtils";
+import { makeElement } from "z-makeelement";
 
 export class SetVaultURLPage extends Page {
   constructor() {

src/pages/TOTP/NewTOTP.ts

@@ -3,7 +3,7 @@ import { MarginInline } from "../../elements/MarginInline";
 import { Page } from "../../types/Page";
 import { SecretTitleElement } from "../../elements/SecretTitleElement";
 import { addNewTOTP } from "../../api/totp/addNewTOTP";
-import { makeElement } from "../../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { setErrorText } from "../../pageUtils";
 import i18next from "i18next";
 

src/pages/TOTP/TOTPView.ts

@@ -4,7 +4,7 @@ import { Page } from "../../types/Page";
 import { SecretTitleElement } from "../../elements/SecretTitleElement";
 import { getTOTPCode } from "../../api/totp/getTOTPCode";
 import { getTOTPKeys } from "../../api/totp/getTOTPKeys";
-import { makeElement } from "../../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { objectToMap } from "../../utils";
 import { setErrorText } from "../../pageUtils";
 import i18next from "i18next";

src/pages/Transit/NewTransitKey.ts

@@ -2,7 +2,7 @@ import { Margin } from "../../elements/Margin";
 import { Option } from "../../elements/Option";
 import { Page } from "../../types/Page";
 import { SecretTitleElement } from "../../elements/SecretTitleElement";
-import { makeElement } from "../../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { newTransitKey } from "../../api/transit/newTransitKey";
 import { setErrorText } from "../../pageUtils";
 import i18next from "i18next";

src/pages/Transit/TransitDecrypt.ts

@@ -3,7 +3,8 @@ import { FileUploadInput } from "../../elements/FileUploadInput";
 import { Margin } from "../../elements/Margin";
 import { Page } from "../../types/Page";
 import { SecretTitleElement } from "../../elements/SecretTitleElement";
-import { fileToBase64, makeElement } from "../../htmlUtils";
+import { fileToBase64 } from "../../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { setErrorText } from "../../pageUtils";
 import { transitDecrypt } from "../../api/transit/transitDecrypt";
 import i18next from "i18next";

src/pages/Transit/TransitEncrypt.ts

@@ -3,7 +3,8 @@ import { FileUploadInput } from "../../elements/FileUploadInput";
 import { Margin } from "../../elements/Margin";
 import { Page } from "../../types/Page";
 import { SecretTitleElement } from "../../elements/SecretTitleElement";
-import { fileToBase64, makeElement } from "../../htmlUtils";
+import { fileToBase64 } from "../../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { setErrorText } from "../../pageUtils";
 import { transitEncrypt } from "../../api/transit/transitEncrypt";
 import i18next from "i18next";

src/pages/Transit/TransitRewrap.ts

@@ -4,7 +4,7 @@ import { Option } from "../../elements/Option";
 import { Page } from "../../types/Page";
 import { SecretTitleElement } from "../../elements/SecretTitleElement";
 import { getTransitKey } from "../../api/transit/getTransitKey";
-import { makeElement } from "../../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { objectToMap } from "../../utils";
 import { setErrorText } from "../../pageUtils";
 import { transitRewrap } from "../../api/transit/transitRewrap";

src/pages/Transit/TransitView.ts

@@ -2,7 +2,7 @@ import { DoesNotExistError } from "../../types/internalErrors";
 import { Page } from "../../types/Page";
 import { SecretTitleElement } from "../../elements/SecretTitleElement";
 import { getTransitKeys } from "../../api/transit/getTransitKeys";
-import { makeElement } from "../../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { setErrorText } from "../../pageUtils";
 import i18next from "i18next";
 

src/pages/Transit/TransitViewSecret.ts

@@ -2,7 +2,7 @@ import { Page } from "../../types/Page";
 import { SecretTitleElement } from "../../elements/SecretTitleElement";
 import { Tile } from "../../elements/Tile";
 import { getTransitKey } from "../../api/transit/getTransitKey";
-import { makeElement } from "../../htmlUtils";
+import { makeElement } from "z-makeelement";
 import i18next from "i18next";
 
 export class TransitViewSecretPage extends Page {

src/pages/Unseal.ts

@@ -2,7 +2,7 @@ import { MarginInline } from "../elements/MarginInline";
 import { Page } from "../types/Page";
 import { QRScanner, QRScannerType } from "../elements/QRScanner";
 import { SealStatusType, getSealStatus } from "../api/sys/getSealStatus";
-import { makeElement } from "../htmlUtils";
+import { makeElement } from "z-makeelement";
 import { setErrorText } from "../pageUtils";
 import { submitUnsealKey } from "../api/sys/submitUnsealKey";
 import i18next from "i18next";