@vxrn/compiler 1.25.16 → 1.26.0

package/src/transformBabel.test.ts

@@ -3,7 +3,11 @@ import os from 'node:os'
 import path from 'node:path'
 import { afterEach, describe, expect, it } from 'vitest'
 import { configureVXRNCompilerPlugin } from './configure'
-import { getBabelOptions, transformBabel } from './transformBabel'
+import {
+  getBabelOptions,
+  transformBabel,
+  transformOxcReactCompiler,
+} from './transformBabel'
 
 afterEach(() => {
   configureVXRNCompilerPlugin({ enableReanimated: false })
@@ -79,3 +83,266 @@ describe('transformBabel Flow parsing', () => {
     ).rejects.toThrow('NATIVE_TRANSFORM_NEGATIVE_CONTROL')
   })
 })
+
+describe('transformOxcReactCompiler', () => {
+  const componentCode = `
+    import { useState } from 'react'
+
+    export function Counter() {
+      const [count, setCount] = useState(0)
+      return <button onClick={() => setCount(count + 1)}>{count}</button>
+    }
+  `
+
+  it('compiles and memoizes React components with Rust React Compiler', async () => {
+    const result = await transformOxcReactCompiler(
+      '/project/Counter.tsx',
+      componentCode,
+      '19',
+      false
+    )
+
+    expect(result.code).toContain('_c(')
+    expect(result.code).toContain('react/compiler-runtime')
+    expect(result.map).toBeUndefined()
+  })
+
+  it('generates source maps when requested', async () => {
+    const result = await transformOxcReactCompiler(
+      '/project/Counter.tsx',
+      componentCode,
+      '19',
+      true
+    )
+
+    expect(result.code).toContain('_c(')
+    expect(result.map).toBeDefined()
+    expect(result.map?.mappings).toBeDefined()
+  })
+
+  it('supports target 18', async () => {
+    const result = await transformOxcReactCompiler(
+      '/project/Counter.tsx',
+      componentCode,
+      '18',
+      false
+    )
+
+    expect(result.code).toContain('_c(')
+  })
+})
+
+describe('compiler plugin multi-stage source map composition', () => {
+  it('composes earlier compiler maps when Babel also runs', async () => {
+    const { createVXRNCompilerPlugin } = await import('./index')
+    const { TraceMap, originalPositionFor } = await import('@jridgewell/trace-mapping')
+
+    const origSourceMap = process.env.VXRN_ENABLE_SOURCE_MAP
+    const origBabelGen = process.env.VXRN_USE_BABEL_FOR_GENERATORS
+    process.env.VXRN_ENABLE_SOURCE_MAP = '1'
+    process.env.VXRN_USE_BABEL_FOR_GENERATORS = '1'
+    configureVXRNCompilerPlugin({ enableCompiler: true })
+
+    const tempFile = path.join(os.tmpdir(), `Counter-${Date.now()}.tsx`)
+    fs.writeFileSync(
+      tempFile,
+      `import { useState } from 'react'
+
+export function Counter() {
+  const [count, setCount] = useState(0)
+  return <button onClick={() => setCount(count + 1)}>{count}</button>
+}
+
+export async function* generatorProbe() {
+  throw new Error("MARKER")
+}
+`
+    )
+
+    try {
+      const plugins = await createVXRNCompilerPlugin()
+      const plugin = plugins.find((p: any) => p.name === 'one:compiler') as any
+      await plugin.configResolved({ root: os.tmpdir(), build: {} })
+      const hook = plugin.transform.handler || plugin.transform
+
+      const code = fs.readFileSync(tempFile, 'utf8')
+      const context = { environment: { name: 'client' } }
+      const result = await hook.call(context, code, tempFile)
+
+      expect(result).toBeDefined()
+      expect(result.map).toBeDefined()
+
+      const tracer = new TraceMap(result.map)
+      const lines = result.code.split('\n')
+      const markerLineIndex = lines.findIndex((l: string) => l.includes('MARKER'))
+      expect(markerLineIndex).toBeGreaterThan(0)
+      const markerCol = lines[markerLineIndex].indexOf('throw')
+
+      const pos = originalPositionFor(tracer, {
+        line: markerLineIndex + 1,
+        column: markerCol,
+      })
+
+      expect(pos.source).toBe(tempFile)
+      expect(pos.line).toBe(9)
+    } finally {
+      if (origSourceMap !== undefined) {
+        process.env.VXRN_ENABLE_SOURCE_MAP = origSourceMap
+      } else {
+        delete process.env.VXRN_ENABLE_SOURCE_MAP
+      }
+      if (origBabelGen !== undefined) {
+        process.env.VXRN_USE_BABEL_FOR_GENERATORS = origBabelGen
+      } else {
+        delete process.env.VXRN_USE_BABEL_FOR_GENERATORS
+      }
+      configureVXRNCompilerPlugin({ enableCompiler: false })
+      fs.rmSync(tempFile, { force: true })
+    }
+  })
+})
+
+describe('shared compiler worklets backend selection', () => {
+  it('retains Babel for worklets by default when enableNativeWorklets is false', async () => {
+    const { vi } = await import('vitest')
+    const { createVXRNCompilerPlugin } = await import('./index')
+    const workletsModule = await import('./transformWorklets')
+    const workletSpy = vi.spyOn(workletsModule, 'transformWorklets')
+
+    configureVXRNCompilerPlugin({
+      enableReanimated: true,
+      enableNativeWorklets: false,
+    })
+
+    const tempFile = path.join(process.cwd(), `test-default-worklet-${Date.now()}.tsx`)
+    const inputCode = `export function fn() { 'worklet'; return 1 }`
+    fs.writeFileSync(tempFile, inputCode)
+
+    try {
+      const plugins = await createVXRNCompilerPlugin()
+      const plugin = plugins.find((p: any) => p.name === 'one:compiler') as any
+      await plugin.configResolved({ root: process.cwd(), build: {} })
+      const hook = plugin.transform.handler || plugin.transform
+      const context = { environment: { name: 'ios' } }
+      const result = await hook.call(context, inputCode, tempFile)
+      expect(result).toBeDefined()
+      // With enableNativeWorklets: false, transformWorklets (SWC) is NOT called
+      expect(workletSpy).not.toHaveBeenCalled()
+    } finally {
+      workletSpy.mockRestore()
+      configureVXRNCompilerPlugin({
+        enableReanimated: false,
+        enableNativeWorklets: false,
+      })
+      fs.rmSync(tempFile, { force: true })
+    }
+  })
+
+  it('uses native SWC for worklets when enableNativeWorklets is true', async () => {
+    const compiler = await import('./index')
+    const { vi } = await import('vitest')
+    const workletsModule = await import('./transformWorklets')
+    const workletSpy = vi.spyOn(workletsModule, 'transformWorklets')
+
+    configureVXRNCompilerPlugin({
+      enableReanimated: true,
+      enableNativeWorklets: true,
+    })
+
+    const tempFile = path.join(process.cwd(), `test-native-worklet-${Date.now()}.tsx`)
+    const inputCode = `export function fn() { 'worklet'; return 1 }`
+    fs.writeFileSync(tempFile, inputCode)
+
+    try {
+      const plugins = await compiler.createVXRNCompilerPlugin()
+      const plugin = plugins.find((p: any) => p.name === 'one:compiler') as any
+      await plugin.configResolved({ root: process.cwd(), build: {} })
+      const hook = plugin.transform.handler || plugin.transform
+      const context = { environment: { name: 'ios' } }
+      const result = await hook.call(context, inputCode, tempFile)
+      expect(result).toBeDefined()
+      // With enableNativeWorklets: true, transformWorklets (SWC) IS called
+      expect(workletSpy).toHaveBeenCalled()
+    } finally {
+      workletSpy.mockRestore()
+      configureVXRNCompilerPlugin({
+        enableReanimated: false,
+        enableNativeWorklets: false,
+      })
+      fs.rmSync(tempFile, { force: true })
+    }
+  })
+
+  it('invalidates cache when toggling worklets backend on the same unchanged file', async () => {
+    const compiler = await import('./index')
+    const { vi } = await import('vitest')
+    const workletsModule = await import('./transformWorklets')
+    const workletSpy = vi.spyOn(workletsModule, 'transformWorklets')
+
+    const tempFile = path.join(process.cwd(), `test-cache-toggle-${Date.now()}.tsx`)
+    const inputCode = `export function fn() { 'worklet'; return 1 }`
+    fs.writeFileSync(tempFile, inputCode)
+
+    try {
+      // Step 1: Run with Babel backend (enableNativeWorklets: false)
+      configureVXRNCompilerPlugin({
+        enableReanimated: true,
+        enableNativeWorklets: false,
+      })
+
+      const plugins1 = await compiler.createVXRNCompilerPlugin()
+      const plugin1 = plugins1.find((p: any) => p.name === 'one:compiler') as any
+      await plugin1.configResolved({ root: process.cwd(), build: {} })
+      const hook1 = plugin1.transform.handler || plugin1.transform
+      const context = { environment: { name: 'ios' } }
+
+      const res1 = await hook1.call(context, inputCode, tempFile)
+      expect(res1).toBeDefined()
+      expect(workletSpy).toHaveBeenCalledTimes(0)
+
+      // Step 2: Toggle to native SWC backend on the SAME file without changes
+      configureVXRNCompilerPlugin({
+        enableReanimated: true,
+        enableNativeWorklets: true,
+      })
+
+      const plugins2 = await compiler.createVXRNCompilerPlugin()
+      const plugin2 = plugins2.find((p: any) => p.name === 'one:compiler') as any
+      await plugin2.configResolved({ root: process.cwd(), build: {} })
+      const hook2 = plugin2.transform.handler || plugin2.transform
+
+      const res2 = await hook2.call(context, inputCode, tempFile)
+      expect(res2).toBeDefined()
+      // Cache must NOT serve the Babel entry; native transformWorklets must be invoked
+      expect(workletSpy).toHaveBeenCalledTimes(1)
+
+      // Step 3: Call again with native SWC to verify caching works for the native backend
+      const res3 = await hook2.call(context, inputCode, tempFile)
+      expect(res3).toBeDefined()
+      expect(workletSpy).toHaveBeenCalledTimes(1)
+
+      // Step 4: Toggle back to Babel backend; cache must not serve SWC entry
+      configureVXRNCompilerPlugin({
+        enableReanimated: true,
+        enableNativeWorklets: false,
+      })
+
+      const plugins3 = await compiler.createVXRNCompilerPlugin()
+      const plugin3 = plugins3.find((p: any) => p.name === 'one:compiler') as any
+      await plugin3.configResolved({ root: process.cwd(), build: {} })
+      const hook3 = plugin3.transform.handler || plugin3.transform
+
+      const res4 = await hook3.call(context, inputCode, tempFile)
+      expect(res4).toBeDefined()
+      // workletSpy should still have only been called once
+      expect(workletSpy).toHaveBeenCalledTimes(1)
+    } finally {
+      workletSpy.mockRestore()
+      configureVXRNCompilerPlugin({
+        enableReanimated: false,
+        enableNativeWorklets: false,
+      })
+      fs.rmSync(tempFile, { force: true })
+    }
+  })
+})

