Rspress 2.0 lanzado: una nueva actualización centrada en la experiencia y la IA
Rspress 2.0 lanzado: una nueva actualización centrada en la experiencia y la IA
¡Estamos emocionados de anunciar el lanzamiento oficial de Rspress 2.0!
Rspress es un generador de sitios estáticos basado en Rsbuild, diseñado como una herramienta de documentación para desarrolladores. Desde su lanzamiento oficial en 2023, Rspress 1.x ha iterado un total de 144 versiones, con 125 contribuyentes participando en el desarrollo del proyecto. Cada vez más desarrolladores eligen Rspress, aprovechando sus características como alto rendimiento de compilación, enrutamiento basado en convenciones y vista previa de biblioteca de componentes para construir sitios de documentación atractivos y confiables.
Basado en los comentarios y sugerencias de la comunidad, Rspress 2.0 ha avanzado en aspectos como estética del tema, nativo de IA, experiencia de desarrollo de documentación, y uso conjunto con Rslib.
¿Por qué Rspress 2.0?
Rspress 1.x ya había abordado el problema del rendimiento de compilación del marco de documentación, pero aún existían algunos problemas que afectaban la experiencia central como herramienta de desarrollo de documentación. La versión 2.0 no solo se centra en la búsqueda de rendimiento de compilación, sino que también se enfoca en otros aspectos de la experiencia del sitio de documentación:
- Estilo del tema: un tema predeterminado más atractivo, que ofrece múltiples formas de personalización, resolviendo el problema de la falta de una API estable para la personalización de temas en 1.x.
- Nativo de IA: la documentación no solo sirve a los lectores humanos, sino que también necesita ser mejor entendida y utilizada por los Agentes. Rspress ahora incluye la generación de llms.txt y la función SSG-MD derivada de SSG, generando contenido de Markdown de alta calidad para que los Agentes lo lean.
- Compilación bajo demanda, inicio instantáneo: habilita por defecto lazyCompilation, junto con la función de precarga de recursos al pasar el mouse sobre los enlaces, construyendo solo los archivos necesarios al acceder a rutas específicas, logrando que, sin importar el tamaño del proyecto, el dev pueda iniciarse instantáneamente.
- Resaltado de código Shiki: integrado por defecto Shiki, completando el resaltado de sintaxis durante la construcción, soportando cambio de temas y extensiones de transformadores, como @rspress/plugin-twoslash, ofreciendo una presentación de bloques de código más rica.
- Experiencia de desarrollo de documentación: optimiza HMR de archivos como nav.json, meta.json y añade un esquema json para sugerencias de código en IDE; habilita por defecto la función de verificación de enlaces rotos; añade sintaxis de bloques de código de archivos, soportando la referencia a archivos externos; @rspress/plugin-preview y @rspress/plugin-playground soportan uso simultáneo, etc.
- Integración de Rslib: ahora puedes elegir Rspress como herramienta de documentación al crear proyectos de biblioteca de componentes usando create-rslib, construyendo rápidamente sitios de documentación de componentes.
Nuevas características 2.0
Nuevo tema
El tema predeterminado de 2.0 ha recibido una actualización sistemática, diseñado en su totalidad por el diseñador del equipo @Zovn Wei, con mejoras significativas en efectos visuales y experiencia de lectura, y cada componente puede ser reemplazado de forma independiente, ofreciendo una alta personalización.
Personalización del tema
Según el grado de personalización de menor a mayor, hay cuatro formas de personalización del tema: variables CSS, nombres de clase BEM, reexportación ESM y expulsión de componentes.- Variables CSS: El nuevo tema expone más variables CSS, cubriendo estilos como el color del tema, bloques de código, la página de inicio, etc. Puedes previsualizar y ajustar todas las variables CSS de manera interactiva en la página de variables CSS, y después de encontrar la configuración que te satisface, simplemente cópiala para usarla en tu proyecto.
- Nombres de clase BEM: Los componentes integrados ahora utilizan la convención de nomenclatura BEM. Esta es una elección bastante Old School, pero también es una decisión bien pensada. Los usuarios pueden ajustar los estilos de manera precisa a través de selectores CSS, y la estructura HTML es más clara.
- Reexportación ESM: Si las modificaciones en CSS no satisfacen las necesidades de personalización, se puede realizar una personalización más profunda a través de JS. En theme/index.tsx, utilizando la reexportación ESM, se puede sobrescribir cualquier componente integrado de Rspress.
- Expulsar componentes: Puedes usar el nuevo comando rspress eject [component], que copiará el código fuente del componente especificado al directorio theme/components/, donde puedes modificar este código libremente, incluso dejarlo directamente a la IA para realizar una personalización profunda.
Etiquetas de barra de navegación y barra lateral
Rspress 2.0 ha implementado el componente Tag, ahora puedes usar la propiedad tag en frontmatter para realizar anotaciones UI en la barra lateral o en la barra de navegación.
Soporte multilingüe integrado
En la versión 1.x, Rspress solo incluía texto en inglés, y si se utilizaban otros idiomas como zh, era necesario configurar todos los textos, lo que resultaba complicado. Ahora, el tema 2.0 incluye textos traducidos en varios idiomas como zh, en, ja, ko, ru, etc., y el sistema realizará automáticamente "Tree Shaking" según la configuración del idioma, empaquetando solo los textos e idiomas que uses.
Soporte para llms.txt
Rspress ahora integra la capacidad de generación de llms.txt en el núcleo y ha implementado una nueva capacidad SSG-MD (Generación de Sitios Estáticos a Markdown).
En los frameworks de frontend que renderizan dinámicamente con React, a menudo hay problemas para extraer información estática, y Rspress enfrenta el mismo desafío. Rspress permite a los usuarios mejorar la expresividad del documento a través de fragmentos MDX, componentes de React, Hooks y características dinámicas como rutas TSX. Sin embargo, este contenido dinámico enfrenta los siguientes problemas al convertirse en texto Markdown:
- Dar directamente MDX a la IA incluirá mucho ruido de sintaxis de código y perderá el contenido de los componentes de React.
- Convertir HTML a Markdown a menudo no produce buenos resultados, y la calidad de la información es difícil de garantizar.
Para resolver este problema, Rspress 2.0 introduce la característica SSG-MD. Esta es una función completamente nueva, similar a la generación de sitios estáticos (SSG), pero la diferencia es que renderiza tus páginas como archivos Markdown en lugar de archivos HTML, y genera archivos relacionados llms.txt y llms-full.txt.
Resaltado de bloques de código en la era de ShikiRspress 2.0 utiliza Shiki para el resaltado de código por defecto. En comparación con el esquema de resaltado en tiempo de ejecución de prism en 1.x, Shiki completa el procesamiento de resaltado en tiempo de compilación.
- Soporta múltiples estilos de tema, por ejemplo, en la página de variables CSS se puede cambiar y previsualizar interactivamente diferentes temas de Shiki.
- Al mismo tiempo, Shiki también permite el uso de transformadores personalizados para enriquecer la escritura, como twoslash, etc.
- Importación bajo demanda de lenguajes de programación, sin aumentar la sobrecarga en tiempo de ejecución y el tamaño del paquete.
- Implementación de resaltado de sintaxis precisa y consistente con VS Code basada en la gramática de TextMate.
### Mejora del rendimiento de construcción
Rspress 2.0 está impulsado por las versiones preliminares de Rsbuild y Rspack 2.0, y por defecto activa la compilación bajo demanda y la caché persistente.
#### Compilación bajo demanda
Por defecto, se activa dev.lazyCompilation, solo se compilará una página cuando accedas a ella, lo que mejora significativamente la velocidad de inicio del desarrollo, incluso logrando un inicio en frío en milisegundos. Rspress también implementa una estrategia de precarga de rutas, que precarga la página de ruta objetivo cuando el mouse se coloca sobre el enlace, logrando una experiencia de desarrollo sin pérdidas junto con lazyCompilation.
#### Caché persistente
2.0 también activa por defecto la caché persistente, reutilizando los resultados de la última compilación en el inicio en caliente, mejorando la velocidad de construcción entre un 30% y un 60%. Esto significa que después de ejecutar rspress dev o rspress build por primera vez, la velocidad de inicio posterior mejorará notablemente.
### Experiencia de desarrollo de documentación
#### Comprobación de enlaces rotos activada por defecto
Rspress 2.0 activa por defecto la función de comprobación de enlaces rotos. Durante el proceso de construcción, se detectarán automáticamente los enlaces inválidos en la documentación, ayudándote a descubrir y reparar a tiempo.
#### Bloques de código de archivo
Puedes usar el atributo file="./path/to/file" para referenciar archivos externos como contenido de bloques de código, manteniendo el código de ejemplo en archivos separados.
#### Uso de meta más flexible en preview
@rspress/plugin-preview ahora utiliza el atributo meta, siendo más flexible y también puede combinarse con bloques de código de archivo.
### Rslib & Rspress
### Más plugins oficiales de Rspress
Rspress 2.0 ha añadido varios plugins oficiales:
- @rspress/plugin-algolia: permite reemplazar la búsqueda integrada de Rspress por Algolia DocSearch
- @rspress/plugin-twoslash: añade sugerencias de tipo para bloques de código TypeScript
- @rspress/plugin-llms: proporciona capacidad de generación de llms.txt para proyectos que no soportan SSG y SSG-MD
- @rspress/plugin-sitemap: genera automáticamente archivos Sitemap para optimizar SEO
## Cambios importantes
### Migración desde Rspress 1.x
Si eres usuario de un proyecto 1.x, hemos preparado un documento de migración detallado para ayudarte a actualizar de 1.x a 2.0. Puedes usar directamente la función "Copiar Markdown" en la página, ingresándola a tu agente de codificación habitual (como Claude Code, etc.) para completar la migración.### Node.js y requisitos de versión de dependencias ascendentes
Rspress 2.0 requiere Node.js versión 20+, React versión 18+.
Próximos pasos
El lanzamiento de Rspress 2.0 es solo un nuevo punto de partida. Después de este lanzamiento, Rspress continuará iterando:
- Avanzar en la integración del ecosistema: combinarse más profundamente con Rslib y Rstest, proporcionando una experiencia de desarrollo integrada para proyectos de frontend y bibliotecas de componentes.
- Explorar una integración más profunda de AI y documentación: como preguntas y respuestas inteligentes, resúmenes automáticos, etc.; mejorar SSG-MD para que sea más estable y fácil de usar.
npm create rspress@latest
