Merge pull request #1599 from docschina/sync-02fb7bd1

docs(en): merge webpack.js.org/master into webpack.js.org/cn @ 02fb7bd

Author: jacob-lcs

package.json

@@ -89,14 +89,14 @@
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^4.0.0",
-    "cypress": "^10.1.0",
+    "cypress": "^10.2.0",
     "directory-tree": "^3.3.0",
     "directory-tree-webpack-plugin": "^1.0.3",
     "duplexer": "^0.1.1",
-    "eslint": "^8.17.0",
+    "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-mdx": "^1.17.0",
+    "eslint-plugin-mdx": "^2.0.0",
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "front-matter": "^4.0.2",
@@ -109,7 +109,7 @@
     "jest": "^28.1.1",
     "lint-staged": "^13.0.2",
     "lodash": "^4.17.21",
-    "markdownlint": "^0.25.1",
+    "markdownlint": "^0.26.0",
     "markdownlint-cli": "^0.31.1",
     "mdast-util-to-string": "^3.1.0",
     "mini-css-extract-plugin": "^2.6.1",
@@ -131,13 +131,13 @@
     "remark-html": "^15.0.1",
     "remark-refractor": "montogeek/remark-refractor",
     "rimraf": "^3.0.2",
-    "sass": "^1.52.3",
+    "sass": "^1.53.0",
     "sass-loader": "^13.0.0",
     "sirv-cli": "^2.0.2",
     "sitemap-static": "^0.4.2",
     "static-site-generator-webpack-plugin": "^3.4.1",
     "style-loader": "^3.3.1",
-    "tailwindcss": "^3.1.3",
+    "tailwindcss": "^3.1.4",
     "tap-spot": "^1.1.2",
     "textlint": "^11.8.2",
     "textlint-rule-heading": "^1.0.10",

src/components/Page/Page.jsx

@@ -50,16 +50,38 @@ export default function Page(props) {
   const { hash, pathname } = useLocation();
 
   useEffect(() => {
+    let observer;
     if (contentLoaded) {
       if (hash) {
-        const element = document.querySelector(hash);
-        if (element) {
-          element.scrollIntoView();
+        const target = document.querySelector('#md-content');
+        // two cases here
+        // 1. server side rendered page, so hash target is already there
+        if (document.querySelector(hash)) {
+          document.querySelector(hash).scrollIntoView();
+        } else {
+          // 2. dynamic loaded content
+          // we need to observe the dom change to tell if hash exists
+          observer = new MutationObserver(() => {
+            const element = document.querySelector(hash);
+            if (element) {
+              element.scrollIntoView();
+            }
+          });
+          observer.observe(target, {
+            childList: true,
+            attributes: false,
+            subtree: false,
+          });
         }
       } else {
         window.scrollTo(0, 0);
       }
     }
+    return () => {
+      if (observer) {
+        observer.disconnect();
+      }
+    };
   }, [contentLoaded, pathname, hash]);
 
   const numberOfContributors = contributors.length;
@@ -106,7 +128,7 @@ export default function Page(props) {
           </div>
         ) : null}
 
-        {contentRender}
+        <div id="md-content">{contentRender}</div>
 
         {loadRelated && (
           <div className="print:hidden">

src/components/Site/Site.jsx

@@ -297,7 +297,6 @@ function Site(props) {
             <Route path="app-shell" element={<Fragment />} />
             {pages.map((page) => {
               let path = page.path.replace('src/content/', '');
-              let content = props.import(path);
               const { previous, next } = getAdjacentPages(
                 sidebarPages,
                 page,
@@ -308,20 +307,15 @@ function Site(props) {
                   key={page.url}
                   path={page.url}
                   element={
-                    <Fragment>
-                      <Sponsors />
-                      <Sidebar
-                        className="site__sidebar"
-                        currentPage={location.pathname}
-                        pages={sidebarPages}
-                      />
-                      <Page
-                        {...page}
-                        content={content}
-                        previous={previous}
-                        next={next}
-                      />
-                    </Fragment>
+                    <PageElement
+                      currentPage={location.pathname}
+                      sidebarPages={sidebarPages}
+                      page={page}
+                      next={next}
+                      previous={previous}
+                      import={props.import}
+                      path={path}
+                    />
                   }
                 />
               );
@@ -336,3 +330,27 @@ function Site(props) {
   );
 }
 export default Site;
+PageElement.propTypes = {
+  currentPage: PropTypes.string,
+  sidebarPages: PropTypes.array,
+  previous: PropTypes.object,
+  next: PropTypes.object,
+  page: PropTypes.object,
+  import: PropTypes.func,
+  path: PropTypes.string,
+};
+function PageElement(props) {
+  const { currentPage, sidebarPages, page, previous, next } = props;
+  const content = props.import(props.path);
+  return (
+    <Fragment>
+      <Sponsors />
+      <Sidebar
+        className="site__sidebar"
+        currentPage={currentPage}
+        pages={sidebarPages}
+      />
+      <Page {...page} content={content} previous={previous} next={next} />
+    </Fragment>
+  );
+}

src/content/guides/csp.mdx

@@ -22,7 +22,7 @@ related:
     url: https://web.dev/trusted-types
 ---
 
-Webpack 能够为其加载的所有脚本添加 `nonce`。要启用此功能，需要在引入的入口脚本中设置一个 `__webpack_nonce__` 变量。应该为每个唯一的页面视图生成和提供一个唯一的基于 hash 的 nonce，这就是为什么 `__webpack_nonce__` 要在入口文件中指定，而不是在配置中指定的原因。注意，`nonce` 应该是一个 base64 编码的字符串。
+Webpack 能够为其加载的所有脚本添加 `nonce`。要启用此功能，需要在引入的入口脚本中设置一个 `__webpack_nonce__` 变量。应该为每个唯一的页面视图生成和提供一个唯一的基于 hash 的 `nonce`，这就是为什么 `__webpack_nonce__` 要在入口文件中指定，而不是在配置中指定的原因。注意，`__webpack_nonce__` 应该是一个 base64 编码的字符串。
 
 ## 示例 $#examples$
 

src/content/guides/ecma-script-modules.mdx

@@ -82,7 +82,7 @@ Node.js 通过设置 `package.json` 中的属性来显式设置文件模块类
 
 除了模块格式外，将模块标记为 ESM 还会影响解析逻辑，操作逻辑和模块中的可用符号。
 
-导入模块在 ESM 中更为严格，导入相对路径的模块必须包含文件名和文件扩展名。
+导入模块在 ESM 中更为严格，导入相对路径的模块必须包含文件名和文件扩展名（例如 `*.js` 或者 `*.mjs`），除非你设置了 [`fullySpecified=false`](/configuration/module/#resolvefullyspecified)。
 
 T> 依旧支持导入包，例如 `import "lodash"` .