make command output prettier :)

Author: emily-shen

packages/wrangler/src/type-generation/runtime/log-runtime-types-message.ts

@@ -1,3 +1,4 @@
+import chalk from "chalk";
 import { dedent } from "ts-dedent";
 import { configFileName } from "../../config";
 import { logger } from "../../logger";
@@ -17,44 +18,48 @@ export function logRuntimeTypesMessage(
 	const isNodeTypesInstalled = tsconfigTypes.find((type) => type === "node");
 	const updatedTypesString = buildUpdatedTypesString(tsconfigTypes, outFile);
 
-	logger.info(`✨ Runtime types written to ${outFile}`);
-
+	if (isWorkersTypesInstalled) {
+		logAction(
+			"Migrate from @cloudflare/workers-types to generated runtime types"
+		);
+		logger.log(
+			chalk.dim(
+				"`wrangler types` now generates runtime types and supersedes @cloudflare/workers-types."
+			)
+		);
+		logger.log(
+			chalk.dim(
+				"You should now uninstall @cloudflare/workers-types and remove it from your tsconfig.json."
+			)
+		);
+		logger.log("");
+	}
 	if (updatedTypesString) {
-		logger.info(dedent`
-			📣 Add the generated types to the types array in your tsconfig.json:
-
-				{
-					"compilerOptions": {
-						...
-						"types": ${updatedTypesString}
-						...
-					}
-				}
-
-		`);
-	} else if (isWorkersTypesInstalled) {
-		logger.info(dedent`
-			📣 Replace the existing "@cloudflare/workers-types" entry with the generated types path:
+		logAction(`Update your tsconfig.json to include the generated types`);
+		logger.log(
+			chalk.dim(dedent`
 				{
 					"compilerOptions": {
-						...
 						"types": ${updatedTypesString}
-						...
 					}
 				}
-
-		`);
-	}
-	if (isWorkersTypesInstalled) {
-		logger.info('📣 You can now uninstall "@cloudflare/workers-types".');
+		`)
+		);
+		logger.log("");
 	}
 	if (isNodeCompat && !isNodeTypesInstalled) {
-		logger.info(
-			'📣 Since you have Node.js compatibility mode enabled, you should consider adding Node.js for TypeScript by running "npm i --save-dev @types/[email protected]". Please see the docs for more details: https://developers.cloudflare.com/workers/languages/typescript/#transitive-loading-of-typesnode-overrides-cloudflareworkers-types'
+		logAction("Install types@node");
+		logger.log(
+			chalk.dim(
+				`Since you have the \`nodejs_compat\` flag, you should install Node.js types by running "npm i --save-dev @types/node${isWorkersTypesInstalled ? '@20.8.3". For more details: https://developers.cloudflare.com/workers/languages/typescript/#known-issues' : '".'}`
+			)
 		);
+		logger.log("");
 	}
-	logger.info(
-		`📣 Remember to run 'wrangler types --x-include-runtime' again if you change 'compatibility_date' or 'compatibility_flags' in your ${configFileName(configPath)} file.\n`
+	logger.log(
+		`📖 Read about runtime types\n` +
+			`${chalk.dim("https://developers.cloudflare.com/workers/languages/typescript/#generate-runtime-types")}\n\n` +
+			`📣 Remember to rerun 'wrangler types' after you change your ${configFileName(configPath)} file.\n`
 	);
 }
 
@@ -76,3 +81,7 @@ function buildUpdatedTypesString(
 
 	return JSON.stringify(updatedTypesArray);
 }
+
+const logAction = (msg: string) => {
+	logger.log(chalk.hex("#BD5B08").bold("Action required"), msg);
+};