@vxrn/vite-plugin-metro 1.1.501-1751155612296

package/src/plugins/metroPlugin.ts

@@ -0,0 +1,314 @@
+import { existsSync } from 'node:fs'
+import { readFile } from 'node:fs/promises'
+import { parse } from 'node:url'
+import type { PluginOption } from 'vite'
+import launchEditor from 'launch-editor'
+
+// For Metro and Expo, we only import types here.
+// We use `projectImport` to dynamically import the actual modules
+// at runtime to ensure they are loaded from the user's project root.
+import type MetroT from 'metro'
+import type { loadConfig as loadConfigT } from 'metro'
+import type MetroHmrServerT from 'metro/src/HmrServer'
+import type createWebsocketServerT from 'metro/src/lib/createWebsocketServer'
+import type { getDefaultConfig as getDefaultConfigT } from '@expo/metro-config'
+import type { createDevMiddleware as createDevMiddlewareT } from '@react-native/dev-middleware'
+
+import { projectImport, projectResolve } from '../utils/projectImport'
+import { getTerminalReporter } from '../utils/getTerminalReporter'
+import { patchExpoGoManifestHandlerMiddlewareWithCustomMainModuleName } from '../utils/patchExpoGoManifestHandlerMiddlewareWithCustomMainModuleName'
+import type { TransformOptions } from '../transformer/babel-core'
+
+type MetroYargArguments = Parameters<typeof loadConfigT>[0]
+type MetroInputConfig = Parameters<typeof loadConfigT>[1]
+
+export type MetroPluginOptions = {
+  argv?: MetroYargArguments
+  defaultConfigOverrides?:
+    | MetroInputConfig
+    | ((defaultConfig: MetroInputConfig) => MetroInputConfig)
+  babelConfig?: TransformOptions
+  /**
+   * Overrides the main module name which is normally defined as the `main` field in `package.json`.
+   *
+   * This will affect how `/.expo/.virtual-metro-entry.bundle` behaves.
+   *
+   * It can be used to change the entry point of the React Native app without the need of using
+   * the `main` field in `package.json`.
+   */
+  mainModuleName?: string
+}
+
+export function metroPlugin({
+  argv,
+  defaultConfigOverrides,
+  babelConfig,
+  mainModuleName,
+}: MetroPluginOptions = {}): PluginOption {
+  // let projectRoot = ''
+
+  return {
+    name: 'metro',
+    // configResolved(config) {
+    //   projectRoot = config.root
+    // },
+
+    async configureServer(server) {
+      const { logger, root: projectRoot } = server.config
+
+      const { default: Metro, loadConfig } = await projectImport<{
+        default: typeof MetroT
+        loadConfig: typeof loadConfigT
+      }>(projectRoot, 'metro')
+      const { default: MetroHmrServer } = await projectImport<{
+        default: typeof MetroHmrServerT
+      }>(projectRoot, 'metro/src/HmrServer')
+      const { default: createWebsocketServer } = await projectImport<{
+        default: typeof createWebsocketServerT
+      }>(projectRoot, 'metro/src/lib/createWebsocketServer')
+      const { getDefaultConfig } = await projectImport<{
+        getDefaultConfig: typeof getDefaultConfigT
+      }>(projectRoot, '@expo/metro-config')
+      const { createDevMiddleware } = await projectImport<{
+        createDevMiddleware: typeof createDevMiddlewareT
+      }>(projectRoot, '@react-native/dev-middleware')
+
+      const _defaultConfig: MetroInputConfig = getDefaultConfig(projectRoot) as any
+
+      if (mainModuleName) {
+        const origRewriteRequestUrl = _defaultConfig!.server!.rewriteRequestUrl!
+
+        // We need to patch Expo's default `config.server.rewriteRequestUrl`
+        // to change how URLs like '/.expo/.virtual-metro-entry.bundle?' are
+        // rewritten.
+        // But since that function is difficult to override, here we borrow
+        // the ExpoGoManifestHandlerMiddleware and use it to resolve the
+        // URL to the main module name.
+        const resolveMainModuleName: (p: { platform: 'ios' | 'android' }) => string =
+          await (async () => {
+            const ExpoGoManifestHandlerMiddleware = (
+              await projectImport(
+                projectRoot,
+                '@expo/cli/build/src/start/server/middleware/ExpoGoManifestHandlerMiddleware.js'
+              )
+            ).default.ExpoGoManifestHandlerMiddleware
+
+            const manifestHandlerMiddleware = new ExpoGoManifestHandlerMiddleware(projectRoot, {})
+
+            patchExpoGoManifestHandlerMiddlewareWithCustomMainModuleName(
+              manifestHandlerMiddleware,
+              mainModuleName
+            )
+
+            return (p) => {
+              return manifestHandlerMiddleware.resolveMainModuleName({
+                pkg: { main: mainModuleName },
+                platform: p.platform,
+              })
+            }
+          })()
+
+        _defaultConfig!.server!.rewriteRequestUrl = (url) => {
+          if (url.includes('/.expo/.virtual-metro-entry.bundle?')) {
+            const resolvedMainModulePath = resolveMainModuleName({
+              platform: 'ios', // we probably need to handle android here, but currently in our use case this won't affect the result
+            })
+
+            return url.replace('.expo/.virtual-metro-entry', resolvedMainModulePath)
+          }
+
+          return origRewriteRequestUrl(url)
+        }
+      }
+
+      const defaultConfig: MetroInputConfig = {
+        ..._defaultConfig,
+        resolver: {
+          ..._defaultConfig?.resolver,
+          sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'mjs', 'cjs'], // `one` related packages are using `.mjs` extensions. This somehow fixes `.native` files not being resolved correctly when `.mjs` files are present.
+          resolveRequest: (context, moduleName, platform) => {
+            const origResolveRequestFn =
+              _defaultConfig?.resolver?.resolveRequest || context.resolveRequest
+
+            // HACK: Do not assert the "import" condition for `@babel/runtime`. This
+            // is a workaround for ESM <-> CJS interop, as we need the CJS versions of
+            // `@babel/runtime` helpers.
+            //
+            // This hack is originally made in Metro and was removed in `v0.81.3`, but
+            // we somehow still need it.
+            // See: https://github.com/facebook/metro/commit/9552a64a0487af64cd86d8591e203a55c59c9686#diff-b03f1b511a2be7abd755b9c2561e47f513f84931466f2cc20a17a4238d70f12bL370-L378
+            //
+            // Resolves the "TypeError: _interopRequireDefault is not a function (it is Object)" error.
+            if (moduleName.startsWith('@babel/runtime')) {
+              const contextOverride = {
+                ...context,
+                unstable_conditionNames: context.unstable_conditionNames.filter(
+                  (c) => c !== 'import'
+                ),
+              }
+              return origResolveRequestFn(contextOverride, moduleName, platform)
+            }
+
+            return origResolveRequestFn(context, moduleName, platform)
+          },
+        },
+        transformer: {
+          ..._defaultConfig?.transformer,
+          babelTransformerPath: projectResolve(
+            projectRoot,
+            '@vxrn/vite-plugin-metro/babel-transformer'
+          ),
+          // TODO: This is what Expo is doing, but do we really need this?
+          publicPath: '/assets/?unstable_path=.',
+        },
+        reporter: await getTerminalReporter(projectRoot),
+      }
+
+      const config = await loadConfig(
+        {
+          cwd: projectRoot,
+          projectRoot,
+          'reset-cache': !!process.env.METRO_RESET_CACHE,
+          ...argv,
+        },
+        {
+          ...defaultConfig,
+          ...(typeof defaultConfigOverrides === 'function'
+            ? defaultConfigOverrides(defaultConfig)
+            : defaultConfigOverrides),
+        }
+      )
+
+      const { middleware, end, metroServer } = await Metro.createConnectMiddleware(config, {
+        // Force enable file watching, even on CI.
+        // This is needed for HMR tests to work on CI.
+        watch: true,
+      })
+
+      // Patch transformFile to inject custom transform options.
+      const originalTransformFile = metroServer
+        .getBundler()
+        .getBundler()
+        .transformFile.bind(metroServer.getBundler().getBundler())
+      metroServer.getBundler().getBundler().transformFile = async (
+        filePath: string,
+        transformOptions: Parameters<typeof originalTransformFile>[1],
+        fileBuffer?: Parameters<typeof originalTransformFile>[2]
+      ) => {
+        return originalTransformFile(
+          filePath,
+          {
+            ...transformOptions,
+            customTransformOptions: {
+              ...transformOptions.customTransformOptions,
+              vite: {
+                babelConfig,
+              },
+            },
+          },
+          fileBuffer
+        )
+      }
+
+      const hmrServer = new MetroHmrServer(
+        metroServer.getBundler(),
+        metroServer.getCreateModuleId(),
+        config
+      )
+
+      const reactNativeDevToolsUrl = `http://${typeof server.config.server.host === 'boolean' ? 'localhost' : server.config.server.host}:${server.config.server.port}`
+      const { middleware: rnDevtoolsMiddleware, websocketEndpoints: rnDevtoolsWebsocketEndpoints } =
+        createDevMiddleware({
+          projectRoot,
+          serverBaseUrl: reactNativeDevToolsUrl,
+          logger: console,
+        })
+
+      server.middlewares.use(async (req, res, next) => {
+        try {
+          // Just for debugging purposes.
+          if (req.url?.includes('.bundle')) {
+            const VITE_METRO_DEBUG_BUNDLE = process.env.VITE_METRO_DEBUG_BUNDLE
+            if (VITE_METRO_DEBUG_BUNDLE) {
+              if (existsSync(VITE_METRO_DEBUG_BUNDLE)) {
+                console.info(`  !!! - serving debug bundle from`, VITE_METRO_DEBUG_BUNDLE)
+                const content = await readFile(VITE_METRO_DEBUG_BUNDLE, 'utf-8')
+                res.setHeader('Content-Type', 'application/javascript')
+                res.end(content)
+                return
+              }
+            }
+          }
+
+          // Handle `isPackagerRunning` request from native app.
+          // Without this, people may see a `No script URL provided. Make sure the packager is running or you have embedded a JS bundle in your application bundle.`, `unsanitizedScriptURLString = (null)` error in their native app running with the "Debug" configuration.
+          // See: https://github.com/facebook/react-native/blob/v0.80.0-rc.4/packages/react-native/React/Base/RCTBundleURLProvider.mm#L87-L113
+          if (
+            req.url === '/status' &&
+            req.headers['user-agent']?.includes(
+              'CFNetwork/'
+            ) /* The path (`/status`) is too general and may conflict with the user's web app, so we also check the User-Agent header to ensure it's a request from a native app. */ /* TODO: Android */
+          ) {
+            res.statusCode = 200
+            res.end('packager-status:running')
+            return
+          }
+
+          if (req.url === '/open-stack-frame' && req.method === 'POST') {
+            let body = ''
+
+            req.on('data', (chunk) => {
+              body += chunk.toString()
+            })
+
+            req.on('end', () => {
+              try {
+                const frame = JSON.parse(body)
+
+                // https://github.com/yyx990803/launch-editor/blob/master/packages/launch-editor-middleware/index.js
+                launchEditor(frame.file)
+                res.statusCode = 200
+                res.end('Stack frame opened in editor')
+              } catch (e) {
+                console.error('Failed to parse stack frame:', e)
+                res.statusCode = 400
+                return res.end('Invalid stack frame JSON')
+              }
+            })
+
+            return
+          }
+
+          // this is the actual Metro middleware that handles bundle requests
+          await (middleware as any)(req, res, next)
+        } catch (error) {
+          // TODO: handle errors from Metro middleware?
+          console.error('Metro middleware error:', error)
+          next()
+        }
+      })
+
+      server.middlewares.use(rnDevtoolsMiddleware)
+
+      const websocketEndpoints = {
+        '/hot': createWebsocketServer({
+          websocketServer: hmrServer,
+        }),
+        ...rnDevtoolsWebsocketEndpoints,
+      }
+
+      server.httpServer?.on('upgrade', (request, socket, head) => {
+        const { pathname } = parse(request.url!)
+
+        if (pathname != null && websocketEndpoints[pathname]) {
+          websocketEndpoints[pathname].handleUpgrade(request, socket, head, (ws) => {
+            websocketEndpoints[pathname].emit('connection', ws, request)
+          })
+        } else {
+          // TODO: Do we need this?
+          // socket.destroy()
+        }
+      })
+    },
+  }
+}

