@buoy-gg/highlight-updates 3.0.1 → 3.0.2

package/lib/module/highlight-updates/utils/ViewTypeMapper.js

@@ -1 +1,255 @@
-"use strict";export const VIEW_TYPE_MAP={RCTView:"View",RCTSafeAreaView:"SafeAreaView",RCTModalHostView:"Modal",RCTText:"Text",RCTRawText:"RawText",RCTVirtualText:"VirtualText",RCTTextInlineImage:"TextInlineImage",RCTImageView:"Image",RCTImage:"Image",RCTScrollView:"ScrollView",RCTScrollContentView:"ScrollContentView",AndroidHorizontalScrollView:"HorizontalScrollView",AndroidHorizontalScrollContentView:"HorizontalScrollContentView",RCTSinglelineTextInputView:"TextInput",RCTMultilineTextInputView:"TextInput (Multiline)",AndroidTextInput:"TextInput",RCTInputAccessoryView:"InputAccessoryView",RCTRefreshControl:"RefreshControl",AndroidSwipeRefreshLayout:"RefreshControl",PullToRefreshView:"RefreshControl",RCTSwitch:"Switch",AndroidSwitch:"Switch",RCTSlider:"Slider",RCTActivityIndicatorView:"ActivityIndicator",AndroidProgressBar:"ActivityIndicator",AndroidDrawerLayout:"DrawerLayout",VirtualView:"VirtualView",VirtualViewExperimental:"VirtualView",DebuggingOverlay:"DebuggingOverlay",LayoutConformance:"LayoutConformance",UnimplementedNativeView:"UnimplementedView",RKShimmeringView:"ShimmeringView",RCTTemplateView:"TemplateView",RCTAxialGradientView:"AxialGradientView",RCTMap:"Map",RCTWebView:"WebView",RCTKeyframes:"Keyframes",RCTImpressionTrackingView:"ImpressionTrackingView",RNSVGSvgView:"Svg",RNSVGGroup:"G",RNSVGPath:"Path",RNSVGText:"SvgText",RNSVGTSpan:"TSpan",RNSVGTextPath:"TextPath",RNSVGImage:"SvgImage",RNSVGCircle:"Circle",RNSVGEllipse:"Ellipse",RNSVGLine:"Line",RNSVGRect:"Rect",RNSVGClipPath:"ClipPath",RNSVGDefs:"Defs",RNSVGUse:"Use",RNSVGSymbol:"Symbol",RNSVGPattern:"Pattern",RNSVGMask:"Mask",RNSVGForeignObject:"ForeignObject",RNSVGMarker:"Marker",RNSVGLinearGradient:"LinearGradient",RNSVGRadialGradient:"RadialGradient",RNSVGFilter:"Filter",RNSVGFeBlend:"FeBlend",RNSVGFeColorMatrix:"FeColorMatrix",RNSVGFeComposite:"FeComposite",RNSVGFeFlood:"FeFlood",RNSVGFeGaussianBlur:"FeGaussianBlur",RNSVGFeMerge:"FeMerge",RNSVGFeOffset:"FeOffset",RNSVGPolygon:"Polygon",RNSVGPolyline:"Polyline",RNSVGStop:"Stop",RNGestureHandlerRootView:"GestureHandlerRootView",RNGestureHandlerButton:"GestureHandlerButton",RNCSafeAreaProvider:"SafeAreaProvider",RNCSafeAreaView:"SafeAreaView",RNSScreen:"Screen",RNSScreenContainer:"ScreenContainer",RNSScreenStack:"ScreenStack",RNSScreenStackHeaderConfig:"ScreenStackHeaderConfig",RNSScreenStackHeaderSubview:"ScreenStackHeaderSubview",RNSSearchBar:"SearchBar",RNSFullWindowOverlay:"FullWindowOverlay",RNSModalScreen:"ModalScreen",ReanimatedView:"Animated.View",ExpoView:"ExpoView",ExpoBlurView:"BlurView",ExpoLinearGradient:"LinearGradient",ExpoImage:"ExpoImage",ExpoVideoView:"VideoView",ExpoCamera:"Camera",ExpoBarCodeScannerView:"BarCodeScanner",RNCWebView:"WebView",AIRMap:"MapView",AIRMapMarker:"Marker",AIRMapPolyline:"Polyline",AIRMapPolygon:"Polygon",AIRMapCircle:"Circle",AIRMapCallout:"Callout",RCTVideo:"Video",LottieAnimationView:"LottieView",FastImageView:"FastImage"};export function getComponentDisplayName(e){return VIEW_TYPE_MAP[e]||e}export function getNativeViewType(e){for(const[i,t]of Object.entries(VIEW_TYPE_MAP))if(t===e)return i;return null}export function isKnownViewType(e){return e in VIEW_TYPE_MAP}export function getAllNativeViewTypes(){return Object.keys(VIEW_TYPE_MAP)}export function getAllComponentNames(){return[...new Set(Object.values(VIEW_TYPE_MAP))]}export default{VIEW_TYPE_MAP:VIEW_TYPE_MAP,getComponentDisplayName:getComponentDisplayName,getNativeViewType:getNativeViewType,isKnownViewType:isKnownViewType,getAllNativeViewTypes:getAllNativeViewTypes,getAllComponentNames:getAllComponentNames};
+/**
+ * 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.)
+ */
+
+"use strict";
+
+/**
+ * Mapping from native view class names to React component names.
+ *
+ * Format: { "NativeClassName": "ComponentName" }
+ */
+export const VIEW_TYPE_MAP = {
+  // ==========================================================================
+  // REACT NATIVE CORE - Views
+  // ==========================================================================
+  RCTView: "View",
+  RCTSafeAreaView: "SafeAreaView",
+  RCTModalHostView: "Modal",
+  // ==========================================================================
+  // REACT NATIVE CORE - Text
+  // ==========================================================================
+  RCTText: "Text",
+  RCTRawText: "RawText",
+  RCTVirtualText: "VirtualText",
+  RCTTextInlineImage: "TextInlineImage",
+  // ==========================================================================
+  // REACT NATIVE CORE - Images
+  // ==========================================================================
+  RCTImageView: "Image",
+  RCTImage: "Image",
+  // ==========================================================================
+  // REACT NATIVE CORE - ScrollView
+  // ==========================================================================
+  RCTScrollView: "ScrollView",
+  RCTScrollContentView: "ScrollContentView",
+  AndroidHorizontalScrollView: "HorizontalScrollView",
+  AndroidHorizontalScrollContentView: "HorizontalScrollContentView",
+  // ==========================================================================
+  // REACT NATIVE CORE - TextInput
+  // ==========================================================================
+  RCTSinglelineTextInputView: "TextInput",
+  RCTMultilineTextInputView: "TextInput (Multiline)",
+  AndroidTextInput: "TextInput",
+  RCTInputAccessoryView: "InputAccessoryView",
+  // ==========================================================================
+  // REACT NATIVE CORE - Lists (FlatList/SectionList internals)
+  // ==========================================================================
+  RCTRefreshControl: "RefreshControl",
+  AndroidSwipeRefreshLayout: "RefreshControl",
+  PullToRefreshView: "RefreshControl",
+  // ==========================================================================
+  // REACT NATIVE CORE - Buttons & Touchables
+  // ==========================================================================
+  RCTSwitch: "Switch",
+  AndroidSwitch: "Switch",
+  RCTSlider: "Slider",
+  // ==========================================================================
+  // REACT NATIVE CORE - Activity Indicators
+  // ==========================================================================
+  RCTActivityIndicatorView: "ActivityIndicator",
+  AndroidProgressBar: "ActivityIndicator",
+  // ==========================================================================
+  // REACT NATIVE CORE - Android-specific
+  // ==========================================================================
+  AndroidDrawerLayout: "DrawerLayout",
+  VirtualView: "VirtualView",
+  VirtualViewExperimental: "VirtualView",
+  // ==========================================================================
+  // REACT NATIVE CORE - Debugging & Internal
+  // ==========================================================================
+  DebuggingOverlay: "DebuggingOverlay",
+  LayoutConformance: "LayoutConformance",
+  UnimplementedNativeView: "UnimplementedView",
+  // ==========================================================================
+  // REACT NATIVE CORE - Legacy/Deprecated
+  // ==========================================================================
+  RKShimmeringView: "ShimmeringView",
+  RCTTemplateView: "TemplateView",
+  RCTAxialGradientView: "AxialGradientView",
+  // "RCTVideo": "Video",
+  RCTMap: "Map",
+  RCTWebView: "WebView",
+  RCTKeyframes: "Keyframes",
+  RCTImpressionTrackingView: "ImpressionTrackingView",
+  // ==========================================================================
+  // REACT-NATIVE-SVG
+  // ==========================================================================
+  RNSVGSvgView: "Svg",
+  RNSVGGroup: "G",
+  RNSVGPath: "Path",
+  RNSVGText: "SvgText",
+  RNSVGTSpan: "TSpan",
+  RNSVGTextPath: "TextPath",
+  RNSVGImage: "SvgImage",
+  RNSVGCircle: "Circle",
+  RNSVGEllipse: "Ellipse",
+  RNSVGLine: "Line",
+  RNSVGRect: "Rect",
+  RNSVGClipPath: "ClipPath",
+  RNSVGDefs: "Defs",
+  RNSVGUse: "Use",
+  RNSVGSymbol: "Symbol",
+  RNSVGPattern: "Pattern",
+  RNSVGMask: "Mask",
+  RNSVGForeignObject: "ForeignObject",
+  RNSVGMarker: "Marker",
+  RNSVGLinearGradient: "LinearGradient",
+  RNSVGRadialGradient: "RadialGradient",
+  RNSVGFilter: "Filter",
+  RNSVGFeBlend: "FeBlend",
+  RNSVGFeColorMatrix: "FeColorMatrix",
+  RNSVGFeComposite: "FeComposite",
+  RNSVGFeFlood: "FeFlood",
+  RNSVGFeGaussianBlur: "FeGaussianBlur",
+  RNSVGFeMerge: "FeMerge",
+  RNSVGFeOffset: "FeOffset",
+  RNSVGPolygon: "Polygon",
+  RNSVGPolyline: "Polyline",
+  RNSVGStop: "Stop",
+  // ==========================================================================
+  // REACT-NATIVE-GESTURE-HANDLER
+  // ==========================================================================
+  RNGestureHandlerRootView: "GestureHandlerRootView",
+  RNGestureHandlerButton: "GestureHandlerButton",
+  // ==========================================================================
+  // REACT-NATIVE-SAFE-AREA-CONTEXT
+  // ==========================================================================
+  RNCSafeAreaProvider: "SafeAreaProvider",
+  RNCSafeAreaView: "SafeAreaView",
+  // ==========================================================================
+  // REACT-NATIVE-SCREENS (React Navigation)
+  // ==========================================================================
+  RNSScreen: "Screen",
+  RNSScreenContainer: "ScreenContainer",
+  RNSScreenStack: "ScreenStack",
+  RNSScreenStackHeaderConfig: "ScreenStackHeaderConfig",
+  RNSScreenStackHeaderSubview: "ScreenStackHeaderSubview",
+  RNSSearchBar: "SearchBar",
+  RNSFullWindowOverlay: "FullWindowOverlay",
+  RNSModalScreen: "ModalScreen",
+  // ==========================================================================
+  // REACT-NATIVE-REANIMATED
+  // ==========================================================================
+  ReanimatedView: "Animated.View",
+  // ==========================================================================
+  // EXPO MODULES
+  // ==========================================================================
+  ExpoView: "ExpoView",
+  ExpoBlurView: "BlurView",
+  ExpoLinearGradient: "LinearGradient",
+  ExpoImage: "ExpoImage",
+  ExpoVideoView: "VideoView",
+  ExpoCamera: "Camera",
+  ExpoBarCodeScannerView: "BarCodeScanner",
+  // ==========================================================================
+  // REACT-NATIVE-WEBVIEW
+  // ==========================================================================
+  RNCWebView: "WebView",
+  // ==========================================================================
+  // REACT-NATIVE-MAPS
+  // ==========================================================================
+  AIRMap: "MapView",
+  AIRMapMarker: "Marker",
+  AIRMapPolyline: "Polyline",
+  AIRMapPolygon: "Polygon",
+  AIRMapCircle: "Circle",
+  AIRMapCallout: "Callout",
+  // ==========================================================================
+  // REACT-NATIVE-VIDEO
+  // ==========================================================================
+  RCTVideo: "Video",
+  // ==========================================================================
+  // LOTTIE-REACT-NATIVE
+  // ==========================================================================
+  LottieAnimationView: "LottieView",
+  // ==========================================================================
+  // REACT-NATIVE-FAST-IMAGE
+  // ==========================================================================
+  FastImageView: "FastImage"
+};
+
+/**
+ * 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 function getComponentDisplayName(viewType) {
+  return VIEW_TYPE_MAP[viewType] || viewType;
+}
+
+/**
+ * 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 function getNativeViewType(componentName) {
+  for (const [native, display] of Object.entries(VIEW_TYPE_MAP)) {
+    if (display === componentName) {
+      return native;
+    }
+  }
+  return 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 function isKnownViewType(viewType) {
+  return viewType in VIEW_TYPE_MAP;
+}
+
+/**
+ * Get all known view types (useful for autocomplete/suggestions).
+ *
+ * @returns Array of all native view class names
+ */
+export function getAllNativeViewTypes() {
+  return Object.keys(VIEW_TYPE_MAP);
+}
+
+/**
+ * Get all known component names (useful for autocomplete/suggestions).
+ *
+ * @returns Array of all component display names
+ */
+export function getAllComponentNames() {
+  return [...new Set(Object.values(VIEW_TYPE_MAP))];
+}
+export default {
+  VIEW_TYPE_MAP,
+  getComponentDisplayName,
+  getNativeViewType,
+  isKnownViewType,
+  getAllNativeViewTypes,
+  getAllComponentNames
+};

