From a0780047e26fb2f990f702854b1458e1a7a958fd Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Tue, 18 Oct 2022 19:44:20 +0800
Subject: [PATCH 1/2] docs: clean up js-with-links

---
 .../Configuration/Configuration.jsx           |  88 ------------
 src/components/Page/Page.jsx                  |  13 +-
 src/content/api/node.mdx                      | 130 ++++++++++--------
 src/content/api/stats.mdx                     |  63 ++++-----
 src/content/concepts/loaders.mdx              |  19 ++-
 src/content/configuration/module.mdx          |  16 +--
 yarn.lock                                     |  26 +---
 7 files changed, 118 insertions(+), 237 deletions(-)
 delete mode 100644 src/components/Configuration/Configuration.jsx

diff --git a/src/components/Configuration/Configuration.jsx b/src/components/Configuration/Configuration.jsx
deleted file mode 100644
index 0c437abd3f7b..000000000000
--- a/src/components/Configuration/Configuration.jsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Children, isValidElement } from 'react';
-import { Details } from './components';
-import PropTypes from 'prop-types';
-
-const detailComponentsList = [
-  'link',
-  'mode',
-  'entry',
-  'path',
-  'filename',
-  'publicPath',
-  'library',
-  'libraryType',
-  'libraryName',
-  'advancedLibrary',
-  'advancedOutput',
-  'expertOutput',
-  'expertOutputB',
-  'expert',
-  'advancedConditions',
-  'moduleType',
-  'advancedActions',
-  'advancedModule',
-  'modules',
-  'alias',
-  'advancedResolve',
-  'expertResolve',
-  'hints',
-  'devtool',
-  'target',
-  'externals',
-  'externalsType',
-  'externalsPresets',
-  'ignoreWarnings',
-  'stats',
-  'preset',
-  'advancedGlobal',
-  'advancedAssets',
-  'advancedChunkGroups',
-  'advancedChunks',
-  'advancedModules',
-  'expertModules',
-  'advancedStatsOptimization',
-  'advancedOptimization',
-  'cacheGroupAdvancedSelectors',
-  'cacheGroupAdvancedEffects',
-  'advancedSelectors',
-  'advancedEffects',
-  'fallbackCacheGroup',
-  'advanced',
-  'advancedCaching',
-  'advancedBuild',
-];
-export const Pre = (props) => {
-  // eslint-disable-next-line
-  const newChildren = Children.map(props.children.props.children, (child) => {
-    if (isValidElement(child)) {
-      if (child.props.className.includes('keyword')) {
-        if (!detailComponentsList.includes(child.props.componentname))
-          return child;
-        return (
-          <Details
-            myChilds={child.props.children.slice(
-              4,
-              Children.count(child.props.children) - 4
-            )}
-            url={child.props.url}
-          />
-        );
-      }
-    }
-
-    return child;
-  });
-
-  const newProps = {
-    children: newChildren,
-  };
-
-  return (
-    <pre className={props?.children?.props?.className ?? ''}>
-      <code {...newProps} />
-    </pre>
-  );
-};
-Pre.propTypes = {
-  children: PropTypes.node,
-};
diff --git a/src/components/Page/Page.jsx b/src/components/Page/Page.jsx
index 7e5ec9d700ec..da6e72f32620 100644
--- a/src/components/Page/Page.jsx
+++ b/src/components/Page/Page.jsx
@@ -1,5 +1,5 @@
 // Import External Dependencies
-import { Children, isValidElement, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useLocation } from 'react-router-dom';
 
@@ -8,7 +8,6 @@ import PageLinks from '../PageLinks/PageLinks';
 import Markdown from '../Markdown/Markdown';
 import Contributors from '../Contributors/Contributors';
 import { PlaceholderString } from '../Placeholder/Placeholder';
-import { Pre } from '../Configuration/Configuration';
 import AdjacentPages from './AdjacentPages';
 
 // Load Styling
