@tamagui/cli 1.1.11 → 1.1.13

package/src/vendor/repack/dev-server/src/plugins/wss/WebSocketServer.ts

@@ -0,0 +1,60 @@
+import type { IncomingMessage } from 'http'
+import type { Socket } from 'net'
+
+import type { FastifyInstance } from 'fastify'
+import { ServerOptions, WebSocket, WebSocketServer as WebSocketServerImpl } from 'ws'
+
+/**
+ * Abstract class for providing common logic (eg routing) for all WebSocket servers.
+ *
+ * @category Development server
+ */
+export abstract class WebSocketServer {
+  /** An instance of the underlying WebSocket server. */
+  public readonly server: WebSocketServerImpl
+
+  /** Fastify instance from which {@link server} will receive upgrade connections. */
+  protected fastify: FastifyInstance
+
+  public readonly paths: string[]
+
+  /**
+   * Create a new instance of the WebSocketServer.
+   * Any logging information, will be passed through standard `fastify.log` API.
+   *
+   * @param fastify Fastify instance to which the WebSocket will be attached to.
+   * @param path Path on which this WebSocketServer will be accepting connections.
+   * @param wssOptions WebSocket Server options.
+   */
+  constructor(
+    fastify: FastifyInstance,
+    path: string | string[],
+    wssOptions: Omit<ServerOptions, 'noServer' | 'server' | 'host' | 'port' | 'path'> = {}
+  ) {
+    this.fastify = fastify
+    this.server = new WebSocketServerImpl({
+      noServer: true,
+      ...wssOptions,
+    })
+    this.server.on('connection', this.onConnection.bind(this))
+    this.paths = Array.isArray(path) ? path : [path]
+  }
+
+  shouldUpgrade(pathname: string) {
+    return this.paths.includes(pathname)
+  }
+
+  upgrade(request: IncomingMessage, socket: Socket, head: Buffer) {
+    this.server.handleUpgrade(request, socket, head, (webSocket) => {
+      this.server.emit('connection', webSocket, request)
+    })
+  }
+
+  /**
+   * Process incoming WebSocket connection.
+   *
+   * @param socket Incoming WebSocket connection.
+   * @param request Upgrade request for the connection.
+   */
+  abstract onConnection(socket: WebSocket, request: IncomingMessage): void
+}

package/src/vendor/repack/dev-server/src/plugins/wss/index.ts

@@ -0,0 +1,3 @@
+export { default } from './wssPlugin'
+export * from './WebSocketServer'
+export * from './types'

package/src/vendor/repack/dev-server/src/plugins/wss/servers/HermesInspectorProxy.ts

