Feat: [create astro] replace component selector with "astro add"

.changeset/khaki-turkeys-sparkle.md

@@ -0,0 +1,5 @@
+---
+'create-astro': minor
+---
+
+Replace the component framework selector with a new "run astro add" option. This unlocks integrations beyond components during your create-astro setup, including TailwindCSS and Partytown. This also replaces our previous "starter" template with a simplified "Just the basics" option.

packages/create-astro/package.json

@@ -33,7 +33,6 @@
     "degit": "^2.8.4",
     "execa": "^6.1.0",
     "kleur": "^4.1.4",
-    "node-fetch": "^3.2.3",
     "ora": "^6.1.0",
     "prompts": "^2.4.2",
     "yargs-parser": "^21.0.1"

packages/create-astro/src/index.ts

@@ -1,16 +1,13 @@
 import fs from 'fs';
 import path from 'path';
 import { bold, cyan, gray, green, red, yellow } from 'kleur/colors';
-import fetch from 'node-fetch';
 import prompts from 'prompts';
 import degit from 'degit';
 import yargs from 'yargs-parser';
 import ora from 'ora';
-import { FRAMEWORKS, COUNTER_COMPONENTS, Integration } from './frameworks.js';
 import { TEMPLATES } from './templates.js';
-import { createConfig } from './config.js';
 import { logger, defaultLogLevel } from './logger.js';
-import { execa } from 'execa';
+import { execa, execaCommand } from 'execa';
 
 // NOTE: In the v7.x version of npm, the default behavior of `npm init` was changed
 // to no longer require `--` to pass args and instead pass `--` directly to us. This
@@ -101,9 +98,7 @@ export async function main() {
 
 	const hash = args.commit ? `#${args.commit}` : '';
 
-	const templateTarget = options.template.includes('/')
-		? options.template
-		: `withastro/astro/examples/${options.template}#latest`;
+	const templateTarget = `withastro/astro/examples/${options.template}#latest`;
 
 	const emitter = degit(`${templateTarget}${hash}`, {
 		cache: false,
@@ -117,21 +112,6 @@ export async function main() {
 		verbose: defaultLogLevel === 'debug' ? true : false,
 	});
 
-	const selectedTemplate = TEMPLATES.find((template) => template.value === options.template);
-	let integrations: Integration[] = [];
-
-	if (selectedTemplate?.integrations === true) {
-		const result = await prompts([
-			{
-				type: 'multiselect',
-				name: 'integrations',
-				message: 'Which frameworks would you like to use?',
-				choices: FRAMEWORKS,
-			},
-		]);
-		integrations = result.integrations;
-	}
-
 	spinner = ora({ color: 'green', text: 'Copying project files...' }).start();
 
 	// Copy
@@ -181,7 +161,9 @@ export async function main() {
 		await Promise.all([
 			...FILES_TO_REMOVE.map(async (file) => {
 				const fileLoc = path.resolve(path.join(cwd, file));
-				return fs.promises.rm(fileLoc);
+				if (fs.existsSync(fileLoc)) {
+					return fs.promises.rm(fileLoc, {});
+				}
 			}),
 			...POSTPROCESS_FILES.map(async (file) => {
 				const fileLoc = path.resolve(path.join(cwd, file));
@@ -193,79 +175,9 @@ export async function main() {
 						}
 						break;
 					}
-					case 'astro.config.mjs': {
-						if (selectedTemplate?.integrations !== true) {
-							break;
-						}
-						await fs.promises.writeFile(fileLoc, createConfig({ integrations }));
-						break;
-					}
-					case 'package.json': {
-						const packageJSON = JSON.parse(await fs.promises.readFile(fileLoc, 'utf8'));
-						delete packageJSON.snowpack; // delete snowpack config only needed in monorepo (can mess up projects)
-						// Fetch latest versions of selected integrations
-						const integrationEntries = (
-							await Promise.all(
-								integrations.map((integration) =>
-									fetch(`https://registry.npmjs.org/${integration.packageName}/latest`)
-										.then((res) => res.json())
-										.then((res: any) => {
-											let dependencies: [string, string][] = [[res['name'], `^${res['version']}`]];
-
-											if (res['peerDependencies']) {
-												for (const peer in res['peerDependencies']) {
-													dependencies.push([peer, res['peerDependencies'][peer]]);
-												}
-											}
-
-											return dependencies;
-										})
-								)
-							)
-						).flat(1);
-						// merge and sort dependencies
-						packageJSON.devDependencies = {
-							...(packageJSON.devDependencies ?? {}),
-							...Object.fromEntries(integrationEntries),
-						};
-						packageJSON.devDependencies = Object.fromEntries(
-							Object.entries(packageJSON.devDependencies).sort((a, b) => a[0].localeCompare(b[0]))
-						);
-						await fs.promises.writeFile(fileLoc, JSON.stringify(packageJSON, undefined, 2));
-						break;
-					}
 				}
 			}),
 		]);
-
-		// Inject framework components into starter template
-		if (selectedTemplate?.value === 'starter') {
-			let importStatements: string[] = [];
-			let components: string[] = [];
-			await Promise.all(
-				integrations.map(async (integration) => {
-					const component = COUNTER_COMPONENTS[integration.id as keyof typeof COUNTER_COMPONENTS];
-					const componentName = path.basename(component.filename, path.extname(component.filename));
-					const absFileLoc = path.resolve(cwd, component.filename);
-					importStatements.push(
-						`import ${componentName} from '${component.filename.replace(/^src/, '..')}';`
-					);
-					components.push(`<${componentName} client:visible />`);
-					await fs.promises.writeFile(absFileLoc, component.content);
-				})
-			);
-
-			const pageFileLoc = path.resolve(path.join(cwd, 'src', 'pages', 'index.astro'));
-			const content = (await fs.promises.readFile(pageFileLoc)).toString();
-			const newContent = content
-				.replace(/^(\s*)\/\* ASTRO\:COMPONENT_IMPORTS \*\//gm, (_, indent) => {
-					return indent + importStatements.join('\n');
-				})
-				.replace(/^(\s*)<!-- ASTRO:COMPONENT_MARKUP -->/gm, (_, indent) => {
-					return components.map((ln) => indent + ln).join('\n');
-				});
-			await fs.promises.writeFile(pageFileLoc, newContent);
-		}
 	}
 
 	spinner.succeed();
