feat: improved homescreen for adding or creating projects

.changeset/rude-seals-behave.md

@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+feat: improved homescreen for adding or creating projects

community-adder-template/src/index.js

@@ -1,3 +1,37 @@
-import { adder } from './config/adder.js';
+import { defineAdder, defineAdderOptions } from '@sveltejs/cli-core';
+import { imports } from '@sveltejs/cli-core/js';
+import { parseScript } from '@sveltejs/cli-core/parsers';
 
-export default adder;
+export const options = defineAdderOptions({
+    demo: {
+        question: 'Do you want to use a demo?',
+        type: 'boolean',
+        default: false
+    }
+});
+
+export const adder = defineAdder({
+	id: 'community-adder-template',
+	environments: { kit: true, svelte: true },
+	options,
+	packages: [],
+	files: [
+		{
+			name: () => 'adder-template-demo.txt',
+			content: ({ content, options }) => {
+				if (options.demo) {
+					return 'This is a text file made by the Community Adder Template demo!';
+				}
+				return content;
+			}
+		},
+		{
+			name: () => 'src/DemoComponent.svelte',
+			content: ({ content }) => {
+				const { ast, generateCode } = parseScript(content);
+				imports.addDefault(ast, '../adder-template-demo.txt?raw', 'Demo');
+				return generateCode();
+			}
+		}
+	]
+});

community-adder-template/tests/tests.js

@@ -1,5 +1,5 @@
 import { defineAdderTests } from '@sveltejs/cli-core';
