add AsyncUiWrapper

Author: Maschga

docs/integrations/mqtt-api.md renamed to docs/integrations/mqtt-api.mdx

@@ -2,11 +2,15 @@
 sidebar_position: 2
 ---
 
+import AsyncUiWrapper from "../../src/components/AsyncUiWrapper";
+
 # MQTT API
 
 Die MQTT API folgt der [REST API](./rest-api) Struktur.
 Alle API IDs (z.B. die Loadpoint ID) beginnen bei `1`.
 
+<AsyncUiWrapper/>
+
 - `evcc`: root topic
 - `evcc/status`: status (`online`/`offline`)
 - `evcc/updated`: timestamp of last update

src/components/AsyncUiWrapper.jsx

@@ -0,0 +1,34 @@
+import AsyncApiComponent from "@asyncapi/react-component";
+
+const configs = {};
+const customCss = "";
+
+export default () => {
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    if (containerRef.current?.attachShadow) {
+      try {
+        const shadowRoot = containerRef.current.attachShadow({ mode: "open" });
+        const style = document.createElement("style");
+        style.textContent = customCss;
+        shadowRoot.appendChild(style);
+
+        const div = document.createElement("div");
+        shadowRoot.appendChild(div);
+
+        const root = ReactDOM.createRoot(div);
+        root.render(
+          <AsyncApiComponent
+            schema={{ url: "/mqtt-api.yaml" }}
+            config={configs}
+          />,
+        );
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }, []);
+
+  return <div ref={containerRef}></div>;
+};