Codegen: यह क्या है, कोड जनरेशन और Fabric आर्किटेक्चर

Codegen क्या है?

Codegen (कोड जनरेटर का संक्षिप्त रूप) एक कमांड-लाइन उपयोगिता है जो React Native में शामिल है और JavaScript और नेटिव प्लेटफ़ॉर्म (iOS, Android) के बीच इंटरैक्शन के लिए स्वचालित रूप से ब्रिजिंग कोड जनरेट करती है। Codegen React Native की नई आर्किटेक्चर का एक अभिन्न अंग है और इसका उपयोग Fabric (रेंडरर) और TurboModules (नेटिव मॉड्यूल) दोनों के लिए किया जाता है।

Codegen का मुख्य विचार जिम्मेदारियों का पृथक्करण है: डेवलपर वर्णन करता है कि फ़ंक्शन को «क्या» करना चाहिए (उसका सिग्नेचर), और Codegen जनरेट करता है कि इसे नेटिव साइड पर «कैसे» भेजा जाएगा। यह JSI के लिए C++ रैपर, iOS के लिए Objective-C स्टब और Android के लिए Java क्लास मैन्युअल रूप से लिखने की आवश्यकता को समाप्त करता है। सत्य का एकमात्र स्रोत — TypeScript विशिष्टता — गारंटी देता है कि सभी स्तरों पर टाइप मेल खाते हैं, जो JS और नेटिव कोड के बीच टाइप बेमेल से संबंधित त्रुटियों के एक पूरे वर्ग को समाप्त करता है।

Codegen को React Native की नई आर्किटेक्चर (0.70+) के पहले स्थिर संस्करण के साथ पेश किया गया था और तब से यह नेटिव मॉड्यूल बनाने के लिए एक अनिवार्य उपकरण बन गया है। Codegen के बिना, डेवलपर्स को मैन्युअल रूप से JSI Host Objects लिखने होंगे, जिसके लिए C++ का गहन ज्ञान और JavaScript इंजन की आंतरिक संरचना की समझ आवश्यक होगी।

विकास: मैन्युअल ब्रिज से स्वचालित जनरेशन तक

Codegen से पहले, React Native के लिए नेटिव मॉड्यूल विकसित करने में तीन चरण शामिल थे: JavaScript इंटरफ़ेस लिखना, Java/Objective-C में नेटिव मॉड्यूल को लागू करना, और मैन्युअल रूप से ब्रिज लिखना। जब किसी विधि का सिग्नेचर बदलता था, तो तीनों फ़ाइलों को समकालिक रूप से अपडेट करना होता था। Codegen इस रूटीन को स्वचालित करता है: परिवर्तन केवल TypeScript विशिष्टता में किए जाते हैं, और बाकी सब कुछ पुनर्जनरेट होता है।

बिल्ड सिस्टम के साथ एकीकरण

Codegen Metro और CocoaPods के माध्यम से React Native बिल्ड प्रक्रिया में एकीकृत होता है। बिल्ड शुरू करने पर, Codegen TypeScript विशिष्टताओं का विश्लेषण करता है, C++ और प्लेटफ़ॉर्म फ़ाइलें जनरेट करता है, और उन्हें बिल्ड निर्देशिका में रखता है। इसका मतलब है कि जनरेटेड कोड हमेशा वर्तमान विशिष्टताओं से मेल खाता है और मैन्युअल अपडेट की आवश्यकता नहीं होती है।

Codegen कैसे काम करता है?

Codegen की कार्य प्रक्रिया तीन चरणों में होती है: विशिष्टताओं का पार्सिंग, मध्यवर्ती अभ्यावेदन का निर्माण, और लक्ष्य फ़ाइलों का जनरेशन। प्रत्येक चरण पृथक है, जिससे नए प्लेटफ़ॉर्म या जनरेशन भाषाओं के लिए समर्थन जोड़ना आसान हो जाता है।

