[feat] Add esptool logs to install web dialog

Author: pzich

src/install-web/index.ts

@@ -1,7 +1,39 @@
+import type { IEspLoaderTerminal } from "esptool-js";
 import { openNoPortPickedDialog } from "../no-port-picked";
 import { createESPLoader } from "../web-serial/create-esploader";
 import type { ESPHomeInstallWebDialog } from "./install-web-dialog";
 
+export class ESPLoaderTerminalStream {
+  public stream: ReadableStream;
+  public terminal: IEspLoaderTerminal;
+  private controller?: ReadableStreamDefaultController<any>;
+
+  constructor() {
+    const _this = this;
+    this.stream = new ReadableStream({
+      start(controller) {
+        _this.controller = controller;
+      },
+    });
+
+    this.terminal = {
+      clean: () => {
+        this.controller?.enqueue("\n\n\n");
+      },
+      writeLine: (data: string) => {
+        console.log(data);
+        this.controller?.enqueue(`${data}\n`);
+      },
+      write: (data: string) => {
+        console.log(data);
+        // Fix "Connecting..." line break
+        if (data == "\n\r") this.controller?.enqueue("\n");
+        else this.controller?.enqueue(data);
+      },
+    };
+  }
+}
+
 export const preloadInstallWebDialog = () => import("./install-web-dialog");
 
 export const openInstallWebDialog = async (
@@ -30,7 +62,10 @@ export const openInstallWebDialog = async (
       return;
     }
   }
-  const esploader = createESPLoader(port);
+
+  const terminalStream = new ESPLoaderTerminalStream();
+
+  const esploader = createESPLoader(port, terminalStream.terminal);
 
   if (onDialogOpen) {
     onDialogOpen();
@@ -39,5 +74,6 @@ export const openInstallWebDialog = async (
   const dialog = document.createElement("esphome-install-web-dialog");
   dialog.params = params;
   dialog.esploader = esploader;
+  dialog.stream = terminalStream.stream;
   document.body.append(dialog);
 };

src/install-web/install-console.ts

@@ -0,0 +1,62 @@
+import { ColoredConsole, coloredConsoleStyles } from "../util/console-color";
+import { Logger } from "../const";
+
+export class InstallConsole extends HTMLElement {
+  public port!: SerialPort;
+  public logger!: Logger;
+
+  private _console?: ColoredConsole;
+
+  public logs(): string {
+    return this._console?.logs() || "";
+  }
+
+  public addLine(line: string) {
+    this._console?.addLine(line);
+  }
+
+  public connectedCallback() {
+    if (this._console) {
+      return;
+    }
+    const shadowRoot = this.attachShadow({ mode: "open" });
+
+    shadowRoot.innerHTML = `
+      <style>
+        :host, input {
+          background-color: #1c1c1c;
+          color: #ddd;
+          font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
+            monospace;
+          line-height: 1.45;
+          display: flex;
+          flex-direction: column;
+        }
+        form {
+          display: flex;
+          align-items: center;
+          padding: 0 8px 0 16px;
+        }
+        input {
+          flex: 1;
+          padding: 4px;
+          margin: 0 8px;
+          border: 0;
+          outline: none;
+        }
+        ${coloredConsoleStyles}
+      </style>
+      <div class="log"></div>
+    `;
+
+    this._console = new ColoredConsole(this.shadowRoot!.querySelector("div")!);
+  }
+}
+
+customElements.define("install-console", InstallConsole);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "install-console": InstallConsole;
+  }
+}

src/install-web/install-web-dialog.ts

@@ -1,9 +1,11 @@
 import { LitElement, html, PropertyValues, css, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import "@material/mwc-dialog";
 import "@material/mwc-circular-progress";
 import "@material/mwc-button";
 import type { ESPLoader } from "esptool-js";
+import "./install-console";
+import type { InstallConsole } from "./install-console";
 import {
   compileConfiguration,
   Configuration,
@@ -43,6 +45,9 @@ export class ESPHomeInstallWebDialog extends LitElement {
   };
 
   @property() public esploader!: ESPLoader;
+  @property() public stream?: ReadableStream;
+
+  @query("install-console") private _console!: InstallConsole;
 
   @state() private _writeProgress?: number;
 
@@ -56,6 +61,23 @@ export class ESPHomeInstallWebDialog extends LitElement {
 
   private _platform?: ValueOf<typeof chipFamilyToPlatform>;
 
+  @property() private _showLogs = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // this._console won't be defined until after the first paint
+    setTimeout(() => {
+      this.stream?.pipeTo(
+        new WritableStream({
+          write: (chunk) => {
+            this._console.addLine(chunk);
+          },
+        }),
+      );
+    });
+  }
+
   protected render() {
     let heading;
     let content;
@@ -106,6 +128,8 @@ export class ESPHomeInstallWebDialog extends LitElement {
       }
     }
 
+    hideActions = false;
+
     return html`
       <mwc-dialog
         open
@@ -115,6 +139,14 @@ export class ESPHomeInstallWebDialog extends LitElement {
         .hideActions=${hideActions}
       >
         ${content}
+        <install-console
+          class="${this._showLogs ? "" : "hidden"}"
+        ></install-console>
+        <mwc-button
+          slot="secondaryAction"
+          @click=${this._toggleLogs}
+          label="${this._showLogs ? "Hide" : "Show"} Logs"
+        ></mwc-button>
       </mwc-dialog>
     `;
   }
@@ -148,7 +180,7 @@ export class ESPHomeInstallWebDialog extends LitElement {
         <div class="icon">${icon}</div>
         ${label}
       </div>
-      ${showClose
+      ${showClose || true
         ? html`
             <mwc-button
               slot="primaryAction"
@@ -303,6 +335,10 @@ export class ESPHomeInstallWebDialog extends LitElement {
     return await getConfigurationFiles(configuration);
   }
 
+  private _toggleLogs() {
+    this._showLogs = !this._showLogs;
+  }
+
   private _close() {
     this.shadowRoot!.querySelector("mwc-dialog")!.close();
   }
@@ -317,6 +353,18 @@ export class ESPHomeInstallWebDialog extends LitElement {
   static styles = [
     esphomeDialogStyles,
     css`
+      install-console {
+        width: 500px;
+        height: 300px;
+        margin-top: 16px;
+        overflow: hidden;
+        transition: all 0.2s ease-in-out;
+      }
+      install-console.hidden {
+        margin-top: 0;
+        width: 230px;
+        height: 0;
+      }
       mwc-list-item {
         margin: 0 -20px;
       }

src/web-serial/create-esploader.ts

@@ -1,11 +1,15 @@
-import { Transport, ESPLoader } from "esptool-js";
+import { Transport, ESPLoader, IEspLoaderTerminal } from "esptool-js";
 
-export const createESPLoader = (port: SerialPort) => {
+export const createESPLoader = (
+  port: SerialPort,
+  terminal?: IEspLoaderTerminal,
+) => {
   const transport = new Transport(port);
   return new ESPLoader({
     transport,
     baudrate: 115200,
     romBaudrate: 115200,
     enableTracing: false,
+    terminal,
   });
 };