fix(console): preflight logs don't appear in the logs panel (#6908)

Moves the preflight log entries (those emitted when compiling wing code) to the console logs panel. Previously, they were emitted through stdout to the terminal that launched the console.

In order to achieve so, adds an optional `preflightLog` option to the `compile` function in the `@winglang/compiler` package. By default, preflight logs are emitted through `console.log`.

Fixes #3698.

apps/wing-console/console/app/demo/main.w

@@ -324,3 +324,5 @@ class ApiUsersService {
 }
 
 new ApiUsersService();
+
+log("hello from inflight");

apps/wing-console/console/app/scripts/dev.mjs

@@ -24,9 +24,9 @@ const options = parseArgs({
       fileURLToPath(new URL("../demo/main.w", import.meta.url)),
     requestedPort: 1214,
     log: {
-      info: console.log,
-      error: console.error,
-      verbose: console.log,
+      info: () => {},
+      error: (...arguments_) => console.error("[error]", ...arguments_),
+      verbose: () => {},
     },
     config: {
       addEventListener(event, listener) {},

apps/wing-console/console/server/src/index.ts

@@ -126,6 +126,9 @@ export const createConsoleServer = async ({
     testing: false,
     stateDir,
     watchGlobs,
+    preflightLog(data) {
+      consoleLogger.log(data, "compiler");
+    },
   });
   let isStarting = false;
   let isStopping = false;

apps/wing-console/console/server/src/utils/compiler.ts

@@ -29,6 +29,7 @@ export interface CreateCompilerProps {
   testing?: boolean;
   stateDir?: string;
   watchGlobs?: string[];
+  preflightLog?: (message: string) => void;
 }
 
 export const createCompiler = ({
@@ -37,6 +38,7 @@ export const createCompiler = ({
   testing = false,
   stateDir,
   watchGlobs,
+  preflightLog,
 }: CreateCompilerProps): Compiler => {
   const dirname = path.dirname(wingfile);
   const events = new Emittery<CompilerEvents>();
@@ -58,6 +60,7 @@ export const createCompiler = ({
       simfile = await wing.compile(wingfile, {
         platform,
         testing,
+        preflightLog,
       });
       await events.emit("compiled", { simfile });
     } catch (error) {

apps/wing-console/console/ui/src/features/logs-pane/console-logs.tsx

@@ -27,6 +27,7 @@ const shortDateTimeFormat = new Intl.DateTimeFormat(undefined, {
   minute: "2-digit",
   second: "2-digit",
   fractionalSecondDigits: 3,
+  hour12: false,
 });
 
 const longDateTimeFormat = new Intl.DateTimeFormat(undefined, {
@@ -37,6 +38,7 @@ const longDateTimeFormat = new Intl.DateTimeFormat(undefined, {
   minute: "2-digit",
   second: "2-digit",
   fractionalSecondDigits: 3,
+  hour12: false,
 });
 
 interface LogEntryProps {
@@ -127,7 +129,7 @@ const LogEntryRow = memo(
         {/*eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions*/}
         <div
           className={classNames(
-            "group w-full flex",
+            "group w-full",
             "flex min-w-0",
             "justify-between",
             theme.border4,
@@ -173,7 +175,7 @@ const LogEntryRow = memo(
           <div
             className={classNames("min-w-0 text-left grow", {
               truncate: !expanded,
-              "ml-2": log.timestamp && !log.ctx?.hideTimestamp,
+              "ml-4": log.timestamp && !log.ctx?.hideTimestamp,
             })}
           >
             {canBeExpanded && (
@@ -208,6 +210,11 @@ const LogEntryRow = memo(
               )}
               ref={expandableRef}
             >
+              {log.source === "compiler" && (
+                <span className="bg-slate-450 text-white dark:bg-slate-550 rounded inline px-1 select-none pointer-events-none mr-2">
+                  Compiler
+                </span>
+              )}
               <Linkify
                 options={{
                   className: "text-sky-500 underline hover:text-sky-800",

libs/wingcompiler/src/compile.ts

@@ -57,6 +57,7 @@ export interface CompileOptions {
    */
   readonly testing?: boolean;
   readonly log?: (...args: any[]) => void;
+  readonly preflightLog?: (...args: any[]) => void;
 
   /// Enable/disable color output for the compiler (subject to terminal detection)
   readonly color?: boolean;
@@ -133,6 +134,7 @@ export function determineTargetFromPlatforms(platforms: string[]): string {
  */
 export async function compile(entrypoint: string, options: CompileOptions): Promise<string> {
   const { log } = options;
+  const preflightLog = options.preflightLog ?? console.log;
   // create a unique temporary directory for the compilation
   const targetdir = options.targetDir ?? join(dirname(entrypoint), "target");
   const entrypointFile = resolve(entrypoint);
@@ -205,9 +207,11 @@ export async function compile(entrypoint: string, options: CompileOptions): Prom
         delete preflightEnv.Path;
       }
     }
+
     await runPreflightCodeInWorkerThread(
       compileForPreflightResult.preflightEntrypoint,
-      preflightEnv
+      preflightEnv,
+      (data) => preflightLog?.(data.toString().trim())
     );
   }
   return synthDir;
@@ -332,16 +336,19 @@ function defaultValuesFile() {
 
 async function runPreflightCodeInWorkerThread(
   entrypoint: string,
-  env: Record<string, string | undefined>
+  env: Record<string, string | undefined>,
+  onStdout: (data: Buffer) => void
 ): Promise<void> {
   try {
     env.WING_PREFLIGHT_ENTRYPOINT = JSON.stringify(entrypoint);
 
     await new Promise((resolve, reject) => {
       const worker = fork(join(__dirname, "..", "preflight.shim.cjs"), {
         env,
-        stdio: "inherit",
+        stdio: "pipe",
       });
+      worker.stdout?.on("data", onStdout);
+      worker.stderr?.on("data", onStdout);
       worker.on("message", reject);
       worker.on("error", reject);
       worker.on("exit", (code) => {