पहले चरण में, Codegen TypeScript या Flow प्रारूप में विशिष्टता फ़ाइलों को पढ़ता है। विशिष्टता नेटिव मॉड्यूल इंटरफ़ेस का वर्णन करती है: विधियों के नाम, पैरामीटर टाइप और रिटर्न टाइप। Codegen प्रिमिटिव टाइप (number, string, boolean) के साथ-साथ जटिल टाइप — ऑब्जेक्ट, ऐरे, Promise और Callback का समर्थन करता है। विशिष्टताएँ प्रोजेक्ट की एक विशेष निर्देशिका में .ts या .js फ़ाइलों में संग्रहीत की जाती हैं।

दूसरे चरण में, Codegen पार्स की गई विशिष्टताओं से एक अमूर्त सिंटैक्स ट्री (AST) बनाता है। AST डेटा संरचना को एक तटस्थ प्रारूप में प्रस्तुत करता है जो किसी विशिष्ट जनरेशन भाषा से बंधा नहीं होता है। यह एकल AST से Fabric के लिए C++ कोड, iOS के लिए Objective-C और Android के लिए Java जनरेट करने की अनुमति देता है — सभी प्लेटफ़ॉर्म का समर्थन करने के लिए किसी अतिरिक्त कार्य की आवश्यकता नहीं होती है।

तीसरे चरण में, Codegen लक्ष्य प्लेटफ़ॉर्म फ़ाइलों को जनरेट करने के लिए एक टेम्पलेट इंजन (Mustache-आधारित) का उपयोग करता है। प्रत्येक टेम्पलेट एक विशिष्ट फ़ाइल प्रकार के लिए जिम्मेदार है: C++ हेडर (.h), इम्प्लीमेंटेशन (.cpp), Objective-C प्रोटोकॉल (.h) या इम्प्लीमेंटेशन (.mm), Java क्लास। टेम्पलेट React Native के साथ आते हैं, लेकिन प्रोजेक्ट की विशिष्ट आवश्यकताओं के लिए अनुकूलित किए जा सकते हैं।

Codegen कार्य प्रक्रिया आरेख

// NativeCalculator.ts — native module specification
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')

इस उदाहरण में, विशिष्टता दो विधियों वाले NativeCalculator मॉड्यूल का वर्णन करती है: add और multiply। दोनों Double स्वीकार करते हैं और Double लौटाते हैं। TurboModuleRegistry में स्ट्रिंग 'NativeCalculator' मॉड्यूल नाम निर्दिष्ट करती है जो नेटिव साइड पर उपयोग किया जाएगा। Codegen इस विशिष्टता के आधार पर Fabric और TurboModules के लिए सभी आवश्यक फ़ाइलें जनरेट करेगा।

Fabric आर्किटेक्चर में Codegen

Fabric (नया React Native रेंडरर) के संदर्भ में, Codegen एक विशेष भूमिका निभाता है। Fabric की आवश्यकता है कि प्रत्येक नेटिव UI घटक का C++ अभ्यावेदन हो जिसे JSI के माध्यम से बनाया और प्रबंधित किया जा सके। Codegen घटक विशिष्टताओं के आधार पर स्वचालित रूप से इन C++ अभ्यावेदनों को जनरेट करता है।

UI घटकों के लिए जनरेशन

UI घटकों के लिए, Codegen न केवल C++ Shadow Node क्लास बल्कि प्लेटफ़ॉर्म-विशिष्ट अभ्यावेदन भी जनरेट करता है। उदाहरण के लिए, iOS पर एक कस्टम Button घटक के लिए, Codegen एक Objective-C क्लास बनाता है जो घटक को Fabric में रजिस्टर करता है और इसे C++ Shadow Node से जोड़ता है। डेवलपर को केवल TypeScript विशिष्टता में घटक के गुणों (रंग, आकार, हैंडलर) का वर्णन करने की आवश्यकता है।

प्रॉपर्टी टाइपिंग

