Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: table shows the support status of built-in plugins #6254

Merged
merged 13 commits into from
Apr 17, 2024
202 changes: 202 additions & 0 deletions website/components/PluginSupportStatusTable.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
import React from 'react';
import { Table } from '@builtIns/Table';
import { useLang } from 'rspress/runtime';

enum SupportStatus {
NotSupported,
PartiallySupported,
FullySupported,
}

const SUPPORT_STATUS_LOCALIZED = {
[SupportStatus.NotSupported]: {
symbol: '🔴',
en: 'Not Supported',
zh: '不支持',
},
[SupportStatus.PartiallySupported]: {
symbol: '🟡',
en: 'Partially Supported',
zh: '部分支持',
},
[SupportStatus.FullySupported]: {
symbol: '🟢',
en: 'Fully Supported',
zh: '完全支持',
},
};

interface PluginSupportStatus {
name: string;
status: SupportStatus;
notes?: {
en: string;
zh: string;
};
}

const pluginSupportStatusList: PluginSupportStatus[] = [
{
name: 'AutomaticPrefetchPlugin',
status: SupportStatus.NotSupported,
},
{
name: 'BannerPlugin',
status: SupportStatus.PartiallySupported,
notes: {
en: '`stage` option not supported',
zh: '不支持 `stage` 选项',
},
},
{
name: 'ContextExclusionPlugin',
status: SupportStatus.NotSupported,
},
{
name: 'ContextReplacementPlugin',
status: SupportStatus.NotSupported,
},
{
name: 'DefinePlugin',
status: SupportStatus.PartiallySupported,
notes: {
en: '`rspack.DefinePlugin.runtimeValue` function not supported',
zh: '不支持 `rspack.DefinePlugin.runtimeValue` 函数',
},
},
{
name: 'DllPlugin',
status: SupportStatus.NotSupported,
},
{
name: 'EnvironmentPlugin',
status: SupportStatus.FullySupported,
},
{
name: 'EvalSourceMapDevToolPlugin',
status: SupportStatus.PartiallySupported,
notes: {
en: '`test`, `include`, `exclude`, `moduleFilenameTemplate`, `protocol` options not supported',
zh: '不支持 `test`、`include`、`exclude`、`moduleFilenameTemplate`、`protocol` 选项',
},
},
{
name: 'HashedModuleIdsPlugin',
status: SupportStatus.NotSupported,
},
{
name: 'HotModuleReplacementPlugin',
status: SupportStatus.FullySupported,
},
{
name: 'IgnorePlugin',
status: SupportStatus.FullySupported,
},
{
name: 'LimitChunkCountPlugin',
status: SupportStatus.FullySupported,
},
{
name: 'MinChunkSizePlugin',
status: SupportStatus.NotSupported,
},
{
name: 'ModuleConcatenationPlugin',
status: SupportStatus.FullySupported,
},
{
name: 'ModuleFederationPlugin',
status: SupportStatus.FullySupported,
},
{
name: 'NoEmitOnErrorsPlugin',
status: SupportStatus.NotSupported,
},
{
name: 'NormalModuleReplacementPlugin',
status: SupportStatus.FullySupported,
},
{
name: 'PrefetchPlugin',
status: SupportStatus.NotSupported,
},
{
name: 'ProfilingPlugin',
status: SupportStatus.NotSupported,
},
{
name: 'ProgressPlugin',
status: SupportStatus.PartiallySupported,
notes: {
zh: '仅支持 `profile` 选项',
en: 'Only `profile` option supported',
},
},
{
name: 'ProvidePlugin',
status: SupportStatus.FullySupported,
},
{
name: 'SourceMapDevToolPlugin',
status: SupportStatus.FullySupported,
},
{
name: 'SplitChunksPlugin',
status: SupportStatus.PartiallySupported,
notes: {
en: '`minSizeReduction`, `usedExports` options not supported',
zh: '不支持 `minSizeReduction`、`usedExports` 选项',
},
},
{
name: 'WatchIgnorePlugin',
status: SupportStatus.NotSupported,
},
];

