vxrn 1.25.16 → 1.26.0

package/src/plugins/rnCodegenPlugin.test.ts

@@ -0,0 +1,313 @@
+import { describe, expect, it } from 'vitest'
+import { rnCodegenPlugin, transformReactNativeCodegen } from './rnCodegenPlugin'
+
+describe('rnCodegenPlugin', () => {
+  it('generates view-config replacement for codegenNativeComponent default export', () => {
+    const inputCode = `
+import type { ViewProps, HostComponent } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeProps extends ViewProps {
+  color?: string;
+}
+
+export default codegenNativeComponent<NativeProps>('MyCustomView') as HostComponent<NativeProps>;
+`
+
+    const result = transformReactNativeCodegen(
+      inputCode,
+      '/workspace/src/MyCustomViewNativeComponent.ts'
+    )
+
+    expect(result).toBeDefined()
+    expect(result?.code).not.toContain('codegenNativeComponent<NativeProps>')
+    expect(result?.code).toContain(
+      'export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);'
+    )
+    expect(result?.code).toContain('uiViewClassName: "MyCustomView"')
+    expect(result?.code).toContain('export const __INTERNAL_VIEW_CONFIG')
+    expect(result?.map).toBeDefined()
+  })
+
+  it('leaves already-generated output alone on a second pass', () => {
+    // the transform runs more than once over the same module. its own output
+    // keeps the codegenNativeComponent import and turns Commands into a plain
+    // object, which the reserved-export check would otherwise reject.
+    const inputCode = `
+import type { ViewProps, HostComponent } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+
+export interface NativeProps extends ViewProps {
+  color?: string;
+}
+
+interface NativeCommands {
+  reload: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
+}
+
+export const Commands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['reload'],
+});
+
+export default codegenNativeComponent<NativeProps>('MyCustomView') as HostComponent<NativeProps>;
+`
+
+    const id = '/workspace/src/MyCustomViewNativeComponent.ts'
+    const first = transformReactNativeCodegen(inputCode, id)
+    expect(first?.code).toContain('export const Commands')
+
+    expect(() => transformReactNativeCodegen(first!.code, id)).not.toThrow()
+    expect(transformReactNativeCodegen(first!.code, id)).toBeUndefined()
+  })
+
+  it('removes export const Commands = codegenNativeCommands(...) and generates runtime commands', () => {
+    const inputCode = `
+import * as React from 'react';
+import type { ViewProps, HostComponent } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+
+export interface NativeProps extends ViewProps {
+  color?: string;
+}
+
+type ComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+  flash: (viewRef: React.ElementRef<ComponentType>, enabled: boolean) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['flash'],
+});
+
+export default codegenNativeComponent<NativeProps>('MyCustomView') as HostComponent<NativeProps>;
+`
+
+    const result = transformReactNativeCodegen(
+      inputCode,
+      '/workspace/src/MyCustomViewNativeComponent.ts'
+    )
+
+    expect(result).toBeDefined()
+    // The original codegenNativeCommands export must be removed
+    expect(result?.code).not.toContain('codegenNativeCommands<NativeCommands>')
+    // The runtime Commands implementation must be generated
+    expect(result?.code).toContain('export const Commands = {')
+    expect(result?.code).toContain('dispatchCommand(ref, "flash", [enabled]);')
+    expect(result?.code).toContain(
+      'export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);'
+    )
+  })
+
+  it('throws an error if native commands are exported with a name other than Commands', () => {
+    const inputCode = `
+import * as React from 'react';
+import type { ViewProps, HostComponent } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+
+export interface NativeProps extends ViewProps {
+  color?: string;
+}
+
+type ComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+  flash: (viewRef: React.ElementRef<ComponentType>, enabled: boolean) => void;
+}
+
+export const OtherCommands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['flash'],
+});
+
+export default codegenNativeComponent<NativeProps>('MyCustomView') as HostComponent<NativeProps>;
+`
+
+    expect(() => {
+      transformReactNativeCodegen(
+        inputCode,
+        '/workspace/src/MyCustomViewNativeComponent.ts'
+      )
+    }).toThrow("Native commands must be exported with the name 'Commands'")
+  })
+
+  it("throws an error if 'Commands' is exported without codegenNativeCommands", () => {
+    const inputCode = `
+import type { ViewProps, HostComponent } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeProps extends ViewProps {
+  color?: string;
+}
+
+export const Commands = 123;
+
+export default codegenNativeComponent<NativeProps>('MyCustomView') as HostComponent<NativeProps>;
+`
+
+    expect(() => {
+      transformReactNativeCodegen(
+        inputCode,
+        '/workspace/src/MyCustomViewNativeComponent.ts'
+      )
+    }).toThrow(
+      "'Commands' is a reserved export and may only be used to export the result of codegenNativeCommands."
+    )
+  })
+
+  it("throws an error if 'Commands' is exported via export specifier without codegenNativeCommands", () => {
+    const inputCode = `
+import type { ViewProps, HostComponent } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeProps extends ViewProps {
+  color?: string;
+}
+
+const Commands = 123;
+export { Commands };
+
+export default codegenNativeComponent<NativeProps>('MyCustomView') as HostComponent<NativeProps>;
+`
+
+    expect(() => {
+      transformReactNativeCodegen(
+        inputCode,
+        '/workspace/src/MyCustomViewNativeComponent.ts'
+      )
+    }).toThrow(
+      "'Commands' is a reserved export and may only be used to export the result of codegenNativeCommands."
+    )
+  })
+
+  it('ignores files that do not match the codegen pattern', () => {
+    const inputCode = `
+export default function Button() {
+  return null;
+}
+`
+    const result = transformReactNativeCodegen(inputCode, '/workspace/src/Button.tsx')
+    expect(result).toBeUndefined()
+  })
+
+  it('ignores matching files without codegenNativeComponent', () => {
+    const inputCode = `
+export default function MyNativeComponent() {
+  return null;
+}
+`
+    const result = transformReactNativeCodegen(
+      inputCode,
+      '/workspace/src/MyNativeComponent.tsx'
+    )
+    expect(result).toBeUndefined()
+  })
+
+  it('supports files inside specs/ directory', () => {
+    const inputCode = `
+import type { ViewProps, HostComponent } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeProps extends ViewProps {
+  color?: string;
+}
+
+export default codegenNativeComponent<NativeProps>('SpecView') as HostComponent<NativeProps>;
+`
+
+    const result = transformReactNativeCodegen(inputCode, '/workspace/specs/SpecView.ts')
+
+    expect(result).toBeDefined()
+    expect(result?.code).toContain('uiViewClassName: "SpecView"')
+  })
+
+  it('works through the Vite plugin interface', () => {
+    const plugin = rnCodegenPlugin()
+    expect(plugin.name).toBe('vxrn:rn-codegen')
+    expect(plugin.enforce).toBe('pre')
+
+    const inputCode = `
+import type { ViewProps, HostComponent } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeProps extends ViewProps {
+  color?: string;
+}
+
+export default codegenNativeComponent<NativeProps>('PluginView') as HostComponent<NativeProps>;
+`
+
+    const transformFn =
+      typeof plugin.transform === 'function'
+        ? plugin.transform
+        : (plugin.transform as any)?.handler
+
+    const result = transformFn.call(
+      {} as any,
+      inputCode,
+      '/workspace/src/PluginViewNativeComponent.ts'
+    )
+
+    expect(result).toBeDefined()
+    expect(result?.code).toContain('uiViewClassName: "PluginView"')
+    expect(result?.map).toBeDefined()
+  })
+
+  it('removes export const Commands with sequence expression (e.g. coverage instrumentation)', () => {
+    const inputCode = `
+import type { ViewProps, HostComponent } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+
+export interface NativeProps extends ViewProps {
+  color?: string;
+}
+
+export const Commands = (0, codegenNativeCommands({
+  supportedCommands: [],
+}));
+
+export default codegenNativeComponent<NativeProps>('SequenceView') as HostComponent<NativeProps>;
+`
+
+    const result = transformReactNativeCodegen(
+      inputCode,
+      '/workspace/src/SequenceViewNativeComponent.ts'
+    )
+
+    expect(result).toBeDefined()
+    expect(result?.code).not.toContain('export const Commands')
+    expect(result?.code).toContain('uiViewClassName: "SequenceView"')
+    expect(result?.code).toContain('export default NativeComponentRegistry.get')
+  })
+
+  it('transforms Flow component specs correctly', () => {
+    const flowCode = `/**
+ * @flow strict-local
+ * @format
+ */
+
+import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
+import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+type FlowViewProps = $ReadOnly<{
+  ...ViewProps,
+  title?: string,
+}>;
+
+export default codegenNativeComponent<FlowViewProps>('FlowView') as HostComponent<FlowViewProps>;
+`
+
+    const result = transformReactNativeCodegen(
+      flowCode,
+      '/workspace/src/FlowViewNativeComponent.js'
+    )
+
+    expect(result).toBeDefined()
+    expect(result?.code).toContain('uiViewClassName: "FlowView"')
+    expect(result?.code).toContain('export default NativeComponentRegistry.get')
+  })
+})