@@ -0,0 +1,158 @@
+import type { IncomingMessage } from 'http'
+import { URL } from 'url'
+
+import type { FastifyInstance, FastifyReply, FastifyRequest, LogLevel } from 'fastify'
+import WebSocket from 'ws'
+
+import Device from '../../../../vendor/metro-inspector-proxy/src/Device.js'
+import { Server } from '../../../types'
+import { WebSocketServer } from '../WebSocketServer'
+
+const WS_DEVICE_URL = '/inspector/device'
+const WS_DEBUGGER_URL = '/inspector/debug'
+
+interface PageDescription {
+  id: string
+  description: string
+  title: string
+  faviconUrl: string
+  devtoolsFrontendUrl: string
+  type: string
+  webSocketDebuggerUrl: string
+  vm?: string
+}
+
+interface Page {
+  id: string
+  title: string
+  app: string
+  vm?: string
+}
+
+export interface InspectorProxyConfig
+  extends Pick<Server.Options, 'port' | 'host' | 'rootDir'> {}
+
+export class HermesInspectorProxy extends WebSocketServer {
+  private devices = new Map<number, any>()
+  private deviceCounter = 0
+  public readonly serverHost: string
+
+  constructor(fastify: FastifyInstance, private config: InspectorProxyConfig) {
+    super(fastify, [WS_DEVICE_URL, WS_DEBUGGER_URL])
+    this.serverHost = `${this.config.host || 'localhost'}:${this.config.port}`
+    this.setup()
+  }
+
+  private setup() {
+    const onSend = (
+      _request: FastifyRequest,
+      reply: FastifyReply,
+      _payload: unknown,
+      done: () => void
+    ) => {
+      reply.headers({
+        'Content-Type': 'application/json; charset=UTF-8',
+        'Cache-Control': 'no-cache',
+        Connection: 'close',
+      })
+      done()
+    }
+
+    this.fastify.get('/json/version', { onSend }, async () => {
+      return {
+        Browser: 'Mobile JavaScript',
+        'Protocol-Version': '1.1',
+      }
+    })
+
+    const pageListHandler = async () => {
+      const pages: PageDescription[] = []
+      for (const [deviceId, device] of this.devices) {
+        const devicePages = device.getPagesList()
+        for (const page of devicePages) {
+          pages.push(this.buildPageDescription(deviceId, page))
+        }
+      }
+
+      return pages
+    }
+
+    this.fastify.get('/json/list', { onSend }, pageListHandler)
+    this.fastify.get('/json', { onSend, logLevel: 'silent' as LogLevel }, pageListHandler)
+  }
+
+  private buildPageDescription(deviceId: number, page: Page) {
+    const debuggerUrl = `${this.serverHost}${WS_DEBUGGER_URL}?device=${deviceId}&page=${page.id}`
+    const webSocketDebuggerUrl = 'ws://' + debuggerUrl
+    const devtoolsFrontendUrl =
+      'chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=' +
+      encodeURIComponent(debuggerUrl)
+    return {
+      id: `${deviceId}-${page.id}`,
+      description: page.app,
+      title: page.title,
+      faviconUrl: 'https://reactjs.org/favicon.ico',
+      devtoolsFrontendUrl,
+      type: 'node',
+      webSocketDebuggerUrl,
+      vm: page.vm,
+    }
+  }
+
+  /**
+   * Process new WebSocket connection from device.
+   *
+   * @param socket Incoming device's WebSocket connection.
+   * @param request Upgrade request for the connection.
+   */
+  onConnection(socket: WebSocket, request: IncomingMessage) {
+    try {
+      const { url = '' } = request
+      const { searchParams } = new URL(url, 'http://localhost')
+
+      if (url.startsWith('/inspector/device')) {
+        const deviceName = searchParams.get('name') ?? 'Unknown'
+        const appName = searchParams.get('app') ?? 'Unknown'
+        const deviceId = this.deviceCounter++
+
+        this.devices.set(
+          deviceId,
+          new Device(deviceId, deviceName, appName, socket, this.config.rootDir)
+        )
+
+        this.fastify.log.info({ msg: 'Hermes device connected', deviceId })
+
+        const onClose = () => {
+          this.fastify.log.info({
+            msg: 'Hermes device disconnected',
+            deviceId,
+          })
+          this.devices.delete(deviceId)
+        }
+
+        socket.addEventListener('error', onClose)
+        socket.addEventListener('close', onClose)
+      } else {
+        const deviceId = searchParams.get('device') ?? undefined
+        const pageId = searchParams.get('page') ?? undefined
+
+        if (deviceId === undefined || pageId === undefined) {
+          throw new Error('Incorrect URL - must provide device and page IDs')
+        }
+
+        const device = this.devices.get(parseInt(deviceId, 10))
+        if (!device) {
+          throw new Error('Unknown device with ID ' + deviceId)
+        }
+
+        device.handleDebuggerConnection(socket, pageId)
+      }
+    } catch (error) {
+      this.fastify.log.error({
+        msg: 'Failed to establish connection with Hermes device',
+        error: (error as Error).message,
+      })
+      socket.close(1011, (error as Error).toString())
+    }
+  }
+}

package/src/vendor/repack/dev-server/src/plugins/wss/servers/WebSocketApiServer.ts

@@ -0,0 +1,66 @@
+import { FastifyInstance } from 'fastify'
+import WebSocket from 'ws'
+
+import { WebSocketServer } from '../WebSocketServer'
+
+/**
+ * Class for creating a WebSocket server for API clients.
+ * Useful to listening for compilation events and new logs.
+ *
+ * @category Development server
+ */
+export class WebSocketApiServer extends WebSocketServer {
+  private clients = new Map<string, WebSocket>()
+  private nextClientId = 0
+
+  /**
+   * Create new instance of WebSocketApiServer and attach it to the given Fastify instance.
+   * Any logging information, will be passed through standard `fastify.log` API.
+   *
+   * @param fastify Fastify instance to attach the WebSocket server to.
+   */
+  constructor(fastify: FastifyInstance) {
+    super(fastify, '/api')
+  }
+
+  /**
+   * Send message to all connected API clients.
+   *
+   * @param event Event string or object to send.
+   */
+  send(event: any) {
+    const data = typeof event === 'string' ? event : JSON.stringify(event)
+
+    for (const [, socket] of this.clients.entries()) {
+      try {
+        socket.send(data)
+      } catch {
+        // NOOP
+      }
+    }
+  }
+
+  /**
+   * Process new WebSocket connection from client application.
+   *
+   * @param socket Incoming client's WebSocket connection.
+   */
+  onConnection(socket: WebSocket) {
+    const clientId = `client#${this.nextClientId++}`
+    this.clients.set(clientId, socket)
+
+    this.fastify.log.info({ msg: 'API client connected', clientId })
+    this.clients.set(clientId, socket)
+
+    const onClose = () => {
+      this.fastify.log.info({
+        msg: 'API client disconnected',
+        clientId,
+      })
+      this.clients.delete(clientId)
+    }
+
+    socket.addEventListener('error', onClose)
+    socket.addEventListener('close', onClose)
+  }
+}

