feat: Add --no-deps flag to init command (#1199)

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

.changeset/afraid-melons-remain.md

@@ -0,0 +1,5 @@
+---
+"shadcn-svelte": patch
+---
+
+breaking: Changed `--nodep` flag to `--no-deps` for `add` command

.changeset/plenty-rockets-hear.md

@@ -0,0 +1,5 @@
+---
+"shadcn-svelte": minor
+---
+
+feat: Added `--no-deps` flag to `init` command

apps/www/src/content/cli.md

@@ -32,7 +32,8 @@ Usage: shadcn-svelte init [options]
 initialize your project and install dependencies
 
 Options:
-  -c, --cwd <cwd>            the working directory. defaults to the current directory. (default: the current directory)
+  -c, --cwd <cwd>            the working directory (default: the current directory)
+  --no-deps                  disable adding & installing dependencies
   --style <name>             the style for the components (choices: "default", "new-york")
   --base-color <name>        the base color for the components (choices: "slate", "gray", "zinc", "neutral", "stone")
   --css <path>               path to the global CSS file
@@ -78,13 +79,13 @@ Arguments:
   components         name of components
 
 Options:
-  --nodep            disable adding & installing dependencies (advanced) (default: false)
-  -a, --all          add all components to your project. (default: false)
-  -y, --yes          skip confirmation prompt. (default: false)
-  -o, --overwrite    overwrite existing files. (default: false)
-  --proxy            fetch components from registry using a proxy.
-  -c, --cwd <cwd>    the working directory. (default: the current directory)
-  -p, --path <path>  the path to add the component to.
+  -c, --cwd <cwd>    the working directory (default: the current directory)
+  --no-deps          skips adding & installing package dependencies
+  -a, --all          install all components to your project (default: false)
+  -y, --yes          skip confirmation prompt (default: false)
+  -o, --overwrite    overwrite existing files (default: false)
+  --proxy <proxy>    fetch components from registry using a proxy
+  -p, --path <path>  the path to add the component to
   -h, --help         display help for command
 ```
 
@@ -107,9 +108,10 @@ Arguments:
   components       name of components
 
 Options:
-  -a, --all        update all existing components. (default: false)
-  -y, --yes        skip confirmation prompt. (default: false)
-  -c, --cwd <cwd>  the working directory. (default: the current directory)
+  -c, --cwd <cwd>  the working directory (default: the current directory)
+  -a, --all        update all existing components (default: false)
+  -y, --yes        skip confirmation prompt (default: false)
+  --proxy <proxy>  fetch components from registry using a proxy
   -h, --help       display help for command
 ```
 

packages/cli/src/commands/add.ts

@@ -29,7 +29,7 @@ const addOptionsSchema = v.object({
 	overwrite: v.boolean(),
 	cwd: v.string(),
 	path: v.optional(v.string()),
-	nodep: v.boolean(),
+	deps: v.boolean(),
 	proxy: v.optional(v.string()),
 });
 
@@ -39,17 +39,13 @@ export const add = new Command()
 	.command("add")
 	.description("add components to your project")
 	.argument("[components...]", "name of components")
-	.option("--nodep", "skips adding & installing package dependencies.", false)
-	.option("-a, --all", "install all components to your project.", false)
-	.option("-y, --yes", "skip confirmation prompt.", false)
-	.option("-o, --overwrite", "overwrite existing files.", false)
-	.option("--proxy <proxy>", "fetch components from registry using a proxy.", getEnvProxy())
-	.option(
-		"-c, --cwd <cwd>",
-		"the working directory. defaults to the current directory.",
-		process.cwd()
-	)
-	.option("-p, --path <path>", "the path to add the component to.")
+	.option("-c, --cwd <cwd>", "the working directory", process.cwd())
+	.option("--no-deps", "skips adding & installing package dependencies")
+	.option("-a, --all", "install all components to your project", false)
+	.option("-y, --yes", "skip confirmation prompt", false)
+	.option("-o, --overwrite", "overwrite existing files", false)
+	.option("--proxy <proxy>", "fetch components from registry using a proxy", getEnvProxy())
+	.option("-p, --path <path>", "the path to add the component to")
 	.action(async (components, opts) => {
 		try {
 			intro();
@@ -101,7 +97,7 @@ async function runAdd(cwd: string, config: Config, options: AddOptions) {
 			message: `Which ${highlight("components")} would you like to install?`,
 			maxItems: 10,
 			options: registryIndex.map(({ name, dependencies, registryDependencies }) => {
-				const deps = [...(options.nodep ? [] : dependencies), ...registryDependencies];
+				const deps = [...(options.deps ? dependencies : []), ...registryDependencies];
 				return {
 					label: name,
 					value: name,
@@ -177,7 +173,7 @@ async function runAdd(cwd: string, config: Config, options: AddOptions) {
 
 	if (options.yes === false) {
 		const proceed = await p.confirm({
-			message: `Ready to install ${highlight("components")}${options.nodep ? "?" : ` and ${highlight("dependencies")}?`}`,
+			message: `Ready to install ${highlight("components")}${options.deps ? ` and ${highlight("dependencies")}?` : "?"}`,
 			initialValue: true,
 		});
 
@@ -218,10 +214,10 @@ async function runAdd(cwd: string, config: Config, options: AddOptions) {
 		}
 
 		// Add dependencies to the install list
-		if (options.nodep) {
-			item.dependencies.forEach((dep) => skippedDeps.add(dep));
-		} else {
+		if (options.deps) {
 			item.dependencies.forEach((dep) => dependencies.add(dep));
+		} else {
+			item.dependencies.forEach((dep) => skippedDeps.add(dep));
 		}
 
 		// Install Component
@@ -262,7 +258,7 @@ async function runAdd(cwd: string, config: Config, options: AddOptions) {
 
 	await p.tasks(tasks);
 
-	if (options.nodep) {
+	if (!options.deps) {
 		const prettyList = prettifyList([...skippedDeps], 7);
 		p.log.warn(
 			`Components have been installed ${color.bold.red("without")} the following ${highlight("dependencies")}:\n${color.gray(prettyList)}`

packages/cli/src/commands/init.ts

@@ -12,7 +12,7 @@ import { error, handleError } from "../utils/errors.js";
 import { getBaseColors, getRegistryBaseColor, getStyles } from "../utils/registry";
 import * as templates from "../utils/templates.js";
 import * as p from "../utils/prompts.js";
-import { intro } from "../utils/prompt-helpers.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";
@@ -25,25 +25,22 @@ const styles = getStyles();
 
 const initOptionsSchema = v.object({
 	cwd: v.string(),
-	typescript: v.optional(v.boolean()),
 	style: v.optional(v.string()),
 	baseColor: v.optional(v.string()),
 	css: v.optional(v.string()),
 	tailwindConfig: v.optional(v.string()),
 	componentsAlias: v.optional(v.string()),
 	utilsAlias: v.optional(v.string()),
+	deps: v.boolean(),
 });
 
 type InitOptions = v.InferOutput<typeof initOptionsSchema>;
 
 export const init = new Command()
 	.command("init")
 	.description("initialize your project and install dependencies")
-	.option(
-		"-c, --cwd <cwd>",
-		"the working directory. defaults to the current directory.",
-		process.cwd()
-	)
+	.option("-c, --cwd <cwd>", "the working directory", process.cwd())
+	.option("--no-deps", "disable adding & installing dependencies")
 	.addOption(
 		new Option("--style <name>", "the style for the components").choices(
 			styles.map((style) => style.name)
@@ -73,7 +70,7 @@ export const init = new Command()
 			const existingConfig = await cliConfig.getConfig(cwd);
 			const config = await promptForConfig(cwd, existingConfig, options);
 
-			await runInit(cwd, config);
+			await runInit(cwd, config, options);
 
 			p.outro(`${color.green("Success!")} Project initialization completed.`);
 		} catch (e) {
@@ -294,19 +291,22 @@ function validateImportAlias(alias: string, langConfig: DetectLanguageResult) {
 	return `"${color.bold(alias)}" does not use an existing path alias defined in your ${color.bold(langConfig.type)}. See: ${color.underline("https://www.shadcn-svelte.com/docs/installation/manual#configure-path-aliases")}`;
 }
 
-export async function runInit(cwd: string, config: Config) {
+export async function runInit(cwd: string, config: Config, options: InitOptions) {
+	const tasks: p.Task[] = [];
+
 	// Write to file.
-	const createConfig: p.Task = {
+	tasks.push({
 		title: "Creating config file",
 		async task() {
 			const targetPath = path.resolve(cwd, "components.json");
 			const conf = v.parse(cliConfig.rawConfigSchema, config); // inefficient, but it'll do
 			await fs.writeFile(targetPath, JSON.stringify(conf, null, "\t"), "utf8");
 			return `Config file ${highlight("components.json")} created`;
 		},
-	};
+	});
 
-	const init: p.Task = {
+	// Initialize project
+	tasks.push({
 		title: "Initializing project",
 		async task() {
 			// Ensure all resolved paths directories exist.
@@ -345,20 +345,29 @@ export async function runInit(cwd: string, config: Config) {
 
 			return "Project initialized";
 		},
-	};
+	});
 
 	// Install dependencies.
-	const installDeps: p.Task = {
-		title: "Installing dependencies",
-		async task() {
-			const packageManager = await getPackageManager(cwd);
+	if (options.deps) {
+		tasks.push({
+			title: "Installing dependencies",
+			async task() {
+				const packageManager = await getPackageManager(cwd);
+
+				await execa(packageManager, ["add", ...PROJECT_DEPENDENCIES], {
+					cwd,
+				});
+				return "Dependencies installed";
+			},
+		});
+	}
 
-			await execa(packageManager, ["add", ...PROJECT_DEPENDENCIES], {
-				cwd,
-			});
-			return "Dependencies installed";
-		},
-	};
+	await p.tasks(tasks);
 
-	await p.tasks([createConfig, init, installDeps]);
+	if (!options.deps) {
+		const prettyList = prettifyList([...PROJECT_DEPENDENCIES], 7);
+		p.log.warn(
+			`shadcn-svelte has been initialized ${color.bold.red("without")} the following ${highlight("dependencies")}:\n${color.gray(prettyList)}`
+		);
+	}
 }

packages/cli/src/commands/update.ts

@@ -31,14 +31,10 @@ export const update = new Command()
 	.command("update")
 	.description("update components in your project")
 	.argument("[components...]", "name of components")
-	.option("-a, --all", "update all existing components.", false)
-	.option("-y, --yes", "skip confirmation prompt.", false)
-	.option("--proxy <proxy>", "fetch components from registry using a proxy.", getEnvProxy())
-	.option(
-		"-c, --cwd <cwd>",
-		"the working directory. defaults to the current directory.",
-		process.cwd()
-	)
+	.option("-c, --cwd <cwd>", "the working directory", process.cwd())
+	.option("-a, --all", "update all existing components", false)
+	.option("-y, --yes", "skip confirmation prompt", false)
+	.option("--proxy <proxy>", "fetch components from registry using a proxy", getEnvProxy())
 	.action(async (components, opts) => {
 		intro();
 

packages/cli/test/commands/init.spec.ts

@@ -37,7 +37,7 @@ it("init (config-full)", async () => {
 	const config = await getConfig(targetDir);
 	if (config === null) throw new Error("config is null");
 
-	await runInit(targetDir, config);
+	await runInit(targetDir, config, { deps: true, cwd: targetDir });
 
 	// mkDir mocks
 	expect(mockMkdir).toHaveBeenNthCalledWith(1, expect.stringContaining("src"), expect.anything());