@vxrn/compiler 1.25.13 → 1.25.16-1788753284749

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/transformHermesLoops.test.ts

@@ -0,0 +1,282 @@
+import { describe, expect, it } from 'vitest'
+import * as vm from 'node:vm'
+import { transformHermesLoops } from './transformHermesLoops'
+
+/**
+ * Hermes emits one CreateFunctionEnvironment before a loop rather than one per
+ * iteration, and that environment covers the loop's head AND everything its
+ * body declares, so every lexical binding under a loop behaves there exactly
+ * like `var`. Rewriting them all that way reproduces Hermes on a spec-correct
+ * runtime, which is what makes these assertions meaningful: every one of them
+ * returns the wrong answer against the untransformed source.
+ *
+ * Verified against `hermesc -dump-bytecode`, which emits a single
+ * CreateFunctionEnvironment before the loop and a StoreToEnvironment into the
+ * same slot on each iteration.
+ */
+function runAsHermes(code: string) {
+  const asHermesWouldSeeIt = code.replace(/\b(?:let|const)\b/g, 'var')
+  const sandbox: any = { result: undefined, console }
+  vm.runInNewContext(asHermesWouldSeeIt, sandbox)
+  return sandbox.result
+}
+
+function run(source: string) {
+  const out = transformHermesLoops(source, 'test.js')
+  return runAsHermes(out ? out.code : source)
+}
+
+describe('transformHermesLoops', () => {
+  it('gives a C-style loop a per-iteration binding', () => {
+    expect(
+      run(`
+        var fns = []
+        for (let i = 0; i < 3; i++) fns.push(() => i)
+        result = fns.map((f) => f())
+      `)
+    ).toEqual([0, 1, 2])
+  })
+
+  it('gives for-of and for-in per-iteration bindings', () => {
+    expect(
+      run(`
+        var fns = []
+        for (const label of ['a', 'b']) fns.push(() => label)
+        for (const key in { x: 1, y: 2 }) fns.push(() => key)
+        result = fns.map((f) => f())
+      `)
+    ).toEqual(['a', 'b', 'x', 'y'])
+  })
+
+  it('preserves break', () => {
+    expect(
+      run(`
+        var fns = []
+        for (let i = 0; i < 10; i++) {
+          if (i === 3) break
+          fns.push(() => i)
+        }
+        result = fns.map((f) => f())
+      `)
+    ).toEqual([0, 1, 2])
+  })
+
+  it('preserves continue', () => {
+    expect(
+      run(`
+        var fns = []
+        for (let i = 0; i < 5; i++) {
+          if (i % 2 === 0) continue
+          fns.push(() => i)
+        }
+        result = fns.map((f) => f())
+      `)
+    ).toEqual([1, 3])
+  })
+
+  it('preserves return out of the enclosing function', () => {
+    expect(
+      run(`
+        function find() {
+          for (const n of [1, 2, 3]) {
+            const get = () => n
+            if (n === 2) return get()
+          }
+          return 'none'
+        }
+        result = find()
+      `)
+    ).toBe(2)
+  })
+
+  it('preserves a bare return', () => {
+    expect(
+      run(`
+        var fns = []
+        function go() {
+          for (let i = 0; i < 5; i++) {
+            if (i === 2) return
+            fns.push(() => i)
+          }
+        }
+        go()
+        result = fns.map((f) => f())
+      `)
+    ).toEqual([0, 1])
+  })
+
+  it('leaves break and continue belonging to a nested loop alone', () => {
+    expect(
+      run(`
+        var fns = []
+        for (let i = 0; i < 2; i++) {
+          for (var j = 0; j < 5; j++) {
+            if (j > 0) break
+          }
+          fns.push(() => i)
+        }
+        result = fns.map((f) => f())
+      `)
+    ).toEqual([0, 1])
+  })
+
+  it('handles nested capturing loops', () => {
+    expect(
+      run(`
+        var fns = []
+        for (let i = 0; i < 2; i++) {
+          for (let j = 0; j < 2; j++) {
+            fns.push(() => i + ':' + j)
+          }
+        }
+        result = fns.map((f) => f())
+      `)
+    ).toEqual(['0:0', '0:1', '1:0', '1:1'])
+  })
+
+  it('handles await in the loop body', async () => {
+    const out = transformHermesLoops(
+      `
+        var fns = []
+        async function go() {
+          for (const n of [1, 2]) {
+            await Promise.resolve()
+            fns.push(() => n)
+          }
+          return fns.map((f) => f())
+        }
+        result = go()
+      `,
+      'test.js'
+    )
+    expect(out).not.toBeNull()
+    await expect(runAsHermes(out!.code)).resolves.toEqual([1, 2])
+  })
+
+  it('destructures a for-of binding per iteration', () => {
+    expect(
+      run(`
+        var fns = []
+        for (const { id } of [{ id: 'a' }, { id: 'b' }]) fns.push(() => id)
+        result = fns.map((f) => f())
+      `)
+    ).toEqual(['a', 'b'])
+  })
+
+  it('rewrites the esbuild interop helper that broke every multi-export module', () => {
+    // this exact shape is what esbuild inlines into every commonjs-interop
+    // module, and under Hermes it made each named export resolve to the last one
+    expect(
+      run(`
+        var __defProp = Object.defineProperty
+        var __getOwnPropNames = Object.getOwnPropertyNames
+        var from = { a: 1, b: 2 }
+        var to = {}
+        for (let key of __getOwnPropNames(from)) {
+          __defProp(to, key, { get: () => from[key], enumerable: true })
+        }
+        result = [to.a, to.b]
+      `)
+    ).toEqual([1, 2])
+  })
+
+  it('leaves loops that never capture their binding untouched', () => {
+    expect(
+      transformHermesLoops('for (let i = 0; i < 3; i++) sum += i', 'test.js')
+    ).toBeNull()
+  })
+
+  it('gives a binding declared in the loop body a per-iteration copy', () => {
+    // react-native's NativeAnimatedHelper builds one wrapper per method this
+    // way; sharing `methodName` made every wrapper resolve the last method.
+    expect(
+      run(`
+        var names = ['createAnimatedNode', 'addListener', 'removeListener']
+        var wrappers = {}
+        for (var ii = 0; ii < names.length; ii++) {
+          const methodName = names[ii]
+          wrappers[methodName] = () => methodName
+        }
+        result = names.map((n) => wrappers[n]())
+      `)
+    ).toEqual(['createAnimatedNode', 'addListener', 'removeListener'])
+  })
+
+  it('gives a binding declared in a nested block of the loop body a per-iteration copy', () => {
+    expect(
+      run(`
+        var fns = []
+        for (var i = 0; i < 3; i++) {
+          if (i >= 0) {
+            const doubled = i * 2
+            fns.push(() => doubled)
+          }
+        }
+        result = fns.map((f) => f())
+      `)
+    ).toEqual([0, 2, 4])
+  })
+
+  it('keeps `this` and `arguments` meaning what they meant outside the loop', () => {
+    // reanimated's PropsFilter reads `this._map` from a closure inside a
+    // `for (const key in props)` body, so a lifted body that rebound `this`
+    // crashed every animated component.
+    expect(
+      run(`
+        class PropsFilter {
+          constructor() { this._map = { a: 'A', b: 'B' } }
+          filter(props) {
+            var out = []
+            for (const key in props) {
+              const label = key
+              out.push(() => this._map[label] + arguments.length)
+            }
+            return out
+          }
+        }
+        result = new PropsFilter().filter({ a: 1, b: 2 }).map((f) => f())
+      `)
+    ).toEqual(['A1', 'B1'])
+  })
+
+  it('leaves a loop with no lexical binding untouched', () => {
+    expect(transformHermesLoops('for (var i = 0; i < 3; i++) fns.push(() => i)', 'test.js')).toBeNull()
+  })
+
+  it('leaves the head declaration alone so it cannot collide with a sibling', () => {
+    // react-native-gesture-handler's Pressable declares `const gesture` in the
+    // same block as `for (const gesture of gestures)`. hoisting the head to
+    // `var` made that a redeclaration and failed the whole bundle to parse.
+    const out = transformHermesLoops(
+      `function build(gestures) {
+         var handlers = []
+         for (const gesture of gestures) { handlers.push(() => gesture) }
+         const gesture = gestures[0]
+         return gesture
+       }`,
+      'Pressable.js'
+    )
+    // a redeclaration is a SyntaxError, so compiling is the whole assertion
+    expect(() => new vm.Script(out!.code)).not.toThrow()
+  })
+
+  it('rewrites a loop in a .js file that still contains jsx', () => {
+    // react-native and its dependencies ship jsx inside plain `.js`, and the
+    // rolldown native pipeline keeps jsx unlowered until after this transform.
+    const out = transformHermesLoops(
+      'for (const c of items) rows.push(() => <Row key={c} />)',
+      'Rows.js'
+    )
+    expect(out?.code).toContain('_hermesLoop0')
+  })
+
+  it('does not rewrite a loop that reassigns its own binding', () => {
+    // the update would be stranded inside the lifted function
+    expect(
+      transformHermesLoops(
+        'for (let i = 0; i < 3; i++) { i += 1; fns.push(() => i) }',
+        'test.js'
+      )
+    ).toBeNull()
+  })
+})