Rspress 2.0 utgitt: En ny oppgradering rettet mot opplevelse og AI

Vi er glade for å kunngjøre den offisielle utgivelsen av Rspress 2.0!

Rspress er en statisk nettstedgenerator basert på Rsbuild, laget for utviklere som et dokumentasjonsverktøy. Siden den offisielle utgivelsen i 2023 har Rspress 1.x hatt 144 versjoner og 125 bidragsytere har deltatt i prosjektutviklingen. Flere og flere utviklere velger Rspress for å bygge vakre og pålitelige dokumentasjonsnettsteder, takket være dens effektive kompilering, konvensjonsbasert ruting og komponentbibliotek forhåndsvisning.

Basert på tilbakemeldinger og forslag fra fellesskapet, har Rspress 2.0 gjort fremskritt innen temaets estetikk, AI-native, dokumentasjonsutviklingsopplevelse, og bruk sammen med Rslib.

Hvorfor Rspress 2.0

Rspress 1.x har allerede løst problemene med kompileringseffektivitet for dokumentasjonsrammeverket, men det er fortsatt noen problemer som påvirker den kjerneopplevelsen som et dokumentasjonsverktøy. Versjon 2.0 vil ikke bare fokusere på kompileringseffektivitet, men også på andre aspekter av dokumentasjonsopplevelsen:

• Tema stil: Et mer estetisk tiltalende standardtema, med flere tilpassede temaalternativer, som løser problemet med mangel på stabil API for tema tilpasning i 1.x.
• AI-native: Dokumenter må ikke bare tjene menneskelige lesere, men også bli bedre forstått og brukt av agenter. Rspress har nå innebygd llms.txt-generering og SSG-MD-funksjoner avledet fra SSG, som genererer høykvalitets Markdown-innhold for agenter å lese.
• Kompilering etter behov, øyeblikkelig oppstart: Standard aktivering av lazyCompilation, kombinert med forhåndslasting av ressurser ved hover over lenker, bygger nødvendige filer kun når spesifikke ruter besøkes, noe som gjør at dev kan starte øyeblikkelig uansett prosjektstørrelse.
• Shiki kodefremheving: Standard integrert Shiki, som fullfører syntaksfremheving under bygging, støtter temasvitsjing, transformer-utvidelser, som @rspress/plugin-twoslash, og gir en rikere visning av kodeblokker.
• Dokumentasjonsutviklingsopplevelse: Optimalisering av HMR for nav.json, meta.json og andre filer, samt ny json-schema for kodehint i IDE; standard aktivering av døde lenker sjekk; ny filkodeblokksyntaks som støtter referanser til eksterne filer; @rspress/plugin-preview og @rspress/plugin-playground kan brukes samtidig, osv.
• Rslib-integrasjon: Nå kan du velge Rspress som dokumentasjonsverktøy når du bruker create-rslib for å opprette komponentbiblioteksprosjekter, og raskt bygge dokumentasjonsnettsteder for komponenter.

2.0 nye funksjoner

Helt nytt tema

2.0 standardtema har fått en systematisk oppgradering, designet av teamdesigner @Zovn Wei, med betydelig forbedring i visuell effekt og leseopplevelse, og hver komponent kan byttes ut uavhengig, noe som gir høy grad av tilpasning.

Tematilpasning

I henhold til tilpasningsnivå fra lav til høy, er det fire måter å tilpasse temaet på: CSS-variabler, BEM-klassenavn, ESM-reeksportoverskrivning, og komponentuttrekking.- CSS variabler: Det nye temaet eksponerer flere CSS variabler, som overskriver tema farger, kodeblokker, hjemmesidestiler osv. Du kan interaktivt forhåndsvise og justere alle CSS variabler på CSS variabler siden, og når du finner en tilfredsstillende konfigurasjon, kan du kopiere den direkte til prosjektet ditt.

• BEM klassennavn: Innebygde komponenter bruker nå BEM navngivningskonvensjonen. Dette er et ganske gammeldags valg, men også en gjennomtenkt beslutning fra vår side. Brukere kan presist justere stilen ved hjelp av CSS-velgere, og HTML-strukturen blir klarere.
• ESM gjeneksport overskrivning: Hvis endringer på CSS ikke oppfyller tilpasningsbehovene, kan du gjøre dypere tilpasninger ved hjelp av JS. Ved å bruke ESM gjeneksport i theme/index.tsx, kan du overskrive hvilken som helst innebygd komponent i Rspress.
• Komponent eject: Du kan bruke den helt nye rspress eject [komponent] kommandoen, som vil kopiere kildekoden til den spesifiserte komponenten til theme/components/ katalogen, slik at du fritt kan endre denne koden, eller til og med overlate den til AI for å oppnå dyp tilpasning.

Navigasjonslinje, sidepanel tag

Rspress 2.0 implementerer Tag komponenten, og nå kan du bruke tag attributtet i frontmatter for UI merking i sidepanelet eller navigasjonslinjen.

Innebygd flerspråklig støtte

I 1.x versjonen hadde Rspress kun innebygd engelsk tekst, og hvis du brukte andre språk som zh, måtte du konfigurere all tekst, noe som var ganske omstendelig. Nå har 2.0 temaet innebygd oversettelsestekst for flere språk som zh, en, ja, ko, ru osv., og systemet vil automatisk utføre "Tree Shaking" basert på språkinnstillingen, og bare pakke teksten og språket du bruker.

llms.txt støtte

Rspress har nå integrert llms.txt genereringskapasitet i kjernen, og implementert en ny SSG-MD (Static Site Generation to Markdown, statisk nettsted Markdown generering) kapasitet.