package/src/transformer/babel-core.ts

@@ -0,0 +1,7 @@
+// re-exported because babel/core is hard to mock.
+export {
+  type PluginItem,
+  type TransformOptions,
+  transformFromAstSync,
+  transformSync,
+} from '@babel/core';

package/src/transformer/babel-transformer.ts

@@ -0,0 +1,211 @@
+/**
+ * Copyright (c) 650 Industries (Expo). All rights reserved.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// A fork of the upstream babel-transformer that uses Expo-specific babel defaults
+// and adds support for web and Node.js environments via `isServer` on the Babel caller.
+// See:
+// * https://github.com/facebook/metro/blob/main/packages/metro-babel-transformer/src/index.js
+// * https://github.com/expo/expo/blob/main/packages/%40expo/metro-config/src/babel-transformer.ts
+import type { BabelTransformer, BabelTransformerArgs } from 'metro-babel-transformer'
+import assert from 'node:assert'
+
+import type { TransformOptions } from './babel-core'
+import { loadBabelConfig } from './loadBabelConfig'
+import { transformSync } from './transformSync'
+
+export type ExpoBabelCaller = TransformOptions['caller'] & {
+  supportsReactCompiler?: boolean
+  isReactServer?: boolean
+  isHMREnabled?: boolean
+  isServer?: boolean
+  isNodeModule?: boolean
+  preserveEnvVars?: boolean
+  isDev?: boolean
+  asyncRoutes?: boolean
+  baseUrl?: string
+  engine?: string
+  bundler?: 'metro' | (string & object)
+  platform?: string | null
+  routerRoot?: string
+  projectRoot: string
+}
+
+const debug = require('debug')('expo:metro-config:babel-transformer') as typeof console.log
+
+function isCustomTruthy(value: any): boolean {
+  return String(value) === 'true'
+}
+
+function memoize<T extends (...args: any[]) => any>(fn: T): T {
+  const cache = new Map<string, ReturnType<T>>()
+  return ((...args: any[]) => {
+    const key = JSON.stringify(args)
+    if (cache.has(key)) {
+      return cache.get(key)
+    }
+    const result = fn(...args)
+    cache.set(key, result)
+    return result
+  }) as T
+}
+
+const memoizeWarning = memoize((message: string) => {
+  debug(message)
+})
+
+function getBabelCaller({
+  filename,
+  options,
+}: Pick<BabelTransformerArgs, 'filename' | 'options'>): ExpoBabelCaller {
+  const isNodeModule = filename.includes('node_modules')
+  const isReactServer = options.customTransformOptions?.environment === 'react-server'
+  const isGenericServer = options.customTransformOptions?.environment === 'node'
+  const isServer = isReactServer || isGenericServer
+
+  const routerRoot =
+    typeof options.customTransformOptions?.routerRoot === 'string'
+      ? decodeURI(options.customTransformOptions.routerRoot)
+      : undefined
+
+  if (routerRoot == null) {
+    memoizeWarning(
+      'Warning: Missing transform.routerRoot option in Metro bundling request, falling back to `app` as routes directory. This can occur if you bundle without Expo CLI or expo/metro-config.'
+    )
+  }
+
+  return {
+    name: 'metro',
+    bundler: 'metro',
+    platform: options.platform,
+    // Empower the babel preset to know the env it's bundling for.
+    // Metro automatically updates the cache to account for the custom transform options.
+    isServer,
+
+    // Enable React Server Component rules for AST. The naming maps to the resolver property `--conditions=react-server`.
+    isReactServer,
+
+    // The base url to make requests from, used for hosting from non-standard locations.
+    baseUrl:
+      typeof options.customTransformOptions?.baseUrl === 'string'
+        ? decodeURI(options.customTransformOptions.baseUrl)
+        : '',
+
+    // Ensure we always use a mostly-valid router root.
+    routerRoot: routerRoot ?? 'app',
+
+    isDev: options.dev,
+
+    // This value indicates if the user has disabled the feature or not.
+    // Other criteria may still cause the feature to be disabled, but all inputs used are
+    // already considered in the cache key.
+    preserveEnvVars: isCustomTruthy(options.customTransformOptions?.preserveEnvVars)
+      ? true
+      : undefined,
+    asyncRoutes: isCustomTruthy(options.customTransformOptions?.asyncRoutes) ? true : undefined,
+    // Pass the engine to babel so we can automatically transpile for the correct
+    // target environment.
+    engine: stringOrUndefined(options.customTransformOptions?.engine),
+
+    // Provide the project root for accurately reading the Expo config.
+    projectRoot: options.projectRoot,
+
+    isNodeModule,
+
+    isHMREnabled: options.hot,
+
+    // Set the standard Babel flag to disable ESM transformations.
+    supportsStaticESM:
+      isCustomTruthy(options.customTransformOptions?.optimize) || options.experimentalImportSupport,
+
+    // Enable React compiler support in Babel.
+    // TODO: Remove this in the future when compiler is on by default.
+    supportsReactCompiler: isCustomTruthy(options.customTransformOptions?.reactCompiler)
+      ? true
+      : undefined,
+  }
+}
+
+function stringOrUndefined(value: unknown): string | undefined {
+  return typeof value === 'string' ? value : undefined
+}
+
+const transform: BabelTransformer['transform'] = ({
+  filename,
+  src,
+  options,
+  // `plugins` is used for `functionMapBabelPlugin` from `metro-source-map`. Could make sense to move this to `babel-preset-expo` too.
+  plugins,
+}: BabelTransformerArgs): ReturnType<BabelTransformer['transform']> => {
+  const customOptionsFromVite: {
+    [key: string]: unknown
+  } = options.customTransformOptions?.vite || ({} as any)
+  const babelConfigFromVitePlugin: TransformOptions = customOptionsFromVite.babelConfig || {}
+
+  const OLD_BABEL_ENV = process.env.BABEL_ENV
+  process.env.BABEL_ENV = options.dev ? 'development' : process.env.BABEL_ENV || 'production'
+  try {
+    const babelConfig: TransformOptions = {
+      // ES modules require sourceType='module' but OSS may not always want that
+      sourceType: 'unambiguous',
+
+      // The output we want from Babel methods
+      ast: true,
+      code: false,
+      // NOTE(EvanBacon): We split the parse/transform steps up to accommodate
+      // Hermes parsing, but this defaults to cloning the AST which increases
+      // the transformation time by a fair amount.
+      // You get this behavior by default when using Babel's `transform` method directly.
+      cloneInputAst: false,
+
+      // Options for debugging
+      cwd: options.projectRoot,
+      filename,
+      highlightCode: true,
+
+      ...babelConfigFromVitePlugin,
+
+      ...loadBabelConfig(options),
+
+      babelrc:
+        typeof options.enableBabelRCLookup === 'boolean' ? options.enableBabelRCLookup : true,
+
+      plugins: [...(babelConfigFromVitePlugin.plugins || []), ...(plugins as any)],
+
+      // NOTE(EvanBacon): We heavily leverage the caller functionality to mutate the babel config.
+      // This compensates for the lack of a format plugin system in Metro. Users can modify the
+      // all (most) of the transforms in their local Babel config.
+      // This also helps us keep the transform layers small and focused on a single task. We can also use this to
+      // ensure the Babel config caching is more accurate.
+      // Additionally, by moving everything Babel-related to the Babel preset, it makes it easier for users to reason
+      // about the requirements of an Expo project, making it easier to migrate to other transpilers in the future.
+      caller: getBabelCaller({ filename, options }),
+    }
+
+    const result = transformSync(src, babelConfig, options)
+
+    // The result from `transformFromAstSync` can be null (if the file is ignored)
+    if (!result) {
+      // BabelTransformer specifies that the `ast` can never be null but
+      // the function returns here. Discovered when typing `BabelNode`.
+      // @ts-expect-error: see https://github.com/facebook/react-native/blob/401991c3f073bf734ee04f9220751c227d2abd31/packages/react-native-babel-transformer/src/index.js#L220-L224
+      return { ast: null }
+    }
+
+    assert(result.ast)
+    return { ast: result.ast, metadata: result.metadata }
+  } finally {
+    if (OLD_BABEL_ENV) {
+      process.env.BABEL_ENV = OLD_BABEL_ENV
+    }
+  }
+}
+
+const babelTransformer: BabelTransformer = {
+  transform,
+}
+
+module.exports = babelTransformer

package/src/transformer/loadBabelConfig.ts

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 650 Industries (Expo). All rights reserved.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import fs from 'node:fs'
+import path from 'node:path'
+
+import type { TransformOptions } from './babel-core'
+
+/**
+ * Returns a memoized function that checks for the existence of a
+ * project-level .babelrc file. If it doesn't exist, it reads the
+ * default React Native babelrc file and uses that.
+ */
+export const loadBabelConfig = (() => {
+  let babelRC: Pick<TransformOptions, 'extends' | 'presets'> | null = null
+
+  return function _getBabelRC({ projectRoot }: { projectRoot: string }) {
+    if (babelRC !== null) {
+      return babelRC
+    }
+
+    babelRC = {}
+
+    if (projectRoot) {
+      // Check for various babel config files in the project root
+      // TODO(EvanBacon): We might want to disable babelrc lookup when the user specifies `enableBabelRCLookup: false`.
+      const possibleBabelRCPaths = ['.babelrc', '.babelrc.js', 'babel.config.js']
+
+      const foundBabelRCPath = possibleBabelRCPaths.find((configFileName) =>
+        fs.existsSync(path.resolve(projectRoot, configFileName))
+      )
+
+      // Extend the config if a babel config file is found
+      if (foundBabelRCPath) {
+        babelRC.extends = path.resolve(projectRoot, foundBabelRCPath)
+      }
+    }
+
+    // Use the default preset for react-native if no babel config file is found
+    if (!babelRC.extends) {
+      babelRC.presets = [
+        // { plugins: [transformImportMetaGlobPlugin] }, // Added to support Vite's `import.meta.glob`
+        require('babel-preset-expo'),
+      ]
+    }
+
+    return babelRC
+  }
+})()

