@spicemod/creator 0.0.26 → 0.0.28

package/dist/bin.mjs

@@ -3,7 +3,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 { createReadStream, existsSync, lstatSync, mkdirSync, readFileSync, readdirSync, rmSync, statSync, writeFileSync } from "node:fs";
+import fs, { createReadStream, existsSync, lstatSync, mkdirSync, readFileSync, readdirSync, rmSync, statSync, writeFileSync } from "node:fs";
 import { watchConfig } from "c12";
 import { globSync } from "tinyglobby";
 import { URL as URL$1, fileURLToPath } from "node:url";
@@ -13,7 +13,7 @@ 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 { readFile, unlink, writeFile } from "node:fs/promises";
 import { parse } from "ini";
 import { gzipSync } from "node:zlib";
 import postcssMinify from "@csstools/postcss-minify";
@@ -137,13 +137,14 @@ const frameworks = frameworkTypes.map((name) => ({
 }));
 const frameworkOptions = toOptions(frameworks);
 const liveReloadFilePath = dist(`templates/liveReload.js`, import.meta.url);
+const hmrCustomAppFilePath = dist(`templates/hmrCustomApp.js`, import.meta.url);
 const templateWrapperFilePath = dist("templates/wrapper.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.26";
+var version = "0.0.28";
 
 //#endregion
 //#region src/utils/common.ts
@@ -779,15 +780,48 @@ function getTime(start) {
 }
 
 //#endregion
-//#region src/esbuild/plugins/cleanDist.ts
-const cleanDist = (outDir) => ({
-	name: "spice_internal__clean-dist",
+//#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")) => ({
+	name: "clean",
 	setup(build) {
+		const outdir = resolve(build.initialOptions.outdir || "./dist");
 		build.onStart(() => {
-			if (existsSync(outDir)) rmSync(outDir, {
-				recursive: true,
-				force: true
-			});
+			if (fs.existsSync(outdir)) try {
+				fs.rmSync(outdir, {
+					recursive: true,
+					force: true
+				});
+				logger.log(`Removed: ${outdir}`);
+			} catch (err) {
+				logger.error(`Error removing ${outdir}:`, err);
+			}
 		});
 	}
 });
@@ -847,6 +881,37 @@ const externalGlobal = (externals, namespace = "spicetify-global") => {
 
 //#endregion
 //#region src/esbuild/plugins/spicetifyHandlers.ts
+async function removeFile(logger, targetPath) {
+	try {
+		await unlink(targetPath);
+		logger.debug(pc.green(`${CHECK} Removed: ${targetPath}`));
+	} catch (err) {
+		if (err.code !== "ENOENT") logger.error(pc.red(`${CROSS} Failed to remove file: ${err instanceof Error ? err.message : String(err)}`));
+	}
+}
+async function copyFiles(logger, destDirs, cacheFiles) {
+	const tasks = [];
+	for (const filePath of cacheFiles.keys()) {
+		const fileData = cacheFiles.get(filePath);
+		if (!fileData) continue;
+		for (const destDir of destDirs) {
+			const targetPath = resolve(destDir, basename(filePath));
+			tasks.push((async () => {
+				await mkdirp(destDir);
+				await writeFile(targetPath, fileData.contents);
+			})());
+		}
+	}
+	await Promise.all(tasks);
+}
+async function removeDeletedFiles(logger, destDirs, removedFiles) {
+	const tasks = [];
+	for (const removedPath of removedFiles) for (const destDir of destDirs) {
+		const targetPath = resolve(destDir, basename(removedPath));
+		tasks.push(removeFile(logger, targetPath));
+	}
+	await Promise.all(tasks);
+}
 const spicetifyHandler = ({ config, options, cache, logger = createLogger("plugin:spicetify-handler") }) => ({
 	name: "spice_internal__spicetify-build-handler",
 	async setup(build) {
@@ -855,82 +920,58 @@ 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 (env.skipSpicetify) {
-			logger.info(pc.yellow("skipping spicetify operations"));
-			build.onEnd(async (result) => {
-				if (result.errors.length > 0) return;
-				if (!cache.hasChanges || cache.changed.size === 0) return;
-				const tasks = [];
-				for (const filePath of cache.changed) {
-					const fileData = cache.files.get(filePath);
-					if (!fileData) continue;
-					const targetPath = resolve(outDir, basename(filePath));
-					tasks.push((async () => {
-						await mkdirp(outDir);
-						await writeFile(targetPath, fileData.contents);
-					})());
-				}
-				try {
-					await Promise.all(tasks);
-					logger.debug(pc.green(`${CHECK} Built files written to ${outDir}`));
-				} catch (err) {
-					logger.error(pc.red(`${CROSS} Failed to write files: ${err instanceof Error ? err.message : String(err)}`));
+		const getDestDirs = () => {
+			const dirs = [resolve(outDir)];
+			if (copy) dirs.push(isExtension ? getExtensionDir() : isCustomApp ? resolve(getCustomAppsDir(), identifier) : resolve(getThemesDir(), identifier));
+			return dirs;
+		};
+		if (env.skipSpicetify) logger.info(pc.yellow("Skipping Spicetify operations..."));
+		else {
+			const spiceConfig = await getSpicetifyConfig();
+			logger.debug(pc.green("Spicetify Config: "), spiceConfig);
+			if (apply) {
+				const defaultTheme = spiceConfig?.Setting?.current_theme || "SpicetifyDefault";
+				const spiceIdentifier = remove ? `${identifier}-` : identifier;
+				runSpice([
+					"config",
+					isExtension ? "extensions" : isCustomApp ? "custom_apps" : "current_theme",
+					spiceIdentifier
+				]);
+				if (!isExtension && !remove) {
+					const cleanup = () => {
+						if (isCustomApp) runSpice([
+							"config",
+							"custom_apps",
+							`${identifier}-`
+						]);
+						else runSpice([
+							"config",
+							"current_theme",
+							defaultTheme
+						]);
+						process.exit();
+					};
+					process.once("SIGINT", cleanup);
+					process.once("SIGTERM", cleanup);
 				}
-			});
-			return;
-		}
-		const spiceConfig = await getSpicetifyConfig();
-		logger.debug(pc.green("Spicetify Config: "), spiceConfig);
-		if (apply) {
-			const defaultTheme = spiceConfig?.Setting?.current_theme || "SpicetifyDefault";
-			const spiceIdentifier = remove ? `${identifier}-` : identifier;
-			runSpice([
-				"config",
-				isExtension ? "extensions" : isCustomApp ? "custom_apps" : "current_theme",
-				spiceIdentifier
-			]);
-			if (!isExtension && !remove) {
-				const cleanup = () => {
-					if (isCustomApp) runSpice([
-						"config",
-						"custom_apps",
-						`${identifier}-`
-					]);
-					else runSpice([
-						"config",
-						"current_theme",
-						defaultTheme
-					]);
-					process.exit();
-				};
-				process.once("SIGINT", cleanup);
-				process.once("SIGTERM", cleanup);
 			}
 		}
 		build.onEnd(async (result) => {
 			if (result.errors.length > 0) return;
-			if (!cache.hasChanges || cache.changed.size === 0) return;
-			const destDirs = [resolve(outDir)];
-			if (copy) destDirs.push(isExtension ? getExtensionDir() : isCustomApp ? resolve(getCustomAppsDir(), identifier) : resolve(getThemesDir(), identifier));
-			const tasks = [];
-			for (const filePath of cache.changed) {
-				const fileData = cache.files.get(filePath);
-				if (!fileData) continue;
-				for (const destDir of destDirs) {
-					const targetPath = resolve(destDir, basename(filePath));
-					tasks.push((async () => {
-						await mkdirp(destDir);
-						await writeFile(targetPath, fileData.contents);
-					})());
-				}
-			}
+			const destDirs = getDestDirs();
 			try {
-				await Promise.all(tasks);
-				logger.debug(pc.green(`${CHECK} Changed files copied.`));
+				await copyFiles(logger, destDirs, cache.files);
+				logger.debug(pc.green(`${CHECK} Built files written to ${outDir}`));
 			} catch (err) {
 				logger.error(pc.red(`${CROSS} Failed to copy files: ${err instanceof Error ? err.message : String(err)}`));
 				return;
 			}
+			if (cache.removed.size > 0) {
+				await removeDeletedFiles(logger, destDirs, cache.removed);
+				cache.hasChanges = true;
+			}
+			cache.removed.clear();
+			if (env.skipSpicetify) return;
 			if (apply && cache.hasChanges && (!applyOnce || !hasAppliedOnce)) {
 				const { stdout, stderr, status } = runSpice(["apply"]);
 				if (status !== 0) logger.error(pc.red(`${CROSS} Spicetify apply failed:`), stdout, stderr);
@@ -951,16 +992,32 @@ function wrapWithLoader({ config, cache, outFiles, server, dev = false, logger =
 		name: namespace,
 		setup(build$3) {
 			if (build$3.initialOptions.write !== false) throw new Error(`[${namespace}] This plugin requires "write: false" in build options.`);
+			build$3.onStart(() => {
+				cache.changed.clear();
+				cache.removed.clear();
+				cache.hasChanges = false;
+			});
 			build$3.onEnd(async (res) => {
 				try {
 					if (res.errors.length > 0 || !res.outputFiles) return;
-					cache.changed.clear();
-					cache.hasChanges = false;
 					const filesChanged = [];
 					const outdir = resolve(build$3.initialOptions.outdir || "./dist");
 					const bundledCss = getBundledCss(res.outputFiles, outdir, type, dev);
 					const minify = build$3.initialOptions.minify;
 					const slug = varSlugify(`${name}_${version}`);
+					const currentFilePaths = /* @__PURE__ */ new Set();
+					for (const file of res.outputFiles) {
+						const isJs = file.path.endsWith(".js");
+						const isCss = file.path.endsWith(".css");
+						if (!dev && isCss && type === "extension") continue;
+						const relPath = file.path.slice(outdir.length);
+						const isCustomAppExtension = type === "custom-app" && isExtensionDir(relPath);
+						let targetName;
+						if (isJs) targetName = isCustomAppExtension ? outFiles.jsExtension ?? "extension.js" : outFiles.js;
+						else if (isCss && !isCustomAppExtension) targetName = outFiles.css;
+						if (targetName) currentFilePaths.add(join(outdir, targetName));
+					}
+					for (const cachedPath of cache.files.keys()) if (!currentFilePaths.has(cachedPath)) cache.removed.add(cachedPath);
 					const transformPromises = res.outputFiles.map(async (file) => {
 						const isJs = file.path.endsWith(".js");
 						const isCss = file.path.endsWith(".css");
@@ -1120,8 +1177,9 @@ function getBundledCss(files, outdir, type, dev) {
 //#region src/esbuild/plugins/index.ts
 const plugins = {
 	css,
-	cleanDist,
+	clean,
 	buildLogger,
+	buildErrorReporter,
 	externalGlobal,
 	wrapWithLoader,
 	spicetifyHandler
@@ -1140,13 +1198,20 @@ const defaultBuildOptions = {
 	target: ["es2022", "chrome120"]
 };
 const getCommonPlugins = (opts) => {
-	const { template, minify, cache, buildOptions, outFiles, server, dev } = opts;
+	const { template, minify, buildOptions, outFiles, server, dev } = opts;
 	const inline = !dev && template === "extension";
-	return [
+	const cache = {
+		files: /* @__PURE__ */ new Map(),
+		changed: /* @__PURE__ */ new Set(),
+		removed: /* @__PURE__ */ new Set(),
+		hasChanges: true
+	};
+	const p = [
 		...plugins.css({
 			minify,
 			inline
 		}),
+		plugins.clean(cache),
 		plugins.externalGlobal({
 			react: "Spicetify.React",
 			"react-dom": "Spicetify.ReactDOM",
@@ -1168,6 +1233,8 @@ const getCommonPlugins = (opts) => {
 		}),
 		plugins.buildLogger({ cache })
 	];
+	if (dev) p.push(plugins.buildErrorReporter({ server }));
+	return p;
 };
 function getEntryPoints(config) {
 	if (config.template === "theme") return [config.entry.js, config.entry.css];
@@ -1227,11 +1294,6 @@ function getJSBuildOptions(config, options) {
 	const entryPoints = getEntryPoints(config);
 	const minify = options.watch ? false : options.minify;
 	const outDir = resolve(config.outDir);
-	const cache = {
-		files: /* @__PURE__ */ new Map(),
-		changed: /* @__PURE__ */ new Set(),
-		hasChanges: true
-	};
 	const outFiles = getOutFiles(config);
 	const overrides = {
 		...defaultBuildOptions,
@@ -1253,7 +1315,6 @@ function getJSBuildOptions(config, options) {
 		plugins: [...config.esbuildOptions?.plugins ? config.esbuildOptions.plugins : [], ...getCommonPlugins({
 			...config,
 			minify,
-			cache,
 			buildOptions: {
 				apply: options.apply,
 				copy: options.copy,
@@ -1358,10 +1419,16 @@ function createPackageJSON(options) {
 		dependencies: {},
 		devDependencies: { "@spicetify/creator": "latest" }
 	};
-	if (options.language === "ts") result.peerDependencies = {
-		...result.peerDependencies,
-		typescript: "^5"
-	};
+	if (options.language === "ts") {
+		result.devDependencies = {
+			...result.devDependencies,
+			...options.packageManager === "bun" ? { "@types/bun": "^1.3.10" } : { "@types/node": "^25.5.0" }
+		};
+		result.peerDependencies = {
+			...result.peerDependencies,
+			typescript: "^5"
+		};
+	}
 	const slices = [FRAMEWORKS$1[options.framework], LINTERS$1[options.linter]];
 	Object.values(INTERSECTIONS).forEach((intersection) => {
 		if (intersection.condition(options)) slices.push(intersection);
@@ -1430,7 +1497,7 @@ const SHARED_FILES = (opts) => {
 		{
 			from: "DOT-gitignore",
 			to: ".gitignore",
-			isShared: true
+			isShared
 		},
 		{
 			from: `spice.config.${ext(opts.language)}`,
@@ -1478,11 +1545,23 @@ const LANGUAGE_FILES = {
 		to: "jsconfig.json",
 		isShared: true
 	}],
-	ts: [{
-		from: "tsconfig.json",
-		to: "tsconfig.json",
-		isShared: true
-	}]
+	ts: [
+		{
+			from: "tsconfig.json",
+			to: "tsconfig.json",
+			isShared: true
+		},
+		{
+			from: "tsconfig.app.json",
+			to: "tsconfig.app.json",
+			isShared: true
+		},
+		{
+			from: "tsconfig.node.json",
+			to: "tsconfig.node.json",
+			isShared: true
+		}
+	]
 };
 const FRAMEWORKS = {
 	react: ({ language, template }) => {
@@ -1648,7 +1727,7 @@ function tryGitInit(root) {
 const downloads = { spicetify: {
 	from: "https://raw.githubusercontent.com/spicetify/cli/main/globals.d.ts",
 	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\");")
+	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 ReactJSX: any;", "const ReactJSX: typeof import(\"react/jsx-runtime\");").replace("const ReactDOMServer: any;", "const ReactDOMServer: typeof import(\"react-dom/server\");")
 } };
 async function updateTypes(isUpdating = true, cwd = process.cwd()) {
 	const s = spinner();
@@ -1960,7 +2039,7 @@ async function createHmrServer(config, logger = createLogger("hmrServer")) {
 		});
 	});
 	function broadcast(data) {
-		const message = typeof data === "string" ? data : JSON.stringify(data);
+		const message = JSON.stringify(data);
 		for (const client of clients) if (client.readyState === WebSocket.OPEN) client.send(message);
 	}
 	return {
@@ -2033,7 +2112,8 @@ const injectHMRExtension = async (rootLink, wsLink, outFiles) => {
 				_SERVER_URL: JSON.stringify(rootLink),
 				_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`)
+				_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`)
 			}
 		});
 		writeFileSync(outDir, code);
@@ -2083,56 +2163,20 @@ const injectHMRCustomApp = async (rootLink, wsLink, outFiles, config) => {
 		mkdirp(destDir);
 		const indexJsPath = resolve(destDir, "index.js");
 		const extensionJsPath = resolve(destDir, outFiles.jsExtension ?? "extension.js");
-		writeFileSync(indexJsPath, `const React = Spicetify.React;
-const waitForImport = () => {
-  return import("${rootLink}/files/${outFiles.js}")
-    .then((mod) => mod.default || mod.render)
-    .catch((err) => {
-      console.error("Failed to import app:", err);
-      return null;
-    });
-};
-
-const AppWrapper = ({ appPromise }) => {
-  const [App, setApp] = React.useState(null);
-
-  React.useEffect(() => {
-    let mounted = true;
-
-    appPromise.then((app) => {
-      if (mounted && app) {
-        setApp(() => app);
-      }
-    });
-
-    return () => {
-      mounted = false;
-    };
-  }, [appPromise]);
-
-  if (!App) {
-    return React.createElement(
-      "div",
-      { className: "loading" },
-      "Loading app..."
-    );
-  }
-
-  return React.createElement(App);
-};
-
-const render = () => {
-  const appPromise = waitForImport();
-  return React.createElement(AppWrapper, { appPromise });
-};
-`);
+		const { code: transformedIndexCode } = await transform(readFileSync(hmrCustomAppFilePath, "utf8"), {
+			loader: "js",
+			define: { _IMPORT_LINK: JSON.stringify(`${rootLink}/files/${outFiles.js}`) },
+			platform: "browser"
+		});
+		writeFileSync(indexJsPath, transformedIndexCode);
 		const { code: extensionCode } = await transform(readFileSync(liveReloadFilePath, "utf8"), {
 			loader: "js",
 			define: {
 				_SERVER_URL: JSON.stringify(rootLink),
 				_HOT_RELOAD_LINK: JSON.stringify(wsLink),
 				_JS_PATH: JSON.stringify(`/files/${outFiles.jsExtension ?? "extension.js"}`),
-				_CSS_PATH: JSON.stringify(outFiles.css ? `/files/${outFiles.css}` : `/files/app.css`)
+				_CSS_PATH: JSON.stringify(outFiles.css ? `/files/${outFiles.css}` : `/files/app.css`),
+				_REMOVE_CMD: JSON.stringify(`spicetify config custom_apps ${customAppId}- && spicetify apply`)
 			}
 		});
 		writeFileSync(extensionJsPath, extensionCode);
@@ -2205,11 +2249,6 @@ async function dev$1(options) {
 function getJSDevOptions(config, options) {
 	const entryPoints = getEntryPoints(config);
 	const minify = false;
-	const cache = {
-		files: /* @__PURE__ */ new Map(),
-		changed: /* @__PURE__ */ new Set(),
-		hasChanges: true
-	};
 	const overrides = {
 		...defaultBuildOptions,
 		outdir: outDir,
@@ -2228,7 +2267,6 @@ function getJSDevOptions(config, options) {
 		plugins: [...config.esbuildOptions?.plugins ? config.esbuildOptions.plugins : [], ...getCommonPlugins({
 			...config,
 			minify,
-			cache,
 			buildOptions: {
 				copy: true,
 				apply: false,

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

@@ -1,3 +1,4 @@
+import { resolve } from "path";
 import { defineConfig } from "@spicetify/creator";
 
 // Learn more: {{config-reference-link}}
@@ -7,4 +8,9 @@ export default defineConfig({
   linter: "{{linter}}",
   template: "{{template}}",
   packageManager: "{{package-manager}}",
+  esbuildOptions: {
+    alias: {
+      "@": resolve(__dirname, "src"),
+    },
+  },
 });

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

@@ -1,3 +1,4 @@
+import { resolve } from "path";
 import { defineConfig } from "@spicetify/creator";
 
 // Learn more: {{config-reference-link}}
@@ -7,4 +8,9 @@ export default defineConfig({
   linter: "{{linter}}",
   template: "{{template}}",
   packageManager: "{{package-manager}}",
+  esbuildOptions: {
+    alias: {
+      "@": resolve(__dirname, "src"),
+    },
+  },
 });

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

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

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

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["spice.config.ts"]
+}

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

@@ -1,6 +1,6 @@
 import "@/extension/app.css";
 import { createRoot } from "react-dom/client";
-// you can use aliases too ! (just add them to tsconfig.json)
+// you can use aliases too ! (checkout tsconfig.app.json)
 import Onboarding from "@/components/Onboarding";
 
 const config = {

package/dist/templates/extension/js/react/src/app.jsx

@@ -1,6 +1,6 @@
 import "@/app.css";
 import { createRoot } from "react-dom/client";
-// you can use aliases too ! (just add them to tsconfig.json)
+// you can use aliases too ! (checkout tsconfig.app.json)
 import OnboardingCard from "@/components/Onboarding";
 
 const config = {

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

@@ -1,3 +1,4 @@
+import { resolve } from "path";
 import { defineConfig } from "@spicetify/creator";
 
 // Learn more: {{config-reference-link}}
@@ -7,4 +8,9 @@ export default defineConfig({
   linter: "{{linter}}",
   template: "{{template}}",
   packageManager: "{{package-manager}}",
+  esbuildOptions: {
+    alias: {
+      "@": resolve(__dirname, "src"),
+    },
+  },
 });

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

@@ -1,3 +1,4 @@
+import { resolve } from "path";
 import { defineConfig } from "@spicetify/creator";
 
 // Learn more: {{config-reference-link}}
@@ -7,4 +8,9 @@ export default defineConfig({
   linter: "{{linter}}",
   template: "{{template}}",
   packageManager: "{{package-manager}}",
+  esbuildOptions: {
+    alias: {
+      "@": resolve(__dirname, "src"),
+    },
+  },
 });