@tamagui/cli 1.1.11 → 1.1.13

package/src/vendor/repack/dev-server/src/plugins/devtools/devtoolsPlugin.ts

@@ -0,0 +1,107 @@
+import path from 'path'
+
+import type { FastifyInstance } from 'fastify'
+import fastifyPlugin from 'fastify-plugin'
+import open from 'open'
+
+import type { Server } from '../../types'
+
+async function devtoolsPlugin(
+  instance: FastifyInstance,
+  { options }: { options: Server.Options }
+) {
+  instance.route({
+    method: ['GET', 'POST', 'PUT'],
+    url: '/reload',
+    handler: (_request, reply) => {
+      instance.wss.messageServer.broadcast('reload')
+      reply.send('OK')
+    },
+  })
+
+  instance.route({
+    method: ['GET', 'POST', 'PUT'],
+    url: '/launch-js-devtools',
+    handler: async (request, reply) => {
+      const customDebugger = process.env.REACT_DEBUGGER
+      if (customDebugger) {
+        // NOOP for now
+      } else if (!instance.wss.debuggerServer.isDebuggerConnected()) {
+        const url = `${options.https ? 'https' : 'http'}://${
+          options.host || 'localhost'
+        }:${options.port}/debugger-ui`
+        try {
+          request.log.info({ msg: 'Opening debugger UI', url })
+          await open(url)
+        } catch (error) {
+          if (error) {
+            request.log.error({
+              msg: 'Cannot open debugger UI',
+              url,
+              error,
+            })
+          }
+        }
+      }
+      reply.send('OK')
+    },
+  })
+
+  instance.route({
+    method: ['GET', 'POST', 'PUT'],
+    url: '/open-stack-frame',
+    handler: async (request, reply) => {
+      try {
+        const { file, lineNumber, column } = JSON.parse(request.body as string) as {
+          file: string
+          lineNumber: number
+          column?: number
+        }
+        const url = `${path.join(
+          options.rootDir,
+          // TODO: make it generic
+          file.replace('webpack://', '')
+        )}:${lineNumber}:${column ?? 1}`
+
+        request.log.info({ msg: 'Opening stack frame in editor', url })
+
+        const openEditor = (await import('open-editor')).default
+
+        openEditor([url])
+        reply.send('OK')
+      } catch (error) {
+        request.log.error({
+          msg: 'Failed to open stack frame in editor',
+          error: (error as Error).message,
+        })
+        reply.code(400).send()
+      }
+    },
+  })
+
+  instance.route({
+    method: ['GET', 'POST', 'PUT'],
+    url: '/open-url',
+    handler: async (request, reply) => {
+      try {
+        const { url } = JSON.parse(request.body as string) as { url: string }
+        request.log.info({ msg: 'Opening URL', url })
+        await open(url)
+        reply.send('OK')
+      } catch (error) {
+        request.log.error({ msg: 'Failed to open URL', error })
+        reply.code(400).send()
+      }
+    },
+  })
+
+  // Silence this route
+  instance.get('/inspector/device', { logLevel: 'silent' as any }, (_request, reply) => {
+    reply.code(404).send()
+  })
+}
+
+export default fastifyPlugin(devtoolsPlugin, {
+  name: 'devtools-plugin',
+  dependencies: ['wss-plugin'],
+})

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

@@ -0,0 +1 @@
+export { default } from './devtoolsPlugin'

package/src/vendor/repack/dev-server/src/plugins/favicon/faviconPlugin.ts

@@ -0,0 +1,14 @@
+import type { FastifyInstance } from 'fastify'
+import fastifyFavicon from 'fastify-favicon'
+import fastifyPlugin from 'fastify-plugin'
+
+// @ts-ignore
+const pathToImg = new URL('../../img', import.meta.url).pathname
+
+async function faviconPlugin(instance: FastifyInstance) {
+  instance.register(fastifyFavicon, { path: pathToImg })
+}
+
+export default fastifyPlugin(faviconPlugin, {
+  name: 'favicon-plugin',
+})

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

