feat: add create and add commands

package.json

@@ -30,7 +30,8 @@
 		"rollup": "^4.20.0",
 		"rollup-plugin-esbuild": "^6.1.1",
 		"rollup-plugin-preserve-shebangs": "^0.2.0",
-		"typescript": "^5.3.3",
+		"sv": "workspace:*",
+		"typescript": "^5.5.4",
 		"typescript-eslint": "^8.0.0",
 		"unplugin-isolated-decl": "^0.4.7"
 	},

packages/config/categories.ts → packages/adders/_config/categories.ts

@@ -1,10 +1,11 @@
+export type CategoryKeys = 'codeQuality' | 'css' | 'db' | 'testing' | 'additional';
+
 export type CategoryInfo = {
-	id: string;
+	id: CategoryKeys;
 	name: string;
 	description: string;
 };
 
-export type CategoryKeys = 'codeQuality' | 'css' | 'db' | 'testing' | 'additional';
 export type CategoryDetails = Record<CategoryKeys, CategoryInfo>;
 
 export type AdderCategories = Record<CategoryKeys, string[]>;
@@ -25,14 +26,14 @@ export const categories: CategoryDetails = {
 		name: 'CSS',
 		description: 'Can be used to style your components'
 	},
-	additional: {
-		id: 'additional',
-		name: 'Additional functionality',
-		description: ''
-	},
 	db: {
 		id: 'db',
 		name: 'Database',
 		description: ''
+	},
+	additional: {
+		id: 'additional',
+		name: 'Additional functionality',
+		description: ''
 	}
 };

packages/adders/_config/index.ts

@@ -0,0 +1,3 @@
+export { adderIds, adderCategories, getAdderDetails } from './official';
+export { categories, type CategoryKeys, type CategoryInfo } from './categories';
+export { communityAdders } from './community';

packages/adders/_config/official.ts

@@ -0,0 +1,44 @@
+import type { AdderCategories } from './categories';
+import type { AdderWithoutExplicitArgs } from '@svelte-cli/core';
+
+// adders
+import drizzle from '../drizzle';
+import eslint from '../eslint';
+import mdsvex from '../mdsvex';
+import playwright from '../playwright';
+import prettier from '../prettier';
+import routify from '../routify';
+import storybook from '../storybook';
+import tailwindcss from '../tailwindcss';
+import vitest from '../vitest';
+
+const categories = {
+	codeQuality: [prettier, eslint],
+	testing: [vitest, playwright],
+	css: [tailwindcss],
+	db: [drizzle],
+	additional: [storybook, mdsvex, routify]
+};
+
+export const adderCategories: AdderCategories = getCategoriesById();
+
+function getCategoriesById(): AdderCategories {
+	const adderCategories: any = {};
+	for (const [key, adders] of Object.entries(categories)) {
+		adderCategories[key] = adders.map((a) => a.config.metadata.id);
+	}
+	return adderCategories;
+}
+
+export const adderIds: string[] = Object.values(adderCategories).flatMap((x) => x);
+
+const adderDetails = Object.values(categories).flat();
+
+export function getAdderDetails(name: string): AdderWithoutExplicitArgs {
+	const details = adderDetails.find((a) => a.config.metadata.id === name);
+	if (!details) {
+		throw new Error(`invalid adder name: ${name}`);
+	}
+
+	return details as AdderWithoutExplicitArgs;
+}

packages/adders/common.ts

