refactor: consolidate types, extract toolbar positioning, fix SolidJS… (#245)

Author: aidenybai

packages/cli/src/utils/transform.ts

@@ -545,7 +545,11 @@ const transformVite = (
   if (!force) {
     const indexPath = findIndexHtml(projectRoot);
     if (indexPath) {
-      const existingResult = checkExistingInstallation(indexPath, agent, reactGrabAlreadyConfigured);
+      const existingResult = checkExistingInstallation(
+        indexPath,
+        agent,
+        reactGrabAlreadyConfigured,
+      );
       if (existingResult) return existingResult;
     }
   }
@@ -559,7 +563,11 @@ const transformVite = (
   }
 
   if (!force) {
-    const existingResult = checkExistingInstallation(entryPath, agent, reactGrabAlreadyConfigured);
+    const existingResult = checkExistingInstallation(
+      entryPath,
+      agent,
+      reactGrabAlreadyConfigured,
+    );
     if (existingResult) return existingResult;
   }
 
@@ -594,7 +602,11 @@ const transformWebpack = (
   }
 
   if (!force) {
-    const existingResult = checkExistingInstallation(entryPath, agent, reactGrabAlreadyConfigured);
+    const existingResult = checkExistingInstallation(
+      entryPath,
+      agent,
+      reactGrabAlreadyConfigured,
+    );
     if (existingResult) return existingResult;
   }
 

packages/cli/test/transform.test.ts

@@ -480,9 +480,7 @@ import ReactDOM from "react-dom/client";`;
 
     mockExistsSync.mockImplementation((path) => {
       const pathStr = String(path);
-      return (
-        pathStr.endsWith("index.html") || pathStr.endsWith("main.tsx")
-      );
+      return pathStr.endsWith("index.html") || pathStr.endsWith("main.tsx");
     });
     mockReadFileSync.mockImplementation((path) => {
       if (String(path).endsWith("index.html")) return indexWithReactGrab;
@@ -512,22 +510,14 @@ import ReactDOM from "react-dom/client";`;
 
     mockExistsSync.mockImplementation((path) => {
       const pathStr = String(path);
-      return (
-        pathStr.endsWith("index.html") || pathStr.endsWith("main.tsx")
-      );
+      return pathStr.endsWith("index.html") || pathStr.endsWith("main.tsx");
     });
     mockReadFileSync.mockImplementation((path) => {
       if (String(path).endsWith("index.html")) return indexWithReactGrab;
       return `import React from "react";`;
     });
 
-    const result = previewTransform(
-      "/test",
-      "vite",
-      "unknown",
-      "cursor",
-      true,
-    );
+    const result = previewTransform("/test", "vite", "unknown", "cursor", true);
 
     expect(result.success).toBe(true);
     expect(result.newContent).toContain("@react-grab/cursor");

packages/react-grab/e2e/edge-cases.spec.ts

@@ -325,7 +325,7 @@ test.describe("Edge Cases", () => {
     test("should handle elements outside viewport", async ({ reactGrab }) => {
       await reactGrab.activate();
       await reactGrab.scrollPage(1000);
-      await reactGrab.page.waitForTimeout(200);
+      await reactGrab.page.waitForTimeout(500);
 
       await reactGrab.hoverElement("[data-testid='footer']");
       await reactGrab.waitForSelectionBox();

packages/react-grab/e2e/fixtures.ts

@@ -312,7 +312,7 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
   const hoverElement = async (selector: string) => {
     const element = page.locator(selector).first();
     await element.hover({ force: true });
-    await page.waitForTimeout(100);
+    await page.waitForTimeout(250);
   };
 
   const clickElement = async (selector: string) => {
@@ -362,7 +362,8 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
         const state = api?.getState();
         return state?.isSelectionBoxVisible || state?.targetElement !== null;
       },
-      { timeout: 2000 },
+      undefined,
+      { timeout: 10_000 },
     );
   };
 
@@ -378,6 +379,7 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
         ).__REACT_GRAB__;
         return api?.getState()?.selectionFilePath !== null;
       },
+      undefined,
       { timeout: 5000 },
     );
   };
@@ -608,7 +610,31 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
   const enterPromptMode = async (selector: string) => {
     await activate();
     await hoverElement(selector);
-    await waitForSelectionBox();
+    const isSelected = await page
+      .waitForFunction(
+        () => {
+          const api = (
+            window as {
+              __REACT_GRAB__?: {
+                getState: () => {
+                  isSelectionBoxVisible: boolean;
+                  targetElement: unknown;
+                };
+              };
+            }
+          ).__REACT_GRAB__;
+          const state = api?.getState();
+          return state?.isSelectionBoxVisible || state?.targetElement !== null;
+        },
+        undefined,
+        { timeout: 2000 },
+      )
+      .then(() => true)
+      .catch(() => false);
+    if (!isSelected) {
+      await hoverElement(selector);
+      await waitForSelectionBox();
+    }
     await rightClickElement(selector);
     await clickContextMenuItem("Edit");
     await waitForPromptMode(true);
@@ -1820,6 +1846,7 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
         const api = (window as { __REACT_GRAB__?: unknown }).__REACT_GRAB__;
         return api !== undefined;
       },
+      undefined,
       { timeout: 5000 },
     );
   };
@@ -2494,6 +2521,7 @@ export const test = base.extend<{ reactGrab: ReactGrabPageObject }>({
           const api = (window as { __REACT_GRAB__?: unknown }).__REACT_GRAB__;
           return api !== undefined;
         },
+        undefined,
         { timeout: PAGE_SETUP_API_TIMEOUT_MS },
       );
     };

packages/react-grab/src/components/context-menu.tsx

@@ -9,6 +9,7 @@ import {
 } from "solid-js";
 import type { Component } from "solid-js";
 import type {
+  Position,
   OverlayBounds,
   ContextMenuAction,
   ContextMenuActionContext,
@@ -30,7 +31,7 @@ import { createMenuHighlight } from "../utils/create-menu-highlight.js";
 import { suppressMenuEvent } from "../utils/suppress-menu-event.js";
 
 interface ContextMenuProps {
-  position: { x: number; y: number } | null;
+  position: Position | null;
   selectionBounds: OverlayBounds | null;
   tagName?: string;
   componentName?: string;