Refactoring Lab कैसे इस्तेमाल करें
अपने पुराने code को modern बनाने की आसान गाइड, कदम-दर-कदम: AI वाले transformers, side-by-side diff और logic integrity check के साथ।
बस तीन कदम
Transformer चुनिए
आप किस तरह का code modern बनाना चाहते हैं, उसके हिसाब से चार में से एक transformer चुनिए।
Code पेस्ट कीजिए
पुराना code editor में पेस्ट कीजिए। हर transformer में पहले से एक उदाहरण होता है, जिसे आप पहले आज़मा सकते हैं।
Diff देखिए
"Code refactor करें" दबाइए और side-by-side diff देखिए। Integrity check पैनल बता देता है कि कहां code टूट सकता है।
कौन-कौन से transformers हैं
setState, lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount) और class methods वाले class components को useState, useEffect, useCallback और useRef वाले modern functional components में बदलता है।
अच्छे नतीजे के लिए टिप्स
- पूरा component डालिए: imports, class definition और export
- PropTypes और TypeScript types वैसे ही रहते हैं
- Context consumers, useContext में बदल जाते हैं
- Bound methods आम functions या useCallback बन जाते हैं
साफ़ type annotations जोड़ता है, object shapes के लिए interfaces बनाता है, `any` की जगह सही types लगाता है, और जहां ठीक हो वहां module.exports को ES module syntax में बदलता है।
अच्छे नतीजे के लिए टिप्स
- साफ़ inputs और outputs वाले, ठीक से लिखे functions पर सबसे अच्छा चलता है
- CommonJS और ES modules, दोनों तरह का code संभालता है
- बार-बार आने वाले object shapes के लिए interfaces बनाता है
- जब type सच में पता न हो, तो `any` की जगह `unknown` लगाता है
CREATE TABLE statements को Prisma schema definitions में, और SELECT/INSERT/UPDATE/DELETE queries को पूरी type safety वाले Drizzle ORM TypeScript code में बदलता है।
अच्छे नतीजे के लिए टिप्स
- सारे CREATE TABLE statements डालिए, ताकि tables के आपसी रिश्ते सही बनें
- Foreign keys, Prisma में @relation directives बन जाती हैं
- Output में Prisma schema और उसी के बराबर Drizzle queries, दोनों मिलते हैं
- SQL constraints (UNIQUE, NOT NULL, DEFAULT) वैसे ही रहते हैं
एक के अंदर एक callbacks (callback hell) और .then()/.catch() Promise chains को साफ़-सुथरे async/await code में बदलता है, try/catch के साथ सही error handling समेत।
अच्छे नतीजे के लिए टिप्स
- साथ-साथ चलने वाले callback काम Promise.all() में बदल जाते हैं
- हर callback error check के लिए वैसा ही try/catch बनता है
- Node.js की callback APIs को Promises में लपेटा जाता है
- हो सकता है function अब Promise लौटाए, यानी उसका signature बदल जाए
Logic integrity check को समझिए
हर refactor के बाद अपने आप एक static analysis चलता है, जो पुराने और नए code की तुलना करता है। यह कोई code चलाए बिना देखता है कि structure में ऐसा कोई बदलाव तो नहीं हुआ जिससे code टूट सकता हो।
- Exported symbols: क्या सारे exports बचे हैं?
- Function signatures: क्या parameters की गिनती बदली?
- Imports: क्या नई dependencies जुड़ीं?
- Module system: क्या CommonJS और ES Modules के बीच बदलाव हुआ?
- Code का साइज़: क्या बहुत बढ़ा या घटा?
- Type safety: क्या कोई `any` type आया?
- Debug के निशान: क्या console statements जुड़े?
सिर्फ़ जानकारी: कुछ करने की ज़रूरत नहीं (जैसे नए imports जुड़े, code का साइज़ बदला)
शायद कोई दिक्कत: एक बार देख लेना अच्छा है (जैसे parameters की गिनती बदली, module system बदला)
शायद code टूटेगा: खुद जांचना ज़रूरी है (जैसे exports हट गए)
भरोसे का स्कोर (0 से 100)
80+ स्कोर का मतलब है कि refactor शायद सुरक्षित है। 50 से कम हो, तो खुद ध्यान से जांचना बहुत ज़रूरी है।
अक्सर पूछे जाने वाले सवाल
क्या साइन इन करना ज़रूरी है?
हां। Refactoring Lab के लिए साइन इन ज़रूरी है, ताकि लिमिट संभाली जा सके और सबको बराबर मौका मिले।
क्या code के साइज़ की कोई लिमिट है?
हां, ज़्यादा से ज़्यादा 10 KB का code डाल सकते हैं। बड़ी फ़ाइलों को हिस्सों में refactor कीजिए।
एक दिन में कितनी बार refactor कर सकते हैं?
एक दिन में ज़्यादा से ज़्यादा 5 refactor। यह लिमिट पिछले 24 घंटों के हिसाब से चलती है, यानी हर refactor 24 घंटे बाद फिर से मिल जाता है।
क्या मेरा code बाहर के servers पर भेजा जाता है?
आपका code प्रोसेस होने के लिए एक AI सर्विस को भेजा जाता है। हम आपका code अपने servers पर नहीं रखते। वह सिर्फ़ आपके ब्राउज़र की local storage में रहता है।
क्या refactored code पर भरोसा कर सकते हैं?
Integrity check संभावित दिक्कतें दिखा देता है, फिर भी production में इस्तेमाल से पहले output ज़रूर देख लीजिए। AI के लिखे code को पक्की शुरुआत मानिए, आखिरी नतीजा नहीं।
क्या diff मोबाइल पर दिखता है?
हां। छोटी स्क्रीन पर diff अपने आप side-by-side से inline (unified) view में बदल जाता है।
क्या मेरा पिछला काम सेव रहता है?
हां। हर transformer का आपका आखिरी input और output ब्राउज़र की local storage में सेव रहता है, और लौटने पर वापस आ जाता है।