vxrn 1.12.8 → 1.13.0

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

@@ -2,29 +2,7 @@ import path from 'node:path'
 import FSExtra from 'fs-extra'
 import { bundle as metroBundle } from '@vxrn/vite-plugin-metro/rn-commands'
 import { loadEnv } from '../../exports/loadEnv'
-import { fillOptions } from '../../config/getOptionsFilled'
-import { getReactNativeBundle } from '../../utils/getReactNativeBundle'
-
-async function transformForHermes(code: string): Promise<string> {
-  const babel = await import('@babel/core')
-  const result = await babel.transformAsync(code, {
-    compact: false,
-    retainLines: true,
-    assumptions: {
-      setPublicClassFields: true,
-      privateFieldsAsSymbols: true,
-    },
-    plugins: [
-      '@babel/plugin-transform-class-properties',
-      '@babel/plugin-transform-private-methods',
-      '@babel/plugin-transform-private-property-in-object',
-      '@babel/plugin-transform-classes',
-      '@babel/plugin-transform-async-to-generator',
-    ],
-    sourceType: 'script',
-  })
-  return result?.code || code
-}
+import { buildNativeBundle } from '../../utils/createNativeDevEngine'
 
 export type BundleCommandArgs = {
   assetsDest?: string
@@ -94,51 +72,20 @@ export async function buildBundle(
   loadEnv(dev ? 'development' : 'production', root)
 
   if (!dev) {
-    // Vite will set `process.env.NODE_ENV` to 'development' if it's not set. See: https://github.com/vitejs/vite/blob/v6.0.7/packages/vite/src/node/config.ts#L973-L977.
-    // So we need to do this here to make sure that won't break our production build, since some plugins' behavior will be overridden if `NODE_ENV` is set to 'development'.
     process.env.NODE_ENV = 'production'
   }
 
-  let nativeEntry: string | undefined = undefined
-
-  // If there's an `app` directory, then we assume that the user is using One.
-  // FIXME: should use a better way to detect this.
-  const appDir = path.join(root, 'app')
-  if (FSExtra.existsSync(appDir) && FSExtra.statSync(appDir).isDirectory()) {
-    console.info('One project detected. Using One virtual entry.')
-    // TODO: Hardcoded for now to work with one. See `virtualEntryIdNative` in `packages/one/src/vite/virtualEntryPlugin.ts` and also `native: virtualEntryIdNative` in `packages/one/src/cli/run.ts`.
-    nativeEntry = 'virtual:one-entry-native'
-  }
-
-  const optionsIn = {
+  console.info(`[vxrn] building native bundle for ${platform}...`)
+  const result = await buildNativeBundle({
     root,
-    host: '0.0.0.0', // TODO: Hardcoded for now.
-    entries: nativeEntry ? { native: nativeEntry } : {},
-  }
-
-  const options = await fillOptions(optionsIn, { mode: dev ? 'dev' : 'prod' })
-  let builtBundle = await getReactNativeBundle(options, platform, {
-    mode: dev ? 'dev' : 'prod',
-    assetsDest,
-    useCache: false,
+    platform,
+    dev,
   })
+  const builtBundle = result.code
 
-  // Assuming we are not enabling this on native as it will break anyway.
-  builtBundle = builtBundle.replace(/process\.env\.VXRN_REACT_19/g, 'false')
-
-  if (!dev) {
-    // TODO: There should be a legitimate way to do this.
-    builtBundle = builtBundle.replace(
-      '.getEnforcing("DevSettings")',
-      '.patched_getEnforcing_DevSettings_will_not_work_in_production'
-    )
-  }
-
-  // hermes-compiler 0.14.x doesn't support class expressions or private fields,
-  // run babel to downlevel if needed (same as what metro does)
-  if (!dev && /\bclass\s+[a-zA-Z]/.test(builtBundle)) {
-    console.info('Transforming bundle for Hermes compatibility...')
-    builtBundle = await transformForHermes(builtBundle)
+  // write sourcemap if available and requested
+  if (result.map && args.sourcemapOutput) {
+    FSExtra.writeFileSync(args.sourcemapOutput, result.map, { encoding: 'utf8' })
   }
 
   console.info(`Writing bundle to ${bundleOutput}...`)

package/src/runtime/hmr-client.ts

@@ -0,0 +1,215 @@
+/**
+ * HMR client for React Native.
+ * Ported from rollipop (https://github.com/leegeunhyeok/rollipop)
+ *
+ * connects to dev server WebSocket, handles HMR messages,
+ * and integrates with React Native's DevLoadingView and LogBox.
+ */
+
+import type { HMRClientLogLevel, HMRClientMessage, HMRServerMessage } from './hmr-types'
+
+declare var __DEV__: boolean
+
+interface HMRClientNativeInterface {
+  enable(): void
+  disable(): void
+  registerBundle(requestUrl: string): void
+  log(level: string, data: any[]): void
+  setup(
+    platform: string,
+    bundleEntry: string,
+    host: string,
+    port: number | string,
+    isEnabled: boolean,
+    scheme?: string
+  ): void
+}
+
+interface SocketInstance {
+  socket: WebSocket
+  origin: string
+}
+
+class HMRClient implements HMRClientNativeInterface {
+  static readonly STARTUP_ERROR = 'Expected HMRClient.setup() call at startup'
+  static readonly MAX_PENDING_LOGS = 100
+
+  private enabled = true
+  private _socketHolder: SocketInstance | null = null
+  private unavailableMessage: string | null = null
+  private compileErrorMessage: string | null = null
+  private pendingUpdatesCount = 0
+  private readonly pendingLogs: [HMRClientLogLevel, any[]][] = []
+
+  enable() {
+    if (this.unavailableMessage) throw new Error(this.unavailableMessage)
+    if (this._socketHolder == null) throw new Error(HMRClient.STARTUP_ERROR)
+    this.enabled = true
+    this.showCompileErrorIfNeeded()
+  }
+
+  disable() {
+    this.enabled = false
+  }
+
+  registerBundle(_requestUrl: string) {
+    // no-op for rolldown HMR
+  }
+
+  log(level: HMRClientLogLevel, data: any[]) {
+    if (this._socketHolder == null) {
+      this.pendingLogs.push([level, data])
+      if (this.pendingLogs.length > HMRClient.MAX_PENDING_LOGS) {
+        this.pendingLogs.shift()
+      }
+      return
+    }
+
+    try {
+      const stringData = data.map((item) =>
+        typeof item === 'string' ? item : JSON.stringify(item, null, 2)
+      )
+      this.send({ type: 'hmr:log', level, data: stringData })
+    } catch {}
+  }
+
+  setup(
+    platform: string,
+    bundleEntry: string,
+    host: string,
+    port: number | string,
+    isEnabled = true,
+    protocol = 'http'
+  ) {
+    if (!__DEV__) throw new Error('HMR is only available in development mode')
+    if (this._socketHolder != null)
+      throw new Error('Cannot initialize HMRClient more than once')
+    if (platform == null) throw new Error('Missing required parameter `platform`')
+    if (bundleEntry == null) throw new Error('Missing required parameter `bundleEntry`')
+    if (host == null) throw new Error('Missing required parameter `host`')
+
+    const serverHost = port !== null && port !== '' ? `${host}:${port}` : host
+    const origin = `${protocol}://${serverHost}`
+    const socket = new globalThis.WebSocket(`${origin}/hot`)
+
+    this._socketHolder = { socket, origin }
+
+    socket.addEventListener('open', () => {
+      socket.send(
+        JSON.stringify({
+          type: 'hmr:connected',
+          bundleEntry,
+          platform,
+        } satisfies HMRClientMessage)
+      )
+      this.handleConnection()
+    })
+
+    socket.addEventListener('error', (event) => {
+      this.handleConnectionError(
+        (event as any).error || new Error('WebSocket error'),
+        origin
+      )
+    })
+
+    socket.addEventListener('message', (event) => {
+      this.handleMessage(event)
+    })
+
+    socket.addEventListener('close', (event) => {
+      this.handleClose(event)
+    })
+
+    // connect to rolldown runtime
+    if (globalThis.__rolldown_runtime__ != null) {
+      globalThis.__rolldown_runtime__.setup(socket, origin)
+    }
+
+    this.enabled = isEnabled
+  }
+
+  private send(payload: HMRClientMessage) {
+    if (this._socketHolder == null) return
+    if (this._socketHolder.socket.readyState === WebSocket.OPEN) {
+      this._socketHolder.socket.send(JSON.stringify(payload))
+    }
+  }
+
+  private flushEarlyLogs() {
+    if (
+      this._socketHolder == null ||
+      this._socketHolder.socket.readyState !== WebSocket.OPEN
+    ) {
+      return
+    }
+    for (const [level, data] of this.pendingLogs) {
+      this.send({ type: 'hmr:log', level, data })
+    }
+    this.pendingLogs.length = 0
+  }
+
+  private showCompileErrorIfNeeded() {
+    if (this.compileErrorMessage == null) return
+    const error = new Error(this.compileErrorMessage)
+    this.compileErrorMessage = null
+    Object.defineProperty(error, 'preventSymbolication', { value: true })
+    throw error
+  }
+
+  private handleConnection() {
+    this.flushEarlyLogs()
+  }
+
+  private handleConnectionError(error: Error, origin: string) {
+    let msg =
+      'Cannot connect to One dev server.\n\n' +
+      'Try the following:\n' +
+      '- Ensure the dev server is running and on the same network\n'
+
+    msg += `\nURL: ${origin}\nError: ${error.message}`
+
+    this.unavailableMessage ??= msg
+    this.showCompileErrorIfNeeded()
+  }
+
+  private handleMessage(message: MessageEvent) {
+    const data = JSON.parse(String(message.data)) as HMRServerMessage
+
+    if (!this.enabled && data.type.startsWith('hmr:')) return
+
+    switch (data.type) {
+      case 'hmr:update-start':
+        this.pendingUpdatesCount++
+        this.compileErrorMessage = null
+        break
+
+      case 'hmr:update':
+        break
+
+      case 'hmr:update-done':
+        this.pendingUpdatesCount = Math.max(0, this.pendingUpdatesCount - 1)
+        break
+
+      case 'hmr:error':
+        this.compileErrorMessage = data.payload.message
+        this.showCompileErrorIfNeeded()
+        break
+    }
+  }
+
+  private handleClose(event: CloseEvent) {
+    const { code, reason } = event
+    const isNormalClose = code === 1000 || code === 1005
+    const message = isNormalClose
+      ? 'Disconnected from dev server.'
+      : `Disconnected from dev server (${code}: "${reason}").`
+
+    this.unavailableMessage ??= message + '\n\nReload the app to reconnect.\n'
+  }
+}
+
+const instance = new HMRClient()
+
+export default Object.defineProperty(instance, 'default', {
+  get: () => instance,
+})

package/src/runtime/hmr-runtime.ts

@@ -0,0 +1,276 @@
+/**
+ * HMR runtime for rolldown's devMode.
+ * Ported from rollipop (https://github.com/leegeunhyeok/rollipop)
+ *
+ * this file is compiled to a string and passed to rolldown's
+ * `devMode.implement` option. rolldown injects it at the top of the bundle
+ * and references `__rolldown_runtime__` for module registration and HMR.
+ */
+
+import type {
+  DevRuntime as DefaultDevRuntime,
+  DevRuntimeMessenger,
+  HMRClientMessage,
+  HMRContext,
+  HMRCustomMessage,
+  HMRServerMessage,
+} from './hmr-types'
+import { enqueueUpdate, isReactRefreshBoundary } from './react-refresh-utils'
+
+declare global {
+  var __rolldown_runtime__: ReactNativeDevRuntime
+  var __turboModuleProxy: (moduleName: string) => any
+  var globalEvalWithSourceUrl: (code: string, sourceURL?: string) => void
+  var nativeModuleProxy: Record<string, any>
+  var __ReactRefresh: any
+  var __VXRN_CUSTOM_HMR_HANDLER__:
+    | ((socket: WebSocket, message: HMRCustomMessage) => void)
+    | undefined
+}
+
+// DO NOT EDIT THIS CLASS NAME - rolldown references it
+declare const DevRuntime: typeof DefaultDevRuntime
+
+var BaseDevRuntime = DevRuntime
+
+// simple event emitter (avoids mitt dependency in bundle)
+type Listener = (payload?: unknown) => void
+
+class SimpleEmitter {
+  private listeners = new Map<string, Set<Listener>>()
+
+  on(event: string, fn: Listener) {
+    if (!this.listeners.has(event)) this.listeners.set(event, new Set())
+    this.listeners.get(event)!.add(fn)
+  }
+
+  off(event: string, fn: Listener) {
+    this.listeners.get(event)?.delete(fn)
+  }
+
+  emit(event: string, payload?: unknown) {
+    this.listeners.get(event)?.forEach((fn) => fn(payload))
+  }
+}
+
+class ModuleHotContext implements HMRContext {
+  private readonly removeListeners: (() => void)[] = []
+  acceptCallbacks: {
+    deps: string[]
+    fn: (moduleExports: Record<string, any>[]) => void
+  }[] = []
+
+  constructor(
+    private moduleId: string,
+    private socketHolder: SocketHolder
+  ) {}
+
+  get refresh() {
+    return globalThis.__ReactRefresh
+  }
+
+  get refreshUtils() {
+    return { isReactRefreshBoundary, enqueueUpdate }
+  }
+
+  accept(...args: any[]) {
+    if (args.length === 1) {
+      this.acceptCallbacks.push({ deps: [this.moduleId], fn: args[0] })
+    } else if (args.length === 0) {
+      // self-accepting
+    } else {
+      throw new Error('Invalid arguments for `import.meta.hot.accept`')
+    }
+  }
+
+  invalidate() {
+    this.socketHolder.send(
+      JSON.stringify({
+        type: 'hmr:invalidate',
+        moduleId: this.moduleId,
+      } satisfies HMRClientMessage)
+    )
+  }
+
+  on(event: string, listener: (...args: any[]) => void) {
+    this.socketHolder.on(event, listener)
+    this.removeListeners.push(() => this.socketHolder.off(event, listener))
+  }
+
+  off(event: string, listener: (...args: any[]) => void) {
+    this.socketHolder.off(event, listener)
+  }
+
+  send(type: string, payload?: unknown) {
+    this.socketHolder.send(JSON.stringify({ type, payload }))
+  }
+
+  cleanup() {
+    for (const removeListener of this.removeListeners) {
+      removeListener()
+    }
+    this.removeListeners.length = 0
+  }
+}
+
+class SocketHolder {
+  private readonly queuedMessages: string[] = []
+  private readonly emitter = new SimpleEmitter()
+  private _socket: WebSocket | null = null
+  private _origin: string | null = null
+
+  get socket() {
+    return this._socket
+  }
+
+  get origin() {
+    return this._origin
+  }
+
+  setup(socket: WebSocket, origin: string) {
+    this._socket = socket
+    this._origin = origin
+    if (socket.readyState !== WebSocket.OPEN) {
+      socket.addEventListener('open', () => this.flushQueuedMessages(), { once: true })
+    } else {
+      this.flushQueuedMessages()
+    }
+  }
+
+  on(event: string, listener: (payload?: unknown) => void) {
+    this.emitter.on(event, listener)
+  }
+
+  off(event: string, listener: (payload?: unknown) => void) {
+    this.emitter.off(event, listener)
+  }
+
+  emit(event: string, payload?: unknown) {
+    this.emitter.emit(event, payload)
+  }
+
+  send(message: string) {
+    if (this._socket == null || this._socket.readyState !== WebSocket.OPEN) {
+      this.queuedMessages.push(message)
+      return
+    }
+    this.flushQueuedMessages()
+    this._socket.send(message)
+  }
+
+  flushQueuedMessages() {
+    if (this._socket == null) return
+    for (const message of this.queuedMessages) {
+      this._socket.send(message)
+    }
+    this.queuedMessages.length = 0
+  }
+
+  close() {
+    this._socket?.close()
+  }
+}
+
+class ReactNativeDevRuntime extends BaseDevRuntime {
+  socketHolder: SocketHolder
+  moduleHotContexts = new Map<string, ModuleHotContext>()
+  moduleHotContextsToBeUpdated = new Map<string, ModuleHotContext>()
+
+  constructor() {
+    const socketHolder = new SocketHolder()
+    const messenger: DevRuntimeMessenger = {
+      send: (message) => socketHolder.send(JSON.stringify(message)),
+    }
+    // generate a unique client id for lazy compilation
+    const clientId = `rn-${Date.now()}-${Math.random().toString(36).slice(2)}`
+    super(messenger, clientId)
+    this.socketHolder = socketHolder
+  }
+
+  createModuleHotContext(moduleId: string) {
+    const hotContext = new ModuleHotContext(moduleId, this.socketHolder)
+    if (this.moduleHotContexts.has(moduleId)) {
+      this.moduleHotContextsToBeUpdated.set(moduleId, hotContext)
+    } else {
+      this.moduleHotContexts.set(moduleId, hotContext)
+    }
+    return hotContext
+  }
+
+  applyUpdates(boundaries: [string, string][]) {
+    for (let [moduleId] of boundaries) {
+      const hotContext = this.moduleHotContexts.get(moduleId)
+      if (hotContext) {
+        hotContext.acceptCallbacks.filter((cb) => {
+          cb.fn(this.modules[moduleId].exports)
+        })
+        hotContext.cleanup()
+      }
+    }
+    this.moduleHotContextsToBeUpdated.forEach((hotContext, moduleId) => {
+      this.moduleHotContexts.set(moduleId, hotContext)
+    })
+    this.moduleHotContextsToBeUpdated.clear()
+  }
+
+  setup(socket: WebSocket, origin: string) {
+    if (this.socketHolder.socket != null) {
+      console.warn('[vxrn HMR]: runtime already setup')
+      return
+    }
+
+    this.socketHolder.setup(socket, origin)
+
+    socket.addEventListener('message', (event: MessageEvent) => {
+      const message = JSON.parse(event.data) as HMRServerMessage
+
+      if (isCustomHMRMessage(message)) {
+        this.socketHolder.emit(message.type, message.payload)
+        globalThis.__VXRN_CUSTOM_HMR_HANDLER__?.(socket, message)
+        return
+      }
+
+      switch (message.type) {
+        case 'hmr:update':
+          this.evaluate(message.code)
+          break
+
+        case 'hmr:reload':
+          this.reload()
+          break
+      }
+    })
+  }
+
+  private evaluate(code: string, sourceURL?: string) {
+    if (globalThis.globalEvalWithSourceUrl) {
+      globalThis.globalEvalWithSourceUrl(code, sourceURL)
+    } else {
+      eval(code)
+    }
+  }
+
+  private reload() {
+    const moduleName = 'DevSettings'
+    ;(globalThis.__turboModuleProxy
+      ? globalThis.__turboModuleProxy(moduleName)
+      : globalThis.nativeModuleProxy[moduleName]
+    ).reload()
+  }
+}
+
+function isCustomHMRMessage(message: unknown): message is HMRCustomMessage {
+  if (typeof message !== 'object' || message == null) return false
+  if (
+    'type' in message &&
+    typeof message.type === 'string' &&
+    message.type.startsWith('hmr:')
+  ) {
+    return false
+  }
+  return true
+}
+
+globalThis.__rolldown_runtime__ = new ReactNativeDevRuntime()
+
+export type { DevRuntime }

package/src/runtime/hmr-types.ts

@@ -0,0 +1,84 @@
+export interface HMRContext {
+  accept(...args: any[]): void
+  invalidate(): void
+  on(event: string, listener: (...args: any[]) => void): void
+  off(event: string, listener: (...args: any[]) => void): void
+  send(type: string, payload?: unknown): void
+}
+
+export type HMRClientLogLevel =
+  | 'trace'
+  | 'info'
+  | 'warn'
+  | 'error'
+  | 'log'
+  | 'group'
+  | 'groupCollapsed'
+  | 'groupEnd'
+  | 'debug'
+
+export type HMRClientMessage =
+  | { type: 'hmr:connected'; bundleEntry: string; platform: string }
+  | { type: 'hmr:module-registered'; modules: string[] }
+  | { type: 'hmr:log'; level: HMRClientLogLevel; data: any[] }
+  | { type: 'hmr:invalidate'; moduleId: string }
+
+export type HMRServerMessage =
+  | { type: 'hmr:update-start' }
+  | { type: 'hmr:update-done' }
+  | { type: 'hmr:update'; code: string }
+  | { type: 'hmr:reload' }
+  | { type: 'hmr:error'; payload: HMRServerError }
+
+export type HMRCustomMessage = {
+  type: string
+  payload: unknown
+}
+
+export type HMRCustomHandler = (socket: WebSocket, message: HMRCustomMessage) => void
+
+export interface HMRServerError {
+  type: string
+  message: string
+  errors: { description: string }[]
+}
+
+export interface DevRuntimeModule {
+  exportsHolder: { exports: any }
+  id: string
+  exports: any
+}
+
+export interface DevRuntimeInterface {
+  modules: Record<string, DevRuntimeModule>
+  createModuleHotContext(moduleId: string): void
+  applyUpdates(boundaries: [string, string][]): void
+  registerModule(id: string, exportsHolder: DevRuntimeModule['exportsHolder']): void
+  loadExports(id: string): void
+}
+
+// the base class is provided by rolldown's devMode runtime
+// DO NOT rename - rolldown references this by name
+class DevRuntime implements DevRuntimeInterface {
+  clientId!: string
+  constructor(messenger: DevRuntimeMessenger, clientId: string) {}
+  modules: Record<string, DevRuntimeModule> = {}
+  createModuleHotContext(moduleId: string): void {
+    throw new Error('createModuleHotContext should be implemented')
+  }
+  applyUpdates(boundaries: [string, string][]): void {
+    throw new Error('applyUpdates should be implemented')
+  }
+  registerModule(id: string, exportsHolder: DevRuntimeModule['exportsHolder']): void {
+    throw new Error('registerModule should be implemented')
+  }
+  loadExports(id: string): void {
+    throw new Error('loadExports should be implemented')
+  }
+}
+
+export type { DevRuntime }
+
+export interface DevRuntimeMessenger {
+  send(message: HMRClientMessage): void
+}