@salve-software/mako-react-native 1.0.1

package/src/library/network-handler/utils/__tests__/response-to-string.test.ts

@@ -0,0 +1,85 @@
+import { responseToString } from '../response-to-string'
+
+describe('responseToString', () => {
+  it('should return xhr.responseText when available', () => {
+    const xhr = {
+      responseText: 'xhr response',
+    } as XMLHttpRequest
+
+    const result = responseToString('fallback', xhr)
+
+    expect(result).toBe('xhr response')
+  })
+
+  it('should fallback to response string when responseText is empty', () => {
+    const xhr = {
+      responseText: '',
+    } as XMLHttpRequest
+
+    const result = responseToString('response body', xhr)
+
+    expect(result).toBe('response body')
+  })
+
+  it('should stringify object responses', () => {
+    const xhr = {
+      responseText: '',
+    } as XMLHttpRequest
+
+    const response = {
+      name: 'Gabriel',
+      age: 25,
+    }
+
+    const result = responseToString(response, xhr)
+
+    expect(result).toBe(JSON.stringify(response, null, 2))
+  })
+
+  it('should return String(response) when JSON.stringify throws', () => {
+    const xhr = {
+      responseText: '',
+    } as XMLHttpRequest
+
+    const circular: any = {}
+    circular.self = circular
+
+    const result = responseToString(circular, xhr)
+
+    expect(result).toBe('[object Object]')
+  })
+
+  it('should return undefined when response is null', () => {
+    const xhr = {
+      responseText: '',
+    } as XMLHttpRequest
+
+    const result = responseToString(null, xhr)
+
+    expect(result).toBeUndefined()
+  })
+
+  it('should return undefined when response is undefined', () => {
+    const xhr = {
+      responseText: '',
+    } as XMLHttpRequest
+
+    const result = responseToString(undefined, xhr)
+
+    expect(result).toBeUndefined()
+  })
+
+  it('should fallback when accessing responseText throws', () => {
+    const xhr = {} as XMLHttpRequest
+
+    Object.defineProperty(xhr, 'responseText', {
+      get() {
+        throw new Error('Invalid responseType')
+      },
+    })
+
+    const result = responseToString('fallback response', xhr)
+
+    expect(result).toBe('fallback response')
+  })
+})

package/src/library/network-handler/utils/__tests__/should-ignore-url.test.ts

@@ -0,0 +1,45 @@
+import { shouldIgnoreUrl } from '../should-ignore-url'
+
+describe('shouldIgnoreUrl', () => {
+  it('should return true when url matches a pattern', () => {
+    const patterns = [/google\.com/, /facebook\.com/]
+
+    const result = shouldIgnoreUrl('https://google.com/search', patterns)
+
+    expect(result).toBe(true)
+  })
+
+  it('should return false when url does not match any pattern', () => {
+    const patterns = [/google\.com/, /facebook\.com/]
+
+    const result = shouldIgnoreUrl('https://github.com', patterns)
+
+    expect(result).toBe(false)
+  })
+
+  it('should return false when patterns array is empty', () => {
+    const result = shouldIgnoreUrl('https://google.com', [])
+
+    expect(result).toBe(false)
+  })
+
+  it('should stop checking after first matching pattern', () => {
+    const firstPattern = {
+      test: jest.fn().mockReturnValue(true),
+    }
+
+    const secondPattern = {
+      test: jest.fn(),
+    }
+
+    const result = shouldIgnoreUrl('https://example.com', [
+      firstPattern as unknown as RegExp,
+      secondPattern as unknown as RegExp,
+    ])
+
+    expect(result).toBe(true)
+
+    expect(firstPattern.test).toHaveBeenCalled()
+    expect(secondPattern.test).not.toHaveBeenCalled()
+  })
+})

package/src/library/network-handler/utils/generate-request-id.ts

