Rspress 2.0 Publikimi: Një përmirësim i ri për përvojën dhe AI

Ne jemi të lumtur të njoftojmë publikimin zyrtar të Rspress 2.0!

Rspress është një gjenerator i faqeve statike i bazuar në Rsbuild, i krijuar si një mjet dokumentacioni për zhvilluesit. Që nga publikimi i tij zyrtar në vitin 2023, Rspress 1.x ka kaluar nëpër 144 versione dhe ka pasur 125 kontribues që kanë marrë pjesë në zhvillimin e projektit. Një numër gjithnjë e më i madh zhvilluesish po zgjedhin Rspress, duke shfrytëzuar performancën e tij të lartë të kompilimit, rrugët e përcaktuara dhe parashikimin e bibliotekës së komponentëve për të ndërtuar faqe dokumentacioni të bukura dhe të besueshme.

Duke u bazuar në reagimet dhe sugjerimet e komunitetit, Rspress 2.0 ka bërë përparime në estetikën e temave, AI-native, përvojën e zhvillimit të dokumenteve, dhe përdorimin me Rslib.

Pse Rspress 2.0

Rspress 1.x ka zgjidhur problemin e performancës së kompilimit të kornizës së faqeve të dokumentacionit, por ende ka disa probleme që ndikojnë në përvojën kryesore si një mjet zhvillimi dokumentacioni. Versioni 2.0 nuk do të përqendrohet vetëm në përmirësimin e performancës së kompilimit, por gjithashtu do të fokusohet në aspekte të tjera të përvojës së faqeve të dokumentacionit:

• Stili i temës: një temë e re më e bukur si parazgjedhje, dhe ofron disa mënyra për personalizimin e temave, duke zgjidhur problemin e mungesës së një API të qëndrueshme për personalizimin e temave në 1.x.
• AI-native: Dokumentet jo vetëm që shërbejnë për lexuesit njerëzorë, por gjithashtu duhet të kuptohen dhe përdoren më mirë nga Agjentët. Rspress tani ka të integruar funksionin e gjenerimit llms.txt dhe SSG-MD të derivuar nga SSG, duke gjeneruar përmbajtje të lartë cilësie Markdown për Agjentët.
• Kompilim sipas kërkesës, nisje momentale: Aktivizimi i parazgjedhur i lazyCompilation, së bashku me funksionin e preload për burimet kur kalon mbi lidhjet, ndihmon në ndërtimin e skedarëve të nevojshëm vetëm kur vizitohen rrugët specifike, duke realizuar një nisje momentale pavarësisht nga madhësia e projektit.
• Shiki kodimi i theksuar: Integrimi i parazgjedhur i Shiki, duke përfunduar theksimin e sintaksës gjatë ndërtimit, mbështetje për kalimin e temave, zgjerimin e transformatorëve, si @rspress/plugin-twoslash, duke sjellë një efekt më të pasur në shfaqjen e blloqeve të kodit.
• Përvoja e zhvillimit të dokumenteve: Optimizimi i skedarëve nav.json, meta.json dhe të tjerë për HMR dhe shtimi i skemës json për sugjerimet e kodit në IDE; aktivizimi i parazgjedhur i funksionit të kontrollit të lidhjeve të vdekura; shtimi i sintaksës për blloqet e kodit të skedarëve, duke mbështetur referencat në skedarë të jashtëm; @rspress/plugin-preview dhe @rspress/plugin-playground mbështesin përdorimin e përbashkët etj.
• Integrimi i Rslib: Tani mund të zgjidhni Rspress si mjet dokumentacioni kur krijoni projekte të bibliotekës së komponentëve me create-rslib, duke ndihmuar në ndërtimin e shpejtë të faqeve të dokumentacionit për komponentët.

Karakteristikat e reja 2.0

Temë e re

Tema e re parazgjedhje 2.0 ka kaluar nëpër një përmirësim sistematik, e cila është dizajnuar nga dizajneri i ekipit @Zovn Wei, duke sjellë një përmirësim të madh në efektin vizual dhe përvojën e leximit, dhe çdo komponent mund të zëvendësohet në mënyrë të pavarur, duke ofruar një nivel të lartë personalizimi.

Personalizimi i temës

Sipas nivelit të personalizimit nga më i ulëti në më të lartin, ka katër mënyra për të personalizuar temën: variabla CSS, emra klasash BEM, ri-eksportimi ESM për mbulimin, dhe eject i komponentëve.- CSS variablat: Tema e re ekspozon më shumë CSS variabla, duke mbuluar ngjyrat e temës, blloqet e kodit, stilin e faqes kryesore etj. Mund të parashikoni dhe rregulloni të gjitha CSS variablat në mënyrë interaktive në faqen e CSS variablave, dhe pasi të gjeni konfigurimin e kënaqshëm, mund ta kopjoni drejtpërdrejt për ta përdorur në projektin tuaj.

