sootsim 0.1.298 → 0.1.299

package/src/vite-plugin.ts

@@ -23,9 +23,14 @@ import {
   reactNativeDeepStubsForBuildResolver,
 } from '../../compat/src/stub-manifest.ts'
 import { resolveSootsimBridgePort } from './bridge-constants.ts'
-import { shouldApplyWorkletsPlugin, transformWorkletsCode } from './worklets-babel.ts'
+import {
+  REANIMATED_WORKLETIZATION_REGEX,
+  shouldApplyWorkletsPlugin,
+  transformWorkletsCode,
+} from './worklets-babel.ts'
 
 const sootsimPluginRequire = createRequire(import.meta.url)
+const virtualIdPrefix = String.fromCharCode(0)
 
 export interface SootSimOptions {
   // directory of an external RN app to load
@@ -347,8 +352,15 @@ export function sootsim(options: SootSimOptions = {}): Plugin[] {
     {
       name: 'sootsim-published-browser-internals',
       enforce: 'pre',
-      resolveId(source, importer) {
-        return resolvePublishedBrowserInternal(source, importer, publishedBrowserPackages)
+      resolveId: {
+        filter: { id: /^\./ },
+        handler(source, importer) {
+          return resolvePublishedBrowserInternal(
+            source,
+            importer,
+            publishedBrowserPackages,
+          )
+        },
       },
     },
     sootsimConfigPlugin(appDir, extraSources, publishedBrowserPackages),
@@ -366,8 +378,10 @@ export function sootsim(options: SootSimOptions = {}): Plugin[] {
     workletsBabelTransform(isAppSource),
     metroNativeResolve(isAppSource),
     reactNativeRequirePlugin(isAppSource),
-    externalAppResolvePlugin(appDir, isAppSource, ownedPackages),
-    externalAppTransformPlugin(isAppSource),
+    ...(appDir ? [externalAppResolvePlugin(appDir, isAppSource, ownedPackages)] : []),
+    ...(appDir || extraSources.length > 0
+      ? [externalAppTransformPlugin(isAppSource)]
+      : []),
     stubMissingNativeDeps(appDir),
     stubMissingImages(isAppSource),
   ]
@@ -386,21 +400,26 @@ function rnghUpstreamInternalResolvePlugin(): Plugin {
   return {
     name: 'sootsim-rngh-upstream-internal-resolve',
     enforce: 'pre',
-    resolveId(source, importer) {
-      if (!importer || !rnghLibModuleRoot) return null
-      const importerPath = stripViteQuery(importer)
-      if (!isPathInside(importerPath, rnghLibModuleRoot)) return null
-      const sourcePath = source.replace(/\.(js|jsx|mjs|ts|tsx)$/, '')
-      if (
-        sourcePath === '../..' ||
-        sourcePath.endsWith('/handlers/gestures/GestureDetector')
-      ) {
-        return rnghRootStubPath
-      }
-      if (sourcePath.endsWith('GestureHandlerRootViewContext')) {
-        return rnghGestureHandlerRootViewContextShimPath
-      }
-      return null
+    resolveId: {
+      filter: {
+        id: /(?:^\.\.\/\.\.(?:\.(?:js|jsx|mjs|ts|tsx))?$|GestureDetector(?:\.(?:js|jsx|mjs|ts|tsx))?$|GestureHandlerRootViewContext(?:\.(?:js|jsx|mjs|ts|tsx))?$)/,
+      },
+      handler(source, importer) {
+        if (!importer || !rnghLibModuleRoot) return null
+        const importerPath = stripViteQuery(importer)
+        if (!isPathInside(importerPath, rnghLibModuleRoot)) return null
+        const sourcePath = source.replace(/\.(js|jsx|mjs|ts|tsx)$/, '')
+        if (
+          sourcePath === '../..' ||
+          sourcePath.endsWith('/handlers/gestures/GestureDetector')
+        ) {
+          return rnghRootStubPath
+        }
+        if (sourcePath.endsWith('GestureHandlerRootViewContext')) {
+          return rnghGestureHandlerRootViewContextShimPath
+        }
+        return null
+      },
     },
   }
 }
@@ -482,28 +501,35 @@ export function keyboardControllerBindingsRedirect(): Plugin {
   return {
     name: 'sootsim-keyboard-controller-bindings-redirect',
     enforce: 'pre',
-    resolveId(source, importer) {
-      if (!importer) return null
-      if (!importer.includes('/react-native-keyboard-controller/')) return null
-      // keep bindings imports — strip optional .native and any leading
-      // `./`, `../`, `../../` so the depth doesn't matter.
-      const basename = source.split('/').pop() ?? ''
-      if (nativePlatformBasenames.has(basename)) {
-        return (
-          resolveNativePlatformFile(source, importer) ??
-          (basename === 'findNodeHandle' ? findNodeHandleTarget : null)
-        )
-      }
-      if (basename !== 'bindings' && basename !== 'bindings.native') return null
-      // don't redirect bindings imports that already resolved to our file
-      if (importer === target) return null
-      return target
+    resolveId: {
+      filter: {
+        id: /(?:^|\/)(?:bindings(?:\.native)?|findNodeHandle|reanimated)$/,
+      },
+      handler(source, importer) {
+        if (!importer) return null
+        if (!importer.includes('/react-native-keyboard-controller/')) return null
+        // keep bindings imports — strip optional .native and any leading
+        // `./`, `../`, `../../` so the depth doesn't matter.
+        const basename = source.split('/').pop() ?? ''
+        if (nativePlatformBasenames.has(basename)) {
+          return (
+            resolveNativePlatformFile(source, importer) ??
+            (basename === 'findNodeHandle' ? findNodeHandleTarget : null)
+          )
+        }
+        if (basename !== 'bindings' && basename !== 'bindings.native') return null
+        // don't redirect bindings imports that already resolved to our file
+        if (importer === target) return null
+        return target
+      },
     },
-    load(id) {
-      if (id === findNodeHandleTarget) {
+    load: {
+      filter: {
+        id: new RegExp(`^${virtualIdPrefix}sootsim:rnkc-find-node-handle-native$`),
+      },
+      handler() {
         return `export { findNodeHandle } from ${JSON.stringify(rnShimPath)};`
-      }
-      return null
+      },
     },
   }
 }
@@ -549,58 +575,68 @@ export function reanimatedNativeSeamRedirect(): Plugin {
   return {
     name: 'sootsim-reanimated-native-seam-redirect',
     enforce: 'pre',
-    resolveId(source, importer) {
-      // upstream's `assertWorkletsVersion` (DEV-only) imports a build-time
-      // script that does `require('react-native-worklets/package.json')`.
-      // our flat-file stub for react-native-worklets has no such subpath,
-      // so this throws under vite's worker build. resolve the package.json
-      // import to a synthetic virtual id and load synthetic JSON below.
-      if (source === 'react-native-worklets/package.json') {
-        return '\0sootsim:react-native-worklets-package-json'
-      }
-      if (!importer) return null
-      // no-op the assertWorkletsVersion validator — same reason. matches both
-      // the bare import and the .js-suffixed resolved form some bundlers see.
-      if (
-        source === 'react-native-reanimated/scripts/validate-worklets-version' ||
-        source === 'react-native-reanimated/scripts/validate-worklets-version.js'
-      ) {
-        return reanimatedValidateWorkletsVersionPath
-      }
-      if (!importer.includes('/react-native-reanimated/')) return null
-      if (importer === target) return null
-      // strip optional `.web` / `.native` extension and leading `./`s — the
-      // redirect should match regardless of relative depth or platform suffix.
-      const basename = (source.split('/').pop() ?? '').replace(
-        /\.(native|web|ios|android)$/,
-        '',
-      )
-      // keep fabricUtils on the SootSim Fabric public-instance contract. the
-      // redirected module reads the constructor-attached handle for native
-      // refs and uses ReactFabric's renderer lookup for composite refs.
-      if (basename === 'fabricUtils' && importer !== reanimatedFabricUtilsRedirectPath) {
-        return reanimatedFabricUtilsRedirectPath
-      }
-      if (!reanimatedNativeSeamFiles.has(basename)) return null
-      if (process.env.SOOTSIM_REANIMATED_REDIRECT_DEBUG) {
-        console.log(
-          '[reanimatedRedirect]',
-          basename,
-          '<-',
-          source,
-          'from',
-          importer.slice(-80),
+    resolveId: {
+      filter: {
+        id: /(?:^react-native-worklets\/package\.json$|^react-native-reanimated\/scripts\/validate-worklets-version(?:\.js)?$|(?:^|\/)(?:fabricUtils|NativeReanimatedModule|scrollTo|measure|setNativeProps|dispatchCommand|setGestureState)(?:\.(?:native|web|ios|android))?$)/,
+      },
+      handler(source, importer) {
+        // upstream's `assertWorkletsVersion` (DEV-only) imports a build-time
+        // script that does `require('react-native-worklets/package.json')`.
+        // our flat-file stub for react-native-worklets has no such subpath,
+        // so this throws under vite's worker build. resolve the package.json
+        // import to a synthetic virtual id and load synthetic JSON below.
+        if (source === 'react-native-worklets/package.json') {
+          return '\0sootsim:react-native-worklets-package-json'
+        }
+        if (!importer) return null
+        // no-op the assertWorkletsVersion validator — same reason. matches both
+        // the bare import and the .js-suffixed resolved form some bundlers see.
+        if (
+          source === 'react-native-reanimated/scripts/validate-worklets-version' ||
+          source === 'react-native-reanimated/scripts/validate-worklets-version.js'
+        ) {
+          return reanimatedValidateWorkletsVersionPath
+        }
+        if (!importer.includes('/react-native-reanimated/')) return null
+        if (importer === target) return null
+        // strip optional `.web` / `.native` extension and leading `./`s — the
+        // redirect should match regardless of relative depth or platform suffix.
+        const basename = (source.split('/').pop() ?? '').replace(
+          /\.(native|web|ios|android)$/,
+          '',
         )
-      }
-      return target
+        // keep fabricUtils on the SootSim Fabric public-instance contract. the
+        // redirected module reads the constructor-attached handle for native
+        // refs and uses ReactFabric's renderer lookup for composite refs.
+        if (
+          basename === 'fabricUtils' &&
+          importer !== reanimatedFabricUtilsRedirectPath
+        ) {
+          return reanimatedFabricUtilsRedirectPath
+        }
+        if (!reanimatedNativeSeamFiles.has(basename)) return null
+        if (process.env.SOOTSIM_REANIMATED_REDIRECT_DEBUG) {
+          console.log(
+            '[reanimatedRedirect]',
+            basename,
+            '<-',
+            source,
+            'from',
+            importer.slice(-80),
+          )
+        }
+        return target
+      },
     },
-    load(id) {
-      // synthetic package.json for react-native-worklets — see resolveId
-      // above. just enough for upstream's version-validator to read `version`.
-      if (id === '\0sootsim:react-native-worklets-package-json') {
+    load: {
+      filter: {
+        id: new RegExp(`^${virtualIdPrefix}sootsim:react-native-worklets-package-json$`),
+      },
+      handler() {
+        // synthetic package.json for react-native-worklets — see resolveId
+        // above. just enough for upstream's version-validator to read `version`.
         return `export default ${JSON.stringify({ version: '0.0.0-sootsim', name: 'react-native-worklets' })}`
-      }
-      return null
+      },
     },
   }
 }
@@ -632,42 +668,51 @@ export function manifestNativeSeamRedirect(): Plugin {
       })
     }
   }
+  const sourceFilter = new RegExp(
+    `(?:^|/)(?:${[...byPkg.values()]
+      .flatMap(({ basenames }) => [...basenames])
+      .map((basename) => basename.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+      .join('|')})(?:\\.(?:native|web|ios|android))?$`,
+  )
   return {
     name: 'sootsim-manifest-native-seam-redirect',
     enforce: 'pre',
-    resolveId(source, importer) {
-      if (!importer || byPkg.size === 0) 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 matchedPkg: string | undefined
-      for (const [pkg, entry] of byPkg) {
-        if (importer.includes(`/${pkg}/`)) {
-          match = entry
-          matchedPkg = pkg
-          break
+    resolveId: {
+      filter: { id: sourceFilter },
+      handler(source, importer) {
+        if (!importer || byPkg.size === 0) 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 matchedPkg: string | undefined
+        for (const [pkg, entry] of byPkg) {
+          if (importer.includes(`/${pkg}/`)) {
+            match = entry
+            matchedPkg = pkg
+            break
+          }
         }
-      }
-      if (!match) return null
-      if (importer === match.target) return null
-      const basename = (source.split('/').pop() ?? '').replace(
-        /\.(native|web|ios|android)$/,
-        '',
-      )
-      if (!match.basenames.has(basename)) return null
-      if (process.env.SOOTSIM_NATIVE_SEAM_DEBUG) {
-        console.log(
-          '[nativeSeamRedirect]',
-          `${matchedPkg}:${basename}`,
-          '<-',
-          source,
-          'from',
-          importer.slice(-80),
-          match.notes ? `(${match.notes})` : '',
+        if (!match) return null
+        if (importer === match.target) return null
+        const basename = (source.split('/').pop() ?? '').replace(
+          /\.(native|web|ios|android)$/,
+          '',
         )
-      }
-      return match.target
+        if (!match.basenames.has(basename)) return null
+        if (process.env.SOOTSIM_NATIVE_SEAM_DEBUG) {
+          console.log(
+            '[nativeSeamRedirect]',
+            `${matchedPkg}:${basename}`,
+            '<-',
+            source,
+            'from',
+            importer.slice(-80),
+            match.notes ? `(${match.notes})` : '',
+          )
+        }
+        return match.target
+      },
     },
   }
 }
@@ -689,6 +734,7 @@ export function wsBridgePlugin(): Plugin {
   let boundPort: Promise<number | null> | null = null
   return {
     name: 'sootsim-ws-bridge',
+    apply: 'serve',
     configureServer(server) {
       if (boundPort) return
       // lazy import to avoid pulling ws into the main bundle.
@@ -1001,67 +1047,45 @@ function sootsimConfigPlugin(
 // react-reconciler code. this enables runtime React version switching for
 // external app bundles — bindReact(appReact) swaps which React all code uses.
 function reactBridgePlugin(): Plugin {
-  let isBuild = false
   let redirectCount = 0
-  let skipCount = 0
   return {
     name: 'sootsim-react-bridge',
+    apply: 'serve',
     enforce: 'pre',
-    configResolved(config) {
-      isBuild = config.command === 'build'
-      console.log('[react-bridge-plugin] isBuild:', isBuild)
-    },
-    async resolveId(source, importer, options) {
-      if (source !== 'react' || !importer) return null
-
-      // log all react imports to see what's being processed
-      if (
-        importer.includes('/compat/') ||
-        importer.includes('/sootsim/src/') ||
-        importer.includes('/sootsim-engine/src/')
-      ) {
-        skipCount++
-        if (skipCount <= 5) {
-          const skip = (options as { scan?: boolean })?.scan || options?.ssr || isBuild
-          if (!skip) {
-            console.log(
-              '[react-bridge-plugin] react import from:',
-              importer.split('/').slice(-3).join('/'),
-              'skip:',
-              skip,
-            )
-          }
+    resolveId: {
+      filter: { id: /^react$/ },
+      async handler(_source, importer, options) {
+        if (!importer) return null
+
+        // skip during dep scanning / SSR — only active in browser serve mode
+        if ((options as { scan?: boolean })?.scan || options?.ssr) return null
+
+        // only redirect imports from sootsim, sootsim-engine, compat, and react-reconciler
+        const shouldRedirect =
+          importer.includes('/sootsim/src/') ||
+          importer.includes('/sootsim-engine/src/') ||
+          importer.includes('/compat/src/') ||
+          importer.includes('react-reconciler')
+
+        if (!shouldRedirect) return null
+
+        // don't redirect react-bridge's own import of react (avoid infinite loop)
+        if (importer.includes('react-bridge')) return null
+
+        // stub-registry needs the real React (with __CLIENT_INTERNALS) for bundle stubs
+        if (importer.includes('stub-registry')) return null
+
+        redirectCount++
+        if (redirectCount <= 10) {
+          console.log(
+            '[react-bridge-plugin] REDIRECTING:',
+            importer.split('/').slice(-3).join('/'),
+          )
+        } else if (redirectCount === 11) {
+          console.log('[react-bridge-plugin] ... more redirects')
         }
-      }
-
-      // skip during dep scanning / SSR — only active in browser serve mode
-      if ((options as { scan?: boolean })?.scan || options?.ssr || isBuild) return null
-
-      // only redirect imports from sootsim, sootsim-engine, compat, and react-reconciler
-      const shouldRedirect =
-        importer.includes('/sootsim/src/') ||
-        importer.includes('/sootsim-engine/src/') ||
-        importer.includes('/compat/src/') ||
-        importer.includes('react-reconciler')
-
-      if (!shouldRedirect) return null
-
-      // don't redirect react-bridge's own import of react (avoid infinite loop)
-      if (importer.includes('react-bridge')) return null
-
-      // stub-registry needs the real React (with __CLIENT_INTERNALS) for bundle stubs
-      if (importer.includes('stub-registry')) return null
-
-      redirectCount++
-      if (redirectCount <= 10) {
-        console.log(
-          '[react-bridge-plugin] REDIRECTING:',
-          importer.split('/').slice(-3).join('/'),
-        )
-      } else if (redirectCount === 11) {
-        console.log('[react-bridge-plugin] ... more redirects')
-      }
-      return { id: reactBridgePath, external: false }
+        return { id: reactBridgePath, external: false }
+      },
     },
   }
 }
@@ -1073,34 +1097,37 @@ export function workerReactBridgePlugin(): Plugin {
   return {
     name: 'sootsim-worker-react-bridge',
     enforce: 'pre',
-    async resolveId(source, importer, options) {
-      if (source !== 'react' || !importer) return null
-
-      // skip during dep scanning / SSR
-      if ((options as { scan?: boolean })?.scan || options?.ssr) return null
-
-      // don't redirect react-bridge's own import of react (avoid infinite loop)
-      if (importer.includes('react-bridge')) return null
-
-      // stub-registry needs the real React (with __CLIENT_INTERNALS) for bundle stubs
-      if (importer.includes('stub-registry')) return null
-
-      // redirect react imports from sootsim, sootsim-engine, compat, react-reconciler,
-      // and any pure-JS RN-ecosystem package the bundle pulls in. without this
-      // redirect, packages like react-native-drawer-layout / use-latest-callback
-      // call into a separate React instance than the renderer/bridge does, so
-      // their useRef/useEffect refs collide with the engine's hooks state and
-      // we hit "Maximum update depth exceeded" infinite-loop renders.
-      const shouldRedirect =
-        importer.includes('/sootsim/src/') ||
-        importer.includes('/sootsim-engine/src/') ||
-        importer.includes('/compat/src/') ||
-        importer.includes('react-reconciler') ||
-        importer.includes('/node_modules/')
-
-      if (!shouldRedirect) return null
-
-      return { id: reactBridgePath, external: false }
+    resolveId: {
+      filter: { id: /^react$/ },
+      async handler(_source, importer, options) {
+        if (!importer) return null
+
+        // skip during dep scanning / SSR
+        if ((options as { scan?: boolean })?.scan || options?.ssr) return null
+
+        // don't redirect react-bridge's own import of react (avoid infinite loop)
+        if (importer.includes('react-bridge')) return null
+
+        // stub-registry needs the real React (with __CLIENT_INTERNALS) for bundle stubs
+        if (importer.includes('stub-registry')) return null
+
+        // redirect react imports from sootsim, sootsim-engine, compat, react-reconciler,
+        // and any pure-JS RN-ecosystem package the bundle pulls in. without this
+        // redirect, packages like react-native-drawer-layout / use-latest-callback
+        // call into a separate React instance than the renderer/bridge does, so
+        // their useRef/useEffect refs collide with the engine's hooks state and
+        // we hit "Maximum update depth exceeded" infinite-loop renders.
+        const shouldRedirect =
+          importer.includes('/sootsim/src/') ||
+          importer.includes('/sootsim-engine/src/') ||
+          importer.includes('/compat/src/') ||
+          importer.includes('react-reconciler') ||
+          importer.includes('/node_modules/')
+
+        if (!shouldRedirect) return null
+
+        return { id: reactBridgePath, external: false }
+      },
     },
   }
 }
@@ -1113,8 +1140,9 @@ export function fixJsxRuntimeExports(): Plugin {
   return {
     name: 'sootsim-fix-jsx-runtime',
     enforce: 'pre',
-    async resolveId(source, importer, options) {
-      if (source === 'react/jsx-runtime' || source === 'react/jsx-dev-runtime') {
+    resolveId: {
+      filter: { id: /^react\/jsx-(?:dev-)?runtime$/ },
+      async handler(source, importer, options) {
         const resolved = await this.resolve(source, importer, {
           ...options,
           skipSelf: true,
@@ -1125,38 +1153,42 @@ export function fixJsxRuntimeExports(): Plugin {
             ? '\0sootsim:jsx-runtime:'
             : '\0sootsim:jsx-dev-runtime:'
         return prefix + resolved.id
-      }
-      return null
+      },
     },
-    load(id) {
-      if (id.startsWith('\0sootsim:jsx-runtime:')) {
-        const realId = id.slice('\0sootsim:jsx-runtime:'.length)
-        return [
-          `import * as _mod from ${JSON.stringify(realId)};`,
-          `const _m = _mod.default || _mod;`,
-          `export const jsx = _m.jsx || _mod.jsx;`,
-          `export const jsxs = _m.jsxs || _mod.jsxs;`,
-          `export const Fragment = _m.Fragment || _mod.Fragment;`,
-        ].join('\n')
-      }
-      if (id.startsWith('\0sootsim:jsx-dev-runtime:')) {
-        const realId = id.slice('\0sootsim:jsx-dev-runtime:'.length)
-        // react/jsx-runtime is already wrapped by this plugin (above) to expose
-        // { jsx, jsxs, Fragment } as named exports, so read them directly from
-        // the namespace — no `_runtime.default || _runtime` fallback needed.
-        // rolldown statically knows the wrapped module has no default export
-        // and would emit IMPORT_IS_UNDEFINED warnings on every build.
-        return [
-          `import * as _mod from ${JSON.stringify(realId)};`,
-          `import * as _runtime from "react/jsx-runtime";`,
-          `const _m = _mod.default || _mod;`,
-          // production React builds may not expose jsxDEV from react/jsx-dev-runtime.
-          // fall back to jsx so transformed modules still execute.
-          `export const jsxDEV = _m.jsxDEV || _mod.jsxDEV || _m.jsx || _mod.jsx || _runtime.jsx;`,
-          `export const Fragment = _m.Fragment || _mod.Fragment || _runtime.Fragment;`,
-        ].join('\n')
-      }
-      return null
+    load: {
+      filter: {
+        id: new RegExp(`^${virtualIdPrefix}sootsim:jsx-(?:dev-)?runtime:`),
+      },
+      handler(id) {
+        if (id.startsWith('\0sootsim:jsx-runtime:')) {
+          const realId = id.slice('\0sootsim:jsx-runtime:'.length)
+          return [
+            `import * as _mod from ${JSON.stringify(realId)};`,
+            `const _m = _mod.default || _mod;`,
+            `export const jsx = _m.jsx || _mod.jsx;`,
+            `export const jsxs = _m.jsxs || _mod.jsxs;`,
+            `export const Fragment = _m.Fragment || _mod.Fragment;`,
+          ].join('\n')
+        }
+        if (id.startsWith('\0sootsim:jsx-dev-runtime:')) {
+          const realId = id.slice('\0sootsim:jsx-dev-runtime:'.length)
+          // react/jsx-runtime is already wrapped by this plugin (above) to expose
+          // { jsx, jsxs, Fragment } as named exports, so read them directly from
+          // the namespace — no `_runtime.default || _runtime` fallback needed.
+          // rolldown statically knows the wrapped module has no default export
+          // and would emit IMPORT_IS_UNDEFINED warnings on every build.
+          return [
+            `import * as _mod from ${JSON.stringify(realId)};`,
+            `import * as _runtime from "react/jsx-runtime";`,
+            `const _m = _mod.default || _mod;`,
+            // production React builds may not expose jsxDEV from react/jsx-dev-runtime.
+            // fall back to jsx so transformed modules still execute.
+            `export const jsxDEV = _m.jsxDEV || _mod.jsxDEV || _m.jsx || _mod.jsx || _runtime.jsx;`,
+            `export const Fragment = _m.Fragment || _mod.Fragment || _runtime.Fragment;`,
+          ].join('\n')
+        }
+        return null
+      },
     },
   }
 }
@@ -1331,21 +1363,30 @@ export function workletsBabelTransform(
   return {
     name: 'sootsim-worklets-babel-transform',
     enforce: 'pre',
-    async transform(code, id) {
-      if (!shouldApplyWorkletsPlugin(id, code)) return null
-      try {
-        if (process.env.SOOTSIM_WORKLETS_BABEL_DEBUG) {
-          console.log('[worklets-babel] transforming', id.slice(-80))
+    transform: {
+      filter: {
+        id: {
+          include: /\.(?:tsx?|jsx?|mjs|cjs|mts|cts)$/,
+          exclude: /node_modules\/(?:react|react-dom|react-native|react-native-web)\//,
+        },
+        code: REANIMATED_WORKLETIZATION_REGEX,
+      },
+      async handler(code, id) {
+        if (!shouldApplyWorkletsPlugin(id, code)) return null
+        try {
+          if (process.env.SOOTSIM_WORKLETS_BABEL_DEBUG) {
+            console.log('[worklets-babel] transforming', id.slice(-80))
+          }
+          return await transformWorkletsCode(code, id, true)
+        } catch (err) {
+          // surface but don't kill the build — fall back to raw code so the
+          // rest of the pipeline can run. these failures are loud in the
+          // console and easy to chase.
+          const message = err instanceof Error ? err.message : String(err)
+          console.warn(`[sootsim-worklets-babel] transform failed for ${id}: ${message}`)
+          return null
         }
-        return await transformWorkletsCode(code, id, true)
-      } catch (err) {
-        // surface but don't kill the build — fall back to raw code so the
-        // rest of the pipeline can run. these failures are loud in the
-        // console and easy to chase.
-        const message = err instanceof Error ? err.message : String(err)
-        console.warn(`[sootsim-worklets-babel] transform failed for ${id}: ${message}`)
-        return null
-      }
+      },
     },
   }
 }
@@ -1375,21 +1416,24 @@ function flowStripTransform(): Plugin {
   return {
     name: 'sootsim-flow-strip',
     enforce: 'pre',
-    transform(code, id) {
-      if (!id.includes('/node_modules/')) return null
-      if (!/\.[cm]?jsx?$/.test(id)) return null
-      if (!code.includes('@flow')) return null
-      loadFlowBabel()
-      const result = flowBabel!.transformSync(code, {
-        filename: id,
-        babelrc: false,
-        configFile: false,
-        plugins: [flowStripPlugin!, jsxSyntaxPlugin!],
-        sourceMaps: true,
-        compact: false,
-      })
-      if (!result?.code) return null
-      return { code: result.code, map: result.map ?? null }
+    transform: {
+      filter: {
+        id: /\/node_modules\/.*\.[cm]?jsx?$/,
+        code: /@flow/,
+      },
+      handler(code, id) {
+        loadFlowBabel()
+        const result = flowBabel!.transformSync(code, {
+          filename: id,
+          babelrc: false,
+          configFile: false,
+          plugins: [flowStripPlugin!, jsxSyntaxPlugin!],
+          sourceMaps: true,
+          compact: false,
+        })
+        if (!result?.code) return null
+        return { code: result.code, map: result.map ?? null }
+      },
     },
   }
 }
@@ -1398,20 +1442,23 @@ function nodeModulesJsxTransform(): Plugin {
   return {
     name: 'sootsim-node-modules-jsx',
     enforce: 'pre',
-    async transform(code, id) {
-      if (!id.includes('/node_modules/')) return null
-      if (!id.endsWith('.js')) return null
-      if (!code.includes('<')) return null
-      // quick check: does it look like JSX? (angle bracket followed by uppercase or known RN component)
-      if (!/[=(\s,]<[A-Z]/.test(code) && !/<\/[A-Z]/.test(code)) return null
-      const needsReact =
-        !code.includes('import React') && !code.includes('import * as React')
-      const withReact = needsReact ? `import React from 'react';\n${code}` : code
-      const transformed = await transformWithOxc(withReact, id, {
-        lang: 'jsx',
-        jsx: { runtime: 'classic' },
-      })
-      return { code: transformed.code, map: transformed.map }
+    transform: {
+      filter: {
+        id: /\/node_modules\/.*\.js$/,
+        code: /</,
+      },
+      async handler(code, id) {
+        // quick check: does it look like JSX? (angle bracket followed by uppercase or known RN component)
+        if (!/[=(\s,]<[A-Z]/.test(code) && !/<\/[A-Z]/.test(code)) return null
+        const needsReact =
+          !code.includes('import React') && !code.includes('import * as React')
+        const withReact = needsReact ? `import React from 'react';\n${code}` : code
+        const transformed = await transformWithOxc(withReact, id, {
+          lang: 'jsx',
+          jsx: { runtime: 'classic' },
+        })
+        return { code: transformed.code, map: transformed.map }
+      },
     },
   }
 }
@@ -1450,29 +1497,31 @@ function metroNativeResolve(isAppSource: (p: string) => boolean): Plugin {
   return {
     name: 'sootsim-metro-native-resolve',
     enforce: 'pre',
-    resolveId(source, importer) {
-      if (!importer) return null
-      if (!importer.includes('node_modules') && !isAppSource(importer)) return null
-      if (!source.startsWith('.')) return null
-      if (platformExts.some((ext) => source.endsWith(ext))) return null
-
-      const hasBaseExt = allExts.some((ext) => source.endsWith(ext))
-      const dir = path.dirname(importer)
-
-      if (hasBaseExt) {
-        const resolved = path.resolve(dir, source)
-        for (const ext of allExts) {
-          if (source.endsWith(ext)) {
-            const found = tryResolve(resolved.slice(0, -ext.length))
-            if (found) return found
-            break
+    resolveId: {
+      filter: { id: /^\./ },
+      handler(source, importer) {
+        if (!importer) return null
+        if (!importer.includes('node_modules') && !isAppSource(importer)) return null
+        if (platformExts.some((ext) => source.endsWith(ext))) return null
+
+        const dir = path.dirname(importer)
+
+        const hasBaseExt = allExts.some((ext) => source.endsWith(ext))
+        if (hasBaseExt) {
+          const resolved = path.resolve(dir, source)
+          for (const ext of allExts) {
+            if (source.endsWith(ext)) {
+              const found = tryResolve(resolved.slice(0, -ext.length))
+              if (found) return found
+              break
+            }
           }
+        } else {
+          const found = tryResolve(path.resolve(dir, source))
+          if (found) return found
         }
-      } else {
-        const found = tryResolve(path.resolve(dir, source))
-        if (found) return found
-      }
-      return null
+        return null
+      },
     },
   }
 }
@@ -1482,54 +1531,56 @@ function reactNativeRequirePlugin(isAppSource: (p: string) => boolean): Plugin {
   return {
     name: 'sootsim-react-native-require',
     enforce: 'pre',
-    transform(code, id) {
-      if (!id.includes('node_modules') && !isAppSource(id)) return null
-      if (!code.includes('react-native')) return null
-
-      let hasChanges = false
-      let imports = ''
-      let result = code
-      let importCounter = 0
-
-      if (
-        result.includes('require("react-native")') ||
-        result.includes("require('react-native')")
-      ) {
-        imports += `import * as __soot_rn_shim__ from ${JSON.stringify(rnShimPath)};\n`
-        result = result.replace(/require\(["']react-native["']\)/g, '__soot_rn_shim__')
-        hasChanges = true
-      }
+    transform: {
+      filter: { code: /react-native/ },
+      handler(code, id) {
+        if (!id.includes('node_modules') && !isAppSource(id)) return null
+
+        let hasChanges = false
+        let imports = ''
+        let result = code
+        let importCounter = 0
+
+        if (
+          result.includes('require("react-native")') ||
+          result.includes("require('react-native')")
+        ) {
+          imports += `import * as __soot_rn_shim__ from ${JSON.stringify(rnShimPath)};\n`
+          result = result.replace(/require\(["']react-native["']\)/g, '__soot_rn_shim__')
+          hasChanges = true
+        }
 
-      const deepRequireRegex = /require\(["'](react-native\/Libraries\/[^"']+)["']\)/g
-      const replacements: Array<{ full: string; path: string; varName: string }> = []
-      const seenPaths = new Map<string, string>()
-      let match
-
-      deepRequireRegex.lastIndex = 0
-      while ((match = deepRequireRegex.exec(result)) !== null) {
-        const importPath = match[1]
-        if (!seenPaths.has(importPath)) {
-          const varName = `__soot_rn_lib_${importCounter++}__`
-          const stubPath = rnLibraryStubs[importPath] || rnDeepStubDefault
-          imports += `import * as ${varName} from ${JSON.stringify(stubPath)};\n`
-          seenPaths.set(importPath, varName)
+        const deepRequireRegex = /require\(["'](react-native\/Libraries\/[^"']+)["']\)/g
+        const replacements: Array<{ full: string; path: string; varName: string }> = []
+        const seenPaths = new Map<string, string>()
+        let match
+
+        deepRequireRegex.lastIndex = 0
+        while ((match = deepRequireRegex.exec(result)) !== null) {
+          const importPath = match[1]
+          if (!seenPaths.has(importPath)) {
+            const varName = `__soot_rn_lib_${importCounter++}__`
+            const stubPath = rnLibraryStubs[importPath] || rnDeepStubDefault
+            imports += `import * as ${varName} from ${JSON.stringify(stubPath)};\n`
+            seenPaths.set(importPath, varName)
+          }
+          replacements.push({
+            full: match[0],
+            path: importPath,
+            varName: seenPaths.get(importPath)!,
+          })
         }
-        replacements.push({
-          full: match[0],
-          path: importPath,
-          varName: seenPaths.get(importPath)!,
-        })
-      }
 
-      if (replacements.length > 0) {
-        for (const rep of replacements) {
-          result = result.replace(rep.full, rep.varName)
+        if (replacements.length > 0) {
+          for (const rep of replacements) {
+            result = result.replace(rep.full, rep.varName)
+          }
+          hasChanges = true
         }
-        hasChanges = true
-      }
 
-      if (!hasChanges) return null
-      return { code: imports + result, map: null }
+        if (!hasChanges) return null
+        return { code: imports + result, map: null }
+      },
     },
   }
 }
@@ -1540,8 +1591,6 @@ function externalAppResolvePlugin(
   isAppSource: (p: string) => boolean,
   ownedPackages: Set<string>,
 ): Plugin {
-  if (!appDir) return { name: 'sootsim-external-app-resolve' }
-
   // synthetic importer inside the app dir so vite searches app's node_modules
   // using its conditions-aware exports resolution (not CJS require.resolve)
   const appVirtualImporter = path.join(appDir, '_virtual_.js')
@@ -1574,56 +1623,60 @@ function externalAppTransformPlugin(isAppSource: (p: string) => boolean): Plugin
   return {
     name: 'sootsim-external-app-transform',
     enforce: 'pre',
-    async transform(code, id) {
-      if (!isAppSource(id)) return null
-
-      let result = code
-      let imports = ''
-      let importCounter = 0
-      let hasChanges = false
-
-      if (code.includes('require(')) {
-        const requireRegex = /require\(["']([^"']+)["']\)/g
-        const replacements: Array<{ full: string; varName: string }> = []
-        const seenPaths = new Map<string, string>()
-        let match
-
-        requireRegex.lastIndex = 0
-        while ((match = requireRegex.exec(result)) !== null) {
-          const reqPath = match[1]
-          if (reqPath === 'react-native' || reqPath.startsWith('react-native/')) continue
-
-          if (!seenPaths.has(reqPath)) {
-            const varName = `__soot_cjs_${importCounter++}__`
-            imports += `import * as ${varName} from ${JSON.stringify(reqPath)};\n`
-            seenPaths.set(reqPath, varName)
+    transform: {
+      filter: { code: /require\(|</ },
+      async handler(code, id) {
+        if (!isAppSource(id)) return null
+
+        let result = code
+        let imports = ''
+        let importCounter = 0
+        let hasChanges = false
+
+        if (code.includes('require(')) {
+          const requireRegex = /require\(["']([^"']+)["']\)/g
+          const replacements: Array<{ full: string; varName: string }> = []
+          const seenPaths = new Map<string, string>()
+          let match
+
+          requireRegex.lastIndex = 0
+          while ((match = requireRegex.exec(result)) !== null) {
+            const reqPath = match[1]
+            if (reqPath === 'react-native' || reqPath.startsWith('react-native/'))
+              continue
+
+            if (!seenPaths.has(reqPath)) {
+              const varName = `__soot_cjs_${importCounter++}__`
+              imports += `import * as ${varName} from ${JSON.stringify(reqPath)};\n`
+              seenPaths.set(reqPath, varName)
+            }
+            replacements.push({ full: match[0], varName: seenPaths.get(reqPath)! })
           }
-          replacements.push({ full: match[0], varName: seenPaths.get(reqPath)! })
-        }
 
-        if (replacements.length > 0) {
-          for (const rep of replacements) {
-            result = result.replace(rep.full, rep.varName)
+          if (replacements.length > 0) {
+            for (const rep of replacements) {
+              result = result.replace(rep.full, rep.varName)
+            }
+            hasChanges = true
           }
-          hasChanges = true
         }
-      }
 
-      if (imports) result = imports + result
+        if (imports) result = imports + result
 
-      if (id.endsWith('.js') && result.includes('<')) {
-        const needsReact =
-          !result.includes('import React') && !result.includes('import * as React')
-        const withReact = needsReact ? `import React from 'react';\n${result}` : result
-        const transformed = await transformWithOxc(withReact, id, {
-          lang: 'jsx',
-          jsx: { runtime: 'classic' },
-        })
-        return { code: transformed.code, map: transformed.map }
-      }
+        if (id.endsWith('.js') && result.includes('<')) {
+          const needsReact =
+            !result.includes('import React') && !result.includes('import * as React')
+          const withReact = needsReact ? `import React from 'react';\n${result}` : result
+          const transformed = await transformWithOxc(withReact, id, {
+            lang: 'jsx',
+            jsx: { runtime: 'classic' },
+          })
+          return { code: transformed.code, map: transformed.map }
+        }
 
-      if (!hasChanges) return null
-      return { code: result, map: null }
+        if (!hasChanges) return null
+        return { code: result, map: null }
+      },
     },
   }
 }
@@ -1658,17 +1711,20 @@ function stubMissingImages(isAppSource: (p: string) => boolean): Plugin {
   return {
     name: 'sootsim-stub-images',
     enforce: 'pre',
-    resolveId(id, importer) {
-      if (id.endsWith('.jpg') || id.endsWith('.png') || id.endsWith('.gif')) {
+    resolveId: {
+      filter: { id: /\.(?:jpg|png|gif)$/ },
+      handler(id, importer) {
         if (importer?.includes('node_modules') || (importer && isAppSource(importer))) {
           return '\0stub-image'
         }
-      }
-      return null
+        return null
+      },
     },
-    load(id) {
-      if (id === '\0stub-image') return 'export default ""'
-      return null
+    load: {
+      filter: { id: new RegExp(`^${virtualIdPrefix}stub-image$`) },
+      handler() {
+        return 'export default ""'
+      },
     },
   }
 }