@@ -0,0 +1 @@
+export { default } from './faviconPlugin'

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

@@ -0,0 +1,2 @@
+export { default } from './multipartPlugin'
+export * from './types'

package/src/vendor/repack/dev-server/src/plugins/multipart/multipartPlugin.ts

@@ -0,0 +1,77 @@
+import type { IncomingHttpHeaders } from 'http'
+import { PassThrough } from 'stream'
+
+import type { FastifyInstance, FastifyReply } from 'fastify'
+import fastifyPlugin from 'fastify-plugin'
+
+import type { MultipartHandler } from './types'
+
+/**
+ * Implementation is based on:
+ * https://github.com/facebook/metro/blob/347b1d7ed87995d7951aaa9fd597c04b06013dac/packages/metro/src/Server/MultipartResponse.js
+ */
+
+const CRLF = '\r\n'
+const BOUNDARY = '3beqjf3apnqeu3h5jqorms4i'
+
+async function multipartPlugin(instance: FastifyInstance) {
+  function asMultipart(this: FastifyReply): MultipartHandler | undefined {
+    // We should check if is included in accept or if accept has multipart/* or */*,
+    // but React Native will set accept to exactly `multipart/mixed`, so a simple check
+    // will suffice.
+    if (this.request.headers.accept !== 'multipart/mixed') {
+      return undefined
+    }
+
+    const headers: IncomingHttpHeaders = {}
+    const stream = new PassThrough()
+
+    this.code(200)
+      .header('Content-Type', `multipart/mixed; boundary="${BOUNDARY}"`)
+      .send(stream)
+
+    function serializeHeaders(headers: IncomingHttpHeaders) {
+      return Object.keys(headers)
+        .map((key) => `${key}: ${headers[key]}`)
+        .join(CRLF)
+    }
+
+    function writeChunk<T>(headers: IncomingHttpHeaders, data: T, isLast?: boolean) {
+      let chunk = `${CRLF}--${BOUNDARY}${CRLF}`
+      if (headers) {
+        chunk += serializeHeaders(headers) + CRLF + CRLF
+      }
+
+      if (data) {
+        chunk += data
+      }
+
+      if (isLast) {
+        chunk += `${CRLF}--${BOUNDARY}--${CRLF}`
+      }
+
+      stream.write(chunk)
+    }
+
+    function setHeader(name: string, value: string | string[] | undefined) {
+      headers[name] = value
+    }
+
+    function end<T>(data: T) {
+      writeChunk(headers, data, true)
+      stream.end()
+    }
+
+    return {
+      writeChunk,
+      setHeader,
+      end,
+    }
+  }
+
+  instance.decorateReply('asMultipart', asMultipart)
+}
+
+export default fastifyPlugin(multipartPlugin, {
+  name: 'multipart-plugin',
+})

package/src/vendor/repack/dev-server/src/plugins/multipart/types.ts

@@ -0,0 +1,13 @@
+import type { IncomingHttpHeaders } from 'http'
+
+export interface MultipartHandler {
+  writeChunk: <T>(headers: IncomingHttpHeaders, data: T, isLast?: boolean) => void
+  setHeader: (name: string, value: string | string[] | undefined) => void
+  end: <T>(data: T) => void
+}
+
+declare module 'fastify' {
+  interface FastifyReply {
+    asMultipart: () => MultipartHandler | undefined
+  }
+}

package/src/vendor/repack/dev-server/src/plugins/symbolicate/Symbolicator.ts

