feat: onWebpackLoaded hook

spicetify · Jan 22, 2024 · 7ed19b9 · 7ed19b9
1 parent 6c1d372
commit 7ed19b9
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 29 deletions.
diff --git a/jsHelper/expFeatures.js b/jsHelper/expFeatures.js
@@ -126,7 +126,7 @@
 	notice.innerText = "Waiting for Spotify to finish loading...";
 	content.appendChild(notice);
 
-	const addMenu = () =>
+	Spicetify.Hooks.onWebpackLoaded(() =>
 		new Spicetify.Menu.Item(
 			"Experimental features",
 			true,
@@ -152,15 +152,8 @@
 				}
 			},
 			`<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 863 924" width="16" height="16" fill="currentcolor"><g transform="translate(0,924) scale(0.1,-0.1)"><path d="M3725 9160 c-148 -4 -306 -10 -350 -14 -117 -11 -190 -49 -291 -150 -132 -133 -170 -234 -162 -431 7 -163 50 -255 185 -396 l64 -66 -10 -994 c-13 -1268 -15 -1302 -63 -1494 -87 -352 -263 -756 -511 -1172 -111 -186 -705 -1084 -1371 -2073 -537 -797 -585 -882 -607 -1090 -33 -317 39 -586 218 -810 114 -142 229 -235 386 -311 90 -43 116 -51 217 -65 209 -27 723 -33 2725 -33 2278 1 3098 9 3190 32 231 59 482 234 607 423 142 215 195 408 185 674 -9 241 -46 337 -240 634 -53 81 -97 156 -97 167 0 10 -6 19 -13 19 -19 0 -1264 1863 -1621 2424 -166 261 -361 668 -444 928 -42 129 -88 314 -107 428 -20 119 -34 783 -34 1683 l-1 629 80 91 c125 142 170 250 170 408 0 96 -16 162 -61 255 -74 152 -221 264 -371 284 -182 25 -1072 35 -1673 20z m1574 -388 c89 -20 141 -84 141 -172 0 -47 -5 -64 -30 -98 -16 -23 -38 -46 -50 -52 -45 -24 -311 -33 -985 -33 -764 0 -958 8 -1004 44 -42 33 -71 89 -71 138 0 56 34 127 69 145 30 16 151 35 256 40 159 7 1633 -3 1674 -12z m-116 -839 c11 -175 18 -570 27 -1378 9 -824 10 -825 70 -1066 81 -320 193 -597 398 -984 178 -337 326 -569 1065 -1663 186 -277 337 -505 335 -508 -3 -2 -1223 -3 -2712 -2 l-2707 3 82 120 c45 66 290 431 544 810 437 654 626 953 779 1233 229 416 404 893 445 1207 21 158 31 532 31 1175 0 360 3 766 7 902 l6 247 126 4 c69 1 435 4 812 5 l686 2 6 -107z"/></g></svg>`
-		).register();
-
-	if (Spicetify.React) {
-		addMenu();
-	} else {
-		document.addEventListener("webpack-loaded", addMenu);
-	}
-
-	(function waitForRemoteConfigResolver() {
+		).register()
+	)(function waitForRemoteConfigResolver() {
 		// Don't show options if hooks aren't patched/loaded
 		if (!hooksPatched || (!Spicetify.RemoteConfigResolver && !Spicetify.Platform?.RemoteConfiguration)) {
 			setTimeout(waitForRemoteConfigResolver, 500);

diff --git a/jsHelper/homeConfig.js b/jsHelper/homeConfig.js
@@ -163,7 +163,7 @@ SpicetifyHomeConfig = {};
 		}
 	}
 
-	const addMenu = () => {
+	Spicetify.Hooks.onWebpackLoaded(() => {
 		const menu = new Spicetify.Menu.Item("Home config", true, self => {
 			self.isEnabled = !self.isEnabled;
 			if (self.isEnabled) {
@@ -177,15 +177,7 @@ SpicetifyHomeConfig = {};
 			menu.isEnabled = false;
 			menu.deregister();
 		};
-	};
-
-	if (Spicetify.React) {
-		addMenu();
-	} else {
-		document.addEventListener("webpack-loaded", addMenu);
-	}
-
-	(function waitForHistoryAPI() {
+	})(function waitForHistoryAPI() {
 		if (!Spicetify.Platform?.History || !mounted) {
 			setTimeout(waitForHistoryAPI, 100);
 			return;

diff --git a/jsHelper/sidebarConfig.js b/jsHelper/sidebarConfig.js
@@ -169,7 +169,7 @@ color: var(--spice-button-disabled);
 		writeStorage();
 	}
 
-	const addMenu = () => {
+	Spicetify.Hooks.onWebpackLoaded(() => {
 		new Spicetify.Menu.Item(
 			"Sidebar config",
 			true,
@@ -184,13 +184,7 @@ color: var(--spice-button-disabled);
 			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="16px" height="16px" fill="currentcolor"><path d="M44.7,11L36,19.6c0,0-2.6,0-5.2-2.6s-2.6-5.2-2.6-5.2l8.7-8.7c-4.9-1.2-10.8,0.4-14.4,4c-5.4,5.4-0.6,12.3-2,13.7C12.9,28.7,5.1,34.7,4.9,35c-2.3,2.3-2.4,6-0.2,8.2c2.2,2.2,5.9,2.1,8.2-0.2c0.3-0.3,6.7-8.4,14.2-15.9c1.4-1.4,8,3.7,13.6-1.8C44.2,21.7,45.9,15.9,44.7,11z M9.4,41.1c-1.4,0-2.5-1.1-2.5-2.5C6.9,37.1,8,36,9.4,36c1.4,0,2.5,1.1,2.5,2.5C11.9,39.9,10.8,41.1,9.4,41.1z"/></svg>`
 		).register();
 		initialized = true;
-	};
-
-	if (Spicetify.React) {
-		addMenu();
-	} else {
-		document.addEventListener("webpack-loaded", addMenu);
-	}
+	});
 
 	function InitSidebarConfig() {
 		// STICKY container

diff --git a/jsHelper/spicetifyWrapper.js b/jsHelper/spicetifyWrapper.js
@@ -730,7 +730,23 @@ window.Spicetify = {
 		Spicetify.URI.isSameIdentity = URIModules.find(m => typeof m === "function" && m.toString().match(/[\w$]+\.id===[\w$]+\.id/));
 	})();
 
-	document.dispatchEvent(new Event("webpack-loaded"));
+	Spicetify.Hooks.fireWebpackLoaded();
+})();
+
+Spicetify.Hooks = (() => {
+	const webpackLoadedCallbacks = [];
+	let isWebpackLoaded = false;
+	function onWebpackLoaded(callback) {
+		if (isWebpackLoaded) return callback();
+		webpackLoadedCallbacks.push(callback);
+	}
+
+	function fireWebpackLoaded() {
+		isWebpackLoaded = true;
+		for (callback of webpackLoadedCallbacks) callback();
+	}
+
+	return { onWebpackLoaded, fireWebpackLoaded };
 })();
 
 // Wait for Spicetify.Player.origin._state before adding following APIs