package/src/transformBabel.ts

@@ -1,7 +1,9 @@
 import { extname, relative } from 'node:path'
-import babel from '@babel/core'
+// type-only, so that importing this module does not drag babel in. every metro
+// worker loads it through the package index, and on the native transform path
+// babel is never called at all: loading it there is pure startup cost.
+import type * as babel from '@babel/core'
 import { resolvePath } from '@vxrn/utils'
-import hermesParserPlugin from 'babel-plugin-syntax-hermes-parser'
 import { normalizePath } from 'vite'
 import { configuration } from './configure'
 import { asyncGeneratorRegex, debug } from './constants'
@@ -55,8 +57,14 @@ const getOptions = (props: Props, force = false): babel.TransformOptions | null
   }
 
   if (enableNativewind || shouldBabelReanimated(props)) {
-    debug?.(`Using babel worklets on file ${props.id}`)
-    plugins.push(resolvePath('react-native-worklets/plugin', props.projectRoot))
+    try {
+      const workletsPlugin = resolvePath(
+        'react-native-worklets/plugin',
+        props.projectRoot
+      )
+      debug?.(`Using babel worklets on file ${props.id}`)
+      plugins.push(workletsPlugin)
+    } catch {}
   }
 
   if (shouldBabelReactCompiler(props)) {
@@ -64,11 +72,6 @@ const getOptions = (props: Props, force = false): babel.TransformOptions | null
     plugins.push(getBabelReactCompilerPlugin(props))
   }
 
