update main site

Author: MrWangJustToDo

ui/react-example/src/App.tsx

@@ -2,6 +2,7 @@ import { AppShell, Group, Title, Button, Flex, Burger, Space, useMantineColorSch
 import { useDisclosure } from "@mantine/hooks";
 import { IconMoon, IconSun } from "@tabler/icons-react";
 
+import { DevTool } from "./components/DevTool";
 import { ExampleContent } from "./components/ExampleContent";
 import { Github } from "./components/icons";
 import { MainContent } from "./components/MainContent";
@@ -119,6 +120,7 @@ function App() {
           <>
             <MainContent />
             <StartContent />
+            <DevTool />
           </>
         )}
         {type === "example" && (

ui/react-example/src/components/DevTool.tsx

@@ -0,0 +1,50 @@
+import { Button } from "@mantine/core";
+import { useState } from "react";
+
+const src = "https://mrwangjusttodo.github.io/myreact-devtools";
+
+function loadScript(url: string) {
+  const script = document.createElement("script");
+  return new Promise((resolve, reject) => {
+    script.src = url;
+    script.onload = resolve;
+    script.onerror = reject;
+    document.head.appendChild(script);
+  }).finally(() => script.remove());
+}
+
+const getFunc = () => (window as any).__MY_REACT_DEVTOOL_IFRAME__;
+
+async function init() {
+  if (typeof getFunc() === "function") {
+    getFunc()(src);
+  } else {
+    await loadScript(`${src}/bundle/iframe.js`);
+    await init();
+  }
+}
+
+export const DevTool = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Button
+      className="fixed bottom-16 left-4 z-50"
+      color="red"
+      size="md"
+      onClick={async () => {
+        if (!open) {
+          await init();
+
+          setOpen(true);
+        } else {
+          getFunc()?.["close"]?.();
+
+          setOpen(false);
+        }
+      }}
+    >
+      {!open ? "Open" : "Close"} DevTool
+    </Button>
+  );
+};