ref: move translations and BytmMenu to utils

src/features/index.ts

@@ -1,5 +1,4 @@
-import { t, tp } from "../translations";
-import { getPreferredLocale, resourceToHTMLString } from "../utils";
+import { getPreferredLocale, resourceToHTMLString, t, tp } from "../utils";
 import langMapping from "../../assets/locales.json" assert { type: "json" };
 import { remSongMinPlayTime } from "./behavior";
 import { FeatureInfo } from "../types";

src/features/layout.ts

@@ -1,8 +1,7 @@
 import { addGlobalStyle, addParent, autoPlural, fetchAdvanced, insertAfter, pauseFor } from "@sv443-network/userutils";
 import type { FeatureConfig } from "../types";
 import { scriptInfo } from "../constants";
-import { error, getResourceUrl, log, onSelectorOld, warn } from "../utils";
-import { t } from "../translations";
+import { error, getResourceUrl, log, onSelectorOld, warn, t } from "../utils";
 import { openCfgMenu } from "../menu/menu_old";
 import { featInfo } from ".";
 import "./layout.css";

src/features/lyrics.ts

@@ -1,6 +1,5 @@
 import { clamp, fetchAdvanced, insertAfter } from "@sv443-network/userutils";
-import { constructUrlString, error, getResourceUrl, info, log, onSelectorOld, warn } from "../utils";
-import { t, tp } from "../translations";
+import { constructUrlString, error, getResourceUrl, info, log, onSelectorOld, warn, t, tp } from "../utils";
 import { emitInterface } from "../interface";
 import { scriptInfo } from "../constants";
 

src/features/songLists.ts

@@ -1,6 +1,5 @@
 import { autoPlural, openInNewTab, pauseFor } from "@sv443-network/userutils";
-import { clearInner, error, getResourceUrl, log, onSelectorOld, warn } from "../utils";
-import { t } from "../translations";
+import { clearInner, error, getResourceUrl, log, onSelectorOld, t, warn } from "../utils";
 import { SiteEventsMap, siteEvents } from "../siteEvents";
 import { emitInterface } from "../interface";
 import { fetchLyricsUrl, createLyricsBtn, sanitizeArtists, sanitizeSong, getLyricsCacheEntry, splitVideoTitle } from "./lyrics";

src/index.ts

@@ -2,9 +2,8 @@ import { addGlobalStyle } from "@sv443-network/userutils";
 import { initOnSelector } from "./utils";
 import { clearConfig, getFeatures, initConfig } from "./config";
 import { defaultLogLevel, mode, scriptInfo } from "./constants";
-import { error, getDomain, info, getSessionId, log, setLogLevel } from "./utils";
+import { error, getDomain, info, getSessionId, log, setLogLevel, initTranslations, setLocale } from "./utils";
 import { initSiteEvents, siteEvents } from "./siteEvents";
-import { initTranslations, setLocale } from "./translations";
 import { emitInterface, initInterface } from "./interface";
 import { addCfgMenu } from "./menu/menu_old";
 import { addWelcomeMenu, showWelcomeMenu } from "./menu/welcomeMenu";

src/interface.ts

@@ -1,7 +1,6 @@
 import * as UserUtils from "@sv443-network/userutils";
 import { mode, branch, scriptInfo } from "./constants";
-import { getResourceUrl, getSessionId, getVideoTime, log } from "./utils";
-import { setLocale, getLocale, hasKey, hasKeyFor, t, tp, type TrLocale } from "./translations";
+import { getResourceUrl, getSessionId, getVideoTime, log, setLocale, getLocale, hasKey, hasKeyFor, t, tp, type TrLocale } from "./utils";
 import { addSelectorListener } from "./observers";
 import { getFeatures, saveFeatures } from "./config";
 import { fetchLyricsUrl, getLyricsCacheEntry, sanitizeArtists, sanitizeSong } from "./features/lyrics";

src/menu/README.md

