docs: add specifics for api meta (#7002)

website/components/ApiMeta.module.scss

@@ -41,3 +41,7 @@
 .experimental {
   background-color: hsl(262deg 100% 90%);
 }
+
+.specific {
+  background-color: hsl(262deg, 10%, 90%);
+}

website/components/ApiMeta.tsx

@@ -16,6 +16,7 @@ export interface ApiMetaProps {
   removedVersion?: string;
   stability?: Stability;
   inline?: boolean;
+  specific?: string[];
 }
 
 export function ApiMeta(props: ApiMetaProps) {
@@ -49,6 +50,12 @@ export function ApiMeta(props: ApiMetaProps) {
           Stability: {props.stability}
         </div>
       )}
+      {props.specific && props.specific.length > 0 && (
+        <span className={`${tagStyle} ${styles.specific}`}>
+          {props.specific.join('/')}{' '}
+          {props.specific.length > 1 ? 'specific' : 'only'}
+        </span>
+      )}
     </div>
   );
 }

website/docs/en/api/loader-api/rspack-specific-properties.mdx

@@ -1,3 +1,5 @@
+import { ApiMeta } from '@components/ApiMeta';
+
 import WebpackLicense from '@components/webpack-license';
 
 <WebpackLicense from="https://webpack.js.org/api/loaders/#webpack-specific-properties" />
@@ -14,8 +16,12 @@ Therefore you should only use them as a last resort. Using them will reduce the
 
 ## this.\_compilation
 
+<ApiMeta specific={['Rspack', 'Webpack']} />
+
 Access to the current Compilation object of Rspack.
 
 ## this.\_compiler
 
+<ApiMeta specific={['Rspack', 'Webpack']} />
+
 Access to the current Compiler object of Rspack.

website/docs/en/api/modules/module-methods.mdx

