vxrn 2.0.0-beta.98.1 → 2.6.0

package/src/index.ts

@@ -27,5 +27,13 @@ export * from './plugins/rollupRemoveUnusedImports'
 export * from './plugins/autoDepOptimizePlugin'
 export * from './plugins/rnCodegenPlugin'
 export * from './plugins/workletImportsPlugin'
+export * from './plugins/backgroundComputationPlugin'
 
 export * from './types'
+
+export {
+  transformBackgroundComputations,
+  loadBackgroundComputationModule,
+  createBackgroundWorkletModule,
+  assertBackgroundDependency,
+} from './backgroundComputation'

package/src/native-source-contract.ts

@@ -0,0 +1,16 @@
+export {
+  nativeSourceContract,
+  writeNativeSourceDeclaration,
+  writeNativeSourceDeclarations,
+  renderSwiftSourceGlue,
+  kotlinSourceId,
+  renderKotlinSourceGlue,
+  swiftPodManifest,
+  writeSwiftPackageArtifacts,
+  type NativeSourceContract,
+  type NativeSourceMethod,
+  type NativeSourceModule,
+  type NativeSourceView,
+  type NativeSourceViewProp,
+  type SwiftPackageArtifacts,
+} from './utils/nativeSourceContract'

package/src/patches/builtInDepPatches.ts

@@ -469,25 +469,4 @@ ${contents}
       },
     },
   },
-  // react native 0.87 made ReactContextBaseJavaModule a Kotlin class, so the
-  // bare `currentActivity` property in @react-navigation/native's MaterialSymbolModule
-  // no longer resolves and the Android build fails to compile. upstream alpha.45
-  // changed exactly this line; the monorepo stays on alpha.44 because alpha.45
-  // also pulls a @react-navigation/core alpha that renames Tabs APIs.
-  {
-    module: '@react-navigation/native',
-    patchFiles: {
-      version: '8.0.0-alpha.44',
-      'android/src/main/java/org/reactnavigation/MaterialSymbolModule.kt': (contents) => {
-        assertString(contents)
-        bailIfExists(contents, 'reactApplicationContext.currentActivity')
-        const patched = contents.replace(
-          'colorValue, currentActivity ?: reactApplicationContext',
-          'colorValue, reactApplicationContext.currentActivity ?: reactApplicationContext'
-        )
-        bailIfUnchanged(patched, contents)
-        return patched
-      },
-    },
-  },
 ]

package/src/plugins/autoDepOptimizePlugin.ts

@@ -89,7 +89,10 @@ export async function getScannedOptimizeDepsConfig(props: FindDepsOptionsByMode)
         include: filteredDeps,
         exclude: EXCLUDE_LIST,
       },
-      noExternal: filteredDeps,
+      noExternal: [
+        ...filteredDeps,
+        ...result.noExternalDeps.filter((dep) => !excludeSet.has(dep)),
+      ],
     },
   }
 }
@@ -119,6 +122,7 @@ export async function findDepsToOptimize({
     'yarn.lock',
     'package-lock.json',
     'pnpm-lock.yaml',
+    'bun.lock',
     'bun.lockb',
   ])
 