I frontend rammer basert på React, er det ofte vanskelig å trekke ut statisk informasjon, og Rspress står overfor den samme utfordringen. Rspress lar brukere forbedre dokumentets uttrykksevne ved hjelp av MDX fragmenter, React komponenter, Hooks og TSX ruter. Men disse dynamiske innholdene står overfor følgende problemer når de konverteres til Markdown tekst:

• Å gi MDX direkte til AI vil inneholde mye kode-syntaks støy, og miste innholdet i React komponentene.
• Å konvertere HTML til Markdown gir ofte dårlige resultater, og informasjonens kvalitet er vanskelig å garantere.

For å løse dette problemet, introduserer Rspress 2.0 SSG-MD funksjonen. Dette er en helt ny funksjon, som ligner på statisk nettsted generering (SSG), men forskjellen er at den renderer siden din som Markdown filer, i stedet for HTML filer, og genererer llms.txt og llms-full.txt relaterte filer.

Shiki kompilering av kodeblokker høydepunktRspress 2.0 bruker som standard Shiki for kodefremheving. Sammenlignet med 1.x sin prism-runtime fremhevelsesløsning, fullfører Shiki fremheving under kompilering.

• Støtter flere temaer, for eksempel kan du interaktivt bytte og forhåndsvise forskjellige Shiki-temaer på CSS-variabelsiden.
• Samtidig tillater Shiki bruk av tilpassede transformatorer for å berike skrivingen, som twoslash osv.
• Importerer programmeringsspråk etter behov, uten å øke kjøretidskostnader og pakkestørrelse.
• Basert på TextMate-syntaks for å oppnå nøyaktig syntaksfremheving som er konsistent med VS Code.

Forbedret byggetid

Rspress 2.0 er drevet av Rsbuild og Rspack 2.0 forhåndsvisning, og har som standard aktivert on-demand kompilering og vedvarende cache.

On-demand kompilering

Som standard er dev.lazyCompilation aktivert, noe som betyr at en side kun blir kompilert når du besøker den, noe som betydelig øker utviklingsstarttiden, og til og med oppnår millisekund kaldstart. Rspress implementerer også en preload-strategi for ruting, hvor mål-rutepagen forhåndslastes når musen svever over lenken, kombinert med lazyCompilation for å gi en tapfri utviklingsopplevelse.

Vedvarende cache

2.0 har også som standard aktivert vedvarende cache, som gjenbruker resultatene fra forrige kompilering under varm start, noe som øker byggetiden med 30%-60%. Dette betyr at etter første gang du kjører rspress dev eller rspress build, vil påfølgende oppstartstider være betydelig forbedret.

Utviklingsopplevelse for dokumentasjon

Standard aktivert sjekk for døde lenker

Rspress 2.0 har som standard aktivert sjekk for døde lenker. Under byggeprosessen vil den automatisk oppdage ugyldige lenker i dokumentasjonen, og hjelpe deg med å oppdage og fikse dem i tide.

Filkodeblokker

Du kan bruke file="./path/to/file"-attributtet for å referere til eksterne filer som innholdet i kodeblokker, og holde eksempel-koden i separate filer.

preview mer fleksibel meta-bruk

@rspress/plugin-preview bruker nå meta-attributtet, noe som gir mer fleksibilitet, og kan også kombineres med filkodeblokker.

Rslib & Rspress

Når du bruker create-rslib for å opprette prosjekter, kan du nå velge Rspress-verktøyet. Dette lar deg raskt sette opp en tilhørende dokumentasjonsnettsted mens du utvikler komponentbiblioteket, for å skrive bruksanvisninger for komponenter, vise API-referanser, eller forhåndsvise komponenteffekter i sanntid.

Flere offisielle Rspress-plugins

Rspress 2.0 har lagt til flere offisielle plugins:

• @rspress/plugin-algolia: Støtter å erstatte Rspress sin innebygde søkefunksjon med Algolia DocSearch
• @rspress/plugin-twoslash: Legger til typehint for TypeScript-kodeblokker
• @rspress/plugin-llms: Gir llms.txt-genereringskapasitet for prosjekter som ikke støtter SSG og SSG-MD
• @rspress/plugin-sitemap: Genererer automatisk Sitemap-filer for å optimalisere SEO

Breaking changes

Migrering fra Rspress 1.x

Hvis du er bruker av 1.x-prosjekter, har vi forberedt et detaljert migreringsdokument for å hjelpe deg med å oppgradere fra 1.x til 2.0. Du kan direkte bruke "Kopier Markdown"-funksjonen på siden, og skrive det inn til din vanlige kodeagent (som Claude Code osv.) for å fullføre migreringen.### Node.js og krav til versjoner av avhengigheter

Rspress 2.0 krever Node.js versjon 20+, React versjon 18+.

Neste steg

Utgivelsen av Rspress 2.0 er bare et nytt utgangspunkt. Etter denne utgivelsen vil Rspress fortsette å iterere:

• Fremme økosystemintegrasjon: Dypere integrasjon med Rslib, Rstest for å tilby en helhetlig utviklingsopplevelse for frontend-prosjekter og komponentbiblioteksprosjekter.
• Utforske AI og dypere integrasjon med dokumentasjon: Som intelligent spørsmål og svar, automatisk sammendrag osv.; forbedre SSG-MD for å gjøre det stabilt og mer brukervennlig.

Bruk eller oppgrader til Rspress 2.0 nå, og opplev en ny dokumentasjonsutviklingsreise!

npm create rspress@latest