feat(vite-plugin): Add Containers-related info logs (#10071)

* feat(vite-plugin): Add Containers-related info logs

* feedback fixes

Author: CarmenPopoviciu

.changeset/afraid-experts-take.md

@@ -0,0 +1,7 @@
+---
+"@cloudflare/vite-plugin": patch
+---
+
+feat(vite-plugin): Add Containers-related info logs
+
+Add logs, when a Worker has Containers configured, providing information about container build status, and how to rebuild containers during local development.

packages/vite-plugin-cloudflare/src/index.ts

@@ -10,6 +10,7 @@ import { generateStaticRoutingRuleMatcher } from "@cloudflare/workers-shared/ass
 import replace from "@rollup/plugin-replace";
 import MagicString from "magic-string";
 import { Miniflare } from "miniflare";
+import colors from "picocolors";
 import * as vite from "vite";
 import {
 	createModuleReference,
@@ -449,13 +450,27 @@ if (import.meta.hot) {
 					}
 
 					if (hasDevContainers) {
+						viteDevServer.config.logger.info(
+							colors.dim(
+								colors.yellow(
+									"∷ Building container images for local development...\n"
+								)
+							)
+						);
 						containerImageTagsSeen = await prepareContainerImages({
 							containersConfig: entryWorkerConfig.containers,
 							containerBuildId,
 							isContainersEnabled: entryWorkerConfig.dev.enable_containers,
 							dockerPath,
 							configPath: entryWorkerConfig.configPath,
 						});
+						viteDevServer.config.logger.info(
+							colors.dim(
+								colors.yellow(
+									"\n⚡️ Containers successfully built. To rebuild your containers during development, restart the Vite dev server (r + enter)."
+								)
+							)
+						);
 
 						// poll Docker every two seconds and update the list of ids of all
 						// running containers
@@ -575,13 +590,23 @@ if (import.meta.hot) {
 				if (hasDevContainers) {
 					const dockerPath = getDockerPath();
 
+					vitePreviewServer.config.logger.info(
+						colors.dim(
+							colors.yellow(
+								"∷ Building container images for local preview...\n"
+							)
+						)
+					);
 					containerImageTagsSeen = await prepareContainerImages({
 						containersConfig: entryWorkerConfig.containers,
 						containerBuildId,
 						isContainersEnabled: entryWorkerConfig.dev.enable_containers,
 						dockerPath,
 						configPath: entryWorkerConfig.configPath,
 					});
+					vitePreviewServer.config.logger.info(
+						colors.dim(colors.yellow("\n⚡️ Containers successfully built.\n"))
+					);
 
 					const dockerPollIntervalId = setInterval(async () => {
 						if (containerImageTagsSeen?.size) {

packages/wrangler/src/dev/hotkeys.ts

@@ -1,4 +1,4 @@
-import { randomUUID } from "crypto";
+import { generateContainerBuildId } from "@cloudflare/containers-shared";
 import { LocalRuntimeController } from "../api/startDevWorker/LocalRuntimeController";
 import registerHotKeys from "../cli-hotkeys";
 import { logger } from "../logger";
@@ -71,7 +71,7 @@ export default function registerDevHotKeys(
 						})
 					);
 
-					const newContainerBuildId = randomUUID().slice(0, 8);
+					const newContainerBuildId = generateContainerBuildId();
 
 					// updating the build ID will trigger a rebuild of the containers
 					await devEnv.config.patch({