From d8c1ead361c23fb65b73716a915dbcdcba1bf25e Mon Sep 17 00:00:00 2001 From: Timeless0911 <1604889533@qq.com> Date: Thu, 25 Sep 2025 17:45:37 +0800 Subject: [PATCH 1/2] docs: update examples link --- website/docs/en/guide/advanced/module-federation.mdx | 5 +---- website/docs/en/guide/advanced/storybook.mdx | 4 ++-- website/docs/en/guide/solution/index.mdx | 2 +- website/docs/en/guide/solution/nodejs.mdx | 2 +- website/docs/en/guide/solution/react.mdx | 2 +- website/docs/en/guide/solution/vue.mdx | 2 +- website/docs/zh/guide/advanced/module-federation.mdx | 5 +---- website/docs/zh/guide/advanced/storybook.mdx | 4 ++-- website/docs/zh/guide/solution/index.mdx | 2 +- website/docs/zh/guide/solution/nodejs.mdx | 2 +- website/docs/zh/guide/solution/react.mdx | 2 +- website/docs/zh/guide/solution/vue.mdx | 2 +- 12 files changed, 14 insertions(+), 20 deletions(-) diff --git a/website/docs/en/guide/advanced/module-federation.mdx b/website/docs/en/guide/advanced/module-federation.mdx index e93eaad7f..bae54c766 100644 --- a/website/docs/en/guide/advanced/module-federation.mdx +++ b/website/docs/en/guide/advanced/module-federation.mdx @@ -1,5 +1,4 @@ import MF from '../start/components/MF.mdx'; -import { Tab, Tabs } from 'rspress/theme'; # Module Federation @@ -356,10 +355,8 @@ export default defineConfig({ ## Examples -[Rslib Module Federation Example](https://github.com/web-infra-dev/rslib/tree/main/examples/module-federation) +You can refer to the example projects in [Rslib Module Federation Example](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib/module-federation). - `mf-host`: Rsbuild App Consumer - `mf-react-component`: Rslib Module, which is both a producer and a consumer, provides the module to the `mf-host` as a producer, and consumes the `mf-remote` - `mf-remote`: Rsbuild App Producer - -[Rslib Module Federation Storybook Example](https://github.com/web-infra-dev/rslib/tree/main/examples/module-federation/mf-react-component) diff --git a/website/docs/en/guide/advanced/storybook.mdx b/website/docs/en/guide/advanced/storybook.mdx index 9840449ec..eb458a8a1 100644 --- a/website/docs/en/guide/advanced/storybook.mdx +++ b/website/docs/en/guide/advanced/storybook.mdx @@ -98,5 +98,5 @@ Check out more details in the [Storybook Rsbuild documentation](https://storyboo ## Example -- [React component library + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/rslib-react-component) -- [Vue component library + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/rslib-vue3-component) +- [React component library + Rslib + Storybook](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib/react-storybook) +- [Vue component library + Rslib + Storybook](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib/vue-storybook) diff --git a/website/docs/en/guide/solution/index.mdx b/website/docs/en/guide/solution/index.mdx index 6918dfc11..08aec6f06 100644 --- a/website/docs/en/guide/solution/index.mdx +++ b/website/docs/en/guide/solution/index.mdx @@ -8,7 +8,7 @@ When developing a library that runs in the browser, you can package it in both [ When publishing to npm, you can choose not to [minify](/config/rsbuild/output#outputminify) your code or to minify it while providing a [sourcemap](/config/rsbuild/output#outputsourcemap) to enhance the debugging experience for users of your library. For styling, you can use CSS, or CSS pre-processors like Sass, Less, or Stylus, or apply PostCSS for CSS post-processing. Tools like Tailwind CSS can also help in building your styles. Using CSS Modules to create CSS modules is another option. -In terms of resource management, Rslib handles static assets used in your code, such as SVG and PNG files. You can also build a component library of [React](/guide/solution/react), [Preact](https://github.com/web-infra-dev/rslib/tree/main/examples/preact-component-bundle-false), or other frameworks, and use [Storybook](/guide/advanced/storybook) for UI component development and testing. +In terms of resource management, Rslib handles static assets used in your code, such as SVG and PNG files. You can also build a component library of [React](/guide/solution/react), [Preact](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib/preact), or other frameworks, and use [Storybook](/guide/advanced/storybook) for UI component development and testing. Refer to the solutions in this chapter to learn how to use Rslib to develop browser libraries for different frameworks. diff --git a/website/docs/en/guide/solution/nodejs.mdx b/website/docs/en/guide/solution/nodejs.mdx index 8c4ae6b40..95046e213 100644 --- a/website/docs/en/guide/solution/nodejs.mdx +++ b/website/docs/en/guide/solution/nodejs.mdx @@ -1,6 +1,6 @@ # Node.js -In this document, you will learn how to build a Node.js library using Rslib. +In this document, you will learn how to build a Node.js library using Rslib. You can check out Node.js related example projects in [Example](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib). ## Create Node.js project diff --git a/website/docs/en/guide/solution/react.mdx b/website/docs/en/guide/solution/react.mdx index b62cd1c40..7c8ae522f 100644 --- a/website/docs/en/guide/solution/react.mdx +++ b/website/docs/en/guide/solution/react.mdx @@ -1,6 +1,6 @@ # React -In this document, you will learn how to build a React component library with Rslib. You can check out React related demo projects in the [examples](https://github.com/web-infra-dev/rslib/tree/main/examples). +In this document, you will learn how to build a React component library with Rslib. You can check out React related example projects in [Examples](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib). ## Create React project diff --git a/website/docs/en/guide/solution/vue.mdx b/website/docs/en/guide/solution/vue.mdx index 15c7a2eaa..8bb2bb2fd 100644 --- a/website/docs/en/guide/solution/vue.mdx +++ b/website/docs/en/guide/solution/vue.mdx @@ -1,6 +1,6 @@ # Vue -In this document, you will learn how to build a Vue component library using Rslib. You can check out Vue related demo projects in the [examples](https://github.com/web-infra-dev/rslib/tree/main/examples). +In this document, you will learn how to build a Vue component library using Rslib. You can check out Vue related example projects in [Examples](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib). ::: note diff --git a/website/docs/zh/guide/advanced/module-federation.mdx b/website/docs/zh/guide/advanced/module-federation.mdx index f5086037c..5a147d8ed 100644 --- a/website/docs/zh/guide/advanced/module-federation.mdx +++ b/website/docs/zh/guide/advanced/module-federation.mdx @@ -1,5 +1,4 @@ import MF from '../start/components/MF.mdx'; -import { Tab, Tabs } from 'rspress/theme'; # 模块联邦 @@ -355,10 +354,8 @@ export default defineConfig({ ## 示例 -[Rslib 模块联邦示例](https://github.com/web-infra-dev/rslib/tree/main/examples/module-federation) +你可以在 [Rslib 模块联邦示例](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib/module-federation) 中查看相关项目。 - `mf-host`: Rsbuild App 消费者 - `mf-react-component`: Rslib Module, 同时是消费者和生产者, 作为生产者向 `mf-host` 提供模块， 并消费 `mf-remote` - `mf-remote`: Rsbuild App 生产者 - -[Rslib 模块联邦 Storybook 示例](https://github.com/web-infra-dev/rslib/tree/main/examples/module-federation/mf-react-component) diff --git a/website/docs/zh/guide/advanced/storybook.mdx b/website/docs/zh/guide/advanced/storybook.mdx index 4a838dad8..bc4927cf9 100644 --- a/website/docs/zh/guide/advanced/storybook.mdx +++ b/website/docs/zh/guide/advanced/storybook.mdx @@ -98,5 +98,5 @@ npx storybook build // 构建静态文件 ## 示例 -- [React 组件库 + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/rslib-react-component) -- [Vue 组件库 + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/vue3) +- [React 组件库 + Rslib + Storybook](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib/react-storybook) +- [Vue 组件库 + Rslib + Storybook](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib/vue-storybook) diff --git a/website/docs/zh/guide/solution/index.mdx b/website/docs/zh/guide/solution/index.mdx index d9078f116..c5a8d42e6 100644 --- a/website/docs/zh/guide/solution/index.mdx +++ b/website/docs/zh/guide/solution/index.mdx @@ -8,7 +8,7 @@ 发布到 npm 时，你可以选择不压缩代码或[压缩代码](/config/rsbuild/output#outputminify)，同时提供[sourcemap](/config/rsbuild/output#outputsourcema) 以增强库使用者的调试体验。样式上，可以使用 CSS 或 CSS 预处理器，如 Sass、Less 或 Stylus 等，或使用 PostCSS 用于 CSS 后处理。 Tailwind CSS 等工具也可以帮助你构建样式，也可以使用 CSS Modules。 -在资源处理方面，Rslib 处理代码中使用的静态资源，例如 SVG 和 PNG 文件。你还可以构建[React](/guide/solution/react)、[Preact](https://github.com/web-infra-dev/rslib/tree/main/examples/preact-component-bundle-false) 或其他框架，使用 [Storybook](/guide/advanced/storybook) 进行 UI 组件开发和测试。 +在资源处理方面，Rslib 处理代码中使用的静态资源，例如 SVG 和 PNG 文件。你还可以构建[React](/guide/solution/react)、[Preact](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib/preact) 或其他框架，使用 [Storybook](/guide/advanced/storybook) 进行 UI 组件开发和测试。 参考本章的解决方案，了解如何使用 Rslib 开发一个在浏览器中使用的库，给多种框架使用。 diff --git a/website/docs/zh/guide/solution/nodejs.mdx b/website/docs/zh/guide/solution/nodejs.mdx index 40fdb5abe..f3e2c2dc4 100644 --- a/website/docs/zh/guide/solution/nodejs.mdx +++ b/website/docs/zh/guide/solution/nodejs.mdx @@ -1,6 +1,6 @@ # Node.js -在本文档中，你将学习如何使用 Rslib 构建 Node.js 库。 +在本文档中，你将学习如何使用 Rslib 构建 Node.js 库，你可在 [示例](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib) 中查看 Node.js 相关演示项目。 ## 创建 Node.js 项目 diff --git a/website/docs/zh/guide/solution/react.mdx b/website/docs/zh/guide/solution/react.mdx index 624f1dc9b..4450daf50 100644 --- a/website/docs/zh/guide/solution/react.mdx +++ b/website/docs/zh/guide/solution/react.mdx @@ -1,6 +1,6 @@ # React -在本文档中，你将学习如何使用 Rslib 构建 React 组件库，你可在 [示例](https://github.com/web-infra-dev/rslib/tree/main/examples) 中查看 React 相关演示项目。 +在本文档中，你将学习如何使用 Rslib 构建 React 组件库，你可在 [示例](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib) 中查看 React 相关演示项目。 ## 创建 React 项目 diff --git a/website/docs/zh/guide/solution/vue.mdx b/website/docs/zh/guide/solution/vue.mdx index 2007e419c..5e88fc3ec 100644 --- a/website/docs/zh/guide/solution/vue.mdx +++ b/website/docs/zh/guide/solution/vue.mdx @@ -1,6 +1,6 @@ # Vue -在本文档中，你将学习如何使用 Rslib 构建 Vue 组件库。你可在 [示例](https://github.com/web-infra-dev/rslib/tree/main/examples) 中查看 Vue 相关演示项目。 +在本文档中，你将学习如何使用 Rslib 构建 Vue 组件库，你可在 [示例](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib) 中查看 Vue 相关演示项目。 ::: note From f9464fa6faa970d4ecaf693ae22616ccd029941b Mon Sep 17 00:00:00 2001 From: Timeless0911 <1604889533@qq.com> Date: Thu, 25 Sep 2025 17:47:46 +0800 Subject: [PATCH 2/2] chore: update --- website/docs/en/guide/solution/nodejs.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/en/guide/solution/nodejs.mdx b/website/docs/en/guide/solution/nodejs.mdx index 95046e213..f2247f4f2 100644 --- a/website/docs/en/guide/solution/nodejs.mdx +++ b/website/docs/en/guide/solution/nodejs.mdx @@ -1,6 +1,6 @@ # Node.js -In this document, you will learn how to build a Node.js library using Rslib. You can check out Node.js related example projects in [Example](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib). +In this document, you will learn how to build a Node.js library using Rslib. You can check out Node.js related example projects in [Examples](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib). ## Create Node.js project