Codegen प्रत्यक्ष और विपरीत डेटा स्थानांतरण दोनों का समर्थन करता है। डायरेक्ट इवेंट (जैसे onPress) को C++ संरचनाओं के रूप में जनरेट किया जाता है जिनमें फ़ील्ड होते हैं जो JS में पास होने पर स्वचालित रूप से सीरियलाइज़ हो जाते हैं। EventEmitter नेटिव साइड को JS से अनुरोध के बिना JS में इवेंट भेजने की अनुमति देता है। Codegen दोनों दिशाओं के लिए टाइप किए गए रैपर जनरेट करता है, फ़ील्ड नाम बेमेल त्रुटियों को समाप्त करता है।

तृतीय-पक्ष पुस्तकालयों के लिए Codegen

पुस्तकालय डेवलपर अपने npm पैकेज के साथ Codegen विशिष्टताएँ भेज सकते हैं। पुस्तकालय स्थापित करने पर, Codegen स्वचालित रूप से विशिष्टताओं का पता लगाता है और वर्तमान प्लेटफ़ॉर्म के लिए ब्रिजिंग कोड जनरेट करता है। यह नेटिव पुस्तकालयों के लिए विशेष रूप से महत्वपूर्ण है, क्योंकि पुस्तकालय उपयोगकर्ता को C++, Objective-C या Java को समझने की आवश्यकता नहीं है — वे बस TypeScript टाइप आयात करते हैं और तैयार घटकों का उपयोग करते हैं।

Codegen कौन सी फ़ाइलें जनरेट करता है?

Codegen तीन लक्ष्य वातावरणों के लिए फ़ाइलें जनरेट करता है: C++ (JSI), Objective-C (iOS) और Java (Android)। प्रत्येक फ़ाइल की सख्ती से परिभाषित भूमिका और संरचना होती है। यह समझना कि कौन सी फ़ाइलें बनाई जाती हैं, डिबगिंग में और यदि आवश्यक हो तो जनरेटेड कोड के मैन्युअल समायोजन में मदद करता है।

C++ फ़ाइलें (JSI)

प्रत्येक नेटिव मॉड्यूल के लिए, Codegen दो C++ फ़ाइलें बनाता है: Host Object क्लास घोषणा के साथ एक हेडर (.h) और प्लेटफ़ॉर्म पर संबंधित फ़ंक्शन को कॉल करने वाली विधियों वाली एक इम्प्लीमेंटेशन फ़ाइल (.cpp)। हेडर फ़ाइल में jsi::HostObject से विरासत में मिली एक क्लास होती है जिसमें मॉड्यूल फ़ंक्शन तक पहुँचने के लिए ओवरराइड get विधि होती है। इम्प्लीमेंटेशन फ़ाइल में लैम्ब्डा फ़ंक्शन होते हैं जो JS से कॉल किए जाने पर नेटिव मॉड्यूल को निष्पादन सौंपते हैं।

iOS फ़ाइलें (Objective-C)

iOS के लिए, Codegen एक Objective-C प्रोटोकॉल और एक श्रेणी जनरेट करता है। प्रोटोकॉल उन विधियों की घोषणा करता है जिन्हें नेटिव मॉड्यूल द्वारा कार्यान्वित किया जाना चाहिए। RCTCxxBridge पर श्रेणी में ब्रिजिंग कोड होता है जो मॉड्यूल को RCTTurboModuleManager में रजिस्टर करता है। यह मानक RCTBridge तंत्र के माध्यम से C++ JSI से Objective-C मॉड्यूल विधियों को कॉल करने की अनुमति देता है।

Android फ़ाइलें (Java)

Android के लिए, Codegen एक Java इंटरफ़ेस और एक अमूर्त क्लास जनरेट करता है। इंटरफ़ेस में सही Java टाइप के साथ विधि घोषणाएँ होती हैं। अमूर्त क्लास TurboModule इंटरफ़ेस को लागू करती है और मॉड्यूल को ReactPackage में रजिस्टर करने के लिए मूल तर्क शामिल करती है। डेवलपर इस क्लास से विरासत प्राप्त करता है और केवल विधियों का व्यावसायिक तर्क लागू करता है।

