refactor: make chunk name clean for theme routes (#1513)

src/features/routes.ts

@@ -1,11 +1,12 @@
 import { SP_ROUTE_PREFIX } from '@/constants';
 import type { IApi } from '@/types';
+import { getClientDistFile } from '@/utils';
 import { getConventionRoutes } from '@umijs/core';
 import { createRouteId } from '@umijs/core/dist/route/utils';
 import path from 'path';
 import { plural } from 'pluralize';
 import type { IRoute } from 'umi';
-import { glob, resolve, winPath } from 'umi/plugin-utils';
+import { glob, winPath } from 'umi/plugin-utils';
 
 const CTX_LAYOUT_ID = 'dumi-context-layout';
 
@@ -89,29 +90,6 @@ function flatRoute(route: IRoute, docLayoutId: string) {
   }
 }
 
-/**
- * get page route file
- */
-function getClientPageFile(file: string, cwd: string) {
-  let clientFile: string;
-
-  try {
-    // why use `resolve`?
-    // because `require.resolve` will use the final path of symlink file
-    // and in tnpm project, umi will get a file path includes `@` symbol then
-    // generate a chunk name with `@` symbol, which is not supported by cdn
-    clientFile = resolve.sync(`dumi/dist/${file}`, {
-      basedir: cwd,
-      preserveSymlinks: false,
-    });
-  } catch {
-    // fallback to use `require.resolve`, for dumi self docs & examples
-    clientFile = require.resolve(`../${file}`);
-  }
-
-  return winPath(clientFile);
-}
-
 export default (api: IApi) => {
   const extraWatchPaths = [
     ...(api.userConfig.resolve?.atomDirs || []),
@@ -284,7 +262,7 @@ export default (api: IApi) => {
         path: '*',
         absPath: '/*',
         parentId: docLayoutId,
-        file: getClientPageFile('client/pages/404', api.cwd),
+        file: getClientDistFile('dist/client/pages/404', api.cwd),
       };
     }
 
@@ -294,7 +272,7 @@ export default (api: IApi) => {
       path: `${SP_ROUTE_PREFIX}demos/:id`,
       absPath: `/${SP_ROUTE_PREFIX}demos/:id`,
       parentId: demoLayoutId,
-      file: getClientPageFile('client/pages/Demo', api.cwd),
+      file: getClientDistFile('dist/client/pages/Demo', api.cwd),
       // disable prerender for demo render page, because umi-hd doesn't support ssr
       // ref: https://github.com/umijs/dumi/pull/1451
       prerender: false,

src/features/theme/index.ts

@@ -5,15 +5,14 @@ import {
   THEME_PREFIX,
 } from '@/constants';
 import type { IApi } from '@/types';
+import { getClientDistFile } from '@/utils';
 import { parseModuleSync } from '@umijs/bundler-utils';
 import fs from 'fs';
 import path from 'path';
-import { deepmerge, lodash, winPath } from 'umi/plugin-utils';
+import { deepmerge, lodash, resolve, winPath } from 'umi/plugin-utils';
 import { safeExcludeInMFSU } from '../derivative';
 import loadTheme, { IThemeLoadResult } from './loader';
 
-const DEFAULT_THEME_PATH = path.join(__dirname, '../../../theme-default');
-
 /**
  * get pkg theme name
  */
@@ -39,7 +38,10 @@ function getPkgThemePath(api: IApi) {
   return (
     pkgThemeName &&
     path.dirname(
-      require.resolve(`${pkgThemeName}/package.json`, { paths: [api.cwd] }),
+      resolve.sync(`${pkgThemeName}/package.json`, {
+        basedir: api.cwd,
+        preserveSymlinks: true,
+      }),
     )
   );
 }
@@ -55,6 +57,10 @@ function getModuleExports(modulePath: string) {
 }
 
 export default (api: IApi) => {
+  const DEFAULT_THEME_PATH = path.join(
+    getClientDistFile('package.json', api.cwd),
+    '../theme-default',
+  );
   // load default theme
   const defaultThemeData = loadTheme(DEFAULT_THEME_PATH);
   // try to load theme package

src/utils.ts

@@ -2,7 +2,7 @@ import Cache from 'file-system-cache';
 import fs from 'fs';
 import yaml from 'js-yaml';
 import path from 'path';
-import { lodash, logger, winPath } from 'umi/plugin-utils';
+import { lodash, logger, resolve, winPath } from 'umi/plugin-utils';
 
 /**
  * get route path from file-system path
@@ -158,3 +158,25 @@ export function getProjectRoot(cwd: string) {
 
   return winPath(cwd);
 }
+
+/**
+ * get dumi client dist file and preserve symlink(pnpm, tnpm & etc.) to make chunk name clean
+ */
+export function getClientDistFile(file: string, cwd: string) {
+  let clientFile: string;
+
+  try {
+    // why use `resolve`?
+    // because `require.resolve` will use the final path of symlink file
+    // and in tnpm or pnpm project, the long realpath make chunk name unexpected
+    clientFile = resolve.sync(`dumi/${file}`, {
+      basedir: cwd,
+      preserveSymlinks: true,
+    });
+  } catch {
+    // fallback to use `require.resolve`, for dumi self docs & examples
+    clientFile = require.resolve(`../${file}`);
+  }
+
+  return winPath(clientFile);
+}