Rspress 2.0 objavljen: potpuno novo ažuriranje usmjereno na iskustvo i AI

Sa zadovoljstvom najavljujemo službeno izdanje Rspress 2.0!

Rspress je statički generator stranica temeljen na Rsbuild, alat za dokumentaciju dizajniran posebno za programere. Od službenog izdanja 2023. godine, Rspress 1.x je ukupno iterirao 144 verzije, a 125 doprinositelja je sudjelovalo u razvoju projekta. Sve više programera bira Rspress, koristeći njegove efikasne performanse kompilacije, konvencionalno usmjeravanje i pregled biblioteke komponenti za izgradnju lijepih i pouzdanih stranica dokumentacije.

Na temelju povratnih informacija i prijedloga zajednice, Rspress 2.0 je dodatno unaprijedio estetiku tema, AI-native, iskustvo razvoja dokumentacije, korištenje s Rslib i druge aspekte.

Zašto Rspress 2.0

Rspress 1.x je već riješio problem performansi kompilacije okvira stranica dokumentacije, ali još uvijek postoje neki problemi koji utječu na osnovno iskustvo kao alata za razvoj dokumentacije. Verzija 2.0 neće se fokusirati samo na performanse kompilacije, već i na druge aspekte iskustva stranica dokumentacije:

• Stil teme: skup ljepših zadatih tema, uz razne načine prilagodbe tema, rješava problem nedostatka stabilnog API-ja za prilagodbu tema u 1.x.
• AI-native: Dokumenti ne služe samo ljudskim čitateljima, već ih Agent također treba bolje razumjeti i koristiti. Rspress sada ima ugrađenu funkcionalnost za generiranje llms.txt i SSG-MD izvedenih iz SSG, generirajući visokokvalitetan Markdown sadržaj za čitanje od strane Agenta.
• Kompilacija na zahtjev, trenutni start: Zadano omogućena lazyCompilation, zajedno s funkcijom preload resursa prilikom hoveranja linkova, gradi potrebne datoteke samo kada se pristupi određenim rutama, omogućujući trenutni start bez obzira na veličinu projekta.
• Shiki isticanje koda: Zadano integrira Shiki, završava isticanje sintakse tijekom gradnje, podržava promjenu tema, proširenja transformera, kao što je @rspress/plugin-twoslash, donoseći bogatije efekte prikaza blokova koda.
• Iskustvo razvoja dokumentacije: Optimizira HMR za nav.json, meta.json i druge datoteke te dodaje json shemu za kodne savjete unutar IDE-a; zadano uključuje provjeru mrtvih linkova; dodaje sintaksu za blokove datoteka, podržava referenciranje vanjskih datoteka; @rspress/plugin-preview i @rspress/plugin-playground podržavaju istovremenu upotrebu itd.
• Integracija Rslib: Sada možete odabrati Rspress kao alat za dokumentaciju prilikom korištenja create-rslib za stvaranje projekata biblioteka komponenti, brzo postavljajući stranice dokumentacije za komponente.

2.0 nove karakteristike

Potpuno nova tema

Zadana tema 2.0 doživjela je sistematsko ažuriranje, koju je cjelovito dizajnirao timski dizajner @Zovn Wei, s velikim poboljšanjima u vizualnim efektima i iskustvu čitanja, a svaki komponent može se neovisno zamijeniti, s visokom razinom prilagodljivosti.

Prilagodba teme

Prema razini prilagodbe od niske do visoke, postoje četiri načina prilagodbe tema: CSS varijable, BEM nazivi klasa, ESM ponovno izvođenje pokriva i ispuštanje komponenti.- CSS varijable: Nova tema otkriva više CSS varijabli, pokrivajući stilove za teme, blokove koda, početnu stranicu itd. Možete interaktivno pregledati i prilagoditi sve CSS varijable na stranici CSS varijabli, a nakon što pronađete zadovoljavajuću konfiguraciju, jednostavno je kopirajte za korištenje u projektu.

• BEM imena klasa: Ugrađeni komponenti sada koriste BEM nomenklaturu. Ovo je vrlo Old School izbor, ali je i naš promišljen odluka. Korisnici mogu precizno prilagoditi stilove putem CSS selektora, a HTML struktura je jasnija.
• ESM ponovno izvođenje preklapanja: Ako izmjene na CSS-u ne zadovoljavaju prilagođene zahtjeve, možete izvršiti dublje prilagodbe putem JS-a. U theme/index.tsx koristeći ESM ponovno izvođenje, možete preklopiti bilo koju ugrađenu komponentu Rspress-a.
• Eject komponenta: Možete koristiti novu rspress eject [component] komandu, koja će kopirati izvorni kod određene komponente u theme/components/ direktorij, gdje možete slobodno modificirati taj kod, čak i prepustiti AI da ga izmijeni, kako biste postigli duboku prilagodbu.

Navigacijska traka, bočna traka tag

Rspress 2.0 implementira Tag komponentu, sada možete koristiti tag atribut u frontmatter-u za UI označavanje u bočnoj ili navigacijskoj traci.

Ugrađena podrška za više jezika

U verziji 1.x, Rspress je imao samo ugrađeni engleski tekst, a ako koristite druge jezike kao što je zh, morali ste konfigurirati sav tekst, što je bilo prilično zamorno. Sada 2.0 tema ima ugrađene prijevode za više jezika kao što su zh, en, ja, ko, ru itd., a sustav će automatski izvršiti "Tree Shaking" prema jezičnoj konfiguraciji, pakirajući samo tekst i jezike koje koristite.

llms.txt podrška

Rspress sada integrira mogućnost generiranja llms.txt u core i implementira novu SSG-MD (Static Site Generation to Markdown, generiranje statičkog sajta u Markdown) sposobnost.