@@ -98,6 +98,8 @@ import(`./locale/${language}.json`).then(module => {
 
 #### Magic Comments
 
+<ApiMeta specific={['Rspack', 'Webpack']} />
+
 Inline comments to make features work. By adding comments to the import, we can do things such as name our chunk or select different modes. For a full list of these magic comments see the code below followed by an explanation of what these comments do.
 
 ```js
@@ -180,41 +182,10 @@ delete require.cache[require.resolve('dependency')];
 require('dependency') !== d1;
 ```
 
-## Data URI Module
-
-Rspack supports importing Data URI modules using the `import` and `require` syntax.
-
-**import**
-
-```js
-import DataURI from 'data:text/javascript,export default 42';
-```
-
-**require**
-
-```js
-require('data:text/javascript,module.exports = 42');
-```
-
-In addition, Base64 encoded requests are also supported:
-
-```js
-const {
-  number,
-  fn,
-} = require('data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOwpleHBvcnQgZnVuY3Rpb24gZm4oKSB7CiAgcmV0dXJuICJIZWxsbyB3b3JsZCI7Cn0=');
-```
-
-::: tip
-The Data URI module can be used as a method to implement virtual modules, such as combining with a Loader to dynamically load custom modules at runtime.
-:::
-
-## Webpack specific
-
-Aside from the module syntaxes described above, Rspack also support some webpack-specific methods.
-
 ### require.context
 
+<ApiMeta specific={['Rspack', 'Webpack']} />
+
 `require.context` is a function specific to webpack that allows you to dynamically require a set of modules.
 
 You can use `require.context` in your code, and Rspack will parse and reference the matching modules during the build process.
@@ -269,3 +240,32 @@ const context = require.context('./locales', true, /\.json$/, 'lazy');
 ```
 
 > The arguments passed to `require.context()` must be literals.
+
+## Data URI Module
+
+Rspack supports importing Data URI modules using the `import` and `require` syntax.
+
+**import**
+
+```js
+import DataURI from 'data:text/javascript,export default 42';
+```
+
+**require**
+
+```js
+require('data:text/javascript,module.exports = 42');
+```
+
+In addition, Base64 encoded requests are also supported:
+
+```js
+const {
+  number,
+  fn,
+} = require('data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOwpleHBvcnQgZnVuY3Rpb24gZm4oKSB7CiAgcmV0dXJuICJIZWxsbyB3b3JsZCI7Cn0=');
+```
+
+::: tip
+The Data URI module can be used as a method to implement virtual modules, such as combining with a Loader to dynamically load custom modules at runtime.
+:::

website/docs/en/api/modules/module-variables.mdx

@@ -1,6 +1,6 @@
 import WebpackLicense from '@components/webpack-license';
 import Columns from '@components/Columns';
-import { ApiMeta } from '../../../../components/ApiMeta';
+import { ApiMeta } from '@components/ApiMeta';
 
 <WebpackLicense from="https://webpack.docschina.org/api/module-variables/" />
 
@@ -127,6 +127,8 @@ typeof import.meta.url
 
 ### import.meta.webpackContext
 
+<ApiMeta specific={['Rspack', 'Webpack']} />
+
 `import.meta.webpackContext` is a function specific to webpack that allows you to dynamically import a set of modules.
 
 You can use `import.meta.webpackContext` in your code, and Rspack will parse and reference the matching modules during the build process.
@@ -240,14 +242,18 @@ componentsContext.keys().forEach(fileName => {
 
 `import.meta.webpackContext()` streamlines the process of module importation especially when you have a lot of files to manage. When using it, please avoid matching unnecessary files, as this might lead to significantly increased build time and output size.
 
-### import.meta.webpackHot (Rspack/Webpack-specific)
+### import.meta.webpackHot
+
+<ApiMeta specific={['Rspack', 'Webpack']} />
 
 An alias for [`module.hot`](#modulehot), however `import.meta.webpackHot` can be used in strict ESM while `module.hot` can't.
 
-## Runtime (Rspack/Webpack-specific)
+## Runtime
 
 ### \_\_webpack_hash\_\_
 
+<ApiMeta specific={['Rspack', 'Webpack']} />
+
 It provides access to the hash of the compilation.
 
 <Columns>
@@ -268,7 +274,7 @@ __webpack_require__.h = function () {
 
 ### \_\_webpack_runtime_id\_\_
 
-<ApiMeta addedVersion="0.4.4" />
+<ApiMeta addedVersion="0.4.4" specific={['Rspack', 'Webpack']} />
 
 Access the runtime id of current entry.
 
@@ -288,6 +294,8 @@ __webpack_require__.j = '909';
 
 ### \_\_webpack_public_path\_\_
 
+<ApiMeta specific={['Rspack', 'Webpack']} />
+
 Equals the configuration option's [`output.publicPath`](/config/output#outputpublicpath)。
 
 <Columns>
@@ -308,7 +316,7 @@ __webpack_require__.p = 'calculated from document/location';
 
 ### \_\_webpack_base_uri\_\_
 
-<ApiMeta addedVersion="0.3.3" />
+<ApiMeta addedVersion="0.3.3" specific={['Rspack', 'Webpack']} />
 Get or change base URI at runtime.
 
 <Columns>
@@ -327,7 +335,7 @@ __webpack_require__.b = document.baseURI || self.location.href;
 
 ### \_\_webpack_nonce\_\_
 
-<ApiMeta addedVersion="0.4.4" />
+<ApiMeta addedVersion="0.4.4" specific={['Rspack', 'Webpack']} />
 
 Rspack is capable of adding a nonce to all scripts that it loads.
 To activate this feature, set a `__webpack_nonce__` variable and include it in your entry script.
@@ -348,10 +356,12 @@ if (__webpack_require__.nc) {
 
 </Columns>
 
-## Modules (Rspack/Webpack-specific)
+## Modules
 
 ### \_\_webpack_modules\_\_
 
+<ApiMeta specific={['Rspack', 'Webpack']} />
+
 Access to the internal object of all modules.
 
 <Columns>
@@ -372,6 +382,8 @@ __webpack_require__.m = __webpack_modules__;
 
 ### \_\_webpack_module\_\_
 
+<ApiMeta specific={['Rspack', 'Webpack']} />
+
 It provides access to the the current `module`. `module` is not available in strict ESM.
 
 <Columns>
@@ -389,6 +401,8 @@ __webpack_module__
 
 ### \_\_webpack_module\_\_.id
 
+<ApiMeta specific={['Rspack', 'Webpack']} />
+
 It provides access to the ID of current module (`module.id`). `module` is not available in strict ESM.
 
 <Columns>
@@ -406,6 +420,8 @@ __webpack_module__.id
 
 ### \_\_webpack_require\_\_
 
+<ApiMeta specific={['Rspack', 'Webpack']} />
+
 The raw require function.
 This expression isn't parsed by the Parser for dependencies.
 
@@ -424,6 +440,8 @@ __webpack_require__('./dep.js')
 
 ### \_\_non_webpack_require\_\_
 
+<ApiMeta specific={['Rspack', 'Webpack']} />
+
 Generates a `require` function that is not parsed by webpack.
 Can be used to do cool stuff with a global require function if available.
 
@@ -442,7 +460,7 @@ __non_webpack_require__('outer.js')
 
 ### \_\_webpack_is_included\_\_
 
-<ApiMeta addedVersion="0.4.5" />
+<ApiMeta addedVersion="0.4.5" specific={['Rspack', 'Webpack']} />
 
 Test whether or not the given module is bundled by webpack.
 
@@ -463,6 +481,8 @@ if (true) {
 
 ### \_\_resourceQuery
 
+<ApiMeta specific={['Rspack', 'Webpack']} />
+
 The resource query of the current module.
 If the following `require` call was made, then the query string would be available in `file.js`.
 
@@ -481,11 +501,11 @@ __resourceQuery
 
 </Columns>
 
-## Chunks (Rspack/Webpack-specific)
+## Chunks
 
 ### \_\_webpack_chunkname\_\_
 
-<ApiMeta addedVersion="0.4.4" />
+<ApiMeta addedVersion="0.4.4" specific={['Rspack', 'Webpack']} />
 
 Get current chunk name.
 
@@ -549,27 +569,31 @@ import('./module-a').then(moduleA => {
 
 ## Module Federation
 
-<ApiMeta addedVersion="0.4.1" />
-
 ### \_\_webpack_share_scopes\_\_
 
+<ApiMeta addedVersion="0.4.1" specific={['Rspack', 'Webpack']} />
+
 This object is used as a shared scope in the remote container and is filled with the provided modules from a host
 
 ### \_\_webpack_init_sharing\_\_
 
+<ApiMeta addedVersion="0.4.1" specific={['Rspack', 'Webpack']} />
+
 This method is used to initialize modules of a shared scope in the host container.
 
 ## System.js
 
 ### \_\_system_context\_\_
 
+<ApiMeta specific={['Rspack', 'Webpack']} />
+
 Context from System.js when `output.libraryTarget="system"`
 
 ## Rspack
 
 ### \_\_rspack_version\_\_
 
-<ApiMeta addedVersion="0.5.2" />
+<ApiMeta addedVersion="0.5.2" specific={['Rspack']} />
 Current Rspack version, default to version in `@rspack/core/package.json`, can be
 modified through experiments.rspackFuture.bundlerInfo.version.
 
@@ -589,7 +613,7 @@ __webpack_require__.rv = '0.7.4';
 
 ### \_\_rspack_unique_id\_\_
 
-<ApiMeta addedVersion="1.0.0" />
+<ApiMeta addedVersion="1.0.0" specific={['Rspack']} />
 The ID of the current bundler, the value is `bundler={bundler}@{version}`: - `bundler`:
 Default to `"rspack"` and can be modified through `experiments.rspackFuture.bundlerInfo.bundler`.
 - `version`: Default to version in `@rspack/core/package.json` and can be modified

website/docs/en/plugins/rspack/copy-rspack-plugin.mdx

@@ -6,7 +6,7 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
 
 # CopyRspackPlugin
 
-<ApiMeta addedVersion={'0.3.3'} />
+<ApiMeta addedVersion={'0.3.3'} specific={['Rspack']} />
 
 Copies individual files or entire directories, which already exist, to the build directory.
 

website/docs/en/plugins/rspack/css-extract-rspack-plugin.mdx

@@ -3,7 +3,7 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
 
 # CssExtractRspackPlugin
 
-<ApiMeta addedVersion={'0.6.0'} />
+<ApiMeta addedVersion={'0.6.0'} specific={['Rspack']} />
 
 Rspack currently does not support mini-css-extract-plugin, but it can be replaced with this plugin and used in conjunction with css-loader to extract CSS into separate files.
 

website/docs/en/plugins/rspack/html-rspack-plugin.mdx

@@ -3,7 +3,7 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
 
 # HtmlRspackPlugin
 
-<ApiMeta addedVersion={'0.3.3'} />
+<ApiMeta addedVersion={'0.3.3'} specific={['Rspack']} />
 
 `rspack.HtmlRspackPlugin` is a high-performance HTML plugin implemented in Rust. You can use it to generate HTML files for Rspack projects.
 

website/docs/en/plugins/rspack/lightning-css-minimizer-rspack-plugin.mdx

@@ -2,7 +2,7 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
 
 # LightningCssMinimizerRspackPlugin
 
-<ApiMeta addedVersion={'0.7.4'} />
+<ApiMeta addedVersion={'0.7.4'} specific={['Rspack']} />
 
 This plugin uses [lightningcss](https://lightningcss.dev/) to minify CSS assets. See [optimization.minimizer](/config/optimization#optimizationminimizer).
 

website/docs/en/plugins/rspack/swc-css-minimizer-rspack-plugin.mdx

@@ -2,7 +2,7 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
 
 # SwcCssMinimizerRspackPlugin
 
-<ApiMeta addedVersion={'0.3.3'} />
+<ApiMeta addedVersion={'0.3.3'} specific={['Rspack']} />
 
 This plugin can be used to compress CSS assets. See [optimization.minimizer](/config/optimization#optimizationminimizer).
 

website/docs/en/plugins/rspack/swc-js-minimizer-rspack-plugin.mdx

@@ -2,7 +2,7 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
 
 # SwcJsMinimizerRspackPlugin
 
-<ApiMeta addedVersion={'0.3.3'} />
+<ApiMeta addedVersion={'0.3.3'} specific={['Rspack']} />
 
 This plugin can be used to compress JS assets. See [optimization.minimizer](/config/optimization#optimizationminimizer).