vxrn 1.10.6 → 1.11.0

package/src/config/getBaseViteConfigOnly.ts

@@ -14,7 +14,10 @@ export const dedupe = [
   'react-dom/client',
   'react-native-web',
   '@react-navigation/core',
+  '@react-navigation/native',
   '@react-navigation/elements',
+  '@react-navigation/native-stack',
+  '@react-navigation/bottom-tabs',
   '@tamagui/core',
   '@tamagui/web',
   '@tamagui/react-native-web',
@@ -87,23 +90,54 @@ export async function getBaseViteConfig(
     },
 
     resolve: {
-      alias: {
-        'react-native/package.json': resolvePath('react-native-web/package.json', root),
-        'react-native': resolvePath('react-native-web', root),
-        'react-native-safe-area-context': resolvePath('@vxrn/safe-area', root),
-
+      alias: [
+        // deep react-native/Libraries/* paths must be caught BEFORE the general
+        // react-native → react-native-web alias, since react-native-web doesn't
+        // have these native-only subpaths
+        {
+          find: /^react-native\/Libraries\/.*/,
+          replacement: resolvePath(
+            '@vxrn/vite-plugin-metro/empty',
+            new URL('.', import.meta.url).pathname
+          ),
+        },
+        {
+          find: 'react-native/package.json',
+          replacement: resolvePath('react-native-web/package.json', root),
+        },
+        {
+          find: 'react-native',
+          replacement: resolvePath('react-native-web', root),
+        },
+        {
+          find: 'react-native-safe-area-context',
+          replacement: resolvePath('@vxrn/safe-area', root),
+        },
         // bundle size optimizations
-        'query-string': resolvePath('@vxrn/query-string', root),
-        'url-parse': resolvePath('@vxrn/url-parse', root),
-      },
+        {
+          find: 'query-string',
+          replacement: resolvePath('@vxrn/query-string', root),
+        },
+        {
+          find: 'url-parse',
+          replacement: resolvePath('@vxrn/url-parse', root),
+        },
+      ],
 
       // TODO auto dedupe all include optimize deps?
       dedupe,
     },
 
-    build: {
-      commonjsOptions: {
-        transformMixedEsModules: true,
+    build: {},
+
+    // enable OXC React Refresh so component registration ($RefreshReg$) is
+    // injected into TSX/JSX output; the one:react-refresh-web compiler plugin
+    // then wraps the output with the runtime preamble and import.meta.hot.accept
+    // only enable in dev mode - in production the refresh plugin doesn't run,
+    // leaving $RefreshReg$ undefined which crashes client-side JS
+    oxc: {
+      jsx: {
+        refresh: mode === 'development',
       },
     },
   } satisfies Omit<InlineConfig, 'plugins'>

package/src/config/getOptimizeDeps.ts

@@ -135,15 +135,28 @@ export function getOptimizeDeps(mode: 'build' | 'serve') {
     depsToOptimize,
     optimizeDeps: {
       include: depsToOptimize,
-      exclude: ['util', '@swc/wasm', '@swc/core-darwin-arm64', 'moti/author'],
+      exclude: [
+        'util',
+        '@swc/wasm',
+        '@swc/core-darwin-arm64',
+        'moti/author',
+        '@expo/log-box',
+      ],
       needsInterop,
       // Enable lazy optimization - don't wait for all deps before starting server
       // This allows browser to process requests in parallel for faster initial load
       holdUntilCrawlEnd: false,
-      esbuildOptions: {
-        resolveExtensions: webExtensions,
-        // Some packages ship JSX in .js files (e.g., react-native-css-interop/dist/doctor.js)
-        loader: { '.js': 'jsx' },
+      rolldownOptions: {
+        resolve: {
+          extensions: webExtensions,
+        },
+        // some packages ship JSX in .js files (e.g., react-native-css-interop/dist/doctor.js)
+        moduleTypes: { '.js': 'jsx' },
+        // react-native packages import native-only exports (TurboModuleRegistry etc.)
+        // from react-native, which is aliased to react-native-web on web. react-native-web
+        // doesn't export these, so rolldown would error. shimMissingExports creates
+        // undefined shims instead, matching esbuild's lenient behavior.
+        shimMissingExports: true,
       },
     } satisfies UserConfig['optimizeDeps'],
   }

package/src/config/getReactNativeBuildConfig.ts

@@ -214,8 +214,8 @@ export async function getReactNativeBuildConfig(
 
     optimizeDeps: {
       ...optimizeDeps,
-      esbuildOptions: {
-        jsx: 'automatic',
+      rolldownOptions: {
+        moduleTypes: { '.js': 'jsx' },
       },
     },
 
@@ -244,13 +244,7 @@ export async function getReactNativeBuildConfig(
     build: {
       ssr: true,
       minify: false,
-      commonjsOptions: {
-        transformMixedEsModules: true,
-        ignore(id) {
-          return id === 'react/jsx-runtime' || id === 'react/jsx-dev-runtime'
-        },
-      },
-      rollupOptions: {
+      rolldownOptions: {
         input: options.entries.native,
         treeshake: false,
         preserveEntrySignatures: 'strict',

package/src/config/mergeUserConfig.test.ts

@@ -76,7 +76,7 @@ describe('deepMergeOptimizeDeps', () => {
       include: [],
       exclude: ['c'],
       needsInterop: [],
-      esbuildOptions: { resolveExtensions: [] },
+      rolldownOptions: {},
     }
 
     deepMergeOptimizeDeps(a, b, extra)

package/src/config/mergeUserConfig.ts

@@ -6,8 +6,11 @@ type OptimizeDepsConf = {
   include: string[]
   exclude: string[]
   needsInterop: string[]
-  esbuildOptions: {
-    resolveExtensions: string[]
+  rolldownOptions?: {
+    resolve?: {
+      extensions?: string[]
+    }
+    moduleTypes?: Record<string, string>
   }
 }
 
@@ -45,7 +48,6 @@ export function mergeUserConfig(
     serverConfig.ssr ||= {}
     userViteConfig.ssr ||= {}
     deepMergeOptimizeDeps(serverConfig.ssr, userViteConfig.ssr, optimizeDeps)
-    deepMergeOptimizeDeps(serverConfig.ssr, userViteConfig, optimizeDeps)
   }
 
   return serverConfig
@@ -107,9 +109,7 @@ export function deepMergeOptimizeDeps(
     ...(extraDepsOpt?.needsInterop || []),
   ]).filter((dep) => !excludeSet.has(dep))
 
-  a.optimizeDeps.esbuildOptions = {
-    ...a.optimizeDeps.esbuildOptions,
-    ...b.optimizeDeps.esbuildOptions,
-    ...extraDepsOpt?.esbuildOptions,
-  }
+  // don't merge rolldownOptions onto ssr.optimizeDeps — it must live on
+  // environments.ssr.optimizeDeps to avoid a Vite compat-proxy bug that fires
+  // a spurious deprecation warning when both paths carry rolldownOptions
 }

package/src/exports/build.ts

@@ -1,7 +1,7 @@
 import FSExtra from 'fs-extra'
 import { rm } from 'node:fs/promises'
 import { sep } from 'node:path'
-import type { OutputAsset, OutputChunk, RollupOutput } from 'rollup'
+import type { OutputAsset, OutputChunk, RolldownOutput } from 'rolldown'
 import {
   loadConfigFromFile,
   mergeConfig,
@@ -24,15 +24,11 @@ const { existsSync } = FSExtra
 Error.stackTraceLimit = Number.POSITIVE_INFINITY
 
 const disableOptimizationConfig = {
-  optimizeDeps: {
-    esbuildOptions: {
-      minify: false,
-    },
-  },
+  optimizeDeps: {},
 
   build: {
     minify: false,
-    rollupOptions: {
+    rolldownOptions: {
       treeshake: false,
       output: {
         minifyInternalExports: false,
@@ -83,18 +79,14 @@ export const build = async (optionsIn: VXRNOptions, buildArgs: BuildArgs = {}) =
     console.error(`\n 🥺 error applying built-in patches`, err)
   })
 
+  const outDir = userViteConfig?.build?.outDir ?? 'dist'
+
   // clean
   await Promise.all([
     (async () => {
-      // lets always clean dist folder for now to be sure were correct
-      if (existsSync('dist')) {
-        await rm('dist', { recursive: true, force: true })
-      }
-    })(),
-    (async () => {
-      // lets always clean dist folder for now to be sure were correct
-      if (existsSync('node_modules/.vite')) {
-        await rm('node_modules/.vite', { recursive: true, force: true })
+      // lets always clean output folder for now to be sure were correct
+      if (existsSync(outDir)) {
+        await rm(outDir, { recursive: true, force: true })
       }
     })(),
   ])
@@ -107,7 +99,7 @@ export const build = async (optionsIn: VXRNOptions, buildArgs: BuildArgs = {}) =
       { root: options.root },
       {
         platform: buildArgs.platform,
-        bundleOutput: `dist${sep}${buildArgs.platform}.js`,
+        bundleOutput: `${outDir}${sep}${buildArgs.platform}.js`,
         dev: false,
         entryFile: '',
         resetCache: true,
@@ -120,6 +112,8 @@ export const build = async (optionsIn: VXRNOptions, buildArgs: BuildArgs = {}) =
   }
 
   const { optimizeDeps } = getOptimizeDeps('build')
+  const { rolldownOptions: optimizeDepsRolldownOptions, ...optimizeDepsWithoutRolldown } =
+    optimizeDeps
 
   let webBuildConfig = mergeConfig(
     await getBaseViteConfigWithPlugins({
@@ -131,10 +125,18 @@ export const build = async (optionsIn: VXRNOptions, buildArgs: BuildArgs = {}) =
       clearScreen: false,
       configFile: false,
       ...(skipEnv && { envFile: false }),
-      optimizeDeps,
+      // rolldownOptions goes on environments.client to avoid Vite compat-proxy bug
+      optimizeDeps: optimizeDepsWithoutRolldown,
+      environments: {
+        client: {
+          optimizeDeps: {
+            rolldownOptions: optimizeDepsRolldownOptions,
+          },
+        },
+      },
       logLevel: 'warn',
       build: {
-        rollupOptions: {
+        rolldownOptions: {
           onwarn(warning, defaultHandler) {
             if (
               warning.code === 'MODULE_LEVEL_DIRECTIVE' &&
@@ -193,7 +195,7 @@ export const build = async (optionsIn: VXRNOptions, buildArgs: BuildArgs = {}) =
   } satisfies Plugin
 
   let clientOutput
-  let clientBuildPromise: Promise<RollupOutput> | undefined
+  let clientBuildPromise: Promise<RolldownOutput> | undefined
 
   if (buildArgs.step !== 'generate') {
     let clientBuildConfig = mergeConfig(webBuildConfig, {
@@ -208,17 +210,18 @@ export const build = async (optionsIn: VXRNOptions, buildArgs: BuildArgs = {}) =
 
       build: {
         ssrManifest: true,
-        outDir: 'dist/client',
+        outDir: `${outDir}/client`,
         sourcemap: false,
         manifest: true,
-        rollupOptions: {
+        rolldownOptions: {
           input: ['virtual:one-entry'],
 
-          // output: {
-          //   manualChunks: {
-          //     preload: ['\0vite/preload-helper.js'],
-          //   },
-          // },
+          output: {
+            codeSplitting: {
+              // merge tiny chunks to reduce HTTP requests and total chunk count
+              minSize: 42_000,
+            },
+          },
         },
       },
     } satisfies UserConfig)
@@ -231,7 +234,7 @@ export const build = async (optionsIn: VXRNOptions, buildArgs: BuildArgs = {}) =
       `\n 🔨 build ${options.build?.server !== false ? 'client + server' : 'client'}\n`
     )
 
-    clientBuildPromise = viteBuild(clientBuildConfig) as Promise<RollupOutput>
+    clientBuildPromise = viteBuild(clientBuildConfig) as Promise<RolldownOutput>
   }
 
   const serverOptions = options.build?.server
@@ -254,7 +257,15 @@ export const build = async (optionsIn: VXRNOptions, buildArgs: BuildArgs = {}) =
       // we used to do this i think to make our patching react work?
       // but stopped working for prod builds due to duplicate react somehow
       // external: ['react', 'react-dom', 'expo-modules-core'],
-      optimizeDeps,
+      optimizeDeps: optimizeDepsWithoutRolldown,
+    },
+
+    environments: {
+      ssr: {
+        optimizeDeps: {
+          rolldownOptions: optimizeDepsRolldownOptions,
+        },
+      },
     },
 
     build: {
@@ -262,8 +273,8 @@ export const build = async (optionsIn: VXRNOptions, buildArgs: BuildArgs = {}) =
       cssCodeSplit: false,
       ssr: true,
       sourcemap: false,
-      outDir: 'dist/server',
-      rollupOptions: {
+      outDir: `${outDir}/server`,
+      rolldownOptions: {
         treeshake: true,
         // fixes some weird issues with optimizing tamagui and other packages
         // external: (id) => {
@@ -288,11 +299,11 @@ export const build = async (optionsIn: VXRNOptions, buildArgs: BuildArgs = {}) =
     serverBuildConfig.ssr!.noExternal = true
   }
 
-  const serverEntry = getServerEntry(options)
+  const serverEntry = getServerEntry(options, outDir)
 
   let serverOutput: [OutputChunk, ...(OutputChunk | OutputAsset)[]] | undefined
   let clientManifest
-  let serverBuildPromise: Promise<RollupOutput> | undefined
+  let serverBuildPromise: Promise<RolldownOutput> | undefined
 
   if (serverOptions !== false) {
     if (!clientBuildPromise) {
@@ -307,7 +318,7 @@ export const build = async (optionsIn: VXRNOptions, buildArgs: BuildArgs = {}) =
       userServerBuildConf
         ? mergeConfig(serverBuildConfig, userServerBuildConf)
         : serverBuildConfig
-    ) as Promise<RollupOutput>
+    ) as Promise<RolldownOutput>
   }
 
   // Wait for both builds to complete in parallel
@@ -327,7 +338,7 @@ export const build = async (optionsIn: VXRNOptions, buildArgs: BuildArgs = {}) =
   }
 
   if (serverOptions !== false) {
-    clientManifest = await FSExtra.readJSON('dist/client/.vite/manifest.json')
+    clientManifest = await FSExtra.readJSON(`${outDir}/client/.vite/manifest.json`)
 
     // temp fix - react native web is importing non-existent react 19 apis
     const old = await FSExtra.readFile(serverEntry, 'utf-8')
@@ -346,6 +357,7 @@ export const build = async (optionsIn: VXRNOptions, buildArgs: BuildArgs = {}) =
   }
 
   return {
+    outDir,
     processEnvDefines,
     options,
     buildArgs,

package/src/exports/createServer.ts

@@ -14,7 +14,10 @@ export const applyCompression = (app: Hono, options: VXRNServeOptions) => {
 export const createProdServer = async (
   app: Hono,
   options: VXRNServeOptions,
-  { skipCompression }: { skipCompression?: boolean } = {}
+  {
+    skipCompression,
+    outDir = 'dist',
+  }: { skipCompression?: boolean; outDir?: string } = {}
 ) => {
   // when called via serve(), compression is already applied before beforeRegisterRoutes
   if (!skipCompression) {
@@ -22,7 +25,7 @@ export const createProdServer = async (
   }
 
   app.use('*', async (context, next) => {
-    return await serveStaticAssets({ context, next })
+    return await serveStaticAssets({ context, next, outDir })
   })
 
   app.notFound(async (c) => {
@@ -31,7 +34,7 @@ export const createProdServer = async (
 
     while (true) {
       const response = await serveStatic({
-        root: './dist/client',
+        root: `./${outDir}/client`,
         path: join(currentDir, '+not-found.html'),
       })(c, async () => {})
 

package/src/exports/serve.ts

@@ -12,6 +12,7 @@ export const serve = async ({
   afterRegisterRoutes,
   beforeRegisterRoutes,
   app = new Hono(),
+  outDir = 'dist',
   ...optionsIn
 }: VXRNServeOptions) => {
   const { getServerOptionsFilled } = await import('../config/getServerOptionsFilled')
@@ -25,7 +26,7 @@ export const serve = async ({
   }
 
   // createProdServer will skip compression since we already applied it
-  await createProdServer(app, options, { skipCompression: true })
+  await createProdServer(app, options, { skipCompression: true, outDir })
 
   if (afterRegisterRoutes) {
     await afterRegisterRoutes(options, app)

package/src/exports/serveStaticAssets.ts

@@ -7,14 +7,16 @@ const hashedAssetRe = /[.-][a-zA-Z0-9_-]{8,}\.\w+$/
 export async function serveStaticAssets({
   context,
   next,
+  outDir = 'dist',
 }: {
   context: Context
   next?: () => Promise<void>
+  outDir?: string
 }) {
   let didCallNext = false
 
   const response = await serveStatic({
-    root: './dist/client',
+    root: `./${outDir}/client`,
     onFound: (path, c) => {
       if (hashedAssetRe.test(path)) {
         c.header('Cache-Control', 'public, immutable, max-age=31536000')

package/src/patches/builtInDepPatches.ts

@@ -2,6 +2,47 @@ import { assertString } from '../utils/assert'
 import { type DepPatch, bailIfExists, bailIfUnchanged } from '../utils/patches'
 
 export const builtInDepPatches: DepPatch[] = [
+  // fix broken ESM: NavigationContainer.js uses extensionless relative imports
+  // which fail in Node.js ESM (lib/module has "type": "module")
+  {
+    module: '@react-navigation/native',
+    patchFiles: {
+      'lib/module/NavigationContainer.js': (contents) => {
+        assertString(contents)
+        return contents
+          .replace(`from './useBackButton'`, `from './useBackButton.js'`)
+          .replace(`from './useDocumentTitle'`, `from './useDocumentTitle.js'`)
+          .replace(`from './useLinking'`, `from './useLinking.js'`)
+      },
+    },
+  },
+
+  // expose internal contexts for SSR-optimized NavigationContainer
+  {
+    module: '@react-navigation/core',
+    patchFiles: {
+      'package.json': (contents) => {
+        assertString(contents)
+        const pkg = JSON.parse(contents)
+        const exports = pkg.exports || {}
+        let changed = false
+        for (const path of [
+          './lib/module/NavigationBuilderContext',
+          './lib/module/NavigationStateContext',
+          './lib/module/EnsureSingleNavigator',
+        ]) {
+          if (!exports[path]) {
+            exports[path] = path + '.js'
+            changed = true
+          }
+        }
+        if (!changed) return
+        pkg.exports = exports
+        return JSON.stringify(pkg, null, 2)
+      },
+    },
+  },
+
   // react-native-web doesn't export unstable_batchedUpdates but react-native does,
   // so libraries like @legendapp/list break when aliased to rnw on web
   {
@@ -300,7 +341,7 @@ ${contents}
   {
     module: 'expo',
     patchFiles: {
-      version: '>=52.0.0 <55.0.0',
+      version: '>=52.0.0 <56.0.0',
       'src/winter/runtime.native.ts': (contents) => {
         assertString(contents)
 
@@ -333,7 +374,7 @@ install('URLSearchParams', () => URLSearchParams);
   {
     module: 'expo-modules-core',
     patchFiles: {
-      version: '<=3.*',
+      version: '<=55.*',
       'src/**/*.ts': addNoCheck,
       'src/**/*.tsx': addNoCheck,
     },
@@ -342,7 +383,7 @@ install('URLSearchParams', () => URLSearchParams);
   {
     module: '@expo/cli',
     patchFiles: {
-      version: '<=54',
+      version: '<=55',
 
       'build/src/export/embed/exportEmbedAsync.js': (contents) => {
         return contents?.replace(

package/src/plugins/defaultDepOptimizePlugin.ts

@@ -35,8 +35,21 @@ export function defaultDepOptimizePlugin(): Plugin {
       // so we just call it here to ensure `optimizeDeps` and `noExternal` configs are set as likely
       // same as in CLI mode.
       if (!config.ssr) config.ssr = {}
-      // pass user config so their excludes are respected
-      deepMergeOptimizeDeps(config.ssr, config, optimizeDeps)
+      // only apply framework deps to ssr, don't merge regular optimizeDeps into ssr
+      deepMergeOptimizeDeps(config.ssr, {}, optimizeDeps)
+
+      // rolldownOptions must go on environments.ssr.optimizeDeps to avoid a Vite
+      // compat-proxy bug when both ssr.optimizeDeps and environments.ssr.optimizeDeps
+      // carry rolldownOptions
+      return {
+        environments: {
+          ssr: {
+            optimizeDeps: {
+              rolldownOptions: optimizeDeps.rolldownOptions,
+            },
+          },
+        },
+      }
     },
   } satisfies Plugin
 }

package/src/plugins/reactNativeCommonJsPlugin.ts

@@ -96,7 +96,7 @@ export function reactNativeCommonJsPlugin(options: {
           // Avoids the extra step of testing Brotli compression, which isn't really pertinent to a file served locally
           reportCompressedSize: false,
 
-          rollupOptions: {
+          rolldownOptions: {
             treeshake: false,
 
             output: {
@@ -208,8 +208,8 @@ export function reactNativeCommonJsPlugin(options: {
           noDiscovery: true,
           include: undefined,
 
-          esbuildOptions: {
-            loader: {
+          rolldownOptions: {
+            moduleTypes: {
               '.js': 'jsx',
             },
           },
@@ -232,24 +232,18 @@ export function reactNativeCommonJsPlugin(options: {
             },
 
             optimizeDeps: {
-              esbuildOptions: {
-                resolveExtensions: getNativeExtensions('ios'),
+              rolldownOptions: {
+                resolve: {
+                  extensions: getNativeExtensions('ios'),
+                },
 
                 plugins: [
                   {
                     name: 'react-native-assets',
-                    setup(build) {
-                      build.onResolve(
-                        {
-                          filter: /\.(png|jpg|gif|webp)$/,
-                        },
-                        async ({ path, namespace }) => {
-                          return {
-                            path: '',
-                            external: true,
-                          }
-                        }
-                      )
+                    resolveId(source) {
+                      if (/\.(png|jpg|gif|webp)$/.test(source)) {
+                        return { id: '', external: true }
+                      }
                     },
                   },
                 ],
@@ -269,8 +263,10 @@ export function reactNativeCommonJsPlugin(options: {
             },
 
             optimizeDeps: {
-              esbuildOptions: {
-                resolveExtensions: getNativeExtensions('android'),
+              rolldownOptions: {
+                resolve: {
+                  extensions: getNativeExtensions('android'),
+                },
               },
             },
           } satisfies UserConfig),

package/src/plugins/reactNativeDevServer.ts

@@ -213,13 +213,19 @@ export function createReactNativeDevServerPlugin(
           console.error(
             `\n\n  Note, some errors may happen due to a stale Vite cache, you may want to try re-running with the "--clean" flag`
           )
-          res.writeHead(500)
-          res.end()
+          res.writeHead(500, { 'Content-Type': 'text/plain' })
+          res.end(err instanceof Error ? err.stack || err.message : String(err))
         }
       }
 
-      server.middlewares.use('/index.bundle', handleRNBundle)
-      server.middlewares.use('/.expo/.virtual-metro-entry.bundle', handleRNBundle)
+      // handle any .bundle request (expo sdk 55 may use /packages/one/metro-entry.bundle)
+      server.middlewares.use((req, res, next) => {
+        if (req.url?.split('?')[0].endsWith('.bundle')) {
+          handleRNBundle(req, res, next)
+        } else {
+          next()
+        }
+      })
 
       // Status endpoint
       server.middlewares.use('/status', (_req, res) => {