feat(PM): show working package manager (#1241)

Co-authored-by: AdrianGonz97 <[email protected]>

.changeset/empty-clouds-deny.md

@@ -0,0 +1,5 @@
+---
+"shadcn-svelte": minor
+---
+
+feat: Added selection prompt for package managers if one cannot be detected

packages/cli/src/commands/add.ts

@@ -5,8 +5,6 @@ import color from "chalk";
 import { Command } from "commander";
 import { execa } from "execa";
 import * as v from "valibot";
-import { detect } from "package-manager-detector";
-import { COMMANDS } from "package-manager-detector/agents";
 import { type Config, getConfig } from "../utils/get-config.js";
 import { getEnvProxy } from "../utils/get-env-proxy.js";
 import { ConfigError, error, handleError } from "../utils/errors.js";
@@ -20,6 +18,7 @@ import {
 import { transformImports } from "../utils/transformers.js";
 import * as p from "../utils/prompts.js";
 import { intro, prettifyList } from "../utils/prompt-helpers.js";
+import { detectPM } from "../utils/auto-detect.js";
 
 const highlight = (...args: unknown[]) => color.bold.cyan(...args);
 
@@ -245,18 +244,20 @@ async function runAdd(cwd: string, config: Config, options: AddOptions) {
 	}
 
 	// Install dependencies.
-	tasks.push({
-		title: "Installing package dependencies",
-		enabled: dependencies.size > 0,
-		async task() {
-			const { agent } = await detect({ cwd });
-			const [pm, add] = COMMANDS[agent ?? "npm"].add.split(" ") as [string, string];
-			await execa(pm, [add, ...dependencies], {
-				cwd,
-			});
-			return "Dependencies installed";
-		},
-	});
+	const commands = await detectPM(cwd, options.deps);
+	if (commands) {
+		const [pm, add] = commands.add.split(" ") as [string, string];
+		tasks.push({
+			title: `${highlight(pm)}: Installing dependencies`,
+			enabled: dependencies.size > 0,
+			async task() {
+				await execa(pm, [add, ...dependencies], {
+					cwd,
+				});
+				return `Dependencies installed with ${highlight(pm)}`;
+			},
+		});
+	}
 
 	await p.tasks(tasks);
 

packages/cli/src/commands/init.ts

@@ -5,8 +5,6 @@ import color from "chalk";
 import * as v from "valibot";
 import { Command, Option } from "commander";
 import { execa } from "execa";
-import { detect } from "package-manager-detector";
-import { COMMANDS } from "package-manager-detector/agents";
 import * as cliConfig from "../utils/get-config.js";
 import type { Config } from "../utils/get-config.js";
 import { error, handleError } from "../utils/errors.js";
@@ -16,7 +14,12 @@ import * as p from "../utils/prompts.js";
 import { intro, prettifyList } from "../utils/prompt-helpers.js";
 import { resolveImport } from "../utils/resolve-imports.js";
 import { syncSvelteKit } from "../utils/sveltekit.js";
-import { type DetectLanguageResult, detectConfigs, detectLanguage } from "../utils/auto-detect.js";
+import {
+	type DetectLanguageResult,
+	detectConfigs,
+	detectLanguage,
+	detectPM,
+} from "../utils/auto-detect.js";
 
 const PROJECT_DEPENDENCIES = ["tailwind-variants", "clsx", "tailwind-merge"] as const;
 const highlight = (...args: unknown[]) => color.bold.cyan(...args);
@@ -360,16 +363,17 @@ export async function runInit(cwd: string, config: Config, options: InitOptions)
 	});
 
 	// Install dependencies.
