tasmota-esp-web-tools 8.1.0

package/.devcontainer/Dockerfile

@@ -0,0 +1,16 @@
+# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.177.0/containers/typescript-node/.devcontainer/base.Dockerfile
+
+# [Choice] Node.js version: 16, 14, 12
+ARG VARIANT="16-buster"
+FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment if you want to install an additional version of node using nvm
+# ARG EXTRA_NODE_VERSION=10
+# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
+
+# [Optional] Uncomment if you want to install more global node packages
+# RUN su node -c "npm install -g <your-package-list -here>"

package/.devcontainer/devcontainer.json

@@ -0,0 +1,44 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.177.0/containers/typescript-node
+{
+  "name": "Node.js & TypeScript",
+  "build": {
+    "dockerfile": "Dockerfile",
+    // Update 'VARIANT' to pick a Node version: 12, 14, 16
+    "args": {
+      "VARIANT": "16"
+    }
+  },
+
+  // Add the IDs of extensions you want installed when the container is created.
+  "extensions": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "bierner.lit-html",
+    "runem.lit-plugin"
+  ],
+
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  "forwardPorts": [5000],
+
+  // Use 'postCreateCommand' to run commands after the container is created.
+  "postCreateCommand": "npm install",
+
+  // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+  "remoteUser": "node",
+
+  "settings": {
+    "files.eol": "\n",
+    "editor.tabSize": 2,
+    "editor.formatOnPaste": false,
+    "editor.formatOnSave": true,
+    "editor.formatOnType": true,
+    "[typescript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[javascript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "files.trimTrailingWhitespace": true
+  }
+}

package/.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: weekly
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"

package/.github/release-drafter.yml

@@ -0,0 +1,12 @@
+categories:
+  - title: "Breaking Changes"
+    labels:
+      - "breaking change"
+  - title: "Dependencies"
+    collapse-after: 1
+    labels:
+      - "dependencies"
+template: |
+  ## What's Changed
+
+  $CHANGES

package/.github/workflows/ci.yml

@@ -0,0 +1,22 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: CI
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm ci
+      - run: script/build
+      - run: npm exec -- prettier --check src

package/.github/workflows/npmpublish.yml

@@ -0,0 +1,22 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/.github/workflows/release-drafter.yml

@@ -0,0 +1,14 @@
+name: Release Drafter
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  update_release_draft:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: release-drafter/release-drafter@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/.prettierignore

@@ -0,0 +1 @@
+src/vendor

package/README.md

