[C3] Printing dummy questions for values provided via command line (#3237)

Author: jculvey

packages/create-cloudflare/src/cli.ts

@@ -38,6 +38,12 @@ const parseArgs = async (argv: string[]) => {
 		.option("framework", { type: "string" })
 		.option("deploy", { type: "boolean" })
 		.option("ts", { type: "boolean" })
+		.option("open", {
+			type: "boolean",
+			default: true,
+			description:
+				"opens your browser after your deployment, set --no-open to disable",
+		})
 		.help().argv;
 
 	const [name] = args._;
@@ -56,7 +62,8 @@ const parseArgs = async (argv: string[]) => {
 const validateName = async (args: Partial<PagesGeneratorArgs>) => {
 	const haikunator = new Haikunator();
 
-	args.projectName ||= await textInput({
+	args.projectName = await textInput({
+		initialValue: args.projectName,
 		question: `Where do you want to create your application?`,
 		helpText: "also used as application name",
 		renderSubmitted: (value: string) => {
@@ -76,12 +83,13 @@ const validateType = async (args: PagesGeneratorArgs) => {
 		.filter(([_, { hidden }]) => !hidden)
 		.map(([value, { label }]) => ({ value, label }));
 
-	args.type ||= await selectInput({
+	args.type = await selectInput({
 		question: "What type of application do you want to create?",
 		options: templateOptions,
 		renderSubmitted: (option: Option) => {
 			return `${brandColor("type")} ${dim(option.label)}`;
 		},
+		initialValue: args.type,
 	});
 
 	if (!args.type || !Object.keys(templateMap).includes(args.type)) {

packages/create-cloudflare/src/common.ts

@@ -49,18 +49,17 @@ export const setupProjectDirectory = (args: PagesGeneratorArgs) => {
 };
 
 export const offerToDeploy = async (ctx: PagesGeneratorContext) => {
-	if (ctx.args.deploy === false) return;
-
 	startSection(`Deploy with Cloudflare`, `Step 3 of 3`);
 
-	ctx.args.deploy ||= await confirmInput({
+	ctx.args.deploy = await confirmInput({
 		question: "Do you want to deploy your application?",
 		renderSubmitted: (value: boolean) =>
 			`${brandColor(value ? `yes` : `no`)} ${dim(
 				`deploying via \`${npm} run ${
 					ctx.framework?.config.deployCommand ?? "deploy"
 				}\``
 			)}`,
+		initialValue: ctx.args.deploy,
 	});
 
 	if (!ctx.args.deploy) return;

packages/create-cloudflare/src/helpers/interactive.ts

@@ -1,7 +1,7 @@
 import { TextPrompt, SelectPrompt, ConfirmPrompt } from "@clack/core";
 import { isCancel } from "@clack/prompts";
 import logUpdate from "log-update";
-import { shapes, cancel, space, status, newline } from "./cli";
+import { shapes, cancel, space, status, newline, logRaw } from "./cli";
 import { blue, dim, gray, brandColor, bold } from "./colors";
 
 const grayBar = gray(shapes.bar);
@@ -14,10 +14,12 @@ export type TextOptions = {
 	defaultValue: string;
 	helpText?: string;
 	validate?: (value: string) => string | void;
+	initialValue?: string;
 };
 
 export const textInput = async (opts: TextOptions) => {
-	const { renderSubmitted, question, defaultValue, validate } = opts;
+	const { renderSubmitted, question, defaultValue, validate, initialValue } =
+		opts;
 	const helpText = opts.helpText || ``;
 
 	const prompt = new TextPrompt({
@@ -52,14 +54,21 @@ export const textInput = async (opts: TextOptions) => {
 		},
 	});
 
-	const value = await prompt.prompt();
-
-	if (isCancel(value)) {
-		cancel("Operation cancelled.");
-		process.exit(0);
+	let value: string;
+	if (initialValue) {
+		logRaw(`${leftT} ${question}`);
+		logRaw(`${grayBar} ${renderSubmitted(initialValue)}\n${grayBar}`);
+		value = initialValue;
+	} else {
+		value = (await prompt.prompt()) as string;
+
+		if (isCancel(value)) {
+			cancel("Operation cancelled.");
+			process.exit(0);
+		}
 	}
 
-	return value as string;
+	return value;
 };
 
 export type Option = {
@@ -72,10 +81,11 @@ type SelectOptions = {
 	renderSubmitted: (option: Option) => string;
 	options: Option[];
 	helpText?: string;
+	initialValue?: string;
 };
 
 export const selectInput = async (opts: SelectOptions) => {
-	const { question, options, renderSubmitted } = opts;
+	const { question, options, renderSubmitted, initialValue } = opts;
 	const helpText = opts.helpText || ``;
 
 	const prompt = new SelectPrompt({
@@ -111,11 +121,24 @@ export const selectInput = async (opts: SelectOptions) => {
 		},
 	});
 
-	const value = await prompt.prompt();
-
-	if (isCancel(value)) {
-		cancel("Operation cancelled.");
-		process.exit(0);
+	let value: string;
+	if (initialValue) {
+		logRaw(`${leftT} ${question}`);
+		logRaw(
+			`${grayBar} ${renderSubmitted({
+				label: initialValue,
+				value: initialValue,
+			})}`
+		);
+		logRaw(`${grayBar}`);
+		value = initialValue;
+	} else {
+		value = (await prompt.prompt()) as string;
+
+		if (isCancel(value)) {
+			cancel("Operation cancelled.");
+			process.exit(0);
+		}
 	}
 
 	return value as string;
@@ -128,11 +151,18 @@ type ConfirmOptions = {
 	activeText?: string;
 	inactiveText?: string;
 	helpText?: string;
+	initialValue?: boolean;
 };
 
 export const confirmInput = async (opts: ConfirmOptions) => {
-	const { activeText, inactiveText, question, renderSubmitted, defaultValue } =
-		opts;
+	const {
+		activeText,
+		inactiveText,
+		question,
+		renderSubmitted,
+		defaultValue,
+		initialValue,
+	} = opts;
 	const helpText = opts.helpText || `(y/n)`;
 
 	const active = activeText || "Yes";
@@ -163,11 +193,20 @@ export const confirmInput = async (opts: ConfirmOptions) => {
 		},
 	});
 
-	const value = Boolean(await prompt.prompt());
+	let value: boolean;
+
+	if (initialValue !== undefined) {
+		logRaw(`${leftT} ${question}`);
+		logRaw(`${grayBar} ${renderSubmitted(initialValue)}`);
+		logRaw(`${grayBar}`);
+		value = initialValue;
+	} else {
+		value = Boolean(await prompt.prompt());
 
-	if (isCancel(value)) {
-		cancel("Operation cancelled.");
-		process.exit(0);
+		if (isCancel(value)) {
+			cancel("Operation cancelled.");
+			process.exit(0);
+		}
 	}
 
 	return value;

packages/create-cloudflare/src/pages.ts

@@ -70,26 +70,21 @@ export const runPagesGenerator = async (args: PagesGeneratorArgs) => {
 };
 
 const getFrameworkSelection = async (args: PagesGeneratorArgs) => {
-	let framework: string;
-
-	if (args.framework) {
-		framework = args.framework;
-	} else {
-		const frameworkOptions = Object.entries(FrameworkMap).map(
-			([key, { displayName }]) => ({
-				label: displayName,
-				value: key,
-			})
-		);
-
-		framework = await selectInput({
-			question: "Which development framework do you want to use?",
-			options: frameworkOptions,
-			renderSubmitted: (option: Option) => {
-				return `${brandColor("framework")} ${dim(option.label)}`;
-			},
-		});
-	}
+	const frameworkOptions = Object.entries(FrameworkMap).map(
+		([key, { displayName }]) => ({
+			label: displayName,
+			value: key,
+		})
+	);
+
+	const framework = await selectInput({
+		question: "Which development framework do you want to use?",
+		options: frameworkOptions,
+		renderSubmitted: (option: Option) => {
+			return `${brandColor("framework")} ${dim(option.label)}`;
+		},
+		initialValue: args.framework,
+	});
 
 	// Validate answers
 	framework || crash("A framework must be selected to continue.");