package/src/vendor/repack/dev-server/src/plugins/wss/servers/WebSocketDebuggerServer.ts

@@ -0,0 +1,134 @@
+import type { IncomingMessage } from 'http'
+
+import type { FastifyInstance } from 'fastify'
+import WebSocket from 'ws'
+
+import { WebSocketServer } from '../WebSocketServer'
+
+/**
+ * Class for creating a WebSocket server and providing a bridge between
+ * debugger UI (Remote JS debugger) and the running React Native application.
+ *
+ * React Native application (aka client) will send and receive messages from the debugger UI
+ * which runs inside a browser.
+ *
+ * @category Development server
+ */
+export class WebSocketDebuggerServer extends WebSocketServer {
+  /**
+   * A WebSocket connection with the debugger UI.
+   */
+  private debuggerSocket: WebSocket | undefined
+
+  /**
+   * A WebSocket connection with the client (React Native app).
+   */
+  private clientSocket: WebSocket | undefined
+
+  /**
+   * Create new instance of WebSocketDebuggerServer and attach it to the given Fastify instance.
+   * Any logging information, will be passed through standard `fastify.log` API.
+   *
+   * @param fastify Fastify instance to attach the WebSocket server to.
+   */
+  constructor(fastify: FastifyInstance) {
+    super(fastify, '/debugger-proxy')
+  }
+
+  /**
+   * Check if debugger UI is connected to the WebSocketDebuggerServer.
+   */
+  isDebuggerConnected() {
+    return Boolean(this.debuggerSocket)
+  }
+
+  /**
+   * Send a message to a given WebSocket connection.
+   *
+   * @param socket WebSocket connection to send the message to.
+   * @param message Message to send.
+   */
+  send(socket: WebSocket | undefined, message: string) {
+    try {
+      socket?.send(message)
+    } catch (error) {
+      this.fastify.log.warn({ msg: 'Failed to send data to socket', error })
+    }
+  }
+
+  /**
+   * Process new WebSocket connection. The upgrade request should contain `role` query param
+   * for determining the type of the connection.
+   *
+   * @param socket Incoming WebSocket connection.
+   * @param request Upgrade request for the connection.
+   */
+  onConnection(socket: WebSocket, request: IncomingMessage) {
+    const { url = '' } = request
+    if (url.indexOf('role=debugger') >= 0) {
+      this.fastify.log.info({ msg: 'Chrome Remote JS debugger connected' })
+      this.onDebuggerConnection(socket)
+    } else if (url.indexOf('role=client') >= 0) {
+      this.fastify.log.info({ msg: 'React Native app connected to debugger' })
+      this.onClientConnection(socket)
+    } else {
+      socket.close(1011, 'Missing role param')
+    }
+  }
+
+  /**
+   * Process new WebSocket connection from Debugger UI (Remote JS Debugger).
+   * If there's already open connection, the new one gets closed automatically.
+   *
+   * @param socket Incoming debugger WebSocket connection.
+   */
+  onDebuggerConnection(socket: WebSocket) {
+    if (this.debuggerSocket) {
+      socket.close(1011, 'Another debugger is already connected')
+      return
+    }
+    this.debuggerSocket = socket
+    const onClose = () => {
+      this.fastify.log.info({ msg: 'Chrome Remote JS debugger disconnected' })
+      this.debuggerSocket = undefined
+      if (this.clientSocket) {
+        this.clientSocket.removeAllListeners()
+        this.clientSocket.close(1011, 'Debugger was disconnected')
+      }
+    }
+    this.debuggerSocket.addEventListener('error', onClose)
+    this.debuggerSocket.addEventListener('close', onClose)
+    this.debuggerSocket.addEventListener('message', ({ data }) => {
+      this.send(this.clientSocket, data.toString())
+    })
+  }
+
+  /**
+   * Process new WebSocket connection from React Native app (client)
+   * and close any previous connection.
+   *
+   * @param socket Incoming client WebSocket connection.
+   */
+  onClientConnection(socket: WebSocket) {
+    if (this.clientSocket) {
+      this.clientSocket.removeAllListeners()
+      this.clientSocket.close(1011, 'Another client is connected')
+      this.clientSocket = undefined
+    }
+
+    const onClose = () => {
+      this.fastify.log.info({
+        msg: 'React Native app disconnected from debugger',
+      })
+      this.clientSocket = undefined
+      this.send(this.debuggerSocket, JSON.stringify({ method: '$disconnected' }))
+    }
+
+    this.clientSocket = socket
+    this.clientSocket.addEventListener('error', onClose)
+    this.clientSocket.addEventListener('close', onClose)
+    this.clientSocket.addEventListener('message', ({ data }) => {
+      this.send(this.debuggerSocket, data.toString())
+    })
+  }
+}

