@salve-software/mako-react-native 1.0.1

package/package.json

@@ -0,0 +1,128 @@
+{
+  "name": "@salve-software/mako-react-native",
+  "version": "1.0.1",
+  "description": "mako-react-native is a react native package built with Nitro",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "clean": "git clean -dfX",
+    "build": "yarn typecheck && bob build",
+    "codegen": "nitrogen --logLevel=\"debug\" && yarn build && node post-script.js",
+    "test": "jest",
+    "example": "yarn workspace react-native-nitro-trace-example"
+  },
+  "keywords": [
+    "react-native",
+    "mako-react-native"
+  ],
+  "files": [
+    "src",
+    "react-native.config.js",
+    "lib",
+    "nitrogen",
+    "cpp",
+    "nitro.json",
+    "android/build.gradle",
+    "android/fix-prefab.gradle",
+    "android/gradle.properties",
+    "android/CMakeLists.txt",
+    "android/src",
+    "ios/**/*.h",
+    "ios/**/*.m",
+    "ios/**/*.mm",
+    "ios/**/*.cpp",
+    "ios/**/*.swift",
+    "app.plugin.js",
+    "*.podspec",
+    "README.md"
+  ],
+  "packageManager": "yarn@4.9.1",
+  "workspaces": [
+    "example"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Gabriel-Pereira1788/mako.git",
+    "directory": "mako-react-native"
+  },
+  "author": "Gabriel-Pereira1788",
+  "license": "MIT",
+  "bugs": "https://github.com/Gabriel-Pereira1788/mako/issues",
+  "homepage": "https://github.com/Gabriel-Pereira1788/mako/tree/main/mako-react-native#readme",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@jamesacarr/eslint-formatter-github-actions": "^0.2.0",
+    "@types/jest": "^29.5.12",
+    "@types/react": "19.2.0",
+    "nitrogen": "0.35.4",
+    "react": "19.2.3",
+    "react-native": "0.84.1",
+    "react-native-builder-bob": "^0.40.18",
+    "react-native-nitro-modules": "0.35.4",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-nitro-modules": "*"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native",
+      "prettier"
+    ],
+    "plugins": [
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "warn",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false,
+    "semi": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.json"
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "@salve-software/mako-types": "^1.0.0",
+    "jest": "^30.4.2"
+  }
+}

package/react-native.config.js

@@ -0,0 +1,16 @@
+// https://github.com/react-native-community/cli/blob/main/docs/dependencies.md
+
+module.exports = {
+  dependency: {
+    platforms: {
+      /**
+       * @type {import('@react-native-community/cli-types').IOSDependencyParams}
+       */
+      ios: {},
+      /**
+       * @type {import('@react-native-community/cli-types').AndroidDependencyParams}
+       */
+      android: {},
+    },
+  },
+};

package/src/index.ts

@@ -0,0 +1,7 @@
+import { NitroModules } from 'react-native-nitro-modules'
+import type { NitroMako as NitroMakoSpec } from './specs/mako.nitro'
+
+export const NitroMako =
+  NitroModules.createHybridObject<NitroMakoSpec>('NitroMako')
+
+export { default } from './library'

package/src/library/client/constants.ts

@@ -0,0 +1,36 @@
+/**
+ * Default URL patterns to ignore during network interception
+ * Includes Metro bundler, hot reload, and debugger URLs
+ */
+export const DEFAULT_IGNORED_URLS: RegExp[] = [
+  /localhost:8081/,
+  /127\.0\.0\.1:8081/,
+  /10\.0\.2\.2:8081/, // Android emulator
+  /symbolicate/,
+  /\.hot-update\./,
+  /hot$/,
+  /\.bundle/,
+  /__packager/,
+  /debugger-ui/,
+  /devtools/,
+];
+
+/**
+ * WebSocket reconnection settings
+ */
+export const RECONNECT_CONFIG = {
+  maxAttempts: 5,
+  maxDelay: 30000,
+  baseDelay: 1000,
+} as const;
+
+/**
+ * Default client configuration
+ */
+export const DEFAULT_CONFIG = {
+  host: 'localhost',
+  port: 8765,
+  enableNetworkCapture: true,
+  enableComponentInspector: false,
+  enablePerformanceMonitoring: false,
+} as const;

package/src/library/client/index.ts

@@ -0,0 +1,9 @@
+import { MakoClient } from './mako-client'
+
+export {
+  DEFAULT_IGNORED_URLS,
+  RECONNECT_CONFIG,
+  DEFAULT_CONFIG,
+} from './constants'
+
+export const client = new MakoClient()

package/src/library/client/mako-client.ts

