feat: update to userutils v9.2.1

package.json

@@ -63,7 +63,7 @@
     "openuserjs": "https://openuserjs.org/scripts/Sv443/BetterYTM"
   },
   "dependencies": {
-    "@sv443-network/userutils": "^9.1.0",
+    "@sv443-network/userutils": "^9.2.1",
     "compare-versions": "^6.1.1",
     "dompurify": "^3.2.4",
     "marked": "^12.0.2",
@@ -72,6 +72,7 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",
     "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.22.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.1",
     "@rollup/plugin-terser": "^0.4.4",

pnpm-lock.yaml

@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@sv443-network/userutils':
-        specifier: ^9.1.0
-        version: 9.1.0
+        specifier: ^9.2.1
+        version: 9.2.1
       compare-versions:
         specifier: ^6.1.1
         version: 6.1.1
@@ -30,6 +30,9 @@ importers:
       '@eslint/eslintrc':
         specifier: ^3.3.0
         version: 3.3.0
+      '@eslint/js':
+        specifier: ^9.22.0
+        version: 9.22.0
       '@rollup/plugin-json':
         specifier: ^6.1.0
         version: 6.1.0([email protected])
@@ -874,8 +877,8 @@ packages:
     peerDependencies:
       storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
 
-  '@sv443-network/userutils@9.1.0':
-    resolution: {integrity: sha512-/ohuTWi+5sD3OGP7pWn5qEWDthU41muWywIr7lv2cC4m73Y+Y0CyboyEl9rNM/vYjvRDc2fNsJOp5ruf8BOv0A==}
+  '@sv443-network/userutils@9.2.1':
+    resolution: {integrity: sha512-d1efzZnm5Jnrfm6dMqnv14KbyHaoRv31mPRaTfoIZUiKyisSd5TrALbe/FXAedgD4up6GUptevNjS94Xly1UOg==}
 
   '@testing-library/[email protected]':
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
@@ -3088,7 +3091,7 @@ snapshots:
     dependencies:
       storybook: 8.6.4([email protected])
 
-  '@sv443-network/userutils@9.1.0':
+  '@sv443-network/userutils@9.2.1':
     dependencies:
       nanoevents: 9.1.0
 

src/components/BytmDialog.ts

@@ -1,7 +1,7 @@
 // hoist the class declaration because either rollup or babel is being a hoe
-import { NanoEmitter } from "@sv443-network/userutils";
+import { isDomLoaded, NanoEmitter } from "@sv443-network/userutils";
 import type { EventsMap } from "nanoevents";
-import { clearInner, domLoaded, error, getDomain, getResourceUrl, onInteraction, warn } from "../utils/index.js";
+import { clearInner, error, getDomain, getResourceUrl, onInteraction, warn } from "../utils/index.js";
 import { t } from "../utils/translations.js";
 import { emitInterface } from "../interface.js";
 import "./BytmDialog.css";
@@ -262,7 +262,7 @@ export class BytmDialog extends NanoEmitter<BytmDialogEvents> {
       document.body.appendChild(bytmDialogCont);
     };
 
-    if(!domLoaded)
+    if(!isDomLoaded())
       document.addEventListener("DOMContentLoaded", createContainer);
     else
       createContainer();

src/features/behavior.ts

@@ -1,5 +1,5 @@
-import { clamp, interceptWindowEvent, pauseFor } from "@sv443-network/userutils";
-import { domLoaded, error, getDomain, getVideoTime, getWatchId, info, log, waitVideoElementReady, clearNode, getCurrentMediaType, getVideoElement } from "../utils/index.js";
+import { clamp, interceptWindowEvent, isDomLoaded, pauseFor } from "@sv443-network/userutils";
+import { error, getDomain, getVideoTime, getWatchId, info, log, waitVideoElementReady, clearNode, getCurrentMediaType, getVideoElement } from "../utils/index.js";
 import { getFeature } from "../config.js";
 import { addSelectorListener } from "../observers.js";
 import { initialParams } from "../constants.js";
@@ -113,7 +113,7 @@ export async function initRememberSongTime() {
   await remTimeRestoreTime();
 
   try {
-    if(!domLoaded)
+    if(!isDomLoaded())
       document.addEventListener("DOMContentLoaded", remTimeStartUpdateLoop);
     else
       remTimeStartUpdateLoop();
@@ -152,7 +152,7 @@ async function remTimeRestoreTime() {
           info(`Restored ${getDomain() === "ytm" ? getCurrentMediaType() : "video"} time to ${Math.floor(vidRestoreTime / 60)}m, ${(vidRestoreTime % 60).toFixed(1)}s`, LogLevel.Info);
         };
 
-        if(!domLoaded)
+        if(!isDomLoaded())
           document.addEventListener("DOMContentLoaded", doRestoreTime);
         else
           doRestoreTime();

src/features/layout.ts

@@ -1,8 +1,8 @@
-import { addParent, autoPlural, debounce, fetchAdvanced, pauseFor } from "@sv443-network/userutils";
+import { addParent, autoPlural, debounce, fetchAdvanced, isDomLoaded, pauseFor } from "@sv443-network/userutils";
 import { getFeature, getFeatures } from "../config.js";
 import { siteEvents } from "../siteEvents.js";
 import { addSelectorListener } from "../observers.js";
-import { error, getResourceUrl, log, warn, t, onInteraction, openInTab, getBestThumbnailUrl, getDomain, getCurrentMediaType, domLoaded, waitVideoElementReady, addStyleFromResource, fetchVideoVotes, getWatchId, tp, getVideoTime, setInnerHtml, formatNumber, resourceAsString } from "../utils/index.js";
+import { error, getResourceUrl, log, warn, t, onInteraction, openInTab, getBestThumbnailUrl, getDomain, getCurrentMediaType, waitVideoElementReady, addStyleFromResource, fetchVideoVotes, getWatchId, tp, getVideoTime, setInnerHtml, formatNumber, resourceAsString } from "../utils/index.js";
 import { mode, scriptInfo } from "../constants.js";
 import { openCfgMenu } from "../menu/menu_old.js";
 import { showPrompt } from "../dialogs/prompt.js";
@@ -479,7 +479,7 @@ export async function initThumbnailOverlay() {
 
     /** Checks and updates the overlay and toggle button states based on the current song type (yt video or ytm song) */
     const updateOverlayVisibility = async () => {
-      if(!domLoaded)
+      if(!isDomLoaded())
         return;
 
       const behavior = getFeature("thumbnailOverlayBehavior");

src/index.ts

@@ -1,5 +1,5 @@
-import { compress, decompress, fetchAdvanced, pauseFor, setInnerHtmlUnsafe, type Stringifiable } from "@sv443-network/userutils";
-import { addStyle, addStyleFromResource, domLoaded, getResourceUrl, reloadTab, setGlobalCssVars, warn } from "./utils/index.js";
+import { compress, decompress, fetchAdvanced, isDomLoaded, pauseFor, setInnerHtmlUnsafe, type Stringifiable } from "@sv443-network/userutils";
+import { addStyle, addStyleFromResource, getResourceUrl, reloadTab, setGlobalCssVars, warn } from "./utils/index.js";
 import { clearConfig, getFeatures, initConfig } from "./config.js";
 import { buildNumber, compressionFormat, defaultLogLevel, mode, scriptInfo } from "./constants.js";
 import { dbg, error, getDomain, info, getSessionId, log, setLogLevel, initTranslations, setLocale } from "./utils/index.js";
@@ -131,7 +131,7 @@ async function init() {
     if(features.rememberSongTime)
       initRememberSongTime();
 
-    if(!domLoaded)
+    if(!isDomLoaded())
       document.addEventListener("DOMContentLoaded", onDomLoad, { once: true });
     else
       onDomLoad();
@@ -517,7 +517,7 @@ function registerDevCommands() {
     }
   });
 
-  GM.registerMenuCommand("Download DataStoreSerializer file", () => downloadData());
+  GM.registerMenuCommand("Download DataStoreSerializer file", () => downloadData(false));
 
   GM.registerMenuCommand("Import all data using DataStoreSerializer", async () => {
     const input = await showPrompt({ type: "prompt", message: "Paste the content of the export file to import:", confirmBtnText: "Import" });

src/serializer.ts

@@ -56,7 +56,7 @@ export async function importData(blob: File | Blob) {
 }
 
 /** Downloads the current data stores as a single file */
-export async function downloadData() {
+export async function downloadData(useEncoding = true) {
   const serializer = getStoreSerializer();
 
   const pad = (val: Stringifiable, len = 2) => String(val).padStart(len, "0");
@@ -65,7 +65,7 @@ export async function downloadData() {
   const dateStr = `${pad(d.getFullYear(), 4)}${pad(d.getMonth() + 1)}${pad(d.getDate())}_${pad(d.getHours())}${pad(d.getMinutes())}`;
   const fileName = `BetterYTM ${packageJson.version} data export ${dateStr}.json`;
 
-  const data = JSON.stringify(JSON.parse(await serializer.serialize()), undefined, 2);
+  const data = JSON.stringify(JSON.parse(await serializer.serialize(useEncoding)), undefined, 2);
 
   downloadFile(fileName, data, "application/json");
 }

src/utils/dom.ts

@@ -1,4 +1,4 @@
-import { addGlobalStyle, consumeStringGen, getUnsafeWindow, randomId, type StringGen, type Stringifiable } from "@sv443-network/userutils";
+import { addGlobalStyle, consumeStringGen, getUnsafeWindow, isDomLoaded, randomId, type StringGen, type Stringifiable } from "@sv443-network/userutils";
 import DOMPurify from "dompurify";
 import { error, fetchCss, getDomain, t } from "./index.js";
 import { addSelectorListener } from "../observers.js";
@@ -6,10 +6,6 @@ import type { ResourceKey, TTPolicy } from "../types.js";
 import { siteEvents } from "../siteEvents.js";
 import { showPrompt } from "../dialogs/prompt.js";
 
-/** Whether the DOM has finished loading and elements can be added or modified */
-export let domLoaded = false;
-document.addEventListener("DOMContentLoaded", () => domLoaded = true);
-
 //#region vid time & vol.
 
 /** Returns the video element selector string based on the current domain */
@@ -172,7 +168,7 @@ export function waitVideoElementReady(): Promise<HTMLVideoElement> {
  * @param transform A function to transform the CSS before adding it to the DOM
  */
 export async function addStyle(css: StringGen, ref?: string, transform: (css: string) => string | Promise<string> = (c) => c) {
-  if(!domLoaded)
+  if(!isDomLoaded())
     throw new Error("DOM has not finished loading yet");
   const elem = addGlobalStyle(await transform(await consumeStringGen(css)));
   elem.id = `bytm-style-${ref ?? randomId(6, 36)}`;