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 چلانا

Codegen React Native پروجیکٹ بناتے وقت خود بخود چلتا ہے۔ اگر اسے دستی طور پر چلانے کی ضرورت ہو، تو 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 قسم کے طور پر درآمد کرتا ہے۔ تیار کردہ .d.ts فائلوں کی بدولت IDE خود بخود طریقوں کے دستخط تجویز کرتا ہے۔ 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 کے ذریعے قسم کی جانچ چھوڑتا ہے۔