@vxrn/compiler 2.0.0-beta.33.1 → 2.0.0-beta.362.1

package/src/index.ts

@@ -35,6 +35,7 @@ export * from './transformWorklets'
 export * from './reactNativeCodegen'
 export * from './transformHermesLoops'
 export * from './transformHermesAsync'
+export * from './transformHermesClasses'
 export { clearTransformCache } from './cache'
 export { JS_GLOBALS } from './worklets/globals'
 export { getClosureVariables } from './worklets/scope'
@@ -162,18 +163,26 @@ async function performBabelTransform({
   }
 
   if (userTransform !== 'swc' && userTransform !== 'oxc') {
-    const babelOptions = getBabelOptions({
+    let babelOptions = getBabelOptions({
       ...transformProps,
       userSetting: userTransform,
     })
+    // worklets run without requesting a babel pass.
+    if (!babelOptions && shouldTransformWorklets({ id, code })) {
+      babelOptions = { plugins: [] }
+    }
 
     if (babelOptions) {
       const hasCompilerPlugin = babelOptions.plugins?.some(
         (x) => Array.isArray(x) && x[0] === 'babel-plugin-react-compiler'
       )
 
-      // Check cache first
-      const cached = getCachedTransform(id, code, environment)
+      // Check cache first. the user babel config feeds the transform output,
+      // so its identity joins the key: adding or editing babel.config.* must
+      // miss entries cached without that change.
+      const userBabelConfigPath =
+        typeof babelOptions.configFile === 'string' ? babelOptions.configFile : null
+      const cached = getCachedTransform(id, code, environment, userBabelConfigPath)
       if (cached) {
         perfStats.babel.byEnvironment[environment].transforms++
         if (
@@ -214,25 +223,32 @@ async function performBabelTransform({
         ) ?? -1
 
       if (compilerPluginIndex !== -1) {
-        // mark callbacks before react compiler moves them into memoized bindings.
-        if (useWorklets) {
-          workletPreparation = prepareWorkletsForReactCompiler(
+        const compilerPluginConfig = babelOptions.plugins![compilerPluginIndex] as any[]
+        const compilerPluginOptions = compilerPluginConfig[1] || {}
+        const useBabelCompiler =
+          compilerPluginOptions.compiler === 'babel' ||
+          process.env.ONE_REACT_COMPILER === 'babel' ||
+          process.env.VXRN_REACT_COMPILER === 'babel'
+
+        if (!useBabelCompiler) {
+          // mark callbacks before react compiler moves them into memoized bindings.
+          if (useWorklets) {
+            workletPreparation = prepareWorkletsForReactCompiler(
+              id,
+              curCode,
+              shouldSourceMap()
+            )
+            if (workletPreparation) curCode = workletPreparation.code
+          }
+          compilerOut = await transformOxcReactCompiler(
             id,
             curCode,
+            compilerPluginOptions,
             shouldSourceMap()
           )
-          if (workletPreparation) curCode = workletPreparation.code
+          if (compilerOut) curCode = compilerOut.code
+          babelOptions.plugins!.splice(compilerPluginIndex, 1)
         }
-        const compilerTarget =
-          (babelOptions.plugins![compilerPluginIndex] as any[])[1]?.target ?? '19'
-        compilerOut = await transformOxcReactCompiler(
-          id,
-          curCode,
-          compilerTarget,
-          shouldSourceMap()
-        )
-        if (compilerOut) curCode = compilerOut.code
-        babelOptions.plugins!.splice(compilerPluginIndex, 1)
       }
 
       let workletsOut: { code: string; map?: any } | null = null
@@ -251,7 +267,11 @@ async function performBabelTransform({
       const startTime = Date.now()
       let babelOut: { code?: string | null; map?: any } | null = null
 
-      if (babelOptions.plugins?.length === 0) {
+      if (
+        babelOptions.plugins?.length === 0 &&
+        !babelOptions.configFile &&
+        !babelOptions.babelrc
+      ) {
         let finalMap: any = undefined
         if (shouldSourceMap()) {
           const intermediateMaps = [
@@ -311,7 +331,7 @@ async function performBabelTransform({
         const result = { code: outCode, map: babelOut.map }
 
         // Cache the result
-        setCachedTransform(id, code, result, environment)
+        setCachedTransform(id, code, result, environment, userBabelConfigPath)
 
         return result
       }
@@ -628,6 +648,11 @@ ${rootJS.code}
       transform(code, _id) {
         if (this.environment.name !== 'client') return
         if (code.includes(runtimePublicPath)) return // already wrapped
+        // vite's special queries (the same pattern as its SPECIAL_QUERY_RE) make
+        // a string, url, or worker wrapper module, never the component source.
+        // wrapping one imports the refresh runtime, which writes to `window` and
+        // so throws when a worker imports `Foo.tsx?raw`.
+        if (/[?&](?:worker|sharedworker|raw|url)\b/.test(_id)) return
 
         const id = _id.split('?')[0]
         if (id.includes('node_modules')) return

package/src/reactNativeViewConfig.ts

@@ -389,7 +389,12 @@ function readCommands(call: any, decls: Declarations): Command[] {
   for (const m of commandMembers) {
     const name = m.key?.name ?? m.key?.value
     if (!name) continue
-    const fn = m.typeAnnotation?.typeAnnotation ?? m.value ?? m.typeAnnotation
+    // `setPage(ref, index): void` carries its params on the member itself;
+    // `setPage: (ref, index) => void` and flow members carry a function type
+    const fn =
+      m.type === 'TSMethodSignature'
+        ? m
+        : (m.typeAnnotation?.typeAnnotation ?? m.value ?? m.typeAnnotation)
     const params = (fn?.params ?? fn?.parameters ?? []).slice(1)
     byName.set(
       name,

package/src/transformBabel.test.ts

@@ -4,7 +4,9 @@ import path from 'node:path'
 import { afterEach, describe, expect, it } from 'vitest'
 import { configureVXRNCompilerPlugin } from './configure'
 import {
+  findUserBabelConfig,
   getBabelOptions,
+  stripFlowTypes,
   transformBabel,
   transformOxcReactCompiler,
 } from './transformBabel'
@@ -12,9 +14,8 @@ import {
 afterEach(() => {
   configureVXRNCompilerPlugin({ enableReanimated: false })
 })
-
-describe('getBabelOptions Worklets resolution', () => {
-  it('uses the app-installed Worklets Babel plugin', () => {
+describe('getBabelOptions worklets ownership', () => {
+  it('does not add an automatic Worklets Babel pass', () => {
     const projectRoot = fs.realpathSync(
       fs.mkdtempSync(path.join(os.tmpdir(), 'vxrn-worklets-'))
     )
@@ -40,7 +41,7 @@ describe('getBabelOptions Worklets resolution', () => {
         projectRoot,
       })
 
-      expect(options?.plugins).toContain(pluginPath)
+      expect(options).toBeNull()
     } finally {
       fs.rmSync(projectRoot, { recursive: true, force: true })
     }
@@ -67,6 +68,27 @@ describe('transformBabel Flow parsing', () => {
     expect(result?.code).not.toContain('HostComponent')
   })
 
+  it('preserves React Native Flow enums as runtime values', async () => {
+    const result = await transformBabel(
+      '/project/VirtualView.js',
+      `
+        // @flow strict-local
+        export enum VirtualViewRenderState {
+          Unknown = 0,
+          Rendered = 1,
+          None = 2,
+        }
+
+        export const rendered = VirtualViewRenderState.Rendered
+      `,
+      { plugins: [] }
+    )
+
+    expect(result?.code).toContain('const VirtualViewRenderState =')
+    expect(result?.code).toContain('Rendered: 1')
+    expect(result?.code).toContain('VirtualViewRenderState.Rendered')
+  })
+
   it('rejects a required transform error instead of returning untransformed source', async () => {
     const negativeControl = () => ({
       visitor: {
@@ -130,6 +152,29 @@ describe('transformOxcReactCompiler', () => {
 
     expect(result.code).toContain('_c(')
   })
+
+  it('supports mutating useSharedValue in useEffect via Reanimated environment defaults', async () => {
+    const reanimatedCode = `
+      import { useEffect } from 'react'
+      import { useSharedValue } from 'react-native-reanimated'
+
+      export function ReanimatedComponent() {
+        const val = useSharedValue(0)
+        useEffect(() => {
+          val.value = 1
+        }, [val])
+        return <div>{val.value}</div>
+      }
+    `
+    const result = await transformOxcReactCompiler(
+      '/project/ReanimatedComponent.tsx',
+      reanimatedCode,
+      { target: '19' },
+      false
+    )
+
+    expect(result.code).toContain('_c(')
+  })
 })
 
 describe('compiler plugin multi-stage source map composition', () => {
@@ -203,7 +248,7 @@ export async function* generatorProbe() {
 })
 
 describe('shared compiler worklets backend selection', () => {
-  it('retains Babel for worklets by default when enableNativeWorklets is false', async () => {
+  it('does not fall back to Babel when worklet compilation is disabled', async () => {
     const { vi } = await import('vitest')
     const { createVXRNCompilerPlugin } = await import('./index')
     const workletsModule = await import('./transformWorklets')
@@ -225,8 +270,8 @@ describe('shared compiler worklets backend selection', () => {
       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(result).toBeNull()
+      // disabling the transform does not select a second backend.
       expect(workletSpy).not.toHaveBeenCalled()
     } finally {
       workletSpy.mockRestore()
@@ -238,7 +283,7 @@ describe('shared compiler worklets backend selection', () => {
     }
   })
 
-  it('uses native SWC for worklets when enableNativeWorklets is true', async () => {
+  it('compiles worklets with One when no Babel pass is requested', async () => {
     const compiler = await import('./index')
     const { vi } = await import('vitest')
     const workletsModule = await import('./transformWorklets')
@@ -261,7 +306,8 @@ describe('shared compiler worklets backend selection', () => {
       const context = { environment: { name: 'ios' } }
       const result = await hook.call(context, inputCode, tempFile)
       expect(result).toBeDefined()
-      // With enableNativeWorklets: true, transformWorklets (SWC) IS called
+      expect(result.code).toContain('__workletHash')
+      // the worklet-only file still reaches the One transform.
       expect(workletSpy).toHaveBeenCalled()
     } finally {
       workletSpy.mockRestore()
@@ -284,7 +330,7 @@ describe('shared compiler worklets backend selection', () => {
     fs.writeFileSync(tempFile, inputCode)
 
     try {
-      // Step 1: Run with Babel backend (enableNativeWorklets: false)
+      // begin with worklet compilation disabled.
       configureVXRNCompilerPlugin({
         enableReanimated: true,
         enableNativeWorklets: false,
@@ -297,10 +343,10 @@ describe('shared compiler worklets backend selection', () => {
       const context = { environment: { name: 'ios' } }
 
       const res1 = await hook1.call(context, inputCode, tempFile)
-      expect(res1).toBeDefined()
+      expect(res1).toBeNull()
       expect(workletSpy).toHaveBeenCalledTimes(0)
 
-      // Step 2: Toggle to native SWC backend on the SAME file without changes
+      // enable the transform on the same unchanged file.
       configureVXRNCompilerPlugin({
         enableReanimated: true,
         enableNativeWorklets: true,
@@ -313,15 +359,16 @@ describe('shared compiler worklets backend selection', () => {
 
       const res2 = await hook2.call(context, inputCode, tempFile)
       expect(res2).toBeDefined()
-      // Cache must NOT serve the Babel entry; native transformWorklets must be invoked
+      expect(res2.code).toContain('__workletHash')
+      // the cache must not serve the untransformed entry.
       expect(workletSpy).toHaveBeenCalledTimes(1)
 
-      // Step 3: Call again with native SWC to verify caching works for the native backend
+      // reuse the transformed cache entry.
       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
+      // disable the transform; the cache must not serve a transformed entry.
       configureVXRNCompilerPlugin({
         enableReanimated: true,
         enableNativeWorklets: false,
@@ -333,8 +380,8 @@ describe('shared compiler worklets backend selection', () => {
       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(res4).toBeNull()
+      // no second transform was requested.
       expect(workletSpy).toHaveBeenCalledTimes(1)
     } finally {
       workletSpy.mockRestore()
@@ -346,3 +393,290 @@ describe('shared compiler worklets backend selection', () => {
     }
   })
 })
+
+describe('findUserBabelConfig and user Babel config respect', () => {
+  it('finds user babel config and ignores generated configs', () => {
+    const projectRoot = fs.realpathSync(
+      fs.mkdtempSync(path.join(os.tmpdir(), 'vxrn-babel-conf-'))
+    )
+    try {
+      expect(findUserBabelConfig(projectRoot)).toBeNull()
+
+      // written by `one patch` with the generated marker -> ignored
+      const generatedFile = path.join(projectRoot, 'babel.config.js')
+      fs.writeFileSync(
+        generatedFile,
+        '// @one/generated bundler-config\nmodule.exports = {}'
+      )
+      expect(findUserBabelConfig(projectRoot)).toBeNull()
+
+      // Overwritten with user config -> detected
+      fs.writeFileSync(generatedFile, 'module.exports = { plugins: [] }')
+      expect(findUserBabelConfig(projectRoot)).toBe(generatedFile)
+    } finally {
+      fs.rmSync(projectRoot, { recursive: true, force: true })
+    }
+  })
+
+  it('includes user configFile and babelrc in getBabelOptions for project files', () => {
+    const projectRoot = fs.realpathSync(
+      fs.mkdtempSync(path.join(os.tmpdir(), 'vxrn-babel-conf-'))
+    )
+    const userConfig = path.join(projectRoot, 'babel.config.json')
+    fs.writeFileSync(userConfig, '{"plugins": []}')
+    try {
+      // For project file:
+      const projectFileOptions = getBabelOptions({
+        id: path.join(projectRoot, 'src', 'index.tsx'),
+        code: `export const hello = () => 123`,
+        projectRoot,
+        development: true,
+        environment: 'client',
+        reactForRNVersion: '19',
+      })
+      expect(projectFileOptions?.configFile).toBe(userConfig)
+      expect(projectFileOptions?.babelrc).toBe(true)
+
+      // For node_modules file: should not attach user configFile
+      const nodeModulesOptions = getBabelOptions({
+        id: path.join(projectRoot, 'node_modules', 'foo', 'index.js'),
+        code: `export const foo = 1`,
+        projectRoot,
+        development: true,
+        environment: 'client',
+        reactForRNVersion: '19',
+      })
+      expect(nodeModulesOptions).toBeNull()
+    } finally {
+      fs.rmSync(projectRoot, { recursive: true, force: true })
+    }
+  })
+
+  it('runs user babel config transforms via transformBabel', async () => {
+    const projectRoot = fs.realpathSync(
+      fs.mkdtempSync(path.join(os.tmpdir(), 'vxrn-babel-conf-'))
+    )
+    const userConfig = path.join(projectRoot, 'babel.config.json')
+    // A babel config that injects a banner/plugin or standard babel syntax
+    fs.writeFileSync(
+      userConfig,
+      JSON.stringify({
+        comments: false,
+      })
+    )
+    try {
+      const code = '/* remove me */ export const x = 1'
+      const res = await transformBabel(path.join(projectRoot, 'src', 'index.ts'), code, {
+        configFile: userConfig,
+        babelrc: true,
+      })
+      expect(res.code).not.toContain('remove me')
+      expect(res.code).toContain('export const x = 1')
+    } finally {
+      fs.rmSync(projectRoot, { recursive: true, force: true })
+    }
+  })
+
+  it.each(['ios', 'android', 'client', 'ssr'] as const)(
+    'tells user babel config the %s platform and that the bundler keeps static esm',
+    async (environment) => {
+      const projectRoot = fs.realpathSync(
+        fs.mkdtempSync(path.join(os.tmpdir(), 'vxrn-babel-conf-'))
+      )
+      const userConfig = path.join(projectRoot, 'babel.config.js')
+      // presets such as babel-preset-expo read this caller to decide whether to
+      // rewrite esm to commonjs and import.meta to a metro runtime global
+      fs.writeFileSync(
+        userConfig,
+        `module.exports = (api) => ({
+        comments: !api.caller((c) => c?.name === 'vxrn' && c?.supportsStaticESM === true && c?.platform === '${environment === 'ios' || environment === 'android' ? environment : 'web'}'),
+      })`
+      )
+      try {
+        const id = path.join(projectRoot, 'src', 'index.ts')
+        const code = '/* remove me */ export const x = 1'
+        const options = getBabelOptions({
+          id,
+          code,
+          projectRoot,
+          environment,
+          development: false,
+          reactForRNVersion: '19',
+        })
+        expect(options).not.toBeNull()
+        const res = await transformBabel(id, code, options!)
+        expect(res.code).not.toContain('remove me')
+      } finally {
+        fs.rmSync(projectRoot, { recursive: true, force: true })
+      }
+    }
+  )
+})
+describe('explicit swc/oxc per-file choice with a user babel config', () => {
+  it('returns null for swc/oxc string and object forms', () => {
+    const projectRoot = fs.realpathSync(
+      fs.mkdtempSync(path.join(os.tmpdir(), 'vxrn-babel-conf-'))
+    )
+    const userConfig = path.join(projectRoot, 'babel.config.js')
+    fs.writeFileSync(userConfig, 'module.exports = { plugins: [] }')
+    try {
+      const base = {
+        id: path.join(projectRoot, 'src', 'index.tsx'),
+        code: `export const x = 1`,
+        projectRoot,
+        development: true,
+        environment: 'client' as const,
+        reactForRNVersion: '19' as const,
+      }
+      // merely adding babel.config.js must not flip an explicit non-babel choice
+      expect(getBabelOptions({ ...base, userSetting: 'swc' })).toBeNull()
+      expect(getBabelOptions({ ...base, userSetting: 'oxc' })).toBeNull()
+      expect(getBabelOptions({ ...base, userSetting: { transform: 'swc' } })).toBeNull()
+      expect(getBabelOptions({ ...base, userSetting: { transform: 'oxc' } })).toBeNull()
+      // controls: babel choices still resolve through the user config
+      expect(getBabelOptions({ ...base, userSetting: 'babel' })?.configFile).toBe(
+        userConfig
+      )
+      expect(
+        getBabelOptions({ ...base, userSetting: { transform: 'babel' } })?.configFile
+      ).toBe(userConfig)
+      expect(getBabelOptions(base)?.configFile).toBe(userConfig)
+    } finally {
+      fs.rmSync(projectRoot, { recursive: true, force: true })
+    }
+  })
+
+  it('skips the transform end-to-end for object-form swc', async () => {
+    const { createVXRNCompilerPlugin } = await import('./index')
+    const projectRoot = fs.realpathSync(
+      fs.mkdtempSync(path.join(os.tmpdir(), 'vxrn-babel-conf-'))
+    )
+    const srcDir = path.join(projectRoot, 'src')
+    fs.mkdirSync(srcDir, { recursive: true })
+    const file = path.join(srcDir, 'index.ts')
+    const code = `export const x = 1`
+    fs.writeFileSync(file, code)
+    fs.writeFileSync(
+      path.join(projectRoot, 'babel.config.js'),
+      'module.exports = { plugins: [] }'
+    )
+    configureVXRNCompilerPlugin({
+      enableCompiler: false,
+      enableReanimated: false,
+    })
+    try {
+      const plugins = await createVXRNCompilerPlugin({
+        transform: () => ({ transform: 'swc' }) as any,
+      })
+      const plugin = plugins.find((p: any) => p.name === 'one:compiler') as any
+      await plugin.configResolved({ root: projectRoot, build: {} })
+      const hook = plugin.transform.handler || plugin.transform
+      const result = await hook.call({ environment: { name: 'client' } }, code, file)
+      expect(result == null).toBe(true)
+    } finally {
+      configureVXRNCompilerPlugin({
+        enableCompiler: false,
+        enableReanimated: false,
+      })
+      fs.rmSync(projectRoot, { recursive: true, force: true })
+    }
+  })
+})
+
+describe('user babel config end-to-end through the compiler plugin', () => {
+  it('runs the user config when default plugins are empty', async () => {
+    const { createVXRNCompilerPlugin } = await import('./index')
+    const projectRoot = fs.realpathSync(
+      fs.mkdtempSync(path.join(os.tmpdir(), 'vxrn-babel-e2e-'))
+    )
+    const srcDir = path.join(projectRoot, 'src')
+    fs.mkdirSync(srcDir, { recursive: true })
+    const file = path.join(srcDir, 'index.ts')
+    const marker = 'babel-e2e-probe'
+    const code = `/* ${marker} */ export const x = 1`
+    fs.writeFileSync(file, code)
+    fs.writeFileSync(
+      path.join(projectRoot, 'babel.config.json'),
+      JSON.stringify({ comments: false })
+    )
+    configureVXRNCompilerPlugin({
+      enableCompiler: false,
+      enableReanimated: false,
+    })
+    try {
+      const plugins = await createVXRNCompilerPlugin()
+      const plugin = plugins.find((p: any) => p.name === 'one:compiler') as any
+      await plugin.configResolved({ root: projectRoot, build: {} })
+      const hook = plugin.transform.handler || plugin.transform
+      const result = await hook.call({ environment: { name: 'client' } }, code, file)
+      // default plugins are empty here, but the user configFile must still
+      // route through transformBabel instead of taking the skip fast-path
+      expect(result).toBeDefined()
+      expect(result.code).toContain('export const x = 1')
+      expect(result.code).not.toContain(marker)
+    } finally {
+      configureVXRNCompilerPlugin({
+        enableCompiler: false,
+        enableReanimated: false,
+      })
+      fs.rmSync(projectRoot, { recursive: true, force: true })
+    }
+  })
+
+  it('invalidates the cache when the user babel config is added or edited', async () => {
+    const { createVXRNCompilerPlugin } = await import('./index')
+    const projectRoot = fs.realpathSync(
+      fs.mkdtempSync(path.join(os.tmpdir(), 'vxrn-babel-cache-'))
+    )
+    const srcDir = path.join(projectRoot, 'src')
+    fs.mkdirSync(srcDir, { recursive: true })
+    const file = path.join(srcDir, 'index.ts')
+    const marker = 'babel-cache-probe'
+    const code = `/* ${marker} */ export const x = 1`
+    fs.writeFileSync(file, code)
+    const userConfig = path.join(projectRoot, 'babel.config.json')
+    configureVXRNCompilerPlugin({
+      enableCompiler: false,
+      enableReanimated: false,
+    })
+    try {
+      const plugins = await createVXRNCompilerPlugin({
+        transform: () => 'babel' as const,
+      })
+      const plugin = plugins.find((p: any) => p.name === 'one:compiler') as any
+      await plugin.configResolved({ root: projectRoot, build: {} })
+      const hook = plugin.transform.handler || plugin.transform
+      const context = { environment: { name: 'client' } }
+
+      const res1 = await hook.call(context, code, file)
+      expect(res1.code).toContain(marker)
+
+      // adding a config without touching the source must miss the cache
+      fs.writeFileSync(userConfig, JSON.stringify({ comments: false }))
+      const res2 = await hook.call(context, code, file)
+      expect(res2.code).not.toContain(marker)
+
+      // editing the config contents must miss again
+      fs.writeFileSync(userConfig, JSON.stringify({ comments: true }))
+      const res3 = await hook.call(context, code, file)
+      expect(res3.code).toContain(marker)
+    } finally {
+      configureVXRNCompilerPlugin({
+        enableCompiler: false,
+        enableReanimated: false,
+      })
+      fs.rmSync(projectRoot, { recursive: true, force: true })
+    }
+  })
+})
+
+describe('Flow and JSX parsing', () => {
+  it('strips Flow types while retaining JSX in published JavaScript', async () => {
+    const result = await stripFlowTypes(
+      '/app/VideoView.js',
+      `export function View(props: {value: string}) { return <NativeView {...props} /> }`
+    )
+    expect(result.code).not.toContain('value: string')
+    expect(result.code).toContain('<NativeView')
+  })
+})