Rspress 2.0 जारी: अनुभव और AI के लिए एक नया उन्नयन

हम Rspress 2.0 के आधिकारिक लॉन्च की घोषणा करते हुए बहुत खुश हैं!

Rspress Rsbuild पर आधारित एक स्थिर साइट जनरेटर है, जो विशेष रूप से डेवलपर्स के लिए दस्तावेज़ साइट उपकरण के रूप में बनाया गया है। 2023 में आधिकारिक लॉन्च के बाद से, Rspress 1.x ने कुल 144 संस्करणों में सुधार किया है, जिसमें 125 योगदानकर्ता परियोजना विकास में शामिल हुए हैं।越来越多的开发者选择 Rspress，借助其高效的编译性能、约定式路由和组件库预览等功能，搭建美观可靠的文档站点。

समुदाय की प्रतिक्रिया और सुझावों के आधार पर, Rspress 2.0 ने थीम की सुंदरता、AI-नैटिव、दस्तावेज़ विकास अनुभव、Rslib के साथ उपयोग आदि क्षेत्रों में और भी सुधार किया है।

क्यों Rspress 2.0

Rspress 1.x ने दस्तावेज़ साइट ढांचे के संकलन प्रदर्शन की समस्याओं को हल किया है, लेकिन अभी भी कुछ समस्याएँ हैं जो एक दस्तावेज़ विकास उपकरण के मूल अनुभव को प्रभावित करती हैं। 2.0 संस्करण केवल संकलन प्रदर्शन की खोज पर ध्यान केंद्रित नहीं करेगा, बल्कि दस्तावेज़ साइट के अनुभव के अन्य पहलुओं पर भी ध्यान केंद्रित करेगा:

• थीम शैली: एक और अधिक सुंदर डिफ़ॉल्ट थीम का सेट, और कई अनुकूलन थीम विकल्प प्रदान करता है, 1.x में थीम अनुकूलन पर स्थिर API की कमी की समस्या को हल करता है।
• AI-नैटिव: दस्तावेज़ केवल मानव पाठकों के लिए नहीं होते, बल्कि एजेंट द्वारा बेहतर समझे और उपयोग किए जाने की आवश्यकता होती है। Rspress अब llms.txt उत्पन्न करने और SSG से व्युत्पन्न SSG-MD कार्यक्षमता को अंतर्निहित करता है, जो एजेंट के पढ़ने के लिए उच्च गुणवत्ता वाली Markdown रेंडर सामग्री उत्पन्न करता है।
• आवश्यकतानुसार संकलन, तात्कालिक प्रारंभ: डिफ़ॉल्ट रूप से lazyCompilation सक्षम है, लिंक होवर करते समय संसाधनों के प्रीलोड फ़ंक्शन के साथ, केवल विशिष्ट मार्गों तक पहुँचने पर आवश्यक फ़ाइलों का निर्माण करता है, जिससे यह सुनिश्चित होता है कि परियोजना का आकार चाहे कितना भी बड़ा हो, dev भी तात्कालिक प्रारंभ कर सकता है।
• Shiki कोड हाइलाइट: डिफ़ॉल्ट रूप से Shiki को एकीकृत किया गया है, संकलन के समय व्याकरण हाइलाइटिंग को पूरा करता है, थीम स्विचिंग, ट्रांसफार्मर विस्तार का समर्थन करता है, जैसे @rspress/plugin-twoslash, जो कोड ब्लॉक प्रदर्शित करने के लिए और अधिक समृद्ध प्रभाव लाता है।
• दस्तावेज़ विकास अनुभव: nav.json, meta.json आदि फ़ाइलों के HMR को अनुकूलित करता है और IDE के भीतर कोड सुझावों के लिए json schema जोड़ा गया है; डिफ़ॉल्ट रूप से मृत लिंक जांच फ़ंक्शन सक्षम है; बाहरी फ़ाइलों को संदर्भित करने के लिए फ़ाइल कोड ब्लॉक व्याकरण जोड़ा गया है; @rspress/plugin-preview और @rspress/plugin-playground को एक साथ उपयोग करने का समर्थन करता है आदि।
• Rslib एकीकरण: अब आप create-rslib का उपयोग करते समय Rspress को दस्तावेज़ उपकरण के रूप में चुन सकते हैं, जिससे आप तेजी से घटक दस्तावेज़ साइट बना सकते हैं।

