fix(siderbar): hmr sidebar is not stable and is set by h1

web-infra-dev · Dec 18, 2024 · bbfa4da · bbfa4da
1 parent 5309967
commit bbfa4da
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 37 deletions.
diff --git a/e2e/tests/heading-title.test.ts b/e2e/tests/heading-title.test.ts
@@ -23,9 +23,12 @@ test.describe('heading-title test', async () => {
     await page.goto(`http://localhost:${appPort}/guide`, {
       waitUntil: 'networkidle',
     });
-    const h1 = await page.$('h1');
+    const h1s = await page.$$('h1');
+    expect(h1s.length).toBe(1);
+
+    const h1 = h1s[0];
     const className = await page.evaluate(h1 => h1?.className, h1);
-    expect(className).toContain('title_3b154'); // hash in css module should stable
+    expect(className).toContain('rspress-doc-title');
     const text = await page.evaluate(h1 => h1?.textContent, h1);
     expect(text).toContain('Heading Title');
     expect(await page.evaluate(h1 => h1?.id, h1)).toBe('heading-title');

diff --git a/packages/theme-default/src/components/Sidebar/SidebarItem.tsx b/packages/theme-default/src/components/Sidebar/SidebarItem.tsx
@@ -1,27 +1,15 @@
 import { useEffect, useRef } from 'react';
-import {
-  isProduction,
-  normalizeHrefInRuntime as normalizeHref,
-  usePageData,
-} from '@rspress/runtime';
+import { normalizeHrefInRuntime as normalizeHref } from '@rspress/runtime';
 import { Link, Tag } from '@theme';
 import styles from './index.module.scss';
 import { SidebarGroup } from './SidebarGroup';
 import { type SidebarItemProps, highlightTitleStyle } from '.';
 import { renderInlineMarkdown } from '../../logic';
-import { useRenderer } from '../../logic/useRerender';
-
-const removeExtension = (path: string) => {
-  return path.replace(/\.(mdx?)$/, '');
-};
 
 export function SidebarItem(props: SidebarItemProps) {
   const { item, depth = 0, activeMatcher, id, setSidebarData } = props;
   const active = 'link' in item && item.link && activeMatcher(item.link);
-  const { page } = usePageData();
   const ref = useRef<HTMLDivElement>(null);
-  const textRef = useRef<string>(item.text);
-  const rerender = useRenderer();
   useEffect(() => {
     if (active) {
       ref.current?.scrollIntoView({
@@ -30,26 +18,6 @@ export function SidebarItem(props: SidebarItemProps) {
     }
   }, []);
 
-  // In development, we use the latest title after hmr
-  if (
-    !isProduction() &&
-    item._fileKey === removeExtension(page.pagePath) &&
-    page.title
-  ) {
-    textRef.current = page.title;
-  }
-
-  useEffect(() => {
-    // Fix the sidebar text not update when navigating to the other nav item
-    // https://github.com/web-infra-dev/rspress/issues/770
-    if (item.text === textRef.current) {
-      return;
-    }
-    textRef.current = item.text;
-    // Trigger rerender to update the sidebar text
-    rerender();
-  }, [item.text]);
-
   if ('items' in item) {
     return (
       <SidebarGroup
@@ -82,7 +50,7 @@ export function SidebarItem(props: SidebarItemProps) {
         }}
       >
         <Tag tag={item.tag} />
-        <span>{renderInlineMarkdown(textRef.current)}</span>
+        <span>{renderInlineMarkdown(item.text)}</span>
       </div>
     </Link>
   );

diff --git a/packages/theme-default/src/layout/DocLayout/docComponents/title.tsx b/packages/theme-default/src/layout/DocLayout/docComponents/title.tsx
@@ -5,7 +5,7 @@ export const H1 = (props: React.ComponentProps<'h1'>) => {
   return (
     <h1
       {...props}
-      className={`text-3xl mb-10 leading-10 tracking-tight ${styles.title}`}
+      className={`rspress-doc-title text-3xl mb-10 leading-10 tracking-tight ${styles.title}`}
     />
   );
 };

diff --git a/packages/theme-default/src/logic/useSidebarData.ts b/packages/theme-default/src/logic/useSidebarData.ts
@@ -137,6 +137,7 @@ export function useSidebarData(): SidebarData {
   const [sidebarData, setSidebarData] = useState<SidebarData>(
     getSidebarGroupData(sidebar, pathname),
   );
+  console.log(getSidebarGroupData(sidebar, pathname));
   useEffect(() => {
     const newSidebarData = getSidebarGroupData(sidebar, pathname);
     setSidebarData(newSidebarData);