devtools host btn anchoring

packages/devtools-host/package.json

@@ -20,6 +20,7 @@
     "tsx": "^4.7.0"
   },
   "dependencies": {
+    "@kaioken-core/hooks": "0.0.1-56",
     "kaioken": "workspace:^"
   }
 }

packages/devtools-host/src/App.tsx

@@ -1,6 +1,35 @@
+import { useMemo, useState } from "kaioken"
 import { __useDevtoolsStore } from "./store"
+//@ts-ignore
+import { useTween, useWindowSize } from "@kaioken-core/hooks"
+
+const size = 30
+const padding = 15
 
 export default function __DevtoolsApp() {
+  const [corner, setCorner] = useState<"br" | "bl" | "tl" | "tr">("br")
+  const { width, height } = useWindowSize()
+
+  const _width = Math.min(width, document.body.clientWidth) // handle scrollbars
+
+  const topLeftOffset = () => ({
+    x: padding,
+    y: padding,
+  })
+  const topRightOffset = () => ({ x: _width - size - padding, y: padding })
+  const bottomRightOffset = () => ({
+    x: _width - size - padding,
+    y: height - size - padding,
+  })
+  const bottomLeftOffset = () => ({ x: padding, y: height - size - padding })
+
+  const coords = useMemo(() => {
+    if (corner === "br") return bottomRightOffset()
+    if (corner === "bl") return bottomLeftOffset()
+    if (corner === "tl") return topLeftOffset()
+    else return topRightOffset()
+  }, [corner, width, height])
+
   const {
     value: { popupWindow },
     setPopupWindow,
@@ -21,20 +50,34 @@ export default function __DevtoolsApp() {
     }
   }
   return (
-    <button onclick={handleOpen}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="30"
-        height="30"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="crimson"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+    <>
+      <button onclick={() => setCorner("tl")}>anchor top left</button>
+      <button onclick={() => setCorner("tr")}>anchor top right</button>
+      <button onclick={() => setCorner("br")}>anchor bottom right</button>
+      <button onclick={() => setCorner("bl")}>anchor bottom left</button>
+      <div
+        style={{
+          position: "fixed",
+          top: coords.y + "px",
+          left: coords.x + "px",
+        }}
       >
-        <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" />
-      </svg>
-    </button>
+        <button onclick={handleOpen}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="crimson"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" />
+          </svg>
+        </button>
+      </div>
+    </>
   )
 }

packages/devtools-host/src/index.ts

@@ -4,10 +4,7 @@ import __DevtoolsApp from "./App"
 const __devtoolsRoot = Object.assign(document.createElement("div"), {
   id: "devtools-root",
 })
-__devtoolsRoot.setAttribute(
-  "style",
-  "position:fixed;bottom:0;right:0;z-index:999999;color:#fff;"
-)
+__devtoolsRoot.setAttribute("style", "display:contents;")
 document.body.appendChild(__devtoolsRoot)
 
 __devtoolsMount(__DevtoolsApp, {

packages/devtools-host/src/options.ts

@@ -30,7 +30,7 @@ export function writeFile(content: string) {
   fs.mkdirSync("dist")
   fs.writeFileSync(
     "dist/index.js",
-    `export default \`import * as devtoolsKaioken from 'kaioken';\n${content}\``,
+    `export default \`import * as devtoolsKaioken from 'kaioken';\n${content.replace(/[`\\$]/g, "\\$&")}\``,
     {
       encoding: "utf-8",
     }

sandbox/csr/src/components/Counter.tsx

@@ -8,21 +8,24 @@ export function Counter() {
 
   const data = useAsync(
     () =>
-      fetch("https://dummyjson.com/products/1").then((res) => {
+      fetch(`https://dummyjson.com/products/${count + 1}`).then((res) => {
         console.log("resolving req")
         return res.json()
       }),
-    []
+    [count]
   )
 
   console.log("Counter", data)
 
   return (
-    <Container className="flex gap-2 items-center">
-      <Button onclick={decrement}>-1</Button>
-      <span>count: {count}</span>
-      {count % 2 === 0 ? <a href="#">Test</a> : <a className="asd">Testw</a>}
-      <Button onclick={increment}>+1</Button>
-    </Container>
+    <div className="flex flex-col">
+      <Container>{data?.title}</Container>
+      <Container className="flex gap-2 items-center">
+        <Button onclick={decrement}>-1</Button>
+        <span>count: {count}</span>
+        {count % 2 === 0 ? <a href="#">Test</a> : <a className="asd">Testw</a>}
+        <Button onclick={increment}>+1</Button>
+      </Container>
+    </div>
   )
 }