Feat: [create astro] replace component selector with "astro add" (#3223)

* feat: remove component framework selector

* feat: update templates to use "basics"

* feat: add "astro add" cli step

* tests: astro add step

* fix: reset env for pnpm tests

* fix: update install step test

* chore: remove "frameworks" step from tests

* deps: remove node-fetch from create-astro

* chore: changeset

* fix: use "preferLocal" for astro add command

* refactor: remove POSTPROCESS_FILES

* feat: add --yes flag to simplify astro add

* feat: bring back minimal option as "completely empty"

4 files changed, 51 insertions, 273 deletions

diff --git a/packages/create-astro/src/config.ts b/packages/create-astro/src/config.ts
deleted file mode 100644
index 4060d368c..000000000
--- a/packages/create-astro/src/config.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { Integration } from './frameworks';
-
-export const createConfig = ({ integrations }: { integrations: Integration[] }) => {
-	if (integrations.length === 0) {
-		return `import { defineConfig } from 'astro/config';
-// https://astro.build/config
-export default defineConfig({});
-`;
-	}
-
-	const rendererImports = integrations.map((r) => `  import ${r.id} from '${r.packageName}';`);
-	const rendererIntegrations = integrations.map((r) => `    ${r.id}(),`);
-	return [
-		`import { defineConfig } from 'astro/config';`,
-		...rendererImports,
-		`// https://astro.build/config`,
-		`export default defineConfig({`,
-		`  integrations: [`,
-		...rendererIntegrations,
-		`  ]`,
-		`});`,
-	].join('\n');
-};
diff --git a/packages/create-astro/src/frameworks.ts b/packages/create-astro/src/frameworks.ts
deleted file mode 100644
index 0483b7474..000000000
--- a/packages/create-astro/src/frameworks.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-export const COUNTER_COMPONENTS = {
-	preact: {
-		filename: `src/components/PreactCounter.jsx`,
-		content: `import { useState } from 'preact/hooks';
-
-export default function PreactCounter() {
-  const [count, setCount] = useState(0);
-  const add = () => setCount((i) => i + 1);
-  const subtract = () => setCount((i) => i - 1);
-
-  return (
-    <div id="preact" class="counter">
-      <button onClick={subtract}>-</button>
-      <pre>{count}</pre>
-      <button onClick={add}>+</button>
-    </div>
-  );
-}
-`,
-	},
-	react: {
-		filename: `src/components/ReactCounter.jsx`,
-		content: `import { useState } from 'react';
-
-export default function ReactCounter() {
-  const [count, setCount] = useState(0);
-  const add = () => setCount((i) => i + 1);
-  const subtract = () => setCount((i) => i - 1);
-
-  return (
-    <div id="react" className="counter">
-      <button onClick={subtract}>-</button>
-      <pre>{count}</pre>
-      <button onClick={add}>+</button>
-    </div>
-  );
-}
-`,
-	},
-	solid: {
-		filename: `src/components/SolidCounter.jsx`,
-		content: `import { createSignal } from "solid-js";
-
-export default function SolidCounter() {
-  const [count, setCount] = createSignal(0);
-  const add = () => setCount(count() + 1);
-  const subtract = () => setCount(count() - 1);
-
-  return (
-    <div id="solid" class="counter">
-      <button onClick={subtract}>-</button>
-      <pre>{count()}</pre>
-      <button onClick={add}>+</button>
-    </div>
-  );
-}
-`,
-	},
-	svelte: {
-		filename: `src/components/SvelteCounter.svelte`,
-		content: `<script>
-  let count = 0;
-
-  function add() {
-    count += 1;
-  }
-
-  function subtract() {
-    count -= 1;
-  }
-</script>
-
-<div id="svelte" class="counter">
-  <button on:click={subtract}>-</button>
-  <pre>{ count }</pre>
-  <button on:click={add}>+</button>
-</div>
-`,
-	},
-	vue: {
-		filename: `src/components/VueCounter.vue`,
-		content: `<template>
-  <div id="vue" class="counter">
-      <button @click="subtract()">-</button>
-      <pre>{{ count }}</pre>
-      <button @click="add()">+</button>
-  </div>
-</template>
-
-<script>
-import { ref } from 'vue';
-export default {
-  setup() {
-    const count = ref(0)
-    const add = () => count.value = count.value + 1;
-    const subtract = () => count.value = count.value - 1;
-
-    return {
-      count,
-      add,
-      subtract
-    }
-  }
-}
-</script>
-`,
-	},
-};
-
-export interface Integration {
-	id: string;
-	packageName: string;
-}
-
-export const FRAMEWORKS: { title: string; value: Integration }[] = [
-	{
-		title: 'Preact',
-		value: { id: 'preact', packageName: '@astrojs/preact' },
-	},
-	{
-		title: 'React',
-		value: { id: 'react', packageName: '@astrojs/react' },
-	},
-	{
-		title: 'Solid.js',
-		value: { id: 'solid', packageName: '@astrojs/solid-js' },
-	},
-	{
-		title: 'Svelte',
-		value: { id: 'svelte', packageName: '@astrojs/svelte' },
-	},
-	{
-		title: 'Vue',
-		value: { id: 'vue', packageName: '@astrojs/vue' },
-	},
-];
diff --git a/packages/create-astro/src/index.ts b/packages/create-astro/src/index.ts
index a6cedeb86..3c4e3e1a0 100644
--- a/packages/create-astro/src/index.ts
+++ b/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
@@ -37,8 +34,7 @@ const { version } = JSON.parse(
 	fs.readFileSync(new URL('../package.json', import.meta.url), 'utf-8')
 );
 
-const FILES_TO_REMOVE = ['.stackblitzrc', 'sandbox.config.json']; // some files are only needed for online editors when using astro.new. Remove for create-astro installs.
-const POSTPROCESS_FILES = ['package.json', 'astro.config.mjs', 'CHANGELOG.md']; // some files need processing after copying.
+const FILES_TO_REMOVE = ['.stackblitzrc', 'sandbox.config.json', 'CHANGELOG.md']; // some files are only needed for online editors when using astro.new. Remove for create-astro installs.
 
 export async function main() {
 	const pkgManager = pkgManagerFromUserAgent(process.env.npm_config_user_agent);
@@ -101,9 +97,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 +111,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
@@ -178,94 +157,14 @@ export async function main() {
 		}
 
 		// Post-process in parallel
-		await Promise.all([
-			...FILES_TO_REMOVE.map(async (file) => {
-				const fileLoc = path.resolve(path.join(cwd, file));
-				return fs.promises.rm(fileLoc);
-			}),
-			...POSTPROCESS_FILES.map(async (file) => {
+		await Promise.all(
+			FILES_TO_REMOVE.map(async (file) => {
 				const fileLoc = path.resolve(path.join(cwd, file));
-
-				switch (file) {
-					case 'CHANGELOG.md': {
-						if (fs.existsSync(fileLoc)) {
-							await fs.promises.unlink(fileLoc);
-						}
-						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;
-					}
+				if (fs.existsSync(fileLoc)) {
+					return fs.promises.rm(fileLoc, {});
 				}
-			}),
-		]);
-
-		// 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 +197,36 @@ export async function main() {
 		spinner.succeed();
 	}
 
+	const astroAddCommand = installResponse.install
+		? 'astro add --yes'
+		: `${pkgManagerExecCommand(pkgManager)} astro@latest add --yes`;
+
+	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 --yes'
+				? { 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 +259,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';
+	}
+}
diff --git a/packages/create-astro/src/templates.ts b/packages/create-astro/src/templates.ts
index d3982f6c6..2e35d4496 100644
--- a/packages/create-astro/src/templates.ts
+++ b/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',
@@ -17,7 +16,7 @@ export const TEMPLATES = [
 		value: 'portfolio',
 	},
 	{
-		title: 'Minimal',
+		title: 'Completely empty',
 		value: 'minimal',
 	},
 ];