U front-end okvirima koji se dinamički renderiraju na bazi React-a, često postoji problem s teškoćom ekstrakcije statičnih informacija, a Rspress se suočava s istim izazovima. Rspress omogućava korisnicima da poboljšaju izražajnost dokumenata putem MDX fragmenata, React komponenti, Hooks i TSX ruta. Međutim, ti dinamički sadržaji se suočavaju s sljedećim problemima prilikom konverzije u Markdown tekst:

• Izravno davanje MDX-a AI-u uključuje veliku količinu buke sintakse koda i gubi sadržaj React komponenti.
• Pretvaranje HTML-a u Markdown često ne daje dobre rezultate, a kvaliteta informacija je teško osigurati.

Da bi se riješio ovaj problem, Rspress 2.0 uvodi SSG-MD značajku. Ovo je nova funkcionalnost koja je slična statičkom generiranju sajta (SSG), ali se razlikuje po tome što renderira vaše stranice kao Markdown datoteke, umjesto HTML datoteka, i generira llms.txt i llms-full.txt povezane datoteke.

Shiki kompajliranje za isticanje kod blokovaRspress 2.0 podrazumevano koristi Shiki za isticanje koda. U poređenju sa 1.x prism rešenjem za isticanje u vreme izvođenja, Shiki završava obradu isticanja u vreme kompajliranja.

• Podržava više tema, na primer, na stranici sa CSS varijablama možete interaktivno menjati i pregledati različite Shiki teme.
• Takođe, Shiki omogućava korišćenje prilagođenih transformatora za obogaćivanje pisanja, kao što su twoslash i drugi.
• Uključuje programske jezike po potrebi, ne povećavajući troškove izvođenja i veličinu paketa.
• Zasnovano na TextMate sintaksi, pruža tačno isticanje sintakse u skladu sa VS Code.

Povećanje performansi izgradnje

Rspress 2.0 je pokretan Rsbuild-om i Rspack 2.0 preview verzijom, dok je podrazumevano uključeno kompajliranje po potrebi i trajno keširanje.

Kompajliranje po potrebi

Podrazumevano je uključeno dev.lazyCompilation, tako da se stranica kompajlira samo kada je posetite, što značajno povećava brzinu pokretanja tokom razvoja, čak omogućavajući hladno pokretanje u milisekundama. Rspress takođe implementira strategiju pre-load-a za rute, tako da se ciljana stranica učitava unapred kada zadržite kursor iznad linka, u kombinaciji sa lazyCompilation pruža besprekorno iskustvo razvoja.

Trajno keširanje

2.0 takođe podrazumevano uključuje trajno keširanje, ponovo koristi rezultate prethodnog kompajliranja tokom brzog pokretanja, povećavajući brzinu izgradnje za 30%-60%. To znači da će brzina pokretanja nakon prvog izvođenja rspress dev ili rspress build biti značajno poboljšana.

Iskustvo razvoja dokumentacije

Podrazumevano uključena provera mrtvih linkova

Rspress 2.0 podrazumevano uključuje funkciju provere mrtvih linkova. Tokom procesa izgradnje, automatski će detektovati nevažeće linkove u dokumentaciji, pomažući vam da ih pravovremeno otkrijete i ispravite.

Blokovi koda iz datoteka

Možete koristiti file="./path/to/file" atribut za referenciranje spoljašnjih datoteka kao sadržaja blokova koda, održavajući primer koda u odvojenim datotekama.

preview fleksibilnija upotreba meta

@rspress/plugin-preview sada koristi meta atribut, što je fleksibilnije, a može se koristiti i u kombinaciji sa blokovima koda iz datoteka.

Rslib & Rspress

Kada koristite create-rslib za kreiranje projekta, sada možete izabrati Rspress alat. Ovo vam omogućava da brzo postavite prateći sajt za dokumentaciju dok razvijate biblioteku komponenti, za pisanje uputstava za korišćenje komponenti, prikazivanje API referenci ili real-time pregled efekata komponenti.

Više zvaničnih Rspress dodataka

Rspress 2.0 je dodao više zvaničnih dodataka:

• @rspress/plugin-algolia: podržava zamenu ugrađenog pretraživanja Rspress-a sa Algolia DocSearch
• @rspress/plugin-twoslash: dodaje tipiziranje za TypeScript blokove koda
• @rspress/plugin-llms: pruža mogućnost generisanja llms.txt za projekte koji ne podržavaju SSG i SSG-MD
• @rspress/plugin-sitemap: automatski generiše Sitemap datoteke za optimizaciju SEO

Promene koje donose prekid

Migracija sa Rspress 1.x

Ako ste korisnik 1.x projekta, pripremili smo detaljnu dokumentaciju za migraciju koja će vam pomoći da se nadogradite sa 1.x na 2.0. Možete direktno koristiti funkciju "Kopiraj Markdown" na stranici, i uneti je u vaš omiljeni kod agent (kao što je Claude Code itd.) da biste završili migraciju.### Node.js 与上游依赖版本要求

Rspress 2.0 zahtijeva Node.js verziju 20+, React verziju 18+.

Sljedeći korak

Objava Rspress 2.0 je samo nova tačka početka. Nakon ove objave, Rspress će nastaviti s iteracijama:

• Napredovanje ekološke integracije: Dublje povezivanje s Rslib, Rstest, pružajući integrisano iskustvo razvoja za front-end projekte i biblioteke komponenti.
• Istraživanje dublje integracije AI i dokumenata: Kao što su pametni odgovori, automatski sažetak itd.; unaprijediti SSG-MD kako bi bio stabilniji i lakši za korištenje.

Odmah koristite ili nadogradite na Rspress 2.0, doživite novo putovanje u razvoju dokumenata!

npm create rspress@latest