@promakeai/inspector-hook 1.0.0 → 1.0.2

package/dist/utils/jsxUpdater.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jsxUpdater.d.ts","sourceRoot":"","sources":["../../src/utils/jsxUpdater.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAuKD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,sBAAsB,GAAG,qBAAqB,CA+DtF"}
+{"version":3,"file":"jsxUpdater.d.ts","sourceRoot":"","sources":["../../src/utils/jsxUpdater.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAgBH,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAuKD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,sBAAsB,GAAG,qBAAqB,CA+DtF"}

package/dist/utils/jsxUpdater.js

@@ -3,9 +3,14 @@
  * AST-based utility for updating styles and classNames in JSX/TSX source code
  */
 import * as parser from '@babel/parser';
-import traverse from '@babel/traverse';
-import generate from '@babel/generator';
+import * as traverseModule from '@babel/traverse';
+import * as generateModule from '@babel/generator';
 import * as t from '@babel/types';
+// Browser compatibility: Handle both CommonJS and ESM default exports
+// @ts-ignore - Babel modules have complex type definitions
+const traverse = traverseModule.default || traverseModule;
+// @ts-ignore - Babel modules have complex type definitions
+const generate = generateModule.default || generateModule;
 /**
  * Create AST ObjectExpression from styles object
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promakeai/inspector-hook",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "React hook for controlling inspector in parent applications",
   "author": "Promake",
   "type": "module",
@@ -15,8 +15,7 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "scripts": {
     "build": "tsc --build",
@@ -45,7 +44,7 @@
     }
   },
   "devDependencies": {
-    "@promakeai/inspector-types": "workspace:*",
+    "@promakeai/inspector-types": "^1.0.1",
     "@types/babel__traverse": "^7.20.0",
     "@types/babel__generator": "^7.6.0",
     "vitest": "^1.0.0"
@@ -56,11 +55,6 @@
     "@babel/generator": "^7.23.0",
     "@babel/types": "^7.23.0"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/promakeai/inspector.git",
-    "directory": "packages/hook"
-  },
   "publishConfig": {
     "access": "public"
   }

package/src/index.ts

@@ -1,384 +0,0 @@
-import { useEffect, useState, useCallback, RefObject } from "react";
-import type {
-  InspectorCallbacks,
-  InspectorLabels,
-  InspectorTheme,
-  UseInspectorReturn,
-  SelectedElementData,
-  UrlChangeData,
-  PromptSubmittedData,
-  TextUpdatedData,
-  ImageUpdatedData,
-  StyleUpdatedData,
-  ErrorData,
-  HighlightOptions,
-  ElementInfoData,
-} from "@promakeai/inspector-types";
-
-type IframeMessage =
-  | {
-      type: "TOGGLE_INSPECTOR";
-      active: boolean;
-      labels?: InspectorLabels;
-      theme?: InspectorTheme;
-    }
-  | {
-      type: "SHOW_CONTENT_INPUT";
-      show: boolean;
-      updateImmediately?: boolean;
-    }
-  | {
-      type: "SHOW_IMAGE_INPUT";
-      show: boolean;
-      updateImmediately?: boolean;
-    }
-  | {
-      type: "SHOW_STYLE_EDITOR";
-      show: boolean;
-    }
-  | {
-      type: "SET_BADGE_VISIBLE";
-      visible: boolean;
-      badgeText?: string;
-    }
-  | {
-      type: "HIGHLIGHT_ELEMENT";
-      identifier: string | SelectedElementData;
-      options?: HighlightOptions;
-    }
-  | {
-      type: "GET_ELEMENT_BY_ID";
-      inspectorId: string;
-    }
-  | {
-      type: "SET_SHOW_CHILD_BORDERS";
-      show: boolean;
-    };
-
-type InspectorMessage =
-  | {
-      type: "INSPECTOR_ELEMENT_SELECTED";
-      data: SelectedElementData;
-    }
-  | {
-      type: "URL_CHANGED";
-      data: UrlChangeData;
-    }
-  | {
-      type: "INSPECTOR_PROMPT_SUBMITTED";
-      data: PromptSubmittedData;
-    }
-  | {
-      type: "INSPECTOR_TEXT_UPDATED";
-      data: TextUpdatedData;
-    }
-  | {
-      type: "INSPECTOR_IMAGE_UPDATED";
-      data: ImageUpdatedData;
-    }
-  | {
-      type: "INSPECTOR_STYLE_UPDATED";
-      data: StyleUpdatedData;
-    }
-  | {
-      type: "INSPECTOR_CLOSED";
-    }
-  | {
-      type: "INSPECTOR_ERROR";
-      data: ErrorData;
-    }
-  | {
-      type: "ELEMENT_INFO_RESPONSE";
-      data: ElementInfoData;
-    };
-
-export function useInspector(
-  iframeRef: RefObject<HTMLIFrameElement>,
-  callbacks?: InspectorCallbacks,
-  labels?: InspectorLabels,
-  theme?: InspectorTheme
-): UseInspectorReturn {
-  const [isInspecting, setIsInspecting] = useState(false);
-
-  /**
-   * Send message to iframe
-   */
-  const sendMessage = useCallback(
-    (message: IframeMessage) => {
-      const iframe = iframeRef.current;
-      if (!iframe || !iframe.contentWindow) {
-        console.warn("Inspector: iframe not found or not loaded");
-        return;
-      }
-
-      try {
-        iframe.contentWindow.postMessage(message, "*");
-      } catch (error) {
-        console.error("Inspector: Failed to send message:", error);
-      }
-    },
-    [iframeRef]
-  );
-
-  /**
-   * Toggle inspector mode
-   */
-  const toggleInspector = useCallback(
-    (active?: boolean) => {
-      const newState = active !== undefined ? active : !isInspecting;
-      setIsInspecting(newState);
-
-      sendMessage({
-        type: "TOGGLE_INSPECTOR",
-        active: newState,
-        labels: labels,
-        theme: theme,
-      });
-    },
-    [isInspecting, sendMessage, labels, theme]
-  );
-
-  /**
-   * Start inspecting
-   */
-  const startInspecting = useCallback(() => {
-    toggleInspector(true);
-  }, [toggleInspector]);
-
-  /**
-   * Stop inspecting
-   */
-  const stopInspecting = useCallback(() => {
-    toggleInspector(false);
-  }, [toggleInspector]);
-
-  /**
-   * Show or hide content input
-   */
-  const showContentInput = useCallback(
-    (show: boolean, updateImmediately?: boolean) => {
-      sendMessage({
-        type: "SHOW_CONTENT_INPUT",
-        show: show,
-        updateImmediately: updateImmediately,
-      });
-    },
-    [sendMessage]
-  );
-
-  /**
-   * Show or hide image input
-   */
-  const showImageInput = useCallback(
-    (show: boolean, updateImmediately?: boolean) => {
-      sendMessage({
-        type: "SHOW_IMAGE_INPUT",
-        show: show,
-        updateImmediately: updateImmediately,
-      });
-    },
-    [sendMessage]
-  );
-
-  /**
-   * Show or hide style editor
-   */
-  const showStyleEditor = useCallback(
-    (show: boolean) => {
-      sendMessage({
-        type: "SHOW_STYLE_EDITOR",
-        show: show,
-      });
-    },
-    [sendMessage]
-  );
-
-  /**
-   * Show or hide "Built with Promake" badge
-   */
-  const setBadgeVisible = useCallback(
-    (visible: boolean) => {
-      sendMessage({
-        type: "SET_BADGE_VISIBLE",
-        visible: visible,
-        badgeText: labels?.badgeText,
-      });
-    },
-    [sendMessage, labels]
-  );
-
-  /**
-   * Highlight an element in the iframe
-   */
-  const highlightElement = useCallback(
-    (identifier: string | SelectedElementData, options?: HighlightOptions) => {
-      sendMessage({
-        type: "HIGHLIGHT_ELEMENT",
-        identifier: identifier,
-        options: options,
-      });
-    },
-    [sendMessage]
-  );
-
-  /**
-   * Request element info by inspector ID
-   */
-  const getElementByInspectorId = useCallback(
-    (inspectorId: string) => {
-      sendMessage({
-        type: "GET_ELEMENT_BY_ID",
-        inspectorId: inspectorId,
-      });
-    },
-    [sendMessage]
-  );
-
-  /**
-   * Toggle child borders visibility
-   */
-  const setShowChildBorders = useCallback(
-    (show: boolean) => {
-      sendMessage({
-        type: "SET_SHOW_CHILD_BORDERS",
-        show: show,
-      });
-    },
-    [sendMessage]
-  );
-
-  /**
-   * Listen for messages from iframe
-   */
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent<string | InspectorMessage>) => {
-      // Parse message if it's a string (JSON stringified)
-      let messageData: InspectorMessage;
-
-      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 (!messageData || typeof messageData.type !== "string") {
-        return;
-      }
-
-      switch (messageData.type) {
-        case "INSPECTOR_ELEMENT_SELECTED":
-          callbacks?.onElementSelected?.(messageData.data);
-          break;
-
-        case "URL_CHANGED":
-          callbacks?.onUrlChange?.(messageData.data);
-          break;
-
-        case "INSPECTOR_PROMPT_SUBMITTED":
-          callbacks?.onPromptSubmitted?.(messageData.data);
-          break;
-
-        case "INSPECTOR_TEXT_UPDATED":
-          callbacks?.onTextUpdated?.(messageData.data);
-          break;
-
-        case "INSPECTOR_IMAGE_UPDATED":
-          callbacks?.onImageUpdated?.(messageData.data);
-          break;
-
-        case "INSPECTOR_STYLE_UPDATED":
-          callbacks?.onStyleUpdated?.(messageData.data);
-          break;
-
-        case "INSPECTOR_CLOSED":
-          setIsInspecting(false);
-          callbacks?.onInspectorClosed?.();
-          break;
-
-        case "INSPECTOR_ERROR":
-          callbacks?.onError?.(messageData.data);
-          break;
-
-        case "ELEMENT_INFO_RESPONSE":
-          callbacks?.onElementInfoReceived?.(messageData.data);
-          break;
-
-        default:
-          // Unknown message type - ignore
-          break;
-      }
-    };
-
-    window.addEventListener("message", handleMessage);
-
-    return () => {
-      window.removeEventListener("message", handleMessage);
-    };
-  }, [callbacks]);
-
-  /**
-   * Cleanup: Turn off inspector on unmount
-   */
-  useEffect(() => {
-    return () => {
-      if (isInspecting) {
-        sendMessage({
-          type: "TOGGLE_INSPECTOR",
-          active: false,
-          labels: labels,
-          theme: theme,
-        });
-      }
-    };
-  }, [isInspecting, sendMessage]);
-
-  return {
-    isInspecting,
-    toggleInspector,
-    startInspecting,
-    stopInspecting,
-    showContentInput,
-    showImageInput,
-    showStyleEditor,
-    setBadgeVisible,
-    highlightElement,
-    getElementByInspectorId,
-    setShowChildBorders,
-  };
-}
-
-// Re-export types for convenience
-export type {
-  ComponentInfo,
-  ElementPosition,
-  SelectedElementData,
-  UrlChangeData,
-  PromptSubmittedData,
-  TextUpdatedData,
-  ImageUpdatedData,
-  StyleChanges,
-  StyleUpdatedData,
-  ErrorData,
-  HighlightOptions,
-  ElementInfoData,
-  InspectorLabels,
-  InspectorTheme,
-  ContentInputRequestData,
-  InspectorCallbacks,
-  UseInspectorReturn,
-} from "@promakeai/inspector-types";
-
-// Export utility functions
-export { updateJSXSource } from "./utils/jsxUpdater.js";
-export type {
-  UpdateJSXSourceOptions,
-  UpdateJSXSourceResult,
-} from "./utils/jsxUpdater.js";
-
-// Export Vite plugin
-export { inspectorHookPlugin } from "./vite-plugin.js";

