Handling warnings in Node.js 20

.github/workflows/ci.yml

@@ -12,6 +12,9 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 
+env:
+  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: 'true'
+
 jobs:
   discover:
     name: Discover ESPHome YAML files
@@ -20,7 +23,7 @@ jobs:
       matrix: ${{ steps.files.outputs.matrix }}
     steps:
       - name: Checkout source code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Discover root-level YAML files
         id: files
@@ -52,7 +55,7 @@ jobs:
           - dev
     steps:
       - name: Checkout source code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: ESPHome ${{ matrix.esphome-version }}
         uses: esphome/build-action@v7

.github/workflows/publish-firmware.yml

@@ -18,6 +18,9 @@ on:
 permissions:
   contents: write
 
+env:
+  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: 'true'
+
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.inputs.esphome_version || 'latest-stable' }}
   cancel-in-progress: false
@@ -36,7 +39,7 @@ jobs:
       files: ${{ steps.files.outputs.files }}
     steps:
       - name: Checkout source code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Resolve ESPHome release
         id: release
@@ -121,7 +124,7 @@ jobs:
         file: ${{ fromJson(needs.prepare.outputs.matrix) }}
     steps:
       - name: Checkout source code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: ESPHome ${{ needs.prepare.outputs.esphome-version }}
         id: build
@@ -224,7 +227,7 @@ jobs:
           test -f "firmware/${name}/manifest.json"
 
       - name: Upload firmware artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           name: firmware-${{ matrix.file }}
           path: firmware/
@@ -240,7 +243,7 @@ jobs:
     if: needs.prepare.outputs.should-build == 'true'
     steps:
       - name: Download firmware artifacts
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v8
         with:
           path: downloaded-artifacts
           pattern: firmware-*
@@ -263,6 +266,19 @@ jobs:
             cp -R downloaded-artifacts/. firmware/
           fi
 
+          jq -n --arg version "${ESPHOME_VERSION}" \
+                --argjson devices "${FILES_JSON}" \
+                '{
+                  version: $version,
+                  generated_at: (now | todateiso8601),
+                  devices: ($devices | map({
+                    id: .,
+                    name: (. | split("-") | map(ascii_upcase[0:1] + .[1:]) | join(" ")),
+                    yaml: (. + ".yaml"),
+                    manifest: ("firmware/" + . + ".manifest.json")
+                  }))
+                }' > release-assets/devices.json
+
           jq -n --arg name "Athom ESP32 Device" \
                 --arg version "${ESPHOME_VERSION}" \
                 --arg homeAssistantDomain "esphome" \

.github/workflows/publish-pages.yml

@@ -22,13 +22,16 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
+env:
+  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: 'true'
+
 jobs:
   build:
     name: Build
     runs-on: ubuntu-latest
     steps:
       - name: Checkout source code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - run: mkdir -p output/firmware
 
@@ -46,7 +49,7 @@ jobs:
           out-file-path: output/firmware
 
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
+        uses: actions/upload-pages-artifact@v5
         with:
           path: output
           retention-days: 1
@@ -65,8 +68,8 @@ jobs:
       url: ${{ steps.deployment.outputs.page_url }}
     steps:
       - name: Setup Pages
-        uses: actions/configure-pages@v5
+        uses: actions/configure-pages@v6
 
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v5

static/index.md

@@ -4,8 +4,319 @@ ESPhome project by Shenzhen Athom Technology Co., Ltd., China.
 
 # Installation
 
-You can use the button below to install the pre-built firmware directly to your device via USB from the browser.
+Choose your device, then connect it over USB to install the matching pre-built firmware.
 
-<esp-web-install-button manifest="firmware/Athom-ESP32-Device.manifest.json"></esp-web-install-button>
+<section class="installer-panel" aria-label="Firmware installer">
+  <div class="device-toolbar">
+    <label class="device-field" for="device-select">
+      <span>Device</span>
+      <select id="device-select"></select>
+    </label>
+    <label class="device-field" for="device-search">
+      <span>Search</span>
+      <input id="device-search" type="search" placeholder="Filter devices" autocomplete="off">
+    </label>
+  </div>
 
