feat: adds --install <package-manager> flag to create and add (#531)

* adds `--install <pm>` flag

* changeset

* fix check

* docs

* forgot the arg

* fix docs

---------

Co-authored-by: Manuel Serret <[email protected]>

Author: AdrianGonz97

.changeset/happy-moles-glow.md

@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+feat: adds `--install <package-manager>` flag to `create` and `add`

community-addon-template/tests/setup/suite.ts

@@ -4,7 +4,7 @@ import { execSync } from 'node:child_process';
 import * as vitest from 'vitest';
 import { installAddon, type AddonMap, type OptionMap } from 'sv';
 import {
-	addPnpmBuildDependendencies,
+	addPnpmBuildDependencies,
 	createProject,
 	startPreview,
 	type CreateProject,
@@ -78,7 +78,7 @@ export function setupTest<Addons extends AddonMap>(addons: Addons) {
 				options,
 				packageManager: 'pnpm'
 			});
-			addPnpmBuildDependendencies(cwd, 'pnpm', ['esbuild', ...pnpmBuildDependencies]);
+			addPnpmBuildDependencies(cwd, 'pnpm', ['esbuild', ...pnpmBuildDependencies]);
 
 			return cwd;
 		};

documentation/docs/20-commands/10-sv-create.md

@@ -35,9 +35,19 @@ Prevent typechecking from being added. Not recommended!
 
 Run the command without the interactive add-ons prompt
 
+### `--install <package-manager>`
+
+Installs dependencies with a specified package manager:
+
+- `npm`
+- `pnpm`
+- `yarn`
+- `bun`
+- `deno`
+
 ### `--no-install`
 
-Skip dependency installation
+Prevents installing dependencies.
 
 <!-- ## Programmatic interface
 

documentation/docs/20-commands/20-sv-add.md

@@ -20,7 +20,8 @@ You can select multiple space-separated add-ons from [the list below](#Official-
 
 - `-C`, `--cwd` — path to the root of your Svelte(Kit) project
 - `--no-preconditions` — skip checking preconditions <!-- TODO what does this mean? -->
-- `--no-install` — skip dependency installation
+- `--install` — installs dependencies with a specified package manager
+- `--no-install` — prevents installing dependencies
 
 ## Official add-ons
 

packages/addons/_tests/_setup/suite.ts

@@ -6,7 +6,7 @@ import { installAddon, type AddonMap, type OptionMap } from 'sv';
 import {
 	createProject,
 	startPreview,
-	addPnpmBuildDependendencies,
+	addPnpmBuildDependencies,
 	type CreateProject,
 	type ProjectVariant
 } from 'sv/testing';
@@ -75,7 +75,7 @@ export function setupTest<Addons extends AddonMap>(addons: Addons) {
 				options,
 				packageManager: 'pnpm'
 			});
-			addPnpmBuildDependendencies(cwd, 'pnpm', ['esbuild', ...pnpmBuildDependencies]);
+			addPnpmBuildDependencies(cwd, 'pnpm', ['esbuild', ...pnpmBuildDependencies]);
 
 			return cwd;
 		};

packages/cli/commands/add/index.ts

@@ -19,8 +19,10 @@ import { createWorkspace } from './workspace.ts';
 import { formatFiles, getHighlighter } from './utils.ts';
 import { Directive, downloadPackage, getPackageJSON } from './fetch-packages.ts';
 import {
-	addPnpmBuildDependendencies,
+	addPnpmBuildDependencies,
+	AGENT_NAMES,
 	installDependencies,
+	installOption,
 	packageManagerPrompt
 } from '../../utils/package-manager.ts';
 import { getGlobalPreconditions } from './preconditions.ts';
