fix(plugin-typedoc): link error and empty dir labels in sidebar (#1628)

.changeset/heavy-pants-bake.md

@@ -0,0 +1,5 @@
+---
+'@rspress/plugin-typedoc': patch
+---
+
+fix the right behavior

.gitignore

@@ -51,3 +51,7 @@ doc_build/
 test-results/
 
 playwright-report/
+
+# plugin-typedoc auto-generated files
+e2e/fixtures/plugin-typedoc/single/doc/api
+e2e/fixtures/plugin-typedoc/multi/doc/api

e2e/fixtures/auto-nav-sidebar-no-meta/doc/api/plugin/plugin-a.mdx

@@ -0,0 +1,3 @@
+# Plugin A
+
+this directory has no meta and no index.mdx, should use directory name

e2e/fixtures/auto-nav-sidebar-no-meta/doc/api/plugin/plugin-b.mdx

@@ -0,0 +1 @@
+# Plugin B

e2e/fixtures/api-docgen/package.json → e2e/fixtures/plugin-api-docgen/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@rspress-fixture/rspress-api-docgen",
+  "name": "@rspress-fixture/rspress-plugin-api-docgen",
   "version": "1.0.0",
   "private": true,
   "scripts": {

e2e/fixtures/plugin-typedoc/multi/doc/_meta.json

@@ -0,0 +1,12 @@
+[
+  {
+    "text": "Guide",
+    "link": "/guide",
+    "activeMatch": "/guide"
+  },
+  {
+    "text": "api",
+    "link": "/api/index",
+    "activeMatch": "/api/"
+  }
+]

e2e/fixtures/plugin-typedoc/multi/doc/guide.mdx

@@ -0,0 +1 @@
+# Guide

e2e/fixtures/plugin-typedoc/multi/doc/index.mdx

@@ -0,0 +1 @@
+# Hello World

e2e/fixtures/plugin-typedoc/multi/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@rspress-fixture/rspress-plugin-typedoc-multi",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "rspress dev",
+    "build": "rspress build",
+    "preview": "rspress preview"
+  },
+  "dependencies": {
+    "@rspress/plugin-typedoc": "workspace:*",
+    "rspress": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.17"
+  }
+}

e2e/fixtures/plugin-typedoc/multi/rspress.config.ts

@@ -0,0 +1,15 @@
+import path from 'node:path';
+import { defineConfig } from 'rspress/config';
+import { pluginTypeDoc } from '@rspress/plugin-typedoc';
+
+export default defineConfig({
+  root: path.join(__dirname, 'doc'),
+  plugins: [
+    pluginTypeDoc({
+      entryPoints: [
+        path.join('./src/index.ts'),
+        path.join('./src/middleware.ts'),
+      ],
+    }),
+  ],
+});

e2e/fixtures/plugin-typedoc/multi/src/index.ts

@@ -0,0 +1,5 @@
+export {
+  type Middleware,
+  createMiddleware,
+  mergeMiddlewares,
+} from './middleware';

e2e/fixtures/plugin-typedoc/multi/src/middleware.ts

@@ -0,0 +1,20 @@
+import type { IncomingMessage, ServerResponse } from 'node:http';
+
+export type Middleware = (
+  req: IncomingMessage,
+  res: ServerResponse,
+  next: () => void,
+) => void;
+
+export function createMiddleware(): Middleware {
+  return [] as any;
+}
+
+/**
+ * 将多个中间件，合并成一个中间件执行
+ * @param middlewares 中间件列表
+ * @returns
+ */
+export function mergeMiddlewares(middlewares: Middleware[]): Middleware {
+  return middlewares[0];
+}

e2e/fixtures/plugin-typedoc/multi/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true,
+    "allowImportingTsExtensions": true
+  },
+  "include": ["docs", "src", "rspress.config.ts"],
+  "mdx": {
+    "checkMdx": true
+  }
+}

e2e/fixtures/plugin-typedoc/single/doc/_meta.json

@@ -0,0 +1,12 @@
+[
+  {
+    "text": "Guide",
+    "link": "/guide",
+    "activeMatch": "/guide"
+  },
+  {
+    "text": "api",
+    "link": "/api/index",
+    "activeMatch": "/api/"
+  }
+]

e2e/fixtures/plugin-typedoc/single/doc/guide.mdx

@@ -0,0 +1 @@
+# Guide

e2e/fixtures/plugin-typedoc/single/doc/index.mdx

@@ -0,0 +1 @@
+# Hello World

e2e/fixtures/plugin-typedoc/single/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@rspress-fixture/rspress-plugin-typedoc-single",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "rspress dev",
+    "build": "rspress build",
+    "preview": "rspress preview"
+  },
+  "dependencies": {
+    "@rspress/plugin-typedoc": "workspace:*",
+    "rspress": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.17"
+  }
+}

e2e/fixtures/plugin-typedoc/single/rspress.config.ts

@@ -0,0 +1,15 @@
+import path from 'node:path';
+import { defineConfig } from 'rspress/config';
+import { pluginTypeDoc } from '@rspress/plugin-typedoc';
+
+export default defineConfig({
+  root: path.join(__dirname, 'doc'),
+  plugins: [
+    pluginTypeDoc({
+      entryPoints: [
+        path.join('./src/index.ts'),
+        // path.join('../../packages/rspack/src/hello.ts')
+      ],
+    }),
+  ],
+});

e2e/fixtures/plugin-typedoc/single/src/index.ts