जनरेटेड फ़ाइल संरचना

// Directory structure after Codegen run
build/
    generated/
        ios/
            NativeCalculatorSpec.h     // Objective-C protocol
            NativeCalculatorSpec.mm    // JSI implementation
        android/
            NativeCalculatorSpec.java  // Java interface
            NativeCalculatorModuleBase.java  // Base class
        cxx/
            NativeCalculator.h         // C++ Host Object header
            NativeCalculator.cpp        // C++ JSI implementation

यह पूरी संरचना प्रोजेक्ट बिल्ड के दौरान स्वचालित रूप से बनाई जाती है। डेवलपर्स को जनरेटेड फ़ाइलों को संपादित नहीं करना चाहिए — अगले बिल्ड पर वे ओवरराइट हो जाएँगी। यदि मॉड्यूल व्यवहार बदलने की आवश्यकता है, तो संशोधन केवल नेटिव इम्प्लीमेंटेशन स्रोत कोड (Java/Objective-C) या TypeScript विशिष्टता में किए जाते हैं।

Codegen वर्कफ़्लो उदाहरण

आइए Keychain में डेटा संग्रहीत करने के लिए एक नेटिव मॉड्यूल बनाकर Codegen के पूर्ण वर्कफ़्लो को देखें। यह एक विशिष्ट कार्य है जिसके लिए iOS और Android के मूल API तक पहुँच की आवश्यकता होती है।

चरण 1: विशिष्टता

डेवलपर KeychainStorage मॉड्यूल इंटरफ़ेस का वर्णन करने वाली एक विशिष्टता फ़ाइल बनाता है। save और read विधियाँ एक स्ट्रिंग स्वीकार करती हैं और Promise लौटाती हैं, क्योंकि Keychain के साथ काम करना कुछ प्लेटफ़ॉर्म पर अतुल्यकालिक हो सकता है।

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')

चरण 2: Codegen चलाना

React Native प्रोजेक्ट बनाते समय Codegen स्वचालित रूप से चलता है। यदि इसे मैन्युअल रूप से चलाने की आवश्यकता है, तो npx react-native codegen कमांड का उपयोग किया जाता है। Codegen विशिष्टता को पार्स करता है और build/generated/ में सभी आवश्यक फ़ाइलें बनाता है। डेवलपर जनरेटेड C++, Objective-C और Java फ़ाइलें देखता है, लेकिन उन्हें संपादित नहीं करना चाहिए।

# Run Codegen manually
npx react-native codegen --target-path ./build/generated

# After generation — build the project
npx react-native run-ios
npx react-native run-android

चरण 3: JS में उपयोग

जनरेशन और बिल्ड के बाद, डेवलपर मॉड्यूल को एक सामान्य TypeScript टाइप के रूप में आयात करता है। IDE जनरेटेड .d.ts फ़ाइलों की बदौलत स्वचालित रूप से विधि सिग्नेचर सुझाता है। TypeScript गारंटी देता है कि पैरामीटर और रिटर्न टाइप नेटिव इम्प्लीमेंटेशन से मेल खाते हैं — यदि विशिष्टता string निर्दिष्ट करती है, तो नेटिव साइड को बिल्कुल एक स्ट्रिंग प्राप्त होगी।

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')
}

यह उदाहरण दिखाता है कि JS कोड में कोई प्लेटफ़ॉर्म-विशिष्ट निर्देश नहीं है — यह iOS और Android दोनों के लिए समान है। सभी प्लेटफ़ॉर्म-विशिष्ट विवरण Codegen-जनरेटेड कोड के अंदर छिपे हुए हैं। Codegen ब्रिज बनाने के सभी रूटीन कार्यों को संभालता है, डेवलपर को केवल व्यावसायिक तर्क और TypeScript के माध्यम से टाइप जाँच छोड़ता है।