package/src/utils/jsxUpdater.ts

@@ -1,274 +0,0 @@
-/**
- * JSX Source Code Updater
- * AST-based utility for updating styles and classNames in JSX/TSX source code
- */
-
-import * as parser from '@babel/parser';
-import traverse from '@babel/traverse';
-import generate from '@babel/generator';
-import * as t from '@babel/types';
-
-export interface UpdateJSXSourceOptions {
-  sourceCode: string;
-  lineNumber: number;
-  columnNumber: number;
-  tagName: string;
-  styles?: Record<string, string>;
-  className?: string;
-}
-
-export interface UpdateJSXSourceResult {
-  success: boolean;
-  code: string;
-  message?: string;
-}
-
-/**
- * Create AST ObjectExpression from styles object
- */
-function createStyleObjectExpression(styles: Record<string, string>): t.ObjectExpression {
-  return t.objectExpression(
-    Object.entries(styles).map(([key, value]) =>
-      t.objectProperty(
-        t.identifier(key),
-        t.stringLiteral(value)
-      )
-    )
-  );
-}
-
-/**
- * Find JSX element at specific line and column position
- */
-function findJSXElementAtPosition(
-  ast: t.File,
-  targetLine: number,
-  targetColumn: number
-): any {
-  let foundElement: any = null;
-
-  traverse(ast, {
-    JSXOpeningElement(path: any) {
-      const { loc } = path.node;
-      if (
-        loc &&
-        loc.start.line === targetLine &&
-        loc.start.column === targetColumn
-      ) {
-        foundElement = path;
-        path.stop();
-      }
-    },
-  });
-
-  return foundElement;
-}
-
-/**
- * Merge new styles with existing style prop
- */
-function mergeStyleProp(
-  jsxOpeningElement: any,
-  newStyles: Record<string, string>
-): void {
-  const attributes = jsxOpeningElement.node.attributes;
-
-  // Find existing style attribute
-  const styleAttrIndex = attributes.findIndex(
-    (attr: any) =>
-      t.isJSXAttribute(attr) &&
-      t.isJSXIdentifier(attr.name) &&
-      attr.name.name === 'style'
-  );
-
-  const newStyleObjectExpression = createStyleObjectExpression(newStyles);
-
-  if (styleAttrIndex !== -1) {
-    // Update existing style attribute
-    const styleAttr = attributes[styleAttrIndex];
-
-    if (
-      t.isJSXExpressionContainer(styleAttr.value) &&
-      t.isObjectExpression(styleAttr.value.expression)
-    ) {
-      // Merge with existing styles
-      const existingProps = styleAttr.value.expression.properties;
-      const newProps = newStyleObjectExpression.properties;
-
-      // Create map of new style keys
-      const newStyleKeys = new Set(Object.keys(newStyles));
-
-      // Filter out existing properties that will be replaced
-      const filteredExisting = existingProps.filter(
-        (prop: any) =>
-          !t.isObjectProperty(prop) ||
-          !t.isIdentifier(prop.key) ||
-          !newStyleKeys.has(prop.key.name)
-      );
-
-      // Combine: keep non-updated existing properties + add new properties
-      styleAttr.value.expression.properties = [
-        ...filteredExisting,
-        ...newProps,
-      ];
-    } else {
-      // Replace entirely if existing value is not a simple object
-      styleAttr.value = t.jsxExpressionContainer(newStyleObjectExpression);
-    }
-  } else {
-    // Add new style attribute
-    const styleAttr = t.jsxAttribute(
-      t.jsxIdentifier('style'),
-      t.jsxExpressionContainer(newStyleObjectExpression)
-    );
-    attributes.push(styleAttr);
-  }
-}
-
-/**
- * Merge new className with existing className prop
- */
-function mergeClassNameProp(
-  jsxOpeningElement: any,
-  newClassName: string
-): void {
-  const attributes = jsxOpeningElement.node.attributes;
-
-  // Find existing className attribute
-  const classNameAttrIndex = attributes.findIndex(
-    (attr: any) =>
-      t.isJSXAttribute(attr) &&
-      t.isJSXIdentifier(attr.name) &&
-      attr.name.name === 'className'
-  );
-
-  if (classNameAttrIndex !== -1) {
-    // Merge with existing className
-    const classNameAttr = attributes[classNameAttrIndex];
-
-    if (t.isStringLiteral(classNameAttr.value)) {
-      // Simple string className
-      const existingClasses = classNameAttr.value.value;
-      classNameAttr.value = t.stringLiteral(`${existingClasses} ${newClassName}`.trim());
-    } else if (
-      t.isJSXExpressionContainer(classNameAttr.value) &&
-      t.isStringLiteral(classNameAttr.value.expression)
-    ) {
-      // className={""} format
-      const existingClasses = classNameAttr.value.expression.value;
-      classNameAttr.value.expression = t.stringLiteral(`${existingClasses} ${newClassName}`.trim());
-    } else if (
-      t.isJSXExpressionContainer(classNameAttr.value) &&
-      t.isTemplateLiteral(classNameAttr.value.expression)
-    ) {
-      // Template literal className
-      const templateLiteral = classNameAttr.value.expression;
-      const lastQuasi = templateLiteral.quasis[templateLiteral.quasis.length - 1];
-      lastQuasi.value.raw += ` ${newClassName}`;
-      lastQuasi.value.cooked = lastQuasi.value.raw;
-    } else {
-      // Complex expression - wrap in template literal
-      classNameAttr.value = t.jsxExpressionContainer(
-        t.templateLiteral(
-          [
-            t.templateElement({ raw: '', cooked: '' }, false),
-            t.templateElement({ raw: ` ${newClassName}`, cooked: ` ${newClassName}` }, true),
-          ],
-          [classNameAttr.value.expression]
-        )
-      );
-    }
-  } else {
-    // Add new className attribute
-    const classNameAttr = t.jsxAttribute(
-      t.jsxIdentifier('className'),
-      t.stringLiteral(newClassName)
-    );
-    attributes.push(classNameAttr);
-  }
-}
-
-/**
- * Update JSX source code with new styles and/or className
- * 
- * @param options - Configuration options for the update
- * @returns Result object with success status, updated code, and optional message
- * 
- * @example
- * ```typescript
- * const result = updateJSXSource({
- *   sourceCode: '<div className="foo">Hello</div>',
- *   lineNumber: 1,
- *   columnNumber: 0,
- *   tagName: 'div',
- *   styles: { backgroundColor: 'red !important' },
- *   className: 'bar'
- * });
- * // result.code: '<div className="foo bar" style={{ backgroundColor: "red !important" }}>Hello</div>'
- * ```
- */
-export function updateJSXSource(options: UpdateJSXSourceOptions): UpdateJSXSourceResult {
-  const { sourceCode, lineNumber, columnNumber, tagName, styles, className } = options;
-
-  try {
-    // Parse JSX/TSX source code
-    const ast = parser.parse(sourceCode, {
-      sourceType: 'module',
-      plugins: ['jsx', 'typescript', 'decorators-legacy'],
-    });
-
-    // Find the target JSX element at the specified position
-    const elementPath = findJSXElementAtPosition(ast, lineNumber, columnNumber);
-
-    if (!elementPath) {
-      return {
-        success: false,
-        code: sourceCode,
-        message: `Could not find JSX element <${tagName}> at line ${lineNumber}, column ${columnNumber}`,
-      };
-    }
-
-    // Verify tag name matches (optional validation)
-    const foundTagName = t.isJSXIdentifier(elementPath.node.name)
-      ? elementPath.node.name.name
-      : '';
-
-    if (foundTagName.toLowerCase() !== tagName.toLowerCase()) {
-      return {
-        success: false,
-        code: sourceCode,
-        message: `Tag name mismatch: expected <${tagName}>, found <${foundTagName}>`,
-      };
-    }
-
-    // Apply style updates if provided
-    if (styles && Object.keys(styles).length > 0) {
-      mergeStyleProp(elementPath, styles);
-    }
-
-    // Apply className updates if provided
-    if (className && className.trim()) {
-      mergeClassNameProp(elementPath, className.trim());
-    }
-
-    // Generate updated code
-    const output = generate(ast, {
-      retainLines: true,
-      compact: false,
-      concise: false,
-    });
-
-    return {
-      success: true,
-      code: output.code,
-      message: 'JSX source updated successfully',
-    };
-  } catch (error) {
-    return {
-      success: false,
-      code: sourceCode,
-      message: error instanceof Error ? error.message : 'Unknown error occurred during JSX update',
-    };
-  }
-}
-