-  if (shouldBabelReactNativeCodegen(props)) {
-    debug?.(`Using babel @react-native/babel-plugin-codegen on file`)
-    plugins.push('@react-native/babel-plugin-codegen')
-  }
-
   if (plugins.length) {
     return { plugins }
   }
@@ -88,11 +91,13 @@ const getOptions = (props: Props, force = false): babel.TransformOptions | null
 export async function transformOxcReactCompiler(
   id: string,
   code: string,
-  target: '18' | '19'
+  target: '18' | '19',
+  sourceMap = false
 ) {
   const { transform } = await import('oxc-transform-react')
   const result = await transform(id, code, {
     jsx: 'preserve',
+    sourcemap: sourceMap,
     reactCompiler: { target },
   })
 
@@ -114,7 +119,7 @@ export async function transformOxcReactCompiler(
     )
   }
 
-  return { code: result.code, map: undefined }
+  return { code: result.code, map: sourceMap ? (result.map as any) : undefined }
 }
 
 /**
@@ -125,6 +130,10 @@ export async function transformBabel(
   code: string,
   options: babel.TransformOptions
 ) {
+  const [{ default: babelCore }, { default: hermesParserPlugin }] = await Promise.all([
+    import('@babel/core'),
+    import('babel-plugin-syntax-hermes-parser'),
+  ])
   const extension = extname(id)
   const isTSX = extension === '.tsx'
   const isTS = isTSX || extension === '.ts'
@@ -166,7 +175,7 @@ export async function transformBabel(
   }
 
   return await new Promise<babel.BabelFileResult>((res, rej) => {
-    babel.transform(code, babelOptions, (err: unknown, result) => {
+    babelCore.transform(code, babelOptions, (err: unknown, result) => {
       if (!result || err) {
         return rej(err || new Error(`[vxrn:compiler] babel returned no result for ${id}`))
       }
@@ -191,25 +200,6 @@ const getBasePlugins = ({ development }: Props) =>
     ],
   ] satisfies babel.PluginItem[]
 
-/**
- * ----- react native codegen ----
- */
-
-// Codegen specification files need to go through the react-native codegen babel plugin.
-// See:
-// * https://reactnative.dev/docs/fabric-native-components-introduction#1-define-specification-for-codegen
-// * https://reactnative.dev/docs/turbo-native-modules-introduction#1-declare-typed-specification
-
-const NATIVE_COMPONENT_RE = /NativeComponent\.[jt]sx?$/
-const SPEC_FILE_RE = /[/\\]specs?[/\\]/
-
-const shouldBabelReactNativeCodegen = ({ id, environment }: Props) => {
-  return (
-    (environment === 'ios' || environment === 'android') &&
-    (NATIVE_COMPONENT_RE.test(id) || SPEC_FILE_RE.test(id))
-  )
-}
-
 /**
  * ----- react compiler -----
  */

package/src/transformHermesAsync.ts

@@ -0,0 +1,30 @@
+// hermes v1 can lose an awaited value in async arrows with default parameters.
+// lower async after worklets, keeping bigint and the earlier class-field semantics.
+// metro also emits commonjs here so it does not need a second esbuild pass.
+export async function transformHermesAsync(
+  code: string,
+  filename: string,
+  sourceMaps = false,
+  format?: 'cjs'
+): Promise<{ code: string; map?: any } | undefined> {
+  if (!format && !code.includes('async')) return
+
+  const { transformSync } = await import('esbuild')
+  const cleanId = filename.split('?')[0]
+  const result = transformSync(code, {
+    loader: /\.[cm]?ts$/.test(cleanId) ? 'ts' : cleanId.endsWith('.tsx') ? 'tsx' : 'jsx',
+    jsx: 'preserve',
+    format,
+    supported: {
+      'async-await': false,
+      'async-generator': false,
+      'for-await': false,
+    },
+    sourcefile: filename,
+    sourcemap: sourceMaps ? 'external' : false,
+  })
+  return {
+    code: result.code,
+    map: result.map ? JSON.parse(result.map) : undefined,
+  }
+}