Esp Web Tool

Web tool For Esp8266

.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>"

.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
+  }
+}

.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"

.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

.github/workflows/ci.yml

@@ -0,0 +1,24 @@
+# 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:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+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

.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}}

.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 }}

.prettierignore

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

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.

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[];
+}

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);

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[];
+}

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);

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[];
+}

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);

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;
+    }
+}