fix(wrangler): Always display wrangler banner at the top

When running `wrangler dev` or `wrangler pages dev`, the
wrangler banner is not consistently displayed at the top.
For `wrangler pages dev` specifically, which calls
`unstable_dev` under the hood, and thus deferring the
banner printing to this API, the banner ends up getting
lost inbetween other pages-specific logs/warnings, making
the whole `pages dev` output vibe random at best.

This commit ensures we always display the banner at the
top when in dev mode, by:
- delegating the banner printing to `pages dev` directly
- moving calling `printWranglerBanner()` fn first thing
in both wrangler/pages dev handlers
- providing a mechanism in the `unstable_dev` API that
makes the banner printing at that level optional

Fixes #4265

packages/wrangler/e2e/pages-dev.test.ts

@@ -572,7 +572,8 @@ describe("pages dev", () => {
 			);
 
 			expect(prestartOutput).toMatchInlineSnapshot(`
-				"▲ [WARNING] WARNING: You have Durable Object bindings that are not defined locally in the worker being developed.
+				"✨ Compiled Worker successfully
+				▲ [WARNING] WARNING: You have Durable Object bindings that are not defined locally in the worker being developed.
 				  Be aware that changes to the data stored in these Durable Objects will be permanent and affect the live instances.
 				  Remote Durable Objects that are affected:
 				  - {"name":"DO_BINDING_1_TOML","class_name":"DO_1_TOML","script_name":"DO_SCRIPT_1_TOML"}

packages/wrangler/src/api/dev.ts

@@ -1,6 +1,7 @@
 import { fetch, Request } from "undici";
 import { startApiDev, startDev } from "../dev";
 import { logger } from "../logger";
+import { printWranglerBanner } from "../update-check";
 import type { Environment } from "../config";
 import type { Rule } from "../config/environment";
 import type { CfModule } from "../deployment-bundle/worker";
@@ -80,6 +81,7 @@ export interface UnstableDevOptions {
 		watch?: boolean; // unstable_dev doesn't support watch-mode yet in testMode
 		devEnv?: boolean;
 	};
+	disableWranglerBanner?: boolean;
 }
 
 export interface UnstableDevWorker {
@@ -128,6 +130,12 @@ export async function unstable_dev(
 		enablePagesAssetsServiceBinding,
 	} = experimentalOptions;
 
+	const updateCheck = options?.updateCheck ?? false;
+
+	if (!options?.disableWranglerBanner) {
+		await printWranglerBanner(updateCheck);
+	}
+
 	if (apiOptions) {
 		logger.error(
 			"unstable_dev's third argument (apiOptions) has been deprecated in favor of an `experimental` property within the second argument (options).\nPlease update your code from:\n`await unstable_dev('...', {...}, {...});`\nto:\n`await unstable_dev('...', {..., experimental: {...}});`"
@@ -213,7 +221,7 @@ export async function unstable_dev(
 		...options,
 		logLevel: options?.logLevel ?? defaultLogLevel,
 		port: options?.port ?? 0,
-		updateCheck: options?.updateCheck ?? false,
+		updateCheck,
 		experimentalVersions: undefined,
 		experimentalDevEnv: devEnv,
 	};

packages/wrangler/src/dev.tsx

@@ -300,6 +300,8 @@ export function devOptions(yargs: CommonYargsArgv) {
 type DevArguments = StrictYargsOptionsToInterface<typeof devOptions>;
 
 export async function devHandler(args: DevArguments) {
+	await printWranglerBanner();
+
 	if (isWebContainer()) {
 		logger.error(
 			`Oh no! 😟 You tried to run \`wrangler dev\` in a StackBlitz WebContainer. 🤯
@@ -388,7 +390,7 @@ export async function startDev(args: StartDevOptions) {
 		if (args.logLevel) {
 			logger.loggerLevel = args.logLevel;
 		}
-		await printWranglerBanner(args.updateCheck);
+
 		if (args.local) {
 			logger.warn(
 				"--local is no longer required and will be removed in a future version.\n`wrangler dev` now uses the local Cloudflare Workers runtime by default. 🎉"
@@ -544,7 +546,6 @@ export async function startApiDev(args: StartDevOptions) {
 	if (args.logLevel) {
 		logger.loggerLevel = args.logLevel;
 	}
-	await printWranglerBanner(args.updateCheck);
 
 	const configPath =
 		args.config || (args.script && findWranglerToml(path.dirname(args.script)));

packages/wrangler/src/pages/dev.ts

@@ -12,6 +12,7 @@ import { logger } from "../logger";
 import * as metrics from "../metrics";
 import { isNavigatorDefined } from "../navigator-user-agent";
 import { getBasePath } from "../paths";
+import { printWranglerBanner } from "../update-check";
 import * as shellquote from "../utils/shell-quote";
 import { buildFunctions } from "./buildFunctions";
 import { ROUTES_SPEC_VERSION, SECONDS_TO_WAIT_FOR_PROXY } from "./constants";
@@ -250,6 +251,13 @@ export const Handler = async (args: PagesDevArguments) => {
 		logger.loggerLevel = args.logLevel;
 	}
 
+	/*
+	 * `unstable_dev` already does this for us, but ideally we'd want to print
+	 * the banner right at the top, before any other logs. So let's turn that
+	 * off, and print here instead.
+	 */
+	await printWranglerBanner(true);
+
 	if (args.experimentalLocal) {
 		logger.warn(
 			"--experimental-local is no longer required and will be removed in a future version.\n`wrangler pages dev` now uses the local Cloudflare Workers runtime by default."
@@ -689,6 +697,7 @@ export const Handler = async (args: PagesDevArguments) => {
 			testMode: false,
 			watch: true,
 		},
+		disableWranglerBanner: true,
 	});
 	await metrics.sendMetricsEvent("run pages dev");
 

packages/wrangler/src/update-check.ts

@@ -16,11 +16,13 @@ export async function printWranglerBanner(performUpdateCheck = true) {
 	}
 
 	logger.log(
-		text +
+		"\n" +
+			text +
 			"\n" +
 			(supportsColor.stdout
 				? chalk.hex("#FF8800")("-".repeat(text.length))
-				: "-".repeat(text.length))
+				: "-".repeat(text.length)) +
+			"\n"
 	);
 
 	// Log a slightly more noticeable message if this is a major bump