package/src/transformer/transformSync.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 650 Industries (Expo). All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import * as babel from './babel-core';
+
+// TS detection conditions copied from @react-native/babel-preset
+function isTypeScriptSource(fileName: string): boolean {
+  return fileName?.endsWith('.ts');
+}
+
+function isTSXSource(fileName: string): boolean {
+  return fileName?.endsWith('.tsx');
+}
+
+export function transformSync(
+  src: string,
+  babelConfig: babel.TransformOptions,
+  { hermesParser }: { hermesParser?: boolean }
+) {
+  const isTypeScript =
+    isTypeScriptSource(babelConfig.filename!) || isTSXSource(babelConfig.filename!);
+
+  if (isTypeScript) {
+    return parseWithBabel(src, babelConfig);
+  }
+
+  if (
+    !isTypeScript &&
+    // The Hermes parser doesn't support comments or babel proposals such as export default from, meaning it has lower compatibility with larger parts
+    // of the ecosystem.
+    // However, React Native ships with flow syntax that isn't supported in Babel so we need to use Hermes for those files.
+    // We can try to quickly detect if the file uses flow syntax by checking for the @flow pragma which is present in every React Native file.
+    (hermesParser || src.includes(' @flow'))
+  ) {
+    return parseWithHermes(src, babelConfig);
+  }
+
+  return parseWithBabel(src, babelConfig);
+}
+
+function parseWithHermes(src: string, babelConfig: babel.TransformOptions) {
+  const sourceAst = require('hermes-parser').parse(src, {
+    babel: true,
+    sourceType: babelConfig.sourceType,
+  });
+  return babel.transformFromAstSync(sourceAst, src, babelConfig);
+}
+
+function parseWithBabel(src: string, babelConfig: babel.TransformOptions) {
+  return babel.transformSync(src, babelConfig);
+}

