feat: lazy load menus

src/features/versionCheck.ts

@@ -1,4 +1,4 @@
-import { scriptInfo, host } from "../constants";
+import { scriptInfo, host, platformNames } from "../constants";
 import { getFeatures } from "../config";
 import { error, info, sendRequest, t } from "../utils";
 import { getVersionNotifDialog } from "../dialogs";
@@ -11,9 +11,9 @@ export async function checkVersion() {
     if(getFeatures().versionCheck === false)
       return info("Version check is disabled");
 
-    // const lastCheck = await GM.getValue("bytm-version-check", 0);
-    // if(Date.now() - lastCheck < 1000 * 60 * 60 * 24)
-    //   return;
+    const lastCheck = await GM.getValue("bytm-version-check", 0);
+    if(Date.now() - lastCheck < 1000 * 60 * 60 * 24)
+      return;
 
     await GM.setValue("bytm-version-check", Date.now());
 
@@ -22,30 +22,24 @@ export async function checkVersion() {
       url: releaseURL,
     });
 
-    // const latestTag = res.finalUrl.split("/").pop()?.replace(/[a-zA-Z]/g, "");
+    const latestTag = res.finalUrl.split("/").pop()?.replace(/[a-zA-Z]/g, "");
 
-    // if(!latestTag)
-    //   return;
+    if(!latestTag)
+      return;
 
-    const latestTag = "1.2.0";
+    // const latestTag = "1.2.0";
 
     const versionComp = compareVersions(scriptInfo.version, latestTag);
 
     info("Version check - current version:", scriptInfo.version, "- latest version:", latestTag);
 
     if(versionComp < 0) {
-      // const platformNames: Record<typeof host, string> = {
-      //   github: "GitHub",
-      //   greasyfork: "GreasyFork",
-      //   openuserjs: "OpenUserJS",
-      // };
-
-      const dialog = getVersionNotifDialog({ latestTag });
-      await dialog.open();
+      // const dialog = getVersionNotifDialog({ latestTag });
+      // await dialog.open();
 
       // TODO: replace with custom dialog
-      // if(confirm(t("new_version_available", scriptInfo.name, scriptInfo.version, latestTag, platformNames[host])))
-      //   window.open(pkg.updates[host]);
+      if(confirm(t("new_version_available", scriptInfo.name, scriptInfo.version, latestTag, platformNames[host])))
+        window.open(pkg.updates[host]);
     }
   }
   catch(err) {

src/menu/menu_old.ts

@@ -185,16 +185,16 @@ export async function addCfgMenu() {
   exportElem.ariaLabel = exportElem.title = t("export_tooltip");
   exportElem.textContent = t("export");
   exportElem.addEventListener("click", async () => {
+    await openExportMenu();
     closeCfgMenu();
-    openExportMenu();
   });
   const importElem = document.createElement("button");
   importElem.classList.add("bytm-btn");
   importElem.ariaLabel = importElem.title = t("import_tooltip");
   importElem.textContent = t("import");
   importElem.addEventListener("click", async () => {
+    await openImportMenu();
     closeCfgMenu();
-    openImportMenu();
   });
 
   const buttonsCont = document.createElement("div");
@@ -553,12 +553,12 @@ export async function addCfgMenu() {
   versionElem.tabIndex = 0;
   versionElem.ariaLabel = versionElem.title = t("version_tooltip", scriptInfo.version, scriptInfo.buildNumber);
   versionElem.textContent = `v${scriptInfo.version} (${scriptInfo.buildNumber})`;
-  const versionElemClicked = (e: MouseEvent | KeyboardEvent) => {
+  const versionElemClicked = async (e: MouseEvent | KeyboardEvent) => {
     e.preventDefault();
     e.stopPropagation();
 
+    await openChangelogMenu("cfgMenu");
     closeCfgMenu();
-    openChangelogMenu("cfgMenu");
   };
   versionElem.addEventListener("click", versionElemClicked);
   versionElem.addEventListener("keydown", (e) => e.key === "Enter" && versionElemClicked(e));
@@ -573,10 +573,6 @@ export async function addCfgMenu() {
 
   window.addEventListener("resize", debounce(checkToggleScrollIndicator, 150));
 
-  await addChangelogMenu();
-  await addExportMenu();
-  await addImportMenu();
-
   log("Added menu element");
 
   // ensure stuff is reset if menu was opened before being added
@@ -772,6 +768,7 @@ function closeHelpDialog(evt?: MouseEvent | KeyboardEvent) {
 
 //#MARKER export menu
 
+let isExportMenuAdded = false;
 let isExportMenuOpen = false;
 let copiedTxtTimeout: number | undefined = undefined;
 
@@ -932,7 +929,11 @@ function closeExportMenu(evt: MouseEvent | KeyboardEvent) {
 }
 
 /** Opens the export menu if it is closed */
-function openExportMenu() {
+async function openExportMenu() {
+  if(!isExportMenuAdded)
+    await addExportMenu();
+  isExportMenuAdded = true;
+
   if(isExportMenuOpen)
     return;
   isExportMenuOpen = true;
@@ -950,6 +951,7 @@ function openExportMenu() {
 
 //#MARKER import menu
 
+let isImportMenuAdded = false;
 let isImportMenuOpen = false;
 
 /** Adds a menu to import a configuration from compressed or uncompressed JSON (hidden by default) */
@@ -1141,7 +1143,11 @@ function closeImportMenu(evt?: MouseEvent | KeyboardEvent) {
 }
 
 /** Opens the import menu if it is closed */
-function openImportMenu() {
+async function openImportMenu() {
+  if(!isImportMenuAdded)
+    await addImportMenu();
+  isImportMenuAdded = true;
+
   if(isImportMenuOpen)
     return;
   isImportMenuOpen = true;
@@ -1159,6 +1165,7 @@ function openImportMenu() {
 
 //#MARKER changelog menu
 
+let isChangelogMenuAdded = false;
 let isChangelogMenuOpen = false;
 
 /** Adds a changelog menu (hidden by default) */
@@ -1282,7 +1289,11 @@ function closeChangelogMenu(evt?: MouseEvent | KeyboardEvent) {
  * Opens the changelog menu if it is closed
  * @param returnTo What menu to open after the changelog menu is closed
  */
-export function openChangelogMenu(returnTo: "cfgMenu" | "exit" = "cfgMenu") {
+export async function openChangelogMenu(returnTo: "cfgMenu" | "exit" = "cfgMenu") {
+  if(!isChangelogMenuAdded)
+    await addChangelogMenu();
+  isChangelogMenuAdded = true;
+
   if(isChangelogMenuOpen)
     return;
   isChangelogMenuOpen = true;

src/menu/welcomeMenu.ts

@@ -65,9 +65,9 @@ export async function addWelcomeMenu() {
   openChangelogElem.id = "bytm-welcome-menu-open-changelog";
   openChangelogElem.classList.add("bytm-btn");
   openChangelogElem.addEventListener("click", async () => {
-    closeWelcomeMenu();
     await addCfgMenu();
-    openChangelogMenu("exit");
+    await openChangelogMenu("exit");
+    closeWelcomeMenu();
   });
 
   const closeBtnElem = document.createElement("button");