Rspress 2.0 objavljen: potpuno novo ažuriranje usmjereno na iskustvo i AI
Rspress 2.0 objavljen: potpuno novo ažuriranje usmjereno na iskustvo i AI
Sretni smo što možemo objaviti službeno izdanje Rspress 2.0!
Rspress je statički generator web stranica temeljen na Rsbuild, alat za dokumentaciju dizajniran posebno za programere. Od službenog izdanja 2023. godine, Rspress 1.x je doživio 144 verzije i uključuje 125 suradnika koji su sudjelovali u razvoju projekta. Sve više programera bira Rspress, koristeći njegove visoke performanse kompilacije, konvencionalno usmjeravanje i pregled biblioteke komponenti za izradu lijepih i pouzdanih dokumentacijskih stranica.
Na temelju povratnih informacija i prijedloga zajednice, Rspress 2.0 je napredovao u estetici tema, AI-native, iskustvu razvoja dokumentacije, korištenju s Rslib i drugim aspektima.
Zašto Rspress 2.0
Rspress 1.x je već riješio problem performansi kompilacije okvira za dokumentacijske stranice, ali još uvijek postoje neki problemi koji utječu na osnovno iskustvo kao alata za razvoj dokumentacije. Verzija 2.0 ne fokusira se samo na performanse kompilacije, već i na druge aspekte iskustva dokumentacijske stranice:
- Stilovi tema: 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 i Agent treba bolje razumjeti i koristiti. Rspress sada ima ugrađenu funkcionalnost za generiranje llms.txt i SSG-MD izvedenih iz SSG-a, generirajući visokokvalitetan Markdown sadržaj za čitanje od strane Agenta.
- Kompilacija na zahtjev, trenutni start: Zadano omogućena lazyCompilation, uz funkcionalnost pre-load resursa prilikom hovera na linkove, gradi potrebne datoteke samo kada se pristupi određenim putanjama, omogućujući trenutni start bez obzira na veličinu projekta.
- Shiki isticanje koda: Zadano integrira Shiki, završava isticanje sintakse tijekom izgradnje, podržava promjenu tema, proširenja transformatora, poput @rspress/plugin-twoslash, donoseći bogatije prikaze 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 veza; dodaje sintaksu za blokove koda, 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 dokumentacijske stranice za komponente.
Nove značajke 2.0
Potpuno nova tema
Zadana tema 2.0 doživjela je sustavno ažuriranje, koju je cjelovito dizajnirao timski dizajner @Zovn Wei, s velikim poboljšanjem u vizualnom učinku i iskustvu čitanja, a svaki komponent može se neovisno zamijeniti, pružajući visoku razinu prilagodljivosti.
Prilagodba tema
Prema razini prilagodbe od niske do visoke, postoje četiri načina prilagodbe tema: CSS varijable, BEM nazivi klasa, ESM ponovno izvođenje pokriva, komponenta eject.- CSS varijable: Nova tema izlaže više CSS varijabli, pokrivajući stilove 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 nazivi klasa: Ugrađeni komponenti sada koriste BEM nazivnu konvenciju. Ovo je vrlo Old School izbor, ali je također naš promišljen odluka. Korisnici mogu precizno prilagoditi stilove putem CSS selektora, a HTML struktura je jasnija.
- ESM ponovna izvozna preklapanja: Ako izmjene na CSS-u ne zadovoljavaju prilagodbene potrebe, možete izvršiti dublje prilagodbe putem JS-a. U theme/index.tsx koristeći ESM ponovni izvoz, možete preklapati bilo koju ugrađenu komponentu Rspress-a.
- Eject komponenti: Možete koristiti potpuno novu rspress eject [component] naredbu, 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 višelingvalna podrška
U verziji 1.x, Rspress je imao samo ugrađeni engleski tekst, a ako se koriste drugi jezici poput zh, svi tekstovi su morali biti konfigurirani, što je bilo prilično zamorno. Sada 2.0 tema ugrađuje prijevode na više jezika, uključujući 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 temelju React-a, često postoji problem s teškoćom ekstrakcije statičnih informacija, a Rspress se suočava s istim izazovima. Rspress omogućuje korisnicima da poboljšaju izražajnost dokumenata putem MDX fragmenata, React komponenti, Hooks-a i TSX ruta. Međutim, ti dinamički sadržaji suočavaju se s sljedećim problemima prilikom pretvaranja u Markdown tekst:
- Izravno davanje MDX-a AI-u uključuje mnogo sintaktičkog šuma koda i gubi sadržaj React komponenti
- Pretvaranje HTML-a u Markdown često ne daje dobre rezultate, a kvaliteta informacija je teško zajamčena
Kako bi se riješio ovaj problem, Rspress 2.0 uvodi SSG-MD značajku. Ovo je potpuno nova funkcionalnost koja je slična generiranju statičkog sajta (SSG), ali se razlikuje po tome što renderira vaše stranice kao Markdown datoteke, a ne HTML datoteke, te generira llms.txt i llms-full.txt povezane datoteke.
Shiki kompajliranje za isticanje kod blokovaRspress 2.0 zadano koristi Shiki za isticanje koda. U usporedbi s 1.x rješenjem za isticanje koda prism, Shiki završava obradu isticanja u vrijeme kompilacije.
- Podržava razne teme, na primjer, na stranici s CSS varijablama možete interaktivno prebacivati i pregledavati različite Shiki teme.
- Također, Shiki omogućuje korištenje prilagođenih transformatora za proširenje pisanja, poput twoslash itd.
- Uključuje programske jezike po potrebi, ne povećavajući troškove vremena izvođenja i veličinu paketa.
- Temelji se na TextMate sintaksi koja osigurava točno isticanje sintakse u skladu s VS Code.
Poboljšanje performansi izgradnje
Rspress 2.0 temelji se na Rsbuild i Rspack 2.0 preglednoj verziji, a prema zadanim postavkama omogućuje kompilaciju po potrebi i trajno predmemoriranje.
Kompilacija po potrebi
Prema zadanim postavkama omogućena je dev.lazyCompilation, tako da se stranica kompilira samo kada joj pristupite, što znatno poboljšava brzinu pokretanja tijekom razvoja, čak omogućujući hladno pokretanje u milisekundama. Rspress također implementira strategiju pre-loadinga za rute, tako da se ciljana stranica unaprijed učitava kada zadržite pokazivač miša iznad veze, u kombinaciji s lazyCompilation za besprijekorno iskustvo razvoja.
Trajno predmemoriranje
2.0 također prema zadanim postavkama omogućuje trajno predmemoriranje, ponovno koristeći rezultate prethodne kompilacije tijekom vrućeg pokretanja, povećavajući brzinu izgradnje za 30%-60%. To znači da će brzina pokretanja nakon prvog pokretanja rspress dev ili rspress build biti znatno poboljšana.
Iskustvo razvoja dokumentacije
Prema zadanim postavkama omogućena provjera mrtvih veza
Rspress 2.0 prema zadanim postavkama omogućuje provjeru mrtvih veza. Tijekom procesa izgradnje automatski će provjeriti nevažeće veze u dokumentu, pomažući vam da ih pravovremeno otkrijete i ispravite.
Datotečni blokovi koda
Možete koristiti file="./path/to/file" atribut za referenciranje vanjskih datoteka kao sadržaja blokova koda, održavajući primjer koda u zasebnim datotekama.
Fleksibilnija upotreba meta za preview
@rspress/plugin-preview sada koristi meta atribut, što je fleksibilnije, a može se koristiti i u kombinaciji s datotečnim blokovima koda.
Rslib & Rspress
Kada koristite create-rslib za stvaranje projekta, sada možete odabrati Rspress alat. To vam omogućuje brzo postavljanje prateće dokumentacijske stranice dok razvijate biblioteku komponenti, za pisanje uputa za korištenje komponenti, prikaz API referenci ili pregled komponenti u stvarnom vremenu.
Više službenih Rspress dodataka
Rspress 2.0 dodao je nekoliko službenih dodataka:
- @rspress/plugin-algolia: podržava zamjenu ugrađenog pretraživanja Rspress-a s Algolia DocSearch
- @rspress/plugin-twoslash: dodaje tipovne savjete za TypeScript blokove koda
- @rspress/plugin-llms: pruža mogućnost generiranja llms.txt za projekte koji ne podržavaju SSG i SSG-MD
- @rspress/plugin-sitemap: automatski generira Sitemap datoteke za optimizaciju SEO-a
Prekidi promjena
Migracija s Rspress 1.x
Ako ste korisnik projekta 1.x, pripremili smo detaljnu dokumentaciju za migraciju koja će vam pomoći da nadogradite s 1.x na 2.0. Možete izravno koristiti funkciju "Kopiraj Markdown" na stranici i unijeti je svom uobičajenom agentu za kodiranje (poput Claude Code itd.) kako biste završili migraciju.### Node.js i zahtjevi za verzije ovisnosti
Rspress 2.0 zahtijeva Node.js verziju 20+, React verziju 18+.
Sljedeći koraci
Objava Rspress 2.0 je samo nova početna točka. Nakon ove objave, Rspress će se kontinuirano razvijati:
- Napredovanje ekološke integracije: dublja integracija s Rslib, Rstest, pružajući integrirano iskustvo razvoja za projekte frontenda i biblioteke komponenti.
- Istraživanje dublje integracije AI i dokumentacije: kao što su inteligentno odgovaranje, automatski sažetak itd.; poboljšanje SSG-MD kako bi postao stabilniji i lakši za korištenje.
npm create rspress@latest
