@vxrn/vite-plugin-metro 1.27.1 → 2.0.0-beta.100.1

package/src/metro-config/getMetroConfigFromViteConfig.ts

@@ -1,27 +1,73 @@
-import type { ResolvedConfig } from 'vite'
+import { searchForWorkspaceRoot, type ResolvedConfig } from 'vite'
 import { spawn } from 'node:child_process'
 import { resolve } from 'node:path'
 import micromatch from 'micromatch'
+import { getDefaultConfig } from '@react-native/metro-config'
 
-// 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.
+// metro itself is loaded from the app so its cli and config stay aligned.
+// the base config belongs to this package and matches its react-native peer.
 import type { loadConfig as loadConfigT } from 'metro'
-import type { getDefaultConfig as getDefaultConfigT } from '@expo/metro-config'
 
 import { findUserBabelConfig } from '@vxrn/compiler'
 import { projectImport, projectResolve } from '../utils/projectImport'
 import { getTerminalReporter } from '../utils/getTerminalReporter'
-import { patchExpoGoManifestHandlerMiddlewareWithCustomMainModuleName } from '../utils/patchExpoGoManifestHandlerMiddlewareWithCustomMainModuleName'
 import type { MetroPluginOptions } from '../plugins/metroPlugin'
 import type { ExtraConfig, MetroConfigExtended } from './types'
 
-type MetroInputConfig = Parameters<typeof loadConfigT>[1]
+type MetroInputConfig = NonNullable<Parameters<typeof loadConfigT>[1]>
 
 const WATCHMAN_PROBE_TIMEOUT_MS = 2000