2.0 नई विशेषताएँ

पूरी तरह से नई थीम

2.0 डिफ़ॉल्ट थीम को एक प्रणालीगत उन्नयन मिला है, जिसे टीम के डिज़ाइनर @Zovn Wei ने समग्र रूप से डिज़ाइन किया है, जो दृश्य प्रभाव और पढ़ने के अनुभव में काफी सुधार करता है, और प्रत्येक घटक को स्वतंत्र रूप से प्रतिस्थापित किया जा सकता है, जिसमें उच्च अनुकूलन क्षमता है।

थीम अनुकूलन

अनुकूलन के स्तर के अनुसार, चार प्रकार के अनुकूलन थीम विकल्प हैं: CSS वेरिएबल, BEM क्लास नाम, ESM पुनः निर्यात ओवरराइड, घटक ईजेक्ट।- CSS变量：नए थीम ने अधिक CSS वेरिएबल्स को उजागर किया है, जो थीम रंग, कोड ब्लॉक, होमपेज आदि के स्टाइल को ओवरराइड करते हैं। आप CSS वेरिएबल्स पृष्ठ पर इंटरैक्टिव रूप से सभी CSS वेरिएबल्स का पूर्वावलोकन और समायोजन कर सकते हैं, और संतोषजनक कॉन्फ़िगरेशन मिलने पर सीधे अपने प्रोजेक्ट में उपयोग के लिए कॉपी कर सकते हैं।

• BEM क्लास नाम：इनबिल्ट कंपोनेंट अब सभी BEM नामकरण मानक का पालन करते हैं। यह एक बहुत पुराना विकल्प है, लेकिन यह हमारा गहन विचार का निर्णय भी है। उपयोगकर्ता CSS चयनकर्ताओं के माध्यम से सटीक रूप से स्टाइल को समायोजित कर सकते हैं, HTML संरचना अधिक स्पष्ट है।
• ESM पुनः निर्यात ओवरराइड：यदि CSS में किए गए संशोधन कस्टमाइज़ेशन आवश्यकताओं को पूरा नहीं करते हैं, तो आप JS के माध्यम से अधिक गहन कस्टमाइज़ेशन कर सकते हैं। theme/index.tsx में ESM पुनः निर्यात का उपयोग करके, आप Rspress के किसी भी इनबिल्ट कंपोनेंट को ओवरराइड कर सकते हैं।
• कंपोनेंट इजेक्ट：आप नए rspress eject [component] कमांड का उपयोग कर सकते हैं, यह कमांड निर्दिष्ट कंपोनेंट का स्रोत कोड theme/components/ निर्देशिका में कॉपी करेगा, आप इन कोड को स्वतंत्र रूप से संशोधित कर सकते हैं, यहां तक कि सीधे AI को संशोधन के लिए दे सकते हैं, ताकि गहन कस्टमाइज़ेशन किया जा सके।

नेविगेशन बार, साइडबार टैग

Rspress 2.0 ने टैग कंपोनेंट को लागू किया है, अब आप frontmatter में टैग प्रॉपर्टी का उपयोग कर सकते हैं, साइडबार या नेविगेशन बार में UI मार्किंग के लिए।

इनबिल्ट बहुभाषी समर्थन

1.x संस्करण में, Rspress ने केवल अंग्रेजी पाठ को इनबिल्ट किया था, यदि अन्य भाषाओं का उपयोग किया गया जैसे zh, तो सभी पाठ को कॉन्फ़िगर करना आवश्यक था, उपयोग में थोड़ा जटिल था। अब 2.0 थीम में zh, en, ja, ko, ru आदि कई भाषाओं के अनुवाद पाठ को इनबिल्ट किया गया है, सिस्टम भाषा कॉन्फ़िगरेशन के आधार पर स्वचालित रूप से "Tree Shaking" करेगा, केवल उन पाठ और भाषाओं को पैक करेगा जिनका आप उपयोग करते हैं।

