@promakeai/inspector 0.0.3 → 0.0.4

package/README.md

@@ -179,7 +179,8 @@ interface SelectedElementData {
   id: string;
   component: ComponentInfo | null;
   position: ElementPosition;
-  isTextNode?: boolean; // Whether the element is a text-only node
+  isTextNode?: boolean; // Whether the element is a text node
+  textContent?: string; // Text content of the element (if text node)
 }
 ```
 
@@ -458,31 +459,17 @@ const { toggleInspector } = useInspector(iframeRef, {
 
 ## CI/CD
 
-This project includes GitHub Actions workflows:
+This project includes GitHub Actions workflow:
 
 ### Build Workflow (`.github/workflows/build.yml`)
 
 Automatically runs on every push and pull request:
 
-- ✅ Builds the package on Node.js 18.x and 20.x
-- ✅ Validates TypeScript compilation
+- ✅ Uses Bun for fast installation and build
+- ✅ Runs `bun install` and `bun run build`
 - ✅ Checks for build artifacts
 - ✅ Uploads build artifacts for review
 
-### Publish Workflow (`.github/workflows/publish.yml`)
-
-Automatically publishes to NPM when a release is created:
-
-- ✅ Builds the package
-- ✅ Publishes to NPM with `--access public`
-- ✅ Manual trigger support via workflow_dispatch
-
-**Setup for NPM publishing:**
-
-1. Create an NPM access token at [npmjs.com](https://www.npmjs.com/settings/YOUR_USERNAME/tokens)
-2. Add the token as `NPM_TOKEN` secret in your GitHub repository settings
-3. Create a release on GitHub to trigger automatic publishing
-
 ## License
 
 MIT

package/dist/hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../src/hook.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AAEH,OAAO,EAAoC,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EACV,kBAAkB,EAClB,eAAe,EACf,cAAc,EACd,kBAAkB,EAMnB,MAAM,SAAS,CAAC;AAoCjB,wBAAgB,YAAY,CAC1B,SAAS,EAAE,SAAS,CAAC,iBAAiB,CAAC,EACvC,SAAS,CAAC,EAAE,kBAAkB,EAC9B,MAAM,CAAC,EAAE,eAAe,EACxB,KAAK,CAAC,EAAE,cAAc,GACrB,kBAAkB,CAyIpB;AAGD,mBAAmB,SAAS,CAAC"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../src/hook.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AAEH,OAAO,EAAoC,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EACV,kBAAkB,EAClB,eAAe,EACf,cAAc,EACd,kBAAkB,EAMnB,MAAM,SAAS,CAAC;AAoCjB,wBAAgB,YAAY,CAC1B,SAAS,EAAE,SAAS,CAAC,iBAAiB,CAAC,EACvC,SAAS,CAAC,EAAE,kBAAkB,EAC9B,MAAM,CAAC,EAAE,eAAe,EACxB,KAAK,CAAC,EAAE,cAAc,GACrB,kBAAkB,CAsJpB;AAGD,mBAAmB,SAAS,CAAC"}

package/dist/hook.js

@@ -133,11 +133,24 @@ export function useInspector(iframeRef, callbacks, labels, theme) {
      */
     useEffect(() => {
         const handleMessage = (event) => {
+            // Parse message if it's a string (JSON stringified)
+            let messageData;
+            if (typeof event.data === "string") {
+                try {
+                    messageData = JSON.parse(event.data);
+                }
+                catch {
+                    return; // Invalid JSON, ignore
+                }
+            }
+            else {
+                messageData = event.data;
+            }
             // Security: Only handle expected message types
-            if (!event.data || typeof event.data.type !== "string") {
+            if (!messageData || typeof messageData.type !== "string") {
                 return;
             }
-            const { type, data } = event.data;
+            const { type, data } = messageData;
             switch (type) {
                 case "INSPECTOR_ELEMENT_SELECTED":
                     callbacks?.onElementSelected?.(data);

package/dist/plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAE9B,wBAAgB,eAAe,IAAI,MAAM,CA6pBxC"}
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAE9B,wBAAgB,eAAe,IAAI,MAAM,CAyrBxC"}

package/dist/plugin.js

@@ -208,13 +208,14 @@ export function inspectorPlugin() {
       const prompt = promptInput.value.trim();
       if (prompt) {
         if (window.parent !== window) {
-          window.parent.postMessage({
+          const message = JSON.stringify({
             type: 'INSPECTOR_PROMPT_SUBMITTED',
             data: {
               prompt: prompt,
               element: elementData
             }
-          }, '*');
+          });
+          window.parent.postMessage(message, '*');
         }
         console.log('Prompt submitted:', elementData);
         
@@ -299,14 +300,15 @@ export function inspectorPlugin() {
         e.stopPropagation();
         const newText = textInput.value;
         if (window.parent !== window) {
-          window.parent.postMessage({
+          const message = JSON.stringify({
             type: 'INSPECTOR_TEXT_UPDATED',
             data: {
               text: newText,
               originalText: currentText,
               element: selectedElementData
             }
-          }, '*');
+          });
+          window.parent.postMessage(message, '*');
         }
         console.log('Text updated:', newText);
         
@@ -499,6 +501,23 @@ export function inspectorPlugin() {
     highlightElement(hoveredElement);
   }
 
+  // Handle scroll - update highlight position
+  function handleScroll() {
+    if (!inspectMode) return;
+    
+    if (isPaused && selectedElement) {
+      // Update overlay for selected element
+      highlightElement(selectedElement);
+      // Update control box position
+      if (controlBox) {
+        adjustControlBoxPosition();
+      }
+    } else if (hoveredElement) {
+      // Update overlay for hovered element
+      highlightElement(hoveredElement);
+    }
+  }
+
   // Handle click
   function handleClick(e) {
     if (!inspectMode) return;
@@ -528,6 +547,7 @@ export function inspectorPlugin() {
     
     // Check if element is a text node
     const isTextNode = element.textContent && element.children.length === 0;
+    const textContent = isTextNode ? element.textContent.trim() : '';
     
     const elementData = {
       tagName: element.tagName,
@@ -540,22 +560,26 @@ export function inspectorPlugin() {
         width: element.getBoundingClientRect().width,
         height: element.getBoundingClientRect().height
       },
-      isTextNode: isTextNode
+      isTextNode: isTextNode,
+      textContent: textContent
     };
     
     // Send info to parent window
     if (window.parent !== window) {
-      window.parent.postMessage({
+      // Use JSON.stringify to ensure all properties are serialized correctly
+      const message = JSON.stringify({
         type: 'INSPECTOR_ELEMENT_SELECTED',
         data: elementData
-      }, '*');
+      });
+      window.parent.postMessage(message, '*');
     }
     
     // Log for debugging
     console.log('Element selected:', {
       element,
       componentInfo,
-      isTextNode
+      isTextNode,
+      textContent
     });
     
     // Pause inspection and show control box
@@ -571,6 +595,7 @@ export function inspectorPlugin() {
       document.body.style.cursor = 'crosshair';
       document.addEventListener('mousemove', handleMouseMove, true);
       document.addEventListener('click', handleClick, true);
+      document.addEventListener('scroll', handleScroll, true);
     } else {
       // Clean up everything
       clearHighlight();
@@ -578,6 +603,7 @@ export function inspectorPlugin() {
       document.body.style.cursor = '';
       document.removeEventListener('mousemove', handleMouseMove, true);
       document.removeEventListener('click', handleClick, true);
+      document.removeEventListener('scroll', handleScroll, true);
     }
   }
 
@@ -609,7 +635,7 @@ export function inspectorPlugin() {
       lastUrl = newUrl;
       
       if (window.parent !== window) {
-        window.parent.postMessage({
+        const message = JSON.stringify({
           type: 'URL_CHANGED',
           data: {
             url: newUrl,
@@ -617,7 +643,8 @@ export function inspectorPlugin() {
             search: location.search,
             hash: location.hash
           }
-        }, '*');
+        });
+        window.parent.postMessage(message, '*');
       }
     }
   }
@@ -650,10 +677,11 @@ export function inspectorPlugin() {
   
   function sendError(errorData) {
     if (window.parent !== window) {
-      window.parent.postMessage({
+      const message = JSON.stringify({
         type: 'INSPECTOR_ERROR',
         data: errorData
-      }, '*');
+      });
+      window.parent.postMessage(message, '*');
     }
     // Use original console.error to avoid infinite loop
     originalConsoleError.call(console, '🔍 Inspector Error:', errorData);

package/dist/types.d.ts

@@ -23,6 +23,7 @@ export interface SelectedElementData {
     component: ComponentInfo | null;
     position: ElementPosition;
     isTextNode?: boolean;
+    textContent?: string;
 }
 export interface UrlChangeData {
     url: string;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,MAAM,WAAW,aAAa;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;CACtB;AAGD,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAGD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,aAAa,GAAG,IAAI,CAAC;IAChC,QAAQ,EAAE,eAAe,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAGD,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAGD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,mBAAmB,CAAC;CAC9B;AAGD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,mBAAmB,CAAC;CAC9B;AAGD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC;IAC3C,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB;AAGD,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAID,MAAM,WAAW,cAAc;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAGD,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,OAAO,CAAC;CACf;AAGD,MAAM,WAAW,kBAAkB;IACjC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACxD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACrC;AAGD,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promakeai/inspector",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Visual element inspector for React apps in iframe with AI prompt support",
   "author": "Promake",
   "license": "MIT",
@@ -34,7 +34,7 @@
   "scripts": {
     "build": "tsc && tsc -p tsconfig.plugin.json",
     "prepublishOnly": "npm run build",
-    "publish": "npm run build && npm publish --access public"
+    "release": "npm run build && npm publish --access public"
   },
   "keywords": [
     "vite",