+const expoEnvAdditionalExts = ['env', 'local', 'development']
 const watchmanResponsivePromises = new Map<string, Promise<boolean>>()
 let didWarnAboutWatchmanFallback = false
 const rootIndexBundleRequestPattern = /^(https?:\/\/[^/]+)?\/index\.bundle(?=$|[?#])/
+// expo prebuild writes an AppDelegate (ios) and MainApplication (android) whose
+// debug bundle url is `.expo/.virtual-metro-entry`. expo maps it to the main
+// entry through server.rewriteRequestUrl (see @expo/metro-config
+// src/rewriteRequestUrl.ts: `url.includes('/.expo/.virtual-metro-entry.bundle?')`
+// rewrites to the resolved entry, preserving relative vs absolute shape and
+// query). match that path to the same main entry as index.
+const expoVirtualEntryBundleRequestPattern =
+  /^(https?:\/\/[^/]+)?\/\.expo\/\.virtual-metro-entry\.bundle(?=$|[?#])/
+// keep app build output and volatile caches out of Metro's fallback watcher.
+// package dist directories remain visible because Metro resolves modules from them.
+const metroWatchExclusions = [
+  /[/\\]dist[/\\](?:static|server)(?:[/\\]|$)/,
+  /[/\\]tests[/\\][^/\\]+[/\\]dist(?:[/\\]|$)/,
+  /[/\\]\.docker(?:[/\\]|$)/,
+  /[/\\]\.vite(?:[/\\]|$)/,
+  /[/\\]node_modules[/\\]\.vxrn(?:[/\\]|$)/,
+]
+
+function enforceWorkspaceVisibility(
+  config: MetroInputConfig,
+  projectRoot: string
+): MetroInputConfig {
+  const workspaceRoot = searchForWorkspaceRoot(projectRoot)
+  if (workspaceRoot === projectRoot) return config
+
+  return {
+    ...config,
+    watchFolders: [...new Set([...(config.watchFolders ?? []), workspaceRoot])],
+    resolver: {
+      ...config.resolver,
+      nodeModulesPaths: [
+        ...new Set([
+          ...(config.resolver?.nodeModulesPaths ?? []),
+          resolve(projectRoot, 'node_modules'),
+          resolve(workspaceRoot, 'node_modules'),
+        ]),
+      ],
+    },
+  }
+}
+
+function getReactNativeDefaultConfig(projectRoot: string): MetroInputConfig {
+  return enforceWorkspaceVisibility(
+    getDefaultConfig(projectRoot) as MetroInputConfig,
+    projectRoot
+  )
+}
 
 function getPlatformFromBundleUrl(url: string): 'ios' | 'android' {
   const platform = url.match(/[?&]platform=(ios|android)(?:&|$)/)?.[1]
@@ -36,11 +82,54 @@ function rewriteMainModuleBundleUrl(
     platform: getPlatformFromBundleUrl(url),
   })
 
-  if (url.includes('/.expo/.virtual-metro-entry.bundle?')) {
-    return url.replace('.expo/.virtual-metro-entry', resolvedMainModulePath)
+  if (rootIndexBundleRequestPattern.test(url)) {
+    return url.replace(rootIndexBundleRequestPattern, `$1/${resolvedMainModulePath}.bundle`)
   }
+  return url.replace(
+    expoVirtualEntryBundleRequestPattern,
+    `$1/${resolvedMainModulePath}.bundle`
+  )
+}
+
+function isMainModuleBundleRequest(url: string) {
+  return (
+    rootIndexBundleRequestPattern.test(url) ||
+    expoVirtualEntryBundleRequestPattern.test(url)
+  )
+}
+
+function isBareSpecifier(name: string) {
+  return name !== '' && !name.startsWith('.') && !name.startsWith('/')
+}
+
+// metro parses `/one/metro-entry.bundle` to the entry `./one/metro-entry`
+// relative to the server root, which misses node_modules package lookup.
+function bareMainModuleForRequest(
+  moduleName: string,
+  mainModuleName: string | undefined
+) {
+  if (!mainModuleName || !isBareSpecifier(mainModuleName)) return undefined
+  if (moduleName === `./${mainModuleName}`) return mainModuleName
+  return undefined
+}
 
-  return url.replace(rootIndexBundleRequestPattern, `$1/${resolvedMainModulePath}.bundle`)
+// defaultConfigOverrides and Metro config loading can replace the resolver.
+// enforce package semantics on the final config while leaving every other
+// request on the resolver selected by that composition.
+function enforceBareMainModuleEntry(config: any, mainModuleName: string | undefined) {
+  if (!mainModuleName || !isBareSpecifier(mainModuleName)) return config
+  const innerResolveRequest = config?.resolver?.resolveRequest
+  return {
+    ...config,
+    resolver: {
+      ...config?.resolver,
+      resolveRequest: (context: any, moduleName: string, platform: string) => {
+        const bareMain = bareMainModuleForRequest(moduleName, mainModuleName)
+        const resolveRequest = innerResolveRequest || context.resolveRequest
+        return resolveRequest(context, bareMain ?? moduleName, platform)
+      },
+    },
+  }
 }
 
 async function isWatchmanResponsive(projectRoot: string) {
@@ -126,7 +215,7 @@ function resolveNativeTransforms(
  * Build the Metro config input WITHOUT calling Metro's `loadConfig`. Returns
  * the same shape Metro `loadConfig` expects as its second argument. Use this
  * from a project's `metro.config.cjs` so the outer `loadConfig` (driven by
- * Expo CLI / Metro CLI) is the only one that runs — avoids infinite
+ * the Metro CLI) is the only one that runs. this avoids infinite
  * recursion that would happen if the inner pipeline also called `loadConfig`
  * and re-read the same metro.config.cjs.
  */
@@ -147,70 +236,31 @@ export async function buildMetroConfigInputFromViteConfig(
     )
   }
 
-  const { getDefaultConfig } = await projectImport<{
-    getDefaultConfig: typeof getDefaultConfigT
-  }>(projectRoot, '@expo/metro-config')
-
-  const _defaultConfig: MetroInputConfig = getDefaultConfig(projectRoot) as any
+  const _defaultConfig = getReactNativeDefaultConfig(projectRoot)
 
   if (mainModuleName) {
-    const origRewriteRequestUrl = _defaultConfig!.server!.rewriteRequestUrl!
-
-    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,
-          })
-        }
-      })()
+    const origRewriteRequestUrl = _defaultConfig!.server?.rewriteRequestUrl
+    const resolveMainModuleName = () => mainModuleName
 
     extraConfig.getResolveMainModuleName = resolveMainModuleName
 
     // @ts-expect-error Metro 0.83 made this read-only in types but we need to patch it
     _defaultConfig!.server!.rewriteRequestUrl = (url) => {
-      if (
-        url.includes('/.expo/.virtual-metro-entry.bundle?') ||
-        rootIndexBundleRequestPattern.test(url)
-      ) {
+      if (isMainModuleBundleRequest(url)) {
         return rewriteMainModuleBundleUrl(url, resolveMainModuleName)
       }
-      return origRewriteRequestUrl(url)
+      return origRewriteRequestUrl?.(url) ?? url
     }
   }
 
   const existingBlockList = _defaultConfig?.resolver?.blockList
