Convert to NPM package

NabuCasa · May 24, 2021 · 869acb7 · 869acb7
1 parent d9704c8
commit 869acb7
Show file tree

Hide file tree

Showing 28 changed files with 2,714 additions and 1,102 deletions.
diff --git a/.env b/.env
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -0,0 +1,12 @@
+# Basic dependabot.yml file with
+# minimum configuration for two package managers
+
+version: 2
+updates:
+  # Enable version updates for npm
+  - package-ecosystem: "npm"
+    # Look for `package.json` and `lock` files in the `root` directory
+    directory: "/"
+    # Check the npm registry for updates every day (weekdays)
+    schedule:
+      interval: "weekly"
diff --git a/.github/release-drafter.yml b/.github/release-drafter.yml
@@ -0,0 +1,4 @@
+template: |
+  ## What's Changed
+
+  $CHANGES
diff --git a/.github/workflows/ci.yml b/.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@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16
+      - run: yarn install --frozen-lockfile
+      - run: script/build
+      - run: yarn prettier --check src
diff --git a/.github/workflows/npmpublish.yml b/.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@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+          registry-url: https://registry.npmjs.org/
+      - run: yarn install --frozen-lockfile
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
diff --git a/.github/workflows/release-drafter.yml b/.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 }}
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
 *.DS_Store
+dist
+node_modules
diff --git a/README.md b/README.md
@@ -3,3 +3,11 @@
 A Web Serial tool for updating your ESP bootloader.
 
 A live copy of the tool is hosted here: https://adafruit.github.io/Adafruit_WebSerial_ESPTool/
+
+Also available on NPM as `adafruit-webserial-esptool`.
+
+## Local development
+
+- Clone this repository.
+- Install dependencies with `yarn`
+- Run `script/develop`
diff --git a/index.html b/index.html
@@ -2,29 +2,52 @@
 <html lang="en">
   <head>
     <title>Adafruit ESPTool</title>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script>
       // Redirect to HTTPS if HTTP is requested.