@@ -0,0 +1,233 @@
+import { URL } from 'url'
+
+import { codeFrameColumns } from '@babel/code-frame'
+import type { FastifyLoggerInstance } from 'fastify'
+import { SourceMapConsumer } from 'source-map'
+
+import type {
+  CodeFrame,
+  InputStackFrame,
+  ReactNativeStackFrame,
+  StackFrame,
+  SymbolicatorDelegate,
+  SymbolicatorResults,
+} from './types'
+
+/**
+ * Class for transforming stack traces from React Native application with using Source Map.
+ * Raw stack frames produced by React Native, points to some location from the bundle
+ * eg `index.bundle?platform=ios:567:1234`. By using Source Map for that bundle `Symbolicator`
+ * produces frames that point to source code inside your project eg `Hello.tsx:10:9`.
+ */
+export class Symbolicator {
+  /**
+   * Infer platform from stack frames.
+   * Usually at least one frame has `file` field with the bundle URL eg:
+   * `http://localhost:8081/index.bundle?platform=ios&...`, which can be used to infer platform.
+   *
+   * @param stack Array of stack frames.
+   * @returns Inferred platform or `undefined` if cannot infer.
+   */
+  static inferPlatformFromStack(stack: ReactNativeStackFrame[]) {
+    for (const frame of stack) {
+      if (!frame.file) {
+        return
+      }
+
+      const { searchParams, pathname } = new URL(frame.file, 'file://')
+      const platform = searchParams.get('platform')
+      if (platform) {
+        return platform
+      } else {
+        const [bundleFilename] = pathname.split('/').reverse()
+        const [, platformOrExtension, extension] = bundleFilename.split('.')
+        if (extension) {
+          return platformOrExtension
+        }
+      }
+    }
+  }
+
+  /**
+   * Cache with initialized `SourceMapConsumer` to improve symbolication performance.
+   */
+  sourceMapConsumerCache: Record<string, SourceMapConsumer> = {}
+
+  /**
+   * Constructs new `Symbolicator` instance.
+   *
+   * @param delegate Delegate instance with symbolication functions.
+   */
+  constructor(private delegate: SymbolicatorDelegate) {}
+
+  /**
+   * Process raw React Native stack frames and transform them using Source Maps.
+   * Method will try to symbolicate as much data as possible, but if the Source Maps
+   * are not available, invalid or the original positions/data is not found in Source Maps,
+   * the method will return raw values - the same as supplied with `stack` parameter.
+   * For example out of 10 frames, it's possible that only first 7 will be symbolicated and the
+   * remaining 3 will be unchanged.
+   *
+   * @param logger Fastify logger instance.
+   * @param stack Raw stack frames.
+   * @returns Symbolicated stack frames.
+   */
+  async process(
+    logger: FastifyLoggerInstance,
+    stack: ReactNativeStackFrame[]
+  ): Promise<SymbolicatorResults> {
+    logger.debug({ msg: 'Filtering out unnecessary frames' })
+
+    const frames: InputStackFrame[] = []
+    for (const frame of stack) {
+      const { file } = frame
+      if (file?.startsWith('http') && !file.includes('debuggerWorker')) {
+        frames.push(frame as InputStackFrame)
+      }
+    }
+
+    try {
+      logger.debug({ msg: 'Processing frames', frames })
+
+      const processedFrames: StackFrame[] = []
+      for (const frame of frames) {
+        if (!this.sourceMapConsumerCache[frame.file]) {
+          logger.debug({
+            msg: 'Loading raw source map data',
+            fileUrl: frame.file,
+          })
+
+          const rawSourceMap = await this.delegate.getSourceMap(frame.file)
+
+          logger.debug({
+            msg: 'Creating source map instance',
+            fileUrl: frame.file,
+            sourceMapLength: rawSourceMap.length,
+          })
+          const sourceMapConsumer = await new SourceMapConsumer(rawSourceMap.toString())
+
+          logger.debug({
+            msg: 'Saving source map instance into cache',
+            fileUrl: frame.file,
+          })
+          this.sourceMapConsumerCache[frame.file] = sourceMapConsumer
+        }
+
+        logger.debug({
+          msg: 'Symbolicating frame',
+          frame,
+        })
+        const processedFrame = this.processFrame(frame)
+
+        logger.debug({
+          msg: 'Finished symbolicating frame',
+          frame,
+        })
+        processedFrames.push(processedFrame)
+      }
+
+      const codeFrame = (await this.getCodeFrame(logger, processedFrames)) ?? null
+
+      logger.debug({
+        msg: 'Finished symbolicating frames',
+        processedFrames,
+        codeFrame,
+      })
+
+      return {
+        stack: processedFrames,
+        codeFrame,
+      }
+    } finally {
+      for (const key in this.sourceMapConsumerCache) {
+        this.sourceMapConsumerCache[key].destroy()
+        delete this.sourceMapConsumerCache[key]
+      }
+    }
+  }
+
+  private processFrame(frame: InputStackFrame): StackFrame {
+    if (!frame.lineNumber || !frame.column) {
+      return {
+        ...frame,
+        collapse: false,
+      }
+    }
+
+    const consumer = this.sourceMapConsumerCache[frame.file]
+    if (!consumer) {
+      return {
+        ...frame,
+        collapse: false,
+      }
+    }
+
+    const lookup = consumer.originalPositionFor({
+      line: frame.lineNumber,
+      column: frame.column,
+    })
+
+    // If lookup fails, we get the same shape object, but with
+    // all values set to null
+    if (!lookup.source) {
+      // It is better to gracefully return the original frame
+      // than to throw an exception
+      return {
+        ...frame,
+        collapse: false,
+      }
+    }
+
+    return {
+      lineNumber: lookup.line || frame.lineNumber,
+      column: lookup.column || frame.column,
+      file: lookup.source,
+      methodName: lookup.name || frame.methodName,
+      collapse: false,
+    }
+  }
+
+  private async getCodeFrame(
+    logger: FastifyLoggerInstance,
+    processedFrames: StackFrame[]
+  ): Promise<CodeFrame | undefined> {
+    for (const frame of processedFrames) {
+      if (frame.collapse || !frame.lineNumber || !frame.column) {
+        continue
+      }
+
+      if (!this.delegate.shouldIncludeFrame(frame)) {
+        return undefined
+      }
+
+      logger.debug({
+        msg: 'Generating code frame',
+        frame,
+      })
+
+      try {
+        return {
+          content: codeFrameColumns(
+            (await this.delegate.getSource(frame.file)).toString(),
+            {
+              start: { column: frame.column, line: frame.lineNumber },
+            },
+            { forceColor: true }
+          ),
+          location: {
+            row: frame.lineNumber,
+            column: frame.column,
+          },
+          fileName: frame.file,
+        }
+      } catch (error) {
+        logger.error({
+          msg: 'Failed to create code frame',
+          error: (error as Error).message,
+        })
+      }
+
+      return undefined
+    }
+  }
+}

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

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

