peachsim 0.1.626 → 0.1.628

package/src/vite-plugin.ts

@@ -8,11 +8,20 @@
 //   // with external app:
 //   export default defineConfig({ plugins: [sootsim({ app: '~/my-rn-app' })] })
 
+import crypto from 'crypto'
 import fs from 'fs'
 import { createRequire } from 'module'
 import path from 'path'
-import { fileURLToPath } from 'url'
+import { fileURLToPath, pathToFileURL } from 'url'
 import { type Plugin, transformWithOxc } from 'vite'
+
+declare module '@babel/core' {
+  interface TransformCaller {
+    platform?: string
+    isDev?: boolean
+    projectRoot?: string
+  }
+}
 import { resolveExportsHiddenSubpath } from '../../peach-compat/src/resolve-hidden-subpath.ts'
 import {
   SOOTSIM_COMPAT_PUBLISHED_BROWSER_ENTRIES,
@@ -352,6 +361,10 @@ export function sootsim(options: SootSimOptions = {}): Plugin[] {
     keyboardControllerBindingsRedirect(),
     reanimatedNativeSeamRedirect(),
     manifestNativeSeamRedirect(),
+    expoDomComponentsPlugin({
+      appDir,
+      projectRoot: appDir || workspaceRoot,
+    }),
     workletsBabelTransform(isAppSource),
     metroNativeResolve(isAppSource),
     reactNativeRequirePlugin(isAppSource),
@@ -439,6 +452,7 @@ export function engineShellWorkerPlugins(): Plugin[] {
     nodeModulesJsxTransform(),
     recordingPluginWorkerRedirect(),
     reanimatedNativeSeamRedirect(),
+    gestureHandlerReanimatedRequire(),
     manifestNativeSeamRedirect(),
     keyboardControllerBindingsRedirect(),
     workletsBabelTransform(() => true),
@@ -540,6 +554,9 @@ export function workerBootChunkPlugin(closures: WorkerBootClosure[]): Plugin {
         const chunk = chunks[0]
         const pkgs = new Map<string, Set<string>>()
         for (const id of chunk.moduleIds) {
+          // a virtual `\0` id (the jsx-runtime re-export shim) names a
+          // node_modules path without being a second copy of that package
+          if (id.startsWith('\0')) continue
           const nmIndex = id.lastIndexOf('/node_modules/')
           if (nmIndex !== -1) {
             const rest = id.slice(nmIndex + '/node_modules/'.length)
@@ -562,14 +579,81 @@ export function workerBootChunkPlugin(closures: WorkerBootClosure[]): Plugin {
           duplicates.length > 0
             ? `\ndetected duplicate packages bundled from multiple roots (likely a symlinked or cross-tree node_modules):\n  ${duplicates.join('\n  ')}`
             : ''
+        // the largest modules are where a cut pays, so the error names them
+        const largest = Object.entries(chunk.modules)
+          .sort(([, a], [, b]) => b.renderedLength - a.renderedLength)
+          .slice(0, 40)
+          .map(
+            ([id, module]) =>
+              `${module.renderedLength} ${path.relative(process.cwd(), id)}`,
+          )
         this.error(
-          `worker ${closure.entry}: ${chunks[0].fileName} is ${bytes} bytes, over the ${closure.maxBytes} byte cap; eliminate excess boot dependencies rather than raising the cap${dupDetail}`,
+          `worker ${closure.entry}: ${chunks[0].fileName} is ${bytes} bytes, over the ${closure.maxBytes} byte cap; eliminate excess boot dependencies rather than raising the cap${dupDetail}\nlargest modules (rendered bytes):\n  ${largest.join('\n  ')}`,
         )
       }
     },
   }
 }
 
+// react-native-gesture-handler reaches reanimated through an optional
+// `require('react-native-reanimated')` in reanimatedWrapper. a require of an
+// ES module binds its whole namespace, so every reanimated export (the
+// layout-animation presets alone were ~230kB) stayed in each engine worker
+// file although gesture-handler reads a handful of members. resolve that one
+// require to a module re-exporting exactly the members gesture-handler's
+// sources read off its `Reanimated` binding, scanned from the installed
+// package so an upgrade that reads another member keeps it.
+export function gestureHandlerReanimatedRequire(): Plugin {
+  const virtualId = '\0sootsim:gesture-handler-reanimated'
+  const packageMarker = '/node_modules/react-native-gesture-handler/'
+  let sourceDir: string | null = null
+  const readMembers = (dir: string, members: Set<string>) => {
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+      const entryPath = path.join(dir, entry.name)
+      if (entry.isDirectory()) {
+        readMembers(entryPath, members)
+      } else if (/\.[jt]sx?$/.test(entry.name)) {
+        for (const match of fs
+          .readFileSync(entryPath, 'utf8')
+          .matchAll(/\bReanimated\??\.([A-Za-z_$][\w$]*)/g)) {
+          members.add(match[1])
+        }
+      }
+    }
+  }
+  return {
+    name: 'sootsim-gesture-handler-reanimated-require',
+    apply: 'build',
+    enforce: 'pre',
+    resolveId: {
+      filter: { id: /^react-native-reanimated$/ },
+      handler(_source, importer) {
+        if (!importer || !/\/reanimatedWrapper\.[jt]s$/.test(importer)) return null
+        const markerIndex = importer.indexOf(packageMarker)
+        if (markerIndex === -1) return null
+        const packageRoot = importer.slice(0, markerIndex + packageMarker.length)
+        // the tree the importer resolved from (src or lib), not every build
+        sourceDir = path.join(
+          packageRoot,
+          importer.slice(packageRoot.length).split('/')[0],
+        )
+        return virtualId
+      },
+    },
+    load(id) {
+      if (id !== virtualId || !sourceDir) return null
+      const members = new Set<string>()
+      readMembers(sourceDir, members)
+      if (members.size === 0) {
+        this.error(
+          `gesture-handler reanimated require: no \`Reanimated.<member>\` reads under ${sourceDir}; its reanimatedWrapper changed shape, so update this plugin`,
+        )
+      }
+      return `export { ${[...members].sort().join(', ')} } from 'react-native-reanimated'\n`
+    },
+  }
+}
+
 // react-native-keyboard-controller is pure-JS for everything except its
 // native-event seam (`bindings.ts` / `bindings.native.ts`) and RN platform
 // `findNodeHandle` resolution. let upstream's components, hooks, animated
@@ -768,26 +852,20 @@ export function reanimatedNativeSeamRedirect(): Plugin {
 // use the manifest path unless they need similar special handling.
 import { NATIVE_SEAM_MANIFEST } from './native-seam-manifest.ts'
 export function manifestNativeSeamRedirect(): Plugin {
-  // build a fast lookup: pkg → { basenames, target }
-  const byPkg = new Map<
-    string,
-    { basenames: Set<string>; target: string; notes?: string }
-  >()
+  // pkg → basename → seam. one package can split its native surface across
+  // several upstream files, each redirected to its own seam.
+  const byPkg = new Map<string, Map<string, { target: string; notes?: string }>>()
   for (const entry of NATIVE_SEAM_MANIFEST) {
-    const existing = byPkg.get(entry.pkg)
-    if (existing) {
-      for (const b of entry.seamBasenames) existing.basenames.add(b)
-    } else {
-      byPkg.set(entry.pkg, {
-        basenames: new Set(entry.seamBasenames),
-        target: entry.target,
-        notes: entry.notes,
-      })
+    const seams = byPkg.get(entry.pkg) ?? new Map()
+    byPkg.set(entry.pkg, seams)
+    for (const basename of entry.seamBasenames) {
+      seams.set(basename, { target: entry.target, notes: entry.notes })
     }
   }
+  const targets = new Set(NATIVE_SEAM_MANIFEST.map((entry) => entry.target))
   const sourceFilter = new RegExp(
     `(?:^|/)(?:${[...byPkg.values()]
-      .flatMap(({ basenames }) => [...basenames])
+      .flatMap((seams) => [...seams.keys()])
       .map((basename) => basename.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
       .join('|')})(?:\\.(?:native|web|ios|android))?$`,
   )
@@ -797,26 +875,26 @@ export function manifestNativeSeamRedirect(): Plugin {
     resolveId: {
       filter: { id: sourceFilter },
       handler(source, importer) {
-        if (!importer || byPkg.size === 0) return null
+        if (!importer || byPkg.size === 0 || targets.has(importer)) return null
         // find the package whose path appears in the importer. matches both
         // `/<pkg>/` (unscoped) and `/@scope/<pkg>/` (scoped — the leading `@`
         // is part of the pkg name in the manifest, e.g. `@notifee/react-native`).
-        let match: { basenames: Set<string>; target: string; notes?: string } | undefined
+        let seams: Map<string, { target: string; notes?: string }> | undefined
         let matchedPkg: string | undefined
         for (const [pkg, entry] of byPkg) {
           if (importer.includes(`/${pkg}/`)) {
-            match = entry
+            seams = entry
             matchedPkg = pkg
             break
           }
         }
-        if (!match) return null
-        if (importer === match.target) return null
+        if (!seams) return null
         const basename = (source.split('/').pop() ?? '').replace(
           /\.(native|web|ios|android)$/,
           '',
         )
-        if (!match.basenames.has(basename)) return null
+        const seam = seams.get(basename)
+        if (!seam) return null
         if (process.env.SOOTSIM_NATIVE_SEAM_DEBUG) {
           console.log(
             '[nativeSeamRedirect]',
@@ -825,10 +903,10 @@ export function manifestNativeSeamRedirect(): Plugin {
             source,
             'from',
             importer.slice(-80),
-            match.notes ? `(${match.notes})` : '',
+            seam.notes ? `(${seam.notes})` : '',
           )
         }
-        return match.target
+        return seam.target
       },
     },
   }
@@ -1931,3 +2009,623 @@ function stubMissingImages(isAppSource: (p: string) => boolean): Plugin {
     },
   }
 }
+
+let domBabelCorePromise: Promise<typeof import('@babel/core')> | null = null
+async function getDomBabelCore() {
+  if (!domBabelCorePromise) {
+    domBabelCorePromise = import('@babel/core') as Promise<typeof import('@babel/core')>
+  }
+  return domBabelCorePromise
+}
+
+export function expoDomComponentsPlugin(
+  options: {
+    appDir?: string
+    projectRoot?: string
+  } = {},
+): Plugin {
+  let isProduction = false
+  const appDir = options.appDir ? path.resolve(options.appDir) : ''
+  const projectRoot = options.projectRoot ?? appDir ?? workspaceRoot
+  const domHashMap = new Map<string, string>()
+  const domWebModuleIds = new Set<string>()
+
+  // specifiers that must stay runtime requires served by the page's
+  // window.require shim instead of becoming static imports:
+  // - expo's log-box is native-only; importing it would pull react-native
+  //   into the web closure (mirrors the @expo/log-box virtual stub).
+  // - the react-native-web stylesheets are an optional integration whose
+  //   callers fall back when require returns an empty object.
+  const domRuntimeRequireSpecifiers = new Set([
+    '@expo/log-box',
+    '@expo/log-box/lib',
+    'react-native-web/dist/exports/StyleSheet',
+    'react-native-web/dist/exports/StyleSheet/dom',
+    // metro fast-refresh plumbing cannot work under vite (no metro server,
+    // no hmr client socket); the page gets hmr from vite's own client.
+    // importing the real module would also fork the engine's refresh
+    // identity, so serve a no-op shape instead.
+    'react-refresh/runtime',
+  ])
+
+  // expo's dom web closure is written for metro, where require() exists in
+  // every module. vite serves ESM, so a bare require is a ReferenceError
+  // (and the entry module that defines window.require evaluates after its
+  // static imports). rewrite static requires in closure modules to ESM
+  // imports at serve time; this only changes module format, never behavior.
+  function rewriteDomWebRequires(code: string): string | null {
+    const pattern = /(^|[^.\w$])require\(\s*('[^']*'|"[^"]*")\s*\)/gm
+    const names = new Map<string, string>()
+    let found = false
+    for (const match of code.matchAll(pattern)) {
+      const spec = match[2].slice(1, -1)
+      if (domRuntimeRequireSpecifiers.has(spec)) continue
+      found = true
+      if (!names.has(spec)) names.set(spec, `__domRequire_${names.size}`)
+    }
+    if (!found) return null
+    const body = code.replace(pattern, (full, prefix, quoted: string) => {
+      const spec = quoted.slice(1, -1)
+      if (domRuntimeRequireSpecifiers.has(spec)) return full
+      const name = names.get(spec)!
+      return `${prefix}(${name}.default ?? ${name})`
+    })
+    const imports = [...names]
+      .map(([spec, name]) => `import * as ${name} from ${JSON.stringify(spec)};`)
+      .join('\n')
+    return `${imports}\n${body}`
+  }
+
+  function isDomEntryId(id: string): boolean {
+    const clean = id.replace(/\?.*$/, '')
+    return (
+      clean === `${virtualIdPrefix}_expo_dom_entry` ||
+      clean === '\\0_expo_dom_entry' ||
+      clean === '_expo_dom_entry'
+    )
+  }
+
+  function isDomWebModule(id: string, importer?: string): boolean {
+    // the web closure is rooted at the dom entry: only modules reachable
+    // from it take web resolution. never classify by path substring: native
+    // modules such as @expo/dom-webview sources contain 'dom-web' but must
+    // keep native resolution (their react-native import must not rewrite to
+    // react-native-web, which unmounts the native webview).
+    if (isDomEntryId(id)) return true
+    if (!importer) return false
+    const cleanImporter = importer.replace(/\?.*$/, '')
+    return domWebModuleIds.has(cleanImporter) || domWebModuleIds.has(importer)
+  }
+
+  return {
+    name: 'sootsim-expo-dom-components',
+    enforce: 'pre',
+    config() {
+      // the dom web closure imports CJS-only packages (react, expo's
+      // metro-hmr devtooling). vite's CJS→ESM interop only kicks in via
+      // pre-bundle, and lazily reached page graphs cannot rely on
+      // first-request optimization, so force them here. nothing outside
+      // this closure imports pretty-format or log-box-utils.
+      // react-refresh/runtime is deliberately absent: the engine imports
+      // it directly and its module identity is load-bearing for fast
+      // refresh, so the closure shims it instead (see below).
+      return {
+        optimizeDeps: {
+          include: [
+            'react',
+            'react-dom',
+            'react-dom/client',
+            'react/jsx-runtime',
+            'react/jsx-dev-runtime',
+            'pretty-format',
+            '@expo/log-box-utils',
+          ],
+        },
+      }
+    },
+    configResolved(config) {
+      isProduction =
+        (config.mode === 'production' || config.isProduction) &&
+        process.env.SOOTSIM_TENANT_BUILD_MODE !== 'development'
+    },
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        if (!req.url) return next()
+        const rawUrl = req.url
+        const isDomRoute =
+          rawUrl.startsWith('/_expo/@dom') ||
+          rawUrl.startsWith('/www.bundle') ||
+          rawUrl.startsWith('www.bundle')
+        if (!isDomRoute) return next()
+
+        const url = new URL(
+          rawUrl.startsWith('/') ? rawUrl : '/' + rawUrl,
+          'http://localhost',
+        )
+        if (url.pathname === '/_expo/@dom/entry' || url.pathname.endsWith('/entry')) {
+          return next()
+        }
+
+        let fileUrl = url.searchParams.get('file')
+        if (
+          !fileUrl &&
+          (url.pathname.includes('/www.bundle/') ||
+            url.pathname.startsWith('/www.bundle'))
+        ) {
+          const match = url.pathname.match(/([a-f0-9]{32})\.html/i)
+          if (match && domHashMap.has(match[1])) {
+            fileUrl = domHashMap.get(match[1])!
+          }
+        }
+        if (!fileUrl) return next()
+
+        let decodedFilePath: string
+        try {
+          decodedFilePath = fileUrl.startsWith('file:') ? fileURLToPath(fileUrl) : fileUrl
+        } catch {
+          decodedFilePath = fileUrl
+        }
+        const title = path.basename(decodedFilePath)
+        const entryScriptSrc = `/_expo/@dom/entry?file=${encodeURIComponent(fileUrl)}`
+
+        const html = `<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+    <title>${title.replace(/&/g, '&amp;').replace(/"/g, '&quot;')}</title>
+    <style id="expo-dom-component-style">
+      html, body {
+        -webkit-overflow-scrolling: touch;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+      }
+      #root {
+        display: flex;
+        flex: 1;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+    <script>
+      window.__DEV__ = true;
+      window.process = window.process || { env: { NODE_ENV: 'development' } };
+      // expo's dom closure branches on EXPO_OS (hmr setup takes the web
+      // form only when it is 'web'); metro sets this at bundle time.
+      window.process.env = window.process.env || {};
+      window.process.env.NODE_ENV = window.process.env.NODE_ENV || 'development';
+      window.process.env.EXPO_OS = 'web';
+      (function () {
+        var documentUrl = location.href;
+        function frameUrl() { return String(location.href); }
+        window.ReactNativeWebView = window.ReactNativeWebView || {
+          postMessage: function (data) {
+            window.parent.postMessage({
+              __sootsimWebViewKind: 'reactNativeWebViewMessage',
+              data: String(data),
+              url: frameUrl(),
+              loading: document.readyState !== 'complete',
+              title: String(document.title || '')
+            }, '*');
+          },
+          injectedObjectJson: function () {
+            try {
+              if (window.parent && window.parent.__sootsimGetInjectedObjectJson) {
+                var res = window.parent.__sootsimGetInjectedObjectJson(frameUrl());
+                if (res) return typeof res === 'string' ? res : JSON.stringify(res);
+              }
+            } catch (e) {}
+            return "{}";
+          }
+        };
+        window.addEventListener('message', function (event) {
+          if (event.source !== window.parent) return;
+          var payload = event.data;
+          if (!payload || typeof payload !== 'object') return;
+          if (payload.__sootsimWebViewKind !== 'injectJavaScript') return;
+          event.stopImmediatePropagation();
+          try {
+            (0, eval)(String(payload.js || ''));
+          } catch (err) {
+            setTimeout(function () { throw err; }, 0);
+          }
+        }, true);
+        // metro-style require shim for expo's dom closure: classic scripts
+        // run before module imports evaluate, so this covers eval-time
+        // requires. static requires are rewritten to imports at serve time;
+        // only denylisted specifiers (native-only log-box, optional
+        // stylesheets) reach this. the entry module installs the fuller
+        // version below once react is loaded.
+        window.require = window.require || function (mod) {
+          if (mod === '@expo/log-box' || mod === '@expo/log-box/lib') {
+            return { setupLogBox: function () {} };
+          }
+          if (mod === 'react-refresh/runtime') {
+            return {
+              injectIntoGlobalHook: function () {},
+              createSignatureFunctionForTransform: function () { return function (t) { return t; }; },
+              isLikelyComponentType: function () { return false; },
+              getFamilyByType: function () { return undefined; },
+              register: function () {},
+              performReactRefresh: function () {},
+              hasUnrecoverableErrors: function () { return false; }
+            };
+          }
+          return {};
+        };
+      })();
+    </script>
+    <script>
+      var injectedObject = {};
+      try {
+        injectedObject = JSON.parse(window.ReactNativeWebView.injectedObjectJson());
+      } catch (e) {
+        console.warn('Failed to parse injectedObjectJson:', e);
+      }
+      window.$$EXPO_DOM_HOST_OS = injectedObject.EXPO_DOM_HOST_OS || 'ios';
+      window.$$EXPO_INITIAL_PROPS = injectedObject.initialProps || { names: [], props: {} };
+    </script>
+  </head>
+  <body>
+    <noscript>DOM Components require <code>javaScriptEnabled</code></noscript>
+    <div id="root"></div>
+    <script type="module" src="/@vite/client"></script>
+    <script type="module" src="${entryScriptSrc}"></script>
+  </body>
+</html>`
+        res.statusCode = 200
+        res.setHeader('Content-Type', 'text/html; charset=utf-8')
+        res.setHeader('Cache-Control', 'no-cache')
+        // the shell page is cross-origin isolated (COOP same-origin plus
+        // COEP require-corp): a same-origin iframe document without matching
+        // response headers is blocked before any script runs. mirror the
+        // engine-tenant static handler.
+        res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
+        res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin')
+        res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
+        res.end(html)
+      })
+    },
+    async resolveId(id, importer) {
+      // expo's ExpoDOMWebView and RNWebView wrappers require their package in
+      // a try/catch and export undefined when it is not installed, so the
+      // webview wrapper can report the missing package it chose. esm cannot
+      // catch a static import, so resolve the package here and answer with
+      // the same undefined when it is absent.
+      const optionalWebViewReexport = async (pkg: string, from: string | undefined) => {
+        const resolved = await this.resolve(pkg, from, { skipSelf: true })
+        return `${virtualIdPrefix}optional-webview:${pkg}${resolved ? '' : '?missing'}`
+      }
+      const inDomWeb = importer == null || isDomWebModule(id, importer)
+      if (
+        (id === '@expo/metro-runtime' ||
+          id.startsWith('@expo/metro-runtime/') ||
+          id.startsWith('@expo/metro/')) &&
+        inDomWeb
+      ) {
+        return `${virtualIdPrefix}@expo/metro-runtime`
+      }
+      if ((id === '@expo/log-box' || id === '@expo/log-box/lib') && inDomWeb) {
+        return `${virtualIdPrefix}@expo/log-box`
+      }
+      if (
+        (id === 'expo/build/dom/webview/ExpoDOMWebView' ||
+          id.endsWith('/expo/build/dom/webview/ExpoDOMWebView.js') ||
+          id.endsWith('/expo/build/dom/webview/ExpoDOMWebView')) &&
+        inDomWeb
+      ) {
+        return optionalWebViewReexport('@expo/dom-webview', importer)
+      }
+      if (
+        (id === 'expo/build/dom/webview/RNWebView' ||
+          id.endsWith('/expo/build/dom/webview/RNWebView.js') ||
+          id.endsWith('/expo/build/dom/webview/RNWebView')) &&
+        inDomWeb
+      ) {
+        return optionalWebViewReexport('react-native-webview', importer)
+      }
+      if (
+        id.startsWith('/_expo/@dom/entry') ||
+        id.startsWith('@dom-entry:') ||
+        id.includes('/_expo/@dom/entry')
+      ) {
+        const query = id.includes('?') ? id.slice(id.indexOf('?')) : ''
+        const resolved = `${virtualIdPrefix}_expo_dom_entry${query}`
+        domWebModuleIds.add(virtualIdPrefix + '_expo_dom_entry')
+        domWebModuleIds.add('\0_expo_dom_entry')
+        domWebModuleIds.add('_expo_dom_entry')
+        return resolved
+      }
+
+      if (isDomWebModule(id, importer)) {
+        if (id === 'expo/dom/internal') {
+          const resolved = path.resolve(
+            workspaceNodeModules,
+            'expo/build/dom/internal/internal.web.js',
+          )
+          domWebModuleIds.add(resolved)
+          return resolved
+        }
+        if (id === 'expo/dom') {
+          const resolved = path.resolve(
+            workspaceNodeModules,
+            'expo/build/dom/dom/dom.web.js',
+          )
+          domWebModuleIds.add(resolved)
+          return resolved
+        }
+        if (id === 'react-native') {
+          const resolved = path.resolve(
+            workspaceNodeModules,
+            'react-native-web/dist/cjs/index.js',
+          )
+          domWebModuleIds.add(resolved)
+          return resolved
+        }
+        if (
+          id.endsWith('/launch/registerRootComponent') ||
+          id === '../launch/registerRootComponent'
+        ) {
+          const resolved = path.resolve(
+            workspaceNodeModules,
+            'expo/build/launch/registerRootComponent.web.js',
+          )
+          domWebModuleIds.add(resolved)
+          return resolved
+        }
+        if (id.startsWith('.') && importer) {
+          const dir = path.dirname(importer.replace(/\?.*$/, ''))
+          const resolved = path.resolve(dir, id)
+          if (fs.existsSync(resolved)) {
+            try {
+              const stat = fs.statSync(resolved)
+              if (stat.isFile()) {
+                domWebModuleIds.add(resolved)
+                return resolved
+              }
+              if (stat.isDirectory()) {
+                const indexCandidates = [
+                  path.join(resolved, 'index.web.tsx'),
+                  path.join(resolved, 'index.web.ts'),
+                  path.join(resolved, 'index.web.jsx'),
+                  path.join(resolved, 'index.web.js'),
+                  path.join(resolved, 'index.tsx'),
+                  path.join(resolved, 'index.ts'),
+                  path.join(resolved, 'index.jsx'),
+                  path.join(resolved, 'index.js'),
+                ]
+                for (const candidate of indexCandidates) {
+                  if (fs.existsSync(candidate) && fs.statSync(candidate).isFile()) {
+                    domWebModuleIds.add(candidate)
+                    return candidate
+                  }
+                }
+              }
+            } catch {}
+          }
+          const webExtensions = [
+            '.web.tsx',
+            '.web.ts',
+            '.web.jsx',
+            '.web.js',
+            '.tsx',
+            '.ts',
+            '.jsx',
+            '.js',
+          ]
+          for (const ext of webExtensions) {
+            const candidate =
+              resolved.endsWith('.js') && ext.startsWith('.web.')
+                ? resolved.slice(0, -3) + ext
+                : resolved + ext
+            if (fs.existsSync(candidate) && fs.statSync(candidate).isFile()) {
+              domWebModuleIds.add(candidate)
+              return candidate
+            }
+          }
+          const indexCandidates = [
+            path.join(resolved, 'index.web.tsx'),
+            path.join(resolved, 'index.web.ts'),
+            path.join(resolved, 'index.web.jsx'),
+            path.join(resolved, 'index.web.js'),
+            path.join(resolved, 'index.tsx'),
+            path.join(resolved, 'index.ts'),
+            path.join(resolved, 'index.jsx'),
+            path.join(resolved, 'index.js'),
+          ]
+          for (const candidate of indexCandidates) {
+            if (fs.existsSync(candidate) && fs.statSync(candidate).isFile()) {
+              domWebModuleIds.add(candidate)
+              return candidate
+            }
+          }
+        }
+        // bare specifiers must keep vite core resolution: resolving them
+        // here would pin an absolute /@fs id that bypasses dep pre-bundling,
+        // serving raw CJS with no named/default exports in the browser.
+        // (relative ids above keep our metro-style .web preference.)
+        const isBare =
+          !id.startsWith('.') &&
+          !id.startsWith('/') &&
+          !id.startsWith('\0') &&
+          !id.includes('://') &&
+          !path.isAbsolute(id)
+        if (isBare) return null
+        const fallback = await this.resolve(id, importer, { skipSelf: true })
+        if (fallback) {
+          domWebModuleIds.add(fallback.id.replace(/\?.*$/, ''))
+          return fallback
+        }
+      }
+      return null
+    },
+    load(id) {
+      if (id === `${virtualIdPrefix}@expo/metro-runtime`) {
+        // metro's hmr client cannot work under vite: there is no metro
+        // server or hot socket, and vite's own client provides reload.
+        // expo's hmr module constructs one at startup and calls
+        // on/send/isEnabled/enable/disable/hasPendingUpdates/close, so
+        // serve a no-op with that surface instead of connecting anywhere.
+        return `class NoopMetroHMRClient {
+  on() { return () => {}; }
+  send() {}
+  isEnabled() { return false; }
+  hasPendingUpdates() { return false; }
+  enable() {}
+  disable() {}
+  close() {}
+}
+export default NoopMetroHMRClient;
+`
+      }
+      if (id === `${virtualIdPrefix}@expo/log-box`) {
+        return 'export function setupLogBox() {}; export default { setupLogBox() {} };'
+      }
+      if (id.startsWith(`${virtualIdPrefix}optional-webview:`)) {
+        const pkg = id
+          .slice(`${virtualIdPrefix}optional-webview:`.length)
+          .replace(/\?.*$/, '')
+        return id.endsWith('?missing')
+          ? 'export default undefined;\n'
+          : `import { WebView } from ${JSON.stringify(pkg)};\nexport default WebView;\n`
+      }
+      if (id.startsWith(`${virtualIdPrefix}_expo_dom_entry`)) {
+        const query = id.slice(`${virtualIdPrefix}_expo_dom_entry`.length)
+        const params = new URLSearchParams(query)
+        const fileUrl = params.get('file')
+        if (!fileUrl) {
+          throw new Error(`Missing file query param in DOM component entry: ${id}`)
+        }
+        let targetPath: string
+        try {
+          targetPath = fileUrl.startsWith('file:') ? fileURLToPath(fileUrl) : fileUrl
+        } catch {
+          targetPath = fileUrl
+        }
+        const internalWebPath = path.resolve(
+          workspaceNodeModules,
+          'expo/build/dom/internal/internal.web.js',
+        )
+        // bare specifiers on purpose: the workspace react/react-dom package
+        // roots are CJS, and serving them by absolute path bypasses vite's
+        // pre-bundling, so the browser gets raw CJS with no default export.
+        // bare imports resolve through vite to the pre-bundled ESM build.
+        return `import React from 'react';
+import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
+if (typeof window !== 'undefined') {
+  window.React = React;
+  window.ReactDOM = ReactDOM;
+  window.ReactDOMClient = ReactDOMClient;
+  window.require = function (mod) {
+    if (mod === 'react') return React;
+    if (mod === 'react-dom') return ReactDOM;
+    if (mod === 'react-dom/client') return ReactDOMClient;
+    if (mod === './withDevTools' || (typeof mod === 'string' && mod.endsWith('withDevTools'))) {
+      return { withDevTools: function (c) { return c; } };
+    }
+    // expo's dom-entry calls require('@expo/log-box/lib').setupLogBox() in
+    // dev; mirror the plugin's @expo/log-box virtual stub.
+    if (mod === '@expo/log-box' || mod === '@expo/log-box/lib') {
+      return { setupLogBox: function () {} };
+    }
+    // metro fast-refresh plumbing cannot run under vite; mirror the head
+    // script's no-op shape for requires that execute after module eval.
+    if (mod === 'react-refresh/runtime') {
+      return {
+        injectIntoGlobalHook: function () {},
+        createSignatureFunctionForTransform: function () { return function (t) { return t; }; },
+        isLikelyComponentType: function () { return false; },
+        getFamilyByType: function () { return undefined; },
+        register: function () {},
+        performReactRefresh: function () {},
+        hasUnrecoverableErrors: function () { return false; }
+      };
+    }
+    return {};
+  };
+}
+import { registerDOMComponent } from ${JSON.stringify(internalWebPath)};
+import Component from ${JSON.stringify(targetPath + '?dom-web')};
+registerDOMComponent(Component);
+`
+      }
+      return null
+    },
+    async transform(code, id) {
+      const query = id.includes('?') ? id.slice(id.indexOf('?') + 1) : ''
+      if (new URLSearchParams(query).has('dom-web')) {
+        const cleanId = id.replace(/\?.*$/, '')
+        const transformed = await transformWithOxc(code, cleanId, {
+          lang: cleanId.endsWith('.tsx')
+            ? 'tsx'
+            : cleanId.endsWith('.ts')
+              ? 'ts'
+              : cleanId.endsWith('.jsx')
+                ? 'jsx'
+                : 'js',
+          jsx: { runtime: 'automatic' },
+        })
+        return { code: transformed.code, map: transformed.map ?? null }
+      }
+
+      const cleanId = id.replace(/\?.*$/, '')
+      if (domWebModuleIds.has(cleanId) || domWebModuleIds.has(id)) {
+        const rewritten = rewriteDomWebRequires(code)
+        if (rewritten) return { code: rewritten, map: null }
+      }
+      // like expo's use-dom babel plugin, any module whose program opens with
+      // the directive is a dom component, wherever it lives.
+      if (!/\.(tsx?|jsx?)$/.test(cleanId)) return null
+      if (!code.includes('use dom')) return null
+      if (!/(?:^|\n)\s*['"]use dom['"](?:\s*;|\s*\n)/.test(code)) return null
+
+      const isTS = /\.(tsx?|mts|cts)$/.test(cleanId)
+      const isTSX = cleanId.endsWith('.tsx')
+
+      const { transformAsync } = await getDomBabelCore()
+      const { expoUseDomDirectivePlugin } = sootsimPluginRequire(
+        'babel-preset-expo/build/plugins/use-dom-directive-plugin',
+      )
+
+      const fileUrl = pathToFileURL(cleanId).href
+      const hash = crypto.createHash('md5').update(fileUrl).digest('hex')
+      domHashMap.set(hash, fileUrl)
+
+      const result = await transformAsync(code, {
+        filename: cleanId,
+        babelrc: false,
+        configFile: false,
+        sourceMaps: true,
+        caller: {
+          name: 'peachsim',
+          platform: 'ios',
+          isDev: !isProduction,
+          projectRoot,
+        },
+        presets: isTS
+          ? [
+              [
+                sootsimPluginRequire.resolve('@babel/preset-typescript'),
+                { isTSX, allExtensions: isTSX, allowDeclareFields: true },
+              ],
+            ]
+          : [],
+        plugins: [
+          [sootsimPluginRequire.resolve('@babel/plugin-syntax-jsx')],
+          [expoUseDomDirectivePlugin],
+        ],
+      })
+
+      if (result?.code) {
+        return {
+          code: result.code,
+          map: result.map ?? null,
+        }
+      }
+      return null
+    },
+  }
+}