chore(cli)(next): Add peerDependency precondition to CLI

.changeset/blue-drinks-rush.md

@@ -0,0 +1,5 @@
+---
+"shadcn-svelte": patch
+---
+
+chore: Add warning for incompatible dependency

packages/cli/package.json

@@ -45,10 +45,12 @@
 		"commander": "^10.0.1",
 		"execa": "^7.2.0",
 		"is-unicode-supported": "^2.0.0",
-		"node-fetch-native": "^1.6.4"
+		"node-fetch-native": "^1.6.4",
+		"semver": "^7.7.1"
 	},
 	"devDependencies": {
 		"@types/node": "^18.19.22",
+		"@types/semver": "^7.5.8",
 		"cross-env": "^7.0.3",
 		"get-tsconfig": "^4.7.3",
 		"ignore": "^5.3.1",

packages/cli/src/commands/add.ts

@@ -14,6 +14,7 @@ import * as p from "../utils/prompts.js";
 import * as registry from "../utils/registry/index.js";
 import { transformImports } from "../utils/transformers.js";
 import { resolveCommand } from "package-manager-detector/commands";
+import { checkPreconditions } from "../utils/preconditions.js";
 
 const highlight = (...args: unknown[]) => color.bold.cyan(...args);
 
@@ -64,6 +65,8 @@ export const add = new Command()
 
 			registry.setRegistry(config.registry);
 
+			checkPreconditions(cwd);
+
 			await runAdd(cwd, config, options);
 
 			p.outro(`${color.green("Success!")} Component installation completed.`);

packages/cli/src/commands/init.ts

@@ -22,6 +22,7 @@ import { syncSvelteKit } from "../utils/sveltekit.js";
 import * as templates from "../utils/templates.js";
 import { resolveCommand } from "package-manager-detector/commands";
 import { SITE_BASE_URL } from "../constants.js";
+import { checkPreconditions } from "../utils/preconditions.js";
 
 const PROJECT_DEPENDENCIES = [
 	"tailwind-variants",
@@ -80,6 +81,8 @@ export const init = new Command()
 				throw error(`The path ${color.cyan(cwd)} does not exist. Please try again.`);
 			}
 
+			checkPreconditions(cwd);
+
 			// Read config.
 			const existingConfig = await cliConfig.getConfig(cwd);
 			const config = await promptForConfig(cwd, existingConfig, options);

packages/cli/src/commands/update.ts

@@ -15,6 +15,7 @@ import * as registry from "../utils/registry/index.js";
 import { UTILS, UTILS_JS } from "../utils/templates.js";
 import { transformImports } from "../utils/transformers.js";
 import { resolveCommand } from "package-manager-detector/commands";
+import { checkPreconditions } from "../utils/preconditions.js";
 
 const highlight = (msg: string) => color.bold.cyan(msg);
 
@@ -60,6 +61,8 @@ export const update = new Command()
 
 			registry.setRegistry(config.registry);
 
+			checkPreconditions(cwd);
+
 			await runUpdate(cwd, config, options);
 
 			p.note(

packages/cli/src/utils/preconditions.ts

@@ -0,0 +1,51 @@
+import color from "chalk";
+import semver from "semver";
+import { loadProjectPackageInfo } from "./get-package-info.js";
+import { log } from "./prompts.js";
+import { getPadding } from "./prompt-helpers.js";
+
+const peerDependencies: Record<string, string> = {
+	svelte: "5.x.x",
+	tailwindcss: "3.x.x",
+};
+
+export function checkPreconditions(cwd: string) {
+	const pkg = loadProjectPackageInfo(cwd);
+
+	const dependencies = { ...pkg.dependencies, ...pkg.devDependencies };
+
+	checkDependencies(dependencies);
+}
+
+/**
+ * Checks that all dependencies meet peer dependency requirements and logs a warning if they don't.
+ */
+function checkDependencies(dependencies: Partial<Record<string, string>>) {
+	const incompatible: [string, string][] = [];
+
+	for (const [name, version] of Object.entries(dependencies)) {
+		const targetVersion = peerDependencies[name];
+		const currentVersion = semver.coerce(version);
+
+		if (!targetVersion || !currentVersion) continue;
+
+		if (!semver.satisfies(currentVersion, targetVersion)) {
+			incompatible.push([
+				`${color.bold(`${name}@`)}${color.greenBright.bold(targetVersion)}`,
+				color.yellowBright.bold(currentVersion),
+			]);
+		}
+	}
+
+	if (incompatible.length > 0) {
+		const padding = getPadding(incompatible.map(([target]) => target));
+
+		const lines = incompatible
+			.map(([target, current]) => `  need ${target.padEnd(padding)}  >>  found ${current}`)
+			.join("\n");
+
+		log.warn(
+			`Incompatible dependency versions detected:\n\n${lines}\n\n${color.white.bold("Use at your own risk!")}`
+		);
+	}
+}

packages/cli/src/utils/prompt-helpers.ts

@@ -32,3 +32,8 @@ export function prettifyList(arr: string[], max: number = 9): string {
 		return `${pre}, ${curr}`;
 	});
 }
+
+export function getPadding(lines: string[]) {
+	const lengths = lines.map((s) => s.length);
+	return Math.max(...lengths);
+}