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

* fix: source map dev tool plugin * docs: improve ProvidePlugin * docs: add webpack license * docs: define plugin * docs: EntryPlugin * fix: ProvidePlugin support process * docs: table for webpack built-plugins status * fix: format * fix: style should be optional * chore: sort by status * fix: notes for ProgressPlugin * Apply suggestions from code review Co-authored-by: fi3ework <fi3ework@gmail.com> --------- Co-authored-by: neverland <jait.chen@foxmail.com> Co-authored-by: fi3ework <fi3ework@gmail.com>
web-infra-dev · Apr 17, 2024 · 0a72d41 · 0a72d41
1 parent 1cc7de6
commit 0a72d41
Show file tree

Hide file tree

Showing 7 changed files with 289 additions and 42 deletions.
diff --git a/website/components/PluginSupportStatusTable.tsx b/website/components/PluginSupportStatusTable.tsx
@@ -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,
+          };
+        })}
+    />
+  );
+};
diff --git a/website/components/builtIns/Table.tsx b/website/components/builtIns/Table.tsx
@@ -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>;
 }
 
@@ -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>
         ))}

diff --git a/website/docs/en/plugins/webpack/entry-plugin.mdx b/website/docs/en/plugins/webpack/entry-plugin.mdx
@@ -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;
+};
+```
diff --git a/website/docs/en/plugins/webpack/index.mdx b/website/docs/en/plugins/webpack/index.mdx
@@ -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 />
diff --git a/website/docs/zh/plugins/webpack/entry-plugin.mdx b/website/docs/zh/plugins/webpack/entry-plugin.mdx
@@ -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;
+};
+```
diff --git a/website/docs/zh/plugins/webpack/index.mdx b/website/docs/zh/plugins/webpack/index.mdx
@@ -0,0 +1,8 @@
+import { Table } from '@builtIns';
+import { PluginSupportStatusTable } from '../../../../components/PluginSupportStatusTable';
+
+# 同步自 webpack 的内置插件
+
+以下表格展示了 Rspack 相对于 webpack 内置插件的支持情况。对于尚未实现的插件或功能，如果你有兴趣参与开发，我们非常欢迎你来参与。
+
+<PluginSupportStatusTable />
diff --git a/website/rspress.config.ts b/website/rspress.config.ts
@@ -320,6 +320,7 @@ function getSidebarConfig(lang: 'zh' | 'en'): Sidebar {
           '同步自 webpack 的内置插件',
           'Webpack-aligned Built-in Plugins',
         ),
+        link: getLink('/plugins/webpack/index'),
         items: [
           {
             text: 'EntryPlugin',