• BEM emrat e klasave: Komponentët e ndërtuar tani përdorin standardin e emrave BEM. Kjo është një zgjedhje shumë Old School, por gjithashtu një vendim i menduar mirë nga ne. Përdoruesit mund të rregullojnë stilin me saktësi përmes selektorëve CSS, duke bërë strukturën HTML më të qartë.
• Riexportimi ESM: Nëse ndryshimet në CSS nuk përmbushin nevojat e personalizimit, mund të bëni një personalizim më të thellë përmes JS. Duke përdorur riexportimin ESM në theme/index.tsx, mund të mbuloni çdo komponent të ndërtuar të Rspress.
• Eject komponenti: Mund të përdorni komandën e re rspress eject [component], e cila do të kopjojë kodin burimor të komponentit të caktuar në direktorinë theme/components/, ku mund të modifikoni lirisht këto kode, madje t'i jepni drejtpërdrejt AI për t'i modifikuar, për të arritur një personalizim të thellë.

Navbar, tag sidebar

Rspress 2.0 ka implementuar komponentin Tag, tani mund të përdorni atributin tag në frontmatter për të bërë shënime UI në sidebar ose navbar.

Mbështetje e ndërtuar për shumë gjuhë

Në versionin 1.x, Rspress kishte vetëm tekstin në anglisht të ndërtuar, dhe nëse përdornit gjuhë të tjera si zh, duhej të konfiguroni të gjithë tekstin, duke e bërë përdorimin mjaft të ndërlikuar. Tani tema 2.0 ka tekstet e përkthimit të ndërtuara për shumë gjuhë si zh, en, ja, ko, ru etj., dhe sistemi do të kryejë automatikisht "Tree Shaking" sipas konfigurimit të gjuhës, duke paketuar vetëm tekstin dhe gjuhët që përdorni.

Mbështetje për llms.txt

Rspress tani ka integruar aftësinë për të gjeneruar llms.txt në bërthamë dhe ka realizuar një aftësi të re SSG-MD (Static Site Generation to Markdown, gjenerimi i Markdown për faqet statike).

Në kornizat e përparme që bazohen në React, shpesh ka probleme me nxjerrjen e informacionit statik, dhe Rspress përballet me të njëjtin sfidë. Rspress lejon përdoruesit të përmirësojnë shprehshmërinë e dokumenteve përmes segmenteve MDX, komponentëve React, Hooks dhe karakteristikave të rrugëve TSX. Por këto përmbajtje dinamike përballen me problemet e mëposhtme kur konvertohen në tekst Markdown:

• Të dhënat e drejtpërdrejta MDX që i jepen AI do të përmbajnë shumë zhurmë sintaksore të kodit dhe do të humbasin përmbajtjen e komponentëve React.
• Konvertimi i HTML në Markdown shpesh nuk jep rezultate të mira, cilësia e informacionit është e vështirë për t'u garantuar.

Për të zgjidhur këtë problem, Rspress 2.0 ka sjellë karakteristikën SSG-MD. Ky është një funksion i ri, i ngjashëm me gjenerimin e faqeve statike (SSG), por ndryshimi është se ai e rendit faqen tuaj si skedar Markdown, jo si skedar HTML, dhe gjeneron skedarët llms.txt dhe llms-full.txt përkatës.

Shiki kompilimi i kodit të bllokut të theksuarRspress 2.0 përdor Shiki për theksimin e kodit si parazgjedhje. Krahasuar me zgjidhjen e theksimit në kohë reale të prism 1.x, Shiki përfundon përpunimin e theksimit në kohë kompilimi.

• Mbështet tema të ndryshme, për shembull, në faqen e variablave CSS, mund të kaloni dhe parashikoni tematikat e ndryshme Shiki në mënyrë interaktive.
• Po ashtu, Shiki lejon përdorimin e transformuesve të personalizuar për të pasuruar shkrimin, si twoslash etj.
• Shtoni gjuhët e programimit sipas nevojës, pa rritur ngarkesën në kohë ekzekutimi dhe madhësinë e paketës.
• Bazohet në sintaksën e TextMate për të realizuar theksim të saktë të sintaksës në përputhje me VS Code.

Përmirësimi i performancës së ndërtimit

