@buoy-gg/highlight-updates 2.0.2

package/lib/typescript/highlight-updates/utils/ViewTypeMapper.d.ts

@@ -0,0 +1,66 @@
+/**
+ * ViewTypeMapper
+ *
+ * Maps native view class names (e.g., "RCTView", "RCTText") to their
+ * developer-friendly React Native component names (e.g., "View", "Text").
+ *
+ * This makes the render tracking UI more understandable since developers
+ * work with component names, not native class names.
+ *
+ * Sources:
+ * - React Native core: packages/react-native/Libraries/Components/*
+ * - React Native Android: ReactAndroid/src/main/java/com/facebook/react/views/*
+ * - FabricNameComponentMapping.kt
+ * - Common third-party libraries (react-native-svg, gesture-handler, etc.)
+ */
+/**
+ * Mapping from native view class names to React component names.
+ *
+ * Format: { "NativeClassName": "ComponentName" }
+ */
+export declare const VIEW_TYPE_MAP: Record<string, string>;
+/**
+ * Get the developer-friendly component name for a native view type.
+ * Returns the original viewType if no mapping exists.
+ *
+ * @param viewType - The native view class name (e.g., "RCTView")
+ * @returns The component name (e.g., "View")
+ */
+export declare function getComponentDisplayName(viewType: string): string;
+/**
+ * Get the native view class name for a component name (reverse lookup).
+ * Returns null if no mapping exists.
+ *
+ * @param componentName - The component name (e.g., "View")
+ * @returns The native view class name (e.g., "RCTView") or null
+ */
+export declare function getNativeViewType(componentName: string): string | null;
+/**
+ * Check if a view type is a known native component.
+ *
+ * @param viewType - The native view class name
+ * @returns true if it's a known component
+ */
+export declare function isKnownViewType(viewType: string): boolean;
+/**
+ * Get all known view types (useful for autocomplete/suggestions).
+ *
+ * @returns Array of all native view class names
+ */
+export declare function getAllNativeViewTypes(): string[];
+/**
+ * Get all known component names (useful for autocomplete/suggestions).
+ *
+ * @returns Array of all component display names
+ */
+export declare function getAllComponentNames(): string[];
+declare const _default: {
+    VIEW_TYPE_MAP: Record<string, string>;
+    getComponentDisplayName: typeof getComponentDisplayName;
+    getNativeViewType: typeof getNativeViewType;
+    isKnownViewType: typeof isKnownViewType;
+    getAllNativeViewTypes: typeof getAllNativeViewTypes;
+    getAllComponentNames: typeof getAllComponentNames;
+};
+export default _default;
+//# sourceMappingURL=ViewTypeMapper.d.ts.map

package/lib/typescript/index.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @buoy-gg/highlight-updates
+ *
+ * Standalone implementation of React DevTools' "Highlight updates when components
+ * render" feature. Works without requiring DevTools to be connected.
+ *
+ * @example
+ * ```tsx
+ * // Toggle-only preset - tap to enable/disable highlights
+ * import { highlightUpdatesPreset } from '@buoy-gg/highlight-updates';
+ *
+ * <FloatingDevTools apps={[highlightUpdatesPreset]} />
+ *
+ * // Modal preset - full interface with filters and render list
+ * import { highlightUpdatesModalPreset } from '@buoy-gg/highlight-updates';
+ *
+ * <FloatingDevTools apps={[highlightUpdatesModalPreset]} />
+ *
+ * // Or use the standalone controller programmatically
+ * import { HighlightUpdatesController } from '@buoy-gg/highlight-updates';
+ *
+ * HighlightUpdatesController.toggle();
+ * HighlightUpdatesController.enable();
+ * HighlightUpdatesController.disable();
+ * ```
+ */
+export { highlightUpdatesPreset, createHighlightUpdatesTool, highlightUpdatesModalPreset, createHighlightUpdatesModalTool, } from "./preset";
+export { default as HighlightUpdatesController } from "./highlight-updates/utils/HighlightUpdatesController";
+export { HighlightUpdatesOverlay } from "./highlight-updates/HighlightUpdatesOverlay";
+export { installProfilerInterceptor, uninstallProfilerInterceptor, setComparisonCallback, isInterceptorInstalled, enableProfilerLogging, disableProfilerLogging, isLoggingEnabled, } from "./highlight-updates/utils/ProfilerInterceptor";
+export { RenderTracker } from "./highlight-updates/utils/RenderTracker";
+export type { TrackedRender, FilterConfig, RenderTrackerSettings, RenderCause, RenderCauseType, ComponentCauseType, RenderEvent, } from "./highlight-updates/utils/RenderTracker";
+export { detectRenderCause, clearRenderCauseState, removeRenderCauseState, getRenderCauseStats, safeCloneForHistory, capturePropsSnapshot, captureStateSnapshot, } from "./highlight-updates/utils/RenderCauseDetector";
+export { PerformanceLogger } from "./highlight-updates/utils/PerformanceLogger";
+export type { BatchMetrics, BatchTimer } from "./highlight-updates/utils/PerformanceLogger";
+export { VIEW_TYPE_MAP, getComponentDisplayName, getNativeViewType, isKnownViewType, getAllNativeViewTypes, getAllComponentNames, } from "./highlight-updates/utils/ViewTypeMapper";
+export { HighlightUpdatesModal } from "./highlight-updates/components/HighlightUpdatesModal";
+export { RenderListItem } from "./highlight-updates/components/RenderListItem";
+export { RenderDetailView } from "./highlight-updates/components/RenderDetailView";
+export { HighlightFilterView } from "./highlight-updates/components/HighlightFilterView";
+export { RenderCauseBadge, TwoLevelCauseBadge, CAUSE_CONFIG, COMPONENT_CAUSE_CONFIG, } from "./highlight-updates/components/RenderCauseBadge";
+export { RenderHistoryViewer, RenderHistoryFooter, } from "./highlight-updates/components/RenderHistoryViewer";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/preset.d.ts

