@spicemod/creator 0.0.23 → 0.0.24

package/dist/bin.mjs

@@ -13,6 +13,8 @@ import * as p from "@clack/prompts";
 import { cancel, log, spinner } from "@clack/prompts";
 import pc from "picocolors";
 import "dotenv/config";
+import { readFile, writeFile } from "node:fs/promises";
+import { parse } from "ini";
 import { gzipSync } from "node:zlib";
 import postcssMinify from "@csstools/postcss-minify";
 import autoprefixer from "autoprefixer";
@@ -20,13 +22,11 @@ import { postcssModules, sassPlugin } from "esbuild-sass-plugin";
 import postcss from "postcss";
 import postcssImport from "postcss-import";
 import postcssPresetEnv from "postcss-preset-env";
-import { readFile, writeFile } from "node:fs/promises";
-import { parse } from "ini";
 import { createHash } from "node:crypto";
 import { chdir } from "node:process";
 import { lookup } from "node:dns/promises";
 import { mkdir, writeFile as writeFile$1 } from "fs/promises";
-import { dirname as dirname$1 } from "path";
+import { dirname as dirname$1, join as join$1 } from "path";
 import { createServer } from "node:http";
 import { WebSocket, WebSocketServer } from "ws";
 
@@ -138,12 +138,12 @@ const frameworks = frameworkTypes.map((name) => ({
 const frameworkOptions = toOptions(frameworks);
 const liveReloadFilePath = dist(`templates/liveReload.js`, import.meta.url);
 const templateWrapperFilePath = dist("templates/wrapper.js", import.meta.url);
-const templateCustomAppWrapperFilePath = dist("templates/customAppWrapper.js", import.meta.url);
+const customAppEntryFilePath = dist("templates/customAppEntry.js", import.meta.url);
 
 //#endregion
 //#region package.json
 var name = "@spicemod/creator";
-var version = "0.0.23";
+var version = "0.0.24";
 
 //#endregion
 //#region src/utils/common.ts
@@ -248,7 +248,6 @@ const DEV_MODE_VAR_NAME = `__SPICE_CREATOR_DEV__`;
 const CHECK = pc.bold(pc.green("✔"));
 const CROSS = pc.bold(pc.red("✖"));
 const WARN = pc.bold(pc.yellow("⚠"));
-const SKIP_SPICETIFY = process.env.SPICETIFY_SKIP === "true" || process.env.CI === "true";
 const VALID_PROJECT_FILES = new Set([
 	".DS_Store",
 	".git",
@@ -366,7 +365,7 @@ const ThemeTemplateSchema = v.object({
 	entry: AssetEntrySchema
 });
 const CustomAppTemplateSchema = v.object({
-	name: v.union([v.string(), LocaleNameSchema]),
+	name: v.union([v.string(), LocaleNameSchema], "Name must be a string or a translations object containing the required 'en' locale."),
 	icon: v.object({
 		default: v.string(),
 		active: v.optional(v.string())
@@ -407,13 +406,13 @@ const OptionsSchema$1 = v.intersect([
 
 //#endregion
 //#region src/env.ts
-const isInternal = process.env.SPICE_INTERNAL === "true";
 const isDev = process.env.IS_DEV === "true";
 const spicetifyBin = process.env.SPICETIFY_BIN || process.env.SPICE_BIN || "spicetify";
+const skipSpicetify = process.env.SPICETIFY_SKIP === "true" || process.env.CI === "true";
 const env = {
-	isInternal,
 	isDev,
-	spicetifyBin
+	spicetifyBin,
+	skipSpicetify
 };
 
 //#endregion
@@ -472,6 +471,10 @@ var Logger = class {
 	}
 	clear() {
 		if (!process.stdout.isTTY || process.env.CI) return;
+		if (this.isDev) {
+			this.log("clear skipped");
+			return;
+		}
 		readline.cursorTo(process.stdout, 0, 0);
 		readline.clearScreenDown(process.stdout);
 	}
@@ -480,17 +483,54 @@ const createLogger = (prefix = "", mode) => new Logger(prefix, mode);
 const logger$2 = createLogger("common");
 
 //#endregion
-//#region src/utils/schema.ts
-function safeParse(schema, data, type = "CLI") {
-	const result = v.safeParse(schema, data);
+//#region src/utils/spicetify/schema.ts
+const SpicetifyConfigSchema = v.object({
+	Setting: v.object({
+		spotify_path: v.string(),
+		prefs_path: v.string(),
+		inject_theme_js: v.string(),
+		inject_css: v.string(),
+		current_theme: v.string(),
+		color_scheme: v.string(),
+		always_enable_devtools: v.string()
+	}),
+	AdditionalOptions: v.object({
+		experimental_features: v.string(),
+		extensions: v.pipe(v.string(), v.transform((input) => input.split("|").filter(Boolean))),
+		custom_apps: v.string()
+	}),
+	Backup: v.object({
+		version: v.string(),
+		with: v.string()
+	})
+});
+
+//#endregion
+//#region src/utils/spicetify/index.ts
+function runSpice(args) {
+	validateSpicetify(env.spicetifyBin);
+	return spawnSync(env.spicetifyBin, args, { encoding: "utf-8" });
+}
+const getCustomAppsDir = () => join(getSpiceDataPath(), "CustomApps");
+const getExtensionDir = () => join(getSpiceDataPath(), "Extensions");
+const getThemesDir = () => join(getSpiceDataPath(), "Themes");
+async function getSpicetifyConfig() {
+	const { stdout, stderr, error } = runSpice(["path", "-c"]);
+	if (error || stderr) throw new Error(`Failed to locate Spicetify config: ${stderr || error?.message}`);
+	const rawConfig = parse(await readFile(stdout.trim(), "utf-8"));
+	const result = v.safeParse(SpicetifyConfigSchema, rawConfig);
 	if (result.success) return result.output;
-	logger$2.error(`\n${pc.bgRed(pc.black(" ERROR "))} ${pc.red(`Invalid ${type} options:`)}`);
-	result.issues.forEach((issue) => {
-		const path = issue.path?.map((p) => p.key).join(".") || "input";
-		logger$2.error(`${pc.dim(" └─")} ${pc.yellow(path)}: ${pc.white(issue.message)}`);
-	});
-	logger$2.error(`\n${pc.dim("Check your command flags and try again.")}\n`);
-	process.exit(1);
+	else throw new Error("Spicetify Config Validation Failed:", v.flatten(result.issues).nested);
+}
+function getSpiceDataPath() {
+	const { stdout, stderr, error } = runSpice(["path", "userdata"]);
+	if (error || stderr) throw new Error(`Failed to locate Spicetify config: ${stderr || error?.message}`);
+	return stdout.trim();
+}
+function validateSpicetify(bin) {
+	const result = spawnSync(bin, ["--version"], { encoding: "utf-8" });
+	if (result.error) throw result.error;
+	if (result.status !== 0) throw new Error(`Invalid spicetify binary "${bin}": ${result.stderr || "unknown error"}`);
 }
 
 //#endregion
@@ -526,6 +566,7 @@ const ENTRY_MAP = {
 //#endregion
 //#region src/config/index.ts
 const logger$1 = createLogger("config");
+let previousConfig;
 const CONFIG_DEFAULTS = {
 	outDir: "./dist",
 	linter: "biome",
@@ -536,29 +577,38 @@ const CONFIG_DEFAULTS = {
 async function loadConfig(cb) {
 	let cleanup;
 	const runCb = async (config, isUpdate) => {
+		if (isUpdate && previousConfig) await cleanupSpicetifyConfig();
 		if (typeof cleanup === "function") await cleanup();
 		cleanup = await cb(config, isUpdate);
+		previousConfig = config;
 	};
 	const watcher = await watchConfig({
 		name: "spice",
 		defaults: CONFIG_DEFAULTS,
-		configFileRequired: false,
+		configFileRequired: true,
 		packageJson: true,
 		async onUpdate({ newConfig }) {
-			await runCb(await getResolvedConfig(newConfig.config), true);
+			try {
+				await runCb(await getResolvedConfig(newConfig.config, { exitOnError: false }), true);
+			} catch {
+				logger$1.error(pc.red("Config validation failed, keeping previous configuration"));
+			}
 		}
 	});
 	await runCb(await getResolvedConfig(watcher.config), false);
 	return watcher;
 }
-async function getResolvedConfig(config) {
-	try {
-		return safeParse(OptionsSchema$1, await resolveContext(config), "Config");
-	} catch (e) {
-		const message = e instanceof Error ? e.message : String(e);
-		logger$1.error(pc.red(`Failed to load configuration: ${message}`));
-		process.exit(1);
-	}
+async function getResolvedConfig(config, { exitOnError = true } = {}) {
+	const resolvedContext = await resolveContext(config);
+	const result = v.safeParse(OptionsSchema$1, resolvedContext);
+	if (result.success) return result.output;
+	logger$1.error(pc.red("Failed to load configuration:"));
+	result.issues.forEach((issue) => {
+		const path = issue.path?.map((p) => p.key).join(".") || "input";
+		logger$1.error(`${pc.dim(" └─")} ${pc.yellow(path)}: ${pc.white(issue.message)}`);
+	});
+	if (exitOnError) process.exit(1);
+	throw new Error("Invalid configuration");
 }
 async function resolveContext(config) {
 	const cwd = process.cwd();
@@ -633,6 +683,28 @@ function resolveActiveIcon(cwd) {
 	return "";
 }
 const getEnName = (configName) => typeof configName === "string" ? configName : configName.en;
+function getSpiceIdentifier(config) {
+	if (config.template === "extension") return `${urlSlugify(config.name)}.js`;
+	if (config.template === "custom-app") return urlSlugify(getEnName(config.name));
+	return urlSlugify(getEnName(config.name));
+}
+function getSpiceVarName(template) {
+	if (template === "extension") return "extensions";
+	if (template === "custom-app") return "custom_apps";
+	return "current_theme";
+}
+async function cleanupSpicetifyConfig() {
+	if (!previousConfig) return;
+	const prevIdentifier = getSpiceIdentifier(previousConfig);
+	const varName = getSpiceVarName(previousConfig.template);
+	logger$1.debug(`Cleaning up previous spicetify config: ${varName} ${prevIdentifier}-`);
+	runSpice([
+		"config",
+		varName,
+		`${prevIdentifier}-`
+	]);
+	runSpice(["apply"]);
+}
 
 //#endregion
 //#region src/esbuild/format.ts
@@ -773,57 +845,6 @@ const externalGlobal = (externals, namespace = "spicetify-global") => {
 	};
 };
 
-//#endregion
-//#region src/utils/spicetify/schema.ts
-const SpicetifyConfigSchema = v.object({
-	Setting: v.object({
-		spotify_path: v.string(),
-		prefs_path: v.string(),
-		inject_theme_js: v.string(),
-		inject_css: v.string(),
-		current_theme: v.string(),
-		color_scheme: v.string(),
-		always_enable_devtools: v.string()
-	}),
-	AdditionalOptions: v.object({
-		experimental_features: v.string(),
-		extensions: v.pipe(v.string(), v.transform((input) => input.split("|").filter(Boolean))),
-		custom_apps: v.string()
-	}),
-	Backup: v.object({
-		version: v.string(),
-		with: v.string()
-	})
-});
-
-//#endregion
-//#region src/utils/spicetify/index.ts
-function runSpice(args) {
-	validateSpicetify(env.spicetifyBin);
-	return spawnSync(env.spicetifyBin, args, { encoding: "utf-8" });
-}
-const getCustomAppsDir = () => join(getSpiceDataPath(), "CustomApps");
-const getExtensionDir = () => join(getSpiceDataPath(), "Extensions");
-const getThemesDir = () => join(getSpiceDataPath(), "Themes");
-async function getSpicetifyConfig() {
-	const { stdout, stderr, error } = runSpice(["path", "-c"]);
-	if (error || stderr) throw new Error(`Failed to locate Spicetify config: ${stderr || error?.message}`);
-	const rawConfig = parse(await readFile(stdout.trim(), "utf-8"));
-	const result = v.safeParse(SpicetifyConfigSchema, rawConfig);
-	if (result.success) return result.output;
-	else throw new Error("Spicetify Config Validation Failed:", v.flatten(result.issues).nested);
-}
-function getSpiceDataPath() {
-	const { stdout, stderr, error } = runSpice(["path", "userdata"]);
-	if (error || stderr) throw new Error(`Failed to locate Spicetify config: ${stderr || error?.message}`);
-	return stdout.trim();
-}
-function validateSpicetify(bin) {
-	const result = spawnSync(bin, ["--version"], { encoding: "utf-8" });
-	if (result.error) throw result.error;
-	if (result.status !== 0) throw new Error(`Invalid spicetify binary "${bin}": ${result.stderr || "unknown error"}`);
-}
-
 //#endregion
 //#region src/esbuild/plugins/spicetifyHandlers.ts
 const spicetifyHandler = ({ config, options, cache, logger = createLogger("plugin:spicetify-handler") }) => ({
@@ -834,7 +855,7 @@ const spicetifyHandler = ({ config, options, cache, logger = createLogger("plugi
 		const isExtension = config.template === "extension";
 		const isCustomApp = config.template === "custom-app";
 		const identifier = isExtension ? `${urlSlugify(config.name)}.js` : urlSlugify(getEnName(config.name));
-		if (SKIP_SPICETIFY) {
+		if (env.skipSpicetify) {
 			logger.info(pc.yellow("skipping spicetify operations"));
 			build.onEnd(async (result) => {
 				if (result.errors.length > 0) return;
@@ -964,14 +985,7 @@ function wrapWithLoader({ config, cache, outFiles, server, dev = false, logger =
 								format: "iife",
 								globalName,
 								stdin: {
-									contents: `
-import App from "virtual:app";
-import React from "react";
-
-export default function render() {
-  return <App />;
-}
-`,
+									contents: readFileSync(customAppEntryFilePath),
 									loader: "tsx",
 									sourcefile: "entry.tsx"
 								},
@@ -994,23 +1008,35 @@ export default function render() {
 							})).outputFiles?.[0];
 							if (!final) return;
 							let combinedCode = `${final.text}${dev ? `export default () => ${globalName}.default();` : `var render = () => ${globalName}.default();`}\n`;
-							cache.files.set(renamedPath, {
-								contents: Buffer.from(combinedCode),
-								name: targetName
-							});
-							cache.changed.add(renamedPath);
-							cache.hasChanges = true;
-							filesChanged.push(renamedPath);
+							const nextBuffer = Buffer.from(combinedCode);
+							const existingFile = cache.files.get(renamedPath);
+							const nextHash = final.hash;
+							if (!existingFile || existingFile.hash !== nextHash || config.template === "custom-app") {
+								cache.files.set(renamedPath, {
+									contents: nextBuffer,
+									name: targetName,
+									hash: final.hash
+								});
+								cache.changed.add(renamedPath);
+								cache.hasChanges = true;
+								filesChanged.push(renamedPath);
+							}
 							return;
 						}
 						if (!isJs) {
-							cache.files.set(renamedPath, {
-								name: targetName,
-								contents: file.contents
-							});
-							cache.changed.add(renamedPath);
-							cache.hasChanges = true;
-							filesChanged.push(renamedPath);
+							const nextBuffer = Buffer.from(file.contents);
+							const existingFile = cache.files.get(renamedPath);
+							const nextHash = file.hash;
+							if (!existingFile || existingFile.hash !== nextHash || config.template === "custom-app") {
+								cache.files.set(renamedPath, {
+									name: targetName,
+									contents: nextBuffer,
+									hash: file.hash
+								});
+								cache.changed.add(renamedPath);
+								cache.hasChanges = true;
+								filesChanged.push(renamedPath);
+							}
 							return;
 						}
 						const { code: transformedTemp } = await transform(readFileSync(templateWrapperFilePath, "utf-8"), {
@@ -1032,13 +1058,18 @@ export default function render() {
 							"\"{{INJECTED_JS_HERE}}\"": file.text
 						});
 						const nextBuffer = Buffer.from(template);
-						cache.files.set(renamedPath, {
-							name: targetName,
-							contents: nextBuffer
-						});
-						cache.changed.add(renamedPath);
-						cache.hasChanges = true;
-						filesChanged.push(renamedPath);
+						const existingFile = cache.files.get(renamedPath);
+						const nextHash = file.hash;
+						if (!existingFile || existingFile.hash !== nextHash || config.template === "custom-app") {
+							cache.files.set(renamedPath, {
+								name: targetName,
+								contents: nextBuffer,
+								hash: file.hash
+							});
+							cache.changed.add(renamedPath);
+							cache.hasChanges = true;
+							filesChanged.push(renamedPath);
+						}
 					});
 					await Promise.all(transformPromises);
 					if (type === "custom-app") {
@@ -1055,9 +1086,11 @@ export default function render() {
 						const currentHash = createHash("md5").update(manifestString).digest("hex");
 						if (currentHash !== previousManifestHash) {
 							previousManifestHash = currentHash;
+							const manifestBuffer = Buffer.from(manifestString);
 							cache.files.set(manifestPath, {
-								contents: Buffer.from(manifestString),
-								name: "manifest.json"
+								contents: manifestBuffer,
+								name: "manifest.json",
+								hash: currentHash
 							});
 							cache.changed.add(manifestPath);
 							cache.hasChanges = true;
@@ -1107,10 +1140,11 @@ const defaultBuildOptions = {
 };
 const getCommonPlugins = (opts) => {
 	const { template, minify, cache, buildOptions, outFiles, server, dev } = opts;
+	const inline = !dev && template === "extension";
 	return [
 		...plugins.css({
 			minify,
-			inline: !dev && template === "extension"
+			inline
 		}),
 		plugins.externalGlobal({
 			react: "Spicetify.React",
@@ -1139,7 +1173,7 @@ function getEntryPoints(config) {
 	if (config.template === "custom-app") return [config.entry.app, config.entry.extension];
 	return [config.entry];
 }
-function getOutFiles(config) {
+function getOutFiles(config, isDev = false) {
 	switch (config.template) {
 		case "custom-app": return {
 			js: "index.js",
@@ -1147,7 +1181,10 @@ function getOutFiles(config) {
 			jsExtension: "extension.js",
 			manifest: "manifest.json"
 		};
-		case "extension": return { js: `${urlSlugify(getEnName(config.name))}.js` };
+		case "extension": return {
+			js: `${urlSlugify(getEnName(config.name))}.js`,
+			css: isDev ? "app.css" : void 0
+		};
 		case "theme": return {
 			js: "theme.js",
 			css: "user.css"
@@ -1233,6 +1270,20 @@ function getJSBuildOptions(config, options) {
 	};
 }
 
+//#endregion
+//#region src/utils/schema.ts
+function safeParse(schema, data, type = "CLI") {
+	const result = v.safeParse(schema, data);
+	if (result.success) return result.output;
+	logger$2.error(`\n${pc.bgRed(pc.black(" ERROR "))} ${pc.red(`Invalid ${type} options:`)}`);
+	result.issues.forEach((issue) => {
+		const path = issue.path?.map((p) => p.key).join(".") || "input";
+		logger$2.error(`${pc.dim(" └─")} ${pc.yellow(path)}: ${pc.white(issue.message)}`);
+	});
+	logger$2.error(`\n${pc.dim("Check your command flags and try again.")}\n`);
+	process.exit(1);
+}
+
 //#endregion
 //#region src/commands/build.ts
 const CLIOptionsSchema$1 = v.strictObject({
@@ -1304,7 +1355,7 @@ function createPackageJSON(options) {
 			"update-types": "spicetify-creator update-types"
 		},
 		dependencies: {},
-		devDependencies: { "@spicetify/creator": env.isInternal ? "link:@spicetify/creator" : "latest" }
+		devDependencies: { "@spicetify/creator": "latest" }
 	};
 	if (options.language === "ts") result.peerDependencies = {
 		...result.peerDependencies,
@@ -1598,22 +1649,23 @@ const downloads = { spicetify: {
 	to: "./src/types/spicetify.d.ts",
 	action: (content) => content.replace("const React: any;", "const React: typeof import(\"react\");").replace("const ReactDOM: any;", "const ReactDOM: typeof import(\"react-dom/client\");").replace("const ReactDOMServer: any;", "const ReactDOMServer: typeof import(\"react-dom/server\");")
 } };
-async function updateTypes(isUpdating = true) {
+async function updateTypes(isUpdating = true, cwd = process.cwd()) {
 	const s = spinner();
 	s.start(`${isUpdating ? "Updating" : "Creating"} Types...`);
-	await Promise.all(Object.entries(downloads).map(([name, download]) => downloadFile(name, download, isUpdating)));
+	await Promise.all(Object.entries(downloads).map(([name, download]) => downloadFile(name, download, isUpdating, cwd)));
 	s.stop(`${isUpdating ? "Updated" : "Created"} Types!`);
 }
-async function downloadFile(name, { from, to, action }, isUpdating) {
+async function downloadFile(name, { from, to, action }, isUpdating, cwd) {
 	try {
 		const res = await fetch(from);
 		if (!res.ok) throw new Error(`HTTP Error: ${res.status} ${res.statusText}`);
 		let text = await res.text();
 		if (action) text = await action(text);
-		await mkdir(dirname$1(to), { recursive: true });
-		await writeFile$1(to, text, "utf8");
+		const fullPath = join$1(cwd, to);
+		await mkdir(dirname$1(fullPath), { recursive: true });
+		await writeFile$1(fullPath, text, "utf8");
 		const actionLog = isUpdating ? "updated" : "created";
-		logger$2.log(`${name}.d.ts ${actionLog} (${from} -> ${to})`);
+		logger$2.log(`${name}.d.ts ${actionLog} (${from} -> ${fullPath})`);
 	} catch (e) {
 		log.error(`${name} failed`);
 		console.error(e);
@@ -1737,7 +1789,7 @@ async function create$1(cwd, options) {
 	try {
 		mkdirp(cwd);
 		setupTemplateFiles(options, cwd);
-		await updateTypes(false);
+		await updateTypes(false, cwd);
 		const pkgJSON = createPackageJSON(options);
 		writePackageJSON(pkgJSON, cwd);
 		chdir(cwd);
@@ -1918,7 +1970,12 @@ async function createHmrServer(config, logger = createLogger("hmrServer")) {
 				resolve();
 			});
 		}),
-		stop: () => new Promise((resolve, reject) => {
+		stop: async () => new Promise((resolve, reject) => {
+			if (!isRunning) return resolve();
+			for (const client of clients) client.terminate();
+			clients.clear();
+			wss.close();
+			if ("closeAllConnections" in httpServer) httpServer.closeAllConnections();
 			httpServer.close((err) => {
 				if (err) return reject(err);
 				isRunning = false;
@@ -2080,7 +2137,7 @@ const render = () => {
 		writeFileSync(extensionJsPath, extensionCode);
 		const manifestPath = resolve(destDir, "manifest.json");
 		const manifest = {
-			name: identifier,
+			name: config.name,
 			subfiles: [],
 			subfiles_extension: [outFiles.jsExtension ?? "extension.js"],
 			icon: config.icon.default,
@@ -2110,7 +2167,7 @@ async function dev$1(options) {
 	logger$2.greeting(pc.green("Starting development environment"));
 	let ctx;
 	let server = void 0;
-	loadConfig(async (config, isNewUpdate) => {
+	await loadConfig(async (config, isNewUpdate) => {
 		if (isNewUpdate) {
 			logger$2.clear();
 			logger$2.info(pc.green("Config updated, reloading..."));
@@ -2122,7 +2179,7 @@ async function dev$1(options) {
 				port: options.port ?? config.serverConfig.port
 			});
 			await server.start();
-			const outFiles = getOutFiles(config);
+			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);
 			ctx = await context(getJSDevOptions(config, {
@@ -2136,13 +2193,9 @@ async function dev$1(options) {
 			logger$2.error("Failed to start dev server: ", err);
 		}
 		return async () => {
-			try {
-				await ctx?.dispose();
-				ctx = void 0;
-				await server?.stop();
-			} finally {
-				process.exit();
-			}
+			await ctx?.dispose();
+			ctx = void 0;
+			await server?.stop();
 		};
 	});
 }
@@ -2209,7 +2262,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.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(update_types);
 command.parse();
 
 //#endregion

package/dist/index.d.mts

@@ -266,7 +266,7 @@ declare const FileOptionsSchema: v.IntersectSchema<[Omit<v.ObjectSchema<{
 }, Omit<v.ObjectSchema<{
   readonly name: v.UnionSchema<[v.StringSchema<undefined>, v.IntersectSchema<[v.ObjectSchema<{
     readonly en: v.StringSchema<undefined>;
-  }, undefined>, v.RecordSchema<v.PicklistSchema<readonly ["ms", "gu", "ko", "pa-IN", "az", "ru", "uk", "nb", "sv", "sw", "ur", "bho", "pa-PK", "te", "ro", "vi", "am", "bn", "en", "id", "bg", "da", "es-419", "mr", "ml", "th", "tr", "is", "fa", "or", "he", "hi", "zh-TW", "sr", "pt-BR", "zu", "nl", "es", "lt", "ja", "st", "it", "el", "pt-PT", "kn", "de", "fr", "ne", "ar", "af", "et", "pl", "ta", "sl", "pk", "hr", "sk", "fi", "lv", "fil", "fr-CA", "cs", "zh-CN", "hu"], undefined>, v.StringSchema<undefined>, undefined>], undefined>], undefined>;
+  }, undefined>, v.RecordSchema<v.PicklistSchema<readonly ["ms", "gu", "ko", "pa-IN", "az", "ru", "uk", "nb", "sv", "sw", "ur", "bho", "pa-PK", "te", "ro", "vi", "am", "bn", "en", "id", "bg", "da", "es-419", "mr", "ml", "th", "tr", "is", "fa", "or", "he", "hi", "zh-TW", "sr", "pt-BR", "zu", "nl", "es", "lt", "ja", "st", "it", "el", "pt-PT", "kn", "de", "fr", "ne", "ar", "af", "et", "pl", "ta", "sl", "pk", "hr", "sk", "fi", "lv", "fil", "fr-CA", "cs", "zh-CN", "hu"], undefined>, v.StringSchema<undefined>, undefined>], undefined>], "Name must be a string or a translations object containing the required 'en' locale.">;
   readonly icon: v.ObjectSchema<{
     readonly default: v.StringSchema<undefined>;
     readonly active: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
@@ -280,7 +280,7 @@ declare const FileOptionsSchema: v.IntersectSchema<[Omit<v.ObjectSchema<{
   readonly entries: {
     readonly name: v.OptionalSchema<v.UnionSchema<[v.StringSchema<undefined>, v.IntersectSchema<[v.ObjectSchema<{
       readonly en: v.StringSchema<undefined>;
-    }, undefined>, v.RecordSchema<v.PicklistSchema<readonly ["ms", "gu", "ko", "pa-IN", "az", "ru", "uk", "nb", "sv", "sw", "ur", "bho", "pa-PK", "te", "ro", "vi", "am", "bn", "en", "id", "bg", "da", "es-419", "mr", "ml", "th", "tr", "is", "fa", "or", "he", "hi", "zh-TW", "sr", "pt-BR", "zu", "nl", "es", "lt", "ja", "st", "it", "el", "pt-PT", "kn", "de", "fr", "ne", "ar", "af", "et", "pl", "ta", "sl", "pk", "hr", "sk", "fi", "lv", "fil", "fr-CA", "cs", "zh-CN", "hu"], undefined>, v.StringSchema<undefined>, undefined>], undefined>], undefined>, undefined>;
+    }, undefined>, v.RecordSchema<v.PicklistSchema<readonly ["ms", "gu", "ko", "pa-IN", "az", "ru", "uk", "nb", "sv", "sw", "ur", "bho", "pa-PK", "te", "ro", "vi", "am", "bn", "en", "id", "bg", "da", "es-419", "mr", "ml", "th", "tr", "is", "fa", "or", "he", "hi", "zh-TW", "sr", "pt-BR", "zu", "nl", "es", "lt", "ja", "st", "it", "el", "pt-PT", "kn", "de", "fr", "ne", "ar", "af", "et", "pl", "ta", "sl", "pk", "hr", "sk", "fi", "lv", "fil", "fr-CA", "cs", "zh-CN", "hu"], undefined>, v.StringSchema<undefined>, undefined>], undefined>], "Name must be a string or a translations object containing the required 'en' locale.">, undefined>;
     readonly icon: v.OptionalSchema<v.ObjectSchema<{
       readonly default: v.StringSchema<undefined>;
       readonly active: v.OptionalSchema<v.StringSchema<undefined>, undefined>;

package/dist/templates/custom-app/js/react/src/extension/index.jsx

@@ -1,6 +1,5 @@
 import styles from "@/css/app.module.scss";
 import { useState } from "react";
-import "@/app.css";
 
 const App = () => {
   const [count, setCount] = useState(0);

package/dist/templates/custom-app/shared/spice.config.js

@@ -2,6 +2,7 @@ import { defineConfig } from "@spicetify/creator";
 
 // Learn more: {{config-reference-link}}
 export default defineConfig({
+  name: "{{project-name}}",
   framework: "{{framework}}",
   linter: "{{linter}}",
   template: "{{template}}",

package/dist/templates/custom-app/shared/spice.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from "@spicetify/creator";
 
 // Learn more: {{config-reference-link}}
 export default defineConfig({
+  name: "{{project-name}}",
   framework: "{{framework}}",
   linter: "{{linter}}",
   template: "{{template}}",

package/dist/templates/custom-app/ts/react/src/app.tsx

@@ -1,6 +1,5 @@
 import styles from "@/css/app.module.scss";
 import { useState } from "react";
-import "@/app.css";
 
 const App: React.FC = () => {
   const [count, setCount] = useState(0);
@@ -20,4 +19,4 @@ const App: React.FC = () => {
   );
 };
 
-export default App;
+export default App;

package/dist/templates/custom-app/ts/react/src/components/Onboarding.tsx

@@ -22,16 +22,9 @@ const Onboarding: React.FC<OnboardingProps> = ({ config }) => {
   if (!isVisible) return null;
 
   return (
-    <div
-      className={`onboarding-overlay ${isFading ? "fade-out" : ""}`}
-      onClick={handleDismiss}
-    >
+    <div className={`onboarding-overlay ${isFading ? "fade-out" : ""}`} onClick={handleDismiss}>
       <div className="onboarding-card" onClick={(e) => e.stopPropagation()}>
-        <button
-          className="close-icon-btn"
-          onClick={handleDismiss}
-          aria-label="Close"
-        >
+        <button className="close-icon-btn" onClick={handleDismiss} aria-label="Close">
           <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
             <path
               d="M1 1L11 11M1 11L11 1"
@@ -63,10 +56,7 @@ const Onboarding: React.FC<OnboardingProps> = ({ config }) => {
         </div>
 
         <div className="onboarding-actions">
-          <button
-            className="get-started-btn"
-            onClick={() => openLink("{{get-started-link}}")}
-          >
+          <button className="get-started-btn" onClick={() => openLink("{{get-started-link}}")}>
             Get Started
           </button>
           <button
@@ -78,10 +68,7 @@ const Onboarding: React.FC<OnboardingProps> = ({ config }) => {
           >
             Go to Custom App
           </button>
-          <button
-            className="discord-btn"
-            onClick={() => openLink("{{discord-link}}")}
-          >
+          <button className="discord-btn" onClick={() => openLink("{{discord-link}}")}>
             Join Discord
           </button>
           <button className="dismiss-btn" onClick={handleDismiss}>

package/dist/templates/customAppEntry.js

@@ -0,0 +1,6 @@
+import React from "react";
+import App from "virtual:app";
+
+export default function render() {
+  return <App />;
+}

package/dist/templates/extension/shared/spice.config.js

@@ -2,6 +2,7 @@ import { defineConfig } from "@spicetify/creator";
 
 // Learn more: {{config-reference-link}}
 export default defineConfig({
+  name: "{{project-name}}",
   framework: "{{framework}}",
   linter: "{{linter}}",
   template: "{{template}}",

package/dist/templates/extension/shared/spice.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from "@spicetify/creator";
 
 // Learn more: {{config-reference-link}}
 export default defineConfig({
+  name: "{{project-name}}",
   framework: "{{framework}}",
   linter: "{{linter}}",
   template: "{{template}}",

package/dist/templates/theme/shared/spice.config.js

@@ -2,6 +2,7 @@ import { defineConfig } from "@spicetify/creator";
 
 // Learn more: {{config-reference-link}}
 export default defineConfig({
+  name: "{{project-name}}",
   framework: "{{framework}}",
   linter: "{{linter}}",
   template: "{{template}}",

package/dist/templates/theme/shared/spice.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from "@spicetify/creator";
 
 // Learn more: {{config-reference-link}}
 export default defineConfig({
+  name: "{{project-name}}",
   framework: "{{framework}}",
   linter: "{{linter}}",
   template: "{{template}}",

package/dist/templates/wrapper.js

@@ -6,7 +6,7 @@ __ESBUILD__HAS_CSS &&
       style.setAttribute("data-app", __ESBUILD__APP_ID);
       style.textContent = css;
       document.head.appendChild(style);
-    } catch { }
+    } catch {}
   })();
 (async () => {
   const _ID = `${__ESBUILD__APP_SLUG}-${__ESBUILD__APP_TYPE}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spicemod/creator",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "Easily make Spicetify extensions and themes",
   "keywords": [
     "cli",

package/templates/custom-app/js/react/src/extension/index.jsx

@@ -1,6 +1,5 @@
 import styles from "@/css/app.module.scss";
 import { useState } from "react";
-import "@/app.css";
 
 const App = () => {
   const [count, setCount] = useState(0);

package/templates/custom-app/shared/spice.config.js

@@ -2,6 +2,7 @@ import { defineConfig } from "@spicetify/creator";
 
 // Learn more: {{config-reference-link}}
 export default defineConfig({
+  name: "{{project-name}}",
   framework: "{{framework}}",
   linter: "{{linter}}",
   template: "{{template}}",

package/templates/custom-app/shared/spice.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from "@spicetify/creator";
 
 // Learn more: {{config-reference-link}}
 export default defineConfig({
+  name: "{{project-name}}",
   framework: "{{framework}}",
   linter: "{{linter}}",
   template: "{{template}}",

package/templates/custom-app/ts/react/src/app.tsx

@@ -1,6 +1,5 @@
 import styles from "@/css/app.module.scss";
 import { useState } from "react";
-import "@/app.css";
 
 const App: React.FC = () => {
   const [count, setCount] = useState(0);
@@ -20,4 +19,4 @@ const App: React.FC = () => {
   );
 };
 
-export default App;
+export default App;

package/templates/custom-app/ts/react/src/components/Onboarding.tsx

@@ -22,16 +22,9 @@ const Onboarding: React.FC<OnboardingProps> = ({ config }) => {
   if (!isVisible) return null;
 
   return (
-    <div
-      className={`onboarding-overlay ${isFading ? "fade-out" : ""}`}
-      onClick={handleDismiss}
-    >
+    <div className={`onboarding-overlay ${isFading ? "fade-out" : ""}`} onClick={handleDismiss}>
       <div className="onboarding-card" onClick={(e) => e.stopPropagation()}>
-        <button
-          className="close-icon-btn"
-          onClick={handleDismiss}
-          aria-label="Close"
-        >
+        <button className="close-icon-btn" onClick={handleDismiss} aria-label="Close">
           <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
             <path
               d="M1 1L11 11M1 11L11 1"
@@ -63,10 +56,7 @@ const Onboarding: React.FC<OnboardingProps> = ({ config }) => {
         </div>
 
         <div className="onboarding-actions">
-          <button
-            className="get-started-btn"
-            onClick={() => openLink("{{get-started-link}}")}
-          >
+          <button className="get-started-btn" onClick={() => openLink("{{get-started-link}}")}>
             Get Started
           </button>
           <button
@@ -78,10 +68,7 @@ const Onboarding: React.FC<OnboardingProps> = ({ config }) => {
           >
             Go to Custom App
           </button>
-          <button
-            className="discord-btn"
-            onClick={() => openLink("{{discord-link}}")}
-          >
+          <button className="discord-btn" onClick={() => openLink("{{discord-link}}")}>
             Join Discord
           </button>
           <button className="dismiss-btn" onClick={handleDismiss}>

package/templates/customAppEntry.js

@@ -0,0 +1,6 @@
+import React from "react";
+import App from "virtual:app";
+
+export default function render() {
+  return <App />;
+}

package/templates/extension/shared/spice.config.js

@@ -2,6 +2,7 @@ import { defineConfig } from "@spicetify/creator";
 
 // Learn more: {{config-reference-link}}
 export default defineConfig({
+  name: "{{project-name}}",
   framework: "{{framework}}",
   linter: "{{linter}}",
   template: "{{template}}",

package/templates/extension/shared/spice.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from "@spicetify/creator";
 
 // Learn more: {{config-reference-link}}
 export default defineConfig({
+  name: "{{project-name}}",
   framework: "{{framework}}",
   linter: "{{linter}}",
   template: "{{template}}",

package/templates/theme/shared/spice.config.js

@@ -2,6 +2,7 @@ import { defineConfig } from "@spicetify/creator";
 
 // Learn more: {{config-reference-link}}
 export default defineConfig({
+  name: "{{project-name}}",
   framework: "{{framework}}",
   linter: "{{linter}}",
   template: "{{template}}",

package/templates/theme/shared/spice.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from "@spicetify/creator";
 
 // Learn more: {{config-reference-link}}
 export default defineConfig({
+  name: "{{project-name}}",
   framework: "{{framework}}",
   linter: "{{linter}}",
   template: "{{template}}",

package/templates/wrapper.js

@@ -6,7 +6,7 @@ __ESBUILD__HAS_CSS &&
       style.setAttribute("data-app", __ESBUILD__APP_ID);
       style.textContent = css;
       document.head.appendChild(style);
-    } catch { }
+    } catch {}
   })();
 (async () => {
   const _ID = `${__ESBUILD__APP_SLUG}-${__ESBUILD__APP_TYPE}`;