fix: adjust add-on option types (#692)

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

Author: AdrianGonz97

.changeset/mighty-papers-hammer.md

@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+fix: improve add-on option types

packages/addons/drizzle/index.ts

@@ -17,7 +17,7 @@ const options = defineAddonOptions()
 	.add('database', {
 		question: 'Which database would you like to use?',
 		type: 'select',
-		default: 'sqlite' as Database,
+		default: 'sqlite',
 		options: [
 			{ value: 'postgresql', label: 'PostgreSQL' },
 			{ value: 'mysql', label: 'MySQL' },
@@ -28,7 +28,7 @@ const options = defineAddonOptions()
 		question: 'Which PostgreSQL client would you like to use?',
 		type: 'select',
 		group: 'client',
-		default: 'postgres.js' as 'postgres.js' | 'neon',
+		default: 'postgres.js',
 		options: [
 			{ value: 'postgres.js', label: 'Postgres.JS', hint: 'recommended for most users' },
 			{ value: 'neon', label: 'Neon', hint: 'popular hosted platform' }
@@ -39,7 +39,7 @@ const options = defineAddonOptions()
 		question: 'Which MySQL client would you like to use?',
 		type: 'select',
 		group: 'client',
-		default: 'mysql2' as 'mysql2' | 'planetscale',
+		default: 'mysql2',
 		options: [
 			{ value: 'mysql2', hint: 'recommended for most users' },
 			{ value: 'planetscale', label: 'PlanetScale', hint: 'popular hosted platform' }
@@ -113,7 +113,7 @@ export default defineAddon({
 		if (options.sqlite === 'better-sqlite3') {
 			sv.dependency('better-sqlite3', '^11.8.0');
 			sv.devDependency('@types/better-sqlite3', '^7.6.12');
-			sv.pnpmBuildDependendency('better-sqlite3');
+			sv.pnpmBuildDependency('better-sqlite3');
 		}
 
 		if (options.sqlite === 'libsql' || options.sqlite === 'turso')

packages/addons/sveltekit-adapter/index.ts

@@ -2,27 +2,21 @@ import { defineAddon, defineAddonOptions } from '@sveltejs/cli-core';
 import { exports, functions, imports, object, type AstTypes } from '@sveltejs/cli-core/js';
 import { parseJson, parseScript } from '@sveltejs/cli-core/parsers';
 
-type Adapter = {
-	id: string;
-	package: string;
-	version: string;
-};
-
-const adapters: Adapter[] = [
+const adapters = [
 	{ id: 'auto', package: '@sveltejs/adapter-auto', version: '^6.0.0' },
 	{ id: 'node', package: '@sveltejs/adapter-node', version: '^5.2.12' },
 	{ id: 'static', package: '@sveltejs/adapter-static', version: '^3.0.8' },
 	{ id: 'vercel', package: '@sveltejs/adapter-vercel', version: '^5.6.3' },
 	{ id: 'cloudflare', package: '@sveltejs/adapter-cloudflare', version: '^7.0.0' },
 	{ id: 'netlify', package: '@sveltejs/adapter-netlify', version: '^5.0.0' }
-];
+] as const;
 
 const options = defineAddonOptions()
 	.add('adapter', {
 		type: 'select',
 		question: 'Which SvelteKit adapter would you like to use?',
-		options: adapters.map((p) => ({ value: p.id, label: p.id, hint: p.package })),
-		default: 'auto'
+		default: 'auto',
+		options: adapters.map((p) => ({ value: p.id, label: p.id, hint: p.package }))
 	})
 	.build();
 

packages/addons/tailwindcss/index.ts

@@ -3,27 +3,25 @@ import { imports, vite } from '@sveltejs/cli-core/js';
 import { parseCss, parseJson, parseScript, parseSvelte } from '@sveltejs/cli-core/parsers';
 import { addSlot } from '@sveltejs/cli-core/html';
 
-function typedEntries<T extends Record<string, any>>(obj: T): Array<[keyof T, T[keyof T]]> {
-	return Object.entries(obj) as Array<[keyof T, T[keyof T]]>;
-}
-
-const plugins = {
-	typography: {
+const plugins = [
+	{
+		id: 'typography',
 		package: '@tailwindcss/typography',
 		version: '^0.5.15'
 	},
-	forms: {
+	{
+		id: 'forms',
 		package: '@tailwindcss/forms',
 		version: '^0.5.9'
 	}
-} as const;
+] as const;
 
 const options = defineAddonOptions()
 	.add('plugins', {
 		type: 'multiselect',
 		question: 'Which plugins would you like to add?',
-		options: typedEntries(plugins).map(([id, p]) => ({ value: id, label: id, hint: p.package })),
-		default: [] as Array<keyof typeof plugins>,
+		options: plugins.map((p) => ({ value: p.id, label: p.id, hint: p.package })),
+		default: [] as Array<(typeof plugins)[number]['id']>,
 		required: false
 	})
 	.build();
@@ -42,8 +40,8 @@ export default defineAddon({
 
 		if (prettierInstalled) sv.devDependency('prettier-plugin-tailwindcss', '^0.6.11');
 
-		for (const [id, plugin] of typedEntries(plugins)) {
-			if (!options.plugins.includes(id)) continue;
+		for (const plugin of plugins) {
+			if (!options.plugins.includes(plugin.id)) continue;
 
 			sv.devDependency(plugin.package, plugin.version);
 		}
@@ -81,8 +79,8 @@ export default defineAddon({
 			const lastAtRule = atRules.findLast((rule) => ['plugin', 'import'].includes(rule.name));
 			const pluginPos = lastAtRule!.source!.end!.offset;
 
-			for (const [id, plugin] of typedEntries(plugins)) {
-				if (!options.plugins.includes(id)) continue;
+			for (const plugin of plugins) {
+				if (!options.plugins.includes(plugin.id)) continue;
 
 				const pluginRule = findAtRule('plugin', plugin.package);
 				if (!pluginRule) {

packages/cli/commands/add/index.ts

@@ -634,10 +634,10 @@ function getOptionChoices(details: AddonWithoutExplicitArgs) {
 	const choices: string[] = [];
 	const defaults: string[] = [];
 	const groups: Record<string, string[]> = {};
-	const options: Record<string, unknown> = {};
+	const options: OptionValues<any> = {};
 	for (const [id, question] of Object.entries(details.options)) {
 		let values: string[] = [];
-		const applyDefault = question.condition?.(options as any) !== false;
+		const applyDefault = question.condition?.(options) !== false;
 		if (question.type === 'boolean') {
 			values = ['yes', `no`];
 			if (applyDefault) {

packages/cli/lib/install.ts

@@ -173,7 +173,7 @@ async function runAddon({ addon, multiple, workspace }: RunAddon) {
 		devDependency: (pkg, version) => {
 			dependencies.push({ pkg, version, dev: true });
 		},
-		pnpmBuildDependendency: (pkg) => {
+		pnpmBuildDependency: (pkg) => {
 			pnpmBuildDependencies.push(pkg);
 		}
 	};

packages/core/addon/config.ts

@@ -20,7 +20,7 @@ export type Scripts<Args extends OptionDefinition> = {
 };
 
 export type SvApi = {
-	pnpmBuildDependendency: (pkg: string) => void;
+	pnpmBuildDependency: (pkg: string) => void;
 	dependency: (pkg: string, version: string) => void;
 	devDependency: (pkg: string, version: string) => void;
 	execute: (args: string[], stdio: 'inherit' | 'pipe') => Promise<void>;
@@ -85,29 +85,32 @@ export type Verification = {
 	run: () => MaybePromise<{ success: boolean; message: string | undefined }>;
 };
 
+type Prettify<T> = {
+	[K in keyof T]: T[K];
+} & unknown;
+
 // Builder pattern for addon options
-export type OptionBuilder<T extends OptionDefinition = Record<string, any>> = {
-	add<K extends string, Q extends Question<T & Record<K, Q>>>(
+export type OptionBuilder<T extends OptionDefinition> = {
+	add<K extends string, const Q extends Question<T & Record<K, Q>>>(
 		key: K,
 		question: Q
 	): OptionBuilder<T & Record<K, Q>>;
-	build(): T;
+	build(): Prettify<T>;
 };
 
-export function defineAddonOptions(): OptionBuilder<Record<string, any>> {
-	return createOptionBuilder({} as Record<string, any>);
+// Initializing with an empty object is intended given that the starting state _is_ empty.
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export function defineAddonOptions(): OptionBuilder<{}> {
+	return createOptionBuilder({});
 }
 
-function createOptionBuilder<T extends OptionDefinition>(options: T = {} as T): OptionBuilder<T> {
+function createOptionBuilder<const T extends OptionDefinition>(options: T): OptionBuilder<T> {
 	return {
-		add<K extends string, Q extends Question<T & Record<K, Q>>>(
-			key: K,
-			question: Q
-		): OptionBuilder<T & Record<K, Q>> {
-			const newOptions = { ...options, [key]: question } as T & Record<K, Q>;
+		add(key, question) {
+			const newOptions = { ...options, [key]: question };
 			return createOptionBuilder(newOptions);
 		},
-		build(): T {
+		build() {
 			return options;
 		}
 	};

packages/core/addon/options.ts

@@ -17,20 +17,20 @@ export type NumberQuestion = {
 	placeholder?: string;
 };
 
-export type SelectQuestion<Value = any> = {
+export type SelectQuestion<Value> = {
 	type: 'select';
-	default: Value;
-	options: Array<{ value: string; label?: string; hint?: string }>;
+	default: NoInfer<Value>;
+	options: Array<{ value: Value; label?: string; hint?: string }>;
 };
 
-export type MultiSelectQuestion<Value extends any[] = string[]> = {
+export type MultiSelectQuestion<Value> = {
 	type: 'multiselect';
-	default: Value;
-	options: Array<{ value: string; label?: string; hint?: string }>;
+	default: NoInfer<Value[]>;
+	options: Array<{ value: Value; label?: string; hint?: string }>;
 	required: boolean;
 };
 
-export type BaseQuestion<Args extends OptionDefinition = OptionDefinition> = {
+export type BaseQuestion<Args extends OptionDefinition> = {
 	question: string;
 	group?: string;
 	/**
@@ -41,9 +41,16 @@ export type BaseQuestion<Args extends OptionDefinition = OptionDefinition> = {
 };
 
 export type Question<Args extends OptionDefinition = OptionDefinition> = BaseQuestion<Args> &
-	(BooleanQuestion | StringQuestion | NumberQuestion | SelectQuestion | MultiSelectQuestion);
+	(
+		| BooleanQuestion
+		| StringQuestion
+		| NumberQuestion
+		| SelectQuestion<any>
+		| MultiSelectQuestion<any>
+	);
 
 export type OptionDefinition = Record<string, Question<any>>;
+
 export type OptionValues<Args extends OptionDefinition> = {
 	[K in keyof Args]: Args[K] extends StringQuestion
 		? string
@@ -54,6 +61,6 @@ export type OptionValues<Args extends OptionDefinition> = {
 				: Args[K] extends SelectQuestion<infer Value>
 					? Value
 					: Args[K] extends MultiSelectQuestion<infer Value>
-						? Value // as the type of Value should already be an array (default: [] or default: ['foo', 'bar'])
-						: never;
+						? Value[]
+						: 'ERROR: The value for this type is invalid. Ensure that the `default` value exists in `options`.';
 };