fix(plugin-shiki): __dirname is not found (#1433)

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

@@ -0,0 +1,34 @@
+# @rspress/plugin-shiki
+
+<!-- createTransformerDiff -->
+
+```ts
+export function foo() {
+  console.log('Diff remove'); // [!code --]
+  console.log('Diff add'); // [!code ++]
+}
+```
+
+<!-- createTransformerLineNumber -->
+
+```ts
+export function foo() {
+  console.log('Line number'); // [!code hl]
+}
+```
+
+<!-- createTransformerErrorLevel -->
+
+```ts
+export function foo() {
+  console.log('Error level'); // [!code error]
+}
+```
+
+<!-- createTransformerFocus -->
+
+```ts
+export function foo() {
+  console.log('Focus'); // [!code focus]
+}
+```

e2e/fixtures/plugin-shiki/package.json

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

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

@@ -0,0 +1,25 @@
+import path from 'node:path';
+import { defineConfig } from 'rspress/config';
+import {
+  createTransformerDiff,
+  createTransformerErrorLevel,
+  createTransformerFocus,
+  createTransformerHighlight,
+  createTransformerLineNumber,
+  pluginShiki,
+} from '@rspress/plugin-shiki';
+
+export default defineConfig({
+  root: path.join(__dirname, 'doc'),
+  plugins: [
+    pluginShiki({
+      transformers: [
+        createTransformerDiff(),
+        createTransformerLineNumber(),
+        createTransformerErrorLevel(),
+        createTransformerHighlight(),
+        createTransformerFocus(),
+      ],
+    }),
+  ],
+});

e2e/fixtures/plugin-shiki/tsconfig.json

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

e2e/tests/plugin-shiki.test.ts

@@ -0,0 +1,35 @@
+import path from 'node:path';
+import { expect, test } from '@playwright/test';
+import fixture from '../fixtures/plugin-rss/fixture.json';
+import {
+  getPort,
+  killProcess,
+  runBuildCommand,
+  runPreviewCommand,
+} from '../utils/runCommands';
+
+const fixtureDir = path.resolve(__dirname, '../fixtures');
+test.describe('plugin shiki test', async () => {
+  let appPort: number;
+  let app: unknown;
+  test.beforeAll(async () => {
+    const appDir = path.join(fixtureDir, 'plugin-shiki');
+    appPort = await getPort();
+    await runBuildCommand(appDir);
+    app = await runPreviewCommand(appDir, appPort);
+  });
+
+  test.afterAll(async () => {
+    if (app) {
+      await killProcess(app);
+    }
+  });
+
+  test('should render shiki code block successfully', async ({ page }) => {
+    await page.goto(`http://localhost:${appPort}`, {
+      waitUntil: 'networkidle',
+    });
+    const shikiDoms = await page.$$('.shiki');
+    expect(shikiDoms.length).toBe(4);
+  });
+});

packages/core/src/node/runtimeModule/siteData/index.ts

@@ -44,7 +44,7 @@ export async function siteDataVMPlugin(context: FactoryContext) {
   // If the dev server restart when config file, we will reuse the siteData instead of extracting the siteData from source files again.
   const domain =
     userConfig?.search && userConfig?.search?.mode === 'remote'
-      ? userConfig?.search.domain ?? ''
+      ? (userConfig?.search.domain ?? '')
       : '';
   const pages = (
     await extractPageData(

packages/plugin-preview/src/index.ts

@@ -37,7 +37,8 @@ export function pluginPreview(options?: Options): RspressPlugin {
     previewLanguages = DEFAULT_PREVIEW_LANGUAGES,
     previewCodeTransform = ({ code }: { code: string }) => code,
   } = options ?? {};
-  const previewMode = options?.previewMode ?? isMobile ? 'iframe' : 'internal';
+  const previewMode =
+    (options?.previewMode ?? isMobile) ? 'iframe' : 'internal';
   const {
     devPort = 7890,
     framework = 'react',

packages/plugin-shiki/modern.config.ts

@@ -7,7 +7,9 @@ export default defineConfig({
   buildConfig: {
     buildType: 'bundle',
     format: 'esm',
+    target: 'es2021',
     sourceMap: true,
+    shims: true,
     dts: {
       respectExternal: false,
     },

packages/plugin-shiki/src/shiki/highlighter.ts

@@ -24,7 +24,7 @@ export async function getHighlighter(
         typeof htmlOptions === 'object' ? htmlOptions.lang! : htmlOptions!;
 
       const baseLineOptions =
-        typeof htmlOptions === 'object' ? htmlOptions.lineOptions ?? [] : [];
+        typeof htmlOptions === 'object' ? (htmlOptions.lineOptions ?? []) : [];
 
       const theme =
         typeof htmlOptions === 'object' ? htmlOptions.theme : undefined;