-  const buildOutputExclusions = [
-    /[/\\]dist[/\\](?:static|server)(?:[/\\]|$)/,
-    /[/\\]tests[/\\][^/\\]+[/\\]dist(?:[/\\]|$)/,
-    /[/\\]\.docker(?:[/\\]|$)/,
-    /[/\\]\.vite(?:[/\\]|$)/,
-  ]
   const blockList: RegExp[] = [
     ...(existingBlockList
       ? Array.isArray(existingBlockList)
         ? existingBlockList
         : [existingBlockList]
       : []),
-    ...buildOutputExclusions,
+    ...metroWatchExclusions,
   ]
 
   // no babel by default. the worker throws on a babel plugin it has no port
@@ -230,6 +280,15 @@ export async function buildMetroConfigInputFromViteConfig(
 
   const defaultConfig: MetroInputConfig = {
     ..._defaultConfig,
+    watcher: {
+      ..._defaultConfig?.watcher,
+      additionalExts: [
+        ...new Set([
+          ...(_defaultConfig?.watcher?.additionalExts ?? []),
+          ...expoEnvAdditionalExts,
+        ]),
+      ],
+    },
     resolver: {
       ..._defaultConfig?.resolver,
       useWatchman,
@@ -266,6 +325,10 @@ export async function buildMetroConfigInputFromViteConfig(
     },
     transformer: {
       ..._defaultConfig?.transformer,
+      // one's router and Expo's optional development env module both use
+      // require.context. Metro installs a throwing runtime stub unless this
+      // graph feature is enabled.
+      unstable_allowRequireContext: true,
       babelTransformerPath: projectResolve(
         projectRoot,
         '@vxrn/vite-plugin-metro/babel-transformer'
@@ -284,7 +347,14 @@ export async function buildMetroConfigInputFromViteConfig(
       : defaultConfigOverrides),
   }
 
-  return { defaultConfig: merged, projectRoot, extraConfig }
+  return {
+    defaultConfig: enforceBareMainModuleEntry(
+      enforceWorkspaceVisibility(merged, projectRoot),
+      mainModuleName
+    ),
+    projectRoot,
+    extraConfig,
+  }
 }
 
 export async function getMetroConfigFromViteConfig(
@@ -310,81 +380,32 @@ export async function getMetroConfigFromViteConfig(
   const { loadConfig } = await projectImport<{
     loadConfig: typeof loadConfigT
   }>(projectRoot, 'metro')
-  const { getDefaultConfig } = await projectImport<{
-    getDefaultConfig: typeof getDefaultConfigT
-  }>(projectRoot, '@expo/metro-config')
-
-  const _defaultConfig: MetroInputConfig = getDefaultConfig(projectRoot) as any
+  const _defaultConfig = getReactNativeDefaultConfig(projectRoot)
 
   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,
-          })
-        }
-      })()
+    const origRewriteRequestUrl = _defaultConfig!.server?.rewriteRequestUrl
+    const resolveMainModuleName = () => mainModuleName
 
     extraConfig.getResolveMainModuleName = resolveMainModuleName
 
     // @ts-expect-error Metro 0.83 made this read-only in types but we need to patch it
     _defaultConfig!.server!.rewriteRequestUrl = (url) => {
-      if (
-        url.includes('/.expo/.virtual-metro-entry.bundle?') ||
-        rootIndexBundleRequestPattern.test(url)
-      ) {
+      if (isMainModuleBundleRequest(url)) {
         return rewriteMainModuleBundleUrl(url, resolveMainModuleName)
       }
 
-      return origRewriteRequestUrl(url)
+      return origRewriteRequestUrl?.(url) ?? url
     }
   }
 
