Fix: No colors when using --watch

.chronus/changes/watch-color-2024-1-8-23-15-57.md

@@ -0,0 +1,8 @@
+---
+# Change versionKind to one of: internal, fix, dependencies, feature, deprecation, breaking
+changeKind: fix
+packages:
+  - "@typespec/compiler"
+---
+
+Fix: `tsp compile --watch` was missing coloring and error previews

packages/compiler/src/core/cli/actions/compile/compile.ts

@@ -73,10 +73,12 @@ async function compileOnce(
 }
 
 function compileWatch(
-  host: CompilerHost,
+  cliHost: CliCompilerHost,
   path: string,
   compilerOptions: CompilerOptions
 ): Promise<void> {
+  const watchHost: WatchHost = createWatchHost(cliHost);
+
   let compileRequested: boolean = false;
   let currentCompilePromise: Promise<Program> | undefined = undefined;
 
@@ -88,7 +90,7 @@ function compileWatch(
       console.clear();
 
       watchHost?.forceJSReload();
-      currentCompilePromise = compileProgram(host, resolve(path), compilerOptions)
+      currentCompilePromise = compileProgram(watchHost, resolve(path), compilerOptions)
         .then(onCompileFinished)
         .catch(handleInternalCompilerError);
     } else {
@@ -103,11 +105,10 @@ function compileWatch(
   const watcher: ProjectWatcher = createWatcher((_name: string) => {
     scheduleCompile();
   });
-  const watchHost: WatchHost = (host = createWatchHost());
 
   const onCompileFinished = (program: Program) => {
     watcher?.updateWatchedFiles([...program.sourceFiles.keys(), ...program.jsSourceFiles.keys()]);
-    logProgramResult(host, program, { showTimestamp: true });
+    logProgramResult(watchHost, program, { showTimestamp: true });
 
     currentCompilePromise = undefined;
     if (compileRequested) {

packages/compiler/src/core/cli/actions/compile/watch.ts

@@ -1,7 +1,7 @@
 import { FSWatcher, WatchEventType, watch } from "fs";
 import { pathToFileURL } from "url";
-import { NodeHost } from "../../../node-host.js";
 import { CompilerHost } from "../../../types.js";
+import { CliCompilerHost } from "../../types.js";
 
 export interface ProjectWatcher {
   /** Set the files to watch. */
@@ -54,10 +54,10 @@ export function createWatcher(
   }
 }
 
-export function createWatchHost(): WatchHost {
+export function createWatchHost(host: CliCompilerHost): WatchHost {
   let count = 0;
   return {
-    ...NodeHost,
+    ...host,
     forceJSReload,
     getJsImport: (path: string) => import(pathToFileURL(path).href + `?=${count}`),
   };