Improve create-astro startup performance (#8456)

* feat(create-astro): improve performance

* test: fix test by wrapping promise values

* chore: remove uneeded deps

* Update ten-kings-smash.md

* chore: update lockfile

.changeset/ten-kings-smash.md

@@ -0,0 +1,5 @@
+---
+'create-astro': minor
+---
+
+Improve startup performance by removing dependencies, 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 = 18;
 
 if (requiredMajorVersion < minimumMajorVersion) {
 	console.error(`Node.js v${currentVersion} is out of date and unsupported!`);

packages/create-astro/package.json

@@ -31,14 +31,10 @@
   "//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",
-    "execa": "^8.0.1",
-    "giget": "1.1.2",
-    "node-fetch-native": "^1.4.0",
-    "which-pm-runs": "^1.1.0"
+    "@astrojs/cli-kit": "^0.2.5",
+    "giget": "1.1.2"
   },
   "devDependencies": {
-    "@types/which-pm-runs": "^1.0.0",
     "arg": "^5.0.2",
     "astro-scripts": "workspace:*",
     "chai": "^4.3.7",

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

@@ -1,7 +1,7 @@
 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';
 
 import { getName, getVersion } from '../messages.js';
 
@@ -10,8 +10,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 +25,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> {
@@ -51,8 +52,7 @@ export async function getContext(argv: string[]): Promise<Context> {
 		{ argv, permissive: true }
 	);
 
-	const packageManager = detectPackageManager()?.name ?? 'npm';
-	const [username, version] = await Promise.all([getName(), getVersion()]);
+	const packageManager = detectPackageManager() ?? 'npm';
 	let cwd = flags['_'][0];
 	let {
 		'--help': help = false,
@@ -86,14 +86,15 @@ export async function getContext(argv: string[]): Promise<Context> {
 		help,
 		prompt,
 		packageManager,
-		username,
-		version,
+		username: getName(),
+		version: getVersion(packageManager),
 		skipHouston,
 		fancy,
 		dryRun,
 		projectName,
 		template,
 		ref: ref ?? 'latest',
+		hat: fancy ? random(['🎩', '🎩', '🎩', '🎩', '🎓', '👑', '🧢', '🍦']) : undefined,
 		yes,
 		install: install ?? (noInstall ? false : undefined),
 		git: git ?? (noGit ? false : undefined),
@@ -105,3 +106,10 @@ export async function getContext(argv: string[]): Promise<Context> {
 	};
 	return context;
 }
+
+function detectPackageManager() {
+	if (!process.env.npm_config_user_agent) return;
+	const specifier = process.env.npm_config_user_agent.split(' ')[0];
+	const name = specifier.substring(0, specifier.lastIndexOf('/'));
+	return name === 'npminstall' ? 'cnpm' : name;
+}

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}!`,
+					Promise.resolve(ctx.version).then(version => ((version ? color.green(`v${version}`) : '') + ',')),
+					Promise.resolve(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/actions/verify.ts

@@ -1,7 +1,6 @@
 import type { Context } from './context';
 
 import { color } from '@astrojs/cli-kit';
-import fetch from 'node-fetch-native';
 import dns from 'node:dns/promises';
 import { bannerAbort, error, info, log } from '../messages.js';
 import { getTemplateTarget } from './template.js';

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

@@ -1,18 +1,15 @@
 /* eslint no-console: 'off' */
 import { color, say as houston, label, spinner as load } from '@astrojs/cli-kit';
 import { align, sleep } from '@astrojs/cli-kit/utils';
-import fetch from 'node-fetch-native';
 import { exec } from 'node:child_process';
 import stripAnsi from 'strip-ansi';
-import detectPackageManager from 'which-pm-runs';
 import { shell } from './shell.js';
 
 // Users might lack access to the global npm registry, this function
 // checks the user's project type and will return the proper npm registry
 //
 // A copy of this function also exists in the astro package
-async function getRegistry(): Promise<string> {
-	const packageManager = detectPackageManager()?.name || 'npm';
+async function getRegistry(packageManager: string): Promise<string> {
 	try {
 		const { stdout } = await shell(packageManager, ['config', 'get', 'registry']);
 		return stdout?.trim()?.replace(/\/$/, '') || 'https://registry.npmjs.org';
@@ -78,10 +75,10 @@ export const getName = () =>
 	});
 
 let v: string;
-export const getVersion = () =>
+export const getVersion = (packageManager: string) =>
 	new Promise<string>(async (resolve) => {
 		if (v) return resolve(v);
-		let registry = await getRegistry();
+		let registry = await getRegistry(packageManager);
 		const { version } = await fetch(`${registry}/astro/latest`, { redirect: 'follow' }).then(
 			(res) => res.json(),
 			() => ({ version: '' })
@@ -91,12 +88,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.')}`);