feat(create-astro): add peer dependencies to package.json (#2843)

* Install dependencies automatically

* Added spinners

* Updated lockfile

* changeset

* Sort dependencies

* Reverted autoinstall

* Updated changeset

.changeset/rude-starfishes-drop.md

@@ -0,0 +1,5 @@
+---
+'create-astro': patch
+---
+
+Add peer dependencies to package.json

packages/create-astro/package.json

@@ -32,6 +32,7 @@
     "degit": "^2.8.4",
     "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/config.ts

@@ -1,4 +1,6 @@
-export const createConfig = ({ integrations }: { integrations: string[] }) => {
+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
@@ -6,8 +8,8 @@ export default defineConfig({});
 `;
 	}
 
-	const rendererImports = integrations.map((r: string) => `  import ${r} from '@astrojs/${r === 'solid' ? 'solid-js' : r}';`);
-	const rendererIntegrations = integrations.map((r: string) => `    ${r}(),`);
+	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,

packages/create-astro/src/frameworks.ts

@@ -107,25 +107,30 @@ export default {
 	},
 };
 
-export const FRAMEWORKS = [
+export interface Integration {
+	id: string;
+	packageName: string;
+}
+
+export const FRAMEWORKS: { title: string; value: Integration }[] = [
 	{
-		title: 'preact',
-		value: '@astrojs/preact',
+		title: 'Preact',
+		value: { id: 'preact', packageName: '@astrojs/preact' },
 	},
 	{
-		title: 'react',
-		value: 'react',
+		title: 'React',
+		value: { id: 'react', packageName: '@astrojs/react' },
 	},
 	{
-		title: 'solid',
-		value: 'solid',
+		title: 'Solid.js',
+		value: { id: 'solid', packageName: '@astrojs/solid-js' },
 	},
 	{
-		title: 'svelte',
-		value: 'svelte',
+		title: 'Svelte',
+		value: { id: 'svelte', packageName: '@astrojs/svelte' },
 	},
 	{
-		title: 'vue',
-		value: 'vue',
+		title: 'Vue',
+		value: { id: 'vue', packageName: '@astrojs/vue' },
 	},
 ];

packages/create-astro/src/index.ts

@@ -5,7 +5,8 @@ import fetch from 'node-fetch';
 import prompts from 'prompts';
 import degit from 'degit';
 import yargs from 'yargs-parser';
-import { FRAMEWORKS, COUNTER_COMPONENTS } from './frameworks.js';
+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';
@@ -36,8 +37,9 @@ export async function main() {
 	console.log(`\n${bold('Welcome to Astro!')} ${gray(`(create-astro v${version})`)}`);
 	console.log(`If you encounter a problem, visit ${cyan('https://github.com/withastro/astro/issues')} to search or file a new issue.\n`);
 
-	console.log(`${green(`>`)} ${gray(`Prepare for liftoff.`)}`);
-	console.log(`${green(`>`)} ${gray(`Gathering mission details...`)}`);
+	let spinner = ora({ color: 'green', text: 'Prepare for liftoff.' });
+
+	spinner.succeed();
 
 	const cwd = (args['_'][2] as string) || '.';
 	if (fs.existsSync(cwd)) {
@@ -57,7 +59,7 @@ export async function main() {
 		mkdirp(cwd);
 	}
 
-	const options = /** @type {import('./types/internal').Options} */ await prompts([
+	const options = await prompts([
 		{
 			type: 'select',
 			name: 'template',
@@ -87,10 +89,10 @@ export async function main() {
 	});
 
 	const selectedTemplate = TEMPLATES.find((template) => template.value === options.template);
-	let integrations: string[] = [];
+	let integrations: Integration[] = [];
 
 	if (selectedTemplate?.integrations === true) {
-		const result = /** @type {import('./types/internal').Options} */ await prompts([
+		const result = await prompts([
 			{
 				type: 'multiselect',
 				name: 'integrations',
@@ -101,12 +103,13 @@ export async function main() {
 		integrations = result.integrations;
 	}
 
+	spinner = ora({ color: 'green', text: 'Copying project files...' }).start();
+
 	// Copy
 	try {
 		emitter.on('info', (info) => {
 			logger.debug(info.message);
 		});
-		console.log(`${green(`>`)} ${gray(`Copying project files...`)}`);
 		await emitter.clone(cwd);
 	} catch (err: any) {
 		// degit is compiled, so the stacktrace is pretty noisy. Only report the stacktrace when using verbose mode.
@@ -128,6 +131,7 @@ export async function main() {
 				)
 			);
 		}
+		spinner.fail();
 		process.exit(1);
 	}
 
@@ -154,14 +158,28 @@ export async function main() {
 					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(
-						['astro', ...integrations].map((integration: string) =>
-							fetch(`https://registry.npmjs.org/@astrojs/${integration === 'solid' ? 'solid-js' : integration}/latest`)
-								.then((res: any) => res.json())
-								.then((res: any) => [res['name'], `^${res['version']}`])
+					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;
+									})
 							)
