Replace ESP install component (#618)

* Remove the ESP install component code * Add esp-web-tools NPM package * Remove esp-web-tools NPM package * Add js script to Docusaurus * Refactor component code * Small refactor on global declare * Rename the file and component
klaasnicolaas · Oct 20, 2024 · d58ccab · d58ccab
1 parent 98c8188
commit d58ccab
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 35 deletions.
diff --git a/docs/docs/getting-started.mdx b/docs/docs/getting-started.mdx
@@ -6,7 +6,7 @@ description: 'Instruction to get started with the Home Assistant Glow'
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import EspInstallButton from '@site/src/components/EspInstallButton';
+import ESPHomeButton from '@site/src/components/ESPWebTools';
 import { faUsb } from '@fortawesome/free-brands-svg-icons';
 
 # Get started
@@ -63,7 +63,7 @@ If your device does not appear in the list, make sure you are using a USB data c
       - The Home Assistant Glow is now connected to your network.
 6. Congratulations 🎉 You have successfully installed the firmware on your Home Assistant Glow.
 
-<EspInstallButton unsupportedMessage="Provisioning via USB only works in browsers which support Web Serial, such as Chrome or Edge." />
+  <ESPHomeButton />
   </TabItem>
 </Tabs>
 

diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts
@@ -170,7 +170,7 @@ const config: Config = {
         indexPages: true,
       },
     ]
-  ]
+  ],
 };
 
 export default config;
diff --git a/docs/src/components/ESPWebTools.tsx b/docs/src/components/ESPWebTools.tsx
@@ -0,0 +1,38 @@
+import Head from "@docusaurus/Head";
+import React from "react";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+/**
+ * Extend JSX.IntrinsicElements to include the custom element
+ */
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "esp-web-install-button": React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      > & { manifest: string };
+    }
+  }
+}
+
+/**
+ * Load the ESP Web Tools script and handle potential errors during loading
+ */
+const loadEspWebToolsScript = () => (
+  <script
+    type="module"
+    src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module"
+    onError={(e) => console.error("Failed to load esp-web-tools script", e)}
+  />
+);
+
+export default function ESPHomeButton() {
+  const manifestUrl = useBaseUrl("/home-assistant-glow/manifest.json");
+  return (
+    <>
+      <Head>{loadEspWebToolsScript()}</Head>
+      <esp-web-install-button manifest={manifestUrl}></esp-web-install-button>
+    </>
+  );
+}
diff --git a/docs/src/components/EspInstallButton.tsx b/docs/src/components/EspInstallButton.tsx
-Original file line number
+Diff line change
@@ Expand Up / @@ -170,7 +170,7 @@ const config: Config = { @@
             indexPages: true,
           },
         ]
-      ]
+      ],
     };
     export default config;