VSCode eklentisi: Open Storybook – Yalnızca istediğiniz Storybook’u hızlıca çalıştırın

Arka plan

Ekibimiz Storybook’u çalıştırırken hız sorunları yaşıyordu.
Proje büyüdükçe Storybook’un tam derleme süresi giderek uzadı ve test etmek istediğimiz yalnızca bazı story’leri açmak isterken her seferinde tüm Storybook’u çalıştırmak ya da .storybook/main.ts içinde yolları değiştirmek gibi bir zahmet ortaya çıktı.

Bunu çözmek için, "Open Storybook" adlı bir VSCode eklentisi geliştirdik.
Jest Runner gibi, Storybook’un da "dosya gezgininde yalnızca belirli klasörleri seçip çalıştırılabilmesini" veya "istenen Storybook dosyasını seçip çalıştırılabilmesini" sağladık.

Özellikler

• Klasör - sağ tık - Open Stories komutu: İlgili klasör içindeki tüm Storybook’ları ek olarak açabilirsiniz.
• Komut paleti: Open Storybook komutu: Komutla açılmış Storybook’lar varsa, mevcut + yeni Storybook’ları birleştirerek görüntüleyebilirsiniz. (Open Stories ile açıldığında da aynı şekilde birleştirilir.)
• Monorepo yönetimi: Storybook terminallerini paket bazında ayrı ayrı yönetir.
• Script içinde storybook komutunu bulup çalıştırır. Yoksa npx storybook ile çalıştırır.

Kurulum

• Eklentiler bölümünde roseline-song.open-storybook veya open storybook aratın
• Cursor kullanıyorsanız: VSCode sürüm uyumluluğu hatası oluşursa, Install yanındaki dişli düğmesine tıklayın - Install specific version - en güncel sürümü kurun

[guseod24]

0.0.5 sürümü

Storybook olmayan bir dosya Open Storybook ile açılmaya çalışıldığında hata toast'u gösterilir
Paket bazında Storybook yolunun sürekli birikerek yığılması sorunu çözüldü
Storybook terminali kapatıldığında main.ts geri yüklenir