@vxrn/vite-plugin-metro 2.0.0-beta.33.1 → 2.0.0-beta.362.1

package/src/transformer/babel-transformer.ts

@@ -5,20 +5,28 @@
  * 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.
+// a fork of the upstream babel-transformer that adds support for web and node
+// 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 type {
+  BabelTransformer,
+  BabelTransformerArgs,
+  BabelTransformerCacheKeyOptions,
+} from 'metro-babel-transformer'
 import assert from 'node:assert'
+import { createHash } from 'node:crypto'
+import { readFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import path from 'node:path'
 
 import type { TransformOptions } from './babel-core'
+import { substituteExpoVirtualEnvSource } from './expoVirtualEnv'
 import { loadBabelConfig } from './loadBabelConfig'
 import { transformSync } from './transformSync'
 import type { ViteCustomTransformOptions } from './types'
 
-export type ExpoBabelCaller = TransformOptions['caller'] & {
+export type MetroBabelCaller = TransformOptions['caller'] & {
   supportsReactCompiler?: boolean
   isReactServer?: boolean
   isHMREnabled?: boolean
@@ -37,7 +45,7 @@ export type ExpoBabelCaller = TransformOptions['caller'] & {
 }
 
 const debug = require('debug')(
-  'expo:metro-config:babel-transformer'
+  'vxrn:metro-config:babel-transformer'
 ) as typeof console.log
 
 function isCustomTruthy(value: any): boolean {
@@ -67,7 +75,7 @@ function getBabelCaller({
   oneViteMetroBabelConfig,
 }: Pick<BabelTransformerArgs, 'filename' | 'options'> & {
   oneViteMetroBabelConfig: boolean
-}): ExpoBabelCaller {
+}): MetroBabelCaller {
   const isNodeModule = filename.includes('node_modules')
   const isReactServer = options.customTransformOptions?.environment === 'react-server'
   const isGenericServer = options.customTransformOptions?.environment === 'node'
@@ -80,7 +88,7 @@ function getBabelCaller({
 
   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.'
+      'Warning: Missing transform.routerRoot option in Metro bundling request, falling back to `app` as routes directory.'
     )
   }
 
@@ -119,7 +127,7 @@ function getBabelCaller({
     // target environment.
     engine: stringOrUndefined(options.customTransformOptions?.engine),
 
-    // Provide the project root for accurately reading the Expo config.
+    // provide the project root for reading the app babel config
     projectRoot: options.projectRoot,
     oneViteMetroBabelConfig,
 
@@ -146,17 +154,47 @@ function stringOrUndefined(value: unknown): string | undefined {
 
 const transform: BabelTransformer['transform'] = ({
   filename,
-  src,
+  src: originalSrc,
   options,
-  // `plugins` is used for `functionMapBabelPlugin` from `metro-source-map`. Could make sense to move this to `babel-preset-expo` too.
+  // `plugins` is used for `functionMapBabelPlugin` from `metro-source-map`.
   plugins,
 }: BabelTransformerArgs): ReturnType<BabelTransformer['transform']> => {
+  if (/\.(swift|kt)$/.test(filename)) {
+    const requireFromProject = createRequire(
+      path.resolve(options.projectRoot, 'package.json')
+    )
+    const oneTransforms = requireFromProject(
+      'one/native-transforms'
+    ) as typeof import('one/native-transforms') & {
+      renderNativeSourceModule: (
+        id: string,
+        platform: string,
+        root: string
+      ) => { code: string; watchFiles: string[] }
+    }
+    originalSrc = oneTransforms.renderNativeSourceModule(
+      path.isAbsolute(filename) ? filename : path.resolve(options.projectRoot, filename),
+      options.platform ?? '',
+      options.projectRoot
+    ).code
+  }
+  // narrow optional Expo compatibility (expo/virtual/env.js and .env files
+  // only), shared with the native worker. no-Expo apps pass through byte
+  // for byte without resolving any Expo module.
+  const src = substituteExpoVirtualEnvSource({
+    filename,
+    src: originalSrc,
+    projectRoot: options.projectRoot,
+    dev: options.dev,
+    environment: options.customTransformOptions?.environment,
+  })
+
   const viteCustomTransformOptions = options.customTransformOptions?.vite
 
   const customOptionsFromVite: ViteCustomTransformOptions = (() => {
     const c: any = viteCustomTransformOptions
-    // Standalone Metro invocations (expo export, eas update) don't set
-    // customTransformOptions.vite — the plugins flow entirely through the
+    // standalone Metro invocations don't set
+    // customTransformOptions.vite. the plugins flow entirely through the
     // project's babel.config.cjs in that case. Tolerate the missing field
     // rather than throwing so a single Metro config can serve both the
     // Vite-driven and standalone paths.
@@ -210,8 +248,8 @@ const transform: BabelTransformer['transform'] = ({
       // 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.
+      // moving everything babel-related to the preset also keeps the transform
+      // requirements explicit for users who opt into babel.
       caller: getBabelCaller({
         filename,
         options,
@@ -238,8 +276,57 @@ const transform: BabelTransformer['transform'] = ({
   }
 }
 
+export function getCacheKey(options?: BabelTransformerCacheKeyOptions): string {
+  const hash = createHash('sha256')
+  hash.update('vxrn-metro-babel-transformer-v2')
+
+  const projectRoot = options?.projectRoot
+  if (!projectRoot) {
+    return hash.digest('hex')
+  }
+
+  hash.update(projectRoot)
+
+  for (const file of [
+    '.env',
+    '.env.development',
+    '.env.local',
+    '.env.development.local',
+  ]) {
+    const filename = path.join(projectRoot, file)
+    hash.update(filename)
+    try {
+      hash.update(readFileSync(filename))
+    } catch (error) {
+      if (
+        typeof error === 'object' &&
+        error !== null &&
+        'code' in error &&
+        error.code === 'ENOENT'
+      ) {
+        continue
+      }
+      throw error
+    }
+  }
+
+  hash.update(
+    JSON.stringify(
+      Object.entries(process.env)
+        .filter(
+          ([key]) =>
+            key.startsWith('ONE_PUBLIC_') || key.startsWith('EXPO_PUBLIC_')
+        )
+        .sort(([left], [right]) => left.localeCompare(right))
+    )
+  )
+
+  return hash.digest('hex')
+}
+
 const babelTransformer: BabelTransformer = {
   transform,
+  getCacheKey,
 }
 
 module.exports = babelTransformer

package/src/transformer/expoVirtualEnv.integration.test.ts

@@ -0,0 +1,106 @@
+import { execFileSync } from "node:child_process";
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import { afterAll, describe, expect, it } from "vitest";
+
+const workspaceRoot = path.resolve(__dirname, "../../../..");
+const metroBin = path.join(workspaceRoot, "node_modules/.bin/metro");
+const fixtureDirs: string[] = [];
+
+afterAll(() => {
+	for (const fixtureDir of fixtureDirs) {
+		rmSync(fixtureDir, { recursive: true, force: true });
+	}
+});
+
+describe("optional Expo env through One Metro", () => {
+	it("executes babel-preset-expo env references in development and production", () => {
+		const fixtureDir = mkdtempSync(path.join(workspaceRoot, "tmp-expo-env-"));
+		fixtureDirs.push(fixtureDir);
+
+		writeFileSync(
+			path.join(fixtureDir, "package.json"),
+			JSON.stringify({ name: "one-expo-env-fixture", private: true }),
+		);
+		writeFileSync(path.join(fixtureDir, ".watchmanconfig"), "{}\n");
+		writeFileSync(
+			path.join(fixtureDir, "tsconfig.json"),
+			JSON.stringify({ compilerOptions: { baseUrl: ".", paths: {} } }),
+		);
+		writeFileSync(
+			path.join(fixtureDir, "babel.config.cjs"),
+			`module.exports = { presets: ['babel-preset-expo'] }\n`,
+		);
+		writeFileSync(
+			path.join(fixtureDir, "metro.config.cjs"),
+			`const { withOne } = require('one/metro-config')
+module.exports = withOne(__dirname, { loadViteConfig: false })
+`,
+		);
+		writeFileSync(
+			path.join(fixtureDir, ".env"),
+			"EXPO_PUBLIC_SENTINEL=development-dotenv-value\nPRIVATE_SENTINEL=private-value\n",
+		);
+		writeFileSync(
+			path.join(fixtureDir, "index.js"),
+			`console.log('observed:' + process.env.EXPO_PUBLIC_SENTINEL)\n`,
+		);
+
+		const bundle = (dev: boolean, sentinel: string, resetCache = false) => {
+			const bundlePath = path.join(
+				fixtureDir,
+				`bundle.${dev ? "dev" : "prod"}.js`,
+			);
+			execFileSync(
+				metroBin,
+				[
+					"build",
+					"index.js",
+					"--config",
+					"metro.config.cjs",
+					"--platform",
+					"ios",
+					"--dev",
+					String(dev),
+					"--minify",
+					"false",
+					"--out",
+					bundlePath,
+					...(resetCache ? ["--reset-cache"] : []),
+				],
+				{
+					cwd: fixtureDir,
+					encoding: "utf8",
+					env: { ...process.env, EXPO_PUBLIC_SENTINEL: sentinel },
+					timeout: 180_000,
+				},
+			);
+			return {
+				code: readFileSync(bundlePath, "utf8"),
+				output: execFileSync(process.execPath, [bundlePath], {
+					cwd: fixtureDir,
+					encoding: "utf8",
+				}),
+			};
+		};
+
+		const development = bundle(true, "development-process-value", true);
+		expect(development.code).toContain("expo/virtual/env.js");
+		expect(development.output).toContain("observed:development-dotenv-value");
+		expect(development.code).not.toContain("private-value");
+
+		writeFileSync(
+			path.join(fixtureDir, ".env"),
+			"EXPO_PUBLIC_SENTINEL=updated-dotenv-value\nPRIVATE_SENTINEL=updated-private-value\n",
+		);
+		const updatedDevelopment = bundle(true, "updated-process-value");
+		expect(updatedDevelopment.output).toContain(
+			"observed:updated-dotenv-value",
+		);
+		expect(updatedDevelopment.code).not.toContain("updated-private-value");
+
+		const production = bundle(false, "production-process-value");
+		expect(production.code).not.toContain("expo/virtual/env.js");
+		expect(production.output).toContain("observed:production-process-value");
+	}, 180_000);
+});

package/src/transformer/expoVirtualEnv.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, it } from 'vitest'
+
+import { substituteExpoVirtualEnvSource } from './expoVirtualEnv'
+
+const virtualFilename = '/proj/node_modules/expo/virtual/env.js'
+const virtualSource = 'export const env = process.env;'
+
+describe('substituteExpoVirtualEnvSource', () => {
+  it('generates the require.context import in dev', () => {
+    const out = substituteExpoVirtualEnvSource({
+      filename: virtualFilename,
+      src: virtualSource,
+      projectRoot: '/proj',
+      dev: true,
+      environment: 'client',
+    })
+    expect(out).toContain('require.context("../../..",false,/^\\.\\/\\.env/)')
+    expect(out).toContain('.env.development.local')
+    expect(out).toContain('...process.env')
+  })
+
+  it('generates the naming-error proxy in production', () => {
+    const out = substituteExpoVirtualEnvSource({
+      filename: virtualFilename,
+      src: virtualSource,
+      projectRoot: '/proj',
+      dev: false,
+      environment: 'client',
+    })
+    expect(out).toContain('new Proxy')
+    expect(out).toContain('not supported in production bundles')
+  })
+
+  it('leaves the virtual module alone outside client environments', () => {
+    for (const environment of ['node', 'react-server']) {
+      expect(
+        substituteExpoVirtualEnvSource({
+          filename: virtualFilename,
+          src: virtualSource,
+          projectRoot: '/proj',
+          dev: true,
+          environment,
+        })
+      ).toBe(virtualSource)
+    }
+  })
+
+  it('leaves ordinary files alone', () => {
+    expect(
+      substituteExpoVirtualEnvSource({
+        filename: '/proj/src/app.js',
+        src: 'const a = 1',
+        projectRoot: '/proj',
+        dev: true,
+        environment: 'client',
+      })
+    ).toBe('const a = 1')
+  })
+
+  it('leaves .env files alone without Expo installed', () => {
+    const src = 'EXPO_PUBLIC_A=1\nSECRET=2\n'
+    expect(
+      substituteExpoVirtualEnvSource({
+        filename: '/proj/.env',
+        src,
+        projectRoot: '/proj-no-expo',
+        dev: true,
+        environment: 'client',
+      })
+    ).toBe(src)
+  })
+})

package/src/transformer/expoVirtualEnv.ts

@@ -0,0 +1,115 @@
+import { createRequire } from 'node:module'
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+
+/**
+ * narrow optional Expo compatibility shared by the native worker and the
+ * babel transformer, mirroring @expo/metro-config's transform worker: only
+ * expo/virtual/env.js and .env files are special, and everything else
+ * passes through untouched. apps without Expo installed never resolve or
+ * load any Expo module: the virtual file cannot match without the expo
+ * package, and .env files are left alone when the parser is absent.
+ */
+
+type ParseEnvFile = (src: string, isClient: boolean) => Record<string, string>
+
+function loadExpoParseEnvFile(projectRoot: string): ParseEnvFile | null {
+  try {
+    const requireFromProject = createRequire(path.join(projectRoot, 'package.json'))
+    const expoMetroConfigPkg = requireFromProject.resolve(
+      '@expo/metro-config/package.json'
+    )
+    const dotEnvDevelopment = requireFromProject(
+      path.join(
+        path.dirname(expoMetroConfigPkg),
+        'build',
+        'transform-worker',
+        'dot-env-development'
+      )
+    ) as { parseEnvFile?: ParseEnvFile }
+    return dotEnvDevelopment?.parseEnvFile ?? null
+  } catch {
+    return null
+  }
+}
+
+const virtualEnvPattern = /[\\/]expo[\\/]virtual[\\/]env\.js$/
+const dotEnvPattern = /(^|[\\/])\.env(\.(local|(development|production)(\.local)?))?$/
+const developmentEnvFiles = [
+  '.env',
+  '.env.development',
+  '.env.local',
+  '.env.development.local',
+]
+
+export function substituteExpoVirtualEnvSource({
+  filename,
+  src,
+  projectRoot,
+  dev,
+  environment,
+}: {
+  filename: string
+  src: string
+  projectRoot: string
+  dev: boolean | undefined
+  environment: unknown
+}): string {
+  const isClientEnvironment = environment !== 'node' && environment !== 'react-server'
+
+  // parsing the virtual env is client-only, on the server process.env is used directly.
+  if (isClientEnvironment && virtualEnvPattern.test(filename)) {
+    if (dev) {
+      // variables are merged at runtime so HMR can pick up .env edits.
+      // standard Metro's Node crawler does not index `.env` because the file
+      // has no extension, so seed the module with the same public-only merge.
+      // context modules override this snapshot when the active watcher exposes
+      // the files, preserving Expo's live-update path.
+      const fileEnv: Record<string, string> = {}
+      const parseEnvFile = loadExpoParseEnvFile(projectRoot)
+      if (parseEnvFile) {
+        for (const file of developmentEnvFiles) {
+          try {
+            Object.assign(
+              fileEnv,
+              parseEnvFile(readFileSync(path.join(projectRoot, file), 'utf8'), true)
+            )
+          } catch (error) {
+            if (
+              typeof error === 'object' &&
+              error !== null &&
+              'code' in error &&
+              error.code === 'ENOENT'
+            ) {
+              continue
+            }
+            throw error
+          }
+        }
+      }
+      const relativePath = path
+        .relative(path.dirname(filename), projectRoot)
+        .split(path.sep)
+        .join('/')
+      return `const dotEnvModules = require.context(${JSON.stringify(relativePath)},false,/^\\.\\/\\.env/);\n\nexport const env = { ...process.env, ...${JSON.stringify(fileEnv)}, ...${JSON.stringify(developmentEnvFiles)}.reduce((acc, file) => {\n  const key = './' + file;\n  return { ...acc, ...(dotEnvModules.keys().includes(key) ? dotEnvModules(key)?.default : {}) };\n}, {}) };`
+    }
+    // production inlines every value at its use site, so reaching this
+    // module at all is a bug worth naming rather than silently undefined.
+    return `\nexport const env = new Proxy({}, {\n  get(target, key) {\n    throw new Error(\`Attempting to access internal environment variable "\${key}" is not supported in production bundles. Environment variables should be inlined in production by Babel.\`);\n  },\n});`
+  }
+
+  if (dotEnvPattern.test(filename)) {
+    // parse .env files to objects with Expo's own installed parser, keeping
+    // public names only in client environments. without Expo there is
+    // nothing to substitute: no preset generates the require.context import
+    // that would load a .env module, so the source passes through exactly
+    // as it did before this file existed.
+    const parseEnvFile = loadExpoParseEnvFile(projectRoot)
+    if (!parseEnvFile) {
+      return src
+    }
+    return `export default ${JSON.stringify(parseEnvFile(src, isClientEnvironment))};`
+  }
+
+  return src
+}

package/src/transformer/loadBabelConfig.ts

@@ -31,9 +31,11 @@ export const loadBabelConfig = (() => {
       const possibleBabelRCPaths = [
         '.babelrc',
         '.babelrc.js',
+        '.babelrc.json',
         'babel.config.js',
         'babel.config.cjs',
         'babel.config.mjs',
+        'babel.config.json',
       ]
 
       const foundBabelRCPath = possibleBabelRCPaths.find((configFileName) =>
@@ -50,7 +52,7 @@ export const loadBabelConfig = (() => {
     if (!babelRC.extends) {
       babelRC.presets = [
         // { plugins: [transformImportMetaGlobPlugin] }, // Added to support Vite's `import.meta.glob`
-        require('babel-preset-expo'),
+        require('@react-native/babel-preset'),
       ]
     }