@salve-software/mako-react-native 1.0.1

package/src/library/interceptors/__tests__/xhr.test.ts

@@ -0,0 +1,313 @@
+import { XHRInterceptor } from '../xhr'
+
+describe('XHRInterceptor', () => {
+  let interceptor: XHRInterceptor
+
+  const originalXMLHttpRequest = global.XMLHttpRequest
+
+  const openMock = jest.fn()
+  const sendMock = jest.fn()
+  const setRequestHeaderMock = jest.fn()
+
+  class MockXMLHttpRequest {
+    static HEADERS_RECEIVED = 2
+    static DONE = 4
+
+    public readonly HEADERS_RECEIVED =
+      MockXMLHttpRequest.HEADERS_RECEIVED
+
+    public readonly DONE =
+      MockXMLHttpRequest.DONE
+
+    public readyState = 0
+    public status = 200
+    public timeout = 0
+    public response = '{"success":true}'
+    public responseURL = 'https://api.test.com'
+    public responseType = 'json'
+
+    private listeners: Record<string, Array<() => void>> = {}
+
+    open(method: string, url: string) {
+      openMock(method, url)
+    }
+
+    send(data?: unknown) {
+      sendMock(data)
+    }
+
+    setRequestHeader(header: string, value: string) {
+      setRequestHeaderMock(header, value)
+    }
+
+    addEventListener(event: string, callback: () => void) {
+      if (!this.listeners[event]) {
+        this.listeners[event] = []
+      }
+
+      this.listeners[event].push(callback)
+    }
+
+    emit(event: string) {
+      this.listeners[event]?.forEach(listener => listener())
+    }
+
+    getResponseHeader(name: string) {
+      if (name === 'Content-Type') {
+        return 'application/json; charset=utf-8'
+      }
+
+      if (name === 'Content-Length') {
+        return '128'
+      }
+
+      return null
+    }
+
+    getAllResponseHeaders() {
+      return 'Content-Type: application/json'
+    }
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+
+    jest.spyOn(console, 'log').mockImplementation(() => {})
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+
+    global.XMLHttpRequest = MockXMLHttpRequest as any
+
+    interceptor = XHRInterceptor.getInstance()
+
+    interceptor.disable()
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  afterAll(() => {
+    global.XMLHttpRequest = originalXMLHttpRequest
+  })
+
+  it('should enable interceptor', () => {
+    const result = interceptor.enable({
+      onOpen: jest.fn(),
+      onSend: jest.fn(),
+      onRequestHeader: jest.fn(),
+      onHeaderReceived: jest.fn(),
+      onResponse: jest.fn(),
+    })
+
+    expect(result).toBe(true)
+    expect(interceptor.isEnabled()).toBe(true)
+  })
+
+  it('should prevent double enable', () => {
+    interceptor.enable({
+      onOpen: jest.fn(),
+      onSend: jest.fn(),
+      onRequestHeader: jest.fn(),
+      onHeaderReceived: jest.fn(),
+      onResponse: jest.fn(),
+    })
+
+    const result = interceptor.enable({
+      onOpen: jest.fn(),
+      onSend: jest.fn(),
+      onRequestHeader: jest.fn(),
+      onHeaderReceived: jest.fn(),
+      onResponse: jest.fn(),
+    })
+
+    expect(result).toBe(false)
+
+    expect(console.warn).toHaveBeenCalledWith(
+      '[Mako] Network interceptor already enabled'
+    )
+  })
+
+  it('should intercept open calls', () => {
+    const onOpen = jest.fn()
+
+    interceptor.enable({
+      onOpen,
+      onSend: jest.fn(),
+      onRequestHeader: jest.fn(),
+      onHeaderReceived: jest.fn(),
+      onResponse: jest.fn(),
+    })
+
+    const xhr = new XMLHttpRequest()
+
+    xhr.open('GET', 'https://api.test.com')
+
+    expect(onOpen).toHaveBeenCalledTimes(1)
+
+    expect(onOpen).toHaveBeenCalledWith(
+      'GET',
+      'https://api.test.com',
+      xhr
+    )
+
+    expect(openMock).toHaveBeenCalledTimes(1)
+
+    expect(openMock).toHaveBeenCalledWith(
+      'GET',
+      'https://api.test.com'
+    )
+  })
+
+  it('should intercept request headers', () => {
+    const onRequestHeader = jest.fn()
+
+    interceptor.enable({
+      onOpen: jest.fn(),
+      onSend: jest.fn(),
+      onRequestHeader,
+      onHeaderReceived: jest.fn(),
+      onResponse: jest.fn(),
+    })
+
+    const xhr = new XMLHttpRequest()
+
+    xhr.setRequestHeader('Authorization', 'Bearer token')
+
+    expect(onRequestHeader).toHaveBeenCalledTimes(1)
+
+    expect(onRequestHeader).toHaveBeenCalledWith(
+      'Authorization',
+      'Bearer token',
+      xhr
+    )
+
+    expect(setRequestHeaderMock).toHaveBeenCalledTimes(1)
+
+    expect(setRequestHeaderMock).toHaveBeenCalledWith(
+      'Authorization',
+      'Bearer token'
+    )
+  })
+
+  it('should intercept send calls', () => {
+    const onSend = jest.fn()
+
+    interceptor.enable({
+      onOpen: jest.fn(),
+      onSend,
+      onRequestHeader: jest.fn(),
+      onHeaderReceived: jest.fn(),
+      onResponse: jest.fn(),
+    })
+
+    const xhr = new XMLHttpRequest()
+
+    xhr.send({ hello: true })
+
+    expect(onSend).toHaveBeenCalledTimes(1)
+
+    expect(onSend).toHaveBeenCalledWith(
+      { hello: true },
+      xhr
+    )
+
+    expect(sendMock).toHaveBeenCalledTimes(1)
+
+    expect(sendMock).toHaveBeenCalledWith({
+      hello: true,
+    })
+  })
+
+  it('should intercept HEADERS_RECEIVED state', () => {
+    const onHeaderReceived = jest.fn()
+
+    interceptor.enable({
+      onOpen: jest.fn(),
+      onSend: jest.fn(),
+      onRequestHeader: jest.fn(),
+      onHeaderReceived,
+      onResponse: jest.fn(),
+    })
+
+    const xhr = new XMLHttpRequest() as any
+
+    xhr.send()
+
+    xhr.readyState = xhr.HEADERS_RECEIVED
+
+    xhr.emit('readystatechange')
+
+    expect(onHeaderReceived).toHaveBeenCalledTimes(1)
+
+    expect(onHeaderReceived).toHaveBeenCalledWith(
+      'application/json',
+      128,
+      'Content-Type: application/json',
+      xhr
+    )
+  })
+
+  it('should intercept DONE state', () => {
+    const onResponse = jest.fn()
+
+    interceptor.enable({
+      onOpen: jest.fn(),
+      onSend: jest.fn(),
+      onRequestHeader: jest.fn(),
+      onHeaderReceived: jest.fn(),
+      onResponse,
+    })
+
+    const xhr = new XMLHttpRequest() as any
+
+    xhr.send()
+
+    xhr.readyState = xhr.DONE
+
+    xhr.emit('readystatechange')
+
+    expect(onResponse).toHaveBeenCalledTimes(1)
+
+    expect(onResponse).toHaveBeenCalledWith(
+      200,
+      false,
+      '{"success":true}',
+      'https://api.test.com',
+      'json',
+      xhr
+    )
+  })
+
+  it('should restore original methods on disable', () => {
+    const originalOpen = XMLHttpRequest.prototype.open
+    const originalSend = XMLHttpRequest.prototype.send
+    const originalSetRequestHeader =
+      XMLHttpRequest.prototype.setRequestHeader
+
+    interceptor.enable({
+      onOpen: jest.fn(),
+      onSend: jest.fn(),
+      onRequestHeader: jest.fn(),
+      onHeaderReceived: jest.fn(),
+      onResponse: jest.fn(),
+    })
+
+    expect(XMLHttpRequest.prototype.open).not.toBe(originalOpen)
+
+    expect(XMLHttpRequest.prototype.send).not.toBe(originalSend)
+
+    expect(XMLHttpRequest.prototype.setRequestHeader).not.toBe(
+      originalSetRequestHeader
+    )
+
+    interceptor.disable()
+
+    expect(XMLHttpRequest.prototype.open).toBe(originalOpen)
+
+    expect(XMLHttpRequest.prototype.send).toBe(originalSend)
+
+    expect(XMLHttpRequest.prototype.setRequestHeader).toBe(
+      originalSetRequestHeader
+    )
+  })
+})

package/src/library/interceptors/index.ts

@@ -0,0 +1,7 @@
+import { XHRInterceptor } from './xhr'
+import { ReactDevToolsInterceptor } from './react-devtools'
+import { JSConsoleInterceptor } from './js-console'
+
+export const xhrInterceptor = XHRInterceptor.getInstance()
+export const reactDevToolsInterceptor = ReactDevToolsInterceptor.getInstance()
+export const jsConsoleInterceptor = JSConsoleInterceptor.getInstance()

package/src/library/interceptors/js-console.ts

@@ -0,0 +1,93 @@
+import type { LogLevel } from '../types'
+
+export interface JSConsoleCallbacks {
+  onLog: (level: LogLevel, message: string, metadata?: Record<string, unknown>) => void
+}
+
+export class JSConsoleInterceptor {
+  private static instance: JSConsoleInterceptor | null = null
+
+  private enabled = false
+  private callbacks: JSConsoleCallbacks | null = null
+
+  private readonly originalLog = console.log
+  private readonly originalWarn = console.warn
+  private readonly originalError = console.error
+
+  public static getInstance(): JSConsoleInterceptor {
+    if (!JSConsoleInterceptor.instance) {
+      JSConsoleInterceptor.instance = new JSConsoleInterceptor()
+    }
+    return JSConsoleInterceptor.instance
+  }
+
+  public isEnabled(): boolean {
+    return this.enabled
+  }
+
+  public start(callbacks: JSConsoleCallbacks): boolean {
+    if (this.enabled) {
+      return false
+    }
+
+    this.callbacks = callbacks
+
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const self = this
+
+    console.log = function (...args: unknown[]) {
+      self.originalLog.apply(console, args)
+      try {
+        const first = args[0]
+        if (typeof first === 'string' && first.startsWith('[Mako]')) return
+        const message = String(args[0])
+        const metadata = args.length > 1 ? { args: args.slice(1) } : undefined
+        self.callbacks?.onLog('log', message, metadata)
+      } catch {
+        // swallow forwarding errors
+      }
+    }
+
+    console.warn = function (...args: unknown[]) {
+      self.originalWarn.apply(console, args)
+      try {
+        const first = args[0]
+        if (typeof first === 'string' && first.startsWith('[Mako]')) return
+        const message = String(args[0])
+        const metadata = args.length > 1 ? { args: args.slice(1) } : undefined
+        self.callbacks?.onLog('warn', message, metadata)
+      } catch {
+        // swallow forwarding errors
+      }
+    }
+
+    console.error = function (...args: unknown[]) {
+      self.originalError.apply(console, args)
+      try {
+        const first = args[0]
+        if (typeof first === 'string' && first.startsWith('[Mako]')) return
+        const message = String(args[0])
+        const metadata = args.length > 1 ? { args: args.slice(1) } : undefined
+        self.callbacks?.onLog('error', message, metadata)
+      } catch {
+        // swallow forwarding errors
+      }
+    }
+
+    this.enabled = true
+    return true
+  }
+
+  public stop(): void {
+    if (!this.enabled) {
+      return
+    }
+
+    console.log = this.originalLog
+    console.warn = this.originalWarn
+    console.error = this.originalError
+
+    this.callbacks = null
+    this.enabled = false
+  }
+}

package/src/library/interceptors/react-devtools.ts

@@ -0,0 +1,268 @@
+/**
+ * React DevTools Hook Interceptor
+ * Captures component render events by hooking into React's DevTools global hook
+ */
+
+// Fiber tags for composite components (those that execute render functions)
+const COMPONENT_TAGS = new Set([
+  0,  // FunctionComponent
+  1,  // ClassComponent
+  9,  // ContextConsumer
+  11, // ForwardRef
+  14, // MemoComponent
+  15, // SimpleMemoComponent
+]);
+
+const MEMO_TAGS = new Set([14, 15]); // MemoComponent, SimpleMemoComponent
+
+interface Fiber {
+  tag: number;
+  type: any;
+  elementType: any;
+  stateNode: any;
+  return: Fiber | null;
+  child: Fiber | null;
+  sibling: Fiber | null;
+  alternate: Fiber | null;
+  memoizedProps: any;
+  memoizedState: any;
+  updateQueue: any;
+  dependencies: any;
+  actualDuration?: number;
+  actualStartTime?: number;
+  ref?: any;
+}
+
+interface DevToolsHook {
+  supportsFiber: boolean;
+  inject: (renderer: any) => number;
+  onCommitFiberRoot?: (rendererID: number, root: any, priorityLevel?: any) => void;
+  onCommitFiberUnmount?: (rendererID: number, fiber: Fiber) => void;
+}
+
+export interface ComponentRenderInfo {
+  componentId: string;
+  componentName: string;
+  renderDuration: number;
+  parentId: string | null;
+  propsChanged: boolean;
+  stateChanged: boolean;
+  contextChanged: boolean;
+  isMemoized: boolean;
+  memoType: 'none' | 'React.memo' | 'useMemo' | 'useCallback' | 'PureComponent';
+}
+
+export interface ComponentRenderCallbacks {
+  onComponentRender: (info: ComponentRenderInfo) => void;
+}
+
+export class ReactDevToolsInterceptor {
+  private static instance: ReactDevToolsInterceptor | null = null;
+
+  private enabled = false;
+  private callbacks: ComponentRenderCallbacks | null = null;
+  private hook: DevToolsHook | null = null;
+  private originalOnCommitFiberRoot: DevToolsHook['onCommitFiberRoot'] | null = null;
+
+  // Fiber tracking
+  private fiberIdCounter = 0;
+  private fiberIdMap = new WeakMap<Fiber, string>();
+  private seenFiberIds = new Set<string>();
+  private currentCommitFibers = new WeakSet<Fiber>();
+
+  public static getInstance(): ReactDevToolsInterceptor {
+    if (!ReactDevToolsInterceptor.instance) {
+      ReactDevToolsInterceptor.instance = new ReactDevToolsInterceptor();
+    }
+    return ReactDevToolsInterceptor.instance;
+  }
+
+  public isEnabled(): boolean {
+    return this.enabled;
+  }
+
+  public enable(callbacks: ComponentRenderCallbacks): boolean {
+    if (this.enabled) {
+      console.warn('[Mako] Component inspector already enabled');
+      return false;
+    }
+
+    const hook = (global as any).__REACT_DEVTOOLS_GLOBAL_HOOK__ as DevToolsHook | undefined;
+    if (!hook?.supportsFiber) {
+      console.warn('[Mako] React DevTools hook not found or does not support Fiber');
+      return false;
+    }
+
+    this.hook = hook;
+    this.callbacks = callbacks;
+    this.originalOnCommitFiberRoot = hook.onCommitFiberRoot;
+
+    hook.onCommitFiberRoot = (rendererID, root, priorityLevel) => {
+      this.originalOnCommitFiberRoot?.(rendererID, root, priorityLevel);
+
+      if (this.enabled && root?.current) {
+        this.currentCommitFibers = new WeakSet();
+        this.traverseFiber(root.current);
+      }
+    };
+
+    this.enabled = true;
+    console.log('[Mako] Component inspector enabled (React DevTools hook)');
+    return true;
+  }
+
+  public disable(): void {
+    if (!this.enabled || !this.hook) return;
+
+    if (this.originalOnCommitFiberRoot) {
+      this.hook.onCommitFiberRoot = this.originalOnCommitFiberRoot;
+    }
+
+    this.callbacks = null;
+    this.enabled = false;
+    this.fiberIdMap = new WeakMap();
+    this.seenFiberIds = new Set();
+    console.log('[Mako] Component inspector disabled');
+  }
+
+  // --- Fiber Traversal ---
+
+  private traverseFiber(fiber: Fiber | null): void {
+    if (!fiber || !this.callbacks) return;
+
+    if (this.isComponentFiber(fiber) && this.didFiberRender(fiber)) {
+      const info = this.extractComponentInfo(fiber);
+      if (info) {
+        this.callbacks.onComponentRender(info);
+      }
+    }
+
+    this.traverseFiber(fiber.child);
+    this.traverseFiber(fiber.sibling);
+  }
+
+  private isComponentFiber(fiber: Fiber): boolean {
+    return COMPONENT_TAGS.has(fiber.tag);
+  }
+
+  // --- Render Detection ---
+
+  /**
+   * Checks if a fiber actually performed work during this render.
+   *
+   * Key insight: When React bails out on a component, it reuses the SAME
+   * memoizedProps reference. When a component re-renders, the parent creates
+   * NEW JSX which means a NEW props object.
+   *
+   * Additional fix: React sometimes reuses fiber objects across commits without
+   * proper alternate linking. We track seen fiber IDs to avoid counting these
+   * as false "first renders".
+   */
+  private didFiberRender(fiber: Fiber): boolean {
+    if (this.currentCommitFibers.has(fiber)) return false;
+    this.currentCommitFibers.add(fiber);
+
+    const fiberId = this.getFiberId(fiber);
+    const wasSeenBefore = this.seenFiberIds.has(fiberId);
+
+    // No alternate = potential first mount OR React quirk
+    if (!fiber.alternate) {
+      if (wasSeenBefore) return false; // Already seen = not real mount
+      this.seenFiberIds.add(fiberId);
+      return true;
+    }
+
+    // Re-render: check if props reference changed (composite components only check props)
+    const didRender = fiber.memoizedProps !== fiber.alternate.memoizedProps;
+    if (didRender) this.seenFiberIds.add(fiberId);
+    return didRender;
+  }
+
+  // --- Component Info Extraction ---
+
+  private extractComponentInfo(fiber: Fiber): ComponentRenderInfo | null {
+    const componentName = this.getComponentName(fiber);
+    if (!componentName || componentName === 'Anonymous') return null;
+
+    const alternate = fiber.alternate;
+
+    return {
+      componentId: this.getFiberId(fiber),
+      componentName,
+      renderDuration: fiber.actualDuration ?? 0,
+      parentId: this.getParentFiberId(fiber),
+      propsChanged: alternate ? fiber.memoizedProps !== alternate.memoizedProps : true,
+      stateChanged: alternate ? fiber.memoizedState !== alternate.memoizedState : true,
+      contextChanged: alternate ? fiber.dependencies !== alternate.dependencies : false,
+      ...this.detectMemoization(fiber),
+    };
+  }
+
+  private detectMemoization(fiber: Fiber): {
+    isMemoized: boolean;
+    memoType: 'none' | 'React.memo' | 'useMemo' | 'useCallback' | 'PureComponent';
+  } {
+    if (MEMO_TAGS.has(fiber.tag)) {
+      return { isMemoized: true, memoType: 'React.memo' };
+    }
+    if (fiber.tag === 1 && fiber.type?.prototype?.isPureReactComponent) {
+      return { isMemoized: true, memoType: 'PureComponent' };
+    }
+    return { isMemoized: false, memoType: 'none' };
+  }
+
+  // --- Fiber Identity ---
+
+  private getFiberId(fiber: Fiber): string {
+    let id = this.fiberIdMap.get(fiber);
+    if (id) return id;
+
+    // Reuse ID from alternate (same component across renders)
+    if (fiber.alternate) {
+      id = this.fiberIdMap.get(fiber.alternate);
+      if (id) {
+        this.fiberIdMap.set(fiber, id);
+        return id;
+      }
+    }
+
+    id = `fiber-${this.fiberIdCounter++}`;
+    this.fiberIdMap.set(fiber, id);
+    return id;
+  }
+
+  private getParentFiberId(fiber: Fiber): string | null {
+    let parent = fiber.return;
+
+    while (parent) {
+      if (this.isComponentFiber(parent)) {
+        const parentName = this.getComponentName(parent);
+        if (parentName && parentName !== 'Anonymous') {
+          return this.getFiberId(parent);
+        }
+      }
+      parent = parent.return;
+    }
+
+    return null;
+  }
+
+  private getComponentName(fiber: Fiber): string | null {
+    const type = fiber.type || fiber.elementType;
+
+    if (typeof type === 'string') return type;
+
+    if (typeof type === 'function') {
+      return type.displayName || type.name || 'Anonymous';
+    }
+
+    // Handle React.memo wrapped components
+    if (type?.$$typeof && type.type) {
+      return this.getComponentName({ ...fiber, type: type.type });
+    }
+
+    return null;
+  }
+}
+
+export const reactDevToolsInterceptor = ReactDevToolsInterceptor.getInstance();