Use NPM package

esphome · Jun 4, 2021 · e20c21b · e20c21b
1 parent ae45ddc
commit e20c21b
Show file tree

Hide file tree

Showing 18 changed files with 71 additions and 1,153 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,11 @@
-# ESPHome Web: JavaScript SDK for ESPHome
+# 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.
 
 ```html
-<esphome-web-install-button
+<esp-web-install-button
   manifest="firmware_esphome/manifest.json"
-></esphome-web-install-button>
+></esp-web-install-button>
 ```
 
 Manifest definition:
@@ -37,10 +37,10 @@ Manifest definition:
 Allows for optionally passing an attribute to trigger an erase before installation.
 
 ```html
-<esphome-web-install-button
+<esp-web-install-button
   manifest="firmware_esphome/manifest.json"
   erase-first
-></esphome-web-install-button>
+></esp-web-install-button>
 ```
 
 All attributes can also be set via properties (`manifest`, `eraseFirst`)

diff --git a/example.html → index.html b/example.html → index.html
@@ -16,14 +16,22 @@
   </head>
   <body>
     <p>ESPHome Web is a set of tools to allow working with ESP devices in the browser.</p>
-    <p>To flash the XX firmware, connect an ESP to your computer and hit the button:</p>
-    <esphome-web-install-button
+    <p>To flash the ESPHome firmware, connect an ESP to your computer and hit the button:</p>
+    <esp-web-install-button
       manifest="firmware_build/manifest.json"
-    ></esphome-web-install-button>
+    ></esp-web-install-button>
     <p><i>Note, this only works in desktop Chrome and Edge. Android support has not been implemented yet.</i></div>
     <p>
       This works by combining Web Serial with a <a href="firmware_build/manifest.json">manifest</a> which describes the firmware. It will automatically detect the type of the connected ESP device and find the right firmware files in the manifest.
     </p>
+    <script module>
+      import(
+        // In development we import locally.
+        window.location.hostname === "localhost"
+          ? "/dist/web/install-button.js"
+          : "https://unpkg.com/[email protected]/dist/web/install-button.js?module"
+      );
+    </script>
     <script src="./dist/web/install-button.js" type="module"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,8 +1,8 @@
 {
-  "name": "esphome-web",
+  "name": "esp-web-tools",
   "version": "0.0.1",
-  "description": "Web tools for ESPHome",
-  "main": "dist/flash-button.js",
+  "description": "Web tools for ESP devices",
+  "main": "dist/install-button.js",
   "repository": "https://github.com/esphome/web",
   "author": "ESPHome maintainers",
   "license": "Apache-2.0",
@@ -26,6 +26,7 @@
     "@material/mwc-circular-progress": "^0.21.0",
     "@material/mwc-dialog": "^0.21.0",
     "@material/mwc-textfield": "^0.21.0",
+    "esp-web-flasher": "^1.0.0",
     "lit": "^2.0.0-rc.2",
     "tslib": "^2.2.0"
   }

diff --git a/src/const.ts b/src/const.ts
@@ -1,3 +1,17 @@
+import { connect } from "esp-web-flasher";
+
+type AsyncReturnType<T extends (...args: any) => any> = T extends (
+  ...args: any
+) => Promise<infer U>
+  ? U
+  : T extends (...args: any) => infer U
+  ? U
+  : any;
+
+// Waiting for esp-web-flash >1.0.0 release which will include this type
+export type ESPLoader = AsyncReturnType<typeof connect>;
+export type Logger = Parameters<typeof connect>[0];
+
 export interface Build {
   chipFamily: "ESP32" | "ESP8266";
   improv: boolean;

diff --git a/src/install-button.ts b/src/install-button.ts
@@ -49,4 +49,4 @@ class InstallButton extends HTMLElement {
   }
 }
 
-customElements.define("esphome-web-install-button", InstallButton);
+customElements.define("esp-web-install-button", InstallButton);
diff --git a/src/start-flash.ts b/src/start-flash.ts
@@ -1,10 +1,8 @@
 import { html } from "lit";
-import { connect } from "./vendor/esptool";
-import type { Logger } from "./vendor/esptool/const";
-import type { ESPLoader } from "./vendor/esptool/esp_loader";
-import { Build, Manifest } from "./const";
+import { connect } from "esp-web-flasher";
+import { Build, ESPLoader, Manifest, Logger } from "./const";
 import "./flash-log";
-import { getChipFamilyName } from "./util";
+import { getChipFamilyName, sleep } from "./util";
 
 export const startFlash = async (
   logger: Logger,
@@ -123,7 +121,10 @@ export const startFlash = async (
     }
   }
 
-  logEl.removeRow("preparing");
+  logEl.addRow({
+    id: "preparing",
+    content: `Ready to install`,
+  });
 
   if (eraseFirst) {
     logEl.addRow({
@@ -132,7 +133,12 @@ export const startFlash = async (
     });
   }
 
-  let lastPct = -1;
+  let lastPct = 0;
+
+  logEl.addRow({
+    id: "write",
+    content: html`Writing progress: ${lastPct}%`,
+  });
 
   for (const part of build.parts) {
     await espStub.flashData(
@@ -152,6 +158,7 @@ export const startFlash = async (
     );
   }
 
+  await sleep(100);
   await esploader.softReset();
 
   const doImprov =

diff --git a/src/util.ts b/src/util.ts
@@ -2,8 +2,8 @@ import {
   CHIP_FAMILY_ESP32,
   CHIP_FAMILY_ESP32S2,
   CHIP_FAMILY_ESP8266,
-} from "./vendor/esptool";
-import { ESPLoader } from "./vendor/esptool/esp_loader";
+} from "esp-web-flasher";
+import { ESPLoader } from "./const";
 
 export const getChipFamilyName = (esploader: ESPLoader) => {
   switch (esploader.chipFamily) {
@@ -17,3 +17,6 @@ export const getChipFamilyName = (esploader: ESPLoader) => {
       return "Unknown Chip";
   }
 };
+
+export const sleep = (time: number) =>
+  new Promise((resolve) => setTimeout(resolve, time));
diff --git a/src/vendor/esptool/LICENSE.md b/src/vendor/esptool/LICENSE.md
diff --git a/src/vendor/esptool/README.md b/src/vendor/esptool/README.md
diff --git a/src/vendor/esptool/const.ts b/src/vendor/esptool/const.ts
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,4 +49,4 @@ class InstallButton extends HTMLElement { @@
       }
     }
-    customElements.define("esphome-web-install-button", InstallButton);
+    customElements.define("esp-web-install-button", InstallButton);