@@ -0,0 +1,187 @@
+/**
+ * Pre-configured highlight updates tool for FloatingDevTools
+ *
+ * This preset provides standalone "Highlight updates when components render"
+ * functionality. Tap the icon to toggle highlights on/off.
+ *
+ * The overlay is automatically rendered by FloatingDevTools when the
+ * @buoy-gg/highlight-updates package is installed.
+ *
+ * Two presets available:
+ * - highlightUpdatesPreset: Quick toggle (no modal)
+ * - highlightUpdatesModalPreset: Full modal with filters and render list
+ *
+ * @example
+ * ```tsx
+ * import { highlightUpdatesPreset, highlightUpdatesModalPreset } from '@buoy-gg/highlight-updates';
+ *
+ * // Toggle-only: Just tap to enable/disable highlighting
+ * <FloatingDevTools apps={[highlightUpdatesPreset]} />
+ *
+ * // Modal: Opens interface with filters, render list, and controls
+ * <FloatingDevTools apps={[highlightUpdatesModalPreset]} />
+ * ```
+ */
+import React from "react";
+/**
+ * Icon component that changes color based on enabled state.
+ *
+ * ⚠️ IMPORTANT - DO NOT MODIFY THIS COMPONENT ⚠️
+ * This component MUST use useState and useEffect hooks to subscribe to the controller.
+ * It is rendered as a JSX component (<IconComponent />) in FloatingMenu and DialIcon,
+ * which allows hooks to work properly.
+ *
+ * If you remove the hooks or change this to read isEnabled() directly,
+ * the icon color will NOT update when the toggle is pressed.
+ */
+declare function HighlightIcon({ size }: {
+    size: number;
+}): React.JSX.Element;
+/**
+ * Empty component for toggle-only tools (no modal needed)
+ * The actual overlay is rendered by FloatingDevTools automatically
+ */
+declare function EmptyComponent(): null;
+/**
+ * Wrapper component for the modal that handles badge press navigation.
+ * Registers a callback with the controller to receive badge press events
+ * and passes the target nativeTag to the modal for deep linking.
+ */
+declare function HighlightUpdatesModalWithBadgeNavigation(props: {
+    visible: boolean;
+    onClose: () => void;
+    onBack?: () => void;
+    onMinimize?: (modalState: any) => void;
+    enableSharedModalDimensions?: boolean;
+}): React.JSX.Element;
+/**
+ * Pre-configured highlight updates tool for FloatingDevTools.
+ * Tap the icon to toggle component render highlighting on/off.
+ *
+ * Features:
+ * - Standalone implementation - no DevTools connection required
+ * - Simple direct toggle (no modal)
+ * - Icon changes color: gray when off, green when on
+ * - Overlay auto-rendered by FloatingDevTools
+ */
+export declare const highlightUpdatesPreset: {
+    id: string;
+    name: string;
+    description: string;
+    slot: "row";
+    icon: typeof HighlightIcon;
+    component: typeof EmptyComponent;
+    props: {};
+    launchMode: "toggle-only";
+    onPress: () => void;
+};
+/**
+ * Create a custom highlight updates tool configuration.
+ * Use this if you want to override default settings.
+ *
+ * @example
+ * ```tsx
+ * import { createHighlightUpdatesTool } from '@buoy-gg/highlight-updates';
+ *
+ * const myHighlightTool = createHighlightUpdatesTool({
+ *   name: "RENDERS",
+ *   enabledColor: "#ec4899",
+ *   disabledColor: "#9ca3af",
+ *   autoInitialize: true,
+ * });
+ * ```
+ */
+export declare function createHighlightUpdatesTool(options?: {
+    /** Tool name (default: "UPDATES") */
+    name?: string;
+    /** Tool description */
+    description?: string;
+    /** Icon color when enabled (default: "#10b981" - green) */
+    enabledColor?: string;
+    /** Icon color when disabled (default: "#6b7280" - gray) */
+    disabledColor?: string;
+    /** Custom tool ID (default: "highlight-updates") */
+    id?: string;
+    /** Auto-initialize on first render (default: false) */
+    autoInitialize?: boolean;
+}): {
+    id: string;
+    name: string;
+    description: string;
+    slot: "row";
+    icon: ({ size }: {
+        size: number;
+    }) => React.JSX.Element;
+    component: typeof EmptyComponent;
+    props: {};
+    launchMode: "toggle-only";
+    onPress: () => void;
+};
+/**
+ * Modal preset for highlight updates tool.
+ * Opens a full modal interface with:
+ * - List of tracked component renders
+ * - Start/Stop and Pause/Resume controls
+ * - Clear button to reset render counts
+ * - Search bar in navbar (expandable)
+ * - Filter by viewType, testID, nativeID, componentName
+ * - Tap overlay badge to jump to component detail view
+ *
+ * Use this preset when you want detailed render tracking and filtering.
+ */
+export declare const highlightUpdatesModalPreset: {
+    id: string;
+    name: string;
+    description: string;
+    slot: "both";
+    icon: ({ size }: {
+        size: number;
+    }) => React.JSX.Element;
+    component: typeof HighlightUpdatesModalWithBadgeNavigation;
+    props: {
+        enableSharedModalDimensions: boolean;
+    };
+};
+/**
+ * Create a custom highlight updates modal tool configuration.
+ * Use this if you want to override default settings for the modal version.
+ *
+ * @example
+ * ```tsx
+ * import { createHighlightUpdatesModalTool } from '@buoy-gg/highlight-updates';
+ *
+ * const myRendersTool = createHighlightUpdatesModalTool({
+ *   name: "PROFILER",
+ *   enabledColor: "#8b5cf6",
+ *   disabledColor: "#9ca3af",
+ * });
+ * ```
+ */
+export declare function createHighlightUpdatesModalTool(options?: {
+    /** Tool name (default: "RENDERS") */
+    name?: string;
+    /** Tool description */
+    description?: string;
+    /** Icon color when tracking enabled (default: "#10b981" - green) */
+    enabledColor?: string;
+    /** Icon color when tracking disabled (default: "#6b7280" - gray) */
+    disabledColor?: string;
+    /** Custom tool ID (default: "highlight-updates-modal") */
+    id?: string;
+    /** Auto-initialize on first render (default: false) */
+    autoInitialize?: boolean;
+}): {
+    id: string;
+    name: string;
+    description: string;
+    slot: "both";
+    icon: ({ size }: {
+        size: number;
+    }) => React.JSX.Element;
+    component: typeof HighlightUpdatesModalWithBadgeNavigation;
+    props: {
+        enableSharedModalDimensions: boolean;
+    };
+};
+export {};
+//# sourceMappingURL=preset.d.ts.map

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@buoy-gg/highlight-updates",
+  "version": "2.0.2",
+  "description": "Control React DevTools highlight updates feature from your app",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
+  "files": [
+    "lib"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "bob build",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf lib",
+    "test": "pnpm run typecheck",
+    "postinstall": "echo \"Run pnpm build to compile this package\""
+  },
+  "dependencies": {
+    "@buoy-gg/shared-ui": "workspace:*",
+    "@buoy-gg/floating-tools-core": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "@buoy-gg/core": "workspace:*"
+  },
+  "peerDependenciesMeta": {
+    "@buoy-gg/core": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@buoy-gg/core": "workspace:*",
+    "@types/react": "^19.1.0",
+    "@types/react-native": "^0.73.0",
+    "typescript": "~5.8.3"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "sourceMaps": false
+        }
+      ],
+      [
+        "module",
+        {
+          "sourceMaps": false
+        }
+      ],
+      "typescript"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LovesWorking/react-native-buoy.git",
+    "directory": "packages/highlight-updates"
+  },
+  "bugs": {
+    "url": "https://github.com/LovesWorking/react-native-buoy/issues"
+  },
+  "homepage": "https://github.com/LovesWorking/react-native-buoy/tree/main/packages/highlight-updates#readme",
+  "publishConfig": {
+    "access": "public",
+    "tag": "latest"
+  }
+}