VSCode extension: Open Storybook – सिर्फ़ मनचाहा Storybook तेज़ी से चलाएँ

पृष्ठभूमि

हमारी टीम को Storybook चलाते समय स्पीड की समस्या हो रही थी।
जैसे-जैसे प्रोजेक्ट बड़ा होता गया, Storybook का पूरा build time लगातार बढ़ता गया,
और हम केवल टेस्ट करने वाली कुछ stories ही खोलना चाहते थे, लेकिन हर बार पूरा Storybook चलाना पड़ता था या .storybook/main.ts में path बदलने की असुविधा होती थी।

इसे हल करने के लिए हमने "Open Storybook" नाम का एक VSCode extension बनाया।
Jest Runner की तरह Storybook में भी "file explorer से सिर्फ़ किसी खास folder को चुनकर चलाना" या "मनचाही Storybook file चुनकर चलाना" संभव बनाया गया है।

फ़ीचर

• folder - right click - Open Stories command: उस folder के अंदर मौजूद सभी Storybook को अतिरिक्त रूप से खोल सकते हैं।
• command palette: Open Storybook command: अगर command से खोले गए Storybook पहले से हैं, तो मौजूदा + नए Storybook को मिलाकर देख सकते हैं। (Open Stories से खोलने पर भी इसी तरह merge हो जाते हैं।)
• monorepo management: package के हिसाब से Storybook terminal अलग-अलग manage किए जाते हैं।
• script में storybook command खोजकर उसे चलाया जाता है। अगर वह न हो, तो npx storybook से चलाया जाता है।

इंस्टॉलेशन

• extension में roseline-song.open-storybook या open storybook खोजें
• Cursor के मामले में: अगर vscode version compatibility error आता है, तो install के बगल वाले gear button पर click करें - install specific version - latest version install करें

[guseod24]

0.0.5 संस्करण

यदि Storybook नहीं होने वाली फ़ाइल को Open Storybook से खोलने की कोशिश की जाए, तो एरर टोस्ट दिखाया जाता है
हर package के लिए Storybook पाथ के लगातार जमा होते जाने की समस्या का समाधान
Storybook टर्मिनल बंद होने पर main.ts को पुनर्स्थापित किया जाता है