Merge branch 'main' into main

e2e/fixtures/tabs-component/doc/index.mdx

@@ -0,0 +1,21 @@
+import { Tabs, Tab } from 'rspress/theme';
+
+# Hello World
+
+## Tab A
+
+<Tabs tabContainerClassName="tabs-a">
+  <Tab label="label1">content1</Tab>
+</Tabs>
+
+## Tab B
+
+<Tabs tabContainerClassName="tabs-b">
+  <Tab label="label2">content2</Tab>
+  <Tab label="label3">content3</Tab>
+  <Tab label="label4">content4</Tab>
+</Tabs>
+
+## Tab C
+
+<Tabs tabContainerClassName="tabs-c"></Tabs>

e2e/fixtures/tabs-component/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@rspress-fixture/rspress-tabs-component",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "rspress dev",
+    "build": "rspress build",
+    "preview": "rspress preview"
+  },
+  "dependencies": {
+    "rspress": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^14"
+  }
+}

e2e/fixtures/tabs-component/rspress.config.ts

@@ -0,0 +1,6 @@
+import * as path from 'path';
+import { defineConfig } from 'rspress/config';
+
+export default defineConfig({
+  root: path.join(__dirname, 'doc'),
+});

e2e/tests/tabs-component.test.ts

@@ -0,0 +1,55 @@
+import { expect, test } from '@playwright/test';
+import path from 'path';
+import { getPort, killProcess, runDevCommand } from '../utils/runCommands';
+
+const fixtureDir = path.resolve(__dirname, '../fixtures');
+
+test.describe('tabs-component test', async () => {
+  let appPort;
+  let app;
+
+  test.beforeAll(async () => {
+    const appDir = path.join(fixtureDir, 'tabs-component');
+    appPort = await getPort();
+    app = await runDevCommand(appDir, appPort);
+  });
+
+  test.afterAll(async () => {
+    if (app) {
+      await killProcess(app);
+    }
+  });
+
+  test('Index page', async ({ page }) => {
+    await page.goto(`http://localhost:${appPort}`);
+
+    // Tab A
+    const tabA = await page.$('.tabs-a');
+    const contentA = await page.$('.tabs-a + div');
+    const tabAText = await page.evaluate(node => node?.innerHTML, tabA);
+    const contentAText = await page.evaluate(node => node?.innerHTML, contentA);
+    expect(tabAText).toContain('label1');
+    expect(contentAText).toContain('content1');
+
+    // Tab B
+    const tabB = await page.$('.tabs-b');
+    const contentB = await page.$('.tabs-b + div');
+    const tabBText = await page.evaluate(node => node?.innerHTML, tabB);
+    const contentBText = await page.evaluate(node => node?.innerHTML, contentB);
+    expect(tabBText).toContain('label2');
+    expect(contentBText).toContain('content2');
+    const notSelected = await page.$$eval(
+      '.tabs-b div',
+      divs => divs.filter(div => div.className.includes('not-selected')).length,
+    );
+    expect(notSelected).toEqual(2);
+
+    // Tab C
+    const tabC = await page.$('.tabs-c');
+    const contentC = await page.$('.tabs-c + div');
+    const tabCText = await page.evaluate(node => node?.innerHTML, tabC);
+    const contentCText = await page.evaluate(node => node?.innerHTML, contentC);
+    expect(tabCText).toEqual('');
+    expect(contentCText).toEqual('');
+  });
+});

packages/core/src/node/route/RouteService.ts

@@ -69,6 +69,7 @@ export const normalizeRoutePath = (
   )
     // remove the extension
     .replace(new RegExp(`\\.(${extensions.join('|')})$`), '')
+    .replace(/\.html$/, '')
     .replace(/\/index$/, '/');
 
   // restore the trail slash

packages/theme-default/src/components/Sidebar/SidebarItem.tsx

@@ -83,9 +83,7 @@ export function SidebarItem(props: SidebarItemProps) {
         }}
       >
         <Tag tag={item.tag} />
-        <span className="flex-center">
-          {renderInlineMarkdown(textRef.current)}
-        </span>
+        <span>{renderInlineMarkdown(textRef.current)}</span>
       </div>
     </Link>
   );

packages/theme-default/src/components/Tabs/index.tsx

@@ -1,12 +1,14 @@
 import {
-  ComponentPropsWithRef,
+  Children,
   ReactElement,
   ReactNode,
   useContext,
   useState,
   forwardRef,
-  type ForwardRefExoticComponent,
   ForwardedRef,
+  isValidElement,
+  ComponentPropsWithRef,
+  type ForwardRefExoticComponent,
 } from 'react';
 import { TabDataContext } from '../../logic/TabDataContext';
 import styles from './index.module.scss';
@@ -47,18 +49,34 @@ export const Tabs: ForwardRefExoticComponent<TabsProps> = forwardRef(
       values,
       defaultValue,
       onChange,
-      children,
+      children: rawChildren,
       groupId,
       tabPosition = 'left',
       tabContainerClassName,
     } = props;
+    // remove "\n" character when write JSX element in multiple lines, use Children.toArray for Tabs with no Tab element
+    const children = Children.toArray(rawChildren).filter(
+      child => !(typeof child === 'string' && child.trim() === ''),
+    );
+
     let tabValues = values || [];
+
     if (tabValues.length === 0) {
-      tabValues = (children as ReactElement[]).map(child => ({
-        label: child.props?.label,
-        value: child.props?.value || child.props?.label,
-      }));
+      tabValues = Children.map(children, child => {
+        if (isValidElement(child)) {
+          return {
+            label: child.props?.label,
+            value: child.props?.value || child.props?.label,
+          };
+        }
+
+        return {
+          label: undefined,
+          value: undefined,
+        };
+      });
     }
+
     const { tabData, setTabData } = useContext(TabDataContext);
     let defaultIndex = 0;
     const needSync = groupId && tabData[groupId] !== undefined;
@@ -113,7 +131,7 @@ export const Tabs: ForwardRefExoticComponent<TabsProps> = forwardRef(
             </div>
           ) : null}
         </div>
-        <div>{children[activeIndex]}</div>
+        <div>{Children.toArray(children)[activeIndex]}</div>
       </div>
     );
   },

packages/theme-default/src/layout/DocLayout/docComponents/title.tsx

@@ -14,7 +14,7 @@ export const H2 = (props: React.ComponentProps<'h2'>) => {
   return (
     <h2
       {...props}
-      className={`mt-14 mb-6 text-2xl tracking-tight ${styles.title}`}
+      className={`mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light ${styles.title}`}
     />
   );
 };

packages/theme-default/src/styles/vars.css

@@ -13,7 +13,7 @@
   --rp-c-bg-mute: #f1f1f1;
 
   --rp-c-divider: rgba(60, 60, 60, 0.29);
-  --rp-c-divider-light: rgba(60, 60, 60, 0.12);
+  --rp-c-divider-light: rgba(60, 60, 60, 0.1);
 
   --rp-c-text-1: #213547;
   --rp-c-text-2: rgba(60, 60, 60, 0.66);