@@ -0,0 +1,494 @@
+/**
+ * WebSocket client for communicating with Mako macOS app
+ */
+
+import { Platform } from 'react-native'
+import { NitroModules } from 'react-native-nitro-modules'
+import type {
+  MakoConfig,
+  MakoEvent,
+  DeviceInfoEvent,
+  LogEvent,
+  NativeLogEvent,
+  LogLevel,
+  NativeLogSource,
+  ProjectInfoEvent,
+} from '../types'
+import type { NitroMako as NitroMakoSpec } from '../../specs/mako.nitro'
+
+import {
+  DEFAULT_IGNORED_URLS,
+  RECONNECT_CONFIG,
+  DEFAULT_CONFIG,
+} from './constants'
+import { NetworkHandler } from '../network-handler'
+import { ComponentHandler } from '../component-handler'
+import { PerformanceHandler } from '../performance-handler'
+import { deviceHandler } from '../device'
+import { projectHandler } from '../project'
+import { xhrInterceptor, reactDevToolsInterceptor, jsConsoleInterceptor } from '../interceptors'
+
+/**
+ * Mako WebSocket Client
+ */
+export class MakoClient {
+  private ws: WebSocket | null = null
+  private config: Required<MakoConfig>
+  private messageQueue: MakoEvent[] = []
+  private reconnectAttempts = 0
+  private reconnectTimeout: ReturnType<typeof setTimeout> | null = null
+  private isConnecting = false
+  private manualDisconnect = false
+
+  // Native log capture
+  private nitroMako: NitroMakoSpec | null = null
+  private nativeLogCaptureEnabled = false
+
+  // Network handler
+  private networkHandler: NetworkHandler | null = null
+
+  // Component handler
+  private componentHandler: ComponentHandler | null = null
+  private componentInspectorEnabled = false
+
+  // Performance handler
+  private performanceHandler: PerformanceHandler | null = null
+  private performanceMonitoringEnabled = false
+
+  constructor() {
+    this.config = {
+      host: DEFAULT_CONFIG.host,
+      port: DEFAULT_CONFIG.port,
+      enableNetworkCapture: DEFAULT_CONFIG.enableNetworkCapture,
+      enableComponentInspector: DEFAULT_CONFIG.enableComponentInspector,
+      enablePerformanceMonitoring: DEFAULT_CONFIG.enablePerformanceMonitoring,
+      ignoredUrls: [],
+      onConnect: () => {},
+      onDisconnect: () => {},
+      onError: () => {},
+    }
+  }
+
+  /**
+   * Connect to Mako macOS app
+   */
+  connect(userConfig: MakoConfig = {}): void {
+    if (typeof __DEV__ !== 'undefined' && !__DEV__) {
+      console.warn('[Mako] SDK only works in development mode')
+      return
+    }
+
+    this.config = {
+      host: userConfig.host ?? DEFAULT_CONFIG.host,
+      port: userConfig.port ?? DEFAULT_CONFIG.port,
+      enableNetworkCapture:
+        userConfig.enableNetworkCapture ?? DEFAULT_CONFIG.enableNetworkCapture,
+      enableComponentInspector:
+        userConfig.enableComponentInspector ?? DEFAULT_CONFIG.enableComponentInspector,
+      enablePerformanceMonitoring:
+        userConfig.enablePerformanceMonitoring ?? DEFAULT_CONFIG.enablePerformanceMonitoring,
+      ignoredUrls: [...DEFAULT_IGNORED_URLS, ...(userConfig.ignoredUrls ?? [])],
+      onConnect: userConfig.onConnect ?? (() => {}),
+      onDisconnect: userConfig.onDisconnect ?? (() => {}),
+      onError: userConfig.onError ?? (() => {}),
+    }
+
+    this.manualDisconnect = false
+    this.connectWebSocket()
+  }
+
+  /**
+   * Disconnect from Mako
+   */
+  disconnect(): void {
+    this.manualDisconnect = true
+    this.cleanup()
+  }
+
+  /**
+   * Check if connected
+   */
+  isConnected(): boolean {
+    return this.ws?.readyState === WebSocket.OPEN
+  }
+
+  /**
+   * Send a log event to Mako
+   */
+  sendLog(
+    level: LogLevel,
+    message: string,
+    metadata?: Record<string, unknown>
+  ): void {
+    const event: LogEvent = {
+      type: 'log',
+      source: 'js',
+      level,
+      message,
+      timestamp: Date.now(),
+      metadata,
+      projectId: projectHandler.getProjectId(),
+    }
+    this.send(event)
+  }
+
+  /**
+   * Start capturing native platform logs
+   */
+  startNativeLogCapture(): boolean {
+    if (this.nativeLogCaptureEnabled) {
+      console.warn('[Mako] Native log capture already enabled')
+      return false
+    }
+
+    try {
+      const nitro = this.getNitroMako()
+      const success = nitro.startLogCapture((log) => {
+        this.handleNativeLog(log)
+      })
+
+      if (success) {
+        this.nativeLogCaptureEnabled = true
+        console.log('[Mako] Native log capture enabled')
+      }
+      return success
+    } catch (error) {
+      console.error('[Mako] Failed to start native log capture:', error)
+      return false
+    }
+  }
+
+  /**
+   * Stop capturing native platform logs
+   */
+  stopNativeLogCapture(): void {
+    if (!this.nativeLogCaptureEnabled) return
+
+    try {
+      const nitro = this.getNitroMako()
+      nitro.stopLogCapture()
+      this.nativeLogCaptureEnabled = false
+      console.log('[Mako] Native log capture disabled')
+    } catch (error) {
+      console.error('[Mako] Failed to stop native log capture:', error)
+    }
+  }
+
+  /**
+   * Check if native log capture is active
+   */
+  isNativeLogCaptureEnabled(): boolean {
+    return this.nativeLogCaptureEnabled
+  }
+
+  /**
+   * Start component inspector
+   */
+  startComponentInspector(): boolean {
+    if (this.componentInspectorEnabled) {
+      console.warn('[Mako] Component inspector already enabled')
+      return false
+    }
+
+    this.componentHandler = new ComponentHandler({
+      onEvent: (event) => this.send(event),
+    })
+
+    const success = reactDevToolsInterceptor.enable(this.componentHandler.getCallbacks())
+    if (success) {
+      this.componentInspectorEnabled = true
+      this.componentHandler.startTreeSnapshots()
+      console.log('[Mako] Component inspector enabled')
+    }
+    return success
+  }
+
+  /**
+   * Stop component inspector
+   */
+  stopComponentInspector(): void {
+    if (!this.componentInspectorEnabled) return
+
+    try {
+      reactDevToolsInterceptor.disable()
+      if (this.componentHandler) {
+        this.componentHandler.clear()
+        this.componentHandler = null
+      }
+      this.componentInspectorEnabled = false
+      console.log('[Mako] Component inspector disabled')
+    } catch (error) {
+      console.error('[Mako] Failed to stop component inspector:', error)
+    }
+  }
+
+  /**
+   * Check if component inspector is active
+   */
+  isComponentInspectorEnabled(): boolean {
+    return this.componentInspectorEnabled
+  }
+
+  /**
+   * Start performance monitoring
+   */
+  startPerformanceMonitoring(): boolean {
+    if (this.performanceMonitoringEnabled) {
+      console.warn('[Mako] Performance monitoring already enabled')
+      return false
+    }
+
+    this.performanceHandler = new PerformanceHandler({
+      nitroMako: this.getNitroMako(),
+      onEvent: (event) => this.send(event),
+    })
+
+    const success = this.performanceHandler.start()
+    if (success) {
+      this.performanceMonitoringEnabled = true
+      console.log('[Mako] Performance monitoring enabled')
+    }
+    return success
+  }
+
+  /**
+   * Stop performance monitoring
+   */
+  stopPerformanceMonitoring(): void {
+    if (!this.performanceMonitoringEnabled) return
+
+    try {
+      if (this.performanceHandler) {
+        this.performanceHandler.stop()
+        this.performanceHandler = null
+      }
+      this.performanceMonitoringEnabled = false
+      console.log('[Mako] Performance monitoring disabled')
+    } catch (error) {
+      console.error('[Mako] Failed to stop performance monitoring:', error)
+    }
+  }
+
+  /**
+   * Check if performance monitoring is active
+   */
+  isPerformanceMonitoringEnabled(): boolean {
+    return this.performanceMonitoringEnabled
+  }
+
+  private getNitroMako(): NitroMakoSpec {
+    if (!this.nitroMako) {
+      this.nitroMako =
+        NitroModules.createHybridObject<NitroMakoSpec>('NitroMako')
+    }
+    return this.nitroMako
+  }
+
+  private handleNativeLog(log: {
+    level: string
+    message: string
+    tag: string
+    timestamp: number
+  }): void {
+    const platform = Platform.OS as NativeLogSource
+    const level = log.level === 'verbose' ? 'debug' : log.level
+
+    const event: NativeLogEvent = {
+      type: 'native',
+      source: platform,
+      level: level as LogLevel,
+      message: log.message,
+      timestamp: log.timestamp,
+      metadata: log.tag ? { tag: log.tag } : undefined,
+      projectId: projectHandler.getProjectId(),
+    }
+
+    this.send(event)
+  }
+
+  private connectWebSocket(): void {
+    jsConsoleInterceptor.start({
+      onLog: (level, message, metadata) => this.sendLog(level, message, metadata),
+    })
+
+    if (this.isConnecting || this.isConnected()) return
+
+    this.isConnecting = true
+    const url = `ws://${this.config.host}:${this.config.port}`
+
+    try {
+      this.ws = new WebSocket(url)
+
+      this.ws.onopen = () => {
+        this.isConnecting = false
+        this.reconnectAttempts = 0
+        console.log(`[Mako] Connected to ${url}`)
+        this.config.onConnect()
+
+        this.sendProjectInfo()
+        this.sendDeviceInfo()
+        this.flushQueue()
+
+        if (this.config.enableNetworkCapture) {
+          this.setupNetworkInterception()
+        }
+
+        if (this.config.enableComponentInspector) {
+          this.startComponentInspector()
+        }
+
+        if (this.config.enablePerformanceMonitoring) {
+          this.startPerformanceMonitoring()
+        }
+
+        this.startNativeLogCapture()
+      }
+
+      this.ws.onclose = () => {
+        this.isConnecting = false
+        console.log('[Mako] Disconnected')
+        this.config.onDisconnect()
+
+        if (!this.manualDisconnect) {
+          this.scheduleReconnect()
+        }
+      }
+
+      this.ws.onerror = (event) => {
+        this.isConnecting = false
+        const error = new Error('WebSocket error')
+        console.error('[Mako] Connection error:', event)
+        this.config.onError(error)
+      }
+
+      this.ws.onmessage = (event) => {
+        console.log('[Mako] Received:', event.data)
+      }
+    } catch (error) {
+      this.isConnecting = false
+      console.error('[Mako] Failed to create WebSocket:', error)
+      this.scheduleReconnect()
+    }
+  }
+
+  private scheduleReconnect(): void {
+    if (this.manualDisconnect) return
+    if (this.reconnectAttempts >= RECONNECT_CONFIG.maxAttempts) {
+      console.warn('[Mako] Max reconnection attempts reached')
+      return
+    }
+
+    const delay = Math.min(
+      RECONNECT_CONFIG.baseDelay * Math.pow(2, this.reconnectAttempts),
+      RECONNECT_CONFIG.maxDelay
+    )
+    this.reconnectAttempts++
+
+    console.log(
+      `[Mako] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`
+    )
+
+    this.reconnectTimeout = setTimeout(() => {
+      this.connectWebSocket()
+    }, delay)
+  }
+
+  private cleanup(): void {
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout)
+      this.reconnectTimeout = null
+    }
+
+    this.stopNativeLogCapture()
+    this.stopComponentInspector()
+    this.stopPerformanceMonitoring()
+    xhrInterceptor.disable()
+    jsConsoleInterceptor.stop()
+
+    if (this.networkHandler) {
+      this.networkHandler.clear()
+      this.networkHandler = null
+    }
+
+    if (this.ws) {
+      this.ws.onopen = null
+      this.ws.onclose = null
+      this.ws.onerror = null
+      this.ws.onmessage = null
+      this.ws.close()
+      this.ws = null
+    }
+
+    this.messageQueue = []
+    this.reconnectAttempts = 0
+    this.isConnecting = false
+  }
+
+  private send(event: MakoEvent): void {
+    if (this.isConnected() && this.ws) {
+      try {
+        this.ws.send(JSON.stringify(event))
+      } catch (error) {
+        console.error('[Mako] Failed to send event:', error)
+        this.messageQueue.push(event)
+      }
+    } else {
+      this.messageQueue.push(event)
+    }
+  }
+
+  private sendProjectInfo(): void {
+    try {
+      const projectInfo = projectHandler.getProjectInfo()
+      const event: ProjectInfoEvent = {
+        type: 'project_info',
+        ...projectInfo,
+      }
+      this.send(event)
+      console.log(
+        `[Mako] Project registered: ${projectInfo.appName} (${projectInfo.projectId})`
+      )
+    } catch (error) {
+      console.warn('[Mako] Failed to send project info:', error)
+    }
+  }
+
+  private async sendDeviceInfo(): Promise<void> {
+    try {
+      const deviceInfo = deviceHandler.getDeviceInfo()
+      const projectId = projectHandler.getProjectId()
+      const event: DeviceInfoEvent = {
+        type: 'device_info',
+        ...deviceInfo,
+        projectId,
+      }
+      this.send(event)
+      console.log(
+        `[Mako] Device registered: ${deviceInfo.deviceName} (${deviceInfo.deviceId})`
+      )
+    } catch (error) {
+      console.warn('[Mako] Failed to send device info:', error)
+    }
+  }
+
+  private flushQueue(): void {
+    while (this.messageQueue.length > 0 && this.isConnected()) {
+      const event = this.messageQueue.shift()
+      if (event) {
+        this.send(event)
+      }
+    }
+  }
+
+  private setupNetworkInterception(): void {
+    this.networkHandler = new NetworkHandler({
+      ignoredUrls: this.config.ignoredUrls,
+      onEvent: (event) => this.send(event),
+    })
+
+    const success = xhrInterceptor.enable(this.networkHandler.getCallbacks())
+    if (success) {
+      console.log('[Mako] Network capture enabled')
+    }
+  }
+}