@zargaryanvh/react-component-inspector 1.0.2 → 1.0.3

package/dist/inspectionInterceptors.js

@@ -1,64 +1,68 @@
-/**
- * Interceptors to block API and Firebase requests when CTRL is pressed
- * Only active in development
- */
-let isInspectionActive = false;
-/**
- * Set inspection active state (called from InspectionContext)
- */
-export const setInspectionActive = (active) => {
-    if (process.env.NODE_ENV !== "development") {
-        return;
-    }
-    isInspectionActive = active;
-};
-/**
- * Check if inspection is active and requests should be blocked
- */
-export const shouldBlockRequest = () => {
-    if (process.env.NODE_ENV !== "development") {
-        return false;
-    }
-    return isInspectionActive;
-};
-/**
- * Intercept fetch requests (for API calls)
- */
-export const setupFetchInterceptor = () => {
-    if (process.env.NODE_ENV !== "development") {
-        return;
-    }
-    const originalFetch = window.fetch;
-    window.fetch = async (...args) => {
-        if (shouldBlockRequest()) {
-            console.warn("[Inspection] Blocked API request (CTRL held):", args[0]);
-            // Return a rejected promise to prevent the request
-            return Promise.reject(new Error("Request blocked: Inspection mode active (CTRL held)"));
-        }
-        return originalFetch(...args);
-    };
-};
-/**
- * Intercept Firebase Firestore operations
- * Note: Firestore operations are harder to intercept at the SDK level
- * We'll rely on blocking at the fetch level (which Firestore uses internally)
- * and also provide a wrapper utility for direct Firestore calls
- */
-export const setupFirestoreInterceptor = () => {
-    if (process.env.NODE_ENV !== "development") {
-        return;
-    }
-    // Firestore uses fetch internally, so the fetch interceptor will catch most operations
-    // For direct Firestore SDK calls, we'll need to wrap them manually
-    // This is a limitation of the Firestore SDK architecture
-};
-/**
- * Setup all interceptors
- */
-export const setupInterceptors = () => {
-    if (process.env.NODE_ENV !== "development") {
-        return;
-    }
-    setupFetchInterceptor();
-    setupFirestoreInterceptor();
-};
+/**
+ * Interceptors to block API and Firebase requests when CTRL is pressed
+ * Only active in development
+ */
+let isInspectionActive = false;
+/**
+ * Set inspection active state (called from InspectionContext)
+ */
+export const setInspectionActive = (active) => {
+    if (process.env.NODE_ENV !== "development") {
+        return;
+    }
+    isInspectionActive = active;
+};
+/**
+ * Check if inspection is active and requests should be blocked
+ */
+export const shouldBlockRequest = () => {
+    if (process.env.NODE_ENV !== "development") {
+        return false;
+    }
+    return isInspectionActive;
+};
+/**
+ * Intercept fetch requests (for API calls)
+ */
+export const setupFetchInterceptor = () => {
+    if (process.env.NODE_ENV !== "development") {
+        return;
+    }
+    const originalFetch = window.fetch;
+    window.fetch = async (...args) => {
+        if (shouldBlockRequest()) {
+            const url = typeof args[0] === "string" ? args[0] : args[0]?.url ?? "";
+            // Never block health/connection checks so the app doesn't report "connection lost"
+            if (url.includes("/health") || url.includes("health?")) {
+                return originalFetch(...args);
+            }
+            console.warn("[Inspection] Blocked API request (CTRL held):", args[0]);
+            return Promise.reject(new Error("Request blocked: Inspection mode active (CTRL held)"));
+        }
+        return originalFetch(...args);
+    };
+};
+/**
+ * Intercept Firebase Firestore operations
+ * Note: Firestore operations are harder to intercept at the SDK level
+ * We'll rely on blocking at the fetch level (which Firestore uses internally)
+ * and also provide a wrapper utility for direct Firestore calls
+ */
+export const setupFirestoreInterceptor = () => {
+    if (process.env.NODE_ENV !== "development") {
+        return;
+    }
+    // Firestore uses fetch internally, so the fetch interceptor will catch most operations
+    // For direct Firestore SDK calls, we'll need to wrap them manually
+    // This is a limitation of the Firestore SDK architecture
+};
+/**
+ * Setup all interceptors
+ */
+export const setupInterceptors = () => {
+    if (process.env.NODE_ENV !== "development") {
+        return;
+    }
+    setupFetchInterceptor();
+    setupFirestoreInterceptor();
+};

package/dist/useInspectionMetadata.d.ts

@@ -1,34 +1,34 @@
-import React from "react";
-/**
- * Hook to add inspection metadata to a component
- *
- * Usage:
- * ```tsx
- * const MyComponent = (props) => {
- *   const inspectionProps = useInspectionMetadata({
- *     componentName: "MyComponent",
- *     variant: props.variant,
- *     usagePath: "ActivityPage > TransactionList",
- *     props,
- *     sourceFile: "src/components/MyComponent.tsx",
- *   });
- *
- *   return <Box {...inspectionProps}>...</Box>;
- * };
- * ```
- */
-export declare const useInspectionMetadata: (config: {
-    componentName: string;
-    variant?: string;
-    role?: string;
-    usagePath: string;
-    props: Record<string, any>;
-    sourceFile: string;
-}) => {
-    onMouseEnter: (e: React.MouseEvent) => void;
-    onMouseLeave: () => void;
-    onTouchStart: (e: React.TouchEvent) => void;
-    onTouchEnd: () => void;
-    "data-inspection-id": string;
-    "data-inspection-name": string;
-};
+import React from "react";
+/**
+ * Hook to add inspection metadata to a component
+ *
+ * Usage:
+ * ```tsx
+ * const MyComponent = (props) => {
+ *   const inspectionProps = useInspectionMetadata({
+ *     componentName: "MyComponent",
+ *     variant: props.variant,
+ *     usagePath: "ActivityPage > TransactionList",
+ *     props,
+ *     sourceFile: "src/components/MyComponent.tsx",
+ *   });
+ *
+ *   return <Box {...inspectionProps}>...</Box>;
+ * };
+ * ```
+ */
+export declare const useInspectionMetadata: (config: {
+    componentName: string;
+    variant?: string;
+    role?: string;
+    usagePath: string;
+    props: Record<string, any>;
+    sourceFile: string;
+}) => {
+    onMouseEnter: (e: React.MouseEvent) => void;
+    onMouseLeave: () => void;
+    onTouchStart: (e: React.TouchEvent) => void;
+    onTouchEnd: () => void;
+    "data-inspection-id": string;
+    "data-inspection-name": string;
+};

