Codegen: vad är det, kodgenerering och Fabric-arkitektur

Vad är Codegen?

Codegen (förkortning av Code Generator) är ett kommandoradsverktyg som ingår i React Native och som automatiskt genererar kopplingskoden för kommunikation mellan JavaScript och inbyggda plattformar (iOS, Android). Codegen är en integrerad del av den nya React Native-arkitekturen och används både för Fabric (renderare) och TurboModules (inbyggda moduler).

Huvudidén med Codegen är ansvarsfördelning: utvecklaren beskriver “vad” funktionen ska göra (dess signatur), och Codegen genererar “hur” detta ska överföras till den inbyggda sidan. Detta eliminerar behovet av att manuellt skriva C++-kopplingar för JSI, Objective-C-stubbar för iOS och Java-klasser för Android. En enda sanningskälla — TypeScript-specifikationen — garanterar att typerna på alla nivåer överensstämmer, vilket eliminerar en hel klass av fel relaterade till typmatchning mellan JS och inbyggd kod.

Codegen introducerades tillsammans med den första stabila versionen av den nya React Native-arkitekturen (0.70+) och har sedan dess blivit ett obligatoriskt verktyg för att skapa inbyggda moduler. Utan Codegen skulle utvecklaren behöva skriva JSI Host Objects manuellt, vilket kräver djupa kunskaper i C++ och förståelse för den interna funktionen hos JavaScript-motorer.

Evolution: från manuell bro till automatisk generering

Före Codegen innebar utvecklingen av en inbyggd modul för React Native tre steg: skriva JavaScript-gränssnittet, implementera den inbyggda modulen i Java/Objective-C och manuellt skriva bron. Vid ändring av en metods signatur måste alla tre filer synkroniseras. Codegen automatiserar denna rutin: ändringar görs endast i TypeScript-specifikationen, och allt annat genereras om.

Integration med byggsystemet

Codegen integreras i byggprocessen för React Native via Metro och CocoaPods. När bygget startar analyserar Codegen TypeScript-specifikationerna, genererar C++- och plattformsfiler och placerar dem i build-katalogen. Detta innebär att den genererade koden alltid överensstämmer med de aktuella specifikationerna och inte kräver manuell uppdatering.

Hur fungerar Codegen?

Codegens arbetsprocess består av tre steg: tolkning av specifikationer, byggande av en mellanrepresentation och generering av målfilerna. Varje steg är isolerat, vilket gör det enkelt att lägga till stöd för nya plattformar eller genereringsspråk.

I det första steget läser Codegen specifikationsfilerna i TypeScript- eller Flow-format. Specifikationen beskriver gränssnittet för den inbyggda modulen: metodnamn, parametertyper och returvärden. Codegen stöder primitiva typer (number, string, boolean) samt komplexa typer — objekt, arrayer, Promise och Callback. Specifikationerna lagras i filer med tillägget .ts eller .js i en särskild katalog i projektet.

I det andra steget bygger Codegen ett abstrakt syntaxträd (AST) från de lästa specifikationerna. AST representerar datastrukturen i ett neutralt format, inte bundet till ett specifikt genereringsspråk. Detta gör det möjligt att generera C++-kod för Fabric, Objective-C för iOS och Java för Android från en enda AST — inget extra arbete krävs för att stödja alla plattformar.

I det tredje steget använder Codegen en mallmotor (baserad på Mustache) för att generera filer för målplattformarna. Varje mall ansvarar för en specifik filtyp: C++-rubrikfil (.h), implementering (.cpp), Objective-C-protokoll (.h) eller implementering (.mm), Java-klass. Mallarna levereras med React Native, men kan anpassas för specifika projektbehov.

Codegens arbetsschema

// NativeCalculator.ts — specifikation av inbyggd modul
import { TurboModule, TurboModuleRegistry } from 'react-native'
import { Double } from 'react-native/Libraries/Types/CodegenTypes'

export interface NativeCalculatorSpec extends TurboModule {
    add(a: Double, b: Double): Double
    multiply(a: Double, b: Double): Double
}

export default TurboModuleRegistry.<NativeCalculatorSpec>('NativeCalculator')

I detta exempel beskriver specifikationen modulen NativeCalculator med två metoder: add och multiply. Båda tar emot Double och returnerar Double. Strängen 'NativeCalculator' i TurboModuleRegistry anger modulnamnet som kommer att användas på den inbyggda sidan. Codegen kommer baserat på denna specifikation att generera alla nödvändiga filer för Fabric och TurboModules.

Codegen i Fabric-arkitekturen

I context av Fabric (den nya React Native-renderaren) spelar Codegen en särskild roll. Fabric kräver att varje inbyggd UI-komponent har en C++-representation som kan skapas och hanteras via JSI. Codegen genererar dessa C++-representationer automatiskt baserat på komponentspecifikationer.

Generering för UI-komponenter

För UI-komponenter genererar Codegen inte bara C++-klassen Shadow Node, utan även plattformsrepresentationer. Till exempel, för en anpassad Button-komponent på iOS kommer Codegen att skapa en Objective-C-klass som registrerar komponenten i Fabric och länkar den till C++ Shadow Node. Utvecklaren behöver bara beskriva komponentens egenskaper (färg, storlek, hanterare) i TypeScript-specifikationen.

Typning av egenskaper

Codegen stöder direkt och omvänd dataöverföring. Direct Event (t.ex. onPress) genereras som C++-strukturer med fält som automatiskt serialiseras vid överföring till JS. EventEmitter låter den inbyggda sidan skicka händelser till JS utan en begäran från JS. Codegen genererar typade omslag för båda riktningarna, vilket eliminerar fel på grund av felaktiga fältnamn.