-import { options } from '../src/config/options.js';
+import { options } from '../src/index.js';
 
 export const tests = defineAdderTests({
 	files: [],

community-adders/unocss.ts

@@ -1,10 +1,5 @@
 import type { CommunityAdder } from '../packages/adders/_config/community.ts';
 
 export default {
-	name: 'UnoCSS',
-	description: 'The instant on-demand Atomic CSS engine',
-	category: 'CSS',
-	npm: 'unocss-svelte-integration',
-	repo: 'https://github.com/owner-name/repo-name',
-	website: 'https://unocss.dev'
+	id: 'unocss-svelte-integration'
 } satisfies CommunityAdder;

community-adders/unplugin-icons.ts

@@ -1,10 +1,5 @@
 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: 'Icon',
-	npm: 'unplugin-icons-svelte-integration',
-	repo: 'https://github.com/owner-name/repo-name',
-	website: 'https://github.com/unplugin/unplugin-icons'
+	id: 'unplugin-icons-svelte-integration'
 } satisfies CommunityAdder;

package.json

@@ -5,12 +5,12 @@
 	"private": true,
 	"type": "module",
 	"scripts": {
-		"check": "pnpm -r check",
-		"lint": "pnpm -r lint && eslint --cache --cache-location node_modules/.eslintcache",
-		"format": "pnpm -r format",
+		"check": "pnpm --parallel check",
+		"lint": "pnpm --parallel lint && eslint --cache --cache-location node_modules/.eslintcache",
+		"format": "pnpm --parallel format",
 		"dev": "rollup --config --watch",
 		"build": "rollup -c",
-		"test": "pnpm -r test",
+		"test": "pnpm --parallel test",
 		"changeset:publish": "changeset publish"
 	},
 	"devDependencies": {

packages/adders/_config/community.ts

@@ -1,12 +1,5 @@
-import type { Category, CommunityCategory } from './categories.ts';
-
 export type CommunityAdder = {
-	name: string;
-	description: string;
-	category: Category | CommunityCategory;
-	npm: string;
-	repo: string;
-	website: string;
+	id: string; // the npm package name
 };
 
 /** EVALUATED AT BUILD TIME */

packages/adders/_config/index.ts

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

packages/adders/_config/official.ts

@@ -1,7 +1,5 @@
-import type { AdderCategories, Category } from './categories.ts';
-import type { AdderWithoutExplicitArgs, Adder } from '@sveltejs/cli-core';
+import type { AdderWithoutExplicitArgs } from '@sveltejs/cli-core';
 
-// adders
 import drizzle from '../drizzle/index.ts';
 import eslint from '../eslint/index.ts';
 import lucia from '../lucia/index.ts';
@@ -14,33 +12,26 @@ import storybook from '../storybook/index.ts';
 import tailwindcss from '../tailwindcss/index.ts';
 import vitest from '../vitest/index.ts';
 
-const categories: Record<Category, Array<Adder<any>>> = {
-	'Code Quality': [prettier, eslint],
-	Testing: [vitest, playwright],
-	CSS: [tailwindcss],
-	Database: [drizzle],
-	Auth: [lucia],
-	'Additional Functionality': [storybook, paraglide, 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.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.id === name);
+// The order of adders here determines the order they are displayed inside the CLI
+// We generally try to order them by perceived popularity
+export const officialAdders = [
+	prettier,
+	eslint,
+	vitest,
+	playwright,
+	tailwindcss,
+	drizzle,
+	lucia,
+	mdsvex,
+	paraglide,
+	storybook,
+	routify
+];
+
+export function getAdderDetails(id: string): AdderWithoutExplicitArgs {
+	const details = officialAdders.find((a) => a.id === id);
 	if (!details) {
-		throw new Error(`Invalid adder name: ${name}`);
+		throw new Error(`Invalid adder: ${id}`);
 	}
 
 	return details as AdderWithoutExplicitArgs;

packages/adders/drizzle/index.ts

@@ -65,10 +65,8 @@ export const options = defineAdderOptions({
 
 export default defineAdder({
 	id: 'drizzle',
-	name: 'Drizzle',
-	description: 'Headless ORM for NodeJS, TypeScript and JavaScript',
 	environments: { svelte: false, kit: true },
-	documentation: 'https://orm.drizzle.team/docs/overview',
+	homepage: 'https://orm.drizzle.team',
 	options,
 	packages: [
 		{ name: 'drizzle-orm', version: '^0.33.0', dev: false },

packages/adders/eslint/index.ts

@@ -16,10 +16,8 @@ import { parseJson, parseScript } from '@sveltejs/cli-core/parsers';
 
 export default defineAdder({
 	id: 'eslint',
-	name: 'ESLint',
-	description: 'A configurable JavaScript linter',
 	environments: { svelte: true, kit: true },
-	documentation: 'https://eslint.org',
+	homepage: 'https://eslint.org',
 	options: {},
 	packages: [
 		{ name: 'eslint', version: '^9.7.0', dev: true },

packages/adders/lucia/index.ts

@@ -39,10 +39,8 @@ export const options = defineAdderOptions({
 
 export default defineAdder({
 	id: 'lucia',
-	name: 'Lucia',
-	description: 'An auth library that abstracts away the complexity of handling sessions',
 	environments: { svelte: false, kit: true },
-	documentation: 'https://lucia-auth.com',
+	homepage: 'https://lucia-next.pages.dev',
 	options,
 	packages: [
 		{ name: 'lucia', version: '^3.2.0', dev: false },

packages/adders/mdsvex/index.ts

@@ -4,10 +4,8 @@ import { parseScript } from '@sveltejs/cli-core/parsers';
 
 export default defineAdder({
 	id: 'mdsvex',
-	name: 'mdsvex',
-	description: 'svelte in markdown',
 	environments: { svelte: true, kit: true },
-	documentation: 'https://mdsvex.pngwn.io/docs',
+	homepage: 'https://mdsvex.pngwn.io',
 	options: {},
 	packages: [{ name: 'mdsvex', version: '^0.11.2', dev: true }],
 	files: [

packages/adders/paraglide/index.ts

@@ -63,10 +63,8 @@ export const options = defineAdderOptions({
 
 export default defineAdder({
 	id: 'paraglide',
-	name: 'Paraglide',
-	description: 'Typesafe i18n with localised routing',
 	environments: { svelte: false, kit: true },
-	documentation: 'https://inlang.com/m/dxnzrydw/paraglide-sveltekit-i18n',
+	homepage: 'https://inlang.com',
 	options,
 	packages: [
 		{

packages/adders/playwright/index.ts

@@ -6,10 +6,8 @@ import { parseJson, parseScript } from '@sveltejs/cli-core/parsers';
 
 export default defineAdder({
 	id: 'playwright',
-	name: 'Playwright',
-	description: 'A testing framework for end-to-end testing',
 	environments: { svelte: true, kit: true },
-	documentation: 'https://playwright.dev',
+	homepage: 'https://playwright.dev',
 	options: {},
 	packages: [{ name: '@playwright/test', version: '^1.45.3', dev: true }],
 	files: [

packages/adders/prettier/index.ts

@@ -4,10 +4,8 @@ import { parseJson } from '@sveltejs/cli-core/parsers';
 
 export default defineAdder({
 	id: 'prettier',
-	name: 'Prettier',
-	description: 'An opinionated code formatter',
 	environments: { svelte: true, kit: true },
-	documentation: 'https://prettier.io',
+	homepage: 'https://prettier.io',
 	options: {},
 	packages: [
 		{ name: 'prettier', version: '^3.3.2', dev: true },

packages/adders/routify/index.ts

@@ -5,10 +5,8 @@ import { parseScript, parseSvelte } from '@sveltejs/cli-core/parsers';
 
 export default defineAdder({
 	id: 'routify',
-	name: 'Routify',
-	description: 'The Router that Grows With You',
 	environments: { svelte: true, kit: false },
-	documentation: 'https://routify.dev',
+	homepage: 'https://routify.dev',
 	options: {},
 	packages: [{ name: '@roxi/routify', version: 'next', dev: true }],
 	files: [

packages/adders/storybook/index.ts

@@ -2,10 +2,8 @@ import { defineAdder } from '@sveltejs/cli-core';
 
 export default defineAdder({
 	id: 'storybook',
-	name: 'Storybook',
-	description: 'Build UIs without the grunt work',
 	environments: { kit: true, svelte: true },
-	documentation: 'https://storybook.js.org/docs/get-started',
+	homepage: 'https://storybook.js.org',
 	options: {},
 	packages: [],
 	scripts: [

packages/adders/tailwindcss/index.ts

@@ -16,10 +16,8 @@ export const options = defineAdderOptions({
 export default defineAdder({
 	id: 'tailwindcss',
 	alias: 'tailwind',
-	name: 'Tailwind CSS',
-	description: 'Rapidly build modern websites without ever leaving your HTML',
 	environments: { svelte: true, kit: true },
-	documentation: 'https://tailwindcss.com/docs',
+	homepage: 'https://tailwindcss.com',
 	options,
 	packages: [
 		{ name: 'tailwindcss', version: '^3.4.9', dev: true },

packages/adders/vitest/index.ts

@@ -4,10 +4,8 @@ import { parseJson, parseScript } from '@sveltejs/cli-core/parsers';
 
 export default defineAdder({
 	id: 'vitest',
-	name: 'Vitest',
-	description: 'A testing framework powered by Vite',
 	environments: { svelte: true, kit: true },
-	documentation: 'https://vitest.dev',
+	homepage: 'https://vitest.dev',
 	options: {},
 	packages: [{ name: 'vitest', version: '^2.0.4', dev: true }],
 	files: [