-	if (options.deps) {
+	const commands = await detectPM(cwd, options.deps);
+	if (commands) {
+		const [pm, add] = commands.add.split(" ") as [string, string];
 		tasks.push({
-			title: "Installing dependencies",
+			title: `${highlight(pm)}: Installing dependencies`,
+			enabled: options.deps,
 			async task() {
-				const { agent } = await detect({ cwd });
-				const [pm, add] = COMMANDS[agent ?? "npm"].add.split(" ") as [string, string];
 				await execa(pm, [add, ...PROJECT_DEPENDENCIES], {
 					cwd,
 				});
-				return "Dependencies installed";
+				return `Dependencies installed with ${highlight(pm)}`;
 			},
 		});
 	}

packages/cli/src/commands/update.ts

@@ -5,8 +5,6 @@ import color from "chalk";
 import { Command } from "commander";
 import { execa } from "execa";
 import * as v from "valibot";
-import { detect } from "package-manager-detector";
-import { COMMANDS } from "package-manager-detector/agents";
 import { type Config, getConfig } from "../utils/get-config.js";
 import { error, handleError } from "../utils/errors.js";
 import { fetchTree, getItemTargetPath, getRegistryIndex, resolveTree } from "../utils/registry";
@@ -15,6 +13,7 @@ import { transformImports } from "../utils/transformers.js";
 import * as p from "../utils/prompts.js";
 import { intro, prettifyList } from "../utils/prompt-helpers.js";
 import { getEnvProxy } from "../utils/get-env-proxy.js";
+import { detectPM } from "../utils/auto-detect.js";
 
 const highlight = (msg: string) => color.bold.cyan(msg);
 
@@ -226,18 +225,20 @@ async function runUpdate(cwd: string, config: Config, options: UpdateOptions) {
 	}
 
 	// Install dependencies.
-	tasks.push({
-		title: "Installing package dependencies",
-		enabled: dependencies.size > 0,
-		async task() {
-			const { agent } = await detect({ cwd });
-			const [pm, add] = COMMANDS[agent ?? "npm"].add.split(" ") as [string, string];
-			await execa(pm, [add, ...dependencies], {
-				cwd,
-			});
-			return "Dependencies installed";
-		},
-	});
+	const commands = await detectPM(cwd, true);
+	if (commands) {
+		const [pm, add] = commands.add.split(" ") as [string, string];
+		tasks.push({
+			title: `${highlight(pm)}: Installing dependencies`,
+			enabled: dependencies.size > 0,
+			async task() {
+				await execa(pm, [add, ...dependencies], {
+					cwd,
+				});
+				return `Dependencies installed with ${highlight(pm)}`;
+			},
+		});
+	}
 
 	await p.tasks(tasks);
 

packages/cli/src/utils/auto-detect.ts

@@ -2,6 +2,10 @@ import fs from "node:fs";
 import path from "node:path";
 import ignore, { type Ignore } from "ignore";
 import { type TsConfigResult, getTsconfig } from "get-tsconfig";
+import { detect } from "package-manager-detector";
+import { AGENTS, type Agent, COMMANDS } from "package-manager-detector/agents";
+import * as p from "./prompts.js";
+import { cancel } from "./prompt-helpers.js";
 
 const STYLESHEETS = [
 	"app.css",
@@ -91,3 +95,28 @@ export function detectLanguage(cwd: string): DetectLanguageResult | undefined {
 	const jsConfig = getTsconfig(rootPath, "jsconfig.json");
 	if (jsConfig !== null) return { type: "jsconfig.json", config: jsConfig };
 }
+
+type Options = Array<{ value: Agent | undefined; label: Agent | "None" }>;
+export async function detectPM(cwd: string, prompt: boolean) {
+	let { agent } = await detect({ cwd });
+
+	if (agent === undefined && prompt) {
+		const options: Options = AGENTS.filter((agent) => !agent.includes("@")).map((pm) => ({
+			value: pm,
+			label: pm,
+		}));
+		options.unshift({ label: "None", value: undefined });
+
+		const res = await p.select({
+			message: "Which package manager do you want to use?",
+			options,
+		});
+		if (p.isCancel(res)) {
+			cancel();
+		}
+
+		agent = res;
+	}
+
+	return agent ? COMMANDS[agent] : undefined;
+}

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

@@ -17,7 +17,7 @@ export function intro() {
 	}
 }
 
-export function cancel() {
+export function cancel(): never {
 	p.cancel("Operation cancelled.");
 	process.exit(0);
 }