@vxrn/compiler 1.25.13 → 1.25.16-1788753284749

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vxrn/compiler",
-  "version": "1.25.13",
+  "version": "1.25.16-1788753284749",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",
@@ -35,16 +35,20 @@
     "@babel/plugin-transform-flow-strip-types": "^7.27.1",
     "@babel/plugin-transform-react-jsx": "^7.27.1",
     "@babel/plugin-transform-regenerator": "^7.28.4",
-    "@react-native/babel-plugin-codegen": "^0.86.2",
-    "@vxrn/utils": "1.25.13",
-    "@vxrn/vite-native-client": "1.25.13",
+    "@jridgewell/remapping": "^2.3.0",
+    "@vxrn/utils": "1.25.16-1788753284749",
+    "@vxrn/vite-native-client": "1.25.16-1788753284749",
     "babel-plugin-react-compiler": "^1.0.0",
     "babel-plugin-syntax-hermes-parser": "^0.32.0",
+    "hermes-parser": "^0.32.0",
+    "magic-string": "^0.30.21",
+    "oxc-parser": "^0.112.0",
+    "oxc-transform": "^0.112.0",
     "oxc-transform-react": "^0.145.0",
-    "react-native-css-interop": "^0.2.6",
-    "ts-deepmerge": "^7.0.2"
+    "react-native-css-interop": "^0.2.6"
   },
   "devDependencies": {
+    "@jridgewell/trace-mapping": "^0.3.25",
     "@tamagui/build": "2.6.2",
     "depcheck": "^1.4.7",
     "rolldown": "^1.2.4",

package/src/cache.ts

@@ -1,7 +1,7 @@
 import { createHash } from 'node:crypto'
 import { existsSync, mkdirSync, readFileSync, statSync, writeFileSync } from 'node:fs'
 import { join } from 'node:path'
-import { configuration } from './configure'
+import { configuration, isNativeWorkletsEnabled } from './configure'
 
 /**
  * Fast file-based cache for babel transforms
@@ -23,9 +23,15 @@ interface CacheStats {
   hits: 0
   misses: 0
   writes: 0
+  errors: 0
 }
 
-const stats: CacheStats = { hits: 0, misses: 0, writes: 0 }
+const stats: CacheStats = {
+  hits: 0,
+  misses: 0,
+  writes: 0,
+  errors: 0,
+}
 
 function getCacheDir(): string {
   // Use .vxrn cache directory
@@ -43,6 +49,7 @@ function getConfigFingerprint(): string {
       JSON.stringify({
         compiler: configuration.enableCompiler,
         reanimated: configuration.enableReanimated,
+        nativeWorklets: isNativeWorkletsEnabled(),
         nativewind: configuration.enableNativewind,
         nativeCSS: configuration.enableNativeCSS,
         // bump when the transform engine changes, so entries written by a

package/src/configure.ts

@@ -18,6 +18,7 @@ type CompilerConfig =
 type Conf = {
   enableNativewind?: boolean
   enableReanimated?: boolean
+  enableNativeWorklets?: boolean
   enableCompiler?: CompilerConfig
   enableNativeCSS?: boolean
 }
@@ -25,10 +26,21 @@ type Conf = {
 export const configuration: Conf = {
   enableNativewind: false,
   enableReanimated: false,
+  enableNativeWorklets: true,
   enableCompiler: false,
   enableNativeCSS: false,
 }
 
+export function isNativeWorkletsEnabled() {
+  if (
+    process.env.VXRN_NATIVE_WORKLETS === 'false' ||
+    process.env.VXRN_NATIVE_WORKLETS === '0'
+  ) {
+    return false
+  }
+  return configuration.enableNativeWorklets !== false
+}
+
 export function configureVXRNCompilerPlugin(_: Conf) {
   Object.assign(configuration, _)
 }

package/src/index.ts

@@ -12,19 +12,24 @@ import { resolvePath } from '@vxrn/utils'
 import { cssToReactNativeRuntime } from 'react-native-css-interop/css-to-rn/index.js'
 import type { OutputChunk } from 'rolldown'
 import type { PluginOption, ResolvedConfig, UserConfig } from 'vite'
-import { configuration } from './configure'
+import { configuration, isNativeWorkletsEnabled } from './configure'
 import { debug, runtimePublicPath, validParsers } from './constants'
 import {
   getBabelOptions,
   transformBabel,
   transformOxcReactCompiler,
 } from './transformBabel'
+import { shouldSourceMap } from './transformSWC'
+import { shouldTransformWorklets, transformWorklets } from './transformWorklets'
 import type { Environment, GetTransformProps, Options } from './types'
 import { getCachedTransform, logCacheStats, setCachedTransform } from './cache'
 
 export * from './configure'
 export * from './transformBabel'
 export * from './transformSWC'
+export * from './transformWorklets'
+export * from './reactNativeCodegen'
+export * from './transformHermesLoops'
 export type { GetTransform } from './types'
 
 // Performance tracking
@@ -148,7 +153,7 @@ async function performBabelTransform({
     return null
   }
 
-  if (userTransform !== 'swc') {
+  if (userTransform !== 'swc' && userTransform !== 'oxc') {
     const babelOptions = getBabelOptions({
       ...transformProps,
       userSetting: userTransform,
@@ -175,20 +180,95 @@ async function performBabelTransform({
         return cached
       }
 
-      // when the react compiler is the only transform this file needs (the
-      // common case on web) run oxc's rust port instead of babel. files that
-      // also need reanimated, nativewind, RN codegen or generator lowering
-      // still go through babel, which is the only implementation of those.
-      const compilerOnly = hasCompilerPlugin && babelOptions.plugins?.length === 1
-      const compilerTarget = compilerOnly
-        ? ((babelOptions.plugins![0] as any[])[1]?.target ?? '19')
-        : '19'
+      // React compiler through oxc's rust port instead of babel.
+      let compilerOut: { code: string; map?: any } | null = null
+      const compilerPluginIndex =
+        babelOptions.plugins?.findIndex(
+          (x) => Array.isArray(x) && x[0] === 'babel-plugin-react-compiler'
+        ) ?? -1
+
+      if (compilerPluginIndex !== -1) {
+        const compilerTarget =
+          (babelOptions.plugins![compilerPluginIndex] as any[])[1]?.target ?? '19'
+        compilerOut = await transformOxcReactCompiler(
+          id,
+          code,
+          compilerTarget,
+          shouldSourceMap()
+        )
+        babelOptions.plugins!.splice(compilerPluginIndex, 1)
+      }
+
+      let curCode = compilerOut ? compilerOut.code : code
+
+      // Native Worklets through custom native/Oxc worklet transformer instead of babel.
+      let workletsOut: { code: string; map?: any } | null = null
+      const isWorkletPlugin = (entry: any) => {
+        if (!entry) return false
+        const name =
+          typeof entry === 'string' ? entry : Array.isArray(entry) ? entry[0] : null
+        return (
+          typeof name === 'string' &&
+          (name.includes('react-native-worklets') ||
+            name.includes('react-native-reanimated'))
+        )
+      }
+      const workletPluginIndex = babelOptions.plugins?.findIndex(isWorkletPlugin) ?? -1
+      let workletPluginOptions: any = undefined
+      if (workletPluginIndex !== -1) {
+        const entry = babelOptions.plugins![workletPluginIndex]
+        if (Array.isArray(entry) && entry[1] && typeof entry[1] === 'object') {
+          workletPluginOptions = entry[1]
+        }
+      }
+
+      if (
+        isNativeWorkletsEnabled() &&
+        (workletPluginIndex !== -1 || shouldTransformWorklets({ id, code: curCode }))
+      ) {
+        workletsOut = await transformWorklets(id, curCode, shouldSourceMap(), {
+          projectRoot,
+          ...workletPluginOptions,
+        })
+        if (workletPluginIndex !== -1) {
+          babelOptions.plugins!.splice(workletPluginIndex, 1)
+        }
+        curCode = workletsOut.code
+      }
 
       // Cache miss - do the transform
       const startTime = Date.now()
-      const babelOut = compilerOnly
-        ? await transformOxcReactCompiler(id, code, compilerTarget)
-        : await transformBabel(id, code, babelOptions)
+      let babelOut: { code?: string | null; map?: any } | null = null
+
+      if (babelOptions.plugins?.length === 0) {
+        let finalMap: any = undefined
+        if (shouldSourceMap()) {
+          const intermediateMaps = [compilerOut?.map, workletsOut?.map].filter(Boolean)
+          if (intermediateMaps.length === 1) {
+            finalMap = intermediateMaps[0]
+          } else if (intermediateMaps.length > 1) {
+            const remapping = (await import('@jridgewell/remapping')).default
+            finalMap = remapping(intermediateMaps.slice().reverse(), () => null)
+          }
+        }
+        babelOut = { code: curCode, map: finalMap }
+      } else {
+        const babelOptsWithMap =
+          shouldSourceMap() && (workletsOut?.map || compilerOut?.map)
+            ? { ...babelOptions, sourceMaps: true }
+            : babelOptions
+        babelOut = await transformBabel(id, curCode, babelOptsWithMap)
+        if (shouldSourceMap() && babelOut?.map) {
+          const priorMaps = [compilerOut?.map, workletsOut?.map].filter(Boolean)
+          if (priorMaps.length > 0) {
+            const remapping = (await import('@jridgewell/remapping')).default
+            babelOut.map = remapping(
+              [babelOut.map, ...priorMaps.slice().reverse()],
+              () => null
+            )
+          }
+        }
+      }
       const babelTime = Date.now() - startTime
 
       if (babelOut?.code) {

package/src/reactNativeCodegen.ts

@@ -0,0 +1,181 @@
+import MagicString from 'magic-string'
+import {
+  generateViewConfig,
+  parseSpec,
+  renderViewConfigModule,
+} from './reactNativeViewConfig'
+
+// vite's normalizePath, inlined so this stays usable from the metro transformer
+// worker, which must not pull vite into a worker process.
+function normalizePath(id: string) {
+  return id.replace(/\\/g, '/')
+}
+
+const CODEGEN_FILE_RE = /(?:NativeComponent\.[cm]?[jt]sx?$|[/\\]specs?[/\\])/
+const CODEGEN_CALL_RE = /codegenNativeComponent\s*[<(]/
+
+// oxc reports positions as start/end, hermes-parser (the flow specs) as range
+const startOf = (node: any): number => node.start ?? node.range[0]
+const endOf = (node: any): number => node.end ?? node.range[1]
+
+function unwrapExpression(node: any): any {
+  while (node) {
+    if (
+      node.type === 'TSAsExpression' ||
+      node.type === 'TSSatisfiesExpression' ||
+      node.type === 'TSTypeAssertion' ||
+      node.type === 'TypeCastExpression' ||
+      node.type === 'AsExpression' ||
+      node.type === 'ParenthesizedExpression'
+    ) {
+      node = node.expression
+    } else if (
+      node.type === 'SequenceExpression' &&
+      Array.isArray(node.expressions) &&
+      node.expressions.length > 0
+    ) {
+      node = node.expressions[node.expressions.length - 1]
+    } else {
+      break
+    }
+  }
+  return node
+}
+
+function isCodegenDeclaration(declaration: any): boolean {
+  if (!declaration) return false
+
+  if (
+    declaration.left &&
+    declaration.left.left &&
+    declaration.left.left.name === 'codegenNativeComponent'
+  ) {
+    return true
+  }
+
+  const unwrapped = unwrapExpression(declaration)
+  return (
+    unwrapped?.type === 'CallExpression' &&
+    unwrapped.callee?.type === 'Identifier' &&
+    unwrapped.callee.name === 'codegenNativeComponent'
+  )
+}
+
+function isCodegenNativeCommandsDeclaration(declaration: any): boolean {
+  if (!declaration) return false
+  const unwrapped = unwrapExpression(declaration)
+  return (
+    unwrapped?.type === 'CallExpression' &&
+    unwrapped.callee?.type === 'Identifier' &&
+    unwrapped.callee.name === 'codegenNativeCommands'
+  )
+}
+
+export function transformReactNativeCodegen(
+  code: string,
+  id: string,
+  projectRoot?: string
+): { code: string; map: any } | null | undefined {
+  const cleanId = normalizePath(id.split('?')[0])
+
+  if (!CODEGEN_FILE_RE.test(cleanId)) {
+    return
+  }
+
+  // the transform runs more than once over the same module, so it must not
+  // reject the output it just produced. matching the bare name matches the
+  // surviving `import codegenNativeComponent from ...` too; only a remaining
+  // CALL means the file still needs generating. a comment marker cannot do
+  // this job because oxc drops leading comments on the next pass.
+  if (!CODEGEN_CALL_RE.test(code)) {
+    return
+  }
+
+  const program = parseSpec(code, cleanId, projectRoot)
+  const body = program?.body
+  if (!body) {
+    return
+  }
+
+  let defaultExport: any = null
+  let commandsExport: any = null
+
+  for (const node of body) {
+    if (node.type === 'ExportDefaultDeclaration') {
+      if (isCodegenDeclaration(node.declaration)) {
+        defaultExport = node
+      }
+    } else if (node.type === 'ExportNamedDeclaration') {
+      if (node.declaration && node.declaration.declarations) {
+        const firstDeclaration = node.declaration.declarations[0]
+        if (firstDeclaration?.type === 'VariableDeclarator') {
+          const isValidCommandsExport = isCodegenNativeCommandsDeclaration(
+            firstDeclaration.init
+          )
+
+          if (isValidCommandsExport) {
+            if (
+              firstDeclaration.id?.type === 'Identifier' &&
+              firstDeclaration.id.name !== 'Commands'
+            ) {
+              throw new Error("Native commands must be exported with the name 'Commands'")
+            }
+            commandsExport = node
+          } else {
+            if (
+              firstDeclaration.id?.type === 'Identifier' &&
+              firstDeclaration.id.name === 'Commands'
+            ) {
+              throw new Error(
+                "'Commands' is a reserved export and may only be used to export the result of codegenNativeCommands."
+              )
+            }
+          }
+        }
+      } else if (node.specifiers && node.specifiers.length > 0) {
+        for (const specifier of node.specifiers) {
+          if (
+            specifier.type === 'ExportSpecifier' &&
+            ((specifier.local?.type === 'Identifier' &&
+              specifier.local.name === 'Commands') ||
+              (specifier.exported?.type === 'Identifier' &&
+                specifier.exported.name === 'Commands'))
+          ) {
+            throw new Error(
+              "'Commands' is a reserved export and may only be used to export the result of codegenNativeCommands."
+            )
+          }
+        }
+      }
+    }
+  }
+
+  if (!defaultExport) {
+    return
+  }
+
+  const generated = generateViewConfig(program)
+  if (!generated) {
+    return
+  }
+
+  const s = new MagicString(code)
+
+  if (commandsExport) {
+    let removeEnd = endOf(commandsExport)
+    if (code[removeEnd] === '\r') removeEnd++
+    if (code[removeEnd] === '\n') removeEnd++
+    s.remove(startOf(commandsExport), removeEnd)
+  }
+
+  s.overwrite(
+    startOf(defaultExport),
+    endOf(defaultExport),
+    renderViewConfigModule(generated)
+  )
+
+  return {
+    code: s.toString(),
+    map: s.generateMap({ hires: true, source: cleanId }),
+  }
+}