llms.txt समर्थन

Rspress अब llms.txt जनरेशन क्षमता को कोर में एकीकृत करता है, और एक नई SSG-MD (Static Site Generation to Markdown, स्थिर साइट Markdown जनरेशन) क्षमता को लागू करता है।

React आधारित गतिशील रेंडरिंग फ्रेमवर्क में, अक्सर स्थिर जानकारी को निकालने में कठिनाई होती है, Rspress को भी इसी चुनौती का सामना करना पड़ता है। Rspress उपयोगकर्ताओं को MDX स्निपेट्स, React कंपोनेंट्स, हुक्स और TSX रूटिंग जैसे गतिशील विशेषताओं के माध्यम से दस्तावेज़ की अभिव्यक्ति को बढ़ाने की अनुमति देता है। लेकिन इन गतिशील सामग्री को Markdown पाठ में परिवर्तित करते समय निम्नलिखित समस्याओं का सामना करना पड़ता है:

• सीधे MDX को AI को देने से बहुत सारे कोड सिंटैक्स शोर शामिल होंगे, और React कंपोनेंट सामग्री खो जाएगी
• HTML को Markdown में परिवर्तित करना अक्सर प्रभावी नहीं होता, जानकारी की गुणवत्ता सुनिश्चित करना कठिन होता है

इस समस्या को हल करने के लिए, Rspress 2.0 ने SSG-MD विशेषता को पेश किया है। यह एक नया फ़ीचर है, यह स्थिर साइट जनरेशन (SSG) के समान है, लेकिन अंतर यह है कि यह आपके पृष्ठ को HTML फ़ाइल के बजाय Markdown फ़ाइल के रूप में रेंडर करता है, और llms.txt और llms-full.txt संबंधित फ़ाइलों को उत्पन्न करता है।

Shiki संकलन में कोड ब्लॉक हाइलाइटिंगRspress 2.0 डिफ़ॉल्ट रूप से कोड हाइलाइटिंग के लिए Shiki का उपयोग करता है। 1.x के prism रनटाइम हाइलाइटिंग समाधान की तुलना में, Shiki संकलन के समय हाइलाइटिंग प्रक्रिया को पूरा करता है।

• विभिन्न विषय शैलियों का समर्थन करता है, जैसे कि CSS वेरिएबल पृष्ठ पर इंटरैक्टिव रूप से विभिन्न Shiki विषयों को स्विच और पूर्वावलोकन किया जा सकता है।
• साथ ही Shiki कस्टम ट्रांसफार्मर का उपयोग करके विस्तार की अनुमति देता है ताकि लेखन को समृद्ध किया जा सके, जैसे कि twoslash आदि।
• आवश्यकतानुसार प्रोग्रामिंग भाषाओं को शामिल करें, रनटाइम ओवरहेड और पैकेज आकार को बढ़ाए बिना।
• TextMate व्याकरण के आधार पर VS Code के साथ सटीक व्याकरण हाइलाइटिंग को लागू करता है।

निर्माण प्रदर्शन में सुधार

Rspress 2.0 का आधार Rsbuild और Rspack 2.0 पूर्वावलोकन संस्करण द्वारा संचालित है, साथ ही डिफ़ॉल्ट रूप से आवश्यकतानुसार संकलन और स्थायी कैशिंग सक्षम है।

आवश्यकतानुसार संकलन

डिफ़ॉल्ट रूप से dev.lazyCompilation सक्षम है, केवल जब आप किसी पृष्ठ पर जाते हैं, तब उस पृष्ठ को संकलित किया जाएगा, जिससे विकास प्रारंभ गति में काफी सुधार होता है, यहां तक कि मिलीसेकंड स्तर की ठंडी शुरुआत भी प्राप्त होती है। Rspress ने रूटिंग के प्रीलोड रणनीति को भी लागू किया है, जब लिंक पर माउस होवर किया जाता है, तो लक्ष्य रूट पृष्ठ को पूर्व-लोड किया जाएगा, lazyCompilation के साथ मिलकर बिना नुकसान के विकास अनुभव को प्राप्त करता है।

स्थायी कैशिंग