@@ -1,12 +1,12 @@
-import type { ScriptFileEditorArgs } from '@svelte-cli/core';
+import type { ScriptFileEditor } from '@svelte-cli/core';
 import type { Question } from '../core/internal';
 
 export function addEslintConfigPrettier({
 	ast,
 	imports,
 	exports,
 	common
-}: ScriptFileEditorArgs<Record<string, Question>>) {
+}: ScriptFileEditor<Record<string, Question>>) {
 	// if a default import for `eslint-plugin-svelte` already exists, then we'll use their specifier's name instead
 	const importNodes = ast.body.filter((n) => n.type === 'ImportDeclaration');
 	const sveltePluginImport = importNodes.find(

packages/adders/drizzle/config/adder.ts

@@ -1,4 +1,4 @@
-import { defineAdderConfig, dedent, type TextFileEditorArgs } from '@svelte-cli/core';
+import { defineAdderConfig, dedent, type TextFileEditor } from '@svelte-cli/core';
 import { options as availableOptions } from './options';
 
 const PORTS = {
@@ -151,7 +151,7 @@ export const adder = defineAdderConfig({
 			}
 		},
 		{
-			name: ({ typescript }) => `drizzle.config.${typescript.installed ? 'ts' : 'js'}`,
+			name: ({ typescript }) => `drizzle.config.${typescript ? 'ts' : 'js'}`,
 			contentType: 'script',
 			content: ({ options, ast, common, exports, typescript, imports, object }) => {
 				imports.addNamed(ast, 'drizzle-kit', { defineConfig: 'defineConfig' });
@@ -175,9 +175,7 @@ export const adder = defineAdderConfig({
 						: undefined;
 
 				object.properties(objExpression, {
-					schema: common.createLiteral(
-						`./src/lib/server/db/schema.${typescript.installed ? 'ts' : 'js'}`
-					),
+					schema: common.createLiteral(`./src/lib/server/db/schema.${typescript ? 'ts' : 'js'}`),
 					dbCredentials: object.create({
 						url: common.expressionFromString('process.env.DATABASE_URL'),
 						authToken
@@ -198,7 +196,7 @@ export const adder = defineAdderConfig({
 		},
 		{
 			name: ({ kit, typescript }) =>
-				`${kit.libDirectory}/server/db/schema.${typescript.installed ? 'ts' : 'js'}`,
+				`${kit?.libDirectory}/server/db/schema.${typescript ? 'ts' : 'js'}`,
 			contentType: 'script',
 			content: ({ ast, exports, imports, options, common, variables }) => {
 				let userSchemaExpression;
@@ -251,7 +249,7 @@ export const adder = defineAdderConfig({
 		},
 		{
 			name: ({ kit, typescript }) =>
-				`${kit.libDirectory}/server/db/index.${typescript.installed ? 'ts' : 'js'}`,
+				`${kit?.libDirectory}/server/db/index.${typescript ? 'ts' : 'js'}`,
 			contentType: 'script',
 			content: ({ ast, exports, imports, options, common, functions, variables }) => {
 				imports.addNamed(ast, '$env/dynamic/private', { env: 'env' });
@@ -337,7 +335,7 @@ export const adder = defineAdderConfig({
 	}
 });
 
-function generateEnvFileContent({ content, options }: TextFileEditorArgs<typeof availableOptions>) {
+function generateEnvFileContent({ content, options }: TextFileEditor<typeof availableOptions>) {
 	const DB_URL_KEY = 'DATABASE_URL';
 	if (options.docker) {
 		// we'll prefill with the default docker db credentials

packages/adders/drizzle/config/tests.ts

@@ -18,9 +18,9 @@ export const tests = defineAdderTests({
 	],
 	files: [
 		{
-			name: ({ kit }) => `${kit.routesDirectory}/+page.svelte`,
+			name: ({ kit }) => `${kit?.routesDirectory}/+page.svelte`,
 			contentType: 'svelte',
-			condition: ({ kit }) => kit.installed,
+			condition: ({ kit }) => Boolean(kit),
 			content: ({ html, js }) => {
 				js.common.addFromString(js.ast, 'export let data;');
 				html.addFromRawHtml(
@@ -35,9 +35,9 @@ export const tests = defineAdderTests({
 		},
 		{
 			name: ({ kit, typescript }) =>
-				`${kit.routesDirectory}/+page.server.${typescript.installed ? 'ts' : 'js'}`,
+				`${kit?.routesDirectory}/+page.server.${typescript ? 'ts' : 'js'}`,
 			contentType: 'script',
-			condition: ({ kit }) => kit.installed,
+			condition: ({ kit }) => Boolean(kit),
 			content: ({ ast, common, typescript }) => {
 				common.addFromString(
 					ast,
@@ -53,9 +53,7 @@ export const tests = defineAdderTests({
                         return { users };
                     };
 
-                    function insertUser(${
-											typescript.installed ? 'value: typeof user.$inferInsert' : 'value'
-										}) {
+                    function insertUser(${typescript ? 'value: typeof user.$inferInsert' : 'value'}) {
                         return db.insert(user).values(value);
                     }
                     `
@@ -64,9 +62,9 @@ export const tests = defineAdderTests({
 		},
 		{
 			// override the config so we can remove strict mode
-			name: ({ typescript }) => `drizzle.config.${typescript.installed ? 'ts' : 'js'}`,
+			name: ({ typescript }) => `drizzle.config.${typescript ? 'ts' : 'js'}`,
 			contentType: 'text',
-			condition: ({ kit }) => kit.installed,
+			condition: ({ kit }) => Boolean(kit),
 			content: ({ content }) => {
 				return content.replace('strict: true,', '');
 			}

packages/adders/drizzle/index.ts

@@ -1,5 +1,3 @@
-#!/usr/bin/env node
-
 import { defineAdder } from '@svelte-cli/core';
 import { adder } from './config/adder.js';
 import { checks } from './config/checks.js';

packages/adders/eslint/config/adder.ts

@@ -26,14 +26,14 @@ export const adder = defineAdderConfig({
 			name: 'typescript-eslint',
 			version: '^8.0.0',
 			dev: true,
-			condition: ({ typescript }) => typescript.installed
+			condition: ({ typescript }) => typescript
 		},
 		{ name: 'eslint-plugin-svelte', version: '^2.36.0', dev: true },
 		{
 			name: 'eslint-config-prettier',
 			version: '^9.1.0',
 			dev: true,
-			condition: ({ prettier }) => prettier.installed
+			condition: ({ prettier }) => prettier
 		}
 	],
 	files: [
@@ -69,7 +69,7 @@ export const adder = defineAdderConfig({
 				const jsConfig = common.expressionFromString('js.configs.recommended');
 				array.push(eslintConfigs, jsConfig);
 
-				if (typescript.installed) {
+				if (typescript) {
 					const tsConfig = common.expressionFromString('ts.configs.recommended');
 					array.push(eslintConfigs, common.createSpreadElement(tsConfig));
 				}
@@ -90,7 +90,7 @@ export const adder = defineAdderConfig({
 				});
 				array.push(eslintConfigs, globalsConfig);
 
-				if (typescript.installed) {
+				if (typescript) {
 					const svelteTSParserConfig = object.create({
 						files: common.expressionFromString('["**/*.svelte"]'),
 						languageOptions: object.create({
@@ -118,7 +118,7 @@ export const adder = defineAdderConfig({
 				common.addJsDocTypeComment(defaultExport.astNode, "import('eslint').Linter.Config[]");
 
 				// imports
-				if (typescript.installed) imports.addDefault(ast, 'typescript-eslint', 'ts');
+				if (typescript) imports.addDefault(ast, 'typescript-eslint', 'ts');
 				imports.addDefault(ast, 'globals', 'globals');
 				imports.addDefault(ast, 'eslint-plugin-svelte', 'svelte');
 				imports.addDefault(ast, '@eslint/js', 'js');
@@ -127,7 +127,7 @@ export const adder = defineAdderConfig({
 		{
 			name: () => 'eslint.config.js',
 			contentType: 'script',
-			condition: ({ prettier }) => prettier.installed,
+			condition: ({ prettier }) => prettier,
 			content: addEslintConfigPrettier
 		}
 	]

packages/adders/eslint/index.ts

@@ -1,5 +1,3 @@
-#!/usr/bin/env node
-
 import { defineAdder } from '@svelte-cli/core';
 import { adder } from './config/adder.js';
 import { checks } from './config/checks.js';

packages/adders/index.ts

@@ -1,21 +1 @@
-import type { AdderConfig, AdderWithoutExplicitArgs, Question } from '@svelte-cli/core';
-
-export async function getAdderDetails(name: string) {
-	const adder: { default: AdderWithoutExplicitArgs } = await import(`./${name}/index.ts`);
-
-	return adder.default;
-}
-
-export async function getAdderConfig(name: string) {
-	// Mainly used by the website
-	// Either vite / rollup or esbuild are not able to process the shebangs
-	// present on the `index.js` file. That's why we directly import the configuration
-	// for the website here, as this is the only important part.
-
-	const adder: Promise<{ adder: AdderConfig<Record<string, Question>> }> = await import(
-		`./${name}/config/adder.ts`
-	);
-	const { adder: adderConfig } = await adder;
-
-	return adderConfig;
-}
+export * from './_config/index';

packages/adders/mdsvex/config/tests.ts

@@ -1,36 +1,36 @@
 import {
 	defineAdderTests,
-	type SvelteFileEditorArgs,
-	type TextFileEditorArgs,
+	type SvelteFileEditor,
+	type TextFileEditor,
 	type OptionDefinition
 } from '@svelte-cli/core';
 import { options } from './options';
 
 export const tests = defineAdderTests({
 	files: [
 		{
-			name: ({ kit }) => `${kit.routesDirectory}/+page.svelte`,
+			name: ({ kit }) => `${kit?.routesDirectory}/+page.svelte`,
 			contentType: 'svelte',
 			content: useMarkdownFile,
-			condition: ({ kit }) => kit.installed
+			condition: ({ kit }) => Boolean(kit)
 		},
 		{
 			name: () => 'src/App.svelte',
 			contentType: 'svelte',
 			content: useMarkdownFile,
-			condition: ({ kit }) => !kit.installed
+			condition: ({ kit }) => !kit
 		},
 		{
-			name: ({ kit }) => `${kit.routesDirectory}/Demo.svx`,
+			name: ({ kit }) => `${kit?.routesDirectory}/Demo.svx`,
 			contentType: 'text',
 			content: addMarkdownFile,
-			condition: ({ kit }) => kit.installed
+			condition: ({ kit }) => Boolean(kit)
 		},
 		{
 			name: () => 'src/Demo.svx',
 			contentType: 'text',
 			content: addMarkdownFile,
-			condition: ({ kit }) => !kit.installed
+			condition: ({ kit }) => !kit
 		}
 	],
 	options,
@@ -47,7 +47,7 @@ export const tests = defineAdderTests({
 	]
 });
 
-function addMarkdownFile<Args extends OptionDefinition>(editor: TextFileEditorArgs<Args>) {
+function addMarkdownFile<Args extends OptionDefinition>(editor: TextFileEditor<Args>) {
 	// example taken from website: https://mdsvex.pngwn.io
 	return (
 		editor.content +
@@ -65,7 +65,7 @@ Markdown is pretty good but sometimes you just need more.
 	);
 }
 
-function useMarkdownFile<Args extends OptionDefinition>({ js, html }: SvelteFileEditorArgs<Args>) {
+function useMarkdownFile<Args extends OptionDefinition>({ js, html }: SvelteFileEditor<Args>) {
 	js.imports.addDefault(js.ast, './Demo.svx', 'Demo');
 
 	const div = html.div({ class: 'mdsvex' });

packages/adders/mdsvex/index.ts

@@ -1,5 +1,3 @@
-#!/usr/bin/env node
-
 import { defineAdder } from '@svelte-cli/core';
 import { adder } from './config/adder.js';
 import { tests } from './config/tests.js';

packages/adders/playwright/config/adder.ts

@@ -42,7 +42,7 @@ export const adder = defineAdderConfig({
 			}
 		},
 		{
-			name: ({ typescript }) => `e2e/demo.test.${typescript.installed ? 'ts' : 'js'}`,
+			name: ({ typescript }) => `e2e/demo.test.${typescript ? 'ts' : 'js'}`,
 			contentType: 'text',
 			content: ({ content }) => {
 				if (content) return content;
@@ -58,7 +58,7 @@ export const adder = defineAdderConfig({
 			}
 		},
 		{
-			name: ({ typescript }) => `playwright.config.${typescript.installed ? 'ts' : 'js'}`,
+			name: ({ typescript }) => `playwright.config.${typescript ? 'ts' : 'js'}`,
 			contentType: 'script',
 			content: ({ ast, imports, exports, common, object }) => {
 				const defineConfig = common.expressionFromString('defineConfig({})');

packages/adders/playwright/index.ts

@@ -1,5 +1,3 @@
-#!/usr/bin/env node
-
 import { defineAdder } from '@svelte-cli/core';
 import { adder } from './config/adder.js';
 import { checks } from './config/checks.js';

packages/adders/prettier/index.ts

@@ -1,5 +1,3 @@
-#!/usr/bin/env node
-
 import { defineAdder } from '@svelte-cli/core';
 import { adder } from './config/adder.js';
 import { checks } from './config/checks.js';