Rspress 2.0 Yayınlandı: Deneyim ve AI'ye Yönelik Tamamen Yenilenmiş Bir Güncelleme
Rspress 2.0 Yayınlandı: Deneyim ve AI'ye Yönelik Tamamen Yenilenmiş Bir Güncelleme
Rspress 2.0'ın resmi olarak yayınlandığını duyurmaktan mutluluk duyuyoruz!
Rspress, geliştiriciler için tasarlanmış bir belge sitesi aracı olan Rsbuild tabanlı bir statik site oluşturucusudur. 2023 yılında resmi olarak yayınlandığından beri, Rspress 1.x toplamda 144 sürüm geçirdi ve projeye 125 katkıda bulunan kişi katıldı. Giderek daha fazla geliştirici, Rspress'i verimli derleme performansı, sözleşmeli yönlendirme ve bileşen kütüphanesi önizlemesi gibi özellikleri sayesinde güzel ve güvenilir belge siteleri oluşturmak için tercih ediyor.
Topluluk geri bildirimleri ve önerileri doğrultusunda, Rspress 2.0 tema estetiği, AI-native, belge geliştirme deneyimi, Rslib ile birlikte kullanım gibi alanlarda daha da ileriye gitti.
Neden Rspress 2.0
Rspress 1.x, belge sitesi çerçevesinin derleme performansı sorununu çözmüştü, ancak belge geliştirme aracı olarak temel deneyimi etkileyen bazı sorunlar hala mevcuttu. 2.0 sürümü, yalnızca derleme performansına odaklanmakla kalmayıp, belge sitesi deneyiminin diğer yönlerine de odaklanmaktadır:
- Tema Stili: Daha güzel bir varsayılan tema seti ve çeşitli özelleştirme yöntemleri sunarak, 1.x'in tema özelleştirmesinde kararlı bir API eksikliği sorununu çözüyor.
- AI-native: Belgeler yalnızca insan okuyuculara hizmet etmekle kalmamalı, aynı zamanda Agent tarafından daha iyi anlaşılmalı ve kullanılmalıdır. Rspress artık llms.txt oluşturma ve SSG'den türetilen SSG-MD işlevselliğini yerleşik olarak sunarak, Agent'ın okuması için yüksek kaliteli Markdown içerik oluşturuyor.
- İhtiyaç Duyulduğunda Derleme, Anında Başlatma: Varsayılan olarak lazyCompilation etkinleştirilmiştir, bağlantı üzerine geldiğinde kaynakların ön yükleme işlevi ile yalnızca belirli bir yönlendirmeye erişildiğinde gerekli dosyaları oluşturarak, projenin boyutu ne olursa olsun, dev'in anında başlatılmasını sağlar.
- Shiki Kod Vurgulama: Varsayılan olarak Shiki entegre edilmiştir, derleme sırasında sözdizimi vurgulaması tamamlanır, tema değiştirme, transformer uzantıları gibi özellikleri destekler, örneğin @rspress/plugin-twoslash, daha zengin kod bloğu gösterim efektleri sunar.
- Belge Geliştirme Deneyimi: nav.json, meta.json gibi dosyaların HMR'sini optimize eder ve IDE içindeki kod ipuçları için yeni bir json şeması ekler; varsayılan olarak ölü bağlantı kontrolü işlevini etkinleştirir; dış dosyaları referans almayı destekleyen yeni dosya kod bloğu sözdizimini ekler; @rspress/plugin-preview ve @rspress/plugin-playground aynı anda kullanılabilir.
- Rslib Entegrasyonu: Artık create-rslib kullanarak bileşen kütüphanesi projeleri oluştururken, belge aracı olarak Rspress'i seçebilir ve bileşen belge sitelerini hızlı bir şekilde oluşturabilirsiniz.
2.0 Yeni Özellikler
Tamamen Yenilenmiş Tema
2.0 varsayılan teması, ekip tasarımcısı @Zovn Wei tarafından genel olarak tasarlanmış sistematik bir güncelleme geçirdi, görsel efektler ve okuma deneyiminde büyük bir iyileşme sağladı ve her bileşen bağımsız olarak değiştirilebilir, yüksek bir özelleştirilebilirliğe sahiptir.
Tema Özelleştirme
Özelleştirme derecesine göre düşükten yükseğe doğru, CSS değişkenleri, BEM sınıf adları, ESM yeniden ihracı ile örtme, bileşen eject olmak üzere dört tür özelleştirilmiş tema yöntemi bulunmaktadır.- CSS Değişkenleri: Yeni tema, tema rengi, kod blokları, ana sayfa gibi stilleri kapsayan daha fazla CSS değişkeni sunuyor. Tüm CSS değişkenlerini etkileşimli olarak önizlemek ve ayarlamak için CSS değişkenleri sayfasını kullanabilirsiniz, memnun kaldığınız ayarları projeye kopyalayarak kullanabilirsiniz.
- BEM Sınıf İsimleri: Yerleşik bileşenler artık BEM adlandırma kuralını kullanıyor. Bu oldukça eski bir seçim, ancak aynı zamanda derinlemesine düşündüğümüz bir karar. Kullanıcılar, CSS seçicileri aracılığıyla stilleri hassas bir şekilde ayarlayabilir, HTML yapısı daha net hale gelir.
- ESM Yeniden İhracı Üst Üste Bindirme: CSS üzerindeki değişiklikler özelleştirme ihtiyaçlarını karşılamıyorsa, JS aracılığıyla daha derin bir özelleştirme yapılabilir. theme/index.tsx içinde ESM yeniden ihracını kullanarak, Rspress'in yerleşik bileşenlerinden herhangi birini üst üste bindirebilirsiniz.
- Bileşen Eject: Yeni rspress eject [component] komutunu kullanabilirsiniz, bu komut belirtilen bileşenin kaynak kodunu theme/components/ dizinine kopyalar, bu kodları özgürce değiştirebilir, hatta doğrudan AI'ye değiştirmesi için verebilirsiniz, böylece derinlemesine özelleştirme gerçekleştirebilirsiniz.
Navigasyon Çubuğu, Yan Çubuk Tag'i
Rspress 2.0, Tag bileşenini uyguladı, artık yan çubuk veya navigasyon çubuğunda UI etiketlemesi için frontmatter içindeki tag özelliğini kullanabilirsiniz.
Yerleşik Çok Dilli Destek
1.x sürümünde, Rspress yalnızca İngilizce metin içeriyordu, başka bir dil kullanıldığında örneğin zh, tüm metinlerin yapılandırılması gerekiyordu, bu da kullanımı zorlaştırıyordu. Artık 2.0 tema, zh, en, ja, ko, ru gibi birçok dilin çeviri metinlerini yerleşik olarak sunuyor, sistem dil yapılandırmasına göre otomatik olarak "Ağaç Sarsma" işlemi gerçekleştiriyor, yalnızca kullandığınız metin ve dilleri paketliyor.
llms.txt Desteği
Rspress şimdi llms.txt oluşturma yeteneğini core'a entegre etti ve tamamen yeni bir SSG-MD (Statik Site Üretimi için Markdown, statik site Markdown üretimi) yeteneğini gerçekleştirdi.
React tabanlı dinamik render edilen ön uç çerçevelerinde, genellikle statik bilgilerin çıkarılması zor olmaktadır, Rspress de aynı zorlukla karşı karşıya. Rspress, kullanıcıların MDX parçaları, React bileşenleri, Hooks ve TSX yönlendirmeleri gibi dinamik özellikler aracılığıyla belgelerin ifade gücünü artırmalarına olanak tanır. Ancak bu dinamik içerikler Markdown metnine dönüştürülürken aşağıdaki sorunlarla karşılaşır:
- MDX'yi doğrudan AI'ye vermek, çok fazla kod sözdizimi gürültüsü içerir ve React bileşen içeriğini kaybeder.
- HTML'yi Markdown'a dönüştürmek genellikle iyi sonuç vermez, bilgi kalitesi garanti edilemez.
Bu sorunu çözmek için, Rspress 2.0 SSG-MD özelliğini tanıttı. Bu, statik site üretimine (SSG) benzer tamamen yeni bir işlevdir, ancak farkı, sayfanızı HTML dosyası yerine Markdown dosyası olarak render etmesidir ve llms.txt ile llms-full.txt ile ilgili dosyalar oluşturur.
Shiki Derleme Zamanı Kod Blokları VurgulamaRspress 2.0 varsayılan olarak Shiki kullanarak kod vurgulaması yapar. 1.x'in prism çalışma zamanı vurgulama çözümüne kıyasla, Shiki derleme zamanında vurgulama işlemini tamamlar.
- CSS değişkenleri sayfasında farklı Shiki temalarını etkileşimli olarak değiştirme ve önizleme gibi çeşitli tema stillerini destekler.
- Aynı zamanda Shiki, twoslash gibi yazımı zenginleştirmek için özel transformer'lar kullanmaya da izin verir.
- Programlama dillerini ihtiyaç duyulduğunda dahil eder, çalışma zamanı yükünü ve paket boyutunu artırmaz.
- TextMate sözdizimi temelinde, VS Code ile tutarlı doğru sözdizimi vurgulaması sağlar.
### Yapı Performansında Artış
Rspress 2.0, Rsbuild ve Rspack 2.0 önizleme sürümü tarafından desteklenmektedir ve varsayılan olarak ihtiyaç duyuldukça derleme ve kalıcı önbelleği açar.
#### İhtiyaç Duyulduğunda Derleme
Varsayılan olarak dev.lazyCompilation açılmıştır, yalnızca belirli bir sayfaya eriştiğinizde o sayfa derlenecektir, bu da geliştirme başlatma hızını büyük ölçüde artırır ve hatta milisaniye seviyesinde soğuk başlatma sağlar. Rspress, fare bağlantının üzerinde durduğunda hedef yönlendirme sayfasını önceden yükleyecek şekilde yönlendirme için ön yükleme stratejisini de uygular, lazyCompilation ile kayıpsız bir geliştirme deneyimi sağlar.
#### Kalıcı Önbellek
2.0 ayrıca varsayılan olarak kalıcı önbelleği açar, sıcak başlatma sırasında bir önceki derlemenin sonuçlarını yeniden kullanarak %30-60 oranında yapı hızını artırır. Bu, rspress dev veya rspress build'i ilk çalıştırdıktan sonra sonraki başlatma hızlarının belirgin şekilde artacağı anlamına gelir.
### Belge Geliştirme Deneyimi
#### Varsayılan Olarak Kırık Bağlantı Kontrolü Açık
Rspress 2.0 varsayılan olarak kırık bağlantı kontrolü işlevini açar. Yapı sürecinde, belgelerdeki geçersiz bağlantıları otomatik olarak kontrol eder, böylece zamanında tespit etmenize ve düzeltmenize yardımcı olur.
#### Dosya Kod Blokları
Harici dosyaları kod bloğu içeriği olarak almak için file="./path/to/file" özelliğini kullanabilirsiniz, örnek kodu ayrı bir dosyada tutarak bakımını yapabilirsiniz.
#### preview Daha Esnek Meta Kullanımı
@rspress/plugin-preview artık meta özelliğine dayalı olarak kullanılmakta, daha esnek hale gelmiştir ve dosya kod blokları ile birleştirilebilir.
### Rslib & Rspress
create-rslib ile proje oluştururken, artık Rspress aracını seçebilirsiniz. Bu, bileşen kütüphanesi geliştirirken, bileşenlerin kullanım talimatlarını yazmak, API referansını sergilemek veya bileşen etkisini gerçek zamanlı olarak önizlemek için hızlı bir belge sitesi kurmanıza olanak tanır.
### Daha Fazla Rspress Resmi Eklentisi
Rspress 2.0, birkaç resmi eklenti eklemiştir:
- @rspress/plugin-algolia: Rspress'in yerleşik aramasını Algolia DocSearch ile değiştirmeyi destekler
- @rspress/plugin-twoslash: TypeScript kod bloklarına tür ipuçları ekler
- @rspress/plugin-llms: SSG ve SSG-MD'yi desteklemeyen projelere llms.txt oluşturma yeteneği sağlar
- @rspress/plugin-sitemap: SEO'yu optimize etmek için otomatik olarak Sitemap dosyası oluşturur
## Önemli Değişiklikler
### Rspress 1.x'ten Geçiş
Eğer 1.x projesinin bir kullanıcısıysanız, 1.x'ten 2.0'a geçiş yapmanıza yardımcı olacak ayrıntılı bir geçiş belgesi hazırladık. Sayfadaki "Markdown'ı Kopyala" işlevini doğrudan kullanabilir, bunu sık kullandığınız kodlama aracınıza (Claude Code gibi) girerek geçişi tamamlayabilirsiniz.### Node.js ve Üst Düzey Bağımlılık Versiyon Gereksinimleri
Rspress 2.0, Node.js versiyon 20+ ve React versiyon 18+ gerektirir.
Sonraki Adım
Rspress 2.0'ın yayınlanması sadece yeni bir başlangıçtır. Bu yayın sonrasında, Rspress sürekli olarak iterasyon yapacaktır:
- Ekosistem Entegrasyonunu İlerletmek: Rslib ve Rstest ile daha derin bir entegrasyon sağlayarak, ön uç projeleri ve bileşen kütüphanesi projeleri için bütünleşik bir geliştirme deneyimi sunmak.
- AI ve Belgelerin Daha Derin Entegrasyonunu Keşfetmek: Akıllı soru-cevap, otomatik özetleme gibi özellikler; SSG-MD'yi geliştirerek daha stabil ve kullanımı kolay hale getirmek.
npm create rspress@latest
