tasmota-esp-web-tools 8.1.0

package/src/no-port-picked/index.ts

@@ -0,0 +1,10 @@
+import "./no-port-picked-dialog";
+
+export const openNoPortPickedDialog = async (
+  doTryAgain?: () => void
+): Promise<boolean> => {
+  const dialog = document.createElement("ewt-no-port-picked-dialog");
+  dialog.doTryAgain = doTryAgain;
+  document.body.append(dialog);
+  return true;
+};

package/src/no-port-picked/no-port-picked-dialog.ts

@@ -0,0 +1,158 @@
+import { LitElement, html, css, svg } from "lit";
+import { customElement } from "lit/decorators.js";
+import "../components/ewt-dialog";
+import "../components/ewt-button";
+import { dialogStyles } from "../styles";
+
+const cloudDownload = svg`
+  <svg
+    version="1.1"
+    id="Capa_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 510.322 510.322"
+    xml:space="preserve"
+    style="width: 28px; vertical-align: middle;"
+  >
+    <g>
+      <path
+        style="fill:currentColor;"
+        d="M429.064,159.505c0-0.151,0.086-1.057,0.086-1.057c0-75.282-61.261-136.521-136.543-136.521    c-52.244,0-97.867,30.587-120.753,76.339c-11.67-9.081-25.108-15.682-40.273-15.682c-37.166,0-67.387,30.199-67.387,67.387    c0,0,0.453,3.279,0.798,5.824C27.05,168.716,0,203.423,0,244.516c0,25.389,9.901,49.268,27.848,67.171    c17.968,17.99,41.804,27.869,67.193,27.869h130.244v46.83h-54.66l97.694,102.008l95.602-102.008h-54.66v-46.83H419.25    c50.174,0,91.072-40.855,91.072-90.986C510.3,201.827,474.428,164.639,429.064,159.505z M419.207,312.744H309.26v-55.545h-83.975    v55.545H95.019c-18.184,0-35.333-7.075-48.211-19.996c-12.878-12.878-19.953-30.005-19.953-48.189    c0-32.68,23.21-60.808,55.264-66.956l12.511-2.394l-2.092-14.431l-1.488-10.785c0-22.347,18.184-40.51,40.531-40.51    c13.266,0,25.691,6.514,33.305,17.408l15.229,21.873l8.52-25.303c15.013-44.652,56.796-74.656,103.906-74.656    c60.506,0,109.709,49.203,109.709,109.644l-1.337,25.712l15.121,0.302l3.149-0.086c35.419,0,64.216,28.797,64.216,64.216    C483.401,283.969,454.604,312.744,419.207,312.744z"
+      />
+    </g>
+  </svg>
+`;
+
+@customElement("ewt-no-port-picked-dialog")
+class EwtNoPortPickedDialog extends LitElement {
+  public doTryAgain?: () => void;
+
+  public render() {
+    return html`
+      <ewt-dialog
+        open
+        heading="No port selected"
+        scrimClickAction
+        @closed=${this._handleClose}
+      >
+        <div>
+          If you didn't select a port because you didn't see your device listed,
+          try the following steps:
+        </div>
+        <ol>
+          <li>
+            Make sure that the device is connected to this computer (the one
+            that runs the browser that shows this website)
+          </li>
+          <li>
+            Most devices have a tiny light when it is powered on. If yours has
+            one, make sure it is on.
+          </li>
+          <li>
+            Make sure that the USB cable you use can be used for data and is not
+            a power-only cable.
+          </li>
+          <li>
+            Make sure you have the right drivers installed. Below are the
+            drivers for common chips used in ESP devices:
+            <ul>
+              <li>
+                CP2102 drivers:
+                <a
+                  href="https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers"
+                  target="_blank"
+                  rel="noopener"
+                  >Windows & Mac</a
+                >
+              </li>
+              <li>
+                CH342, CH343, CH9102 drivers:
+                <a
+                  href="https://www.wch.cn/downloads/CH343SER_ZIP.html"
+                  target="_blank"
+                  rel="noopener"
+                  >Windows</a
+                >,
+                <a
+                  href="https://www.wch.cn/downloads/CH34XSER_MAC_ZIP.html"
+                  target="_blank"
+                  rel="noopener"
+                  >Mac</a
+                >
+                <br />
+                (download via blue button with ${cloudDownload} icon)
+              </li>
+              <li>
+                CH340, CH341 drivers:
+                <a
+                  href="https://www.wch.cn/downloads/CH341SER_ZIP.html"
+                  target="_blank"
+                  rel="noopener"
+                  >Windows</a
+                >,
+                <a
+                  href="https://www.wch.cn/downloads/CH341SER_MAC_ZIP.html"
+                  target="_blank"
+                  rel="noopener"
+                  >Mac</a
+                >
+                <br />
+                (download via blue button with ${cloudDownload} icon)
+              </li>
+            </ul>
+          </li>
+        </ol>
+        ${this.doTryAgain
+          ? html`
+              <ewt-button
+                slot="primaryAction"
+                dialogAction="close"
+                label="Try Again"
+                @click=${this.doTryAgain}
+              ></ewt-button>
+
+              <ewt-button
+                no-attention
+                slot="secondaryAction"
+                dialogAction="close"
+                label="Cancel"
+              ></ewt-button>
+            `
+          : html`
+              <ewt-button
+                slot="primaryAction"
+                dialogAction="close"
+                label="Close"
+              ></ewt-button>
+            `}
+      </ewt-dialog>
+    `;
+  }
+
+  private async _handleClose() {
+    this.parentNode!.removeChild(this);
+  }
+
+  static styles = [
+    dialogStyles,
+    css`
+      li + li,
+      li > ul {
+        margin-top: 8px;
+      }
+      ul,
+      ol {
+        margin-bottom: 0;
+        padding-left: 1.5em;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ewt-no-port-picked-dialog": EwtNoPortPickedDialog;
+  }
+}

package/src/pages/ewt-page-message.ts

@@ -0,0 +1,39 @@
+import { LitElement, html, css, TemplateResult } from "lit";
+import { property } from "lit/decorators.js";
+import "../components/ewt-circular-progress";
+
+class EwtPageMessage extends LitElement {
+  @property() icon!: string;
+
+  @property() label!: string | TemplateResult;
+
+  render() {
+    return html`
+      <div class="icon">${this.icon}</div>
+      ${this.label}
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+    }
+    .icon {
+      font-size: 50px;
+      line-height: 80px;
+      color: black;
+    }
+    ewt-circular-progress {
+      margin-bottom: 16px;
+    }
+  `;
+}
+customElements.define("ewt-page-message", EwtPageMessage);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ewt-page-message": EwtPageMessage;
+  }
+}

package/src/pages/ewt-page-progress.ts

@@ -0,0 +1,44 @@
+import { LitElement, html, css, TemplateResult } from "lit";
+import { property } from "lit/decorators.js";
+import "../components/ewt-circular-progress";
+
+class EwtPageProgress extends LitElement {
+  @property() label!: string | TemplateResult;
+
+  @property() progress: number | undefined;
+
+  render() {
+    return html`
+      <div>
+        <ewt-circular-progress
+          active
+          ?indeterminate=${this.progress === undefined}
+          .progress=${this.progress !== undefined
+            ? this.progress / 100
+            : undefined}
+          density="8"
+        ></ewt-circular-progress>
+        ${this.progress !== undefined ? html`<div>${this.progress}%</div>` : ""}
+      </div>
+      ${this.label}
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+    }
+    ewt-circular-progress {
+      margin-bottom: 16px;
+    }
+  `;
+}
+customElements.define("ewt-page-progress", EwtPageProgress);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ewt-page-progress": EwtPageProgress;
+  }
+}

package/src/styles.ts

@@ -0,0 +1,34 @@
+import { css } from "lit";
+
+// We set font-size to 16px and all the mdc typography styles
+// because it defaults to rem, which means that the font-size
+// of the host website would influence the ESP Web Tools dialog.
+
+export const dialogStyles = css`
+  :host {
+    --mdc-theme-primary: var(--improv-primary-color, #03a9f4);
+    --mdc-theme-on-primary: var(--improv-on-primary-color, #fff);
+    --improv-danger-color: #db4437;
+    --improv-text-color: rgba(0, 0, 0, 0.6);
+    --mdc-theme-text-primary-on-background: var(--improv-text-color);
+    --mdc-dialog-content-ink-color: var(--improv-text-color);
+    text-align: left;
+    font-size: 16px;
+    --mdc-typography-headline6-font-size: 1.25em;
+    --mdc-typography-headline6-line-height: 2em;
+    --mdc-typography-body1-font-size: 1em;
+    --mdc-typography-body1-line-height: 1.5em;
+    --mdc-typography-button-font-size: 0.875em;
+    --mdc-typography-button-line-height: 2.25em;
+    --mdc-typography-subtitle1-font-size: 1em;
+    --mdc-typography-subtitle1-line-height: 1.75em;
+  }
+
+  a {
+    color: var(--improv-primary-color, #03a9f4);
+  }
+
+  a.button {
+    text-decoration: none;
+  }
+`;

package/src/util/chip-family-name.ts

@@ -0,0 +1,28 @@
+import {
+  CHIP_FAMILY_ESP32,
+  CHIP_FAMILY_ESP32S2,
+  CHIP_FAMILY_ESP32S3,
+  CHIP_FAMILY_ESP8266,
+  CHIP_FAMILY_ESP32C3,
+  ESPLoader,
+} from "tasmota-webserial-esptool";
+import type { BaseFlashState } from "../const";
+
+export const getChipFamilyName = (
+  esploader: ESPLoader
+): NonNullable<BaseFlashState["chipFamily"]> => {
+  switch (esploader.chipFamily) {
+    case CHIP_FAMILY_ESP32:
+      return "ESP32";
+    case CHIP_FAMILY_ESP8266:
+      return "ESP8266";
+    case CHIP_FAMILY_ESP32S2:
+      return "ESP32-S2";
+    case CHIP_FAMILY_ESP32S3:
+      return "ESP32-S3";
+    case CHIP_FAMILY_ESP32C3:
+      return "ESP32-C3";
+    default:
+      return "Unknown Chip";
+  }
+};

package/src/util/console-color.ts

@@ -0,0 +1,283 @@
+interface ConsoleState {
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+  strikethrough: boolean;
+  foregroundColor: string | null;
+  backgroundColor: string | null;
+  carriageReturn: boolean;
+  secret: boolean;
+}
+
+export class ColoredConsole {
+  public state: ConsoleState = {
+    bold: false,
+    italic: false,
+    underline: false,
+    strikethrough: false,
+    foregroundColor: null,
+    backgroundColor: null,
+    carriageReturn: false,
+    secret: false,
+  };
+
+  constructor(public targetElement: HTMLElement) {}
+
+  logs(): string {
+    return this.targetElement.innerText;
+  }
+
+  addLine(line: string) {
+    const re = /(?:\033|\\033)(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g;
+    let i = 0;
+
+    if (this.state.carriageReturn) {
+      if (line !== "\n") {
+        // don't remove if \r\n
+        this.targetElement.removeChild(this.targetElement.lastChild!);
+      }
+      this.state.carriageReturn = false;
+    }
+
+    if (line.includes("\r")) {
+      this.state.carriageReturn = true;
+    }
+
+    const lineSpan = document.createElement("span");
+    lineSpan.classList.add("line");
+    this.targetElement.appendChild(lineSpan);
+
+    const addSpan = (content: string) => {
+      if (content === "") return;
+
+      const span = document.createElement("span");
+      if (this.state.bold) span.classList.add("log-bold");
+      if (this.state.italic) span.classList.add("log-italic");
+      if (this.state.underline) span.classList.add("log-underline");
+      if (this.state.strikethrough) span.classList.add("log-strikethrough");
+      if (this.state.secret) span.classList.add("log-secret");
+      if (this.state.foregroundColor !== null)
+        span.classList.add(`log-fg-${this.state.foregroundColor}`);
+      if (this.state.backgroundColor !== null)
+        span.classList.add(`log-bg-${this.state.backgroundColor}`);
+      span.appendChild(document.createTextNode(content));
+      lineSpan.appendChild(span);
+
+      if (this.state.secret) {
+        const redacted = document.createElement("span");
+        redacted.classList.add("log-secret-redacted");
+        redacted.appendChild(document.createTextNode("[redacted]"));
+        lineSpan.appendChild(redacted);
+      }
+    };
+
+    while (true) {
+      const match = re.exec(line);
+      if (match === null) break;
+
+      const j = match.index;
+      addSpan(line.substring(i, j));
+      i = j + match[0].length;
+
+      if (match[1] === undefined) continue;
+
+      for (const colorCode of match[1].split(";")) {
+        switch (parseInt(colorCode)) {
+          case 0:
+            // reset
+            this.state.bold = false;
+            this.state.italic = false;
+            this.state.underline = false;
+            this.state.strikethrough = false;
+            this.state.foregroundColor = null;
+            this.state.backgroundColor = null;
+            this.state.secret = false;
+            break;
+          case 1:
+            this.state.bold = true;
+            break;
+          case 3:
+            this.state.italic = true;
+            break;
+          case 4:
+            this.state.underline = true;
+            break;
+          case 5:
+            this.state.secret = true;
+            break;
+          case 6:
+            this.state.secret = false;
+            break;
+          case 9:
+            this.state.strikethrough = true;
+            break;
+          case 22:
+            this.state.bold = false;
+            break;
+          case 23:
+            this.state.italic = false;
+            break;
+          case 24:
+            this.state.underline = false;
+            break;
+          case 29:
+            this.state.strikethrough = false;
+            break;
+          case 30:
+            this.state.foregroundColor = "black";
+            break;
+          case 31:
+            this.state.foregroundColor = "red";
+            break;
+          case 32:
+            this.state.foregroundColor = "green";
+            break;
+          case 33:
+            this.state.foregroundColor = "yellow";
+            break;
+          case 34:
+            this.state.foregroundColor = "blue";
+            break;
+          case 35:
+            this.state.foregroundColor = "magenta";
+            break;
+          case 36:
+            this.state.foregroundColor = "cyan";
+            break;
+          case 37:
+            this.state.foregroundColor = "white";
+            break;
+          case 39:
+            this.state.foregroundColor = null;
+            break;
+          case 41:
+            this.state.backgroundColor = "red";
+            break;
+          case 42:
+            this.state.backgroundColor = "green";
+            break;
+          case 43:
+            this.state.backgroundColor = "yellow";
+            break;
+          case 44:
+            this.state.backgroundColor = "blue";
+            break;
+          case 45:
+            this.state.backgroundColor = "magenta";
+            break;
+          case 46:
+            this.state.backgroundColor = "cyan";
+            break;
+          case 47:
+            this.state.backgroundColor = "white";
+            break;
+          case 40:
+          case 49:
+            this.state.backgroundColor = null;
+            break;
+        }
+      }
+    }
+    addSpan(line.substring(i));
+
+    if (
+      this.targetElement.scrollTop + 56 >=
+      this.targetElement.scrollHeight - this.targetElement.offsetHeight
+    ) {
+      // at bottom
+      this.targetElement.scrollTop = this.targetElement.scrollHeight;
+    }
+  }
+}
+
+export const coloredConsoleStyles = `
+  .log {
+    flex: 1;
+    background-color: #1c1c1c;
+    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
+      monospace;
+    font-size: 12px;
+    padding: 16px;
+    overflow: auto;
+    line-height: 1.45;
+    border-radius: 3px;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    color: #ddd;
+  }
+
+  .log-bold {
+    font-weight: bold;
+  }
+  .log-italic {
+    font-style: italic;
+  }
+  .log-underline {
+    text-decoration: underline;
+  }
+  .log-strikethrough {
+    text-decoration: line-through;
+  }
+  .log-underline.log-strikethrough {
+    text-decoration: underline line-through;
+  }
+  .log-secret {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  .log-secret-redacted {
+    opacity: 0;
+    width: 1px;
+    font-size: 1px;
+  }
+  .log-fg-black {
+    color: rgb(128, 128, 128);
+  }
+  .log-fg-red {
+    color: rgb(255, 0, 0);
+  }
+  .log-fg-green {
+    color: rgb(0, 255, 0);
+  }
+  .log-fg-yellow {
+    color: rgb(255, 255, 0);
+  }
+  .log-fg-blue {
+    color: rgb(0, 0, 255);
+  }
+  .log-fg-magenta {
+    color: rgb(255, 0, 255);
+  }
+  .log-fg-cyan {
+    color: rgb(0, 255, 255);
+  }
+  .log-fg-white {
+    color: rgb(187, 187, 187);
+  }
+  .log-bg-black {
+    background-color: rgb(0, 0, 0);
+  }
+  .log-bg-red {
+    background-color: rgb(255, 0, 0);
+  }
+  .log-bg-green {
+    background-color: rgb(0, 255, 0);
+  }
+  .log-bg-yellow {
+    background-color: rgb(255, 255, 0);
+  }
+  .log-bg-blue {
+    background-color: rgb(0, 0, 255);
+  }
+  .log-bg-magenta {
+    background-color: rgb(255, 0, 255);
+  }
+  .log-bg-cyan {
+    background-color: rgb(0, 255, 255);
+  }
+  .log-bg-white {
+    background-color: rgb(255, 255, 255);
+  }
+`;

package/src/util/file-download.ts

@@ -0,0 +1,17 @@
+export const fileDownload = (href: string, filename = ""): void => {
+  const a = document.createElement("a");
+  a.target = "_blank";
+  a.href = href;
+  a.download = filename;
+
+  document.body.appendChild(a);
+  a.dispatchEvent(new MouseEvent("click"));
+  document.body.removeChild(a);
+};
+
+export const textDownload = (text: string, filename = ""): void => {
+  const blob = new Blob([text], { type: "text/plain" });
+  const url = URL.createObjectURL(blob);
+  fileDownload(url, filename);
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+};

package/src/util/fire-event.ts

@@ -0,0 +1,20 @@
+export const fireEvent = <Event extends keyof HTMLElementEventMap>(
+  eventTarget: EventTarget,
+  type: Event,
+  // @ts-ignore
+  detail?: HTMLElementEventMap[Event]["detail"],
+  options?: {
+    bubbles?: boolean;
+    cancelable?: boolean;
+    composed?: boolean;
+  }
+): void => {
+  options = options || {};
+  const event = new CustomEvent(type, {
+    bubbles: options.bubbles === undefined ? true : options.bubbles,
+    cancelable: Boolean(options.cancelable),
+    composed: options.composed === undefined ? true : options.composed,
+    detail,
+  });
+  eventTarget.dispatchEvent(event);
+};

package/src/util/line-break-transformer.ts

@@ -0,0 +1,20 @@
+export class LineBreakTransformer implements Transformer<string, string> {
+  private chunks = "";
+
+  transform(
+    chunk: string,
+    controller: TransformStreamDefaultController<string>
+  ) {
+    // Append new chunks to existing chunks.
+    this.chunks += chunk;
+    // For each line breaks in chunks, send the parsed lines out.
+    const lines = this.chunks.split("\r\n");
+    this.chunks = lines.pop()!;
+    lines.forEach((line) => controller.enqueue(line + "\r\n"));
+  }
+
+  flush(controller: TransformStreamDefaultController<string>) {
+    // When the stream is closed, flush any remaining chunks out.
+    controller.enqueue(this.chunks);
+  }
+}

package/src/util/manifest.ts

@@ -0,0 +1,18 @@
+import { Manifest } from "../const";
+
+export const downloadManifest = async (manifestPath: string) => {
+  const manifestURL = new URL(manifestPath, location.toString()).toString();
+  const resp = await fetch(manifestURL);
+  const manifest: Manifest = await resp.json();
+
+  if ("new_install_skip_erase" in manifest) {
+    console.warn(
+      'Manifest option "new_install_skip_erase" is deprecated. Use "new_install_prompt_erase" instead.'
+    );
+    if (manifest.new_install_skip_erase) {
+      manifest.new_install_prompt_erase = true;
+    }
+  }
+
+  return manifest;
+};

package/src/util/sleep.ts

@@ -0,0 +1,2 @@
+export const sleep = (time: number) =>
+  new Promise((resolve) => setTimeout(resolve, time));

package/static/logos/esphome.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 73"><g fill="none" fill-rule="evenodd"><path d="M72.63 16.18V12c0-1.47 1.19-2.66 2.66-2.66 1.47 0 2.66 1.19 2.66 2.66v4.18m-14.27 0V12c0-1.47 1.19-2.66 2.66-2.66A2.65 2.65 0 0 1 69 11.99v4.18m-14.28.01V12c0-1.47 1.19-2.66 2.66-2.66 1.47 0 2.66 1.19 2.66 2.66v4.18m-14.28 0V12c0-1.47 1.19-2.66 2.66-2.66 1.47 0 2.66 1.19 2.66 2.66v4.18m-14.28 0V12c0-1.47 1.19-2.66 2.66-2.66 1.47 0 2.66 1.19 2.66 2.66v4.18m-14.27 0V12c0-1.47 1.19-2.66 2.66-2.66 1.47 0 2.66 1.19 2.66 2.66v4.18M77.95 56.07v4.68c0 1.47-1.19 2.66-2.66 2.66-1.47 0-2.66-1.19-2.66-2.66v-4.68m-3.63 0v4.68c0 1.47-1.19 2.66-2.66 2.66-1.47 0-2.66-1.19-2.66-2.66v-4.68m-3.64 0v4.68c0 1.47-1.19 2.66-2.66 2.66-1.47 0-2.66-1.19-2.66-2.66v-4.68m-3.64 0v4.68c0 1.47-1.19 2.66-2.66 2.66-1.47 0-2.66-1.19-2.66-2.66v-4.68m-3.64 0v4.68c0 1.47-1.19 2.66-2.66 2.66-1.47 0-2.66-1.19-2.66-2.66v-4.68m-3.63.26v4.43c0 1.47-1.19 2.66-2.66 2.66-1.47 0-2.66-1.19-2.66-2.66v-4.43" fill="#fff" stroke="#000" stroke-width="2.178"/><path fill="#fff" stroke="#000" stroke-width="2.42" d="M79.29 16.18H26.51a.97.97 0 0 0-.97.97v37.96c0 .53.43.97.97.97h52.77c.53 0 .97-.43.97-.97V17.15c0-.54-.43-.97-.96-.97z"/><path fill="#000" fill-rule="nonzero" d="M61.6 35.42v-5.07h-1.8v3.28l-6.81-6.81-11.49 11.5h2.87v7.75h17.25v-7.75h2.87z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.961" d="M61.6 35.42v-5.07h-1.8v3.28l-6.81-6.81-11.49 11.5h2.87v7.75h17.25v-7.75h2.87z"/><path d="M25.34 53.77H9.52v-3.89h11.86v-3.89H9.52v-3.88h11.86v-3.89H9.52v-3.89h11.86v-3.88H9.52V18.47" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.159"/></g></svg>