feat: Add a twoslash plugin (#2527)

Co-authored-by: sooniter <[email protected]>

Author: Karibash

e2e/fixtures/auto-nav-sidebar-dir-convention/index.test.ts

@@ -46,6 +46,7 @@ test.describe('Auto nav and sidebar dir convention', async () => {
       waitUntil: 'networkidle',
     });
     await page.click('.rspress-scrollbar nav section div');
+    await page.waitForURL('**/index-md-convention/**');
     expect(page.url()).toBe(
       `http://localhost:${appPort}/guide/index-md-convention/index.html`,
     );

e2e/fixtures/plugin-twoslash/doc/index.md

@@ -0,0 +1,39 @@
+# @rspress/plugin-twoslash
+
+## Extract type
+
+```ts twoslash
+const hi = 'Hello';
+const msg = `${hi}, world`;
+//    ^?
+```
+
+## Completions
+
+```ts twoslash
+// @noErrors
+console.e;
+//       ^|
+```
+
+## Highlighting
+
+```ts twoslash
+function add(a: number, b: number) {
+  //     ^^^
+  return a + b;
+}
+```
+
+## Error
+
+```ts twoslash
+// @noErrorValidation
+const str: string = 1;
+```
+
+## Disable twoslash
+
+```ts
+const hi = 'Hello';
+```

e2e/fixtures/plugin-twoslash/index.test.ts

@@ -0,0 +1,119 @@
+import { expect, test } from '@playwright/test';
+import {
+  getPort,
+  killProcess,
+  runBuildCommand,
+  runPreviewCommand,
+} from '../../utils/runCommands';
+
+test.describe('plugin twoslash test', async () => {
+  let appPort: number;
+  let app: unknown;
+  test.beforeAll(async () => {
+    const appDir = __dirname;
+    appPort = await getPort();
+    await runBuildCommand(appDir);
+    app = await runPreviewCommand(appDir, appPort);
+  });
+
+  test.afterAll(async () => {
+    if (app) {
+      await killProcess(app);
+    }
+  });
+
+  test('should render twoslash popup elements', async ({ page }) => {
+    await page.goto(`http://localhost:${appPort}`, {
+      waitUntil: 'networkidle',
+    });
+
+    const triggers = await page.$$('twoslash-popup-trigger');
+    expect(triggers.length).toBe(10);
+
+    for (const trigger of triggers) {
+      const container = await trigger.$('twoslash-popup-container');
+      expect(container).not.toBeNull();
+
+      const initialized = await container?.getAttribute('data-initialized');
+      expect(initialized).toBeNull();
+
+      const inner = await container.$('.twoslash-popup-inner');
+      expect(inner).not.toBeNull();
+      const arrow = await container.$('.twoslash-popup-arrow');
+      expect(arrow).not.toBeNull();
+    }
+  });
+
+  test('should clone twoslash popup elements', async ({ page }) => {
+    await page.goto(`http://localhost:${appPort}`, {
+      waitUntil: 'networkidle',
+    });
+
+    const portal = await page.$('twoslash-popup-portal');
+    expect(portal).not.toBeNull();
+
+    const containers = await portal.$$('twoslash-popup-container');
+    expect(containers.length).toBe(10);
+
+    const extractTypeAlways = await containers[1].getAttribute('data-always');
+    expect(extractTypeAlways).toBe('true');
+
+    const completionsAlways = await containers[4].getAttribute('data-always');
+    expect(completionsAlways).toBe('true');
+
+    for (const container of containers) {
+      const initialized = await container.getAttribute('data-initialized');
+      expect(initialized).not.toBeNull();
+
+      const inner = await container.$('.twoslash-popup-inner');
+      expect(inner).not.toBeNull();
+      const arrow = await container.$('.twoslash-popup-arrow');
+      expect(arrow).not.toBeNull();
+    }
+  });
+
+  test('should highlight code blocks with twoslash', async ({ page }) => {
+    await page.goto(`http://localhost:${appPort}`, {
+      waitUntil: 'networkidle',
+    });
+
+    const codeBlock = await page.$(
+      'h2:has-text("Highlighting") + .language-ts',
+    );
+    expect(codeBlock).not.toBeNull();
+
+    const highlighted = await codeBlock?.$('.twoslash-highlighted');
+    expect(highlighted).not.toBeNull();
+  });
+
+  test('should show errors in code blocks with twoslash', async ({ page }) => {
+    await page.goto(`http://localhost:${appPort}`, {
+      waitUntil: 'networkidle',
+    });
+
+    const codeBlock = await page.$('h2:has-text("Error") + .language-ts');
+    expect(codeBlock).not.toBeNull();
+
+    const error = await codeBlock?.$('.twoslash-error');
+    expect(error).not.toBeNull();
+
+    const errorLine = await codeBlock?.$('.twoslash-error-line');
+    expect(errorLine).not.toBeNull();
+  });
+
+  test('should not apply twoslash to code blocks without twoslash', async ({
+    page,
+  }) => {
+    await page.goto(`http://localhost:${appPort}`, {
+      waitUntil: 'networkidle',
+    });
+
+    const codeBlock = await page.$(
+      'h2:has-text("Disable twoslash") + .language-ts',
+    );
+    expect(codeBlock).not.toBeNull();
+
+    const triggers = await codeBlock?.$$('twoslash-popup-trigger');
+    expect(triggers.length).toBe(0);
+  });
+});

e2e/fixtures/plugin-twoslash/package.json

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

e2e/fixtures/plugin-twoslash/rspress.config.ts

@@ -0,0 +1,8 @@
+import path from 'node:path';
+import { defineConfig } from '@rspress/core';
+import { pluginTwoslash } from '@rspress/plugin-twoslash';
+
+export default defineConfig({
+  root: path.join(__dirname, 'doc'),
+  plugins: [pluginTwoslash()],
+});

e2e/fixtures/plugin-twoslash/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "jsx": "react-jsx"
+  }
+}