export const PluginSupportStatusTable: React.FC = () => {
const lang = useLang();

return (
<Table
header={[
{
name: lang === 'zh' ? '插件' : 'Plugin',
key: 'name',
},
{
name: lang === 'zh' ? '支持情况' : 'Support status',
key: 'status',
style: {
width: '200px',
},
},
{
name: lang === 'zh' ? '备注' : 'Notes',
key: 'notes',
},
]}
body={pluginSupportStatusList
.sort((a, b) => b.status - a.status)
.map(({ name, status, notes }) => {
const { symbol, en, zh } = SUPPORT_STATUS_LOCALIZED[status];
const statusText = `${symbol} ${lang === 'zh' ? zh : en}`;

const notesText = (() => {
if (notes) {
return lang === 'zh' ? notes.zh : notes.en;
}
if (status === SupportStatus.NotSupported) {
return lang === 'zh' ? '待实现' : 'To be implemented';
}
})();

return {
name,
status: statusText,
notes: notesText,
};
})}
/>
);
};
8 changes: 6 additions & 2 deletions website/components/builtIns/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@ import {
interface TableProps {
children?: ReactNode[];
body?: any[];
header?: { name: string | JSX.Element; key: string }[];
header?: {
name: string | JSX.Element;
key: string;
style?: React.CSSProperties;
}[];
tableStyle?: Record<string, string>;
}

Expand Down Expand Up @@ -58,7 +62,7 @@ export function Table(props: TableProps) {
<ModernTable style={tableStyle}>
<ModernTableRow>
{header.map(item => (
<ModernTableHead key={item.key}>
<ModernTableHead key={item.key} style={item.style}>
{renderHeaderItem(item.name)}
</ModernTableHead>
))}
Expand Down
52 changes: 32 additions & 20 deletions website/docs/en/plugins/webpack/entry-plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,40 @@ import { ApiMeta } from '../../../../components/ApiMeta.tsx';

<ApiMeta addedVersion={'0.3.3'} />

Add an entry chunk at compile time.
Adds an entry chunk on compilation. The chunk is named `options.name` and contains only one module (plus dependencies). The module is resolved from `entry` in `context` (absolute path).

```js
new rspack.EntryPlugin(context, entry, options);
```

- context
- **Type:** `string`
- **Description:** The path requested by the entry module is resolved from the context path.
- entry
- **Type:** `string`
- **Description:** The path requested by the entry module
- options
- **Type:**
```ts
type EntryOptions = {
name?: string;
runtime?: EntryRuntime;
chunkLoading?: ChunkLoading;
asyncChunks?: boolean;
publicPath?: PublicPath;
baseUri?: string;
filename?: Filename;
};
```
## Options

### context

The module is resolved from `entry` in `context` (absolute path).

- **Type:** `string`

### entry

The request path for the entry module.

- **Type:** `string`

### options

To adjust settings related to the entry module.

- **Type:**

```ts
type EntryOptions = {
name?: string;
runtime?: EntryRuntime;
chunkLoading?: ChunkLoading;
asyncChunks?: boolean;
publicPath?: PublicPath;
baseUri?: string;
filename?: Filename;
};
```
8 changes: 8 additions & 0 deletions website/docs/en/plugins/webpack/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { Table } from '@builtIns';
import { PluginSupportStatusTable } from '../../../../components/PluginSupportStatusTable';

# Synchronized Built-in Plugins from webpack

The table below shows the support status of Rspack for the built-in plugins in webpack. If you are interested in participating in the development of plugins or features that have not yet been implemented, we would be very happy to have you join us.

<PluginSupportStatusTable />
52 changes: 32 additions & 20 deletions website/docs/zh/plugins/webpack/entry-plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,40 @@ import { ApiMeta } from '../../../../components/ApiMeta.tsx';

<ApiMeta addedVersion={'0.3.3'} />

在编译时添加一个入口 chunk。
在编译时添加一个入口 chunk。该 chunk 的名称为 `options.name`,仅包含一个模块(以及依赖项)。该模块是通过 `entry` 在 `context` 下(绝对路径)解析出来的。

```js
new rspack.EntryPlugin(context, entry, options);
```

- context
- **类型:** `string`
- **描述:** 入口模块请求的路径会从该 context 路径下进行 resolve
- entry
- **类型:** `string`
- **描述:** 入口模块请求的路径
- options
- **类型:**
```ts
type EntryOptions = {
name?: string;
runtime?: EntryRuntime;
chunkLoading?: ChunkLoading;
asyncChunks?: boolean;
publicPath?: PublicPath;
baseUri?: string;
filename?: Filename;
};
```
## 选项

### context

入口模块的请求路径会在该 `context` 路径下解析为绝对路径。

- **类型:** `string`

### entry

入口模块的请求路径。

- **类型:** `string`

### options

调整入口模块的相关设置。

- **类型:**

```ts
type EntryOptions = {
name?: string;
runtime?: EntryRuntime;
chunkLoading?: ChunkLoading;
asyncChunks?: boolean;
publicPath?: PublicPath;
baseUri?: string;
filename?: Filename;
};
```
8 changes: 8 additions & 0 deletions website/docs/zh/plugins/webpack/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { Table } from '@builtIns';
import { PluginSupportStatusTable } from '../../../../components/PluginSupportStatusTable';

# 同步自 webpack 的内置插件

以下表格展示了 Rspack 相对于 webpack 内置插件的支持情况。对于尚未实现的插件或功能,如果你有兴趣参与开发,我们非常欢迎你来参与。

<PluginSupportStatusTable />
1 change: 1 addition & 0 deletions website/rspress.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,7 @@ function getSidebarConfig(lang: 'zh' | 'en'): Sidebar {
'同步自 webpack 的内置插件',
'Webpack-aligned Built-in Plugins',
),
link: getLink('/plugins/webpack/index'),
items: [
{
text: 'EntryPlugin',
Expand Down
Loading