cleanup runtime log output

Author: emily-shen

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

@@ -1,5 +1,6 @@
+import { existsSync } from "node:fs";
+import chalk from "chalk";
 import { dedent } from "ts-dedent";
-import { configFileName } from "../../config";
 import { logger } from "../../logger";
 
 /**
@@ -8,53 +9,60 @@ import { logger } from "../../logger";
 export function logRuntimeTypesMessage(
 	outFile: string,
 	tsconfigTypes: string[],
-	isNodeCompat = false,
-	configPath: string | undefined
+	isNodeCompat = false
 ) {
 	const isWorkersTypesInstalled = tsconfigTypes.find((type) =>
 		type.startsWith("@cloudflare/workers-types")
 	);
 	const isNodeTypesInstalled = tsconfigTypes.find((type) => type === "node");
 	const updatedTypesString = buildUpdatedTypesString(tsconfigTypes, outFile);
-
-	logger.info(`✨ Runtime types written to ${outFile}`);
-
+	const maybeHasOldRuntimeFile = existsSync("./.wrangler/types/runtime.d.ts");
+	if (maybeHasOldRuntimeFile) {
+		logAction("Remove the old runtime.d.ts file");
+		logger.log(
+			chalk.dim(
+				"`wrangler types` now outputs runtime and Env types in one file.\nYou can now delete the ./.wrangler/types/runtime.d.ts and update your tsconfig.json`"
+			)
+		);
+		logger.log("");
+	}
+	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.\nYou 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:
-
+		logAction(`Update your tsconfig.json to include the generated types`);
+		logger.log(
+			chalk.dim(dedent`
 				{
 					"compilerOptions": {
-						...
 						"types": ${updatedTypesString}
-						...
 					}
 				}
-
-		`);
-	} else if (isWorkersTypesInstalled) {
-		logger.info(dedent`
-			📣 Replace the existing "@cloudflare/workers-types" entry with the generated types path:
-				{
-					"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".\nFor 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")}`
 	);
 }
 
@@ -66,13 +74,21 @@ function buildUpdatedTypesString(
 	types: string[],
 	newTypesPath: string
 ): string | null {
-	if (types.some((type) => type.includes(".wrangler/types/runtime"))) {
+	if (types.some((type) => type.includes(newTypesPath))) {
 		return null;
 	}
 
 	const updatedTypesArray = types
-		.filter((type) => !type.startsWith("@cloudflare/workers-types"))
+		.filter(
+			(type) =>
+				!type.startsWith("@cloudflare/workers-types") &&
+				!type.includes("./wrangler/types/runtime.d.ts")
+		)
 		.concat([newTypesPath]);
 
 	return JSON.stringify(updatedTypesArray);
 }
+
+const logAction = (msg: string) => {
+	logger.log(chalk.hex("#BD5B08").bold("Action required"), msg);
+};