@salve-software/mako-react-native 1.0.1

package/src/library/component-handler/component-handler.ts

@@ -0,0 +1,162 @@
+/**
+ * Component Handler
+ * Manages component render tracking and event creation
+ */
+
+import type { ComponentRenderEvent, ComponentTreeEvent, ComponentTreeNode, MemoType } from '@salve-software/mako-types';
+import type { ComponentHandlerConfig, ComponentRegistryEntry } from './types';
+import type { ComponentRenderInfo, ComponentRenderCallbacks } from '../interceptors/react-devtools';
+import { projectHandler } from '../project';
+import { deviceHandler } from '../device';
+
+export class ComponentHandler {
+  private registry = new Map<string, ComponentRegistryEntry>();
+  private config: ComponentHandlerConfig;
+  private treeSnapshotInterval: ReturnType<typeof setInterval> | null = null;
+
+  constructor(config: ComponentHandlerConfig) {
+    this.config = config;
+  }
+
+  getCallbacks(): ComponentRenderCallbacks {
+    return {
+      onComponentRender: this.handleComponentRender.bind(this),
+    };
+  }
+
+  private handleComponentRender(info: ComponentRenderInfo): void {
+    const { componentId, componentName, renderDuration, parentId, propsChanged, stateChanged, contextChanged, isMemoized, memoType } = info;
+
+    // Get or create registry entry
+    let entry = this.registry.get(componentId);
+    if (!entry) {
+      entry = {
+        id: componentId,
+        name: componentName,
+        renderCount: 0,
+        lastRenderTime: 0,
+        lastRenderTimestamp: 0,
+        totalRenderTime: 0,
+        parentId,
+        propsChangeCount: 0,
+        stateChangeCount: 0,
+        contextChangeCount: 0,
+        isMemoized,
+        memoType,
+      };
+      this.registry.set(componentId, entry);
+    }
+
+    // Update metrics
+    entry.renderCount++;
+    entry.lastRenderTime = renderDuration;
+    entry.lastRenderTimestamp = Date.now();
+    entry.totalRenderTime += renderDuration;
+
+    if (propsChanged) entry.propsChangeCount++;
+    if (stateChanged) entry.stateChangeCount++;
+    if (contextChanged) entry.contextChangeCount++;
+
+    // Send render event
+    const event: ComponentRenderEvent = {
+      type: 'component_render',
+      componentId,
+      componentName,
+      renderCount: entry.renderCount,
+      renderDuration,
+      timestamp: entry.lastRenderTimestamp,
+      parentId,
+      propsChanged,
+      stateChanged,
+      contextChanged,
+      isMemoized,
+      memoType: memoType as MemoType,
+      deviceId: deviceHandler.getDeviceInfo().deviceId,
+      projectId: projectHandler.getProjectId(),
+    };
+
+    this.config.onEvent(event);
+  }
+
+  startTreeSnapshots(intervalMs: number = 5000): void {
+    if (this.treeSnapshotInterval) {
+      console.warn('[Mako] Component tree snapshots already running');
+      return;
+    }
+
+    this.treeSnapshotInterval = setInterval(() => {
+      this.sendTreeSnapshot();
+    }, intervalMs);
+
+    // Send initial snapshot
+    this.sendTreeSnapshot();
+  }
+
+  stopTreeSnapshots(): void {
+    if (this.treeSnapshotInterval) {
+      clearInterval(this.treeSnapshotInterval);
+      this.treeSnapshotInterval = null;
+    }
+  }
+
+  private sendTreeSnapshot(): void {
+    const tree: ComponentTreeNode[] = [];
+    const depthMap = new Map<string, number>();
+
+    // Calculate depth for each component
+    for (const entry of this.registry.values()) {
+      const depth = this.calculateDepth(entry.id, depthMap);
+      depthMap.set(entry.id, depth);
+    }
+
+    // Build tree nodes
+    for (const entry of this.registry.values()) {
+      const children = this.getChildrenIds(entry.id);
+      const depth = depthMap.get(entry.id) ?? 0;
+
+      tree.push({
+        id: entry.id,
+        name: entry.name,
+        parentId: entry.parentId,
+        children,
+        depth,
+      });
+    }
+
+    const event: ComponentTreeEvent = {
+      type: 'component_tree',
+      tree,
+      timestamp: Date.now(),
+      deviceId: deviceHandler.getDeviceInfo().deviceId,
+      projectId: projectHandler.getProjectId(),
+    };
+
+    this.config.onEvent(event);
+  }
+
+  private calculateDepth(componentId: string, depthMap: Map<string, number>): number {
+    const cached = depthMap.get(componentId);
+    if (cached !== undefined) return cached;
+
+    const entry = this.registry.get(componentId);
+    if (!entry || !entry.parentId) return 0;
+
+    const parentDepth = this.calculateDepth(entry.parentId, depthMap);
+    return parentDepth + 1;
+  }
+
+  private getChildrenIds(parentId: string): string[] {
+    const children: string[] = [];
+    for (const entry of this.registry.values()) {
+      if (entry.parentId === parentId) {
+        children.push(entry.id);
+      }
+    }
+    return children;
+  }
+
+  clear(): void {
+    this.registry.clear();
+    this.stopTreeSnapshots();
+  }
+}