@@ -0,0 +1,68 @@
+# ESP Web Tools
+
+Allow flashing ESPHome or other ESP-based firmwares via the browser. Will automatically detect the board type and select a supported firmware. [See website for full documentation.](https://esphome.github.io/esp-web-tools/)
+
+```html
+<esp-web-install-button
+  manifest="firmware_esphome/manifest.json"
+></esp-web-install-button>
+```
+
+Example manifest:
+
+```json
+{
+  "name": "ESPHome",
+  "version": "2021.10.3",
+  "home_assistant_domain": "esphome",
+  "funding_url": "https://esphome.io/guides/supporters.html",
+  "builds": [
+    {
+      "chipFamily": "ESP32",
+      "parts": [
+        { "path": "bootloader_dout_40m.bin", "offset": 4096 },
+        { "path": "partitions.bin", "offset": 32768 },
+        { "path": "boot_app0.bin", "offset": 57344 },
+        { "path": "esp32.bin", "offset": 65536 }
+      ]
+    },
+    {
+      "chipFamily": "ESP32-C3",
+      "parts": [
+        { "path": "bootloader_dout_40m.bin", "offset": 0 },
+        { "path": "partitions.bin", "offset": 32768 },
+        { "path": "boot_app0.bin", "offset": 57344 },
+        { "path": "esp32-c3.bin", "offset": 65536 }
+      ]
+    },
+    {
+      "chipFamily": "ESP32-S2",
+      "parts": [
+        { "path": "bootloader_dout_40m.bin", "offset": 4096 },
+        { "path": "partitions.bin", "offset": 32768 },
+        { "path": "boot_app0.bin", "offset": 57344 },
+        { "path": "esp32-s2.bin", "offset": 65536 }
+      ]
+    },
+    {
+      "chipFamily": "ESP32-S3",
+      "parts": [
+        { "path": "bootloader_dout_40m.bin", "offset": 4096 },
+        { "path": "partitions.bin", "offset": 32768 },
+        { "path": "boot_app0.bin", "offset": 57344 },
+        { "path": "esp32-s3.bin", "offset": 65536 }
+      ]
+    },
+    {
+      "chipFamily": "ESP8266",
+      "parts": [
+        { "path": "esp8266.bin", "offset": 0 }
+      ]
+    }
+  ]
+}
+```
+
+## Development
+
+Run `script/develop`. This starts a server. Open it on http://localhost:5001.

package/dist/components/ewt-button.d.ts

@@ -0,0 +1,9 @@
+import { ButtonBase } from "@material/mwc-button/mwc-button-base";
+declare global {
+    interface HTMLElementTagNameMap {
+        "ewt-button": EwtButton;
+    }
+}
+export declare class EwtButton extends ButtonBase {
+    static styles: import("lit").CSSResult[];
+}

package/dist/components/ewt-button.js

@@ -0,0 +1,17 @@
+import { css } from "lit";
+import { ButtonBase } from "@material/mwc-button/mwc-button-base";
+import { styles } from "@material/mwc-button/styles.css";
+export class EwtButton extends ButtonBase {
+}
+EwtButton.styles = [
+    styles,
+    css `
+      .mdc-button {
+        min-width: initial;
+      }
+      :host([text-left]) .mdc-button__label {
+        text-align: left;
+      }
+    `,
+];
+customElements.define("ewt-button", EwtButton);

package/dist/components/ewt-checkbox.d.ts

@@ -0,0 +1,9 @@
+import { CheckboxBase } from "@material/mwc-checkbox/mwc-checkbox-base";
+declare global {
+    interface HTMLElementTagNameMap {
+        "ewt-checkbox": EwtCheckbox;
+    }
+}
+export declare class EwtCheckbox extends CheckboxBase {
+    static styles: import("lit").CSSResult[];
+}

package/dist/components/ewt-checkbox.js

@@ -0,0 +1,6 @@
+import { CheckboxBase } from "@material/mwc-checkbox/mwc-checkbox-base";
+import { styles } from "@material/mwc-checkbox/mwc-checkbox.css";
+export class EwtCheckbox extends CheckboxBase {
+}
+EwtCheckbox.styles = [styles];
+customElements.define("ewt-checkbox", EwtCheckbox);

package/dist/components/ewt-circular-progress.d.ts

@@ -0,0 +1,9 @@
+import { CircularProgressBase } from "@material/mwc-circular-progress/mwc-circular-progress-base";
+declare global {
+    interface HTMLElementTagNameMap {
+        "ewt-circular-progress": EwtCircularProgress;
+    }
+}
+export declare class EwtCircularProgress extends CircularProgressBase {
+    static styles: import("lit").CSSResult[];
+}

package/dist/components/ewt-circular-progress.js

@@ -0,0 +1,6 @@
+import { CircularProgressBase } from "@material/mwc-circular-progress/mwc-circular-progress-base";
+import { styles } from "@material/mwc-circular-progress/mwc-circular-progress.css";
+export class EwtCircularProgress extends CircularProgressBase {
+}
+EwtCircularProgress.styles = [styles];
+customElements.define("ewt-circular-progress", EwtCircularProgress);

package/dist/components/ewt-console.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="w3c-web-serial" />
+import { Logger } from "../const";
+export declare class EwtConsole extends HTMLElement {
+    port: SerialPort;
+    logger: Logger;
+    allowInput: boolean;
+    private _console?;
+    private _cancelConnection?;
+    logs(): string;
+    connectedCallback(): void;
+    private _connect;
+    private _sendCommand;
+    disconnect(): Promise<void>;
+    reset(): Promise<void>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ewt-console": EwtConsole;
+    }
+}

