feat(create-astro): improve performance

.changeset/ten-kings-smash.md

@@ -0,0 +1,5 @@
+---
+'create-astro': minor
+---
+
+Improve startup performance by lazily initializing async contextual values

packages/create-astro/create-astro.mjs

@@ -4,7 +4,7 @@
 
 const currentVersion = process.versions.node;
 const requiredMajorVersion = parseInt(currentVersion.split('.')[0], 10);
-const minimumMajorVersion = 14;
+const minimumMajorVersion = 16;
 
 if (requiredMajorVersion < minimumMajorVersion) {
 	console.error(`Node.js v${currentVersion} is out of date and unsupported!`);

packages/create-astro/package.json

@@ -31,7 +31,7 @@
   "//a": "MOST PACKAGES SHOULD GO IN DEV_DEPENDENCIES! THEY WILL BE BUNDLED.",
   "//b": "DEPENDENCIES IS FOR UNBUNDLED PACKAGES",
   "dependencies": {
-    "@astrojs/cli-kit": "^0.2.3",
+    "@astrojs/cli-kit": "^0.2.5",
     "execa": "^8.0.1",
     "giget": "1.1.2",
     "node-fetch-native": "^1.4.0",

packages/create-astro/src/actions/context.ts

@@ -1,4 +1,5 @@
 import { prompt } from '@astrojs/cli-kit';
+import { random } from '@astrojs/cli-kit/utils';
 import arg from 'arg';
 import os from 'node:os';
 import detectPackageManager from 'which-pm-runs';
@@ -10,8 +11,8 @@ export interface Context {
 	prompt: typeof prompt;
 	cwd: string;
 	packageManager: string;
-	username: string;
-	version: string;
+	username: Promise<string>;
+	version: Promise<string>;
 	skipHouston: boolean;
 	fancy?: boolean;
 	dryRun?: boolean;
@@ -25,6 +26,7 @@ export interface Context {
 	stdin?: typeof process.stdin;
 	stdout?: typeof process.stdout;
 	exit(code: number): never;
+	hat?: string;
 }
 
 export async function getContext(argv: string[]): Promise<Context> {
@@ -52,7 +54,6 @@ export async function getContext(argv: string[]): Promise<Context> {
 	);
 
 	const packageManager = detectPackageManager()?.name ?? 'npm';
-	const [username, version] = await Promise.all([getName(), getVersion()]);
 	let cwd = flags['_'][0];
 	let {
 		'--help': help = false,
@@ -86,14 +87,15 @@ export async function getContext(argv: string[]): Promise<Context> {
 		help,
 		prompt,
 		packageManager,
-		username,
-		version,
+		username: getName(),
+		version: getVersion(),
 		skipHouston,
 		fancy,
 		dryRun,
 		projectName,
 		template,
 		ref: ref ?? 'latest',
+		hat: fancy ? random(['🎩', '🎩', '🎩', '🎩', '🎓', '👑', '🧢', '🍦']) : undefined,
 		yes,
 		install: install ?? (noInstall ? false : undefined),
 		git: git ?? (noGit ? false : undefined),

packages/create-astro/src/actions/intro.ts

@@ -4,24 +4,22 @@ import { color, label } from '@astrojs/cli-kit';
 import { random } from '@astrojs/cli-kit/utils';
 import { banner, say, welcome } from '../messages.js';
 
-export async function intro(ctx: Pick<Context, 'skipHouston' | 'version' | 'username' | 'fancy'>) {
+export async function intro(ctx: Pick<Context, 'hat' | 'skipHouston' | 'version' | 'username' | 'fancy'>) {
+	banner();
+
 	if (!ctx.skipHouston) {
-		const hat = ctx.fancy ? random(['🎩', '🎩', '👑', '🧢', '🍦']) : undefined;
 		await say(
 			[
 				[
 					'Welcome',
 					'to',
 					label('astro', color.bgGreen, color.black),
-					(ctx.version ? color.green(`v${ctx.version}`) : '') + ',',
-					`${ctx.username}!`,
+					ctx.version.then(version => ((version ? color.green(`v${version}`) : '') + ',')),
+					ctx.username.then(username => `${username}!`),
 				],
 				random(welcome),
 			],
-			{ hat }
+			{ clear: true, hat: ctx.hat }
 		);
-		await banner(ctx.version);
-	} else {
-		await banner(ctx.version);
 	}
 }

packages/create-astro/src/actions/next-steps.ts

@@ -3,7 +3,7 @@ import type { Context } from './context';
 
 import { nextSteps, say } from '../messages.js';
 
-export async function next(ctx: Pick<Context, 'cwd' | 'packageManager' | 'skipHouston'>) {
+export async function next(ctx: Pick<Context, 'hat' | 'cwd' | 'packageManager' | 'skipHouston'>) {
 	let projectDir = path.relative(process.cwd(), ctx.cwd);
 
 	const commandMap: { [key: string]: string } = {
@@ -17,7 +17,7 @@ export async function next(ctx: Pick<Context, 'cwd' | 'packageManager' | 'skipHo
 	await nextSteps({ projectDir, devCmd });
 
 	if (!ctx.skipHouston) {
-		await say(['Good luck out there, astronaut! 🚀']);
+		await say(['Good luck out there, astronaut! 🚀'], { hat: ctx.hat });
 	}
 	return;
 }

packages/create-astro/src/index.ts

@@ -19,6 +19,8 @@ process.on('SIGTERM', exit);
 // https://github.com/withastro/docs/blob/main/src/pages/en/install/auto.md
 // if you make any changes to the flow or wording here.
 export async function main() {
+	// Clear console because PNPM startup is super ugly
+	console.clear();
 	// 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
 	// broke our arg parser, since `--` is a special kind of flag. Filtering for `--` here

packages/create-astro/src/messages.ts

@@ -91,12 +91,11 @@ export const getVersion = () =>
 	});
 
 export const log = (message: string) => stdout.write(message + '\n');
-export const banner = async (version: string) =>
-	log(
-		`\n${label('astro', color.bgGreen, color.black)}${
-			version ? '  ' + color.green(color.bold(`v${version}`)) : ''
-		} ${color.bold('Launch sequence initiated.')}`
-	);
+export const banner = () => {
+	const prefix = `astro`;
+	const suffix = `Launch sequence initiated.`;
+	log(`${label(prefix, color.bgGreen, color.black)}  ${suffix}`);
+}
 
 export const bannerAbort = () =>
 	log(`\n${label('astro', color.bgRed)} ${color.bold('Launch sequence aborted.')}`);