@@ -0,0 +1,6 @@
+/**
+ * Generate unique request ID for network tracking
+ */
+export function generateRequestId(): string {
+  return `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+}

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

@@ -0,0 +1,5 @@
+export { generateRequestId } from './generate-request-id';
+export { parseResponseHeaders } from './parse-response-headers';
+export { shouldIgnoreUrl } from './should-ignore-url';
+export { readBlobAsText } from './read-blob-as-text';
+export { responseToString } from './response-to-string';

package/src/library/network-handler/utils/parse-response-headers.ts

@@ -0,0 +1,20 @@
+/**
+ * Parse HTTP response headers string into object
+ */
+export function parseResponseHeaders(headersString: string): Record<string, string> {
+  const headers: Record<string, string> = {};
+  if (!headersString) return headers;
+
+  const lines = headersString.trim().split(/[\r\n]+/);
+  for (const line of lines) {
+    const colonIndex = line.indexOf(':');
+    if (colonIndex > 0) {
+      const key = line.substring(0, colonIndex).trim();
+      const value = line.substring(colonIndex + 1).trim();
+      if (key) {
+        headers[key] = value;
+      }
+    }
+  }
+  return headers;
+}

package/src/library/network-handler/utils/read-blob-as-text.ts

@@ -0,0 +1,11 @@
+/**
+ * Read Blob as text using FileReader
+ */
+export function readBlobAsText(blob: Blob): Promise<string | undefined> {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result as string);
+    reader.onerror = () => resolve(undefined);
+    reader.readAsText(blob);
+  });
+}

package/src/library/network-handler/utils/response-to-string.ts

@@ -0,0 +1,32 @@
+/**
+ * Convert response body to string
+ */
+export function responseToString(
+  response: unknown,
+  xhr: XMLHttpRequest
+): string | undefined {
+  // Try xhr.responseText first (most reliable)
+  try {
+    if (xhr.responseText) {
+      return xhr.responseText;
+    }
+  } catch {
+    // responseText may throw if responseType is not '' or 'text'
+  }
+
+  // Fallback: convert response parameter
+  if (response !== null && response !== undefined) {
+    if (typeof response === 'string') {
+      return response;
+    }
+    if (typeof response === 'object') {
+      try {
+        return JSON.stringify(response, null, 2);
+      } catch {
+        return String(response);
+      }
+    }
+  }
+
+  return undefined;
+}

package/src/library/network-handler/utils/should-ignore-url.ts

@@ -0,0 +1,6 @@
+/**
+ * Check if URL should be ignored based on patterns
+ */
+export function shouldIgnoreUrl(url: string, patterns: RegExp[]): boolean {
+  return patterns.some((pattern) => pattern.test(url));
+}

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

@@ -0,0 +1,2 @@
+export { PerformanceHandler } from './performance-handler'
+export type { PerformanceHandlerConfig, PerformanceMetricsEvent } from './types'

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

@@ -0,0 +1,104 @@
+/**
+ * Performance monitoring handler
+ * Tracks JS thread responsiveness and forwards native performance metrics
+ */
+
+import type { NitroMako as NitroMakoSpec } from '../../specs/mako.nitro'
+import type { PerformanceHandlerConfig, PerformanceMetricsEvent } from './types'
+
+export class PerformanceHandler {
+  private nitroMako: NitroMakoSpec
+  private onEvent: (event: PerformanceMetricsEvent) => void
+  private intervalMs: number
+  private isMonitoring = false
+  private jsFrameInterval: ReturnType<typeof setInterval> | null = null
+
+  constructor(config: PerformanceHandlerConfig) {
+    this.nitroMako = config.nitroMako
+    this.onEvent = config.onEvent
+    this.intervalMs = config.intervalMs ?? 1000
+  }
+
+  /**
+   * Start monitoring performance metrics
+   */
+  start(): boolean {
+    if (this.isMonitoring) {
+      console.warn('[Mako] Performance monitoring already enabled')
+      return false
+    }
+
+    try {
+      // Start native performance monitoring
+      const success = this.nitroMako.startPerformanceMonitoring((metrics) => {
+        this.handleMetrics(metrics)
+      }, this.intervalMs)
+
+      if (success) {
+        this.isMonitoring = true
+
+        // Start JS frame tracking - call recordJsFrame every 16ms (~60fps)
+        this.jsFrameInterval = setInterval(() => {
+          try {
+            this.nitroMako.recordJsFrame()
+          } catch (error) {
+            console.error('[Mako] Failed to record JS frame:', error)
+          }
+        }, 16)
+
+        console.log('[Mako] Performance monitoring enabled')
+      }
+      return success
+    } catch (error) {
+      console.error('[Mako] Failed to start performance monitoring:', error)
+      return false
+    }
+  }
+
+  /**
+   * Stop monitoring performance metrics
+   */
+  stop(): void {
+    if (!this.isMonitoring) return
+
+    try {
+      // Stop JS frame tracking
+      if (this.jsFrameInterval) {
+        clearInterval(this.jsFrameInterval)
+        this.jsFrameInterval = null
+      }
+
+      // Stop native monitoring
+      this.nitroMako.stopPerformanceMonitoring()
+      this.isMonitoring = false
+      console.log('[Mako] Performance monitoring disabled')
+    } catch (error) {
+      console.error('[Mako] Failed to stop performance monitoring:', error)
+    }
+  }
+
+  /**
+   * Check if performance monitoring is active
+   */
+  isActive(): boolean {
+    return this.isMonitoring
+  }
+
+  private handleMetrics(metrics: {
+    uiFps: number
+    jsFps: number
+    memoryUsageMB: number
+    cpuUsagePercent: number
+  }): void {
+    const event: PerformanceMetricsEvent = {
+      type: 'performance_metrics',
+      timestamp: Date.now(),
+      uiFps: metrics.uiFps,
+      jsFps: metrics.jsFps,
+      memoryUsage: metrics.memoryUsageMB,
+      cpuUsage: metrics.cpuUsagePercent,
+    }
+
+    this.onEvent(event)
+  }
+}

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

@@ -0,0 +1,22 @@
+/**
+ * Performance handler types
+ */
+
+import type { NitroMako as NitroMakoSpec } from '../../specs/mako.nitro'
+
+export interface PerformanceHandlerConfig {
+  nitroMako: NitroMakoSpec
+  onEvent: (event: PerformanceMetricsEvent) => void
+  intervalMs?: number
+}
+
+export interface PerformanceMetricsEvent {
+  type: 'performance_metrics'
+  timestamp: number
+  deviceId?: string
+  projectId?: string
+  uiFps: number
+  jsFps: number
+  memoryUsage: number
+  cpuUsage: number
+}

package/src/library/project/index.ts

@@ -0,0 +1,4 @@
+import { ProjectHandler } from './project-handler'
+
+export { ProjectHandler }
+export const projectHandler = new ProjectHandler()

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

@@ -0,0 +1,28 @@
+import { deviceHandler } from '../device'
+import type { ProjectInfoEvent } from '../types'
+
+export class ProjectHandler {
+  private cachedProjectId: string | null = null
+
+  getProjectId(): string {
+    if (this.cachedProjectId) {
+      return this.cachedProjectId
+    }
+    // Use bundleId as projectId - it's already unique per app
+    const bundleId = deviceHandler.getBundleId()
+    this.cachedProjectId = bundleId
+    return bundleId
+  }
+
+  getProjectInfo(): Omit<ProjectInfoEvent, 'type'> {
+    const projectId = this.getProjectId()
+    const appName = deviceHandler.getAppName()
+    const bundleId = deviceHandler.getBundleId()
+
+    return {
+      projectId,
+      appName,
+      bundleId,
+    }
+  }
+}

package/src/library/types.ts

@@ -0,0 +1,82 @@
+/**
+ * Mako SDK Types
+ */
+
+// Re-export shared event types from @mako/types
+export type {
+  LogLevel,
+  LogSource,
+  NativeLogSource,
+  LogEvent,
+  NativeLogEvent,
+  NetworkStage,
+  NetworkRequestEvent,
+  NetworkResponseEvent,
+  NetworkEvent,
+  DeviceInfoEvent,
+  ProjectInfoEvent,
+  ComponentRenderEvent,
+  ComponentTreeEvent,
+  PerformanceMetricsEvent,
+  EventType,
+  MakoEvent,
+} from '@salve-software/mako-types';
+
+// ============================================
+// SDK Configuration (SDK-specific)
+// ============================================
+
+export interface MakoConfig {
+  /** Host IP/hostname of the Mako macOS app (default: 'localhost') */
+  host?: string;
+  /** WebSocket port (default: 8765) */
+  port?: number;
+  /** Enable network request/response capture (default: true) */
+  enableNetworkCapture?: boolean;
+  /** Enable component inspector for React render tracking (default: false) */
+  enableComponentInspector?: boolean;
+  /** Enable performance monitoring for FPS, memory, and CPU tracking (default: false) */
+  enablePerformanceMonitoring?: boolean;
+  /** URL patterns to ignore (default includes Metro bundler URLs) */
+  ignoredUrls?: RegExp[];
+  /** Callback when connected to Mako */
+  onConnect?: () => void;
+  /** Callback when disconnected from Mako */
+  onDisconnect?: () => void;
+  /** Callback on connection error */
+  onError?: (error: Error) => void;
+}
+
+// ============================================
+// Internal Types (SDK-specific)
+// ============================================
+
+export interface PendingRequest {
+  id: string;
+  method: string;
+  url: string;
+  headers: Record<string, string>;
+  body?: string;
+  startTime: number;
+  responseHeaders?: Record<string, string>;
+}
+
+export interface NetworkCallbacks {
+  onOpen: (method: string, url: string, xhr: XMLHttpRequest) => void;
+  onSend: (data: unknown, xhr: XMLHttpRequest) => void;
+  onRequestHeader: (header: string, value: string, xhr: XMLHttpRequest) => void;
+  onHeaderReceived: (
+    responseContentType: string | undefined,
+    responseSize: number | undefined,
+    responseHeaders: string,
+    xhr: XMLHttpRequest
+  ) => void;
+  onResponse: (
+    status: number,
+    timeout: boolean,
+    response: unknown,
+    responseURL: string,
+    responseType: string,
+    xhr: XMLHttpRequest
+  ) => void;
+}

package/src/specs/mako.nitro.ts

@@ -0,0 +1,114 @@
+import type { HybridObject } from 'react-native-nitro-modules'
+
+/**
+ * Log level for native logs
+ * Note: Using 'verbose' instead of 'debug' to avoid conflict with iOS DEBUG preprocessor macro
+ */
+export type NativeLogLevel = 'verbose' | 'info' | 'warn' | 'error'
+
+/**
+ * Native log entry received from iOS/Android
+ */
+export interface NativeLogEntry {
+  level: NativeLogLevel
+  message: string
+  tag: string
+  timestamp: number
+}
+
+/**
+ * Callback type for receiving native logs
+ */
+export type NativeLogCallback = (log: NativeLogEntry) => void
+
+/**
+ * Device information result from native APIs
+ */
+export interface DeviceInfoResult {
+  deviceId: string
+  deviceName: string
+  appName: string
+  bundleId: string
+}
+
+/**
+ * Performance metrics snapshot from native APIs
+ */
+export interface PerformanceMetrics {
+  uiFps: number
+  jsFps: number
+  memoryUsageMB: number
+  cpuUsagePercent: number
+}
+
+/**
+ * Callback type for receiving performance metrics
+ */
+export type PerformanceMetricsCallback = (metrics: PerformanceMetrics) => void
+
+export interface NitroMako extends HybridObject<{ ios: 'swift', android: 'kotlin' }> {
+  sum(num1: number, num2: number): number
+
+  /**
+   * Start capturing native platform logs (NSLog/print on iOS, Logcat on Android)
+   * @param onLog Callback invoked for each captured log entry
+   * @returns true if capture started successfully
+   */
+  startLogCapture(onLog: NativeLogCallback): boolean
+
+  /**
+   * Stop capturing native platform logs
+   */
+  stopLogCapture(): void
+
+  /**
+   * Check if log capture is currently active
+   */
+  isCapturing(): boolean
+
+  /**
+   * Get device information using native APIs
+   * @returns Device info including deviceId, deviceName, appName, and bundleId
+   */
+  getDeviceInfo(): DeviceInfoResult
+
+  /**
+   * Get stored device ID from native storage (UserDefaults/SharedPreferences)
+   * @returns The stored device ID or undefined if not found
+   */
+  getStoredDeviceId(): string | undefined
+
+  /**
+   * Store device ID in native storage (UserDefaults/SharedPreferences)
+   * @param deviceId The device ID to store
+   */
+  storeDeviceId(deviceId: string): void
+
+  /**
+   * Start monitoring performance metrics (FPS, memory, CPU)
+   * @param onMetrics Callback invoked with performance snapshot
+   * @param intervalMs How often to report metrics (in milliseconds, default 1000)
+   * @returns true if monitoring started successfully
+   */
+  startPerformanceMonitoring(onMetrics: PerformanceMetricsCallback, intervalMs?: number): boolean
+
+  /**
+   * Stop monitoring performance metrics
+   */
+  stopPerformanceMonitoring(): void
+
+  /**
+   * Check if performance monitoring is currently active
+   */
+  isPerformanceMonitoring(): boolean
+
+  /**
+   * Get current performance metrics snapshot (without starting monitoring)
+   */
+  getPerformanceSnapshot(): PerformanceMetrics
+
+  /**
+   * Record a JS frame tick (called from JS to track JS thread responsiveness)
+   */
+  recordJsFrame(): void
+}