package/lib/module/highlight-updates/utils/copySettingsStorage.js

@@ -1 +1,43 @@
-"use strict";import{persistentStorage,devToolsStorageKeys}from"@buoy-gg/shared-ui";import{DEFAULT_COPY_SETTINGS}from"../types/copySettings";export async function saveCopySettings(t){try{const e=devToolsStorageKeys.highlightUpdates.copySettings();await persistentStorage.setItem(e,JSON.stringify(t))}catch{}}export async function loadCopySettings(){try{const t=devToolsStorageKeys.highlightUpdates.copySettings(),e=await persistentStorage.getItem(t);if(e&&""!==e){const t=JSON.parse(e);return{...DEFAULT_COPY_SETTINGS,...t,filterCauses:t.filterCauses??DEFAULT_COPY_SETTINGS.filterCauses}}return null}catch{return null}}export async function clearCopySettings(){try{const t=devToolsStorageKeys.highlightUpdates.copySettings();await persistentStorage.removeItem(t)}catch{}}
+"use strict";
+
+/**
+ * Copy Settings Storage
+ *
+ * Persists the highlight-updates copy/export settings.
+ */
+
+import { persistentStorage, devToolsStorageKeys } from "@buoy-gg/shared-ui";
+import { DEFAULT_COPY_SETTINGS } from "../types/copySettings";
+export async function saveCopySettings(settings) {
+  try {
+    const key = devToolsStorageKeys.highlightUpdates.copySettings();
+    await persistentStorage.setItem(key, JSON.stringify(settings));
+  } catch {
+    // Silently fail — persistence is optional
+  }
+}
+export async function loadCopySettings() {
+  try {
+    const key = devToolsStorageKeys.highlightUpdates.copySettings();
+    const value = await persistentStorage.getItem(key);
+    if (value && value !== "") {
+      const parsed = JSON.parse(value);
+      return {
+        ...DEFAULT_COPY_SETTINGS,
+        ...parsed,
+        filterCauses: parsed.filterCauses ?? DEFAULT_COPY_SETTINGS.filterCauses
+      };
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+export async function clearCopySettings() {
+  try {
+    const key = devToolsStorageKeys.highlightUpdates.copySettings();
+    await persistentStorage.removeItem(key);
+  } catch {
+    // Silently fail
+  }
+}

package/lib/module/highlight-updates/utils/renderExportFormatter.js

@@ -1 +1,54 @@
-"use strict";export function generateRendersJson(e){const n={exportedAt:(new Date).toISOString(),totalComponents:e.length,totalRenders:e.reduce((e,n)=>e+n.renderCount,0),components:e.map(e=>({componentName:e.componentName||e.displayName,viewType:e.viewType,nativeTag:e.nativeTag,testID:e.testID,nativeID:e.nativeID,accessibilityLabel:e.accessibilityLabel,renderCount:e.renderCount,firstRenderTime:e.firstRenderTime,lastRenderTime:e.lastRenderTime,lastRenderCause:e.lastRenderCause?{type:e.lastRenderCause.type,componentCause:e.lastRenderCause.componentCause,changedKeys:e.lastRenderCause.changedKeys,hookChanges:e.lastRenderCause.hookChanges?.map(e=>({type:e.type,index:e.index,description:e.description}))}:null,renderHistory:e.renderHistory?.map(e=>({renderNumber:e.renderNumber,timestamp:e.timestamp,cause:{type:e.cause.type,componentCause:e.cause.componentCause,changedKeys:e.cause.changedKeys}}))}))};return JSON.stringify(n,null,2)}
+"use strict";
+
+/**
+ * Render Export Formatter
+ *
+ * Simple JSON export for render tracking data.
+ */
+
+/**
+ * Generate JSON export of all tracked renders
+ */
+export function generateRendersJson(renders) {
+  const exportData = {
+    exportedAt: new Date().toISOString(),
+    totalComponents: renders.length,
+    totalRenders: renders.reduce((sum, r) => sum + r.renderCount, 0),
+    components: renders.map(render => ({
+      // Identity
+      componentName: render.componentName || render.displayName,
+      viewType: render.viewType,
+      nativeTag: render.nativeTag,
+      // Identifiers
+      testID: render.testID,
+      nativeID: render.nativeID,
+      accessibilityLabel: render.accessibilityLabel,
+      // Render stats
+      renderCount: render.renderCount,
+      firstRenderTime: render.firstRenderTime,
+      lastRenderTime: render.lastRenderTime,
+      // Last render cause
+      lastRenderCause: render.lastRenderCause ? {
+        type: render.lastRenderCause.type,
+        componentCause: render.lastRenderCause.componentCause,
+        changedKeys: render.lastRenderCause.changedKeys,
+        hookChanges: render.lastRenderCause.hookChanges?.map(h => ({
+          type: h.type,
+          index: h.index,
+          description: h.description
+        }))
+      } : null,
+      // Render history (if available)
+      renderHistory: render.renderHistory?.map(event => ({
+        renderNumber: event.renderNumber,
+        timestamp: event.timestamp,
+        cause: {
+          type: event.cause.type,
+          componentCause: event.cause.componentCause,
+          changedKeys: event.cause.changedKeys
+        }
+      }))
+    }))
+  };
+  return JSON.stringify(exportData, null, 2);
+}