@@ -1,4 +1,4 @@
 ## Menu
 This directory contains the code of all the different menus of the userscript.  
 Some of them are built with JS directly (with `document.createElement()`) and some are built using React JSX.  
-In the long term all of these will be built and rendered using React JSX.
+In the long term all of these will be built and rendered using React JSX and put in the `dialogs` directory.

src/menu/hotkeyInput.ts

@@ -1,6 +1,6 @@
 import { getFeatures } from "../config";
 import { siteEvents } from "../siteEvents";
-import { t } from "../translations";
+import { t } from "../utils";
 import type { HotkeyObj } from "../types";
 import "./hotkeyInput.css";
 

src/menu/menu_old.ts

@@ -2,11 +2,10 @@ import { compress, decompress, debounce, isScrollable } from "@sv443-network/use
 import { defaultConfig, getFeatures, migrations, saveFeatures, setDefaultFeatures } from "../config";
 import { host, scriptInfo } from "../constants";
 import { featInfo, disableBeforeUnload } from "../features/index";
-import { error, getResourceUrl, info, log, resourceToHTMLString, warn } from "../utils";
+import { error, getResourceUrl, info, log, resourceToHTMLString, warn, getLocale, hasKey, initTranslations, setLocale, t } from "../utils";
 import { formatVersion } from "../config";
 import { emitSiteEvent, siteEvents } from "../siteEvents";
-import { getLocale, hasKey, initTranslations, setLocale, t } from "../translations";
-import { FeatureCategory, FeatureKey, FeatureConfig, HotkeyObj, type FeatureInfo } from "../types";
+import type { FeatureCategory, FeatureKey, FeatureConfig, HotkeyObj, FeatureInfo } from "../types";
 import changelog from "../../changelog.md";
 import "./menu_old.css";
 import { createHotkeyInput } from "./hotkeyInput";

src/menu/welcomeMenu.ts

@@ -1,5 +1,4 @@
-import { getResourceUrl, warn } from "../utils";
-import { TrLocale, initTranslations, setLocale, t } from "../translations";
+import { getResourceUrl, warn, type TrLocale, initTranslations, setLocale, t } from "../utils";
 import { getFeatures, saveFeatures } from "../config";
 import { siteEvents } from "../siteEvents";
 import { scriptInfo } from "../constants";

src/tools/tr-format.ts

@@ -1,5 +1,5 @@
 import { readFile, writeFile } from "node:fs/promises";
-import type { TrLocale } from "../translations";
+import type { TrLocale } from "../utils";
 import locales from "../../assets/locales.json" assert { type: "json" };
 
 const prepTranslate = process.argv.find((v) => v.match(/--prep(are)?/) || v.toLowerCase() === "-p");

src/tools/tr-progress.ts