2.0 डिफ़ॉल्ट रूप से स्थायी कैशिंग को भी सक्षम करता है, गर्म प्रारंभ में पिछले संकलन के परिणामों का पुन: उपयोग करता है, निर्माण गति में 30%-60% का सुधार करता है। इसका मतलब है कि rspress dev या rspress build को पहली बार चलाने के बाद, बाद के प्रारंभ की गति स्पष्ट रूप से बढ़ जाएगी।

दस्तावेज़ विकास अनुभव

डिफ़ॉल्ट रूप से मृत लिंक जांच सक्षम

Rspress 2.0 डिफ़ॉल्ट रूप से मृत लिंक जांच कार्यक्षमता को सक्षम करता है। निर्माण प्रक्रिया के दौरान, यह दस्तावेज़ में अमान्य लिंक का स्वचालित रूप से पता लगाएगा, जिससे आपको समय पर पहचानने और सुधारने में मदद मिलेगी।

फ़ाइल कोड ब्लॉक

आप बाहरी फ़ाइल को कोड ब्लॉक की सामग्री के रूप में संदर्भित करने के लिए file="./path/to/file" गुण का उपयोग कर सकते हैं, उदाहरण कोड को अलग फ़ाइल में बनाए रख सकते हैं।

पूर्वावलोकन के लिए अधिक लचीला मेटा उपयोग

@rspress/plugin-preview अब मेटा गुण के आधार पर उपयोग किया जाता है, अधिक लचीला है, और फ़ाइल कोड ब्लॉक के साथ भी मिल सकता है।

Rslib & Rspress

जब आप create-rslib का उपयोग करके प्रोजेक्ट बनाते हैं, तो आप अब Rspress उपकरण का चयन कर सकते हैं। यह आपको घटक पुस्तकालय विकसित करते समय, सहायक दस्तावेज़ साइट को जल्दी से स्थापित करने की अनुमति देता है, घटकों के उपयोग विवरण लिखने, API संदर्भ प्रदर्शित करने, या घटक प्रभाव का वास्तविक समय पूर्वावलोकन करने के लिए।

अधिक Rspress आधिकारिक प्लगइन

Rspress 2.0 में कई आधिकारिक प्लगइन्स जोड़े गए हैं:

• @rspress/plugin-algolia: Rspress के अंतर्निहित खोज को Algolia DocSearch से बदलने का समर्थन करता है
• @rspress/plugin-twoslash: TypeScript कोड ब्लॉकों के लिए प्रकार सुझाव जोड़ता है
• @rspress/plugin-llms: उन परियोजनाओं के लिए llms.txt उत्पन्न करने की क्षमता प्रदान करता है जो SSG और SSG-MD का समर्थन नहीं करते हैं
• @rspress/plugin-sitemap: SEO को अनुकूलित करने के लिए स्वचालित रूप से साइटमैप फ़ाइल उत्पन्न करता है

ब्रेकिंग परिवर्तन

Rspress 1.x से माइग्रेट करना

यदि आप 1.x प्रोजेक्ट के उपयोगकर्ता हैं, तो हमने एक विस्तृत माइग्रेशन दस्तावेज़ तैयार किया है, जो आपको 1.x से 2.0 में अपग्रेड करने में मदद करेगा। आप सीधे पृष्ठ में "Markdown कॉपी करें" फ़ंक्शन का उपयोग कर सकते हैं, इसे अपने सामान्य कोडिंग एजेंट (जैसे Claude Code आदि) में इनपुट करने के लिए माइग्रेशन पूरा करने के लिए।### Node.js 与上游依赖版本要求

Rspress 2.0 要求 Node.js 版本 20+，React 版本 18+。

下一步

Rspress 2.0 的发布只是一个新的起点。本次发布后，Rspress 将持续迭代：

• 推进生态集成：与 Rslib、Rstest 更深度地结合，提供前端项目和组件库项目的一体化开发体验。
• 探索 AI 与文档更深度集成：如智能问答、自动摘要等；完善 SSG-MD 使其稳定并更加易用。

立即使用或升级到 Rspress 2.0，体验全新的文档开发之旅！

npm create rspress@latest