@@ -41,7 +43,7 @@ const AddonsSchema = v.array(v.string());
 const AddonOptionFlagsSchema = v.object(addonOptionFlags);
 const OptionsSchema = v.strictObject({
 	cwd: v.string(),
-	install: v.boolean(),
+	install: v.union([v.boolean(), v.picklist(AGENT_NAMES)]),
 	preconditions: v.boolean(),
 	community: v.optional(v.union([AddonsSchema, v.boolean()])),
 	...AddonOptionFlagsSchema.entries
@@ -56,8 +58,9 @@ export const add = new Command('add')
 	.description('applies specified add-ons into a project')
 	.argument('[add-on...]', 'add-ons to install')
 	.option('-C, --cwd <path>', 'path to working directory', defaultCwd)
-	.option('--no-install', 'skip installing dependencies')
 	.option('--no-preconditions', 'skip validating preconditions')
+	.option('--no-install', 'skip installing dependencies')
+	.addOption(installOption)
 	//.option('--community [add-on...]', 'community addons to install')
 	.configureHelp(common.helpConfig)
 	.action((addonArgs, opts) => {
@@ -449,12 +452,13 @@ export async function runAddCommand(
 	// prompt for package manager and install dependencies
 	let packageManager: PackageManager | undefined;
 	if (options.install) {
-		packageManager = await packageManagerPrompt(options.cwd);
+		packageManager =
+			options.install === true ? await packageManagerPrompt(options.cwd) : options.install;
 
 		if (packageManager) {
 			workspace.packageManager = packageManager;
 
-			addPnpmBuildDependendencies(workspace.cwd, packageManager, [
+			addPnpmBuildDependencies(workspace.cwd, packageManager, [
 				'esbuild',
 				...addonPnpmBuildDependencies
 			]);

packages/cli/commands/create.ts

@@ -15,9 +15,11 @@ import * as common from '../utils/common.ts';
 import { runAddCommand } from './add/index.ts';
 import { detect, resolveCommand, type AgentName } from 'package-manager-detector';
 import {
-	addPnpmBuildDependendencies,
+	addPnpmBuildDependencies,
+	AGENT_NAMES,
 	getUserAgent,
 	installDependencies,
+	installOption,
 	packageManagerPrompt
 } from '../utils/package-manager.ts';
 
@@ -40,7 +42,7 @@ const OptionsSchema = v.strictObject({
 		v.transform((lang) => langMap[String(lang)])
 	),
 	addOns: v.boolean(),
-	install: v.boolean(),
+	install: v.union([v.boolean(), v.picklist(AGENT_NAMES)]),
 	template: v.optional(v.picklist(templateChoices))
 });
 type Options = v.InferOutput<typeof OptionsSchema>;
@@ -54,6 +56,7 @@ export const create = new Command('create')
 	.option('--no-types')
 	.option('--no-add-ons', 'skips interactive add-on installer')
 	.option('--no-install', 'skip installing dependencies')
+	.addOption(installOption)
 	.configureHelp(common.helpConfig)
 	.action((projectPath, opts) => {
 		const cwd = v.parse(ProjectPathSchema, projectPath);
@@ -164,9 +167,10 @@ async function createProject(cwd: ProjectPath, options: Options) {
 
 	let packageManager: AgentName | undefined | null;
 	let addOnNextSteps: string | undefined;
-	const installDeps = async () => {
-		packageManager = await packageManagerPrompt(projectPath);
-		addPnpmBuildDependendencies(projectPath, packageManager, ['esbuild']);
+
+	const installDeps = async (install: true | AgentName) => {
+		packageManager = install === true ? await packageManagerPrompt(projectPath) : install;
+		addPnpmBuildDependencies(projectPath, packageManager, ['esbuild']);
 		if (packageManager) await installDependencies(packageManager, projectPath);
 	};
 
@@ -180,13 +184,13 @@ async function createProject(cwd: ProjectPath, options: Options) {
 		addOnNextSteps = nextSteps;
 	} else if (options.install) {
 		// `--no-add-ons` was set, so we'll prompt to install deps manually
-		await installDeps();
+		await installDeps(options.install);
 	}
 
 	// no add-ons were selected (which means the install prompt was skipped in `runAddCommand`),
 	// so we'll prompt to install
 	if (packageManager === null && options.install) {
-		await installDeps();
+		await installDeps(options.install);
 	}
 
 	return { directory: projectPath, addOnNextSteps, packageManager };

packages/cli/lib/testing.ts

@@ -6,7 +6,7 @@ import { exec } from 'tinyexec';
 import { create } from '@sveltejs/create';
 import pstree, { type PS } from 'ps-tree';
 
-export { addPnpmBuildDependendencies } from '../utils/package-manager.ts';
+export { addPnpmBuildDependencies } from '../utils/package-manager.ts';
 export type ProjectVariant = 'kit-js' | 'kit-ts' | 'vite-js' | 'vite-ts';
 
 const TEMPLATES_DIR = '.templates';

packages/cli/utils/package-manager.ts

@@ -3,6 +3,7 @@ import path from 'node:path';
 import process from 'node:process';
 import * as find from 'empathic/find';
 import { exec } from 'tinyexec';
+import { Option } from 'commander';
 import * as p from '@sveltejs/clack-prompts';
 import {
 	AGENTS,
@@ -13,10 +14,15 @@ import {
 } from 'package-manager-detector';
 import { parseJson } from '@sveltejs/cli-core/parsers';
 
-const agents = AGENTS.filter((agent): agent is AgentName => !agent.includes('@'));
-const agentOptions: PackageManagerOptions = agents.map((pm) => ({ value: pm, label: pm }));
+export const AGENT_NAMES = AGENTS.filter((agent): agent is AgentName => !agent.includes('@'));
+const agentOptions: PackageManagerOptions = AGENT_NAMES.map((pm) => ({ value: pm, label: pm }));
 agentOptions.unshift({ label: 'None', value: undefined });
 
+export const installOption = new Option(
+	'--install <package-manager>',
+	'installs dependencies with a specified package manager'
+).choices(AGENT_NAMES);
+
 type PackageManagerOptions = Array<{ value: AgentName | undefined; label: AgentName | 'None' }>;
 export async function packageManagerPrompt(cwd: string): Promise<AgentName | undefined> {
 	const detected = await detect({ cwd });
@@ -76,7 +82,7 @@ export function getUserAgent(): AgentName | undefined {
 	return AGENTS.includes(name) ? name : undefined;
 }
 
-export function addPnpmBuildDependendencies(
+export function addPnpmBuildDependencies(
 	cwd: string,
 	packageManager: AgentName | null | undefined,
 	allowedPackages: string[]