diff --git a/website/components/PluginSupportStatusTable.tsx b/website/components/PluginSupportStatusTable.tsx new file mode 100644 index 00000000000..63b0a34cfe7 --- /dev/null +++ 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 ( + 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 index ff83b70fae8..b945122e86f 100644 --- 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; } @@ -58,7 +62,7 @@ export function Table(props: TableProps) { {header.map(item => ( - + {renderHeaderItem(item.name)} ))} diff --git a/website/docs/en/plugins/webpack/entry-plugin.mdx b/website/docs/en/plugins/webpack/entry-plugin.mdx index abf7e7dac5d..769d4171fb9 100644 --- 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'; -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 new file mode 100644 index 00000000000..55ed96fb2a3 --- /dev/null +++ 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. + + diff --git a/website/docs/zh/plugins/webpack/entry-plugin.mdx b/website/docs/zh/plugins/webpack/entry-plugin.mdx index db7630c73bb..aea8288e1a4 100644 --- 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'; -在编译时添加一个入口 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 new file mode 100644 index 00000000000..cbe5069a467 --- /dev/null +++ b/website/docs/zh/plugins/webpack/index.mdx @@ -0,0 +1,8 @@ +import { Table } from '@builtIns'; +import { PluginSupportStatusTable } from '../../../../components/PluginSupportStatusTable'; + +# 同步自 webpack 的内置插件 + +以下表格展示了 Rspack 相对于 webpack 内置插件的支持情况。对于尚未实现的插件或功能，如果你有兴趣参与开发，我们非常欢迎你来参与。 + + diff --git a/website/rspress.config.ts b/website/rspress.config.ts index 1083d869ac1..f41374da64e 100644 --- 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',