-  // exclude app-level build output directories from Metro's watcher to prevent
-  // FallbackWatcher from crashing on volatile dirs during parallel CI runs.
-  // block test app dist dirs and one's web build outputs, but not package
-  // dist/ dirs which Metro needs for module resolution.
   const existingBlockList = _defaultConfig?.resolver?.blockList
-  const buildOutputExclusions = [
-    /[/\\]dist[/\\](?:static|server)(?:[/\\]|$)/,
-    /[/\\]tests[/\\][^/\\]+[/\\]dist(?:[/\\]|$)/,
-    /[/\\]\.docker(?:[/\\]|$)/,
-    /[/\\]\.vite(?:[/\\]|$)/,
-  ]
   const blockList: RegExp[] = [
     ...(existingBlockList
       ? Array.isArray(existingBlockList)
         ? existingBlockList
         : [existingBlockList]
       : []),
-    ...buildOutputExclusions,
+    ...metroWatchExclusions,
   ]
 
   // no babel by default. the worker throws on a babel plugin it has no port
@@ -404,6 +425,15 @@ export async function getMetroConfigFromViteConfig(
 
   const defaultConfig: MetroInputConfig = {
     ..._defaultConfig,
+    watcher: {
+      ..._defaultConfig?.watcher,
+      additionalExts: [
+        ...new Set([
+          ...(_defaultConfig?.watcher?.additionalExts ?? []),
+          ...expoEnvAdditionalExts,
+        ]),
+      ],
+    },
     resolver: {
       ..._defaultConfig?.resolver,
       useWatchman,
@@ -448,6 +478,10 @@ export async function getMetroConfigFromViteConfig(
     },
     transformer: {
       ..._defaultConfig?.transformer,
+      // one's router and Expo's optional development env module both use
+      // require.context. Metro installs a throwing runtime stub unless this
+      // graph feature is enabled.
+      unstable_allowRequireContext: true,
       babelTransformerPath: projectResolve(
         projectRoot,
         '@vxrn/vite-plugin-metro/babel-transformer'
@@ -475,7 +509,10 @@ export async function getMetroConfigFromViteConfig(
   )
 
   return {
-    ...metroConfig,
+    ...enforceBareMainModuleEntry(
+      enforceWorkspaceVisibility(metroConfig, projectRoot),
+      mainModuleName
+    ),
     ...extraConfig,
   } as MetroConfigExtended
 }

package/src/plugins/metroPlugin.ts

@@ -9,8 +9,7 @@ import { checkAndClearMetroCacheFromVite } from '../utils/metroCacheManager'
 
 const { debug } = createDebugger('vite-plugin-metro')
 
-// For Metro and Expo, we only import types here.
-// We use `projectImport` to dynamically import the actual modules
+// for Metro, we only import types here. `projectImport` loads 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'
@@ -72,10 +71,8 @@ export type MetroPluginOptions = {
   /**
    * 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`.
+   * Changes the React Native entry point without requiring a `main` field in
+   * `package.json`.
    */
   mainModuleName?: string
   /**

package/src/transformer/babel-transformer.test.ts

@@ -0,0 +1,118 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import vm from 'node:vm'
+import { describe, expect, it } from 'vitest'
+
+import { transformFromAstSync } from './babel-core'
+// @ts-expect-error: module.exports = has no default export in types, runtime interop provides it
+import babelTransformer from './babel-transformer'
+
+const fixturesDir = path.join(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '__fixtures__'
+)
+const virtualFilename = '/proj/node_modules/expo/virtual/env.js'
+const virtualSource = 'export const env = process.env;'
+
+function runBabelTransform(src: string, filename: string, dev: boolean): any {
+  // the transformer leaks BABEL_ENV=development when it was previously
+  // unset; keep that pre-existing leak out of sibling tests.
+  const OLD_BABEL_ENV = process.env.BABEL_ENV
+  try {
+    return (babelTransformer as any).transform({
+      filename,
+      src,
+      options: {
+        projectRoot: fixturesDir,
+        dev,
+        platform: 'ios',
+        customTransformOptions: {
+          environment: 'client',
+          vite: {
+            oneViteMetroBabelConfig: true,
+            babelConfig: {
+              babelrc: false,
+              configFile: false,
+              presets: [],
+              plugins: [],
+            },
+          },
+        },
+      },
+      plugins: [],
+    })
+  } finally {
+    if (OLD_BABEL_ENV === undefined) {
+      delete process.env.BABEL_ENV
+    } else {
+      process.env.BABEL_ENV = OLD_BABEL_ENV
+    }
+  }
+}
+
+function codegen(ast: any, filename: string): string {
+  const out = transformFromAstSync(ast, virtualSource, {
+    filename,
+    babelrc: false,
+    configFile: false,
+    code: true,
+    ast: false,
+  })
+  if (!out?.code) {
+    throw new Error('codegen produced no code')
+  }
+  return out.code
+}
+
+function runCjs(
+  code: string,
+  opts: { requireImpl: (...args: any[]) => any; procEnv: Record<string, string> }
+) {
+  const module = { exports: {} as any }
+  vm.runInNewContext(code, {
+    require: opts.requireImpl,
+    module,
+    exports: module.exports,
+    process: { env: opts.procEnv },
+    console,
+  })
+  return module.exports
+}
+
+const noRequire = () => {
+  throw new Error('unexpected require call')
+}
+
+describe('babel-transformer optional expo virtual env', () => {
+  it('merges .env files over process.env in dev like upstream', () => {
+    const result = runBabelTransform(virtualSource, virtualFilename, true)
+    expect(result.ast).toBeTruthy()
+    const code = codegen(result.ast, virtualFilename)
+    expect(code).toContain('require.context')
+    expect(code).toContain('.env.development.local')
+    const contextModule: any = () => ({
+      default: { EXPO_PUBLIC_SENTINEL_DOTENV: 'dotenv-sentinel-value' },
+    })
+    contextModule.keys = () => ['./.env']
+    const requireImpl: any = noRequire
+    requireImpl.context = () => contextModule
+    const mod = runCjs(code, {
+      requireImpl,
+      procEnv: { EXPO_PUBLIC_SENTINEL_PROC: 'proc-sentinel-value' },
+    })
+    expect(mod.env.EXPO_PUBLIC_SENTINEL_DOTENV).toBe('dotenv-sentinel-value')
+    expect(mod.env.EXPO_PUBLIC_SENTINEL_PROC).toBe('proc-sentinel-value')
+  })
+
+  it('throws a naming error in production like upstream', () => {
+    const result = runBabelTransform(virtualSource, virtualFilename, false)
+    expect(result.ast).toBeTruthy()
+    const mod = runCjs(codegen(result.ast, virtualFilename), {
+      requireImpl: noRequire,
+      procEnv: {},
+    })
+    expect(() => mod.env.EXPO_PUBLIC_ANYTHING).toThrow(
+      'not supported in production bundles'
+    )
+  })
+})