Rspress 2.0 është e drejtuar nga Rsbuild dhe Rspack 2.0 në versionin e tij të parashikimit, dhe gjithashtu ka aktivizuar parazgjedhjen e kompilimit sipas nevojës dhe cache të qëndrueshëm.

Kompili sipas nevojës

Parazgjedhja e dev.lazyCompilation është e aktivizuar, vetëm kur vizitoni një faqe, ajo faqe do të kompilohet, duke rritur ndjeshëm shpejtësinë e nisjes së zhvillimit, madje duke arritur nisje të ftohtë në milisekonda. Rspress gjithashtu implementon strategjinë e preload për rrugët, kur maus kalon mbi lidhjen, do të ngarkohet paraprakisht faqja e destinacionit të rrugës, duke kombinuar lazyCompilation për të realizuar një përvojë zhvillimi pa humbje.

Cache e qëndrueshme

2.0 gjithashtu ka aktivizuar parazgjedhjen e cache të qëndrueshëm, duke ripërdorur rezultatet e kompilimit të fundit në nisjet e nxehta, duke rritur shpejtësinë e ndërtimit me 30%-60%. Kjo do të thotë se pas ekzekutimit të parë të rspress dev ose rspress build, shpejtësia e mëvonshme e nisjes do të rritet ndjeshëm.

Përvoja e zhvillimit të dokumentacionit

Aktivizimi i kontrollit të lidhjeve të vdekura

Rspress 2.0 ka aktivizuar parazgjedhjen e funksionit të kontrollit të lidhjeve të vdekura. Gjatë procesit të ndërtimit, do të kontrollohen automatikisht lidhjet e pavlefshme në dokument, duke ndihmuar në zbuluar dhe riparuar në kohë.

Blloqet e kodit të skedarëve

Mund të përdorni atributin file="./path/to/file" për të referuar skedarë të jashtëm si përmbajtje të blloqeve të kodit, duke mbajtur kodin e shembujve në skedarë të veçantë.

Përdorimi më fleksibël i meta për preview

@rspress/plugin-preview tani përdor atributin meta, duke e bërë më fleksibël, gjithashtu mund të kombinohet me blloqet e kodit të skedarëve.

Rslib & Rspress

Kur përdorni create-rslib për të krijuar projekte, tani mund të zgjidhni mjetin Rspress. Kjo ju lejon të ndërtoni shpejt një faqe dokumentacioni për të shkruar udhëzime për përdorimin e komponentëve, për të shfaqur referencat e API-së, ose për të parashikuar në kohë reale efektet e komponentëve.

Më shumë plugina zyrtare të Rspress

Rspress 2.0 ka shtuar disa plugina zyrtare:

• @rspress/plugin-algolia: mbështet zëvendësimin e kërkimit të integruar të Rspress me Algolia DocSearch
• @rspress/plugin-twoslash: shton sugjerime për tipet në blloqet e kodit TypeScript
• @rspress/plugin-llms: ofron aftësinë për të gjeneruar llms.txt për projekte që nuk mbështesin SSG dhe SSG-MD
• @rspress/plugin-sitemap: gjeneron automatikisht skedarë Sitemap për optimizimin e SEO

Ndryshime të rëndësishme

Migrimi nga Rspress 1.x

Nëse jeni përdorues i projekteve 1.x, ne kemi përgatitur një dokument të detajuar migrimi për t'ju ndihmuar të përmirësoni nga 1.x në 2.0. Mund ta përdorni funksionin "Kopjo Markdown" në faqe për ta futur atë në agjentin tuaj të kodimit të zakonshëm (si Claude Code etj.) për të përfunduar migrimin.### Node.js dhe kërkesat për versionet e varësive upstream

Rspress 2.0 kërkon versionin 20+ të Node.js, versionin 18+ të React.

Hapi tjetër

Lëshimi i Rspress 2.0 është vetëm një pikënisje e re. Pas këtij lëshimi, Rspress do të vazhdojë të iterojë:

• Avancimi i integrimit të ekosistemit: Të kombinohet më thellë me Rslib, Rstest, duke ofruar një përvojë të integruar zhvillimi për projektet e front-end dhe projektet e bibliotekës së komponenteve.
• Eksplorimi i integrimit më të thellë të AI dhe dokumenteve: Siç janë pyetje dhe përgjigje inteligjente, përmbledhje automatike etj.; përmirësimi i SSG-MD për ta bërë atë më të qëndrueshëm dhe më të lehtë për t'u përdorur.

Përdorni tani ose përmirësoni në Rspress 2.0, për të përjetuar një udhëtim të ri në zhvillimin e dokumenteve!

npm create rspress@latest