package/src/vendor/repack/dev-server/src/plugins/symbolicate/sybmolicatePlugin.ts

@@ -0,0 +1,48 @@
+import type { FastifyInstance } from 'fastify'
+import fastifyPlugin from 'fastify-plugin'
+
+import type { Server } from '../../types'
+import { Symbolicator } from './Symbolicator'
+import type { ReactNativeStackFrame } from './types'
+
+async function symbolicatePlugin(
+  instance: FastifyInstance,
+  {
+    delegate,
+  }: {
+    delegate: Server.Delegate
+  }
+) {
+  const symbolicator = new Symbolicator(delegate.symbolicator)
+
+  instance.post('/symbolicate', async (request, reply) => {
+    // React Native sends stack as JSON but tests content-type to text/plain, so
+    // we cannot use JSON schema to validate the body.
+
+    try {
+      const { stack } = JSON.parse(request.body as string) as {
+        stack: ReactNativeStackFrame[]
+      }
+      const platform = Symbolicator.inferPlatformFromStack(stack)
+      if (!platform) {
+        request.log.debug({ msg: 'Received stack', stack })
+        reply.badRequest('Cannot infer platform from stack trace')
+      } else {
+        request.log.debug({ msg: 'Starting symbolication', platform, stack })
+        const results = await symbolicator.process(request.log, stack)
+        reply.send(results)
+      }
+    } catch (error) {
+      request.log.error({
+        msg: 'Failed to symbolicate',
+        error: (error as Error).message,
+      })
+      reply.internalServerError()
+    }
+  })
+}
+
+export default fastifyPlugin(symbolicatePlugin, {
+  name: 'symbolicate-plugin',
+  dependencies: ['fastify-sensible'],
+})