Codegen för tredjepartsbibliotek

Biblioteksutvecklare kan leverera Codegen-specifikationer tillsammans med npm-paketet. Vid installation av biblioteket upptäcker Codegen automatiskt specifikationerna och genererar kopplingskod för den aktuella plattformen. Detta är särskilt viktigt för inbyggda bibliotek eftersom biblioteksanvändaren inte behöver kunna C++, Objective-C eller Java — det räcker med att importera TypeScript-typer och använda färdiga komponenter.

Vilka filer genererar Codegen?

Codegen genererar filer för tre målmiljöer: C++ (JSI), Objective-C (iOS) och Java (Android). Varje fil har en strikt definierad roll och struktur. Att förstå vilka filer som skapas hjälper vid felsökning och vid behov manuell korrigering av den genererade koden.

C++-filer (JSI)

För varje inbyggd modul skapar Codegen två C++-filer: en rubrikfil (.h) med deklaration av Host Object-klassen och en implementeringsfil (.cpp) med metoder som anropar motsvarande funktioner på plattformen. Rubrikfilen innehåller en klass som ärver från jsi::HostObject med en överskriven get-metod för åtkomst till modulens funktioner. Implementeringsfilen innehåller lambdafunktioner som vid anrop från JS delegerar exekveringen till den inbyggda modulen.

iOS-filer (Objective-C)

För iOS genererar Codegen ett Objective-C-protokoll och en kategori. Protokollet deklarerar metoder som måste implementeras av den inbyggda modulen. Kategorin på RCTCxxBridge innehåller kopplingskod som registrerar modulen i RCTTurboModuleManager. Detta gör det möjligt att anropa Objective-C-modulens metoder från C++ JSI via den standardiserade RCTBridge-mekanismen.

Android-filer (Java)

För Android genererar Codegen ett Java-gränssnitt och en abstrakt klass. Gränssnittet innehåller deklarationer av modulens metoder med korrekta Java-typer. Den abstrakta klassen implementerar TurboModule-gränssnittet och innehåller grundläggande logik för att registrera modulen i ReactPackage. Utvecklaren ärver från denna klass och implementerar endast metodernas affärslogik.

Struktur för genererade filer

// Katalogstruktur efter Codegen-körning
build/
    generated/
        ios/
            NativeCalculatorSpec.h     // Objective-C-protokoll
            NativeCalculatorSpec.mm    // JSI-implementering
        android/
            NativeCalculatorSpec.java  // Java-gränssnitt
            NativeCalculatorModuleBase.java  // Bas klass
        cxx/
            NativeCalculator.h         // C++ Host Object-rubrik
            NativeCalculator.cpp        // C++ JSI-implementering

Hela denna struktur skapas automatiskt vid bygget av projektet. Utvecklaren bör inte redigera de genererade filerna — vid nästa bygge kommer de att skrivas över. Om modulens beteende behöver ändras görs ändringarna endast i källkoden för den inbyggda implementeringen (Java/Objective-C) eller i TypeScript-specifikationen.

Exempel på Codegen-arbetsflöden

Låt oss titta på den fullständiga arbetscykeln med Codegen med exemplet att skapa en inbyggd modul för att lagra data i Keychain. Detta är en typisk uppgift som kräver åtkomst till det inbyggda API:t för iOS och Android.

Steg 1: Specifikation

Utvecklaren skapar en specifikationsfil som beskriver gränssnittet för KeychainStorage-modulen. Metoderna save och read tar emot en sträng och returnerar Promise, eftersom arbete med Keychain kan vara asynkront på vissa plattformar.

import { TurboModule, TurboModuleRegistry } from 'react-native'

export interface KeychainStorageSpec extends TurboModule {
    save(key: string, value: string): Promise<void>
    read(key: string): Promise<string | null>
    delete(key: string): Promise<boolean>
}

export default TurboModuleRegistry.<KeychainStorageSpec>('KeychainStorage')

Steg 2: Köra Codegen

Codegen körs automatiskt vid bygge av ett React Native-projekt. Om manuell körning behövs används kommandot npx react-native codegen. Codegen tolkar specifikationen och skapar alla nödvändiga filer i build/generated/. Utvecklaren ser resultatet i form av genererade C++-, Objective-C- och Java-filer men bör inte redigera dem.

# Kör Codegen manuellt
npx react-native codegen --target-path ./build/generated

# Efter generering — bygg projektet
npx react-native run-ios
npx react-native run-android

Steg 3: Användning i JS

Efter generering och bygge importerar utvecklaren modulen som en vanlig TypeScript-typ. IDE föreslår automatiskt metodsignaturer tack vare de genererade .d.ts-filerna. TypeScript garanterar att parametrarnas och returvärdenas typer överensstämmer med den inbyggda implementeringen — om specifikationen anger string kommer den inbyggda sidan att få exakt en sträng.

import KeychainStorage from './NativeKeychainStorage'

async function storeToken(token: string) {
    await KeychainStorage.save('auth_token', token)
}

async function getToken(): Promise<string | null> {
    return KeychainStorage.read('auth_token')
}

I detta exempel ser man att JS-koden inte innehåller någon plattformsindikering — den är densamma för iOS och Android. Alla plattformsspecifika detaljer är gömda inuti koden som genererats av Codegen. Codegen tar över allt rutinarbete med att skapa broar och lämnar endast affärslogiken och typkontrollen via TypeScript till utvecklaren.