@spicemod/creator 0.0.34 → 0.0.36

package/dist/bin.mjs

@@ -2,7 +2,7 @@
 import { Command, Option } from "commander";
 import * as v from "valibot";
 import path, { basename, dirname, extname, join, relative, resolve } from "node:path";
-import { build, context, transform } from "esbuild";
+import { build, context, formatMessages, transform } from "esbuild";
 import fs, { createReadStream, existsSync, lstatSync, mkdirSync, readFileSync, readdirSync, rmSync, statSync, writeFileSync } from "node:fs";
 import { watchConfig } from "c12";
 import { globSync } from "tinyglobby";
@@ -28,6 +28,7 @@ import { lookup } from "node:dns/promises";
 import { mkdir, writeFile as writeFile$1 } from "fs/promises";
 import { dirname as dirname$1, join as join$1 } from "path";
 import { createServer } from "node:http";
+import { createServer as createServer$1 } from "node:net";
 import { WebSocket, WebSocketServer } from "ws";
 
 //#region src/utils/replace.ts
@@ -145,7 +146,7 @@ const injectCSSFilePath = dist("templates/injectCSS.js", import.meta.url);
 //#endregion
 //#region package.json
 var name = "@spicemod/creator";
-var version = "0.0.34";
+var version = "0.0.36";
 
 //#endregion
 //#region src/utils/common.ts
@@ -762,6 +763,59 @@ function formatBuildSummary(files) {
 	}
 }
 