package/src/vendor/repack/dev-server/src/plugins/wss/servers/WebSocketDevClientServer.ts

@@ -0,0 +1,74 @@
+import type { FastifyInstance } from 'fastify'
+import WebSocket from 'ws'
+
+import { WebSocketServer } from '../WebSocketServer'
+
+/**
+ * Class for creating a WebSocket server for communication with React Native clients.
+ * All client logs - logs from React Native application - are processed here.
+ *
+ * @category Development server
+ */
+export class WebSocketDevClientServer extends WebSocketServer {
+  private clients = new Map<string, WebSocket>()
+  private nextClientId = 0
+
+  /**
+   * Create new instance of WebSocketDevClientServer and attach it to the given Fastify instance.
+   * Any logging information, will be passed through standard `fastify.log` API.
+   *
+   * @param fastify Fastify instance to attach the WebSocket server to.
+   */
+  constructor(fastify: FastifyInstance) {
+    super(fastify, '/__client')
+  }
+
+  /**
+   * Process client message.
+   *
+   * @param message Stringified client message.
+   */
+  processMessage(message: string) {
+    const { type, ...body } = JSON.parse(message)
+    switch (type) {
+      case 'client-log':
+        if (body.level === 'error') {
+          this.fastify.log.error({ issuer: 'Console', msg: body.data })
+        } else if (body.level === 'warn') {
+          this.fastify.log.warn({ issuer: 'Console', msg: body.data })
+        } else {
+          this.fastify.log.info({ issuer: 'Console', msg: body.data })
+        }
+        break
+      default:
+        this.fastify.log.warn({ msg: 'Unknown client message', message })
+    }
+  }
+
+  /**
+   * Process new WebSocket connection from client application.
+   *
+   * @param socket Incoming client's WebSocket connection.
+   */
+  onConnection(socket: WebSocket) {
+    const clientId = `client#${this.nextClientId++}`
+    this.clients.set(clientId, socket)
+
+    this.fastify.log.info({ msg: 'React Native client connected', clientId })
+    this.clients.set(clientId, socket)
+
+    const onClose = () => {
+      this.fastify.log.info({
+        msg: 'React Native client disconnected',
+        clientId,
+      })
+      this.clients.delete(clientId)
+    }
+
+    socket.addEventListener('error', onClose)
+    socket.addEventListener('close', onClose)
+    socket.addEventListener('message', (event) => {
+      this.processMessage(event.data.toString())
+    })
+  }
+}

package/src/vendor/repack/dev-server/src/plugins/wss/servers/WebSocketEventsServer.ts

