fix(theme/eject): allow treeshaking manually the theme/index file

packages/core/rslib.config.ts

@@ -3,8 +3,9 @@ import { fileURLToPath } from 'node:url';
 import { pluginReact } from '@rsbuild/plugin-react';
 import { pluginSass } from '@rsbuild/plugin-sass';
 import { pluginSvgr } from '@rsbuild/plugin-svgr';
-import { defineConfig } from '@rslib/core';
+import { defineConfig, type RsbuildPlugin } from '@rslib/core';
 import { pluginPublint } from 'rsbuild-plugin-publint';
+import { exportStarOptimizerTransform } from './src/node/theme/exportStarOptimizerTransform';
 
 const COMMON_EXTERNALS = [
   'virtual-routes',
@@ -39,6 +40,7 @@ export default defineConfig({
 
           // TODO: should add entry by new URL parser in Rspack module graph
           'node/mdx/loader': './src/node/mdx/loader.ts',
+          'node/theme/loader': './src/node/theme/loader.ts',
           'node/ssg/renderPageWorker': './src/node/ssg/renderPageWorker.ts',
         },
       },
@@ -116,6 +118,17 @@ export default defineConfig({
         pluginReact(),
         pluginSvgr({ svgrOptions: { exportType: 'default' } }),
         pluginSass(),
+        {
+          name: 'export_star_optimizer',
+          setup(api) {
+            api.transform(
+              { test: /src[\\/]theme[\\/]index\.ts/ },
+              ({ code, resourcePath }) => {
+                return exportStarOptimizerTransform(code, resourcePath);
+              },
+            );
+          },
+        } satisfies RsbuildPlugin,
       ],
       source: {
         define: {

packages/core/src/node/constants.ts

@@ -33,6 +33,7 @@ export const PACKAGE_ROOT = path.dirname(
   require.resolve('@rspress/core/package.json'),
 );
 export const DEFAULT_THEME = path.join(PACKAGE_ROOT, 'dist/theme');
+export const EJECTED_THEME = path.join(PACKAGE_ROOT, 'dist/eject-theme');
 export const TEMPLATE_PATH = path.join(PACKAGE_ROOT, 'index.html');
 
 export const CSR_CLIENT_ENTRY = path.join(

packages/core/src/node/eject.ts

@@ -1,11 +1,8 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
-import { fileURLToPath } from 'node:url';
 import { logger } from '@rspress/shared/logger';
 import picocolors from 'picocolors';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+import { EJECTED_THEME } from './constants';
 
 // For testing purposes, allow overriding the theme path
 let _themeComponentsPathOverride: string | undefined;
@@ -23,7 +20,7 @@ function getThemeComponentsPath(): string {
   if (_themeComponentsPathOverride) {
     return _themeComponentsPathOverride;
   }
-  return path.join(__dirname, 'eject-theme/components');
+  return path.join(EJECTED_THEME, 'components');
 }
 
 /**

packages/core/src/node/initRsbuild.ts

@@ -1,5 +1,6 @@
 import { createRequire } from 'node:module';
-import path from 'node:path';
+import path, { join } from 'node:path';
+import { cwd } from 'node:process';
 import { fileURLToPath } from 'node:url';
 import type {
   RsbuildConfig,
@@ -89,7 +90,9 @@ async function createInternalBuildConfig(
   routeService: RouteService,
   pluginDriver: PluginDriver,
 ): Promise<RsbuildConfig> {
-  const CUSTOM_THEME_DIR = config.themeDir!;
+  const CUSTOM_THEME_DIR = path.isAbsolute(config.themeDir!)
+    ? config.themeDir!
+    : path.join(cwd(), config.themeDir!);
   const outDir = config?.outDir ?? OUTPUT_DIR;
 
   const base = config?.base ?? '';
@@ -363,10 +366,22 @@ async function createInternalBuildConfig(
         chain.resolve.extensions.prepend('.md').prepend('.mdx').prepend('.mjs');
 
         chain.module
-          .rule('css-virtual-module')
+          .rule('rspress-css-virtual-module')
           .test(/\.rspress[\\/]runtime[\\/]virtual-global-styles/)
           .merge({ sideEffects: true });
 
+        // Optimize the theme
+        const themeIndexPath = join(CUSTOM_THEME_DIR, 'index');
+        const themeIndexRule = chain.module
+          .rule('rspress-theme-index')
+          .test(themeIndexPath);
+        themeIndexRule.merge({
+          sideEffects: false,
+        });
+        themeIndexRule
+          .use('EXPORT_STAR_OPTIMIZE')
+          .loader(fileURLToPath(new URL('./theme/loader.js', import.meta.url)));
+
         if (isSsg || isSsgMd) {
           chain.optimization.splitChunks({});
         }

packages/core/src/node/theme/exportStarOptimizerTransform.test.ts

@@ -0,0 +1,43 @@
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+import { describe, expect, it } from '@rstest/core';
+import { exportStarOptimizerTransform } from './exportStarOptimizerTransform';
+
+const fixturesRoot = path.join(__dirname, 'fixtures');
+
+async function loadFixture(caseName: string) {
+  const filePath = path.join(fixturesRoot, caseName, 'index.ts');
+  const code = await readFile(filePath, 'utf-8');
+  return { code, filePath };
+}
+
+describe('exportStarOptimizerTransform', () => {
+  it('replaces export * with named exports, excluding locals', async () => {
+    const { code, filePath } = await loadFixture('basic');
+    const result = await exportStarOptimizerTransform(code, filePath);
+
+    expect(result).toMatchInlineSnapshot(`
+"export const A = 1;\nexport { Button, Other, default } from './foo';\n"
+`);
+  });
+
+  it('removes export * when module exports are already local', async () => {
+    const { code, filePath } = await loadFixture('local-only');
+    const result = await exportStarOptimizerTransform(code, filePath);
+
+    expect(result).toMatchInlineSnapshot(`
+      "export const A = 1;
+
+      "
+    `);
+  });
+
+  it('resolves index fallback when no direct file match', async () => {
+    const { code, filePath } = await loadFixture('index-fallback');
+    const result = await exportStarOptimizerTransform(code, filePath);
+
+    expect(result).toMatchInlineSnapshot(`
+"export { B } from './foo';\n"
+`);
+  });
+});

packages/core/src/node/theme/exportStarOptimizerTransform.ts

@@ -0,0 +1,223 @@
+import { readFile } from 'node:fs/promises';
+import { dirname } from 'node:path';
+import { rspack } from '@rsbuild/core';
+
+type ResolveAsync = (
+  directory: string,
+  request: string,
+) => Promise<{ path?: string; error?: string }>;
+
+const resolver = new rspack.experiments.resolver.ResolverFactory({
+  extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx', '.json'],
+  mainFiles: ['index'],
+  mainFields: ['module', 'browser', 'main'],
+  alias: {},
+});
+
+/**
+ * Convert `export *` into named exports via regex for tree-shaking friendliness.
+ */
+class ExportStarOptimizer {
+  filepath: string;
+  _resolve: ResolveAsync | undefined;
+
+  localExports: Set<string>;
+
+  reExports: Map<string, { source: string; imported: string }>;
+
+  constructor(filepath: string, resolveAsync?: ResolveAsync) {
+    this.filepath = filepath;
+    this.localExports = new Set();
+    this.reExports = new Map();
+    this._resolve = resolveAsync;
+  }
+
+  resolve(
+    directory: string,
+    request: string,
+  ): Promise<{ path?: string; error?: string }> {
+    if (this._resolve) {
+      return this._resolve(directory, request);
+    }
+    return resolver.async(directory, request);
+  }
+
+  /**
+   * Parse source code to collect local exports.
+   */
+  parseLocalExports(code: string): void {
+    // 移除注释
+    const cleanCode = this.removeComments(code);
+
+    // 1. export const/let/var name = ...
+    const varExportRegex = /export\s+(?:const|let|var)\s+(\w+)/g;
+    let match: RegExpExecArray | null;
+    while ((match = varExportRegex.exec(cleanCode)) !== null) {
+      this.localExports.add(match[1]);
+    }
+
+    // 2. export function name() {} 或 export class Name {}
+    const funcClassRegex = /export\s+(?:function|class)\s+(\w+)/g;
+    while ((match = funcClassRegex.exec(cleanCode)) !== null) {
+      this.localExports.add(match[1]);
+    }
+
+    // 3. export { name1, name2 }
+    const namedExportRegex = /export\s*\{([^}]+)\}/g;
+    while ((match = namedExportRegex.exec(cleanCode)) !== null) {
+      const names = match[1].split(',').map(n => {
+        // Handle `name as alias`.
+        const parts = n.trim().split(/\s+as\s+/);
+        return parts[parts.length - 1].trim();
+      });
+      names.forEach(name => this.localExports.add(name));
+    }
+
+    // 4. export { name } from 'module'
+    const reExportRegex = /export\s*\{([^}]+)\}\s*from\s*['"]([^'"]+)['"]/g;
+    while ((match = reExportRegex.exec(cleanCode)) !== null) {
+      const names = match[1].split(',').map(n => n.trim().split(/\s+as\s+/));
+      const source = match[2];
+      names.forEach(parts => {
+        const exported = parts[parts.length - 1].trim();
+        const imported = parts[0].trim();
+        this.localExports.add(exported);
+        this.reExports.set(exported, { source, imported });
+      });
+    }
+
+    // 5. export default
+    if (/export\s+default/.test(cleanCode)) {
+      this.localExports.add('default');
+    }
+  }
+
+  /**
+   * Get all exports of a module.
+   */
+  async getModuleExports(modulePath: string): Promise<Set<string>> {
+    const baseDir = dirname(this.filepath);
+    const resolved = await this.resolve(baseDir, modulePath);
+
+    if (resolved.error || !resolved.path) {
+      throw new Error(resolved.error || 'Failed to resolve path');
+    }
+
+    try {
+      const moduleCode = await readFile(resolved.path, 'utf-8');
+      const cleanCode = this.removeComments(moduleCode);
+      const exports = new Set<string>();
+
+      // Extract export names.
+      const varExportRegex = /export\s+(?:const|let|var)\s+(\w+)/g;
+      let match: RegExpExecArray | null;
+      while ((match = varExportRegex.exec(cleanCode)) !== null) {
+        exports.add(match[1]);
+      }
+
+      const funcClassRegex = /export\s+(?:function|class)\s+(\w+)/g;
+      while ((match = funcClassRegex.exec(cleanCode)) !== null) {
+        exports.add(match[1]);
+      }
+
+      const namedExportRegex = /export\s*\{([^}]+)\}(?!\s*from)/g;
+      while ((match = namedExportRegex.exec(cleanCode)) !== null) {
+        const names = match[1].split(',').map(n => {
+          const parts = n.trim().split(/\s+as\s+/);
+          return parts[parts.length - 1].trim();
+        });
+        names.forEach(name => exports.add(name));
+      }
+
+      const reExportRegex = /export\s*\{([^}]+)\}\s*from/g;
+      while ((match = reExportRegex.exec(cleanCode)) !== null) {
+        const names = match[1].split(',').map(n => {
+          const parts = n.trim().split(/\s+as\s+/);
+          return parts[parts.length - 1].trim();
+        });
+        names.forEach(name => exports.add(name));
+      }
+
+      if (/export\s+default/.test(cleanCode)) {
+        exports.add('default');
+      }
+
+      return exports;
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      console.warn(`Cannot parse module ${modulePath}: ${message}`);
+      return new Set();
+    }
+  }
+
+  /**
+   * Remove comments from code.
+   */
+  removeComments(code: string): string {
+    // Remove single-line comments
+    code = code.replace(/\/\/.*$/gm, '');
+    // Remove multi-line comments
+    code = code.replace(/\/\*[\s\S]*?\*\//g, '');
+    return code;
+  }
+
+  /**
+   * Transform code by replacing `export *`.
+   */
+  async transform(code: string): Promise<string> {
+    // Parse local exports.
+    this.parseLocalExports(code);
+
+    // Find all `export * from 'xxx'` statements.
+    const exportStarRegex = /export\s*\*\s*from\s*['"]([^'"]+)['"]\s*;?/g;
+    let match: RegExpExecArray | null;
+    const replacements: Array<{
+      startIndex: number;
+      endIndex: number;
+      replacement: string;
+    }> = [];
+
+    while ((match = exportStarRegex.exec(code)) !== null) {
+      const fullMatch = match[0];
+      const source = match[1];
+      const startIndex = match.index;
+      const endIndex = startIndex + fullMatch.length;
+
+      // Get exports of the target module.
+      const moduleExports = await this.getModuleExports(source);
+
+      // Filter out exports already defined locally (avoid conflicts).
+      const exportsToInclude = Array.from(moduleExports)
+        .filter(name => !this.localExports.has(name))
+        .sort();
+
+      // Generate the replacement export statement.
+      let replacement = '';
+      if (exportsToInclude.length > 0) {
+        replacement = `export { ${exportsToInclude.join(', ')} } from '${source}';`;
+      }
+
+      replacements.push({ startIndex, endIndex, replacement });
+    }
+
+    // Replace from back to front to avoid index shifts.
+    replacements.reverse().forEach(({ startIndex, endIndex, replacement }) => {
+      code =
+        code.substring(0, startIndex) + replacement + code.substring(endIndex);
+    });
+
+    return code;
+  }
+}
+
+/**
+ * Transform a code string.
+ */
+export async function exportStarOptimizerTransform(
+  code: string,
+  filepath: string,
+  resolveAsync?: ResolveAsync,
+): Promise<string> {
+  const transformer = new ExportStarOptimizer(filepath, resolveAsync);
+  return transformer.transform(code);
+}

packages/core/src/node/theme/fixtures/basic/foo.ts

@@ -0,0 +1,3 @@
+export const Button = 1;
+export default 2;
+export const Other = 3;

packages/core/src/node/theme/fixtures/basic/index.ts

@@ -0,0 +1,2 @@
+export const A = 1;
+export * from './foo';

packages/core/src/node/theme/fixtures/index-fallback/foo/index.ts

@@ -0,0 +1 @@
+export const B = 1;

packages/core/src/node/theme/fixtures/index-fallback/index.ts

@@ -0,0 +1 @@
+export * from './foo';

packages/core/src/node/theme/fixtures/local-only/foo.ts

@@ -0,0 +1 @@
+export const A = 1;

packages/core/src/node/theme/fixtures/local-only/index.ts

@@ -0,0 +1,2 @@
+export const A = 1;
+export * from './foo';