package/src/library/component-handler/index.ts

@@ -0,0 +1,3 @@
+export * from './component-handler';
+export * from './types';
+export * from './utils';

package/src/library/component-handler/types.ts

@@ -0,0 +1,24 @@
+/**
+ * Component Handler Types
+ */
+
+import type { ComponentRenderEvent, ComponentTreeEvent } from '@salve-software/mako-types';
+
+export interface ComponentHandlerConfig {
+  onEvent: (event: ComponentRenderEvent | ComponentTreeEvent) => void;
+}
+
+export interface ComponentRegistryEntry {
+  id: string;
+  name: string;
+  renderCount: number;
+  lastRenderTime: number;
+  lastRenderTimestamp: number;
+  totalRenderTime: number;
+  parentId: string | null;
+  propsChangeCount: number;
+  stateChangeCount: number;
+  contextChangeCount: number;
+  isMemoized: boolean;
+  memoType: string;
+}

package/src/library/component-handler/utils/index.ts

@@ -0,0 +1,23 @@
+/**
+ * Component Handler Utilities
+ */
+
+import type { MemoType } from '@salve-software/mako-types';
+
+/**
+ * Generate a unique component instance ID
+ */
+export function generateComponentId(): string {
+  return `comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+
+/**
+ * Detect memoization type from component info
+ */
+export function detectMemoType(
+  isMemoized: boolean,
+  memoType: MemoType
+): MemoType {
+  if (!isMemoized) return 'none';
+  return memoType;
+}

package/src/library/device/__tests__/device-handler.test.ts

@@ -0,0 +1,86 @@
+jest.mock('react-native', () => ({
+  Platform: {
+    OS: 'ios',
+  },
+}));
+
+import { Platform } from 'react-native';
+
+import { DeviceHandler } from '../device-handler';
+
+import { NitroMako } from '../../../index';
+
+import { generateUUID } from '../utils/generate-uuid';
+
+jest.mock('../../../index', () => ({
+  NitroMako: {
+    getDeviceInfo: jest.fn(),
+    getStoredDeviceId: jest.fn(),
+    storeDeviceId: jest.fn(),
+  },
+}));
+
+jest.mock('../utils/generate-uuid', () => ({
+  generateUUID: jest.fn(),
+}));
+
+describe('DeviceHandler', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    (
+      generateUUID as jest.Mock
+    ).mockReturnValue('generated-uuid');
+  });
+
+  it('should fallback to iOS device name', () => {
+    Platform.OS = 'ios';
+
+    (
+      NitroMako.getDeviceInfo as jest.Mock
+    ).mockReturnValue({});
+
+    const handler = new DeviceHandler();
+
+    expect(
+      handler.getDeviceName(),
+    ).toBe('iOS Device');
+  });
+
+  it('should fallback to Android device name', () => {
+    Platform.OS = 'android';
+
+    (
+      NitroMako.getDeviceInfo as jest.Mock
+    ).mockReturnValue({});
+
+    const handler = new DeviceHandler();
+
+    expect(
+      handler.getDeviceName(),
+    ).toBe('Android Device');
+  });
+
+  it('should return platform in device info', () => {
+    Platform.OS = 'android';
+
+    (
+      NitroMako.getDeviceInfo as jest.Mock
+    ).mockReturnValue({
+      deviceId: 'id',
+      deviceName: 'Pixel',
+      appName: 'App',
+      bundleId: 'com.test',
+    });
+
+    const handler = new DeviceHandler();
+
+    expect(handler.getDeviceInfo()).toEqual({
+      deviceId: 'id',
+      deviceName: 'Pixel',
+      platform: 'android',
+      appName: 'App',
+      bundleId: 'com.test',
+    });
+  });
+});

package/src/library/device/device-handler.ts

@@ -0,0 +1,85 @@
+import { Platform } from 'react-native'
+import { NitroMako } from '../../index'
+import { generateUUID } from './utils/generate-uuid'
+import type { DeviceInfoData } from './types'
+
+export class DeviceHandler {
+  private cachedDeviceId: string | null = null
+  private cachedDeviceName: string | null = null
+
+  private getOrCreateDeviceId(): string {
+    if (this.cachedDeviceId) {
+      return this.cachedDeviceId
+    }
+
+    try {
+      const nativeInfo = NitroMako.getDeviceInfo()
+      if (nativeInfo.deviceId) {
+        this.cachedDeviceId = nativeInfo.deviceId
+        return nativeInfo.deviceId
+      }
+
+      const storedId = NitroMako.getStoredDeviceId()
+      if (storedId) {
+        this.cachedDeviceId = storedId
+        return storedId
+      }
+
+      const newId = generateUUID()
+      NitroMako.storeDeviceId(newId)
+      this.cachedDeviceId = newId
+      return newId
+    } catch (err) {
+      this.cachedDeviceId = generateUUID()
+      return this.cachedDeviceId
+    }
+  }
+
+  getDeviceName(): string {
+    if (this.cachedDeviceName) {
+      return this.cachedDeviceName
+    }
+
+    const nativeInfo = NitroMako.getDeviceInfo()
+    if (nativeInfo.deviceName) {
+      this.cachedDeviceName = nativeInfo.deviceName
+      return nativeInfo.deviceName
+    }
+
+    const model = Platform.OS === 'ios' ? 'iOS Device' : 'Android Device'
+    this.cachedDeviceName = model
+    return model
+  }
+
+  getAppName(): string {
+    try {
+      const nativeInfo = NitroMako.getDeviceInfo()
+      return nativeInfo.appName || 'React Native App'
+    } catch {
+      return 'React Native App'
+    }
+  }
+
+  getBundleId(): string {
+    try {
+      const nativeInfo = NitroMako.getDeviceInfo()
+      return nativeInfo.bundleId || ''
+    } catch {
+      return ''
+    }
+  }
+
+  getDeviceInfo(): DeviceInfoData {
+    const deviceId = this.getOrCreateDeviceId()
+    const deviceName = this.getDeviceName()
+    const appName = this.getAppName()
+
+    return {
+      deviceId,
+      deviceName,
+      platform: Platform.OS as 'ios' | 'android',
+      appName,
+      bundleId: this.getBundleId(),
+    }
+  }
+}

package/src/library/device/index.ts

@@ -0,0 +1,3 @@
+import { DeviceHandler } from './device-handler'
+
+export const deviceHandler = new DeviceHandler()

package/src/library/device/types.ts

@@ -0,0 +1,7 @@
+export interface DeviceInfoData {
+  deviceId: string;
+  deviceName: string;
+  platform: 'ios' | 'android';
+  appName: string;
+  bundleId: string;
+}

package/src/library/device/utils/generate-uuid.ts

@@ -0,0 +1,7 @@
+export function generateUUID(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}

package/src/library/index.ts

@@ -0,0 +1,183 @@
+/**
+ * Mako SDK for React Native
+ *
+ * Captures network requests and sends them to the Mako macOS app
+ * for debugging and inspection.
+ *
+ * @example
+ * ```typescript
+ * import { Mako } from 'mako-react-native';
+ *
+ * if (__DEV__) {
+ *   Mako.connect({
+ *     host: 'localhost',
+ *     port: 8765,
+ *   });
+ * }
+ * ```
+ */
+
+import { client } from './client'
+import type { MakoConfig } from './types'
+
+/**
+ * Mako SDK main interface
+ */
+export default {
+  /**
+   * Connect to Mako macOS app
+   *
+   * @param config - Configuration options
+   * @example
+   * ```typescript
+   * Mako.connect({
+   *   host: '192.168.1.100', // Mac IP address
+   *   port: 8765,
+   *   enableNetworkCapture: true,
+   *   ignoredUrls: [/my-internal-api/],
+   *   onConnect: () => console.log('Connected to Mako'),
+   *   onDisconnect: () => console.log('Disconnected from Mako'),
+   * });
+   * ```
+   */
+  connect(config?: MakoConfig): void {
+    client.connect(config)
+  },
+
+  /**
+   * Disconnect from Mako macOS app
+   */
+  disconnect(): void {
+    client.disconnect()
+  },
+
+  /**
+   * Check if currently connected to Mako
+   */
+  isConnected(): boolean {
+    return client.isConnected()
+  },
+
+  /**
+   * Send a log message (info level)
+   * @param message - The log message
+   * @param metadata - Optional metadata object
+   */
+  log(message: string, metadata?: Record<string, unknown>): void {
+    client.sendLog('info', message, metadata)
+  },
+
+  /**
+   * Send a debug log message
+   * @param message - The log message
+   * @param metadata - Optional metadata object
+   */
+  debug(message: string, metadata?: Record<string, unknown>): void {
+    client.sendLog('debug', message, metadata)
+  },
+
+  /**
+   * Send an info log message
+   * @param message - The log message
+   * @param metadata - Optional metadata object
+   */
+  info(message: string, metadata?: Record<string, unknown>): void {
+    client.sendLog('info', message, metadata)
+  },
+
+  /**
+   * Send a warning log message
+   * @param message - The log message
+   * @param metadata - Optional metadata object
+   */
+  warn(message: string, metadata?: Record<string, unknown>): void {
+    client.sendLog('warn', message, metadata)
+  },
+
+  /**
+   * Send an error log message
+   * @param message - The log message
+   * @param metadata - Optional metadata object
+   */
+  error(message: string, metadata?: Record<string, unknown>): void {
+    client.sendLog('error', message, metadata)
+  },
+
+  /**
+   * Stop capturing native platform logs (NSLog/print on iOS, Logcat on Android)
+   * Native log capture starts automatically on connect()
+   */
+  stopNativeLogCapture(): void {
+    client.stopNativeLogCapture()
+  },
+
+  /**
+   * Check if native log capture is currently active
+   * @returns true if native log capture is enabled
+   */
+  isNativeLogCaptureEnabled(): boolean {
+    return client.isNativeLogCaptureEnabled()
+  },
+
+  /**
+   * Start component inspector to track React component renders
+   * @returns true if successfully enabled
+   */
+  startComponentInspector(): boolean {
+    return client.startComponentInspector()
+  },
+
+  /**
+   * Stop component inspector
+   */
+  stopComponentInspector(): void {
+    client.stopComponentInspector()
+  },
+
+  /**
+   * Check if component inspector is currently active
+   * @returns true if component inspector is enabled
+   */
+  isComponentInspectorEnabled(): boolean {
+    return client.isComponentInspectorEnabled()
+  },
+
+  /**
+   * Start performance monitoring to track FPS, memory, and CPU
+   * @returns true if successfully enabled
+   */
+  startPerformanceMonitoring(): boolean {
+    return client.startPerformanceMonitoring()
+  },
+
+  /**
+   * Stop performance monitoring
+   */
+  stopPerformanceMonitoring(): void {
+    client.stopPerformanceMonitoring()
+  },
+
+  /**
+   * Check if performance monitoring is currently active
+   * @returns true if performance monitoring is enabled
+   */
+  isPerformanceMonitoringEnabled(): boolean {
+    return client.isPerformanceMonitoringEnabled()
+  },
+}
+
+// Export types for consumers
+export type {
+  MakoConfig,
+  NetworkRequestEvent,
+  NetworkResponseEvent,
+  NetworkEvent,
+  LogEvent,
+  NativeLogEvent,
+  LogLevel,
+  LogSource,
+  NativeLogSource,
+  ComponentRenderEvent,
+  ComponentTreeEvent,
+  PerformanceMetricsEvent,
+} from './types'