-					)) as any;
+						)
+					).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;
 				}
@@ -174,8 +192,8 @@ export async function main() {
 		let importStatements: string[] = [];
 		let components: string[] = [];
 		await Promise.all(
-			integrations.map(async (integrations) => {
-				const component = COUNTER_COMPONENTS[integrations as keyof typeof COUNTER_COMPONENTS];
+			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/, '..')}';`);
@@ -196,11 +214,11 @@ export async function main() {
 		await fs.promises.writeFile(pageFileLoc, newContent);
 	}
 
+	spinner.succeed();
 	console.log(bold(green('✔') + ' Done!'));
 
 	console.log('\nNext steps:');
 	let i = 1;
-
 	const relative = path.relative(process.cwd(), cwd);
 	if (relative !== '') {
 		console.log(`  ${i++}: ${bold(cyan(`cd ${relative}`))}`);

pnpm-lock.yaml

@@ -1146,6 +1146,7 @@ importers:
       degit: ^2.8.4
       kleur: ^4.1.4
       node-fetch: ^3.2.3
+      ora: ^6.1.0
       prompts: ^2.4.2
       uvu: ^0.5.3
       yargs-parser: ^21.0.1
@@ -1155,6 +1156,7 @@ importers:
       degit: 2.8.4
       kleur: 4.1.4
       node-fetch: 3.2.3
+      ora: 6.1.0
       prompts: 2.4.2
       yargs-parser: 21.0.1
     devDependencies:
@@ -4627,7 +4629,6 @@ packages:
 
   /base64-js/1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
-    dev: true
 
   /bcp-47-match/2.0.1:
     resolution: {integrity: sha512-+8o7axFDN/h8xATDM87FhnU1eod87dX0eZz1+cW3gggcicBqrmkZc33KBPWoE49qt5Asi5OhcxSOMOzp3opTfg==}
@@ -4655,6 +4656,14 @@ packages:
       readable-stream: 3.6.0
     dev: true
 
+  /bl/5.0.0:
+    resolution: {integrity: sha512-8vxFNZ0pflFfi0WXA3WQXlj6CaMEwsmh63I1CNp0q+wWv8sD0ARx1KovSQd0l2GkwrMIOyedq0EF1FxI+RCZLQ==}
+    dependencies:
+      buffer: 6.0.3
+      inherits: 2.0.4
+      readable-stream: 3.6.0
+    dev: false
+
   /boolbase/1.0.0:
     resolution: {integrity: sha1-aN/1++YMUes3cl6p4+0xDcwed24=}
 
@@ -4706,6 +4715,13 @@ packages:
       ieee754: 1.2.1
     dev: true
 
+  /buffer/6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+    dev: false
+
   /builtin-modules/3.2.0:
     resolution: {integrity: sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==}
     engines: {node: '>=6'}
@@ -4801,6 +4817,11 @@ packages:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  /chalk/5.0.1:
+    resolution: {integrity: sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+    dev: false
+
   /character-entities-html4/2.1.0:
     resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
     dev: false
@@ -4879,6 +4900,18 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /cli-cursor/4.0.0:
+    resolution: {integrity: sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      restore-cursor: 4.0.0
+    dev: false
+
+  /cli-spinners/2.6.1:
+    resolution: {integrity: sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==}
+    engines: {node: '>=6'}
+    dev: false
+
   /cliui/6.0.0:
     resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
     dependencies:
@@ -4898,7 +4931,6 @@ packages:
   /clone/1.0.4:
     resolution: {integrity: sha1-2jCcwmPfFZlMaIypAheco8fNfH4=}
     engines: {node: '>=0.8'}
-    dev: true
 
   /code-block-writer/10.1.1:
     resolution: {integrity: sha512-67ueh2IRGst/51p0n6FvPrnRjAGHY5F8xdjkgrYE7DDzpJe6qA07RYQ9VcoUeo5ATOjSOiWpSL3SWBRRbempMw==}
@@ -5184,7 +5216,6 @@ packages:
     resolution: {integrity: sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=}
     dependencies:
       clone: 1.0.4
-    dev: true
 
   /define-properties/1.1.3:
     resolution: {integrity: sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==}
@@ -6714,7 +6745,6 @@ packages:
 
   /ieee754/1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
-    dev: true
 
   /ignore/5.2.0:
     resolution: {integrity: sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==}
@@ -6888,6 +6918,11 @@ packages:
     resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
     dev: false
 
+  /is-interactive/2.0.0:
+    resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
+    engines: {node: '>=12'}
+    dev: false
+
   /is-module/1.0.0:
     resolution: {integrity: sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=}
     dev: true
@@ -7008,6 +7043,11 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /is-unicode-supported/1.1.0:
+    resolution: {integrity: sha512-lDcxivp8TJpLG75/DpatAqNzOpDPSpED8XNtrpBHTdQ2InQ1PbW78jhwSxyxhhu+xbVSast2X38bwj8atwoUQA==}
+    engines: {node: '>=12'}
+    dev: false
+
   /is-weakref/1.0.2:
     resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
     dependencies:
@@ -7261,6 +7301,14 @@ packages:
       is-unicode-supported: 0.1.0
     dev: true
 
+  /log-symbols/5.1.0:
+    resolution: {integrity: sha512-l0x2DvrW294C9uDCoQe1VSU4gf529FkSZ6leBl4TiqZH/e+0R7hSfHQBNut2mNygDgHwvYHfFLn6Oxb3VWj2rA==}
+    engines: {node: '>=12'}
+    dependencies:
+      chalk: 5.0.1
+      is-unicode-supported: 1.1.0
+    dev: false
+
   /longest-streak/3.0.1:
     resolution: {integrity: sha512-cHlYSUpL2s7Fb3394mYxwTYj8niTaNHUCLr0qdiCXQfSjfuA7CKofpX2uSwEfFDQ0EB7JcnMnm+GjbqqoinYYg==}
     dev: false
@@ -7815,7 +7863,6 @@ packages:
   /mimic-fn/2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
-    dev: true
 
   /mimic-fn/4.0.0:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
@@ -8103,7 +8150,6 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       mimic-fn: 2.1.0
-    dev: true
 
   /onetime/6.0.0:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
@@ -8136,6 +8182,21 @@ packages:
       word-wrap: 1.2.3
     dev: true
 
+  /ora/6.1.0:
+    resolution: {integrity: sha512-CxEP6845hLK+NHFWZ+LplGO4zfw4QSfxTlqMfvlJ988GoiUeZDMzCvqsZkFHv69sPICmJH1MDxZoQFOKXerAVw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      bl: 5.0.0
+      chalk: 5.0.1
+      cli-cursor: 4.0.0
+      cli-spinners: 2.6.1
+      is-interactive: 2.0.0
+      is-unicode-supported: 1.1.0
+      log-symbols: 5.1.0
+      strip-ansi: 7.0.1
+      wcwidth: 1.0.1
+    dev: false
+
   /os-tmpdir/1.0.2:
     resolution: {integrity: sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=}
     engines: {node: '>=0.10.0'}
@@ -8628,7 +8689,6 @@ packages:
       inherits: 2.0.4
       string_decoder: 1.3.0
       util-deprecate: 1.0.2
-    dev: true
 
   /readdirp/3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
@@ -8823,6 +8883,14 @@ packages:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
+  /restore-cursor/4.0.0:
+    resolution: {integrity: sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+    dev: false
+
   /retext-latin/3.1.0:
     resolution: {integrity: sha512-5MrD1tuebzO8ppsja5eEu+ZbBeUNCjoEarn70tkXOS7Bdsdf6tNahsv2bY0Z8VooFF6cw7/6S+d3yI/TMlMVVQ==}
     dependencies:
@@ -9059,7 +9127,6 @@ packages:
 
   /signal-exit/3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
-    dev: true
 
   /simple-concat/1.0.1:
     resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==}
@@ -9332,7 +9399,6 @@ packages:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
     dependencies:
       safe-buffer: 5.2.1
-    dev: true
 
   /stringify-entities/4.0.2:
     resolution: {integrity: sha512-MTxTVcEkorNtBbNpoFJPEh0kKdM6+QbMjLbaxmvaPMmayOXdr/AIVIIJX7FReUVweRBFJfZepK4A4AKgwuFpMQ==}
@@ -10405,7 +10471,6 @@ packages:
     resolution: {integrity: sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=}
     dependencies:
       defaults: 1.0.3
-    dev: true
 
   /web-namespaces/2.0.1:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}