package/src/vendor/repack/dev-server/src/plugins/symbolicate/types.ts

@@ -0,0 +1,71 @@
+/**
+ * Raw React Native stack frame.
+ */
+export interface ReactNativeStackFrame {
+  lineNumber: number | null
+  column: number | null
+  file: string | null
+  methodName: string
+}
+
+/**
+ * React Native stack frame used as input when processing by {@link Symbolicator}.
+ */
+export interface InputStackFrame extends ReactNativeStackFrame {
+  file: string
+}
+
+/**
+ * Final symbolicated stack frame.
+ */
+export interface StackFrame extends InputStackFrame {
+  collapse: boolean
+}
+
+/**
+ * Represents [@babel/core-frame](https://babeljs.io/docs/en/babel-code-frame).
+ */
+export interface CodeFrame {
+  content: string
+  location: {
+    row: number
+    column: number
+  }
+  fileName: string
+}
+
+/**
+ * Represents results of running {@link process} method on {@link Symbolicator} instance.
+ */
+export interface SymbolicatorResults {
+  codeFrame: CodeFrame | null
+  stack: StackFrame[]
+}
+
+/**
+ * Delegate with implementation for symbolication functions.
+ */
+export interface SymbolicatorDelegate {
+  /**
+   * Get source code of file in the URL.
+   *
+   * @param fileUrl A full URL pointing to a file.
+   */
+  getSource: (fileUrl: string) => Promise<string | Buffer>
+
+  /**
+   * Get source map for the file in the URL.
+   *
+   * @param fileUrl A full (usually `http:`) URL pointing to a compiled file.
+   * The URL points to a file for which to return source map, not to the source map file itself,
+   * e.g: `http://localhost:8081/index.bundle?platform=ios`.
+   */
+  getSourceMap: (fileUrl: string) => Promise<string | Buffer>
+
+  /**
+   * Check if given stack frame should be included in the new symbolicated stack.
+   *
+   * @param frame Stack frame to check.
+   */
+  shouldIncludeFrame: (frame: StackFrame) => boolean
+}

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

@@ -0,0 +1,67 @@
+import type { IncomingMessage } from 'http'
+import type { Socket } from 'net'
+
+import type { FastifyInstance } from 'fastify'
+
+import { WebSocketServer } from './WebSocketServer'
+
+/**
+ * Class for creating a WebSocket router to forward connections to the
+ * respective {@link WebSocketServer} as long as the connection is accepted for the upgrade by the
+ * server.
+ *
+ * If the connection is not accepted by any `WebSocketServer`, it will be destroyed to avoid
+ * creating handling connections and potentially throwing `ECONNRESET` errors.
+ *
+ * @category Development server
+ */
+export class WebSocketRouter {
+  /** The list of all register WebSocket servers. */
+  protected servers: WebSocketServer[] = []
+
+  /**
+   * Create new instance of `WebSocketRouter` 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 router to.
+   */
+  constructor(private fastify: FastifyInstance) {
+    this.fastify.server.on(
+      'upgrade',
+      (request: IncomingMessage, socket: Socket, head: Buffer) => {
+        const { pathname } = new URL(request.url || '', 'http://localhost')
+        let matched = false
+
+        console.log('check for upgrade', pathname)
+
+        for (const server of this.servers) {
+          if (server.shouldUpgrade(pathname)) {
+            matched = true
+            server.upgrade(request, socket, head)
+            break
+          }
+        }
+
+        if (!matched) {
+          this.fastify.log.debug({
+            msg: 'Destroying socket connection as no server was matched',
+            pathname,
+          })
+          socket.destroy()
+        }
+      }
+    )
+  }
+
+  /**
+   * Register a new {@link WebSocketServer}. New connection will now
+   * check if the given server will accept them and forward them.
+   *
+   * @param server WebSocket server to register.
+   * @returns The same instance of the WebSocket server after it's been registered.
+   */
+  registerServer<T extends WebSocketServer>(server: T): T {
+    this.servers.push(server)
+    return server
+  }
+}