package/src/plugins/rnCodegenPlugin.ts

@@ -0,0 +1,20 @@
+import type { Plugin } from 'vite'
+import { transformReactNativeCodegen } from '@vxrn/compiler'
+
+// the transform itself lives in @vxrn/compiler so the metro transformer worker
+// can run it too. vxrn depends on @vxrn/vite-plugin-metro, so the worker cannot
+// reach back into this package.
+export { transformReactNativeCodegen } from '@vxrn/compiler'
+
+export function rnCodegenPlugin(options?: { projectRoot?: string }): Plugin {
+  return {
+    name: 'vxrn:rn-codegen',
+    enforce: 'pre',
+    transform: {
+      order: 'pre',
+      handler(code: string, id: string) {
+        return transformReactNativeCodegen(code, id, options?.projectRoot)
+      },
+    },
+  } as Plugin
+}

package/src/plugins/workletImportsPlugin.ts

@@ -0,0 +1,226 @@
+import { createHash } from 'node:crypto'
+import { isBuiltin } from 'node:module'
+import { dirname, isAbsolute, join } from 'node:path'
+import { statSync } from 'node:fs'
+import { rolldown, type Plugin } from 'rolldown'
+import { parseSync } from 'oxc-parser'
+import { getClosureVariables, JS_GLOBALS, transformHermesLoops } from '@vxrn/compiler'
+import { hermesCompatSWCPlugin, hermesLoopsPlugin } from '../utils/createNativeDevEngine'
+
+/**
+ * bundles selected, synchronous pure-function exports for normal worklets mode.
+ * install in native.bundlerOptions.plugins. the replacement module exposes only
+ * the configured exports; each entry owns its complete dependency graph.
+ */
+export function workletImportsPlugin(imports: Record<string, readonly string[]>): Plugin {
+  const selections = new Map(
+    Object.entries(imports).map(([source, names]) => [source, [...new Set(names)]])
+  )
+
+  const rejectRuntimeDependency = (source: string) => {
+    const normalized = source.replace(/\\/g, '/')
+    if (
+      isBuiltin(source) ||
+      /(?:^|\/node_modules\/)(?:react|react-native|react-native-worklets|react-native-reanimated|expo-modules-core)(?:\/|$)/.test(
+        normalized
+      ) ||
+      /(?:^|\/node_modules\/)@react-native\//.test(normalized)
+    ) {
+      throw new Error(
+        `[worklet imports] runtime dependency ${source} is not pure JavaScript`
+      )
+    }
+  }
+
+  return {
+    name: 'vxrn:worklet-imports',
+    options(nativeOptions) {
+      // one config can share this plugin across simultaneous ios/android builds.
+      const modules = new Map<string, { entry: string; names: string[]; key: string }>()
+      const instance: Plugin = {
+        name: 'vxrn:worklet-imports:bundle',
+        async resolveId(source, importer, options) {
+          const names = selections.get(source)
+          if (!names) return
+          if (!names.length)
+            throw new Error(`[worklet imports] no exports selected for ${source}`)
+          if (options.kind !== 'import-statement') {
+            throw new Error(`[worklet imports] ${source} requires a static ESM import`)
+          }
+          rejectRuntimeDependency(source)
+          const resolved = await this.resolve(source, importer, { skipSelf: true })
+          if (
+            !resolved ||
+            resolved.external ||
+            !isAbsolute(resolved.id) ||
+            !statSync(resolved.id, { throwIfNoEntry: false })?.isFile()
+          ) {
+            throw new Error(
+              `[worklet imports] ${source} must resolve to a JavaScript file`
+            )
+          }
+          rejectRuntimeDependency(resolved.id)
+          const key = createHash('sha256')
+            .update(JSON.stringify([resolved.id, names]))
+            .digest('hex')
+            .slice(0, 16)
+          // a file-shaped id lets the existing native compiler process the directives.
+          const id = join(dirname(resolved.id), `__one_worklet_imports_${key}.js`)
+          modules.set(id, { entry: resolved.id, names, key })
+          return id
+        },
+        moduleParsed(info) {
+          if (
+            !info.code ||
+            ![...selections.keys()].some((source) => info.code!.includes(source))
+          )
+            return
+          const { program, errors } = parseSync(info.id, info.code, {
+            lang: /\.[cm]?ts$/.test(info.id)
+              ? 'ts'
+              : info.id.endsWith('.tsx')
+                ? 'tsx'
+                : 'jsx',
+          })
+          if (errors.length) throw new Error(errors[0].message)
+          for (const node of program.body) {
+            if (
+              node.type !== 'ImportDeclaration' &&
+              node.type !== 'ExportNamedDeclaration'
+            )
+              continue
+            const source = node.source?.value
+            if (!source) continue
+            const names = selections.get(source)
+            if (!names) continue
+            for (const specifier of node.specifiers) {
+              const imported =
+                specifier.type === 'ImportDefaultSpecifier'
+                  ? 'default'
+                  : specifier.type === 'ImportSpecifier'
+                    ? specifier.imported.type === 'Identifier'
+                      ? specifier.imported.name
+                      : specifier.imported.value
+                    : specifier.type === 'ExportSpecifier'
+                      ? specifier.local.type === 'Identifier'
+                        ? specifier.local.name
+                        : specifier.local.value
+                      : undefined
+              // native's shimMissingExports would otherwise silently emit undefined.
+              if (imported !== undefined && !names.includes(imported)) {
+                throw new Error(
+                  `[worklet imports] ${info.id} imports unselected export ${imported} from ${source}`
+                )
+              }
+            }
+          }
+        },
+        async load(id) {
+          const selected = modules.get(id)
+          if (!selected) return
+          const outerContext = this
+          const innerEntry = '\0one-worklet-import-entry'
+          const bundle = await rolldown({
+            cwd: nativeOptions.cwd,
+            input: innerEntry,
+            platform: 'neutral',
+            resolve: nativeOptions.resolve,
+            transform: nativeOptions.transform,
+            shimMissingExports: false,
+            plugins: [
+              {
+                name: 'vxrn:pure-worklet-module',
+                resolveId(source, _importer, options) {
+                  if (source === innerEntry) return source
+                  if (options.kind === 'dynamic-import') {
+                    throw new Error(
+                      `[worklet imports] dynamic imports are unsupported in ${selected.entry}`
+                    )
+                  }
+                  rejectRuntimeDependency(source)
+                },
+                load(source) {
+                  if (source === innerEntry) {
+                    return `export { ${selected.names.map((name, index) => `${JSON.stringify(name)} as __export${index}`).join(', ')} } from ${JSON.stringify(selected.entry)};`
+                  }
+                },
+                moduleParsed(info) {
+                  rejectRuntimeDependency(info.id)
+                  if (isAbsolute(info.id)) outerContext.addWatchFile(info.id)
+                  if (info.packageJsonPath)
+                    outerContext.addWatchFile(info.packageJsonPath)
+                },
+              },
+              hermesCompatSWCPlugin(false),
+              hermesLoopsPlugin(),
+            ],
+          })
+          let code: string
+          try {
+            const output = await bundle.generate({
+              format: 'iife',
+              name: '__oneWorkletBundle',
+            })
+            const chunk = output.output[0]
+            if (
+              output.output.length !== 1 ||
+              chunk.type !== 'chunk' ||
+              chunk.imports.length ||
+              chunk.dynamicImports.length
+            ) {
+              throw new Error(
+                `[worklet imports] ${selected.entry} must produce one self-contained JavaScript module`
+              )
+            }
+            // also cover closure-bearing loops in helpers emitted by the bundler.
+            code = transformHermesLoops(chunk.code, id)?.code ?? chunk.code
+            for (const file of await bundle.watchFiles) {
+              if (isAbsolute(file)) outerContext.addWatchFile(file)
+            }
+          } finally {
+            await bundle.close()
+          }
+
+          const loader = `__oneLoadWorkletModule_${selected.key}`
+          const loaderCode = `function ${loader}() {
+  'worklet';
+  const cache = globalThis.__oneWorkletImportCache || (globalThis.__oneWorkletImportCache = new WeakMap());
+  let namespace = cache.get(${loader});
+  if (namespace === undefined) {
+    ${code}
+    namespace = __oneWorkletBundle;
+    cache.set(${loader}, namespace);
+  }
+  return namespace;
+}`
+          const parsed = parseSync(id, loaderCode, { lang: 'js' })
+          if (parsed.errors.length) throw new Error(parsed.errors[0].message)
+          const captures = getClosureVariables(
+            parsed.program.body[0],
+            new Set([...JS_GLOBALS, 'arguments'])
+          )
+          if (captures.length) {
+            throw new Error(
+              `[worklet imports] ${selected.entry} requires unsupported runtime globals: ${captures.join(', ')}`
+            )
+          }
+          return `${loaderCode}\n${selected.names
+            .map(
+              (name, index) => `
+function __oneExport${index}(...args) {
+  'worklet';
+  return (0, ${loader}().__export${index})(...args);
+}
+export { __oneExport${index} as ${JSON.stringify(name)} };
+`
+            )
+            .join('\n')}`
+        },
+      }
+      return {
+        ...nativeOptions,
+        plugins: [instance, nativeOptions.plugins],
+      }
+    },
+  }
+}