Redesign wrangler dev (#9335)

* Better underscore + less linebreaking in Wrangler banner

* Remove local/remote hotkey, improve hotkey styling, and pin to top rather than bottom

* Improve print-bindings

* more redesign

* more redesign

* fix lint

* fix interactive tests

* fix pages-dev snapshots

* Create kind-dots-argue.md

* Address comments

* Address comments

* fix tests

* cleanup tests

* fix pages-dev test

* fix e2e snapshot

* add unsupported wording

Author: penalosa

.changeset/kind-dots-argue.md

@@ -0,0 +1,7 @@
+---
+"miniflare": patch
+"wrangler": patch
+---
+
+Redesign `wrangler dev` to more clearly present information and have a bit of a glow up ✨
+![Screenshot 2025-05-22 at 01 11 43](https://github.com/user-attachments/assets/26cc6209-37a1-4ecb-8e91-daac2f79a095)

fixtures/interactive-dev-tests/tests/index.test.ts

@@ -137,7 +137,7 @@ async function startWranglerDev(args: string[], skipWaitingForReady = false) {
 	if (!skipWaitingForReady) {
 		let readyMatch: RegExpMatchArray | null = null;
 		for await (const line of stdoutInterface) {
-			if ((readyMatch = readyRegexp.exec(line)) !== null) break;
+			if ((readyMatch = readyRegexp.exec(stripAnsi(line))) !== null) break;
 		}
 		assert(readyMatch !== null, "Expected ready message");
 		result.url = readyMatch[1];

packages/miniflare/src/index.ts

@@ -12,7 +12,7 @@ import { ReadableStream } from "stream/web";
 import util from "util";
 import zlib from "zlib";
 import exitHook from "exit-hook";
-import { $ as colors$ } from "kleur/colors";
+import { $ as colors$, green } from "kleur/colors";
 import stoppable from "stoppable";
 import {
 	Dispatcher,
@@ -1566,7 +1566,7 @@ export class Miniflare {
 			const urlSafeHost = getURLSafeHost(configuredHost);
 			if (this.#sharedOpts.core.logRequests) {
 				this.#log.info(
-					`${ready} on ${secure ? "https" : "http"}://${urlSafeHost}:${entryPort}`
+					`${ready} on ${green(`${secure ? "https" : "http"}://${urlSafeHost}:${entryPort}`)}`
 				);
 			}
 

packages/miniflare/src/shared/log.ts

@@ -7,11 +7,11 @@ const cwdNodeModules = path.join(cwd, "node_modules");
 
 const LEVEL_PREFIX: { [key in LogLevel]: string } = {
 	[LogLevel.NONE]: "",
-	[LogLevel.ERROR]: "err",
-	[LogLevel.WARN]: "wrn",
-	[LogLevel.INFO]: "inf",
-	[LogLevel.DEBUG]: "dbg",
-	[LogLevel.VERBOSE]: "vrb",
+	[LogLevel.ERROR]: "error",
+	[LogLevel.WARN]: "warn",
+	[LogLevel.INFO]: "info",
+	[LogLevel.DEBUG]: "debug",
+	[LogLevel.VERBOSE]: "verbose",
 };
 
 const LEVEL_COLOUR: { [key in LogLevel]: Colorize } = {
@@ -83,7 +83,7 @@ export class Log {
 	logWithLevel(level: LogLevel, message: string): void {
 		if (level <= this.level) {
 			const prefix = `[${this.#prefix}${LEVEL_PREFIX[level]}${this.#suffix}]`;
-			this.log(LEVEL_COLOUR[level](`${prefix} ${message}`));
+			this.log(`${LEVEL_COLOUR[level](prefix)} ${message}`);
 		}
 	}
 

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

@@ -1,35 +1,28 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Pages 'wrangler pages dev' > should merge (with override) \`wrangler.toml\` configuration with configuration provided via the command line, with command line args taking precedence 1`] = `
+exports[`wrangler pages dev > should merge (with override) \`wrangler.toml\` configuration with configuration provided via the command line, with command line args taking precedence 1`] = `
 "✨ Compiled Worker successfully
-Your Worker and resources are simulated locally via Miniflare. For more information, see: https://developers.cloudflare.com/workers/testing/local-development.
 Your Worker has access to the following bindings:
-- Durable Objects:
-  - DO_BINDING_1_TOML: NEW_DO_1 (defined in NEW_DO_SCRIPT_1 [not connected])
-  - DO_BINDING_2_TOML: DO_2_TOML (defined in DO_SCRIPT_2_TOML [not connected])
-  - DO_BINDING_3_ARGS: DO_3_ARGS (defined in DO_SCRIPT_3_ARGS [not connected])
-- KV Namespaces:
-  - KV_BINDING_1_TOML: NEW_KV_ID_1 [simulated locally]
-  - KV_BINDING_2_TOML: KV_ID_2_TOML [simulated locally]
-  - KV_BINDING_3_ARGS: KV_ID_3_ARGS [simulated locally]
-- D1 Databases:
-  - D1_BINDING_1_TOML: local-D1_BINDING_1_TOML=NEW_D1_NAME_1 (NEW_D1_NAME_1) [simulated locally]
-  - D1_BINDING_2_TOML: D1_NAME_2_TOML (D1_ID_2_TOML) [simulated locally]
-  - D1_BINDING_3_ARGS: local-D1_BINDING_3_ARGS=D1_NAME_3_ARGS (D1_NAME_3_ARGS) [simulated locally]
-- R2 Buckets:
-  - R2_BINDING_1_TOML: new-r2-bucket-1 [simulated locally]
-  - R2_BINDING_2_TOML: r2-bucket-2-toml [simulated locally]
-  - R2_BINDING_3_TOML: r2-bucket-3-args [simulated locally]
-- Services:
-  - SERVICE_BINDING_1_TOML: NEW_SERVICE_NAME_1 [not connected]
-  - SERVICE_BINDING_2_TOML: SERVICE_NAME_2_TOML [not connected]
-  - SERVICE_BINDING_3_TOML: SERVICE_NAME_3_ARGS [not connected]
-- AI:
-  - Name: AI_BINDING_2_TOML [connected to remote resource]
-- Vars:
-  - VAR1: "(hidden)"
-  - VAR2: "VAR_2_TOML"
-  - VAR3: "(hidden)"
+Binding                                                                  Resource                  Mode
+env.DO_BINDING_1_TOML (NEW_DO_1, defined in NEW_DO_SCRIPT_1)             Durable Object            local [not connected]
+env.DO_BINDING_2_TOML (DO_2_TOML, defined in DO_SCRIPT_2_TOML)           Durable Object            local [not connected]
+env.DO_BINDING_3_ARGS (DO_3_ARGS, defined in DO_SCRIPT_3_ARGS)           Durable Object            local [not connected]
+env.KV_BINDING_1_TOML (NEW_KV_ID_1)                                      KV Namespace              local
+env.KV_BINDING_2_TOML (KV_ID_2_TOML)                                     KV Namespace              local
+env.KV_BINDING_3_ARGS (KV_ID_3_ARGS)                                     KV Namespace              local
+env.D1_BINDING_1_TOML (local-D1_BINDING_1_TOML=NEW_D1_NAME_1)            D1 Database               local
+env.D1_BINDING_2_TOML (D1_NAME_2_TOML)                                   D1 Database               local
+env.D1_BINDING_3_ARGS (local-D1_BINDING_3_ARGS=D1_NAME_3_ARGS)           D1 Database               local
+env.R2_BINDING_1_TOML (new-r2-bucket-1)                                  R2 Bucket                 local
+env.R2_BINDING_2_TOML (r2-bucket-2-toml)                                 R2 Bucket                 local
+env.R2_BINDING_3_TOML (r2-bucket-3-args)                                 R2 Bucket                 local
+env.SERVICE_BINDING_1_TOML (NEW_SERVICE_NAME_1)                          Worker                    local [not connected]
+env.SERVICE_BINDING_2_TOML (SERVICE_NAME_2_TOML)                         Worker                    local [not connected]
+env.SERVICE_BINDING_3_TOML (SERVICE_NAME_3_ARGS)                         Worker                    local [not connected]
+env.AI_BINDING_2_TOML                                                    AI                        remote
+env.VAR1 ("(hidden)")                                                    Environment Variable      local
+env.VAR2 ("VAR_2_TOML")                                                  Environment Variable      local
+env.VAR3 ("(hidden)")                                                    Environment Variable      local
 Service bindings, Durable Object bindings, and Tail consumers connect to other \`wrangler dev\` processes running locally, with their connection status indicated by [connected] or [not connected]. For more details, refer to https://developers.cloudflare.com/workers/runtime-apis/bindings/service-bindings/#local-development
 ▲ [WARNING] Using Workers AI always accesses your Cloudflare account in order to run AI models, and so will incur usage charges even in local development.
 "

packages/wrangler/e2e/deployments.test.ts

@@ -285,7 +285,6 @@ Uploaded 2 of 3 assets
 Uploaded 3 of 3 assets
 ✨ Success! Uploaded 3 files (TIMINGS)
 Total Upload: xx KiB / gzip: xx KiB
-No bindings found.
 Uploaded tmp-e2e-worker-00000000-0000-0000-0000-000000000000 (TIMINGS)
 Deployed tmp-e2e-worker-00000000-0000-0000-0000-000000000000 triggers (TIMINGS)
   https://tmp-e2e-worker-00000000-0000-0000-0000-000000000000.SUBDOMAIN.workers.dev
@@ -374,8 +373,8 @@ Uploaded 3 of 3 assets
 ✨ Success! Uploaded 3 files (TIMINGS)
 Total Upload: xx KiB / gzip: xx KiB
 Your Worker has access to the following bindings:
-- Assets:
-  - Binding: ASSETS
+Binding            Resource
+env.ASSETS         Assets
 Uploaded tmp-e2e-worker-00000000-0000-0000-0000-000000000000 (TIMINGS)
 Deployed tmp-e2e-worker-00000000-0000-0000-0000-000000000000 triggers (TIMINGS)
   https://tmp-e2e-worker-00000000-0000-0000-0000-000000000000.SUBDOMAIN.workers.dev
@@ -541,8 +540,8 @@ Uploaded 3 of 3 assets
 ✨ Success! Uploaded 3 files (TIMINGS)
 Total Upload: xx KiB / gzip: xx KiB
 Your Worker has access to the following bindings:
-- Assets:
-  - Binding: ASSETS
+Binding            Resource
+env.ASSETS         Assets
 Uploaded tmp-e2e-worker-00000000-0000-0000-0000-000000000000 (TIMINGS)
 Deployed tmp-e2e-worker-00000000-0000-0000-0000-000000000000 triggers (TIMINGS)
   https://tmp-e2e-worker-00000000-0000-0000-0000-000000000000.SUBDOMAIN.workers.dev
@@ -651,7 +650,6 @@ Uploaded 2 of 3 assets
 Uploaded 3 of 3 assets
 ✨ Success! Uploaded 3 files (TIMINGS)
 Total Upload: xx KiB / gzip: xx KiB
-No bindings found.
 Uploaded tmp-e2e-worker-00000000-0000-0000-0000-000000000000 (TIMINGS)
   Dispatch Namespace: tmp-e2e-dispatch-00000000-0000-0000-0000-000000000000
 Current Version ID: 00000000-0000-0000-0000-000000000000`);
@@ -663,8 +661,8 @@ Current Version ID: 00000000-0000-0000-0000-000000000000`);
 			normalizedStdout = normalize(output.stdout);
 			expect(normalizedStdout).toEqual(`Total Upload: xx KiB / gzip: xx KiB
 Your Worker has access to the following bindings:
-- Dispatch Namespaces:
-  - DISPATCH: tmp-e2e-dispatch-00000000-0000-0000-0000-000000000000
+Binding                                                                   Resource
+env.DISPATCH (tmp-e2e-dispatch-00000000-0000-0000-0000-000000000000)      Dispatch Namespace
 Uploaded tmp-e2e-worker-00000000-0000-0000-0000-000000000000 (TIMINGS)
 Deployed tmp-e2e-worker-00000000-0000-0000-0000-000000000000 triggers (TIMINGS)
   https://tmp-e2e-worker-00000000-0000-0000-0000-000000000000.SUBDOMAIN.workers.dev
@@ -763,8 +761,8 @@ Uploaded 3 of 3 assets
 ✨ Success! Uploaded 3 files (TIMINGS)
 Total Upload: xx KiB / gzip: xx KiB
 Your Worker has access to the following bindings:
-- Assets:
-  - Binding: ASSETS
+Binding            Resource
+env.ASSETS         Assets
 Uploaded tmp-e2e-worker-00000000-0000-0000-0000-000000000000 (TIMINGS)
   Dispatch Namespace: tmp-e2e-dispatch-00000000-0000-0000-0000-000000000000
 Current Version ID: 00000000-0000-0000-0000-000000000000`);
@@ -776,8 +774,8 @@ Current Version ID: 00000000-0000-0000-0000-000000000000`);
 			normalizedStdout = normalize(output.stdout);
 			expect(normalizedStdout).toEqual(`Total Upload: xx KiB / gzip: xx KiB
 Your Worker has access to the following bindings:
-- Dispatch Namespaces:
-  - DISPATCH: tmp-e2e-dispatch-00000000-0000-0000-0000-000000000000
+Binding                                                                   Resource
+env.DISPATCH (tmp-e2e-dispatch-00000000-0000-0000-0000-000000000000)      Dispatch Namespace
 Uploaded tmp-e2e-worker-00000000-0000-0000-0000-000000000000 (TIMINGS)
 Deployed tmp-e2e-worker-00000000-0000-0000-0000-000000000000 triggers (TIMINGS)
   https://tmp-e2e-worker-00000000-0000-0000-0000-000000000000.SUBDOMAIN.workers.dev
@@ -874,8 +872,8 @@ Uploaded 3 of 3 assets
 ✨ Success! Uploaded 3 files (TIMINGS)
 Total Upload: xx KiB / gzip: xx KiB
 Your Worker has access to the following bindings:
-- Assets:
-  - Binding: ASSETS
+Binding            Resource
+env.ASSETS         Assets
 Uploaded tmp-e2e-worker-00000000-0000-0000-0000-000000000000 (TIMINGS)
   Dispatch Namespace: tmp-e2e-dispatch-00000000-0000-0000-0000-000000000000
 Current Version ID: 00000000-0000-0000-0000-000000000000`);
@@ -887,8 +885,8 @@ Current Version ID: 00000000-0000-0000-0000-000000000000`);
 			normalizedStdout = normalize(output.stdout);
 			expect(normalizedStdout).toEqual(`Total Upload: xx KiB / gzip: xx KiB
 Your Worker has access to the following bindings:
-- Dispatch Namespaces:
-  - DISPATCH: tmp-e2e-dispatch-00000000-0000-0000-0000-000000000000
+Binding                                                                   Resource
+env.DISPATCH (tmp-e2e-dispatch-00000000-0000-0000-0000-000000000000)      Dispatch Namespace
 Uploaded tmp-e2e-worker-00000000-0000-0000-0000-000000000000 (TIMINGS)
 Deployed tmp-e2e-worker-00000000-0000-0000-0000-000000000000 triggers (TIMINGS)
   https://tmp-e2e-worker-00000000-0000-0000-0000-000000000000.SUBDOMAIN.workers.dev

packages/wrangler/e2e/dev-mixed-mode.test.ts

@@ -136,14 +136,13 @@ describe("wrangler dev - mixed mode", () => {
 
 		// This should only include logs from the user Wrangler session (i.e. a single list of attached bindings, and only one ready message)
 		expect(normalizeOutput(worker.currentOutput)).toMatchInlineSnapshot(`
-			"Your Worker and resources are simulated locally via Miniflare. For more information, see: https://developers.cloudflare.com/workers/testing/local-development.
-			Your Worker has access to the following bindings:
-			- AI:
-			  - Name: AI [connected to remote resource]
-			[wrangler:inf] Ready on http://localhost:<PORT>
+			"Your Worker has access to the following bindings:
+			Binding        Resource      Mode
+			env.AI         AI      remote
+			[wrangler:info] Ready on http://localhost:<PORT>
 			▲ [WARNING] Using Workers AI always accesses your Cloudflare account in order to run AI models, and so will incur usage charges even in local development.
 			⎔ Starting local server...
-			[wrangler:inf] GET / 200 OK (TIMINGS)"
+			[wrangler:info] GET / 200 OK (TIMINGS)"
 		`);
 	});
 

packages/wrangler/e2e/helpers/normalize.ts

@@ -86,7 +86,7 @@ function removeKVId(str: string) {
  * Remove the Wrangler version/update check header
  */
 function removeVersionHeader(str: string): string {
-	const header = str.match(/⛅️ wrangler .*\n----+\n/);
+	const header = str.match(/⛅️ wrangler .*\n───+\n/);
 	if (header !== null && header.index) {
 		return str.slice(header.index + header[0].length);
 	} else {
@@ -176,8 +176,8 @@ function normalizeDebugLogFilepath(stdout: string): string {
  */
 function removeLocalPort(stdout: string): string {
 	return stdout.replace(
-		/\[wrangler:inf\] Ready on (https?):\/\/(.+):\d{4,5}/,
-		"[wrangler:inf] Ready on $1://$2:<PORT>"
+		/\[wrangler:info\] Ready on (https?):\/\/(.+):\d{4,5}/,
+		"[wrangler:info] Ready on $1://$2:<PORT>"
 	);
 }