Rspress 2.0 Udgivet: En ny opgradering fokuseret på oplevelse og AI

Vi er glade for at annoncere den officielle udgivelse af Rspress 2.0!

Rspress er en statisk site generator baseret på Rsbuild, designet som et dokumentationsværktøj til udviklere. Siden den officielle udgivelse i 2023 har Rspress 1.x gennemgået 144 versioner og haft 125 bidragsydere involveret i projektudviklingen. Flere og flere udviklere vælger Rspress for at bygge smukke og pålidelige dokumentationssites ved hjælp af dens effektive kompilering, konventionel routing og komponentbibliotek preview.

Baseret på feedback og forslag fra fællesskabet har Rspress 2.0 taget skridtet videre inden for temaets æstetik, AI-native, dokumentationsudviklingsoplevelse, og brug sammen med Rslib.

Hvorfor Rspress 2.0

Rspress 1.x har allerede løst problemerne med kompileringseffektiviteten af dokumentationssite-rammen, men der er stadig nogle problemer, der påvirker den centrale oplevelse som et dokumentationsudviklingsværktøj. Version 2.0 vil ikke kun fokusere på kompileringseffektivitet, men også på andre aspekter af dokumentationssite-oplevelsen:

• Tema stil: Et mere æstetisk standardtema, der tilbyder flere måder at tilpasse temaet på, hvilket løser problemet med 1.x, hvor der manglede en stabil API til tema tilpasning.
• AI-native: Dokumenter skal ikke kun tjene menneskelige læsere, men også forstås og bruges bedre af agenter. Rspress har nu indbygget llms.txt generation og SSG-MD funktionalitet, der er afledt af SSG, til at generere kvalitets Markdown-renderet indhold til agenter.
• On-demand kompilering, øjeblikkelig opstart: LazyCompilation er som standard aktiveret, sammen med preload-funktionen for ressourcer ved hover over links, hvilket kun bygger de nødvendige filer, når specifikke ruter tilgås, hvilket gør det muligt for dev at starte øjeblikkeligt, uanset projektets størrelse.
• Shiki kodefremhævning: Shiki er integreret som standard, der fuldfører syntaksfremhævning under bygning, understøtter tema skift, transformer udvidelser, såsom @rspress/plugin-twoslash, hvilket giver en rigere visning af kodeblokke.
• Dokumentationsudviklingsoplevelse: Optimering af HMR for filer som nav.json, meta.json og tilføjelse af json schema til kodeforslag i IDE; døde link tjek funktion aktiveret som standard; ny fil kodeblok syntaks, der understøtter referencer til eksterne filer; @rspress/plugin-preview og @rspress/plugin-playground understøtter samtidig brug osv.
• Rslib integration: Du kan nu vælge Rspress som dokumentationsværktøj, når du bruger create-rslib til at oprette komponentbiblioteksprojekter, hvilket hurtigt opretter dokumentationssites for komponenter.

2.0 Nye funktioner

Helt nyt tema

2.0 standardtemaet har gennemgået en systematisk opgradering, designet af teamdesigner @Zovn Wei, med betydelige forbedringer i visuelle effekter og læseoplevelse, og hver komponent kan udskiftes individuelt, hvilket giver høj tilpasningsevne.

Tema tilpasning

I henhold til graden af tilpasning fra lav til høj, er der fire måder at tilpasse temaet på: CSS-variabler, BEM klassennavne, ESM genudførsel, komponent eject.- CSS variabler: Det nye tema eksponerer flere CSS variabler, der dækker tema farver, kodeblokke, startside og andre stilarter. Du kan interaktivt forudse og justere alle CSS variabler på CSS variabelsiden, og når du finder en tilfredsstillende konfiguration, kan du kopiere den direkte til dit projekt.

• BEM klassennavne: Indbyggede komponenter bruger nu BEM navngivningsstandard. Dette er et meget Old School valg, men også en velovervejet beslutning. Brugere kan præcist justere stilarter via CSS vælger, og HTML strukturen bliver mere klar.
• ESM genudførsel dækning: Hvis ændringerne på CSS ikke opfylder tilpasningsbehovene, kan du foretage dybere tilpasninger via JS. Ved at bruge ESM genudførsel i theme/index.tsx kan du dække enhver indbygget komponent i Rspress.
• Komponent eject: Du kan bruge den helt nye rspress eject [komponent] kommando, som vil kopiere kildekoden til den angivne komponent til theme/components/ mappen, så du frit kan ændre disse koder, endda direkte overlade dem til AI for at opnå dyb tilpasning.

Navigationslinje, sidebjælke tag

Rspress 2.0 implementerede Tag komponenten, og nu kan du bruge tag attributten i frontmatter til at lave UI markeringer i sidebjælken eller navigationslinjen.

Indbygget flersproget support

I version 1.x havde Rspress kun indbygget engelsk tekst, og hvis du brugte andre sprog som zh, skulle alle tekster konfigureres, hvilket var ret besværligt. Nu har 2.0 temaet indbygget oversættelsestekster på flere sprog som zh, en, ja, ko, ru osv., og systemet vil automatisk udføre "Tree Shaking" baseret på sprogkonfigurationen, kun pakke de tekster og sprog, du bruger.

llms.txt support

Rspress har nu integreret llms.txt genereringskapacitet i kernen og implementeret en ny SSG-MD (Static Site Generation to Markdown, statisk site Markdown generering) kapabilitet.