+//#endregion
+//#region src/esbuild/plugins/buildErrorReporter.ts
+function formatErrorForFrontend(errors) {
+	return errors.map((err) => {
+		return {
+			id: err.id,
+			text: err.text,
+			location: err.location ? {
+				...err.location,
+				lineText: err.location.lineText
+			} : null,
+			notes: err.notes,
+			pluginName: err.pluginName,
+			detail: err.detail
+		};
+	});
+}
+async function formatErrorForConsole(errors) {
+	return (await formatMessages(errors, {
+		kind: "error",
+		color: true
+	})).join("\n");
+}
+function buildErrorReporter({ server }) {
+	return {
+		name: "spice_internal__build-error-reporter",
+		setup(build) {
+			build.onEnd(async (result) => {
+				const errors = result.errors;
+				const warnings = result.warnings;
+				if (errors.length === 0) {
+					server?.broadcast({
+						type: "build-success",
+						errors: [],
+						warnings
+					});
+					return;
+				}
+				const formattedErrors = formatErrorForFrontend(errors);
+				logger$2.debug(pc.cyan("[buildErrorReporter] Broadcasting error to WebSocket clients"));
+				server?.broadcast({
+					type: "build-error",
+					errors: formattedErrors,
+					warnings
+				});
+			});
+		}
+	};
+}
+async function getFormattedErrors(errors) {
+	return formatErrorForConsole(errors);
+}
+
 //#endregion
 //#region src/esbuild/plugins/buildLogger.ts
 const buildLogger = ({ cache }) => ({
@@ -776,17 +830,22 @@ const buildLogger = ({ cache }) => ({
 				logger$2.info(pc.dim("Rebuilding..."));
 			} else logger$2.info(pc.dim("Build started..."));
 		});
-		build.onEnd((result) => {
+		build.onEnd(async (result) => {
 			if (result.errors.length > 0) {
-				logger$2.info(pc.red("build failed."));
+				const formattedErrors = await getFormattedErrors(result.errors);
+				logger$2.error(pc.red("Build failed.\n") + formattedErrors);
 				return;
 			}
-			const moduleCount = result.metafile ? Object.keys(result.metafile.inputs).length : 0;
+			let moduleCount = 0;
+			try {
+				if (result.metafile) {
+					result.metafile.outputs;
+					moduleCount = Object.keys(result.metafile.inputs).length;
+					const details = formatBuildSummary(cache.files);
+					logger$2.info(details);
+				}
+			} catch {}
 			logger$2.info(`${CHECK} ${moduleCount} modules transformed.`);
-			if (result.metafile) {
-				const details = formatBuildSummary(cache.files);
-				logger$2.info(details);
-			}
 			logger$2.info(pc.green(`${CHECK} built in ${getTime(buildStartTime)}.`));
 			isFirstBuild = false;
 		});
@@ -797,33 +856,6 @@ function getTime(start) {
 	return ms > 1e3 ? `${(ms / 1e3).toFixed(2)}s` : `${Math.round(ms)}ms`;
 }
 
-//#endregion
-//#region src/esbuild/plugins/buildErrorReporter.ts
-function buildErrorReporter({ server }) {
-	return {
-		name: "spice_internal__build-error-reporter",
-		setup(build) {
-			build.onEnd(async (result) => {
-				const errors = result.errors;
-				const warnings = result.warnings;
-				if (errors.length === 0) {
-					server?.broadcast({
-						type: "build-success",
-						errors: [],
-						warnings
-					});
-					return;
-				}
-				server?.broadcast({
-					type: "build-error",
-					errors,
-					warnings
-				});
-			});
-		}
-	};
-}
-
 //#endregion
 //#region src/esbuild/plugins/clean.ts
 const clean = (cache, logger = createLogger("plugin:clean")) => ({
@@ -1467,7 +1499,8 @@ function createPackageJSON(options) {
 			sc: "spicetify-creator",
 			dev: "spicetify-creator dev",
 			build: "spicetify-creator build",
-			"update-types": "spicetify-creator update-types"
+			"update-types": "spicetify-creator update-types",
+			"clean-spice": "spicetify-creator clean-spicetify --all"
 		},
 		dependencies: {},
 		devDependencies: { "@spicetify/creator": "latest" }
@@ -2020,7 +2053,9 @@ const root = () => `<!DOCTYPE html>
 
 //#endregion
 //#region src/dev/server/index.ts
-const WS_PATH = "/spicetify-creator";
+function getWSPath(port) {
+	return `/spicetify-creator-${port}`;
+}
 async function createHmrServer(config, logger = createLogger("hmrServer")) {
 	const { port = DEFAULT_PORT, serveDir = outDir } = config;
 	let isRunning = false;
@@ -2036,6 +2071,30 @@ async function createHmrServer(config, logger = createLogger("hmrServer")) {
 		".svg": "image/svg+xml",
 		".ico": "image/x-icon"
 	};
+	async function isPortAvailable(port) {
+		return new Promise((resolve) => {
+			const server = createServer$1();
+			server.once("error", () => resolve(false));
+			server.once("listening", () => {
+				server.close(() => resolve(true));
+			});
+			server.listen(port);
+		});
+	}
+	let actualPort = port;
+	const portsToCheck = Array.from({ length: 10 }, (_, i) => port + i);
+	const results = await Promise.all(portsToCheck.map(async (p) => ({
+		port: p,
+		available: await isPortAvailable(p)
+	})));
+	for (const result of results) {
+		if (result.available) {
+			actualPort = result.port;
+			break;
+		}
+		logger.debug(`Port ${result.port} is in use, trying ${result.port + 1}...`);
+	}
+	if (actualPort !== port) logger.info(pc.yellow(`Port ${port} is in use, using port ${actualPort} instead`));
 	const httpServer = createServer((req, res) => {
 		const corsHeaders = {
 			"Access-Control-Allow-Origin": "*",
@@ -2076,7 +2135,7 @@ async function createHmrServer(config, logger = createLogger("hmrServer")) {
 	const clients = /* @__PURE__ */ new Set();
 	httpServer.on("upgrade", (req, socket, head) => {
 		const { url } = req;
-		if (!url?.startsWith(WS_PATH)) {
+		if (!url?.startsWith(getWSPath(actualPort))) {
 			socket.destroy();
 			return;
 		}
@@ -2097,8 +2156,8 @@ async function createHmrServer(config, logger = createLogger("hmrServer")) {
 	}
 	return {
 		start: async () => new Promise((resolve) => {
-			httpServer.listen(port, () => {
-				logger.debug(`${pc.bold("HTTP Server Started at")}: ${pc.cyan(`http://localhost:${port}/`)}`);
+			httpServer.listen(actualPort, () => {
+				logger.debug(`${pc.bold("HTTP Server Started at")}: ${pc.cyan(`http://localhost:${actualPort}/`)}`);
 				isRunning = true;
 				resolve();
 			});
@@ -2120,24 +2179,24 @@ async function createHmrServer(config, logger = createLogger("hmrServer")) {
 		}),
 		broadcast,
 		get port() {
-			return port;
+			return actualPort;
 		},
 		get isRunning() {
 			return isRunning;
 		},
 		get link() {
-			return `http://localhost:${port}`;
+			return `http://localhost:${actualPort}`;
 		},
 		get wsLink() {
-			return `ws://localhost:${port}${WS_PATH}`;
+			return `ws://localhost:${actualPort}${getWSPath(actualPort)}`;
 		}
 	};
 }
 
 //#endregion
 //#region src/utils/hmr.ts
-const injectHMRExtension = async (rootLink, wsLink, outFiles, config) => {
-	const extName = `sc-live-reload-helper.js`;
+const injectHMRExtension = async (rootLink, wsLink, outFiles, config, port) => {
+	const extName = port === 54321 ? `sc-live-reload-helper.js` : `sc-live-reload-helper-${port}.js`;
 	const spiceConfig = await getSpicetifyConfig();
 	const cleanup = () => {
 		logger$2.info(`Removing Live reload extension...`);
@@ -2168,7 +2227,7 @@ const injectHMRExtension = async (rootLink, wsLink, outFiles, config) => {
 				_HOT_RELOAD_LINK: JSON.stringify(wsLink),
 				_JS_PATH: JSON.stringify(`/files/${outFiles.js}`),
 				_CSS_PATH: JSON.stringify(outFiles.css ? `/files/${outFiles.css}` : `/files/app.css`),
-				_REMOVE_CMD: JSON.stringify(`spicetify config extensions sc-live-reload-helper.js- && spicetify apply`),
+				_REMOVE_CMD: JSON.stringify(`spicetify config extensions ${extName}- && spicetify apply`),
 				_CSS_ID: JSON.stringify(config.template === "extension" && config.cssId ? config.cssId : "sc-injected-css")
 			}
 		});
@@ -2186,19 +2245,20 @@ const injectHMRExtension = async (rootLink, wsLink, outFiles, config) => {
 		logger$2.error(pc.red(`${CROSS} Failed to inject HMR helper: ${err instanceof Error ? err.message : String(err)}`));
 	}
 };
-const injectHMRCustomApp = async (rootLink, wsLink, outFiles, config) => {
+const injectHMRCustomApp = async (rootLink, wsLink, outFiles, config, port) => {
 	if (config.template !== "custom-app") throw new Error("only supports custom-app templates");
 	const identifier = getEnName(config.name);
 	const spiceConfig = await getSpicetifyConfig();
-	const customAppId = urlSlugify(identifier);
-	runSpice([
-		"config",
-		"extensions",
-		"sc-live-reload-helper.js-"
-	]);
+	const customAppId = port === 54321 ? urlSlugify(identifier) : `${urlSlugify(identifier)}-${port}`;
+	const extName = port === 54321 ? `sc-live-reload-helper.js` : `sc-live-reload-helper-${port}.js`;
 	const cleanup = () => {
 		logger$2.info(`Removing Live reload custom-app...`);
 		try {
+			runSpice([
+				"config",
+				"extensions",
+				`${extName}-`
+			]);
 			runSpice([
 				"config",
 				"custom_apps",
@@ -2285,8 +2345,8 @@ async function dev$1(options) {
 			});
 			await server.start();
 			const outFiles = getOutFiles(config, true);
-			if (config.template === "custom-app") await injectHMRCustomApp(server.link, server.wsLink, outFiles, config);
-			else await injectHMRExtension(server.link, server.wsLink, outFiles, config);
+			if (config.template === "custom-app") await injectHMRCustomApp(server.link, server.wsLink, outFiles, config, server.port);
+			else await injectHMRExtension(server.link, server.wsLink, outFiles, config, server.port);
 			ctx = await context(getJSDevOptions(config, {
 				...options,
 				outFiles,
@@ -2350,6 +2410,59 @@ const dev = new Command("dev").description("Develop your spicetify project").opt
 	await dev$1(safeParse(CLIOptionsSchema, opts));
 });
 
+//#endregion
+//#region src/commands/clean-spicetify.ts
+function getHmrExtensions(port) {
+	return port === 54321 ? "sc-live-reload-helper.js" : `sc-live-reload-helper-${port}.js`;
+}
+function getHmrCustomAppId(name, port) {
+	const slugified = urlSlugify(getEnName(name));
+	return port === 54321 ? slugified : `${slugified}-${port}`;
+}
+const cleanSpicetify = new Command("clean-spicetify").description("Remove HMR extensions and custom apps added by Spicetify Creator from Spicetify").option("-a, --all", "Clean all possible HMR artifacts").action(async (opts) => {
+	const all = opts.all ?? false;
+	try {
+		const spiceConfig = await getSpicetifyConfig();
+		const extensions = new Set(spiceConfig.AdditionalOptions.extensions);
+		const customApps = new Set(spiceConfig.AdditionalOptions.custom_apps.split("|").filter(Boolean));
+		const toRemove = [];
+		if (all) for (let port = 54321; port <= 54330; port++) {
+			const extName = getHmrExtensions(port);
+			if (extensions.has(extName)) toRemove.push(extName);
+		}
+		else await (await loadConfig(async (config) => {
+			const serverPort = config.serverConfig?.port ?? 54321;
+			const extName = getHmrExtensions(serverPort);
+			if (extensions.has(extName)) toRemove.push(extName);
+			if (config.template === "custom-app") {
+				const customAppId = getHmrCustomAppId(getEnName(config.name), serverPort);
+				if (customApps.has(customAppId)) toRemove.push(customAppId);
+			}
+		})).unwatch();
+		if (toRemove.length === 0) {
+			console.log(pc.blue("No HMR artifacts found to clean."));
+			return;
+		}
+		console.log(pc.yellow(`Removing: ${toRemove.join(", ")}...`));
+		for (const item of toRemove) if (extensions.has(item)) runSpice([
+			"config",
+			"extensions",
+			`${item}-`
+		]);
+		else runSpice([
+			"config",
+			"custom_apps",
+			`${item}-`
+		]);
+		runSpice(["apply"]);
+		console.log(pc.green(`${CHECK} Cleanup successful.`));
+		process.exit(0);
+	} catch (e) {
+		console.error(pc.red(`${CROSS} Cleanup failed: `), e);
+		process.exit(1);
+	}
+});
+
 //#endregion
 //#region src/commands/update-types.ts
 const update_types = new Command("update-types").description("Update Spicetify Types").action(async () => {
@@ -2360,7 +2473,7 @@ const update_types = new Command("update-types").description("Update Spicetify T
 //#region src/bin.ts
 logger$2.debug(`Env: ${JSON.stringify(env, null, 2)}\n`);
 const command = new Command();
-command.version(version).addCommand(create.alias("init")).addCommand(build$1).addCommand(dev).addCommand(update_types);
+command.version(version).addCommand(create.alias("init")).addCommand(build$1).addCommand(dev).addCommand(cleanSpicetify.alias("clean-spice")).addCommand(update_types);
 command.parse();
 
 //#endregion

package/dist/templates/custom-app/shared/tsconfig.json

@@ -1,32 +1,4 @@
 {
-  "compilerOptions": {
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "types": ["@spicetify/creator/client"],
-    "skipLibCheck": true,
-    "jsx": "react-jsx",
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-
-    // Paths
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src"]
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
 }

package/dist/templates/extension/shared/tsconfig.json

@@ -1,32 +1,4 @@
 {
-  "compilerOptions": {
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "types": ["@spicetify/creator/client"],
-    "skipLibCheck": true,
-    "jsx": "react-jsx",
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-
-    // Paths
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src"]
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
 }

package/dist/templates/liveReload.js

@@ -17,6 +17,84 @@
     warning: `⚠️`,
   };
 
+  const ANSI_REGEX = /\x1b\[[0-9;]*m/g;
+
+  function stripAnsi(str) {
+    if (typeof str !== "string") return str;
+    return str.replace(ANSI_REGEX, "");
+  }
+
+  function parseAnsiColors(str) {
+    if (typeof str !== "string") return str;
+    
+    const ansiMap = {
+      "1": "font-weight: bold",
+      "3": "font-style: italic",
+      "4": "text-decoration: underline",
+      "30": "color: #0",
+      "31": "color: #e91429",
+      "32": "color: #1ed760",
+      "33": "color: #f59b23",
+      "34": "color: #3b82f6",
+      "35": "color: #a855f7",
+      "36": "color: #06b6d4",
+      "37": "color: #fff",
+      "90": "color: #6b7280",
+      "91": "color: #f87171",
+      "92": "color: #4ade80",
+      "93": "color: #facc15",
+      "94": "color: #60a5fa",
+      "95": "color: #c084fc",
+      "96": "color: #22d3ee",
+      "97": "color: #f3f4f6",
+    };
+
+    let result = "";
+    let currentStyle = "";
+    let lastIndex = 0;
+
+    const regex = /\x1b\[([0-9;]*)m/g;
+    let match;
+    
+    while ((match = regex.exec(str)) !== null) {
+      result += str.slice(lastIndex, match.index);
+      const code = match[1];
+      
+      if (code === "0" || code === "") {
+        if (currentStyle) {
+          result += `</span>`;
+          currentStyle = "";
+        }
+      } else {
+        const codes = code.split(";").map(c => parseInt(c, 10));
+        const styles = [];
+        for (const c of codes) {
+          if (c >= 30 && c <= 37 || c >= 90 && c <= 97) {
+            const style = ansiMap[String(c)];
+            if (style) styles.push(style);
+          } else if (c === 1) {
+            styles.push("font-weight: bold");
+          } else if (c === 3) {
+            styles.push("font-style: italic");
+          } else if (c === 4) {
+            styles.push("text-decoration: underline");
+          }
+        }
+        if (styles.length > 0) {
+          if (currentStyle) result += `</span>`;
+          currentStyle = styles.join("; ");
+          result += `<span style="${currentStyle}">`;
+        }
+      }
+      lastIndex = match.index + match[0].length;
+    }
+    
+    result += str.slice(lastIndex);
+    if (currentStyle) result += `</span>`;
+    
+    return result || stripAnsi(str);
+  }
+
   class SpicetifyDevTools {
     constructor() {
       this.state = {
@@ -179,7 +257,8 @@
       const fragment = document.createDocumentFragment();
 
       errors.forEach((err, index) => {
-        const msg = err.text || err.message || String(err);
+        const rawMsg = err.text || err.message || String(err);
+        const msg = parseAnsiColors(rawMsg);
         const item = document.createElement("div");
         item.className = "sc-err-item";
 

package/dist/templates/theme/shared/tsconfig.json

@@ -1,32 +1,4 @@
 {
-  "compilerOptions": {
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "types": ["@spicetify/creator/client"],
-    "skipLibCheck": true,
-    "jsx": "react-jsx",
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-
-    // Paths
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src"]
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spicemod/creator",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "description": "Easily make Spicetify extensions and themes",
   "keywords": [
     "cli",
@@ -75,10 +75,10 @@
     "@types/ws": "^8.18.1",
     "jiti": "^2.6.1",
     "oxfmt": "^0.28.0",
-    "oxlint": "^1.56.0",
+    "oxlint": "^1.57.0",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.2"
   },
   "packageManager": "bun@1.3.4"
 }

package/templates/custom-app/shared/tsconfig.json

@@ -1,32 +1,4 @@
 {
-  "compilerOptions": {
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "types": ["@spicetify/creator/client"],
-    "skipLibCheck": true,
-    "jsx": "react-jsx",
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-
-    // Paths
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src"]
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
 }

package/templates/extension/shared/tsconfig.json

@@ -1,32 +1,4 @@
 {
-  "compilerOptions": {
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "types": ["@spicetify/creator/client"],
-    "skipLibCheck": true,
-    "jsx": "react-jsx",
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-
-    // Paths
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src"]
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
 }

package/templates/liveReload.js

@@ -17,6 +17,84 @@
     warning: `⚠️`,
   };
 
+  const ANSI_REGEX = /\x1b\[[0-9;]*m/g;
+
+  function stripAnsi(str) {
+    if (typeof str !== "string") return str;
+    return str.replace(ANSI_REGEX, "");
+  }
+
+  function parseAnsiColors(str) {
+    if (typeof str !== "string") return str;
+    
+    const ansiMap = {
+      "1": "font-weight: bold",
+      "3": "font-style: italic",
+      "4": "text-decoration: underline",
+      "30": "color: #0",
+      "31": "color: #e91429",
+      "32": "color: #1ed760",
+      "33": "color: #f59b23",
+      "34": "color: #3b82f6",
+      "35": "color: #a855f7",
+      "36": "color: #06b6d4",
+      "37": "color: #fff",
+      "90": "color: #6b7280",
+      "91": "color: #f87171",
+      "92": "color: #4ade80",
+      "93": "color: #facc15",
+      "94": "color: #60a5fa",
+      "95": "color: #c084fc",
+      "96": "color: #22d3ee",
+      "97": "color: #f3f4f6",
+    };
+
+    let result = "";
+    let currentStyle = "";
+    let lastIndex = 0;
+
+    const regex = /\x1b\[([0-9;]*)m/g;
+    let match;
+    
+    while ((match = regex.exec(str)) !== null) {
+      result += str.slice(lastIndex, match.index);
+      const code = match[1];
+      
+      if (code === "0" || code === "") {
+        if (currentStyle) {
+          result += `</span>`;
+          currentStyle = "";
+        }
+      } else {
+        const codes = code.split(";").map(c => parseInt(c, 10));
+        const styles = [];
+        for (const c of codes) {
+          if (c >= 30 && c <= 37 || c >= 90 && c <= 97) {
+            const style = ansiMap[String(c)];
+            if (style) styles.push(style);
+          } else if (c === 1) {
+            styles.push("font-weight: bold");
+          } else if (c === 3) {
+            styles.push("font-style: italic");
+          } else if (c === 4) {
+            styles.push("text-decoration: underline");
+          }
+        }
+        if (styles.length > 0) {
+          if (currentStyle) result += `</span>`;
+          currentStyle = styles.join("; ");
+          result += `<span style="${currentStyle}">`;
+        }
+      }
+      lastIndex = match.index + match[0].length;
+    }
+    
+    result += str.slice(lastIndex);
+    if (currentStyle) result += `</span>`;
+    
+    return result || stripAnsi(str);
+  }
+
   class SpicetifyDevTools {
     constructor() {
       this.state = {
@@ -179,7 +257,8 @@
       const fragment = document.createDocumentFragment();
 
       errors.forEach((err, index) => {
-        const msg = err.text || err.message || String(err);
+        const rawMsg = err.text || err.message || String(err);
+        const msg = parseAnsiColors(rawMsg);
         const item = document.createElement("div");
         item.className = "sc-err-item";
 

package/templates/theme/shared/tsconfig.json

@@ -1,32 +1,4 @@
 {
-  "compilerOptions": {
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "types": ["@spicetify/creator/client"],
-    "skipLibCheck": true,
-    "jsx": "react-jsx",
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-
-    // Paths
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src"]
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
 }