package/src/utils/getTerminalReporter.ts

@@ -0,0 +1,42 @@
+// For Metro and Expo, we only import types here.
+// We use `projectImport` to dynamically import the actual modules
+// at runtime to ensure they are loaded from the user's project root.
+import type { TerminalReporter as TerminalReporterT, Terminal as TerminalT } from 'metro'
+import colors from 'picocolors'
+
+import { projectImport } from './projectImport'
+
+export async function getTerminalReporter(projectRoot: string) {
+  const { Terminal, TerminalReporter } = await projectImport<{
+    Terminal: typeof TerminalT
+    TerminalReporter: typeof TerminalReporterT
+  }>(projectRoot, 'metro')
+
+  let metroWelcomeMessagePrinted = false
+
+  const terminal = new Terminal(process.stdout)
+  ;(terminal as any)._log = terminal.log
+  terminal.log = (message, ...rest) => {
+    // Minimal Metro welcome message.
+    // See: https://github.com/facebook/metro/blob/v0.82.4/packages/metro/src/lib/TerminalReporter.js#L278-L283
+    if (!metroWelcomeMessagePrinted) {
+      const match = message.match(/Welcome to Metro.+v(\d+\.\d+\.\d+)/)
+      if (match) {
+        const version = match[1]
+        metroWelcomeMessagePrinted = true
+        return (terminal as any)._log(colors.dim(`\n  Using Metro Bundler v${version}`), ...rest)
+      }
+    }
+
+    return (terminal as any)._log(message, ...rest)
+  }
+
+  // See: https://github.com/facebook/metro/blob/v0.82.4/packages/metro/src/lib/TerminalReporter.js
+  const terminalReporter = new TerminalReporter(terminal)
+
+  // Do not print a giant Metro logo on start.
+  // See: https://github.com/facebook/metro/blob/v0.82.4/packages/metro/src/lib/TerminalReporter.js#L230-L232
+  ;(terminalReporter as any)._logInitializing = () => {}
+
+  return terminalReporter
+}