@@ -0,0 +1,202 @@
+import type { FastifyInstance } from 'fastify'
+import * as prettyFormat from 'pretty-format'
+import WebSocket from 'ws'
+
+import { WebSocketServer } from '../WebSocketServer'
+import { WebSocketMessageServer } from './WebSocketMessageServer'
+
+/**
+ * {@link WebSocketEventsServer} configuration options.
+ */
+export interface WebSocketEventsServerConfig {
+  /** Instance of a {@link WebSocketMessageServer} which can be used for broadcasting. */
+  webSocketMessageServer: WebSocketMessageServer
+}
+
+/**
+ * Represents a command that connected clients can send to the {@link WebSocketEventsServer}.
+ */
+export interface Command {
+  version: number
+  type: 'command'
+  command: string
+  params?: any
+}
+
+/**
+ * Represents an event message.
+ */
+export interface EventMessage {
+  error?: Error | string
+  type?: string
+  data?: any
+}
+
+/**
+ * Class for creating a WebSocket server to process events and reports.
+ *
+ * Based on: https://github.com/react-native-community/cli/blob/v4.14.0/packages/cli-server-api/src/websocket/eventsSocketServer.ts
+ *
+ * @category Development server
+ */
+export class WebSocketEventsServer extends WebSocketServer {
+  static readonly PROTOCOL_VERSION = 2
+
+  private clients = new Map<string, WebSocket>()
+  private nextClientId = 0
+
+  /**
+   * Create new instance of WebSocketHMRServer and attach it to the given Fastify instance.
+   * Any logging information, will be passed through standard `fastify.log` API.
+   *
+   * @param fastify Fastify instance to attach the WebSocket server to.
+   * @param config Configuration object.
+   */
+  constructor(fastify: FastifyInstance, private config: WebSocketEventsServerConfig) {
+    super(fastify, '/events', {
+      verifyClient: (({ origin }) => {
+        return /^(https?:\/\/localhost|file:\/\/)/.test(origin)
+      }) as WebSocket.VerifyClientCallbackSync,
+    })
+  }
+
+  /**
+   * Parse received command message from connected client.
+   *
+   * @param data Stringified command message to parse.
+   * @returns Parsed command or `undefined` if parsing failed.
+   */
+  parseMessage(data: string): Command | undefined {
+    try {
+      const message = JSON.parse(data)
+      if (message.version === WebSocketEventsServer.PROTOCOL_VERSION) {
+        return message
+      }
+      this.fastify.log.error({
+        msg: 'Received message had wrong protocol version',
+        message,
+      })
+    } catch {
+      this.fastify.log.error({
+        msg: 'Failed to parse the message as JSON',
+        data,
+      })
+    }
+
+    return undefined
+  }
+
+  /**
+   * Stringify `message` into a format that can be transported as a `string`.
+   *
+   * @param message Message to serialize.
+   * @returns String representation of a `message` or `undefined` if serialization failed.
+   */
+  serializeMessage(message: EventMessage) {
+    let toSerialize = message
+    if (message.error && message.error instanceof Error) {
+      toSerialize = {
+        ...message,
+        error: prettyFormat.default(message.error, {
+          escapeString: true,
+          highlight: true,
+          maxDepth: 3,
+          min: true,
+        }),
+      }
+    } else if (message && message.type === 'client_log') {
+      toSerialize = {
+        ...message,
+        data: message.data.map((item: any) =>
+          typeof item === 'string'
+            ? item
+            : prettyFormat.default(item, {
+                escapeString: true,
+                highlight: true,
+                maxDepth: 3,
+                min: true,
+                plugins: [prettyFormat.plugins.ReactElement],
+              })
+        ),
+      }
+    }
+    try {
+      return JSON.stringify(toSerialize)
+    } catch (error) {
+      this.fastify.log.error({ msg: 'Failed to serialize', error })
+      return undefined
+    }
+  }
+
+  /**
+   * Broadcast event to all connected clients.
+   *
+   * @param event Event message to broadcast.
+   */
+  broadcastEvent(event: EventMessage) {
+    if (!this.clients.size) {
+      return
+    }
+
+    const serialized = this.serializeMessage(event)
+    if (!serialized) {
+      return
+    }
+
+    for (const [clientId, socket] of this.clients.entries()) {
+      try {
+        socket.send(serialized)
+      } catch (error) {
+        this.fastify.log.error({
+          msg: 'Failed to send broadcast to client',
+          clientId,
+          error,
+          _skipBroadcast: true,
+        })
+      }
+    }
+  }
+
+  /**
+   * Process new client's WebSocket connection.
+   *
+   * @param socket Incoming WebSocket connection.
+   */
+  onConnection(socket: WebSocket) {
+    const clientId = `client#${this.nextClientId++}`
+    this.clients.set(clientId, socket)
+    this.fastify.log.debug({ msg: 'Events client connected', clientId })
+
+    const onClose = () => {
+      this.fastify.log.debug({ msg: 'Events client disconnected', clientId })
+      socket.removeAllListeners()
+      this.clients.delete(clientId)
+    }
+
+    socket.addEventListener('error', onClose)
+    socket.addEventListener('close', onClose)
+    socket.addEventListener('message', (event) => {
+      const message = this.parseMessage(event.data.toString())
+
+      if (!message) {
+        return
+      }
+
+      if (message.type === 'command') {
+        try {
+          this.config.webSocketMessageServer.broadcast(message.command, message.params)
+        } catch (error) {
+          this.fastify.log.error({
+            msg: 'Failed to forward message to clients',
+            error,
+          })
+        }
+      } else {
+        this.fastify.log.error({
+          msg: 'Unknown message type',
+          message,
+        })
+      }
+    })
+  }
+}