Rstack Examples

Rspress is a static site generator (SSG) built on top of Rsbuild and rendered using the React framework. It is designed for building documentation sites quickly, providing a default documentation theme and several built-in capabilities.

Key features include:

• High Performance: Uses a Rust-based front-end toolchain for fast compilation and millisecond-level startup.
• AI-native: Supports SSG-MD to make documentation more accessible to AI agents.
• MDX Support: Allows you to embed React components directly within Markdown files.
• Built-in Features: Includes full-text search, internationalization (i18n), multi-version support, and component library documentation support.
• Extensibility: Features a built-in plugin system for extending functionality via a plugin API.

Rspress provides syntax highlighting for code blocks using Shiki. Highlighting is performed at compile time, which ensures better runtime performance and prevents the runtime bundle size from increasing when using multiple programming languages.

To use syntax highlighting, specify the language in the code block fence (e.g., js, ts, python). The language must be supported by Shiki. For a full list of supported languages, refer to the Shiki supported languages list.

console.log('Hello World');

This example demonstrates how a federated React component loaded over HTTP can be tested in a real browser environment using @rstest/browser-react.

Singleton React Pattern

For the federated component to function correctly (e.g., maintaining state like a counter), the host and remote must share a single instance of React. This is achieved using the shareStrategy: 'loaded-first' configuration, which ensures that react and react-dom are treated as singletons by preferring the version already loaded by the host over the one provided by the remote.

When using a project created with create-rspress, the directory structure follows this convention:

• docs/: The source directory for your documentation (configured via the root property in rspress.config.ts).
• docs/_nav.json: Configuration file for the navigation bar.
• docs/[section]/_meta.json: Configuration file for the sidebar within a specific section (e.g., docs/guide/_meta.json).
• docs/public/: Directory for static assets.
• theme/: An optional directory for custom themes (only present if the custom theme scaffold was selected).
• rspress.config.ts: The main configuration file for Rspress.

This example directory demonstrates a Module Federation setup using three distinct roles:

• mf-react-component: An Rslib project acting as a producer and a Storybook project acting as a consumer. It showcases how to develop Module Federation (MF) components within Storybook.
• mf-remote: An Rsbuild project acting as a producer. It provides a remote module that can be consumed by other applications (like mf-react-component) to demonstrate complex MF configurations.
• mf-host: An Rsbuild project acting as a consumer. It consumes the remote modules provided by the producers.

For a detailed glossary of terms like consumer, producer, remote, and host, refer to the Module Federation Documentation.

Rspress implements syntax highlighting using Shiki. Highlighting is performed at compile time, which ensures optimal runtime performance and prevents the runtime bundle size from increasing when using multiple programming languages.

To use syntax highlighting, simply wrap your code in standard Markdown code fences. The language is automatically detected at compile time based on the language identifier provided.

console.log('Hello World');

To use this Rsbuild project, install the dependencies using pnpm, then use the provided scripts to run the development server, build for production, or preview the production build locally.

# Install dependencies
pnpm install

# Start the development server
pnpm dev

# Build the app for production
pnpm build

# Preview the production build locally
pnpm preview