docs: use PackageManagerTabs to display install commands

web-infra-dev · Apr 17, 2024 · 5d313bd · 5d313bd
1 parent 808ce2a
commit 5d313bd
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 160 deletions.
diff --git a/website/docs/en/guide/language-support.mdx b/website/docs/en/guide/language-support.mdx
@@ -1,3 +1,5 @@
+import { PackageManagerTabs } from '@theme';
+
 # Language support
 
 ## TypeScript
@@ -199,33 +201,7 @@ Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrat
 
 Please install [tailwindcss](https://tailwindcss.com/),[autoprefixer](https://github.com/postcss/autoprefixer),[postcss](https://postcss.org/) and [postcss-loader](https://www.npmjs.com/package/) in your project.
 
-import { Tabs, Tab } from '@theme';
-
-<Tabs values={[{ label: 'npm' }, { label: 'yarn' }, { label: 'pnpm' }]}>
-  <Tab>
-
-```sh
-npm install -D tailwindcss autoprefixer postcss postcss-loader
-```
-
-  </Tab>
-
-  <Tab>
-
-```sh
-yarn add -D tailwindcss autoprefixer postcss postcss-loader
-```
-
-  </Tab>
-
-  <Tab>
-
-```sh
-pnpm install -D tailwindcss autoprefixer postcss postcss-loader
-```
-
-  </Tab>
-</Tabs>
+<PackageManagerTabs command="add tailwindcss autoprefixer postcss postcss-loader -D" />
 
 #### Configure Tailwind CSS
 

diff --git a/website/docs/en/guide/react.mdx b/website/docs/en/guide/react.mdx
@@ -1,4 +1,4 @@
-import { Tabs, Tab } from '@theme';
+import { PackageManagerTabs } from '@theme';
 import { ApiMeta, Stability } from '../../../components/ApiMeta.tsx';
 
 # React
@@ -91,31 +91,7 @@ Recognizing this issue, we aim to gradually transition users to a more correct a
 
 First you need to install the dependencies:
 
-<Tabs values={[{ label: 'npm' }, { label: 'yarn' }, { label: 'pnpm' }]}>
-   <Tab>
-
-```sh
-npm install -D @rspack/plugin-react-refresh react-refresh
-```
-
-   </Tab>
-
-   <Tab>
-
-```sh
-yarn add -D @rspack/plugin-react-refresh react-refresh
-```
-
-   </Tab>
-
-   <Tab>
-
-```sh
-pnpm install -D @rspack/plugin-react-refresh react-refresh
-```
-
-   </Tab>
-</Tabs>
+<PackageManagerTabs command="add @rspack/plugin-react-refresh react-refresh -D" />
 
 Enabling [React Fast Refresh](https://reactnative.dev/docs/fast-refresh) functionality primarily involves two aspects: code injection and code transformation.
 

diff --git a/website/docs/en/guide/vue.mdx b/website/docs/en/guide/vue.mdx
@@ -1,3 +1,5 @@
+import { PackageManagerTabs } from '@theme';
+
 # Vue
 
 Vue is a very popular front-end framework, and you can start to use Vue with Rspack now.
@@ -136,33 +138,7 @@ Since Rspack supports using `babel-loader`, you can directly use the [@vue/babel
 
 First, you need to install [babel-loader](https://www.npmjs.com/package/babel-loader), [@babel/core](https://www.npmjs.com/package/@babel/core) and [@vue/babel-plugin-jsx](https://www.npmjs.com/package/@vue/babel-plugin-jsx):
 
-import { Tabs, Tab } from '@theme';
-
-<Tabs values={[{ label: 'npm' }, { label: 'yarn' }, { label: 'pnpm' }]}>
-   <Tab>
-
-```sh
-npm install -D babel-loader @babel/core @vue/babel-plugin-jsx
-```
-
-   </Tab>
-
-   <Tab>
-
-```sh
-yarn add -D babel-loader @babel/core @vue/babel-plugin-jsx
-```
-
-   </Tab>
-
-   <Tab>
-
-```sh
-pnpm install -D babel-loader @babel/core @vue/babel-plugin-jsx
-```
-
-   </Tab>
-</Tabs>
+<PackageManagerTabs command="add babel-loader @babel/core @vue/babel-plugin-jsx -D" />
 
 ### Configure
 

diff --git a/website/docs/zh/guide/language-support.mdx b/website/docs/zh/guide/language-support.mdx
@@ -1,3 +1,5 @@
+import { PackageManagerTabs } from '@theme';
+
 # 语言支持
 
 ## TypeScript
@@ -200,33 +202,7 @@ module.exports = {
 
 在你的项目中安装 [tailwindcss](https://tailwindcss.com/)、[autoprefixer](https://github.com/postcss/autoprefixer)、[postcss](https://postcss.org/) 和 [postcss-loader](https://www.npmjs.com/package/postcss-loader) 这些依赖：
 
-import { Tabs, Tab } from '@theme';
-
-<Tabs values={[{ label: 'npm' }, { label: 'yarn' }, { label: 'pnpm' }]}>
-  <Tab>
-
-```sh
-npm install -D tailwindcss autoprefixer postcss postcss-loader
-```
-
-  </Tab>
-
-  <Tab>
-
-```sh
-yarn add -D tailwindcss autoprefixer postcss postcss-loader
-```
-
-  </Tab>
-
-  <Tab>
-
-```sh
-pnpm install -D tailwindcss autoprefixer postcss postcss-loader
-```
-
-  </Tab>
-</Tabs>
+<PackageManagerTabs command="add tailwindcss autoprefixer postcss postcss-loader -D" />
 
 #### 配置 Tailwind CSS
 

diff --git a/website/docs/zh/guide/react.mdx b/website/docs/zh/guide/react.mdx
@@ -1,4 +1,4 @@
-import { Tabs, Tab } from '@theme';
+import { PackageManagerTabs } from '@theme';
 import { ApiMeta, Stability } from '../../../components/ApiMeta.tsx';
 
 # React
@@ -93,31 +93,7 @@ export function Button({ children }) {
 
 首先需要安装相关依赖：
 
-<Tabs values={[{ label: 'npm' }, { label: 'yarn' }, { label: 'pnpm' }]}>
-   <Tab>
-
-```sh
-npm install -D @rspack/plugin-react-refresh react-refresh
-```
-
-   </Tab>
-
-   <Tab>
-
-```sh
-yarn add -D @rspack/plugin-react-refresh react-refresh
-```
-
-   </Tab>
-
-   <Tab>
-
-```sh
-pnpm install -D @rspack/plugin-react-refresh react-refresh
-```
-
-   </Tab>
-</Tabs>
+<PackageManagerTabs command="add @rspack/plugin-react-refresh react-refresh -D" />
 
 [React Fast Refresh](https://reactnative.dev/docs/fast-refresh) 功能的开启主要分为两部分：代码注入和代码转换
 

diff --git a/website/docs/zh/guide/vue.mdx b/website/docs/zh/guide/vue.mdx
@@ -1,3 +1,5 @@
+import { PackageManagerTabs } from '@theme';
+
 # Vue
 
 Vue 是一个非常流行的前端框架，现在你可以配合 Rspack 使用 Vue 的相关功能。
@@ -136,33 +138,7 @@ TypeScript 语法是通过 Rspack 内置的 `builtin:swc-loader` 进行支持的
 
 首先，你需要安装 [babel-loader](https://www.npmjs.com/package/babel-loader)、[@babel/core](https://www.npmjs.com/package/@babel/core) 和 [@vue/babel-plugin-jsx](https://www.npmjs.com/package/@vue/babel-plugin-jsx)：
 
-import { Tabs, Tab } from '@theme';
-
-<Tabs values={[{ label: 'npm' }, { label: 'yarn' }, { label: 'pnpm' }]}>
-  <Tab>
-
-```sh
-npm install -D babel-loader @babel/core @vue/babel-plugin-jsx
-```
-
-  </Tab>
-
-  <Tab>
-
-```sh
-yarn add -D babel-loader @babel/core @vue/babel-plugin-jsx
-```
-
-  </Tab>
-
-  <Tab>
-
-```sh
-pnpm install -D babel-loader @babel/core @vue/babel-plugin-jsx
-```
-
-  </Tab>
-</Tabs>
+<PackageManagerTabs command="add babel-loader @babel/core @vue/babel-plugin-jsx -D" />
 
 ### 添加配置