Rspress 2.0 lansat: o actualizare completă orientată spre experiență și AI

Suntem încântați să anunțăm lansarea oficială a Rspress 2.0!

Rspress este un generator de site-uri statice bazat pe Rsbuild, creat special pentru dezvoltatori ca un instrument de documentare. De la lansarea sa oficială în 2023, Rspress 1.x a avut 144 de versiuni iterativ, cu 125 de contribuabili care au participat la dezvoltarea proiectului. Tot mai mulți dezvoltatori aleg Rspress, profitând de performanța sa de compilare eficientă, rutarea convențională și previzualizarea bibliotecii de componente pentru a construi site-uri de documentare atractive și fiabile.

Pe baza feedback-ului și sugestiilor din comunitate, Rspress 2.0 a avansat în domeniile esteticii temelor, AI-native, experienței de dezvoltare a documentelor, utilizării împreună cu Rslib și altele.

De ce Rspress 2.0

Rspress 1.x a rezolvat problema performanței de compilare a cadrelor de documentare, dar încă există unele probleme care afectează experiența de bază ca instrument de dezvoltare a documentelor. Versiunea 2.0 nu se va limita doar la căutarea performanței de compilare, ci se va concentra și pe alte aspecte ale experienței site-ului de documentare:

• Stilul temei: o temă implicită mai atractivă, care oferă mai multe modalități de personalizare a temei, rezolvând problema lipsei unei API stabile pentru personalizarea temelor în 1.x.
• AI-native: documentele nu servesc doar cititorilor umani, ci trebuie să fie înțelese și utilizate mai bine de către agenți. Rspress include acum generarea llms.txt și funcționalitatea SSG-MD derivată din SSG, generând conținut Markdown de înaltă calitate pentru a fi citit de agenți.
• Compilare la cerere, pornire instantanee: activarea implicită a lazyCompilation, împreună cu funcția de preload a resurselor atunci când se face hover pe linkuri, construiește fișierele necesare doar atunci când se accesează rute specifice, realizând o pornire instantanee indiferent de dimensiunea proiectului.
• Subliniere de cod Shiki: integrat implicit Shiki, care finalizează sublinierea sintaxei în timpul construcției, suportând schimbarea temelor, extensii transformer, cum ar fi @rspress/plugin-twoslash, aducând efecte de prezentare mai bogate pentru blocurile de cod.
• Experiența de dezvoltare a documentelor: optimizarea HMR pentru fișiere precum nav.json, meta.json și adăugarea unui schema json pentru sugestiile de cod în IDE; activarea implicită a funcției de verificare a linkurilor moarte; adăugarea sintaxei blocurilor de cod pentru fișiere, suportând referințe la fișiere externe; @rspress/plugin-preview și @rspress/plugin-playground pot fi utilizate simultan etc.
• Integrarea Rslib: acum este posibil să alegeți Rspress ca instrument de documentare atunci când utilizați create-rslib pentru a crea un proiect de bibliotecă de componente, construind rapid un site de documentare pentru componente.

Caracteristici noi 2.0

Temă complet nouă

Tema implicită 2.0 a primit o actualizare sistematică, fiind proiectată de designerul echipei @Zovn Wei, având îmbunătățiri semnificative în ceea ce privește efectele vizuale și experiența de citire, iar fiecare componentă poate fi înlocuită independent, având un grad ridicat de personalizare.

Personalizarea temei

În funcție de gradul de personalizare, există patru modalități de personalizare a temei: variabile CSS, nume de clasă BEM, re-export ESM și ejectarea componentelor.- Variabile CSS: Noua temă a expus mai multe variabile CSS, acoperind stilurile pentru culoarea temei, blocurile de cod, pagina principală etc. Poți previzualiza și ajusta interactiv toate variabilele CSS pe pagina variabilelor CSS, iar după ce găsești configurația dorită, o poți copia direct în proiectul tău.

• Nume de clasă BEM: Componentele încorporate folosesc acum standardul de denumire BEM. Aceasta este o alegere foarte Old School, dar este și o decizie bine gândită. Utilizatorii pot ajusta stilurile cu precizie prin selecția CSS, iar structura HTML devine mai clară.
• Re-export ESM: Dacă modificările CSS nu satisfac cerințele de personalizare, poți efectua personalizări mai profunde prin JS. În theme/index.tsx, folosind re-exportul ESM, poți suprascrie orice componentă încorporată Rspress.
• Eject componentă: Poți folosi comanda nouă rspress eject [component], care va copia codul sursă al componentei specificate în directorul theme/components/, permițându-ți să modifici liber acest cod, chiar să-l predai AI pentru modificări, pentru a realiza personalizări profunde.

Tag-uri pentru bara de navigare și bara laterală

Rspress 2.0 a implementat componenta Tag, acum poți folosi atributul tag din frontmatter pentru a marca UI în bara laterală sau în bara de navigare.

Suport încorporat pentru mai multe limbi

În versiunea 1.x, Rspress avea doar text în limba engleză încorporat, iar dacă foloseai alte limbi, cum ar fi zh, trebuia să configurezi toate textele, ceea ce era destul de complicat. Acum, tema 2.0 include texte traduse în mai multe limbi, cum ar fi zh, en, ja, ko, ru etc., iar sistemul va efectua automat "Tree Shaking" în funcție de configurația limbii, pachetând doar textele și limbile pe care le folosești.

Suport pentru llms.txt

Rspress a integrat acum capacitatea de generare llms.txt în core și a implementat o nouă capacitate SSG-MD (Generare Statică a Site-ului în Markdown).