I front-end rammer baseret på React, er der ofte problemer med at udtrække statisk information, og Rspress står overfor den samme udfordring. Rspress tillader brugere at forbedre dokumentets udtryksfuldhed gennem MDX fragmenter, React komponenter, Hooks og TSX ruter mv. Men disse dynamiske indhold står overfor følgende problemer, når de konverteres til Markdown tekst:

• At give MDX direkte til AI vil indeholde en masse kode syntaks støj og miste React komponent indhold
• At konvertere HTML til Markdown giver ofte dårlige resultater, og informationskvaliteten er svær at garantere

For at løse dette problem introducerede Rspress 2.0 SSG-MD funktionen. Dette er en helt ny funktion, der ligner statisk site generering (SSG), men forskellen er, at den renderer dine sider som Markdown filer, snarere end HTML filer, og genererer llms.txt og llms-full.txt relaterede filer.

Shiki kompileringstid kodeblokke fremhævelseRspress 2.0 bruger som standard Shiki til kodefremhævning. Sammenlignet med 1.x's prism runtime fremhævning, udfører Shiki fremhævning ved kompileringstidspunktet.

• Understøtter flere temaer, for eksempel kan du interaktivt skifte og forhåndsvise forskellige Shiki-temaer på CSS-variabelsiden.
• Samtidig tillader Shiki også brug af brugerdefinerede transformatorer til at berige skrivningen, såsom twoslash osv.
• Indlæser programmeringssprog efter behov, uden at øge runtime-omkostningerne og pakke størrelsen.
• Baseret på TextMate-syntaks implementerer den præcis syntaksfremhævning, der er i overensstemmelse med VS Code.

Forbedringer af byggetid

Rspress 2.0 er drevet af Rsbuild og Rspack 2.0 preview-versionen, og har som standard aktiveret on-demand kompilering og vedvarende cache.

On-demand kompilering

Som standard er dev.lazyCompilation aktiveret, hvilket betyder, at en side kun bliver kompilering, når du besøger den, hvilket markant forbedrer udviklingsstarttiden og endda muliggør kold start på millisekundniveau. Rspress implementerer også en preload-strategi for routing, hvor målside indlæses på forhånd, når musen svæver over linket, hvilket sammen med lazyCompilation giver en tabsløs udviklingsoplevelse.

Vedvarende cache

2.0 har også som standard aktiveret vedvarende cache, som genbruger resultaterne fra den sidste kompilering under varm start, hvilket forbedrer byggetiden med 30%-60%. Dette betyder, at efter første gang du kører rspress dev eller rspress build, vil efterfølgende starttider være markant forbedret.

Dokumentationsudviklingsoplevelse

Standard aktiveret død link kontrol

Rspress 2.0 har som standard aktiveret død link kontrol. Under byggeprocessen vil det automatisk opdage ugyldige links i dokumentationen, hvilket hjælper dig med at opdage og rette dem i tide.

Fil kodeblokke

Du kan bruge file="./path/to/file" attributten til at referere til eksterne filer som indhold i kodeblokke, hvilket giver dig mulighed for at vedligeholde eksempel koden i separate filer.

preview mere fleksibel meta brug

@rspress/plugin-preview bruger nu meta attributten, hvilket gør det mere fleksibelt og kan også kombineres med fil kodeblokke.

Rslib & Rspress

Når du bruger create-rslib til at oprette projekter, kan du nu vælge Rspress-værktøjet. Dette giver dig mulighed for hurtigt at opbygge en tilhørende dokumentationsside, mens du udvikler komponentbiblioteker, til at skrive brugsanvisninger for komponenter, vise API-referencer eller live forhåndsvise komponenteffekter.

Flere officielle Rspress plugins

Rspress 2.0 har tilføjet flere officielle plugins:

• @rspress/plugin-algolia: Understøtter at erstatte Rspress' indbyggede søgning med Algolia DocSearch
• @rspress/plugin-twoslash: Tilføjer type hints til TypeScript kodeblokke
• @rspress/plugin-llms: Giver llms.txt genereringskapacitet for projekter, der ikke understøtter SSG og SSG-MD
• @rspress/plugin-sitemap: Genererer automatisk Sitemap-filer til at optimere SEO

Breaking changes

Migration fra Rspress 1.x

Hvis du er bruger af 1.x-projekter, har vi forberedt et detaljeret migrationsdokument, der hjælper dig med at opgradere fra 1.x til 2.0. Du kan direkte bruge "Kopier Markdown" funktionen på siden og indtaste det til din almindeligt anvendte kodningsagent (som Claude Code osv.) for at fuldføre migreringen.Rspress 2.0 kræver Node.js version 20+, React version 18+.\n\n## Næste skridt\n\nUdgivelsen af Rspress 2.0 er kun et nyt udgangspunkt. Efter denne udgivelse vil Rspress fortsætte med at iterere:\n\n- Fremme af økosystemintegration: Dybere integration med Rslib, Rstest for at tilbyde en integreret udviklingsoplevelse for frontend-projekter og komponentbiblioteksprojekter.\n- Udforske AI og dybere integration med dokumenter: Som intelligent spørgsmål og svar, automatisk resumé osv.; forbedre SSG-MD for at gøre det stabilt og mere brugervenligt.\n\nBrug eller opgrader til Rspress 2.0 nu og oplev en ny rejse inden for dokumentudvikling!\n\nnpm create rspress@latest