@@ -298,6 +210,36 @@ export async function main() {
 		spinner.succeed();
 	}
 
+	const astroAddCommand = installResponse.install
+		? 'astro add'
+		: `${pkgManagerExecCommand(pkgManager)} astro@latest add`;
+
+	const astroAddResponse = await prompts({
+		type: 'confirm',
+		name: 'astroAdd',
+		message: `Run "${astroAddCommand}?" This lets you optionally add component frameworks (ex. React), CSS frameworks (ex. Tailwind), and more.`,
+		initial: true,
+	});
+
+	if (!astroAddResponse) {
+		process.exit(0);
+	}
+
+	if (!astroAddResponse.astroAdd) {
+		ora().info(
+			`No problem. You can always run "${pkgManagerExecCommand(pkgManager)} astro add" later!`
+		);
+	}
+
+	if (astroAddResponse.astroAdd && !args.dryrun) {
+		await execaCommand(
+			astroAddCommand,
+			astroAddCommand === 'astro add'
+				? { cwd, stdio: 'inherit', localDir: cwd, preferLocal: true }
+				: { cwd, stdio: 'inherit' }
+		);
+	}
+
 	console.log('\nNext steps:');
 	let i = 1;
 	const relative = path.relative(process.cwd(), cwd);
@@ -330,3 +272,12 @@ function pkgManagerFromUserAgent(userAgent?: string) {
 	const pkgSpecArr = pkgSpec.split('/');
 	return pkgSpecArr[0];
 }
+
+function pkgManagerExecCommand(pkgManager: string) {
+	if (pkgManager === 'pnpm') {
+		return 'pnpx';
+	} else {
+		// note: yarn does not have an "npx" equivalent
+		return 'npx';
+	}
+}

packages/create-astro/src/templates.ts

@@ -1,8 +1,7 @@
 export const TEMPLATES = [
 	{
-		title: 'Starter Kit (Generic)',
-		value: 'starter',
-		integrations: true,
+		title: 'Just the basics',
+		value: 'basics',
 	},
 	{
 		title: 'Blog',
@@ -16,8 +15,4 @@ export const TEMPLATES = [
 		title: 'Portfolio',
 		value: 'portfolio',
 	},
-	{
-		title: 'Minimal',
-		value: 'minimal',
-	},
 ];