vxrn 2.10.0 → 2.11.1

package/src/exports/build.ts

@@ -77,14 +77,19 @@ export const build = async (optionsIn: VXRNOptions, buildArgs: BuildArgs = {}) =
 
   const outDir = userViteConfig?.build?.outDir ?? 'dist'
 
-  const isNativeBuild = buildArgs.platform === 'ios' || buildArgs.platform === 'android'
+  const platform = buildArgs.platform
+  const isNativeBuild =
+    platform === 'ios' ||
+    platform === 'android' ||
+    platform === 'macos' ||
+    platform === 'linux'
 
   // generation reuses client assets and their manifest, but rebuilds the server
   const cleanDir =
     buildArgs.step === 'generate' && !isNativeBuild ? `${outDir}/server` : outDir
   await rm(cleanDir, { recursive: true, force: true })
 
-  if (buildArgs.platform === 'ios' || buildArgs.platform === 'android') {
+  if (isNativeBuild) {
     const { buildBundle } = await import('../rn-commands/bundle/buildBundle')
 
     return buildBundle(
@@ -94,8 +99,10 @@ export const build = async (optionsIn: VXRNOptions, buildArgs: BuildArgs = {}) =
       // default (./src/entry-native.tsx) exists only in plain vxrn apps.
       { root: options.root, vxrnEntries: optionsIn.entries },
       {
-        platform: buildArgs.platform,
-        bundleOutput: `${outDir}${sep}${buildArgs.platform}.js`,
+        platform,
+        bundleOutput: `${outDir}${sep}${platform}.js`,
+        // every native build emits imported assets beside its bundle
+        assetsDest: outDir,
         dev: false,
         entryFile: '',
         resetCache: true,

package/src/index.ts

@@ -22,6 +22,7 @@ export * from './utils/environmentUtils'
 export * from './utils/getServerEntry'
 export * from './utils/nearestPackageJson'
 export * from './utils/swiftPackageId'
+export { resolveNpmHermesc } from './utils/compileNativeDevBytecode'
 
 export * from './plugins/rollupRemoveUnusedImports'
 export * from './plugins/autoDepOptimizePlugin'

package/src/plugins/reactNativeCommonJsPlugin.ts

@@ -12,7 +12,7 @@ import { isNativeEnvironment } from '../utils/environmentUtils'
  * * https://reactnative.dev/docs/platform-specific-code#platform-specific-extensions
  * * https://v5.vite.dev/config/shared-options.html#resolve-extensions
  */
-const getNativeExtensions = (platform: 'ios' | 'android') => {
+const getNativeExtensions = (platform: 'ios' | 'android' | 'macos' | 'linux') => {
   return [
     `.${platform}.tsx`,
     `.${platform}.ts`,

package/src/plugins/reactNativeDevServer.ts

@@ -5,6 +5,7 @@ import {
   expoClientFromNativeApp,
   type NativeAppManifest,
 } from '@vxrn/utils/nativeAppManifest'
+import type { NativePlatform } from '@vxrn/utils/platformEnv'
 import {
   addConnectedNativeClient,
   removeConnectedNativeClient,
@@ -35,7 +36,7 @@ type ClientMessage = {
 
 type NativeHmrSocket = WebSocket & {
   vxrnClientId: string
-  vxrnPlatform: 'ios' | 'android'
+  vxrnPlatform: NativePlatform
 }
 
 // metro's asset server answers `/assets/<path>` for any asset file inside the
@@ -102,9 +103,11 @@ export function createReactNativeDevServerPlugin(
       const hmrWSS = new WebSocketServer({ noServer: true })
       const clientWSS = new WebSocketServer({ noServer: true })
       const messageWSS = createMessageSocket()
-      const validPlatforms: Record<string, 'ios' | 'android' | undefined> = {
+      const validPlatforms: Record<string, NativePlatform | undefined> = {
         ios: 'ios',
         android: 'android',
+        macos: 'macos',
+        linux: 'linux',
       }
       const devEngines: Record<
         string,
@@ -112,8 +115,10 @@ export function createReactNativeDevServerPlugin(
       > = {}
       const devEngineCreating: Record<string, Promise<unknown> | null> = {}
       const warnedProdBundleRequest = new Set<string>()
-      const pendingReloadPlatforms = new Set<'ios' | 'android'>()
-      let compileBytecode: ReturnType<typeof nativeDevBytecodeCompiler> | undefined
+      const pendingReloadPlatforms = new Set<NativePlatform>()
+      const compileBytecode: Partial<
+        Record<'ios' | 'macos', ReturnType<typeof nativeDevBytecodeCompiler>>
+      > = {}
 
       const devToolsSocketEndpoints = ['/inspector/device', '/inspector/debug']
       const reactNativeDevToolsUrl = `http://${typeof host === 'string' && host !== '0.0.0.0' ? host : 'localhost'}:${getBoundPort(server)}`
@@ -491,7 +496,7 @@ export function createReactNativeDevServerPlugin(
         })
       })
 
-      const getDevEngine = async (platform: 'ios' | 'android') => {
+      const getDevEngine = async (platform: NativePlatform) => {
         while (!devEngines[platform]) {
           // prevent duplicate creation from concurrent requests
           if (!devEngineCreating[platform]) {
@@ -612,9 +617,15 @@ export function createReactNativeDevServerPlugin(
         try {
           const bundle = await (await getDevEngine(platform)).getBundle()
           let body: string | Buffer = bundle.code
-          if (platform === 'ios' && url.searchParams.get('bytecode') === 'hermes') {
-            compileBytecode ||= nativeDevBytecodeCompiler(root)
-            body = await compileBytecode(
+          if (
+            (platform === 'ios' || platform === 'macos') &&
+            url.searchParams.get('bytecode') === 'hermes'
+          ) {
+            const compile = (compileBytecode[platform] ||= nativeDevBytecodeCompiler(
+              root,
+              platform
+            ))
+            body = await compile(
               bundle,
               `${url.origin}/index.bundle?platform=${platform}`
             )

package/src/rn-commands/bundle/buildBundle.ts

@@ -2,6 +2,7 @@ import FSExtra from 'fs-extra'
 import { clearTransformCache } from '@vxrn/compiler'
 import type { BundleCommandArgs } from '@vxrn/vite-plugin-metro/rn-commands'
 import { resolveConfig } from 'vite'
+import { dirname, join, resolve } from 'node:path'
 import { loadEnv } from '../../exports/loadEnv'
 import { buildNativeBundle } from '../../utils/createNativeDevEngine'
 
@@ -14,7 +15,7 @@ export async function buildBundle(
   bundleImpl: any = null
 ): Promise<void> {
   const {
-    platform, // Android is not supported yet.
+    platform,
     dev,
     bundleOutput,
     // React Native's `--bundle-encoding` names a Node Buffer encoding.
@@ -92,6 +93,17 @@ export async function buildBundle(
   })
   const builtBundle = result.code
 
+  // gradle sends drawable resources to assetsDest but packages arbitrary files
+  // from the bundle directory. DOM pages must share that assets root with JS.
+  if (platform === 'android' && assetsDest) {
+    const source = join(assetsDest, 'one-dom')
+    const destination = join(dirname(bundleOutput), 'one-dom')
+    if (resolve(source) !== resolve(destination)) {
+      FSExtra.removeSync(destination)
+      if (FSExtra.existsSync(source)) FSExtra.moveSync(source, destination)
+    }
+  }
+
   // write sourcemap if available and requested
   if (result.map && args.sourcemapOutput) {
     FSExtra.outputFileSync(args.sourcemapOutput, result.map, { encoding: 'utf8' })

package/src/runtime/native-prelude.ts

@@ -33,7 +33,13 @@ global.performance = global.performance || { now: function() { return Date.now()
 // hermes can expose addEventListener without the matching removal API. browser
 // libraries use addEventListener as their capability check, then crash during
 // cleanup. keep the incomplete host API from advertising browser event support.
-if (typeof global.addEventListener === 'function' && typeof global.removeEventListener !== 'function') {
+// the bundle runs at script scope, so a module's own top-level
+// function addEventListener declaration is also this global; only a native host function is cleared.
+if (
+  typeof global.addEventListener === 'function' &&
+  typeof global.removeEventListener !== 'function' &&
+  Function.prototype.toString.call(global.addEventListener).indexOf('[native code]') !== -1
+) {
   global.addEventListener = undefined;
 }
 

package/src/types.ts

@@ -11,7 +11,7 @@ export type BuildArgs = {
   step?: string
   only?: string
   analyze?: boolean
-  platform?: 'ios' | 'web' | 'android'
+  platform?: 'ios' | 'web' | 'android' | 'macos' | 'linux'
 }
 
 export type AfterBuildProps = {

package/src/utils/compileNativeDevBytecode.test.ts

@@ -46,7 +46,7 @@ it.each(['prebuilt', 'source'])(
           },
         })
       )
-      const compiler = nativeDevBytecodeCompiler(root)
+      const compiler = nativeDevBytecodeCompiler(root, 'ios')
       const compile = (bundle: { code: string; map: string }) =>
         compiler(bundle, 'http://localhost:8081/index.bundle?platform=ios')
       const first = { code: 'globalThis.answer = 42;', map: '' }
@@ -87,7 +87,7 @@ it('uses HERMESC_PATH without any ios/Pods', async () => {
   const root = await mkdtemp(join(tmpdir(), 'vxrn-dev-bytecode-override-'))
   process.env.HERMESC_PATH = hostHermesc()
   try {
-    const compiler = nativeDevBytecodeCompiler(root)
+    const compiler = nativeDevBytecodeCompiler(root, 'ios')
     const bytes = await compiler(
       { code: 'globalThis.answer = 42;', map: '' },
       'http://localhost:8081/index.bundle?platform=ios'
@@ -102,10 +102,10 @@ it('treats empty HERMESC_PATH as unset', async () => {
   const root = await mkdtemp(join(tmpdir(), 'vxrn-dev-bytecode-empty-'))
   process.env.HERMESC_PATH = '   '
   try {
-    expect(() => nativeDevBytecodeCompiler(root)).toThrow(
+    expect(() => nativeDevBytecodeCompiler(root, 'ios')).toThrow(
       /hermes-engine\.podspec\.json/
     )
-    expect(() => nativeDevBytecodeCompiler(root)).not.toThrow(/HERMESC_PATH is set/)
+    expect(() => nativeDevBytecodeCompiler(root, 'ios')).not.toThrow(/HERMESC_PATH is set/)
   } finally {
     await rm(root, { recursive: true, force: true })
   }
@@ -115,7 +115,7 @@ it('loudly rejects a HERMESC_PATH that points nowhere', async () => {
   const root = await mkdtemp(join(tmpdir(), 'vxrn-dev-bytecode-invalid-'))
   process.env.HERMESC_PATH = join(root, 'no-such-hermesc')
   try {
-    expect(() => nativeDevBytecodeCompiler(root)).toThrow(
+    expect(() => nativeDevBytecodeCompiler(root, 'ios')).toThrow(
       /HERMESC_PATH is set but points nowhere/
     )
   } finally {
@@ -133,7 +133,7 @@ it.runIf(process.platform !== 'win32')(
     await chmod(plain, 0o644)
     process.env.HERMESC_PATH = plain
     try {
-      expect(() => nativeDevBytecodeCompiler(root)).toThrow(
+      expect(() => nativeDevBytecodeCompiler(root, 'ios')).toThrow(
         /HERMESC_PATH is not executable/
       )
     } finally {
@@ -145,7 +145,7 @@ it.runIf(process.platform !== 'win32')(
 it('loudly rejects a root without ios/Pods when the override is unset', async () => {
   const root = await mkdtemp(join(tmpdir(), 'vxrn-dev-bytecode-nopods-'))
   try {
-    expect(() => nativeDevBytecodeCompiler(root)).toThrow(
+    expect(() => nativeDevBytecodeCompiler(root, 'ios')).toThrow(
       /hermes-engine\.podspec\.json.*HERMESC_PATH/s
     )
   } finally {
@@ -159,7 +159,7 @@ it('loudly rejects a malformed podspec when the override is unset', async () =>
     const specs = join(root, 'ios/Pods/Local Podspecs')
     await mkdir(specs, { recursive: true })
     await writeFile(join(specs, 'hermes-engine.podspec.json'), '{oops')
-    expect(() => nativeDevBytecodeCompiler(root)).toThrow(
+    expect(() => nativeDevBytecodeCompiler(root, 'ios')).toThrow(
       /hermes-engine\.podspec\.json/
     )
   } finally {

package/src/utils/compileNativeDevBytecode.ts

@@ -1,5 +1,6 @@
 import { accessSync, constants, readFileSync, statSync } from 'node:fs'
 import { execFile } from 'node:child_process'
+import { createRequire } from 'node:module'
 import { mkdir, mkdtemp, readFile, rm, writeFile } from 'node:fs/promises'
 import { tmpdir } from 'node:os'
 import { dirname, join } from 'node:path'
@@ -77,10 +78,29 @@ function resolvePodHermesc(root: string): string {
   return cliPath.replace(/\$\(PODS_ROOT\)|\$\{PODS_ROOT\}/g, pods)
 }
 
+// through react-native's own dependency graph: it pins the compiler whose
+// bytecode its hermes vm runs. the macos dev server and builds without a
+// hermes-engine pod compile with it.
+export function resolveNpmHermesc(root: string): string {
+  const require = createRequire(join(root, 'package.json'))
+  const reactNativeJson = require.resolve('react-native/package.json')
+  const nested = createRequire(reactNativeJson)
+  const compilerJson = nested.resolve('hermes-compiler/package.json')
+  const dir = compilerJson.slice(0, -'package.json'.length)
+  const bin =
+    process.platform === 'darwin'
+      ? 'osx-bin'
+      : process.platform === 'win32'
+        ? 'win64-bin'
+        : 'linux64-bin'
+  return join(dir, 'hermesc', bin, process.platform === 'win32' ? 'hermesc.exe' : 'hermesc')
+}
+
 // compile once per emitted bundle. the device can start a fresh hermes context
 // without compiling every cold route's module closures on its js thread.
-export function nativeDevBytecodeCompiler(root: string) {
-  const compiler = useHermescOverride() ?? resolvePodHermesc(root)
+export function nativeDevBytecodeCompiler(root: string, platform: 'ios' | 'macos') {
+  const compiler =
+    useHermescOverride() ?? (platform === 'ios' ? resolvePodHermesc(root) : resolveNpmHermesc(root))
   const compiled = new WeakMap<NativeDevBundle, Map<string, Promise<Buffer>>>()
 
   return (bundle: NativeDevBundle, sourceURL: string): Promise<Buffer> => {

package/src/utils/createNativeDevEngine.test.ts

@@ -32,6 +32,8 @@ import {
   normalizeNativeCommonJSInterop,
   postProcessNativeBundle,
   vxrnCompilerPlugin,
+  NATIVE_DEV_RUNTIME_END,
+  NATIVE_MODULE_SCOPE_MARKER,
   wrapNativeBundleModuleScope,
   type NativePluginContext,
 } from './createNativeDevEngine'
@@ -218,8 +220,20 @@ describe.each(['ios', 'android'] as const)('native plugin adapters on %s', (plat
         }
         runInNewContext(code, context)
         expect(Reflect.get(context, 'nativePluginResult')).toEqual([
-          { name: 'global', root, platform, dev: mode === 'dev' },
-          { name: 'direct', root, platform, dev: mode === 'dev' },
+          {
+            name: 'global',
+            root,
+            platform,
+            dev: mode === 'dev',
+            command: mode === 'dev' ? 'serve' : 'build',
+          },
+          {
+            name: 'direct',
+            root,
+            platform,
+            dev: mode === 'dev',
+            command: mode === 'dev' ? 'serve' : 'build',
+          },
           'plain',
         ])
         for (const factory of factories) {
@@ -227,6 +241,7 @@ describe.each(['ios', 'android'] as const)('native plugin adapters on %s', (plat
             root,
             platform,
             dev: mode === 'dev',
+            command: mode === 'dev' ? 'serve' : 'build',
           })
         }
       } finally {
@@ -727,8 +742,9 @@ describe('native prelude', () => {
   })
 
   it('does not advertise a host event API that cannot remove listeners', () => {
+    // a bound function prints as [native code], like a host function
     const context = {
-      addEventListener() {},
+      addEventListener: function () {}.bind(null),
     }
 
     runInNewContext(getNativePrelude({ dev: false, platform: 'ios' }), context)
@@ -736,6 +752,15 @@ describe('native prelude', () => {
     expect(Reflect.get(context, 'addEventListener')).toBeUndefined()
   })
 
+  it('keeps a javascript addEventListener without a removal API', () => {
+    const addEventListener = function addEventListener() {}
+    const context = { addEventListener }
+
+    runInNewContext(getNativePrelude({ dev: false, platform: 'ios' }), context)
+
+    expect(Reflect.get(context, 'addEventListener')).toBe(addEventListener)
+  })
+
   it('preserves a complete host event API', () => {
     const addEventListener = () => {}
     const removeEventListener = () => {}
@@ -1708,30 +1733,32 @@ describe('getNativeTransformConfig platform env defines', () => {
 })
 
 describe('wrapNativeBundleModuleScope', () => {
-  // matches the marker rolldown dev() emits at the start of the runtime region
-  const RUNTIME_MARKER = '//#region \\0rolldown/runtime.js'
-
-  it('wraps module code after the prelude so top-level vars do not leak to global', () => {
-    const prelude = 'globalThis.global = globalThis;\nglobalThis.__DEV__ = true;\n'
+  it.each([
+    ['rolldown 1.2.15', '// \\0rolldown/runtime.js'],
+    ['rolldown 1.2.13', '//#region \\0rolldown/runtime.js'],
+  ])('wraps module code after the prelude with %s module comments', (_, header) => {
+    const prelude = `globalThis.global = globalThis;\nglobalThis.__DEV__ = true;\n${NATIVE_MODULE_SCOPE_MARKER}\n`
     // a top-level `var Headers` in a script becomes a non-configurable global,
     // which is the exact leak that breaks RN's polyfillGlobal in dev
-    const body = `${RUNTIME_MARKER}\nvar fetch_hot, fetch$1, Headers, Request, Response$1;\nglobalThis.__rolldown_runtime__ = {};\n`
-
-    const out = wrapNativeBundleModuleScope(prelude + body)
-
-    const openIdx = out.indexOf(';(function() {')
-    expect(openIdx).toBeGreaterThan(-1)
-    // prelude (global setup) stays at script scope, before the wrap opens
-    expect(out.indexOf('globalThis.__DEV__')).toBeLessThan(openIdx)
-    // the leaking declaration is now inside the function scope
-    expect(out.indexOf('var fetch_hot')).toBeGreaterThan(openIdx)
-    // and the result must still be syntactically valid (balanced wrap)
-    expect(() => new Function(out)).not.toThrow()
+    const body = `${header}\nvar fetch_hot, fetch$1, Headers, Request, Response$1;\nglobalThis.__rolldown_runtime__ = {};\n`
+    const input = prelude + body
+
+    const out = wrapNativeBundleModuleScope(input)
+
+    const context = createContext({})
+    runInContext(out, context)
+    expect(runInContext('globalThis.__DEV__', context)).toBe(true)
+    expect(
+      runInContext('Object.getOwnPropertyDescriptor(globalThis, "Headers")', context)
+    ).toBeUndefined()
+    // the opener shares the marker line, so every module keeps its mapped line
+    const lineOf = (code: string) =>
+      code.split('\n').indexOf('var fetch_hot, fetch$1, Headers, Request, Response$1;')
+    expect(lineOf(out)).toBe(lineOf(input))
   })
 
-  it('is a no-op when the runtime marker is absent (e.g. prod bundle)', () => {
-    const input = 'var x = 1;\nconsole.log(x);\n'
-    expect(wrapNativeBundleModuleScope(input)).toBe(input)
+  it('fails the build when the prelude marker is missing', () => {
+    expect(() => wrapNativeBundleModuleScope('var x = 1;\n')).toThrow('script scope')
   })
 })
 
@@ -3507,9 +3534,9 @@ describe('native dev bundle post-processing failures', () => {
             // downleveled, which throws inside handleOutput.
             return {
               code: [
-                '//#region \\0rolldown/runtime.js',
+                NATIVE_MODULE_SCOPE_MARKER,
                 'class Poison { x = 1; y = 2; z = 3; }',
-                '//#endregion',
+                NATIVE_DEV_RUNTIME_END,
                 'globalThis.__postprocessProbe = new Poison();',
                 '',
               ].join('\n'),