package/dist/components/ewt-console.js

@@ -0,0 +1,141 @@
+import { ColoredConsole, coloredConsoleStyles } from "../util/console-color";
+import { sleep } from "../util/sleep";
+import { LineBreakTransformer } from "../util/line-break-transformer";
+export class EwtConsole extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.allowInput = true;
+    }
+    logs() {
+        var _a;
+        return ((_a = this._console) === null || _a === void 0 ? void 0 : _a.logs()) || "";
+    }
+    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.allowInput
+            ? `<form>
+                >
+                <input autofocus>
+              </form>
+            `
+            : ""}
+    `;
+        this._console = new ColoredConsole(this.shadowRoot.querySelector("div"));
+        if (this.allowInput) {
+            const input = this.shadowRoot.querySelector("input");
+            this.addEventListener("click", () => {
+                var _a;
+                // Only focus input if user didn't select some text
+                if (((_a = getSelection()) === null || _a === void 0 ? void 0 : _a.toString()) === "") {
+                    input.focus();
+                }
+            });
+            input.addEventListener("keydown", (ev) => {
+                if (ev.key === "Enter") {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    this._sendCommand();
+                }
+            });
+        }
+        const abortController = new AbortController();
+        const connection = this._connect(abortController.signal);
+        this._cancelConnection = () => {
+            abortController.abort();
+            return connection;
+        };
+    }
+    async _connect(abortSignal) {
+        this.logger.debug("Starting console read loop");
+        try {
+            await this.port
+                .readable.pipeThrough(new TextDecoderStream(), {
+                signal: abortSignal,
+            })
+                .pipeThrough(new TransformStream(new LineBreakTransformer()))
+                .pipeTo(new WritableStream({
+                write: (chunk) => {
+                    this._console.addLine(chunk.replace("\r", ""));
+                },
+            }));
+            if (!abortSignal.aborted) {
+                this._console.addLine("");
+                this._console.addLine("");
+                this._console.addLine("Terminal disconnected");
+            }
+        }
+        catch (e) {
+            this._console.addLine("");
+            this._console.addLine("");
+            this._console.addLine(`Terminal disconnected: ${e}`);
+        }
+        finally {
+            await sleep(100);
+            this.logger.debug("Finished console read loop");
+        }
+    }
+    async _sendCommand() {
+        const input = this.shadowRoot.querySelector("input");
+        const command = input.value;
+        const encoder = new TextEncoder();
+        const writer = this.port.writable.getWriter();
+        await writer.write(encoder.encode(command + "\r\n"));
+        this._console.addLine(`> ${command}\r\n`);
+        input.value = "";
+        input.focus();
+        try {
+            writer.releaseLock();
+        }
+        catch (err) {
+            console.error("Ignoring release lock error", err);
+        }
+    }
+    async disconnect() {
+        if (this._cancelConnection) {
+            await this._cancelConnection();
+            this._cancelConnection = undefined;
+        }
+    }
+    async reset() {
+        this.logger.debug("Triggering reset.");
+        await this.port.setSignals({
+            dataTerminalReady: false,
+            requestToSend: true,
+        });
+        await this.port.setSignals({
+            dataTerminalReady: false,
+            requestToSend: false,
+        });
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+    }
+}
+customElements.define("ewt-console", EwtConsole);

package/dist/components/ewt-dialog.d.ts

@@ -0,0 +1,9 @@
+import { DialogBase } from "@material/mwc-dialog/mwc-dialog-base";
+declare global {
+    interface HTMLElementTagNameMap {
+        "ewt-dialog": EwtDialog;
+    }
+}
+export declare class EwtDialog extends DialogBase {
+    static styles: import("lit").CSSResult[];
+}

package/dist/components/ewt-dialog.js

@@ -0,0 +1,14 @@
+import { DialogBase } from "@material/mwc-dialog/mwc-dialog-base";
+import { styles } from "@material/mwc-dialog/mwc-dialog.css";
+import { css } from "lit";
+export class EwtDialog extends DialogBase {
+}
+EwtDialog.styles = [
+    styles,
+    css `
+      .mdc-dialog__title {
+        padding-right: 52px;
+      }
+    `,
+];
+customElements.define("ewt-dialog", EwtDialog);

package/dist/components/ewt-formfield.d.ts

@@ -0,0 +1,9 @@
+import { FormfieldBase } from "@material/mwc-formfield/mwc-formfield-base";
+declare global {
+    interface HTMLElementTagNameMap {
+        "ewt-formfield": EwtFormfield;
+    }
+}
+export declare class EwtFormfield extends FormfieldBase {
+    static styles: import("lit").CSSResult[];
+}

package/dist/components/ewt-formfield.js

@@ -0,0 +1,6 @@
+import { FormfieldBase } from "@material/mwc-formfield/mwc-formfield-base";
+import { styles } from "@material/mwc-formfield/mwc-formfield.css";
+export class EwtFormfield extends FormfieldBase {
+}
+EwtFormfield.styles = [styles];
+customElements.define("ewt-formfield", EwtFormfield);

package/dist/components/ewt-icon-button.d.ts

@@ -0,0 +1,9 @@
+import { IconButtonBase } from "@material/mwc-icon-button/mwc-icon-button-base";
+declare global {
+    interface HTMLElementTagNameMap {
+        "ewt-icon-button": EwtIconButton;
+    }
+}
+export declare class EwtIconButton extends IconButtonBase {
+    static styles: import("lit").CSSResult[];
+}

package/dist/components/ewt-icon-button.js

@@ -0,0 +1,6 @@
+import { IconButtonBase } from "@material/mwc-icon-button/mwc-icon-button-base";
+import { styles } from "@material/mwc-icon-button/mwc-icon-button.css";
+export class EwtIconButton extends IconButtonBase {
+}
+EwtIconButton.styles = [styles];
+customElements.define("ewt-icon-button", EwtIconButton);

package/dist/components/ewt-list-item.d.ts

@@ -0,0 +1,9 @@
+import { ListItemBase } from "@material/mwc-list/mwc-list-item-base";
+declare global {
+    interface HTMLElementTagNameMap {
+        "ewt-list-item": EwtListItem;
+    }
+}
+export declare class EwtListItem extends ListItemBase {
+    static styles: import("lit").CSSResult[];
+}

package/dist/components/ewt-list-item.js

@@ -0,0 +1,6 @@
+import { ListItemBase } from "@material/mwc-list/mwc-list-item-base";
+import { styles } from "@material/mwc-list/mwc-list-item.css";
+export class EwtListItem extends ListItemBase {
+}
+EwtListItem.styles = [styles];
+customElements.define("ewt-list-item", EwtListItem);

package/dist/components/ewt-select.d.ts

@@ -0,0 +1,9 @@
+import { SelectBase } from "@material/mwc-select/mwc-select-base";
+declare global {
+    interface HTMLElementTagNameMap {
+        "ewt-select": EwtSelect;
+    }
+}
+export declare class EwtSelect extends SelectBase {
+    static styles: import("lit").CSSResult[];
+}

package/dist/components/ewt-select.js

@@ -0,0 +1,15 @@
+import { SelectBase } from "@material/mwc-select/mwc-select-base";
+import { styles } from "@material/mwc-select/mwc-select.css";
+import { css } from "lit";
+export class EwtSelect extends SelectBase {
+}
+EwtSelect.styles = [
+    styles,
+    // rem -> em conversion
+    css `
+      .mdc-floating-label {
+        line-height: 1.15em;
+      }
+    `,
+];
+customElements.define("ewt-select", EwtSelect);

package/dist/components/ewt-textfield.d.ts

@@ -0,0 +1,9 @@
+import { TextFieldBase } from "@material/mwc-textfield/mwc-textfield-base";
+declare global {
+    interface HTMLElementTagNameMap {
+        "ewt-textfield": EwtTextfield;
+    }
+}
+export declare class EwtTextfield extends TextFieldBase {
+    static styles: import("lit").CSSResult[];
+}

package/dist/components/ewt-textfield.js

@@ -0,0 +1,15 @@
+import { TextFieldBase } from "@material/mwc-textfield/mwc-textfield-base";
+import { styles } from "@material/mwc-textfield/mwc-textfield.css";
+import { css } from "lit";
+export class EwtTextfield extends TextFieldBase {
+}
+EwtTextfield.styles = [
+    styles,
+    // rem -> em conversion
+    css `
+      .mdc-floating-label {
+        line-height: 1.15em;
+      }
+    `,
+];
+customElements.define("ewt-textfield", EwtTextfield);

package/dist/components/svg.d.ts

@@ -0,0 +1,3 @@
+export declare const closeIcon: import("lit-html").TemplateResult<2>;
+export declare const firmwareIcon: import("lit-html").TemplateResult<2>;
+export declare const chipIcon: import("lit-html").TemplateResult<2>;

package/dist/components/svg.js

@@ -0,0 +1,24 @@
+import { svg } from "lit";
+export const closeIcon = svg `
+  <svg width="24" height="24" viewBox="0 0 24 24">
+    <path
+      d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+    />
+  </svg>
+`;
+export const firmwareIcon = svg `
+  <svg viewBox="0 0 24 24" title="Software">
+    <path
+      fill="currentColor"
+      d="M9.5,8.5L11,10L8,13L11,16L9.5,17.5L5,13L9.5,8.5M14.5,17.5L13,16L16,13L13,10L14.5,8.5L19,13L14.5,17.5M21,2H3A2,2 0 0,0 1,4V20A2,2 0 0,0 3,22H21A2,2 0 0,0 23,20V4A2,2 0 0,0 21,2M21,20H3V6H21V20Z"
+    />
+  </svg>
+`;
+export const chipIcon = svg `
+  <svg viewBox="0 0 24 24" title="Chipset">
+    <path
+      fill="currentColor"
+      d="M6,4H18V5H21V7H18V9H21V11H18V13H21V15H18V17H21V19H18V20H6V19H3V17H6V15H3V13H6V11H3V9H6V7H3V5H6V4M11,15V18H12V15H11M13,15V18H14V15H13M15,15V18H16V15H15Z"
+    />
+  </svg>
+`;

package/dist/connect.d.ts

@@ -0,0 +1,3 @@
+import type { InstallButton } from "./install-button.js";
+import "./install-dialog.js";
+export declare const connect: (button: InstallButton) => Promise<void>;

package/dist/connect.js

@@ -0,0 +1,33 @@
+import "./install-dialog.js";
+export const connect = async (button) => {
+    let port;
+    try {
+        port = await navigator.serial.requestPort();
+    }
+    catch (err) {
+        if (err.name === "NotFoundError") {
+            import("./no-port-picked/index").then((mod) => mod.openNoPortPickedDialog(() => connect(button)));
+            return;
+        }
+        alert(`Error: ${err.message}`);
+        return;
+    }
+    if (!port) {
+        return;
+    }
+    try {
+        await port.open({ baudRate: 115200 });
+    }
+    catch (err) {
+        alert(err.message);
+        return;
+    }
+    const el = document.createElement("ewt-install-dialog");
+    el.port = port;
+    el.manifestPath = button.manifest || button.getAttribute("manifest");
+    el.overrides = button.overrides;
+    el.addEventListener("closed", () => {
+        port.close();
+    }, { once: true });
+    document.body.appendChild(el);
+};