-<script type="module" src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module"></script>
+  <div id="device-grid" class="device-grid" aria-label="Available devices"></div>
+
+  <div class="install-row">
+    <div>
+      <h3 id="selected-device-title">Select a device</h3>
+      <p id="selected-device-file">The installer will use the firmware manifest for the selected device.</p>
+    </div>
+    <esp-web-install-button id="install-button" manifest="firmware/Athom-ESP32-Device.manifest.json"></esp-web-install-button>
+  </div>
+
+  <p id="device-status" class="device-status" role="status"></p>
+</section>
+
+<style>
+  .installer-panel {
+    margin-top: 1.5rem;
+  }
+
+  .device-toolbar {
+    display: grid;
+    grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.8fr);
+    gap: 14px;
+    margin-bottom: 18px;
+  }
+
+  .device-field {
+    display: grid;
+    gap: 6px;
+    color: #333;
+    font-weight: 700;
+  }
+
+  .device-field select,
+  .device-field input {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 42px;
+    border: 1px solid #c6cbd1;
+    border-radius: 6px;
+    padding: 8px 10px;
+    background: #fff;
+    color: #222;
+    font: inherit;
+  }
+
+  .device-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+    gap: 10px;
+    margin-bottom: 20px;
+  }
+
+  .device-option {
+    min-height: 54px;
+    border: 1px solid #d3d7dc;
+    border-radius: 6px;
+    padding: 10px 12px;
+    background: #fff;
+    color: #24292f;
+    text-align: left;
+    cursor: pointer;
+    font: inherit;
+  }
+
+  .device-option:hover,
+  .device-option:focus {
+    border-color: #1e9fea;
+    outline: none;
+  }
+
+  .device-option[aria-pressed="true"] {
+    border-color: #1e9fea;
+    box-shadow: inset 4px 0 0 #1e9fea;
+  }
+
+  .device-empty {
+    grid-column: 1 / -1;
+    margin: 0;
+    color: #65717c;
+  }
+
+  .device-name {
+    display: block;
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  .device-yaml {
+    display: block;
+    margin-top: 4px;
+    color: #65717c;
+    font-size: 0.82rem;
+    line-height: 1.2;
+    overflow-wrap: anywhere;
+  }
+
+  .install-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+    border-top: 1px solid #d8dde3;
+    padding-top: 18px;
+  }
+
+  .install-row h3 {
+    margin: 0 0 4px;
+    color: #24292f;
+  }
+
+  .install-row p,
+  .device-status {
+    margin: 0;
+    color: #4d5660;
+  }
+
+  .device-status {
+    margin-top: 12px;
+    min-height: 1.4em;
+  }
+
+  @media (max-width: 700px) {
+    .device-toolbar {
+      grid-template-columns: 1fr;
+    }
+
+    .install-row {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+  }
+</style>
+
+<script type="module" src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module"></script>
+<script>
+  const fallbackDevices = [
+    "athom-1gang-switch",
+    "athom-2ch-relay-board",
+    "athom-2gang-switch",
+    "athom-3gang-switch",
+    "athom-4ch-relay-board",
+    "athom-4gang-switch",
+    "athom-8ch-relay-board",
+    "athom-energy-monitor-x2",
+    "athom-energy-monitor-x6",
+    "athom-garage-door",
+    "athom-ld2450-sensor",
+    "athom-mini-relay-v2",
+    "athom-presence-sensor-v3",
+    "athom-rf-ir-remote",
+    "athom-rgbcw-bulb",
+    "athom-rgbcw-light",
+    "athom-scd40-sensor",
+    "athom-sht40-sensor",
+    "athom-smart-plug",
+    "athom-smart-plug-v5",
+    "athom-wall-outlet-v3",
+    "athom-zigbee-gateway"
+  ].map((id) => ({
+    id,
+    name: formatDeviceName(id),
+    yaml: `${id}.yaml`,
+    manifest: `firmware/${id}.manifest.json`
+  }));
+
+  const state = {
+    devices: [],
+    selectedId: "",
+    filter: ""
+  };
+
+  const select = document.querySelector("#device-select");
+  const search = document.querySelector("#device-search");
+  const grid = document.querySelector("#device-grid");
+  const installButton = document.querySelector("#install-button");
+  const title = document.querySelector("#selected-device-title");
+  const file = document.querySelector("#selected-device-file");
+  const status = document.querySelector("#device-status");
+
+  function formatDeviceName(id) {
+    return id
+      .split("-")
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+      .join(" ");
+  }
+
+  function normalizeDevice(device) {
+    return {
+      id: device.id,
+      name: device.name || formatDeviceName(device.id),
+      yaml: device.yaml || `${device.id}.yaml`,
+      manifest: device.manifest || `firmware/${device.id}.manifest.json`
+    };
+  }
+
+  async function loadDevices() {
+    try {
+      const response = await fetch("firmware/devices.json", { cache: "no-store" });
+      if (!response.ok) {
+        throw new Error(`devices.json returned ${response.status}`);
+      }
+      const data = await response.json();
+      state.devices = data.devices.map(normalizeDevice);
+      status.textContent = `Firmware index loaded for ESPHome ${data.version}.`;
+    } catch (error) {
+      state.devices = fallbackDevices;
+      status.textContent = "Firmware index is not available yet; using the built-in device list.";
+    }
+
+    state.selectedId = state.devices[0]?.id || "";
+    render();
+  }
+
+  function getSelectedDevice() {
+    return state.devices.find((device) => device.id === state.selectedId) || state.devices[0];
+  }
+
+  function getVisibleDevices() {
+    const query = state.filter.trim().toLowerCase();
+    if (!query) {
+      return state.devices;
+    }
+
+    return state.devices.filter((device) =>
+      `${device.name} ${device.id} ${device.yaml}`.toLowerCase().includes(query)
+    );
+  }
+
+  function selectDevice(id) {
+    state.selectedId = id;
+    render();
+  }
+
+  function renderSelect() {
+    select.replaceChildren();
+    for (const device of state.devices) {
+      const option = document.createElement("option");
+      option.value = device.id;
+      option.textContent = device.name;
+      option.selected = device.id === state.selectedId;
+      select.append(option);
+    }
+  }
+
+  function renderGrid() {
+    grid.replaceChildren();
+    const visibleDevices = getVisibleDevices();
+
+    if (visibleDevices.length === 0) {
+      const empty = document.createElement("p");
+      empty.className = "device-empty";
+      empty.textContent = "No matching devices.";
+      grid.append(empty);
+      return;
+    }
+
+    for (const device of visibleDevices) {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "device-option";
+      button.setAttribute("aria-pressed", String(device.id === state.selectedId));
+      button.dataset.deviceId = device.id;
+      button.innerHTML = `
+        <span class="device-name"></span>
+        <span class="device-yaml"></span>
+      `;
+      button.querySelector(".device-name").textContent = device.name;
+      button.querySelector(".device-yaml").textContent = device.yaml;
+      button.addEventListener("click", () => selectDevice(device.id));
+      grid.append(button);
+    }
+  }
+
+  function renderInstaller() {
+    const device = getSelectedDevice();
+    if (!device) {
+      title.textContent = "No devices found";
+      file.textContent = "";
+      installButton.setAttribute("manifest", "firmware/Athom-ESP32-Device.manifest.json");
+      return;
+    }
+
+    title.textContent = device.name;
+    file.textContent = `${device.yaml} -> ${device.manifest}`;
+    installButton.setAttribute("manifest", device.manifest);
+  }
+
+  function render() {
+    renderSelect();
+    select.value = state.selectedId;
+    renderGrid();
+    renderInstaller();
+  }
+
+  select.addEventListener("change", (event) => selectDevice(event.target.value));
+  search.addEventListener("input", (event) => {
+    state.filter = event.target.value;
+    renderGrid();
+  });
+
+  loadDevices();
+</script>