chore: improve community adders (#47)

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

Author: 3 people

community/unocss.ts renamed to community-adders/unocss.ts

@@ -6,6 +6,5 @@ export default {
 	category: 'CSS',
 	npm: 'unocss-svelte-integration',
 	repo: 'https://github.com/owner-name/repo-name',
-	website: 'https://unocss.dev',
-	logo: 'unocss.svg'
+	website: 'https://unocss.dev'
 } satisfies CommunityAdder;

community/unplugin-icons.ts renamed to community-adders/unplugin-icons.ts

@@ -3,9 +3,8 @@ import type { CommunityAdder } from '../packages/adders/_config/community.ts';
 export default {
 	name: 'unplugin-icons',
 	description: 'Access thousands of icons as components on-demand universally',
-	category: 'Icons',
+	category: 'Icon',
 	npm: 'unplugin-icons-svelte-integration',
 	repo: 'https://github.com/owner-name/repo-name',
-	website: 'https://www.npmjs.com/package/unplugin-icons',
-	logo: 'unplugin-icons.svg'
+	website: 'https://github.com/unplugin/unplugin-icons'
 } satisfies CommunityAdder;

packages/adders/_config/categories.ts

@@ -1,44 +1,16 @@
-export type CategoryKeys = 'codeQuality' | 'css' | 'db' | 'testing' | 'auth' | 'additional';
+export type Category = (typeof categories)[number];
+export type CommunityCategory = (typeof communityCategories)[number];
 
-export type CategoryInfo = {
-	id: CategoryKeys;
-	name: string;
-	description: string;
-};
+export type AdderCategories = Record<Category, string[]>;
 
-export type CategoryDetails = Record<CategoryKeys, CategoryInfo>;
+// the order defined here is how it'll be shown in the prompt
+export const categories = [
+	'Code Quality',
+	'Testing',
+	'CSS',
+	'Database',
+	'Auth',
+	'Additional Functionality'
+] as const;
 
-export type AdderCategories = Record<CategoryKeys, string[]>;
-
-export const categories: CategoryDetails = {
-	codeQuality: {
-		id: 'codeQuality',
-		name: 'Code Quality',
-		description: ''
-	},
-	testing: {
-		id: 'testing',
-		name: 'Testing',
-		description: ''
-	},
-	css: {
-		id: 'css',
-		name: 'CSS',
-		description: 'Can be used to style your components'
-	},
-	db: {
-		id: 'db',
-		name: 'Database',
-		description: ''
-	},
-	auth: {
-		id: 'auth',
-		name: 'Auth',
-		description: ''
-	},
-	additional: {
-		id: 'additional',
-		name: 'Additional functionality',
-		description: ''
-	}
-};
+export const communityCategories = ['Icon'] as const;

packages/adders/_config/community.ts

@@ -1,17 +1,18 @@
+import type { Category, CommunityCategory } from './categories.ts';
+
 export type CommunityAdder = {
 	name: string;
 	description: string;
-	category: string;
+	category: Category | CommunityCategory;
 	npm: string;
 	repo: string;
 	website: string;
-	logo: string;
 };
 
 /** EVALUATED AT BUILD TIME */
 export const communityAdderIds: string[] = [];
 
-export async function getCommunityAdders(name: string): Promise<CommunityAdder> {
-	const { default: details } = await import(`../../../community/${name}.ts`);
+export async function getCommunityAdder(name: string): Promise<CommunityAdder> {
+	const { default: details } = await import(`../../../community-adders/${name}.ts`);
 	return details;
 }

packages/adders/_config/index.ts

@@ -1,3 +1,8 @@
 export { adderIds, adderCategories, getAdderDetails } from './official.ts';
-export { categories, type CategoryKeys, type CategoryInfo } from './categories.ts';
-export { getCommunityAdders, communityAdderIds } from './community.ts';
+export {
+	categories,
+	communityCategories,
+	type Category,
+	type CommunityCategory
+} from './categories.ts';
+export { getCommunityAdder, communityAdderIds } from './community.ts';

packages/adders/_config/official.ts

@@ -1,5 +1,5 @@
-import type { AdderCategories } from './categories.ts';
-import type { AdderWithoutExplicitArgs } from '@svelte-cli/core';
+import type { AdderCategories, Category } from './categories.ts';
+import type { AdderWithoutExplicitArgs, Adder } from '@svelte-cli/core';
 
 // adders
 import drizzle from '../drizzle/index.ts';
@@ -13,13 +13,13 @@ import storybook from '../storybook/index.ts';
 import tailwindcss from '../tailwindcss/index.ts';
 import vitest from '../vitest/index.ts';
 
-const categories = {
-	codeQuality: [prettier, eslint],
-	testing: [vitest, playwright],
-	css: [tailwindcss],
-	db: [drizzle],
-	auth: [lucia],
-	additional: [storybook, mdsvex, routify]
+const categories: Record<Category, Array<Adder<any>>> = {
+	'Code Quality': [prettier, eslint],
+	Testing: [vitest, playwright],
+	CSS: [tailwindcss],
+	Database: [drizzle],
+	Auth: [lucia],
+	'Additional Functionality': [storybook, mdsvex, routify]
 };
 
 export const adderCategories: AdderCategories = getCategoriesById();

packages/adders/eslint/config/adder.ts

@@ -14,7 +14,7 @@ export const adder = defineAdderConfig({
 		website: {
 			logo: './eslint.svg',
 			keywords: ['eslint', 'code', 'linter'],
-			documentation: 'https://eslint.org/'
+			documentation: 'https://eslint.org'
 		}
 	},
 	options,

packages/adders/playwright/config/adder.ts

@@ -13,7 +13,7 @@ export const adder = defineAdderConfig({
 		website: {
 			logo: './playwright.svg',
 			keywords: ['test', 'testing', 'end-to-end', 'e2e', 'integration'],
-			documentation: 'https://playwright.dev/'
+			documentation: 'https://playwright.dev'
 		}
 	},
 	options,

packages/adders/vitest/config/adder.ts

@@ -11,7 +11,7 @@ export const adder = defineAdderConfig({
 		website: {
 			logo: './vitest.svg',
 			keywords: ['test', 'testing', 'unit', 'unit-testing'],
-			documentation: 'https://vitest.dev/'
+			documentation: 'https://vitest.dev'
 		}
 	},
 	options,

packages/cli/commands/add.ts

@@ -11,7 +11,7 @@ import {
 	adderIds,
 	getAdderDetails,
 	communityAdderIds,
-	getCommunityAdders
+	getCommunityAdder
 } from '@svelte-cli/adders';
 import {
 	createOrUpdateFiles,
@@ -39,7 +39,7 @@ const OptionsSchema = v.strictObject({
 	cwd: v.string(),
 	install: v.boolean(),
 	preconditions: v.boolean(),
-	community: v.optional(AddersSchema),
+	community: v.optional(v.union([AddersSchema, v.boolean()])),
 	...AdderOptionFlagsSchema.entries
 });
 type Options = v.InferOutput<typeof OptionsSchema>;
@@ -76,17 +76,6 @@ export const add = new Command('add')
 			process.exit(1);
 		}
 
-		// we'll print a list of available options when `--community` is specified with no args
-		if (opts.community === true) {
-			console.log('Usage: sv add --community [adder...]\n');
-			console.log('Applies community made adders\n');
-			console.log(`Available options: ${communityAdderIds.join(', ')}\n`);
-			console.warn(
-				'The Svelte maintainers have not reviewed community adders for malicious code. Use at your discretion.'
-			);
-			process.exit(0);
-		}
-
 		const adders = v.parse(AddersSchema, adderArgs);
 		const options = v.parse(OptionsSchema, opts);
 
@@ -185,8 +174,47 @@ export async function runAddCommand(options: Options, adders: string[]): Promise
 		}
 	}
 
+	type AdderChoices = Record<string, Array<{ value: string; label: string }>>;
+
+	// we'll let the user choose community adders when `--community` is specified without args
+	if (options.community === true) {
+		const promptOptions: AdderChoices = {};
+		const communityAdders = await Promise.all(
+			communityAdderIds.map(async (id) => ({ id, ...(await getCommunityAdder(id)) }))
+		);
+		const categories = new Set(communityAdders.map((adder) => adder.category));
+
+		for (const category of categories) {
+			promptOptions[category] = communityAdders
+				.filter((adder) => adder.category === category)
+				.map((adder) => ({
+					value: adder.id,
+					label: adder.name,
+					hint: adder.repo
+				}));
+		}
+
+		const selected = await p.groupMultiselect({
+			message: 'Which community tools would you like to add to your project?',
+			options: promptOptions,
+			spacedGroups: true,
+			selectableGroups: false,
+			required: false
+		});
+
+		if (p.isCancel(selected)) {
+			p.cancel('Operation cancelled.');
+			process.exit(1);
+		} else if (selected.length === 0) {
+			p.cancel('No adders selected. Exiting.');
+			process.exit(1);
+		}
+
+		options.community = selected;
+	}
+
 	// validate and download community adders
-	if (options.community && options.community?.length > 0) {
+	if (Array.isArray(options.community) && options.community.length > 0) {
 		// validate adders
 		const adders = options.community.map((id) => {
 			// ids with directives are passed unmodified so they can be processed during downloads
@@ -208,16 +236,33 @@ export async function runAddCommand(options: Options, adders: string[]): Promise
 			start('Resolving community adder packages');
 			const pkgs = await Promise.all(
 				adders.map(async (id) => {
-					const pkg = await getCommunityAdders(id).catch(() => undefined);
-					const packageName = pkg?.npm ?? id;
-					return getPackageJSON({ cwd: options.cwd, packageName });
+					const adder = await getCommunityAdder(id).catch(() => undefined);
+					const packageName = adder?.npm ?? id;
+					const details = await getPackageJSON({ cwd: options.cwd, packageName });
+					return {
+						...details,
+						// prioritize community adder defined repo urls
+						repo: adder?.repo ?? details.repo
+					};
 				})
 			);
 			stop('Resolved community adder packages');
 
-			const ids = pkgs.map(({ pkg }) => pc.yellowBright(pkg.name) + pc.dim(` (v${pkg.version})`));
-			p.log.warn('Community packages are not reviewed for malicious code:');
-			p.log.message(ids.join(', '));
+			p.log.warn(
+				'The Svelte maintainers have not reviewed community adders for malicious code. Use at your discretion.'
+			);
+
+			const paddingName = getPadding(pkgs.map(({ pkg }) => pkg.name));
+			const paddingVersion = getPadding(pkgs.map(({ pkg }) => `(v${pkg.version})`));
+
+			const packageInfos = pkgs.map(({ pkg, repo: _repo }) => {
+				const name = pc.yellowBright(pkg.name.padEnd(paddingName));
+				const version = pc.dim(`(v${pkg.version})`.padEnd(paddingVersion));
+				const repo = pc.dim(`(${_repo})`);
+				return `${name} ${version} ${repo}`;
+			});
+			p.log.message(packageInfos.join('\n'));
+
 			const confirm = await p.confirm({ message: 'Would you like to continue?' });
 			if (confirm !== true) {
 				p.cancel('Operation cancelled.');
@@ -241,24 +286,28 @@ export async function runAddCommand(options: Options, adders: string[]): Promise
 
 	// prompt which adders to apply
 	if (selectedAdders.length === 0) {
-		const adderOptions: Record<string, Array<{ value: string; label: string }>> = {};
+		const adderOptions: AdderChoices = {};
 		const workspace = createWorkspace(options.cwd);
 		const projectType = workspace.kit ? 'kit' : 'svelte';
-		for (const { id, name } of Object.values(categories)) {
-			const category = adderCategories[id];
-			const categoryOptions = category
+		for (const category of categories) {
+			const adderIds = adderCategories[category];
+			const categoryOptions = adderIds
 				.map((id) => {
 					const config = getAdderDetails(id).config;
 					// we'll only display adders within their respective project types
 					if (projectType === 'kit' && !config.metadata.environments.kit) return;
 					if (projectType === 'svelte' && !config.metadata.environments.svelte) return;
 
-					return { label: config.metadata.name, value: config.metadata.id };
+					return {
+						label: config.metadata.name,
+						value: config.metadata.id,
+						hint: config.metadata.website?.documentation
+					};
 				})
 				.filter((c) => !!c);
 
 			if (categoryOptions.length > 0) {
-				adderOptions[name] = categoryOptions;
+				adderOptions[category] = categoryOptions;
 			}
 		}
 
@@ -526,12 +575,9 @@ async function processExternalAdder<Args extends OptionDefinition>(
 	if (!TESTING) p.log.message(`Executing external command ${pc.gray(`(${config.metadata.id})`)}`);
 
 	try {
+		const env = { ...process.env, ...config.environment };
 		await exec('npx', config.command.split(' '), {
-			nodeOptions: {
-				cwd,
-				env: Object.assign(process.env, config.environment ?? {}),
-				stdio: TESTING ? 'pipe' : 'inherit'
-			}
+			nodeOptions: { cwd, env, stdio: TESTING ? 'pipe' : 'inherit' }
 		});
 	} catch (error) {
 		const typedError = error as Error;
@@ -622,3 +668,8 @@ function getOptionChoices(details: AdderWithoutExplicitArgs) {
 	}
 	return { choices, defaults, groups };
 }
+
+function getPadding(lines: string[]) {
+	const lengths = lines.map((s) => s.length);
+	return Math.max(...lengths);
+}