În cadrul cadrelor frontale bazate pe React, există adesea probleme cu extragerea informațiilor statice, iar Rspress se confruntă cu aceeași provocare. Rspress permite utilizatorilor să îmbunătățească expresivitatea documentelor prin fragmente MDX, componente React, Hooks și rute TSX. Dar aceste conținuturi dinamice se confruntă cu următoarele probleme atunci când sunt convertite în text Markdown:

• Introducerea directă a MDX în AI va conține mult zgomot de sintaxă de cod și va pierde conținutul componentelor React.
• Conversia HTML în Markdown adesea nu produce rezultate bune, iar calitatea informației este greu de garantat.

Pentru a rezolva această problemă, Rspress 2.0 a introdus caracteristica SSG-MD. Aceasta este o funcționalitate complet nouă, similară cu generarea statică a site-ului (SSG), dar diferită prin faptul că îți va reda paginile ca fișiere Markdown, nu ca fișiere HTML, generând fișierele llms.txt și llms-full.txt.

Evidențierea blocurilor de cod în timpul compilării ShikiRspress 2.0 folosește în mod implicit Shiki pentru evidențierea codului. Comparativ cu soluția de evidențiere în timp real prism din 1.x, Shiki finalizează procesarea evidențierii la compilare.

• Suportă mai multe stiluri de teme, de exemplu, pe pagina variabilelor CSS poți comuta și previzualiza interactiv diferite teme Shiki.
• De asemenea, Shiki permite utilizarea de transformatoare personalizate pentru a îmbogăți scrierea, cum ar fi twoslash etc.
• Importă limbaje de programare la cerere, fără a crește costurile de rulare și dimensiunea pachetului.
• Bazat pe sintaxa TextMate, oferă evidențiere sintactică precisă, consistentă cu VS Code.

Îmbunătățiri ale performanței de construire

Rspress 2.0 este alimentat de versiunile preview Rsbuild și Rspack 2.0, având în mod implicit compilarea la cerere și cache-ul persistent activate.

Compilare la cerere

Compilarea dev.lazyCompilation este activată în mod implicit, astfel încât pagina va fi compilată doar atunci când o accesezi, îmbunătățind semnificativ viteza de pornire a dezvoltării, realizând chiar porniri la nivel de milisecunde. Rspress a implementat, de asemenea, o strategie de preîncărcare a rutelor, care va preîncărca pagina rutei țintă atunci când mouse-ul este deasupra linkului, combinată cu lazyCompilation pentru a oferi o experiență de dezvoltare fără pierderi.

Cache persistent

2.0 activează de asemenea cache-ul persistent în mod implicit, reutilizând rezultatele compilării anterioare în pornirile calde, îmbunătățind viteza de construire cu 30%-60%. Aceasta înseamnă că, după prima rulare a rspress dev sau rspress build, viteza de pornire ulterioară va fi semnificativ îmbunătățită.

Experiența de dezvoltare a documentației

Verificarea legăturilor moarte activată în mod implicit

Rspress 2.0 activează în mod implicit funcția de verificare a legăturilor moarte. În timpul procesului de construire, va detecta automat linkurile invalide din document, ajutându-te să le descoperi și să le repari la timp.

Blocuri de cod din fișiere

Poți utiliza atributul file="./path/to/file" pentru a face referire la fișiere externe ca și conținut al blocurilor de cod, menținând codul de exemplu într-un fișier separat.

Utilizarea mai flexibilă a meta în preview

@rspress/plugin-preview folosește acum atributul meta, fiind mai flexibil, și poate fi combinat cu blocurile de cod din fișiere.

Rslib & Rspress

Când folosești create-rslib pentru a crea un proiect, acum poți alege instrumentul Rspress. Acest lucru îți permite să construiești rapid un site de documentație asociat în timp ce dezvolți o bibliotecă de componente, pentru a scrie instrucțiuni de utilizare pentru componente, a prezenta referințe API sau a previzualiza în timp real efectele componentelor.

Mai multe pluginuri oficiale Rspress

Rspress 2.0 a adăugat mai multe pluginuri oficiale:

• @rspress/plugin-algolia: suportă înlocuirea căutării încorporate Rspress cu Algolia DocSearch
• @rspress/plugin-twoslash: adaugă sugestii de tip pentru blocurile de cod TypeScript
• @rspress/plugin-llms: oferă capacitatea de generare a llms.txt pentru proiecte care nu suportă SSG și SSG-MD
• @rspress/plugin-sitemap: generează automat fișiere Sitemap, pentru a optimiza SEO

Schimbări majore

Migrarea de la Rspress 1.x

Dacă ești utilizator al proiectului 1.x, am pregătit un document detaliat de migrare pentru a te ajuta să treci de la 1.x la 2.0. Poți folosi direct funcția "Copiază Markdown" din pagină, introducând-o în agentul tău de codare obișnuit (cum ar fi Claude Code etc.) pentru a finaliza migrarea.### Node.js și cerințele versiunilor de dependență superioare

Rspress 2.0 necesită versiunea Node.js 20+, versiunea React 18+.

Pasul următor

Lansarea Rspress 2.0 este doar un nou început. După această lansare, Rspress va continua să evolueze:

• Promovarea integrării ecologice: integrare mai profundă cu Rslib, Rstest, oferind o experiență de dezvoltare integrată pentru proiectele frontend și bibliotecile de componente.
• Explorarea integrării mai profunde a AI cu documentele: cum ar fi întrebări inteligente, rezumate automate etc.; îmbunătățirea SSG-MD pentru a-l face stabil și mai ușor de utilizat.

Folosește sau actualizează acum la Rspress 2.0, pentru a experimenta o nouă călătorie în dezvoltarea documentelor!

npm create rspress@latest