@@ -3,7 +3,7 @@ import { join, relative, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { autoPlural, mapRange } from "@sv443-network/userutils";
 import locales from "../../assets/locales.json" assert { type: "json" };
-import type { TrLocale } from "../translations";
+import type { TrLocale } from "../utils";
 
 const { exit } = process;
 

src/types.ts

@@ -1,10 +1,9 @@
-import type { TrLocale, t, tp } from "./translations";
 import type * as consts from "./constants";
 import type { scriptInfo } from "./constants";
 import type { addSelectorListener } from "./observers";
 import type resources from "../assets/resources.json";
 import type langMapping from "../assets/locales.json";
-import type { getResourceUrl, getSessionId, getVideoTime } from "./utils";
+import type { getResourceUrl, getSessionId, getVideoTime, TrLocale, t, tp } from "./utils";
 import type { getFeatures, saveFeatures } from "./config";
 
 /** Custom CLI args passed to rollup */

src/menu/new/BytmMenu.tsx → src/utils/BytmMenu.tsx

@@ -1,9 +1,9 @@
 import { createRoot } from "react-dom/client";
 import * as React from "react";
 // hoist the class declaration because either rollup or babel is being a hoe
-import { NanoEmitter } from "../../utils/NanoEmitter";
-import { clearInner, getResourceUrl, warn } from "../../utils";
-import { t } from "../../translations";
+import { NanoEmitter } from "./NanoEmitter";
+import { clearInner, getResourceUrl, warn } from ".";
+import { t } from "./translations";
 
 export interface BytmMenuOptions {
   /** ID that gets added to child element IDs - has to be unique and conform to HTML ID naming rules! */
@@ -14,6 +14,8 @@ export interface BytmMenuOptions {
   closeOnEscPress?: boolean;
   /** Whether the close button should be enabled - defaults to true */
   closeBtnEnabled?: boolean;
+  /** Whether the menu should be destroyed when it's closed - defaults to false */
+  destroyOnClose?: boolean;
   /** Called to render the body of the menu */
   renderBody: () => React.ReactNode;
   /** Called to render the header of the menu - leave undefined for a blank header */
@@ -52,6 +54,7 @@ export class BytmMenu extends NanoEmitter<{
       closeOnBgClick: true,
       closeOnEscPress: true,
       closeBtnEnabled: true,
+      destroyOnClose: false,
       ...options,
     };
     this.id = options.id;
@@ -83,8 +86,8 @@ export class BytmMenu extends NanoEmitter<{
     this.events.emit("render");
   }
 
-  /** Clears all menu contents in preparation for a new rendering call */
-  public clear() {
+  /** Clears all menu contents (unmounts them from the DOM) in preparation for a new rendering call */
+  public unmount() {
     this.menuRendered = false;
 
     const clearSelectors = [
@@ -105,7 +108,7 @@ export class BytmMenu extends NanoEmitter<{
 
   /** Clears and then re-renders the menu */
   public async rerender() {
-    this.clear();
+    this.unmount();
     await this.render();
   }
 
@@ -164,6 +167,9 @@ export class BytmMenu extends NanoEmitter<{
       lastMenuId = null;
 
     this.events.emit("close");
+
+    if(this.options.destroyOnClose)
+      this.destroy();
   }
 
   /** Returns true if the menu is open */
@@ -179,7 +185,7 @@ export class BytmMenu extends NanoEmitter<{
   /** Clears the menu and removes all event listeners */
   public destroy() {
     this.events.emit("destroy");
-    this.clear();
+    this.unmount();
     this.unsubscribeAll();
   }
 

src/utils/index.ts

@@ -1,6 +1,8 @@
+export * from "./BytmMenu";
 export * from "./dom";
 export * from "./logging";
 export * from "./misc";
 export * from "./NanoEmitter";
 export * from "./onSelector";
+export * from "./translations";
 export * from "./xhr";

src/utils/misc.ts

@@ -1,8 +1,7 @@
 import { fetchAdvanced, randomId } from "@sv443-network/userutils";
 import { branch, repo } from "../constants";
 import { type Domain, type ResourceKey } from "../types";
-import type { TrLocale } from "../translations";
-import { error, warn } from ".";
+import { error, type TrLocale, warn } from ".";
 import langMapping from "../../assets/locales.json" assert { type: "json" };
 
 //#SECTION misc

src/translations.ts → src/utils/translations.ts

@@ -1,8 +1,8 @@
 import { tr, Stringifiable, fetchAdvanced, FetchAdvancedOpts } from "@sv443-network/userutils";
-import { error, getResourceUrl, info } from "./utils";
-import langMapping from "../assets/locales.json" assert { type: "json" };
-import type tr_enUS from "../assets/translations/en_US.json";
-import { emitInterface, setGlobalProp } from "./interface";
+import { error, getResourceUrl, info } from ".";
+import langMapping from "../../assets/locales.json" assert { type: "json" };
+import type tr_enUS from "../../assets/translations/en_US.json";
+import { emitInterface, setGlobalProp } from "../interface";
 
 export type TrLocale = keyof typeof langMapping;
 export type TrKey = keyof (typeof tr_enUS["translations"]);