@@ -136,7 +140,8 @@ export async function findDepsToOptimize({
       if (
         lockFileHash === cachedLockFileHash &&
         !!cachedDepsToPreBundle &&
-        'prebundleDeps' in cachedDepsToPreBundle
+        'prebundleDeps' in cachedDepsToPreBundle &&
+        Array.isArray(cachedDepsToPreBundle.noExternalDeps)
       ) {
         value = cachedDepsToPreBundle
         debug?.(`Using cached scan results from ${cacheFilePath}`)

package/src/plugins/backgroundComputationPlugin.test.ts

@@ -0,0 +1,77 @@
+import { expect, test } from 'vitest'
+import { mkdtempSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { runInNewContext } from 'node:vm'
+import { rolldown } from 'rolldown'
+import { backgroundComputationPlugin } from './backgroundComputationPlugin'
+import { workletImportsPlugin } from './workletImportsPlugin'
+
+async function bundle(source: string) {
+  const root = mkdtempSync(join(tmpdir(), 'one-background-definition-'))
+  writeFileSync(join(root, 'entry.ts'), source)
+  writeFileSync(
+    join(root, 'calculate.ts'),
+    `import { multiplier } from './helper'; export function calculate(input: number) { return input * multiplier }`
+  )
+  writeFileSync(join(root, 'helper.ts'), 'export const multiplier = 3')
+  let build: Awaited<ReturnType<typeof rolldown>> | undefined
+  try {
+    build = await rolldown({
+      input: join(root, 'entry.ts'),
+      plugins: [
+        backgroundComputationPlugin('native'),
+        workletImportsPlugin({}),
+        {
+          name: 'definition-contract',
+          resolveId(id) {
+            if (id === 'one/background') return '\0definition-contract'
+          },
+          load(id) {
+            if (id === '\0definition-contract')
+              return 'export function defineBackgroundComputation(calculate) { return calculate }'
+          },
+        },
+      ],
+    })
+    const result = await build.generate({ format: 'cjs' })
+    const chunk = result.output[0]
+    if (chunk.type !== 'chunk') throw new Error('expected executable output')
+    const exports: Record<string, unknown> = {}
+    runInNewContext(chunk.code, { exports })
+    return exports
+  } finally {
+    await build?.close()
+    rmSync(root, { recursive: true, force: true })
+  }
+}
+
+test('bundles an imported pure graph into the selected native calculation', async () => {
+  const result = await bundle(
+    `import { defineBackgroundComputation as define } from 'one/background'; import { calculate } from './calculate'; const task = define(calculate); export const answer = task(7);`
+  )
+  expect(result.answer).toBe(21)
+})
+
+test('unused definition imports do not reject a module', async () => {
+  const result = await bundle(
+    `import { defineBackgroundComputation } from 'one/background'; export const answer = 21;`
+  )
+  expect(result.answer).toBe(21)
+})
+
+test('rejects component definitions even beside a valid definition', async () => {
+  await expect(
+    bundle(
+      `import { defineBackgroundComputation } from 'one/background'; import { calculate } from './calculate'; export const good = defineBackgroundComputation(calculate); export function Component() { return defineBackgroundComputation(calculate) }`
+    )
+  ).rejects.toThrow('definitions must be module-scope variables')
+})
+
+test('rejects inline calculations that can capture component state', async () => {
+  await expect(
+    bundle(
+      `import { defineBackgroundComputation } from 'one/background'; export const bad = defineBackgroundComputation((input) => input);`
+    )
+  ).rejects.toThrow('one named import from a relative pure module')
+})

package/src/plugins/backgroundComputationPlugin.ts

@@ -0,0 +1,29 @@
+import { dirname, resolve, relative } from 'node:path'
+import {
+  transformBackgroundComputations,
+  loadBackgroundComputationModule,
+} from '../backgroundComputation'
+import type { Plugin } from 'rolldown'
+
+export function backgroundComputationPlugin(platform: 'web' | 'native'): Plugin {
+  return {
+    name: `one:background-computation:${platform}`,
+    transform: {
+      order: 'pre',
+      handler(code, id) {
+        return transformBackgroundComputations(code, id, {
+          platform,
+          resolve: (source, importer) => resolve(dirname(importer), source),
+          workerFactory: (module) =>
+            `() => new Worker(new URL(${JSON.stringify(`./${relative(dirname(id), module.id).replaceAll('\\', '/')}`)}, import.meta.url), { type: 'module' })`,
+        })
+      },
+    },
+    resolveId(source) {
+      if (platform === 'web' && loadBackgroundComputationModule(source)) return source
+    },
+    load(id) {
+      if (platform === 'web') return loadBackgroundComputationModule(id)?.source
+    },
+  }
+}

package/src/plugins/reactNativeDevAssetPlugin.ts

@@ -1,5 +1,6 @@
 import path from 'node:path'
 import FSExtra from 'fs-extra'
+import { getMimeType } from 'hono/utils/mime'
 
 import type { Plugin, ResolvedConfig } from 'vite'
 import colors from 'picocolors'
@@ -138,7 +139,10 @@ export default asset;
         try {
           const asset = await FSExtra.readFile(assetPath)
 
-          res.setHeader('content-type', 'image/png')
+          res.setHeader(
+            'content-type',
+            getMimeType(assetPath) || 'application/octet-stream'
+          )
           res.write(asset)
           res.end()
         } catch (e) {

package/src/plugins/reactNativeDevServer.test.ts

@@ -0,0 +1,74 @@
+import { mkdtemp, mkdir, rm, writeFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { createServer } from 'vite'
+import { expect, it } from 'vitest'
+import { createReactNativeDevServerPlugin } from './reactNativeDevServer'
+
+it('serves native media with byte ranges and preview content types', async () => {
+  const root = await mkdtemp(join(tmpdir(), 'native-media-http-'))
+  const bytes = Buffer.from([0, 1, 2, 3, 4, 5, 6, 7])
+  await mkdir(join(root, 'assets'))
+  await writeFile(join(root, 'assets/clip.mp4'), bytes)
+  await writeFile(join(root, 'assets/preview.txt'), 'native preview')
+  const server = await createServer({
+    root,
+    configFile: false,
+    plugins: [createReactNativeDevServerPlugin()],
+    server: { host: '127.0.0.1', port: 0 },
+  })
+  try {
+    await server.listen()
+    const { port } = server.httpServer!.address() as { port: number }
+    const origin = `http://127.0.0.1:${port}/assets/assets`
+    const full = await fetch(`${origin}/clip.mp4?platform=ios`)
+    expect(full.status).toBe(200)
+    expect(full.headers.get('content-type')).toBe('video/mp4')
+    expect(full.headers.get('accept-ranges')).toBe('bytes')
+    expect(Buffer.from(await full.arrayBuffer())).toEqual(bytes)
+    for (const [range, start, end] of [
+      ['bytes=0-1', 0, 1],
+      ['bytes=3-', 3, 7],
+      ['bytes=-2', 6, 7],
+      ['bytes=5-99', 5, 7],
+      ['bytes=-99', 0, 7],
+    ] as const) {
+      const response = await fetch(`${origin}/clip.mp4`, { headers: { range } })
+      expect(response.status).toBe(206)
+      expect(response.headers.get('content-range')).toBe(`bytes ${start}-${end}/8`)
+      expect(response.headers.get('content-length')).toBe(String(end - start + 1))
+      expect(Buffer.from(await response.arrayBuffer())).toEqual(
+        bytes.subarray(start, end + 1)
+      )
+    }
+    for (const range of ['bytes=8-', 'bytes=4-2', 'bytes=-0']) {
+      const response = await fetch(`${origin}/clip.mp4`, { headers: { range } })
+      expect(response.status).toBe(416)
+      expect(response.headers.get('content-range')).toBe('bytes */8')
+      expect(await response.text()).toBe('')
+    }
+    const fullResponseHeaders: Record<string, string>[] = [
+      { range: 'items=0-1' },
+      { range: 'bytes=0-1,4-5' },
+      { range: 'bytes=0-1', 'if-range': '"old"' },
+    ]
+    for (const headers of fullResponseHeaders) {
+      const response = await fetch(`${origin}/clip.mp4`, { headers })
+      expect(response.status).toBe(200)
+      expect(Buffer.from(await response.arrayBuffer())).toEqual(bytes)
+    }
+    const head = await fetch(`${origin}/clip.mp4`, {
+      method: 'HEAD',
+      headers: { range: 'bytes=0-1' },
+    })
+    expect(head.status).toBe(200)
+    expect(head.headers.get('content-length')).toBe('8')
+    expect(await head.text()).toBe('')
+    const preview = await fetch(`${origin}/preview.txt`)
+    expect(preview.headers.get('content-type')).toBe('text/plain')
+    expect(await preview.text()).toBe('native preview')
+  } finally {
+    await server.close()
+    await rm(root, { recursive: true, force: true })
+  }
+})

package/src/plugins/reactNativeDevServer.ts

@@ -1,6 +1,10 @@
 import type { Connect, Plugin, ViteDevServer } from 'vite'
 import { WebSocketServer, type WebSocket } from 'ws'
 import { createMessageSocket } from '@vxrn/utils'
+import {
+  expoClientFromNativeApp,
+  type NativeAppManifest,
+} from '@vxrn/utils/nativeAppManifest'
 import {
   addConnectedNativeClient,
   removeConnectedNativeClient,
@@ -8,11 +12,13 @@ import {
 import type { VXRNOptionsFilled } from '../config/getOptionsFilled'
 import { URL } from 'node:url'
 import { createRequire } from 'node:module'
-import { join } from 'node:path'
+import { extname, join, resolve, sep } from 'node:path'
 import { randomUUID } from 'node:crypto'
+import { existsSync, readFileSync, statSync } from 'node:fs'
 import { readFile } from 'node:fs/promises'
 import { createDevMiddleware } from '@react-native/dev-middleware'
 import { createNativeDevEngine } from '../utils/createNativeDevEngine'
+import { nativeDevBytecodeCompiler } from '../utils/compileNativeDevBytecode'
 import { getBoundPort } from '../utils/getBoundPort'
 import {
   getNativeFramePlatform,
@@ -32,17 +38,35 @@ type NativeHmrSocket = WebSocket & {
   vxrnPlatform: 'ios' | 'android'
 }
 
+// metro's asset server answers `/assets/<path>` for any asset file inside the
+// project root, registered by the bundle or not.
+function getProjectAssetFile(
+  root: string,
+  pathname: string
+): { filePath: string; type: string } | undefined {
+  const filePath = resolve(root, pathname.slice('/assets/'.length))
+  if (!filePath.startsWith(resolve(root) + sep)) return
+  const type = extname(filePath).slice(1)
+  if (getNativeAssetContentType(type) === 'application/octet-stream') return
+  if (!existsSync(filePath) || !statSync(filePath).isFile()) return
+  return { filePath, type }
+}
+
 export function getNativeAssetContentType(type: string): string {
   switch (type.toLowerCase()) {
     case 'bmp':
       return 'image/bmp'
     case 'gif':
       return 'image/gif'
+    case 'glb':
+      return 'model/gltf-binary'
     case 'jpeg':
     case 'jpg':
       return 'image/jpeg'
     case 'json':
       return 'application/json'
+    case 'mp4':
+      return 'video/mp4'
     case 'otf':
       return 'font/otf'
     case 'png':
@@ -51,6 +75,8 @@ export function getNativeAssetContentType(type: string): string {
       return 'image/svg+xml'
     case 'ttf':
       return 'font/ttf'
+    case 'txt':
+      return 'text/plain'
     case 'webp':
       return 'image/webp'
     case 'woff':
@@ -87,6 +113,7 @@ export function createReactNativeDevServerPlugin(
       const devEngineCreating: Record<string, Promise<unknown> | null> = {}
       const warnedProdBundleRequest = new Set<string>()
       const pendingReloadPlatforms = new Set<'ios' | 'android'>()
+      let compileBytecode: ReturnType<typeof nativeDevBytecodeCompiler> | undefined
 
       const devToolsSocketEndpoints = ['/inspector/device', '/inspector/debug']
       const reactNativeDevToolsUrl = `http://${host}:${getBoundPort(server)}`
@@ -101,14 +128,32 @@ export function createReactNativeDevServerPlugin(
       // an expo project's clients (dev launcher, expo-updates, peach) ask `/`,
       // `/manifest` or `/index.exp` for the evaluated app config with an
       // `expo-platform` header or `?platform=`. answer with the expo updates
-      // manifest expo cli's ExpoGoManifestHandlerMiddleware serves. a project
-      // without @expo/config gets none, like a bare react native metro.
+      // manifest expo cli's ExpoGoManifestHandlerMiddleware serves. only apps
+      // that declare expo use expo prebuild; a hoisted @expo/config alone does
+      // not make a one native app an expo app.
       const projectRequire = createRequire(join(root, 'package.json'))
+      const packageJsonPath = join(root, 'package.json')
+      const packageJson = existsSync(packageJsonPath)
+        ? JSON.parse(readFileSync(packageJsonPath, 'utf8'))
+        : {}
+      const hasExpo =
+        Object.hasOwn(packageJson.dependencies ?? {}, 'expo') ||
+        Object.hasOwn(packageJson.devDependencies ?? {}, 'expo')
+      // a one app that declares no expo answers from its native.app manifest,
+      // mapped to the same expo config shape.
+      const nativeApp: NativeAppManifest | undefined = hasExpo
+        ? undefined
+        : (globalThis as any).__vxrnNativeEntryConfig?.app
       const anonymousScopeId = randomUUID()
       server.middlewares.use(async (req, res, next) => {
+        if (!hasExpo && !nativeApp) return next()
         if (req.method !== 'GET' && req.method !== 'HEAD') return next()
         const url = new URL(req.url || '/', `http://${req.headers.host || 'localhost'}`)
-        if (url.pathname !== '/' && url.pathname !== '/manifest' && url.pathname !== '/index.exp') {
+        if (
+          url.pathname !== '/' &&
+          url.pathname !== '/manifest' &&
+          url.pathname !== '/index.exp'
+        ) {
           return next()
         }
         const header = req.headers['expo-platform'] || req.headers['exponent-platform']
@@ -116,26 +161,47 @@ export function createReactNativeDevServerPlugin(
           validPlatforms[url.searchParams.get('platform') || String(header || '')]
         if (!platform) return next()
 
-        let expoConfigPath: string
-        try {
-          expoConfigPath = projectRequire.resolve('@expo/config')
-        } catch {
-          return next()
+        let expoConfigPath: string | undefined
+        if (!nativeApp) {
+          try {
+            expoConfigPath = projectRequire.resolve('@expo/config')
+          } catch {
+            return next()
+          }
         }
-        const expoRequire = createRequire(expoConfigPath)
-        const { getConfig } = expoRequire('@expo/config')
-        const { resolveRelativeEntryPoint } = expoRequire('@expo/config/paths')
-        const { Updates } = expoRequire('@expo/config-plugins')
 
         try {
-          const { exp, pkg } = getConfig(root)
           const hostUri = req.headers.host || `localhost:${getBoundPort(server)}`
-          const mainModuleName: string = resolveRelativeEntryPoint(root, { platform, pkg })
-          const runtimeVersion = await Updates.getRuntimeVersionAsync(
-            root,
-            { ...exp, runtimeVersion: exp.runtimeVersion ?? { policy: 'sdkVersion' } },
-            platform
-          )
+          const { exp, mainModuleName, runtimeVersion } = nativeApp
+            ? {
+                exp: expoClientFromNativeApp(nativeApp),
+                // the vite native server answers any `.bundle` path with the
+                // app entry, so `index` is what a one app's native build loads.
+                mainModuleName: 'index',
+                runtimeVersion: nativeApp.updates?.runtimeVersion ?? null,
+              }
+            : await (async () => {
+                const expoRequire = createRequire(expoConfigPath!)
+                const { getConfig } = expoRequire('@expo/config')
+                const { resolveRelativeEntryPoint } = expoRequire('@expo/config/paths')
+                const { Updates } = expoRequire('@expo/config-plugins')
+                const { exp, pkg } = getConfig(root)
+                return {
+                  exp,
+                  mainModuleName: resolveRelativeEntryPoint(root, {
+                    platform,
+                    pkg,
+                  }) as string,
+                  runtimeVersion: await Updates.getRuntimeVersionAsync(
+                    root,
+                    {
+                      ...exp,
+                      runtimeVersion: exp.runtimeVersion ?? { policy: 'sdkVersion' },
+                    },
+                    platform
+                  ),
+                }
+              })()
           const manifest = JSON.stringify({
             id: randomUUID(),
             createdAt: new Date().toISOString(),
@@ -146,7 +212,7 @@ export function createReactNativeDevServerPlugin(
               url: `http://${hostUri}/${encodeURI(mainModuleName.replace(/^\/+/, ''))}.bundle?platform=${platform}&dev=true&hot=false`,
             },
             assets: [],
-            metadata: {},
+            metadata: nativeApp ? { oneNativeApp: true } : {},
             extra: {
               eas: { projectId: exp.extra?.eas?.projectId ?? undefined },
               expoClient: { ...exp, hostUri },
@@ -191,8 +257,11 @@ export function createReactNativeDevServerPlugin(
       })
 
       // Native AssetSourceResolver requests the URL registered in the Rolldown
-      // bundle. Install this before React Native's generic middleware, which
-      // otherwise terminates unknown /assets requests with an HTML 404.
+      // bundle. Like Metro, any other project file is served at
+      // `/assets/<project-relative path>`: a splash image or font that only the
+      // app config names is never in the bundle. Install this before React
+      // Native's generic middleware, which otherwise terminates unknown
+      // /assets requests with an HTML 404.
       server.middlewares.use(async (req, res, next) => {
         if (req.method !== 'GET' && req.method !== 'HEAD') return next()
 
@@ -204,7 +273,6 @@ export function createReactNativeDevServerPlugin(
 
         const platform = validPlatforms[url.searchParams.get('platform') || '']
         const engine = platform ? devEngines[platform] : undefined
-        if (!engine) return next()
 
         let pathname: string
         try {
@@ -215,8 +283,11 @@ export function createReactNativeDevServerPlugin(
           return
         }
 
-        const asset = engine.getAsset(pathname, url.searchParams.get('hash') || undefined)
+        const asset =
+          engine?.getAsset(pathname, url.searchParams.get('hash') || undefined) ??
+          getProjectAssetFile(root, pathname)
         if (!asset) {
+          if (!engine) return next()
           res.writeHead(404, { 'Content-Type': 'text/plain' })
           res.end('Native asset not found')
           return
@@ -224,11 +295,49 @@ export function createReactNativeDevServerPlugin(
 
         try {
           const contents = await readFile(asset.filePath)
-          res.writeHead(200, {
+          const headers = {
             'Cache-Control': 'no-cache',
+            'Accept-Ranges': 'bytes',
             'Content-Length': String(contents.byteLength),
             'Content-Type': getNativeAssetContentType(asset.type),
-          })
+          }
+          // avfoundation probes remote media with byte ranges before loading it.
+          // ignore unsupported range units, multipart requests and if-range without
+          // a matching validator; these receive the complete representation.
+          const range =
+            req.method === 'GET' &&
+            !req.headers['if-range'] &&
+            /^bytes=(\d*)-(\d*)$/.exec(req.headers.range || '')
+          if (range && (range[1] || range[2])) {
+            const size = contents.byteLength
+            const start = range[1]
+              ? Number(range[1])
+              : Math.max(0, size - Number(range[2]))
+            const end =
+              range[1] && range[2] ? Math.min(Number(range[2]), size - 1) : size - 1
+            if (
+              !Number.isSafeInteger(start) ||
+              !Number.isSafeInteger(end) ||
+              start > end ||
+              start >= size
+            ) {
+              res.writeHead(416, {
+                ...headers,
+                'Content-Length': '0',
+                'Content-Range': `bytes */${size}`,
+              })
+              res.end()
+              return
+            }
+            res.writeHead(206, {
+              ...headers,
+              'Content-Length': String(end - start + 1),
+              'Content-Range': `bytes ${start}-${end}/${size}`,
+            })
+            res.end(contents.subarray(start, end + 1))
+            return
+          }
+          res.writeHead(200, headers)
           res.end(req.method === 'HEAD' ? undefined : contents)
         } catch (error) {
           console.error(
@@ -448,6 +557,14 @@ export function createReactNativeDevServerPlugin(
 
         try {
           const bundle = await (await getDevEngine(platform)).getBundle()
+          let body: string | Buffer = bundle.code
+          if (platform === 'ios' && url.searchParams.get('bytecode') === 'hermes') {
+            compileBytecode ||= nativeDevBytecodeCompiler(root)
+            body = await compileBytecode(
+              bundle,
+              `${url.origin}/index.bundle?platform=${platform}`
+            )
+          }
           // a client that connects after this response starts from the current
           // route map and does not need the pending reload intended for the
           // previous runtime.
@@ -460,7 +577,7 @@ export function createReactNativeDevServerPlugin(
             'Cache-Control': 'no-store',
             'Content-Type': 'text/javascript',
           })
-          res.end(bundle.code)
+          res.end(body)
         } catch (err) {
           console.error(` Error building React Native bundle`)
           console.error(err)

package/src/plugins/rnCodegenPlugin.test.ts

@@ -101,6 +101,36 @@ export default codegenNativeComponent<NativeProps>('MyCustomView') as HostCompon
     )
   })
 
+  it('forwards arguments of commands declared as method signatures', () => {
+    const inputCode = `
+import type { HostComponent, ViewProps } from 'react-native';
+import type { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+
+interface NativeProps extends ViewProps {}
+interface NativeCommands {
+  setPage(viewRef: React.ElementRef<HostComponent<NativeProps>>, index: Int32): void
+  setScrollEnabledImperatively(viewRef: React.ElementRef<HostComponent<NativeProps>>, enabled: boolean): void
+}
+export const Commands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['setPage', 'setScrollEnabledImperatively'],
+});
+export default codegenNativeComponent<NativeProps>('MyPager');
+`
+
+    const result = transformReactNativeCodegen(
+      inputCode,
+      '/workspace/src/MyPagerNativeComponent.ts'
+    )
+
+    expect(result?.code).toContain('setPage(ref, index) {')
+    expect(result?.code).toContain('dispatchCommand(ref, "setPage", [index]);')
+    expect(result?.code).toContain(
+      'dispatchCommand(ref, "setScrollEnabledImperatively", [enabled]);'
+    )
+  })
+
   it('throws an error if native commands are exported with a name other than Commands', () => {
     const inputCode = `
 import * as React from 'react';