feat: insert svg spritesheet into page

assets/resources.json

@@ -45,6 +45,7 @@
     "icon-speed": "icons/speed.svg",
     "icon-spinner": "icons/spinner.svg",
     "icon-upload": "icons/upload.svg",
+    "icon-spritesheet": "icons/spritesheet.svg",
     "img-close": "images/close.png",
     "img-discord": "images/external/discord.png",
     "img-github": "images/external/github.png",

changelog.md

@@ -1,9 +1,9 @@
 <!-- I messed up with the changelog parsing so this first split marker will just have to be here forever now -->
 <div class="split"></div>
 
-<!-- #region 2.2.1 -->
-## 2.2.1
-- **Changes:**
+<!-- #region 2.3.0 -->
+## 2.3.0 - TODO:
+<!-- - **Changes:**
   - The above-queue-button container's sticky positioning can now be turned off with a new advanced feature toggle in the config menu
   - Made finding the preferred locale based on the browser's language settings much more reliable
   - Heavily reduced amount of `@resource` directives to improve installation and updating time
@@ -25,7 +25,7 @@
       - From `faster` to `fastest`
       - From `slower` to `slowest`
 
-</details>
+</details> -->
 
 <div class="pr-link-cont">
   <a href="https://github.com/Sv443/BetterYTM/pull/121" rel="noopener noreferrer">See pull request for more info</a>

src/index.ts

@@ -1,4 +1,4 @@
-import { compress, decompress, pauseFor, type Stringifiable } from "@sv443-network/userutils";
+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 { clearConfig, fixCfgKeys, getFeatures, initConfig, setFeatures } from "./config.js";
 import { buildNumber, compressionFormat, defaultLogLevel, mode, scriptInfo } from "./constants.js";
@@ -154,6 +154,7 @@ async function onDomLoad() {
   try {
     initGlobalCss();
     initObservers();
+    initSvgSpritesheet();
 
     Promise.allSettled([
       injectCssBundle(),
@@ -371,6 +372,17 @@ async function initFonts() {
   addStyle(css, "fonts");
 }
 
+//#region svg spritesheet
+
+/** Initializes the SVG spritesheet */
+async function initSvgSpritesheet() {
+  const svgUrl = await getResourceUrl("icon-spritesheet");
+  const div = document.createElement("div");
+  div.style.display = "none";
+  setInnerHtmlUnsafe(div, await (await fetchAdvanced(svgUrl)).text());
+  document.body.appendChild(div);
+}
+
 //#region dev menu cmds
 
 /** Registers dev commands using `GM.registerMenuCommand` */

src/tools/post-build.ts

@@ -507,25 +507,19 @@ function getFileHashSha256(path: string): Promise<string> {
 /** Compiles all `icon-*` assets into a single SVG spritesheet file and writes it to `assets/icons/spritesheet.svg` */
 async function createSvgSpritesheet(buildNbr: string) {
   try {
-    const sprites: string[] = [],
-      promises: Promise<void>[] = [];
+    const sprites: string[] = [];
 
     for(const [name, val] of Object.entries(resourcesJson.resources)) {
       if(!/^icon-/.test(name))
         continue;
 
-      promises.push(new Promise(async (res) => {
-        const iconPath = resolveResourcePath(typeof val === "string" ? val : val.path);
-        const iconSvg = String(await readFile(iconPath)).replace(/\n/g, "");
-        const viewBox = iconSvg.match(/viewBox="([^"]+)"/)?.[1] ?? "0 0 24 24";
+      const iconPath = resolveResourcePath(typeof val === "string" ? val : val.path);
+      const iconSvg = String(await readFile(iconPath)).replace(/\n/g, "");
+      const viewBox = iconSvg.match(/viewBox="([^"]+)"/)?.[1] ?? "0 0 24 24";
 
-        sprites.push(`<symbol id="bytm-svg-${name}" viewBox="${viewBox}">\n    ${iconSvg}\n  </symbol>`);
-        res();
-      }));
+      sprites.push(`<symbol id="bytm-svg-${name}" viewBox="${viewBox}">\n    ${iconSvg}\n  </symbol>`);
     }
 
-    await Promise.allSettled(promises);
-
     await writeFile(resolveResourcePath("icons/spritesheet.svg"), `\
 <svg xmlns="http://www.w3.org/2000/svg" id="bytm-svg-icon-container" data-build="${buildNbr}" style="display: none;" inert="true">
   ${sprites.join("\n  ")}