e2e/utils/search.ts

@@ -2,7 +2,7 @@ import assert from 'node:assert';
 import type { Page } from '@playwright/test';
 
 async function getSearchButton(page: Page) {
-  const searchButton = await page.$('.rspress-nav-search-button');
+  const searchButton = await page.$('.rp-flex > .rspress-nav-search-button');
   return searchButton;
 }
 
@@ -14,14 +14,17 @@ export async function searchInPage(
   searchText: string,
   reset = true,
 ) {
-  let searchInput = await page.$('.rspress-search-panel-input');
-  if (!searchInput) {
+  const searchInputLoc = page.locator('.rspress-search-panel-input');
+  const isSearchInputVisible = await searchInputLoc.isVisible();
+  if (!isSearchInputVisible) {
     const searchButton = await getSearchButton(page);
     assert(searchButton);
     await searchButton.click();
-    searchInput = await page.$('.rspress-search-panel-input');
+    const searchInput = await page.$('.rspress-search-panel-input');
     assert(searchInput);
   }
+  const searchInput = await page.$('.rspress-search-panel-input');
+  assert(searchInput);
   const isEditable = await searchInput.isEditable();
   assert(isEditable);
   await searchInput.focus();

packages/plugin-twoslash/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present Bytedance, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/plugin-twoslash/README.md

@@ -0,0 +1,5 @@
+# @rspress/plugin-twoslash
+
+> Twoslash plugin for rspress
+
+[Documentation](https://rspress.rs/plugin/official-plugins/twoslash)

packages/plugin-twoslash/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@rspress/plugin-twoslash",
+  "version": "2.0.0-beta.28",
+  "description": "A plugin for rspress to applies twoslash to code blocks.",
+  "bugs": "https://github.com/web-infra-dev/rspress/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/web-infra-dev/rspress.git",
+    "directory": "packages/plugin-twoslash"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "static"
+  ],
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build -w",
+    "reset": "rimraf ./**/node_modules"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.4",
+    "@shikijs/twoslash": "^3.12.0",
+    "mdast-util-from-markdown": "^2.0.2",
+    "mdast-util-gfm": "^3.1.0",
+    "mdast-util-to-hast": "^13.2.0"
+  },
+  "devDependencies": {
+    "@microsoft/api-extractor": "^7.52.11",
+    "@rslib/core": "0.12.4",
+    "@rspress/config": "workspace:*",
+    "@shikijs/types": "^3.12.0",
+    "@types/hast": "^3.0.4",
+    "@types/mdast": "^4.0.4",
+    "@types/react": "^19.1.12",
+    "react": "^19.1.1",
+    "rsbuild-plugin-publint": "^0.3.3",
+    "typescript": "^5.8.2"
+  },
+  "peerDependencies": {
+    "@rspress/core": "workspace:^2.0.0-beta.28",
+    "react": ">=18.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}