@@ -0,0 +1,5 @@
+export {
+  type Middleware,
+  createMiddleware,
+  mergeMiddlewares,
+} from './middleware';

e2e/fixtures/plugin-typedoc/single/src/middleware.ts

@@ -0,0 +1,20 @@
+import type { IncomingMessage, ServerResponse } from 'node:http';
+
+export type Middleware = (
+  req: IncomingMessage,
+  res: ServerResponse,
+  next: () => void,
+) => void;
+
+export function createMiddleware(): Middleware {
+  return [] as any;
+}
+
+/**
+ * 将多个中间件，合并成一个中间件执行
+ * @param middlewares 中间件列表
+ * @returns
+ */
+export function mergeMiddlewares(middlewares: Middleware[]): Middleware {
+  return middlewares[0];
+}

e2e/fixtures/plugin-typedoc/single/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true,
+    "allowImportingTsExtensions": true
+  },
+  "include": ["docs", "src", "rspress.config.ts"],
+  "mdx": {
+    "checkMdx": true
+  }
+}

e2e/tests/api-docgen.test.ts

@@ -9,7 +9,7 @@ test.describe('api-docgen test', async () => {
   let app;
 
   test.beforeAll(async () => {
-    const appDir = path.join(fixtureDir, 'api-docgen');
+    const appDir = path.join(fixtureDir, 'plugin-api-docgen');
     appPort = await getPort();
     app = await runDevCommand(appDir, appPort);
   });

e2e/tests/auto-nav-sidebar-dir-convension.test.ts

@@ -1,6 +1,7 @@
 import { expect, test } from '@playwright/test';
 import path from 'node:path';
 import { getPort, killProcess, runDevCommand } from '../utils/runCommands';
+import { getSidebar, getSidebarTexts } from '../utils/getSideBar';
 
 const fixtureDir = path.resolve(__dirname, '../fixtures');
 
@@ -26,16 +27,8 @@ test.describe('Auto nav and sidebar dir convention', async () => {
       waitUntil: 'networkidle',
     });
 
-    // take the sidebar, properly a section or a tag
-    const sidebar =
-      (await page.$$(
-        `.rspress-sidebar .rspress-scrollbar > nav > section,
-      .rspress-sidebar .rspress-scrollbar > nav > a`,
-      )) ?? [];
-    expect(sidebar.length).toBe(7);
-    const sidebarTexts = await Promise.all(
-      sidebar.map(element => element.textContent()),
-    );
+    const sidebarTexts = await getSidebarTexts(page);
+    expect(sidebarTexts.length).toBe(7);
     expect(sidebarTexts.join(',')).toEqual(
       [
         '/guide Page',
@@ -117,12 +110,7 @@ test.describe('Auto nav and sidebar dir convention', async () => {
     page,
   }) => {
     async function getSidebarLength(): Promise<number> {
-      return (
-        (await page.$$(
-          `.rspress-sidebar .rspress-scrollbar > nav > section,
-      .rspress-sidebar .rspress-scrollbar > nav > a`,
-        )) ?? []
-      ).length;
+      return ((await getSidebar(page)) ?? []).length;
     }
 
     async function isMenuItemActive(): Promise<boolean> {

e2e/tests/auto-nav-sidebar-no-meta.test.ts

@@ -1,6 +1,7 @@
 import { expect, test } from '@playwright/test';
 import path from 'node:path';
 import { getPort, killProcess, runDevCommand } from '../utils/runCommands';
+import { getSidebarTexts } from '../utils/getSideBar';
 
 const fixtureDir = path.resolve(__dirname, '../fixtures');
 
@@ -24,18 +25,12 @@ test.describe('Auto nav and sidebar test', async () => {
       waitUntil: 'networkidle',
     });
 
-    // take the sidebar, properly a section or a tag
-    const sidebar = await page.$$(
-      `.rspress-sidebar .rspress-scrollbar > nav > section,
-      .rspress-sidebar .rspress-scrollbar > nav > a`,
-    );
-    expect(sidebar?.length).toBe(3);
-    const sidebarTexts = await Promise.all(
-      sidebar.map(element => element.textContent()),
-    );
+    const sidebarTexts = await getSidebarTexts(page);
+    expect(sidebarTexts.length).toBe(4);
     expect(sidebarTexts.join(',')).toEqual(
       [
         'API',
+        'pluginPlugin APlugin B',
         'Commands',
         'configBasic ConfigBuild ConfigFront Matter ConfigTheme Config',
       ].join(','),
@@ -49,10 +44,11 @@ test.describe('Auto nav and sidebar test', async () => {
       waitUntil: 'networkidle',
     });
 
-    const ele = page.locator('h2 span');
+    const eles = await page.$$('h2 span');
 
-    expect(await ele.textContent()).toBe('config');
-    await ele.click();
+    const configDir = eles[1];
+    expect(await configDir.textContent()).toBe('config');
+    await configDir.click();
     expect(page.url()).toBe(
       `http://localhost:${appPort}/api/rspress-config.html`,
     );

e2e/tests/link.test.ts

@@ -3,7 +3,7 @@ import path from 'node:path';
 import { getPort, killProcess, runDevCommand } from '../utils/runCommands';
 
 import type { Locator, Page } from '@playwright/test';
-import { getShouldOpenNewPage } from '../utils/new-page';
+import { getShouldOpenNewPage } from '../utils/newPage';
 import os from 'node:os';
 
 const fixtureDir = path.resolve(__dirname, '../fixtures');