-      if (window.location.protocol === 'http:') {
-        window.location.href = 'https:' + window.location.href.substring(5);
+      if (
+        window.location.hostname !== "localhost" &&
+        window.location.protocol === "http:"
+      ) {
+        window.location.href = "https:" + window.location.href.substring(5);
       }
     </script>
 
     <!-- import the web page's stylesheets along with the themes -->
-    <link rel="stylesheet" href="https://use.typekit.net/qtk5kiq.css">
-    <link rel="stylesheet" href="css/style.css">
-    <link rel="stylesheet" href="css/light.css" id="light" class="alternate" disabled>
-    <link rel="stylesheet" href="css/dark.css"  id="dark"  class="alternate" disabled>
+    <link rel="stylesheet" href="https://use.typekit.net/qtk5kiq.css" />
+    <link rel="stylesheet" href="css/style.css" />
+    <link
+      rel="stylesheet"
+      href="css/light.css"
+      id="light"
+      class="alternate"
+      disabled
+    />
+    <link
+      rel="stylesheet"
+      href="css/dark.css"
+      id="dark"
+      class="alternate"
+      disabled
+    />
 
     <!-- import the webpage's javascript file -->
-    <script src="js/script.js" defer></script>
+    <script module>
+      window.esptoolPackage = import(
+        // In development we import locally.
+        window.location.hostname === "localhost"
+          ? "/dist/web/index.js"
+          : "https://unpkg.com/[email protected]/dist/web/index.js?module"
+      );
+    </script>
+    <script src="js/script.js" module defer></script>
   </head>
   <body>
     <header class="header">
       <div class="left">
-        <img src="assets/adafruit-logo.svg" class="Adafruit-Logo">
+        <img src="assets/adafruit-logo.svg" class="Adafruit-Logo" />
       </div>
       <div class="right">
         <select id="baudRate"></select>
@@ -33,21 +56,22 @@
     </header>
     <main class="main">
       <div id="notSupported" class="notSupported">
-        Sorry, <b>Web Serial</b> is not supported on this device, make sure you're
-        running Chrome 78 or later and have enabled the
+        Sorry, <b>Web Serial</b> is not supported on this device, make sure
+        you're running Chrome 78 or later and have enabled the
         <code>#enable-experimental-web-platform-features</code> flag in
         <code>chrome://flags</code>
       </div>
       <div class="subheader">
-        <div class="title left">
-          Adafruit ESPTool
-        </div>
+        <div class="title left">Adafruit ESPTool</div>
         <div class="right">
-          <label for="darkmode">
-            Dark Mode
-          </label>
+          <label for="darkmode"> Dark Mode </label>
           <div class="onoffswitch">
-            <input type="checkbox" name="darkmode" class="onoffswitch-checkbox" id="darkmode">
+            <input
+              type="checkbox"
+              name="darkmode"
+              class="onoffswitch-checkbox"
+              id="darkmode"
+            />
             <label class="onoffswitch-label" for="darkmode">
               <span class="onoffswitch-inner"></span>
               <span class="onoffswitch-switch"></span>
@@ -58,56 +82,96 @@
       <div id="app">
         <div id="commands">
           <div class="upload">
-            <label>Offset: 0x
+            <label
+              >Offset: 0x
               <input class="offset" type="text" value="0" />
             </label>
             <label class="firmware">
               <input type="file" accept=".bin" />
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewbox="0 0 20 17">
-                <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" />
-              </svg> <span>Choose a file&hellip;</span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="17"
+                viewbox="0 0 20 17"
+              >
+                <path
+                  d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"
+                />
+              </svg>
+              <span>Choose a file&hellip;</span>
             </label>
             <div class="progress-bar hidden"><div></div></div>
           </div>
           <div class="upload">
-            <label>Offset: 0x
+            <label
+              >Offset: 0x
               <input class="offset" type="text" value="0" />
             </label>
             <label class="firmware">
               <input type="file" accept=".bin" />
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewbox="0 0 20 17">
-                <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" />
-              </svg> <span>Choose a file&hellip;</span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="17"
+                viewbox="0 0 20 17"
+              >
+                <path
+                  d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"
+                />
+              </svg>
+              <span>Choose a file&hellip;</span>
             </label>
             <div class="progress-bar hidden"><div></div></div>
           </div>
           <div class="upload">
-            <label>Offset: 0x
+            <label
+              >Offset: 0x
               <input class="offset" type="text" value="0" />
             </label>
             <label class="firmware">
               <input type="file" accept=".bin" />
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewbox="0 0 20 17">
-                <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" />
-              </svg> <span>Choose a file&hellip;</span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="17"
+                viewbox="0 0 20 17"
+              >
+                <path
+                  d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"
+                />
+              </svg>
+              <span>Choose a file&hellip;</span>
             </label>
             <div class="progress-bar hidden"><div></div></div>
           </div>
           <div class="upload">
-            <label>Offset: 0x
+            <label
+              >Offset: 0x
               <input class="offset" type="text" value="0" />
             </label>
             <label class="firmware">
               <input type="file" accept=".bin" />
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewbox="0 0 20 17">
-                <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" />
-              </svg> <span>Choose a file&hellip;</span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="17"
+                viewbox="0 0 20 17"
+              >
+                <path
+                  d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"
+                />
+              </svg>
+              <span>Choose a file&hellip;</span>
             </label>
             <div class="progress-bar hidden"><div></div></div>
           </div>
           <div class="buttons">
-            <button id="butErase" type="button" disabled="disabled">Erase</button>
-            <button id="butProgram" type="button" disabled="disabled">Program</button>
+            <button id="butErase" type="button" disabled="disabled">
+              Erase
+            </button>
+            <button id="butProgram" type="button" disabled="disabled">
+              Program
+            </button>
           </div>
         </div>
         <div id="log"></div>
@@ -117,7 +181,12 @@
       <div class="left">
         <label for="autoscroll">Autoscroll</label>
         <div class="onoffswitch">
-          <input type="checkbox" name="autoscroll" class="onoffswitch-checkbox" id="autoscroll">
+          <input
+            type="checkbox"
+            name="autoscroll"
+            class="onoffswitch-checkbox"
+            id="autoscroll"
+          />
           <label class="onoffswitch-label" for="autoscroll">
             <span class="onoffswitch-inner"></span>
             <span class="onoffswitch-switch"></span>