package/dist/useInspectionMetadata.js

@@ -1,67 +1,67 @@
-import { useMemo } from "react";
-import { useInspection } from "./InspectionContext";
-import { generateComponentId, formatPropsSignature, getNextInstanceIndex, } from "./inspection";
-/**
- * Hook to add inspection metadata to a component
- *
- * Usage:
- * ```tsx
- * const MyComponent = (props) => {
- *   const inspectionProps = useInspectionMetadata({
- *     componentName: "MyComponent",
- *     variant: props.variant,
- *     usagePath: "ActivityPage > TransactionList",
- *     props,
- *     sourceFile: "src/components/MyComponent.tsx",
- *   });
- *
- *   return <Box {...inspectionProps}>...</Box>;
- * };
- * ```
- */
-export const useInspectionMetadata = (config) => {
-    const { isInspectionActive, setHoveredComponent } = useInspection();
-    const instanceIndex = useMemo(() => getNextInstanceIndex(config.componentName), [config.componentName]);
-    const metadata = useMemo(() => ({
-        componentName: config.componentName,
-        componentId: generateComponentId(config.componentName, instanceIndex),
-        variant: config.variant,
-        role: config.role,
-        usagePath: config.usagePath,
-        instanceIndex,
-        propsSignature: formatPropsSignature(config.props),
-        sourceFile: config.sourceFile,
-    }), [config, instanceIndex]);
-    const handleMouseEnter = (e) => {
-        if (!isInspectionActive)
-            return;
-        const target = e.currentTarget;
-        setHoveredComponent(metadata, target);
-    };
-    const handleMouseLeave = () => {
-        if (!isInspectionActive)
-            return;
-        setHoveredComponent(null, null);
-    };
-    // Touch handlers for mobile
-    const handleTouchStart = (e) => {
-        if (!isInspectionActive)
-            return;
-        const target = e.currentTarget;
-        setHoveredComponent(metadata, target);
-    };
-    const handleTouchEnd = () => {
-        if (!isInspectionActive)
-            return;
-        // Don't clear on touch end - let autoInspection handle it
-        // This allows touch move to continue inspecting
-    };
-    return {
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onTouchStart: handleTouchStart,
-        onTouchEnd: handleTouchEnd,
-        "data-inspection-id": metadata.componentId,
-        "data-inspection-name": config.componentName,
-    };
-};
+import { useMemo } from "react";
+import { useInspection } from "./InspectionContext";
+import { generateComponentId, formatPropsSignature, getNextInstanceIndex, } from "./inspection";
+/**
+ * Hook to add inspection metadata to a component
+ *
+ * Usage:
+ * ```tsx
+ * const MyComponent = (props) => {
+ *   const inspectionProps = useInspectionMetadata({
+ *     componentName: "MyComponent",
+ *     variant: props.variant,
+ *     usagePath: "ActivityPage > TransactionList",
+ *     props,
+ *     sourceFile: "src/components/MyComponent.tsx",
+ *   });
+ *
+ *   return <Box {...inspectionProps}>...</Box>;
+ * };
+ * ```
+ */
+export const useInspectionMetadata = (config) => {
+    const { isInspectionActive, setHoveredComponent } = useInspection();
+    const instanceIndex = useMemo(() => getNextInstanceIndex(config.componentName), [config.componentName]);
+    const metadata = useMemo(() => ({
+        componentName: config.componentName,
+        componentId: generateComponentId(config.componentName, instanceIndex),
+        variant: config.variant,
+        role: config.role,
+        usagePath: config.usagePath,
+        instanceIndex,
+        propsSignature: formatPropsSignature(config.props),
+        sourceFile: config.sourceFile,
+    }), [config, instanceIndex]);
+    const handleMouseEnter = (e) => {
+        if (!isInspectionActive)
+            return;
+        const target = e.currentTarget;
+        setHoveredComponent(metadata, target);
+    };
+    const handleMouseLeave = () => {
+        if (!isInspectionActive)
+            return;
+        setHoveredComponent(null, null);
+    };
+    // Touch handlers for mobile
+    const handleTouchStart = (e) => {
+        if (!isInspectionActive)
+            return;
+        const target = e.currentTarget;
+        setHoveredComponent(metadata, target);
+    };
+    const handleTouchEnd = () => {
+        if (!isInspectionActive)
+            return;
+        // Don't clear on touch end - let autoInspection handle it
+        // This allows touch move to continue inspecting
+    };
+    return {
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onTouchStart: handleTouchStart,
+        onTouchEnd: handleTouchEnd,
+        "data-inspection-id": metadata.componentId,
+        "data-inspection-name": config.componentName,
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zargaryanvh/react-component-inspector",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A development tool for inspecting React components with AI-friendly metadata extraction",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",