fix scroll bug (webpack#6125)

* fix scroll bug

* downgrade wds

* revert page change

* fix anchor issue

* revert wds change

* disconnect observer when unmount

* watch pathname as well

Author: chenxsan

src/components/Page/Page.jsx

@@ -48,16 +48,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;
@@ -102,7 +124,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

@@ -276,7 +276,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,
@@ -287,20 +286,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}
+                    />
                   }
                 />
               );
@@ -315,3 +309,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>
+  );
+}