@@ -91,16 +90,6 @@ export default function Page(props) {
 
   if (typeof content === 'function') {
     contentRender = content({}).props.children;
-    contentRender = Children.map(contentRender, (child) => {
-      if (isValidElement(child)) {
-        if (child.props.mdxType === 'pre') {
-          // eslint-disable-next-line
-          return <Pre children={child.props.children} />;
-        }
-      }
-
-      return child;
-    });
   } else {
     contentRender = (
       <div
diff --git a/src/content/api/node.mdx b/src/content/api/node.mdx
index 30eb4e28e73e..cdb5bb32f3e7 100644
--- a/src/content/api/node.mdx
+++ b/src/content/api/node.mdx
@@ -42,14 +42,12 @@ import webpack from 'webpack';
 
 The imported `webpack` function is fed a webpack [Configuration Object](/configuration/) and runs the webpack compiler if a callback function is provided:
 
-```js-with-links
+```js
 const webpack = require('webpack');
 
-webpack({
-  // [Configuration Object](/configuration/)
-}, (err, stats) => { // [Stats Object](#stats-object)
+webpack({}, (err, stats) => {
   if (err || stats.hasErrors()) {
-    // [Handle errors here](#error-handling)
+    //
   }
   // Done processing
 });
@@ -96,14 +94,14 @@ again. Concurrent compilations will corrupt the output files.
 Calling the `run` method on the `Compiler` instance is much like the quick run
 method mentioned above:
 
-```js-with-links
+```js
 const webpack = require('webpack');
 
 const compiler = webpack({
-  // [Configuration Object](/configuration/)
+  //
 });
 
-compiler.run((err, stats) => { // [Stats Object](#stats-object)
+compiler.run((err, stats) => {
   // ...
 
   compiler.close((closeErr) => {
@@ -124,21 +122,24 @@ change, runs again. Returns an instance of `Watching`.
 watch(watchOptions, callback);
 ```
 
-```js-with-links
+```js
 const webpack = require('webpack');
 
 const compiler = webpack({
-  // [Configuration Object](/configuration/)
+  //
 });
 
-const watching = compiler.watch({
-  // Example [watchOptions](/configuration/watch/#watchoptions)
-  aggregateTimeout: 300,
-  poll: undefined
-}, (err, stats) => { // [Stats Object](#stats-object)
-  // Print watch/build result here...
-  console.log(stats);
-});
+const watching = compiler.watch(
+  {
+    // Example
+    aggregateTimeout: 300,
+    poll: undefined,
+  },
+  (err, stats) => {
+    // Print watch/build result here...
+    console.log(stats);
+  }
+);
 ```
 
 `Watching` options are covered in detail
@@ -206,8 +207,8 @@ Can be used to check if there were warnings while compiling. Returns `true` or
 Returns compilation information as a JSON object. `options` can be either a
 string (a preset) or an object for more granular control:
 
-```js-with-links
-stats.toJson('minimal'); // [more options: 'verbose', etc](/configuration/stats).
+```js
+stats.toJson('minimal');
 ```
 
 ```js
@@ -238,22 +239,27 @@ stats.toString({
 
 Here’s an example of `stats.toString()` usage:
 
-```js-with-links
+```js
 const webpack = require('webpack');
 
-webpack({
-  // [Configuration Object](/configuration/)
-}, (err, stats) => {
-  if (err) {
-    console.error(err);
-    return;
-  }
+webpack(
+  {
+    //
+  },
+  (err, stats) => {
+    if (err) {
+      console.error(err);
+      return;
+    }
 
-  console.log(stats.toString({
-    chunks: false,  // Makes the build much quieter
-    colors: true    // Shows colors in the console
-  }));
-});
+    console.log(
+      stats.toString({
+        chunks: false, // Makes the build much quieter
+        colors: true, // Shows colors in the console
+      })
+    );
+  }
+);
 ```
 
 ## MultiCompiler
@@ -263,15 +269,18 @@ separate compilers. If the `options` parameter in the webpack's NodeJS api is
 an array of options, webpack applies separate compilers and calls the
 `callback` after all compilers have been executed.
 
-```js-with-links
+```js
 var webpack = require('webpack');
 
-webpack([
-  { entry: './index1.js', output: { filename: 'bundle1.js' } },
-  { entry: './index2.js', output: { filename: 'bundle2.js' } }
-], (err, stats) => { // [Stats Object](#stats-object)
-  process.stdout.write(stats.toString() + '\n');
-})
+webpack(
+  [
+    { entry: './index1.js', output: { filename: 'bundle1.js' } },
+    { entry: './index2.js', output: { filename: 'bundle2.js' } },
+  ],
+  (err, stats) => {
+    process.stdout.write(stats.toString() + '\n');
+  }
+);
 ```
 
 W> Multiple configurations will **not be run in parallel**. Each
@@ -288,32 +297,35 @@ For good error handling, you need to account for these three types of errors:
 
 Here’s an example that does all that:
 
-```js-with-links
+```js
 const webpack = require('webpack');
 
-webpack({
-  // [Configuration Object](/configuration/)
-}, (err, stats) => {
-  if (err) {
-    console.error(err.stack || err);
-    if (err.details) {
-      console.error(err.details);
+webpack(
+  {
+    //
+  },
+  (err, stats) => {
+    if (err) {
+      console.error(err.stack || err);
+      if (err.details) {
+        console.error(err.details);
+      }
+      return;
     }
-    return;
-  }
 
-  const info = stats.toJson();
+    const info = stats.toJson();
 
-  if (stats.hasErrors()) {
-    console.error(info.errors);
-  }
+    if (stats.hasErrors()) {
+      console.error(info.errors);
+    }
 
-  if (stats.hasWarnings()) {
-    console.warn(info.warnings);
-  }
+    if (stats.hasWarnings()) {
+      console.warn(info.warnings);
+    }
 
-  // Log result...
-});
+    // Log result...
+  }
+);
 ```
 
 ## Custom File Systems
diff --git a/src/content/api/stats.mdx b/src/content/api/stats.mdx
index 4e8fa7a54ea6..80cacab3dba5 100644
--- a/src/content/api/stats.mdx
+++ b/src/content/api/stats.mdx
@@ -24,46 +24,39 @@ The `--json=compilation-stats.json` flag indicates to webpack that it should emi
 
 The top-level structure of the output JSON file is fairly straightforward but there are a few nested data structures as well. Each nested structure has a dedicated section below to make this document more consumable. Note that you can click links within the top-level structure below to jump to relevant sections and documentation:
 
-```js-with-links
+```json
 {
-  'version': '5.9.0', // Version of webpack used for the compilation
-  'hash': '11593e3b3ac85436984a', // Compilation specific hash
-  'time': 2469, // Compilation time in milliseconds
-  'publicPath': 'auto',
-  'outputPath': '/', // path to webpack output directory
-  'assetsByChunkName': {
+  "version": "5.9.0", // Version of webpack used for the compilation
+  "hash": "11593e3b3ac85436984a", // Compilation specific hash
+  "time": 2469, // Compilation time in milliseconds
+  "publicPath": "auto",
+  "outputPath": "/", // path to webpack output directory
+  "assetsByChunkName": {
     // Chunk name to emitted asset(s) mapping
-    'main': [
-      'web.js?h=11593e3b3ac85436984a'
-    ],
-    'named-chunk': [
-      'named-chunk.web.js'
-    ],
-    'other-chunk': [
-      'other-chunk.js',
-      'other-chunk.css'
-    ]
+    "main": ["web.js?h=11593e3b3ac85436984a"],
+    "named-chunk": ["named-chunk.web.js"],
+    "other-chunk": ["other-chunk.js", "other-chunk.css"]
   },
-  'assets': [
-    // A list of [asset objects](#asset-objects)
+  "assets": [
+    // A list of asset objects
   ],
-  'chunks': [
-    // A list of [chunk objects](#chunk-objects)
+  "chunks": [
+    // A list of chunk objects
   ],
-  'modules': [
-    // A list of [module objects](#module-objects)
+  "modules": [
+    // A list of module objects
   ],
-  'entryPoints': {
-    // A list of [entry objects](#entry-objects)
+  "entryPoints": {
+    // A list of entry objects
   },
-  'errors': [
-    // A list of [error objects](#errors-and-warnings)
+  "errors": [
+    // A list of error objects
   ],
-  'errorsCount': 0, // number of errors
-  'warnings': [
-    // A list of [warning objects](#errors-and-warnings)
+  "errorsCount": 0, // number of errors
+  "warnings": [
+    // A list of warning objects
   ],
-  'warningsCount': 0, // nummber of warnings
+  "warningsCount": 0 // nummber of warnings
 }
 ```
 
@@ -96,7 +89,7 @@ T> Asset's `info` property is available since webpack v4.40.0
 
 Each `chunks` object represents a group of modules known as a [chunk](/glossary/#c). Each object follows the following structure:
 
-```js-with-links
+```json
 {
   "entry": true, // Indicates whether or not the chunk contains the webpack runtime
   "files": [
@@ -123,7 +116,7 @@ Each `chunks` object represents a group of modules known as a [chunk](/glossary/
 
 The `chunks` object will also contain a list of `origins` describing how the given chunk originated. Each `origins` object follows the following schema:
 
-```js-with-links
+```json
 {
   "loc": "", // Lines of code that generated this chunk
   "module": "(webpack)\\test\\browsertest\\lib\\index.web.js", // Path to the module
@@ -141,7 +134,7 @@ The `chunks` object will also contain a list of `origins` describing how the giv
 
 What good would these statistics be without some description of the compiled application's actual modules? Each module in the dependency graph is represented by the following structure:
 
-```js-with-links
+```json
 {
   "assets": [
     // A list of [asset objects](#asset-objects)
@@ -175,7 +168,7 @@ What good would these statistics be without some description of the compiled app
 
 Every module also contains a list of `reasons` objects describing why that module was included in the dependency graph. Each "reason" is similar to the `origins` seen above in the [chunk objects](#chunk-objects) section:
 
-```js-with-links
+```json
 {
   "loc": "33:24-93", // Lines of code that caused the module to be included
   "module": "./lib/index.web.js", // Relative path to the module based on [context](/configuration/entry-context/#context)
diff --git a/src/content/concepts/loaders.mdx b/src/content/concepts/loaders.mdx
index 774ac03a7b16..6c04910dd0a8 100644
--- a/src/content/concepts/loaders.mdx
+++ b/src/content/concepts/loaders.mdx
@@ -60,28 +60,25 @@ This is a concise way to display loaders, and helps to maintain clean code. It a
 
 Loaders are evaluated/executed from right to left (or from bottom to top). In the example below execution starts with sass-loader, continues with css-loader and finally ends with style-loader. See ["Loader Features"](/concepts/loaders/#loader-features) for more information about loaders order.
 
-```js-with-links
+```js
 module.exports = {
   module: {
     rules: [
       {
         test: /\.css$/,
         use: [
-          // [style-loader](/loaders/style-loader)
           { loader: 'style-loader' },
-          // [css-loader](/loaders/css-loader)
           {
             loader: 'css-loader',
             options: {
-              modules: true
-            }
+              modules: true,
+            },
           },
-          // [sass-loader](/loaders/sass-loader)
-          { loader: 'sass-loader' }
-        ]
-      }
-    ]
-  }
+          { loader: 'sass-loader' },
+        ],
+      },
+    ],
+  },
 };
 ```
 
diff --git a/src/content/configuration/module.mdx b/src/content/configuration/module.mdx
index 80f7034df65f..21e9f1b5a6d7 100644
--- a/src/content/configuration/module.mdx
+++ b/src/content/configuration/module.mdx
@@ -638,7 +638,7 @@ However, parser plugins may accept more than only a boolean. For example, the in
 
 **Examples** (parser options by the default plugins):
 
-```js-with-links
+```js
 module.exports = {
   //...
   module: {
@@ -657,13 +657,13 @@ module.exports = {
           requireJs: false, // disable requirejs.*
           node: false, // disable __dirname, __filename, module, require.extensions, require.main, etc.
           commonjsMagicComments: false, // disable magic comments support for CommonJS
-          node: {...}, // reconfigure [node](/configuration/node) layer on module level
-          worker: ["default from web-worker", "..."] // Customize the WebWorker handling for javascript files, "..." refers to the defaults.
-        }
-      }
-    ]
-  }
-}
+          node: {}, // reconfigure node layer on module level
+          worker: ['default from web-worker', '...'], // Customize the WebWorker handling for javascript files, "..." refers to the defaults.
+        },
+      },
+    ],
+  },
+};
 ```
 
 If `Rule.type` is an `asset` then `Rules.parser` option may be an object or a function that describes a condition whether to encode file contents to Base64 or emit it as a separate file into the output directory.
diff --git a/yarn.lock b/yarn.lock
index f9cad16220a7..b536be0fce37 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7046,19 +7046,7 @@ jest-snapshot@^29.2.0:
     pretty-format "^29.2.0"
     semver "^7.3.5"
 
-jest-util@^29.1.2:
-  version "29.1.2"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.1.2.tgz#ac5798e93cb6a6703084e194cfa0898d66126df1"
-  integrity sha512-vPCk9F353i0Ymx3WQq3+a4lZ07NXu9Ca8wya6o4Fe4/aO1e1awMMprZ3woPFpKwghEOW+UXgd15vVotuNN9ONQ==
-  dependencies:
-    "@jest/types" "^29.1.2"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    ci-info "^3.2.0"
-    graceful-fs "^4.2.9"
-    picomatch "^2.2.3"
-
-jest-util@^29.2.0:
+jest-util@^29.1.2, jest-util@^29.2.0:
   version "29.2.0"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.2.0.tgz#797935697e83a5722aeba401ed6cd01264295566"
   integrity sha512-8M1dx12ujkBbnhwytrezWY0Ut79hbflwodE+qZKjxSRz5qt4xDp6dQQJaOCFvCmE0QJqp9KyEK33lpPNjnhevw==
@@ -7114,17 +7102,7 @@ jest-worker@^27.0.2:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jest-worker@^29.1.2:
-  version "29.1.2"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-29.1.2.tgz#a68302af61bce82b42a9a57285ca7499d29b2afc"
-  integrity sha512-AdTZJxKjTSPHbXT/AIOjQVmoFx0LHFcVabWu0sxI7PAy7rFf8c0upyvgBKgguVXdM4vY74JdwkyD4hSmpTW8jA==
-  dependencies:
-    "@types/node" "*"
-    jest-util "^29.1.2"
-    merge-stream "^2.0.0"
-    supports-color "^8.0.0"
-
-jest-worker@^29.2.0:
+jest-worker@^29.1.2, jest-worker@^29.2.0:
   version "29.2.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-29.2.0.tgz#b2bd1a81fc7a1ae79a500b05f5feb0d1c0b1a19e"
   integrity sha512-mluOlMbRX1H59vGVzPcVg2ALfCausbBpxC8a2KWOzInhYHZibbHH8CB0C1JkmkpfurrkOYgF7FPmypuom1OM9A==

From cf26486ccbf8691993d20b265c9eca83f7590005 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Tue, 18 Oct 2022 21:05:14 +0800
Subject: [PATCH 2/2] add ...

---
 src/content/api/node.mdx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/content/api/node.mdx b/src/content/api/node.mdx
index cdb5bb32f3e7..49171d5a3402 100644
--- a/src/content/api/node.mdx
+++ b/src/content/api/node.mdx
@@ -47,7 +47,7 @@ const webpack = require('webpack');
 
 webpack({}, (err, stats) => {
   if (err || stats.hasErrors()) {
-    //
+    // ...
   }
   // Done processing
 });
@@ -98,7 +98,7 @@ method mentioned above:
 const webpack = require('webpack');
 
 const compiler = webpack({
-  //
+  // ...
 });
 
 compiler.run((err, stats) => {
@@ -126,7 +126,7 @@ watch(watchOptions, callback);
 const webpack = require('webpack');
 
 const compiler = webpack({
-  //
+  // ...
 });
 
 const watching = compiler.watch(
@@ -244,7 +244,7 @@ const webpack = require('webpack');
 
 webpack(
   {
-    //
+    // ...
   },
   (err, stats) => {
     if (err) {
@@ -302,7 +302,7 @@ const webpack = require('webpack');
 
 webpack(
   {
-    //
+    // ...
   },
   (err, stats) => {
     if (err) {