Skip to content

Commit 530a220

Browse files
chenjiahanchenjiahan
authored
docs: add a standalone ecosystem page (#10004)
* docs: add a standalone ecosystem page * docs: add tags * docs: opacity * docs
1 parent 3d38945 commit 530a220

File tree

10 files changed

+279
-151
lines changed

10 files changed

+279
-151
lines changed

‎pnpm-lock.yaml

+18-18
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website/components/Tag.scss

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.ant-tag {
2+
border: none;
3+
}
4+
5+
.dark {
6+
.ant-tag {
7+
background-color: transparent;
8+
}
9+
10+
.ant-tag-geekblue {
11+
color: #a8c1f8;
12+
border: 1px solid rgba(168, 193, 248, 0.4);
13+
}
14+
15+
.ant-tag-purple {
16+
color: #cda8f0;
17+
border: 1px solid rgba(205, 168, 240, 0.4);
18+
}
19+
}

‎website/components/Tag.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { Tag } from '@rstack-dev/doc-ui/antd';
2+
import './Tag.scss';
3+
4+
export { Tag };

‎website/docs/en/guide/start/_meta.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
["introduction", "quick-start"]
1+
["introduction", "quick-start", "ecosystem"]

‎website/docs/en/guide/start/ecosystem.mdx

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import { Tag } from '@components/Tag';
2+
3+
# Ecosystem
4+
5+
## Rstack toolchain
6+
7+
Rstack is a high-performance, unified JavaScript toolchain based on Rspack, developed and maintained by the Rspack team.
8+
9+
### Rsbuild
10+
11+
<Tag color="geekblue">Build tool</Tag>
12+
13+
[Rsbuild](https://github.com/web-infra-dev/rsbuild) is a high-performance build tool powered by Rspack. It provides a set of thoughtfully designed default build configs, offering an out-of-the-box development experience and can fully unleash the performance advantages of Rspack.
14+
15+
### Rspress
16+
17+
<Tag color="geekblue">Static site generator</Tag>
18+
<Tag color="purple">React</Tag>
19+
20+
[Rspress](https://github.com/web-infra-dev/rspress) is a static site generator based on Rsbuild, React and MDX. It comes with a default documentation theme, and you can quickly build a documentation site with Rspress. You can also customize the theme to meet your personalized static site needs, such as blog sites, product homepages, etc.
21+
22+
### Rslib
23+
24+
<Tag color="geekblue">Library development tool</Tag>
25+
26+
[Rslib](https://github.com/web-infra-dev/rslib) is a library development tool based on Rsbuild, which reuses the carefully designed build configuration and plugin system of Rsbuild. It allows developers to create JavaScript libraries in a simple and intuitive way.
27+
28+
### Rsdoctor
29+
30+
<Tag color="geekblue">Build analyzer</Tag>
31+
32+
[Rsdoctor](https://github.com/web-infra-dev/rsdoctor) is a build analyzer that can visually display the build process, such as compilation time, code changes before and after compilation, module reference relationships, duplicate modules, etc.
33+
34+
### Rstest
35+
36+
<Tag color="geekblue">Testing framework</Tag>
37+
38+
[Rstest](https://github.com/web-infra-dev/rstest) is a testing framework powered by Rspack. It delivers comprehensive, first-class support for the Rspack ecosystem, enabling seamless integration into existing Rspack-based projects.
39+
40+
## Community integrations
41+
42+
### Angular Rspack
43+
44+
<Tag color="geekblue">Build tool</Tag>
45+
<Tag color="purple">Angular</Tag>
46+
47+
[Angular Rspack](https://github.com/nrwl/angular-rspack) is a set of plugins and tools to make it easy and straightforward to build Angular applications with Rspack and Rsbuild.
48+
49+
### Docusaurus
50+
51+
<Tag color="geekblue">Static site generator</Tag>
52+
<Tag color="purple">React</Tag>
53+
54+
[Docusaurus](https://docusaurus.io/) is a static site generator for building, deploying, and maintaining open source project websites easily.
55+
56+
Docusaurus supports Rspack as the bundler since v3.6, see [Docusaurus Faster](https://docusaurus.io/blog/releases/3.6#docusaurus-faster) for details.
57+
58+
### Modern.js
59+
60+
<Tag color="geekblue">Web framework</Tag>
61+
<Tag color="purple">React</Tag>
62+
63+
[Modern.js](https://modernjs.dev/en/) is a Rsbuild-based progressive React framework that supports nested routes, SSR, and provides out-of-the-box CSS solutions such as styled components and Tailwind CSS.
64+
65+
### Next.js
66+
67+
<Tag color="geekblue">Web framework</Tag>
68+
<Tag color="purple">React</Tag>
69+
70+
[Next.js](https://nextjs.org/) is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.
71+
72+
Rspack team and Next.js team have partnered to provide the `next-rspack` plugin. This plugin allows you to use Rspack as the bundler for Next.js, see [Next.js guide](/guide/tech/next) for details.
73+
74+
### Nuxt
75+
76+
<Tag color="geekblue">Web framework</Tag>
77+
<Tag color="purple">Vue</Tag>
78+
79+
[Nuxt](https://nuxt.com/) is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js.
80+
81+
Nuxt v3.14 introduces a new first-class Nuxt builder for Rspack, see [Nuxt 3.14](https://nuxt.com/blog/v3-14) for details.
82+
83+
### Nx
84+
85+
<Tag color="geekblue">Build system</Tag>
86+
<Tag color="purple">Monorepo</Tag>
87+
88+
[Nx](https://nx.dev/) is a powerful open-source build system that provides tools and techniques for enhancing developer productivity, optimizing CI performance, and maintaining code quality.
89+
90+
Rspack team and Nx team have collaborated to provide the [Rspack Nx plugin](https://nx.dev/nx-api/rspack). This plugin contains executors, generators, and utilities for managing Rspack projects in an Nx Workspace.
91+
92+
### Rspeedy
93+
94+
<Tag color="geekblue">Build tool</Tag>
95+
<Tag color="purple">Lynx</Tag>
96+
97+
[Rspeedy](https://lynxjs.org/rspeedy/) is an Rspack-based build tool designed specifically for Lynx applications. [Lynx](https://lynxjs.org/) is a family of technologies empowering developers to use their existing web skills to create truly native UIs for both mobile and web from a single codebase.
98+
99+
### Re.Pack
100+
101+
<Tag color="geekblue">Build tool</Tag>
102+
<Tag color="purple">React Native</Tag>
103+
104+
[Re.Pack](https://github.com/callstack/repack) is a build tool for building your React Native application.
105+
106+
Re.Pack v5 uses Rspack and React Native community CLI's plugin system to allow you to bundle your application using Rspack and easily switch from Metro.
107+
108+
### Storybook
109+
110+
<Tag color="geekblue">UI development</Tag>
111+
112+
[Storybook Rsbuild](https://storybook.rsbuild.dev/) allows you to use Rsbuild as the build tool for Storybook, and provides UI framework integrations like React and Vue.
113+
114+
## More
115+
116+
Visit [awesome-rspack](https://github.com/web-infra-dev/awesome-rspack) to discover more projects within the Rspack ecosystem.

‎website/docs/en/guide/start/quick-start.mdx

+6-65
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,12 @@ Get up to speed quickly with a new Rspack based project.
66

77
- [Create a new project](#create-a-new-project): Use the CLI to create a brand-new Rspack or Rsbuild project.
88
- [Migrating from existing projects](#migrating-from-existing-projects): Migrate from a webpack-based project to Rspack.
9-
- [Ecosystem](#ecosystem): Discover projects within the Rspack community ecosystem.
9+
10+
## Ecosystem
11+
12+
As a low-level bundler, Rspack has a rich ecosystem that includes various frameworks, tools, and solutions. These ecosystem projects cover different aspects from frameworks to development tools, meeting diverse development needs across scenarios and providing an out-of-the-box experience.
13+
14+
See the [Ecosystem](/guide/start/ecosystem) page to explore these ecosystem projects.
1015

1116
## Setup environment
1217

@@ -145,67 +150,3 @@ npx install-rspack --version latest # Install the latest version
145150
npx install-rspack --version canary # Install the canary version
146151
npx install-rspack --version 1.0.0-canary-d614005-20250101082730 # Install the specified canary version
147152
```
148-
149-
## Ecosystem
150-
151-
### Rspress
152-
153-
[Rspress](https://rspress.dev) is a static site generator based on Rsbuild, React and MDX. It comes with a default documentation theme, and you can quickly build a documentation site with Rspress. You can also customize the theme to meet your personalized static site needs, such as blog sites, product homepages, etc.
154-
155-
### Rslib
156-
157-
[Rslib](https://github.com/web-infra-dev/rslib) is a library development tool based on Rsbuild, which reuses the carefully designed build configuration and plugin system of Rsbuild. It allows developers to create JavaScript libraries in a simple and intuitive way.
158-
159-
### Rsdoctor
160-
161-
[Rsdoctor](https://rsdoctor.dev/) is a build analyzer that can visually display the build process, such as compilation time, code changes before and after compilation, module reference relationships, duplicate modules, etc.
162-
163-
### Rspeedy
164-
165-
[Rspeedy](https://lynxjs.org/rspeedy/) is an Rspack-based build tool designed specifically for Lynx applications. [Lynx](https://lynxjs.org/) is a family of technologies empowering developers to use their existing web skills to create truly native UIs for both mobile and web from a single codebase.
166-
167-
### Modern.js
168-
169-
[Modern.js](https://modernjs.dev/en/) is a Rspack-based progressive React framework that supports nested routes, SSR, and provides out-of-the-box CSS solutions such as styled components and Tailwind CSS.
170-
171-
### Next.js
172-
173-
[Next.js](https://nextjs.org/) is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.
174-
175-
Rspack team and Next.js team have partnered to provide the `next-rspack` plugin. This plugin allows you to use Rspack as the bundler for Next.js, see [Next.js guide](/guide/tech/next) for details.
176-
177-
### Nx
178-
179-
[Nx](https://nx.dev/) is a powerful open-source build system that provides tools and techniques for enhancing developer productivity, optimizing CI performance, and maintaining code quality.
180-
181-
Rspack team and Nx team have collaborated to provide the [Rspack Nx plugin](https://nx.dev/nx-api/rspack). This plugin contains executors, generators, and utilities for managing Rspack projects in an Nx Workspace.
182-
183-
### Docusaurus
184-
185-
[Docusaurus](https://docusaurus.io/) is a project for building, deploying, and maintaining open source project websites easily.
186-
187-
Docusaurus v3.6 supports Rspack as the bundler, see [Docusaurus Faster](https://docusaurus.io/blog/releases/3.6#docusaurus-faster) for details.
188-
189-
### Storybook
190-
191-
[Storybook Rsbuild](https://storybook.rsbuild.dev/) allows you to use Rsbuild as the build tool for Storybook, and provides UI framework integrations like React and Vue.
192-
193-
### Nuxt
194-
195-
[Nuxt](https://nuxt.com/) is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js.
196-
197-
Nuxt v3.14 introduces a new first-class Nuxt builder for Rspack, see [Nuxt 3.14](https://nuxt.com/blog/v3-14) for details.
198-
199-
### Re.Pack
200-
201-
[Re.Pack](https://github.com/callstack/repack) is a build tool for building your React Native application.
202-
203-
Re.Pack v5 uses Rspack and React Native community CLI's plugin system to allow you to bundle your application using Rspack and easily switch from Metro.
204-
205-
### Angular Rspack
206-
207-
[Angular Rspack](https://github.com/nrwl/angular-rspack) is a set of plugins and tools to make it easy and straightforward to build Angular applications with Rspack and Rsbuild.
208-
209-
### More
210-
211-
Visit [awesome-rspack](https://github.com/web-infra-dev/awesome-rspack) to discover more projects within the Rspack ecosystem.

‎website/docs/zh/guide/start/_meta.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
["introduction", "quick-start"]
1+
["introduction", "quick-start", "ecosystem"]

0 commit comments

Comments
 (0)