fix(preset): build failed when enable htmlSuffix (umijs#133)

mizi-lin · Apr 21, 2020 · 97bff3d · 97bff3d
1 parent f51fd29
commit 97bff3d
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 38 deletions.
diff --git a/packages/preset-dumi/src/plugins/core.ts b/packages/preset-dumi/src/plugins/core.ts
@@ -71,14 +71,32 @@ export default function(api: IApi) {
   };
 
   // repalce default routes with generated routes
-  api.modifyRoutes(routes => {
-    const opts = mergeUserConfig(defaultOpts, api);
+  api.onPatchRoutesBefore(({ routes, parentRoute }) => {
+    // only deal with the top level routes
+    if (!parentRoute) {
+      const opts = mergeUserConfig(defaultOpts, api);
+
+      // save umi api & opts into context
+      setContext(api, opts);
+
+      const result = getRouteConfig(api, opts);
 
-    // save umi api & opts into context
-    setContext(api, opts);
+      // clear original routes
+      routes.splice(0, routes.length);
 
-    const result = getRouteConfig(api, opts);
-    const childRoutes = result[0].routes;
+      // append single demo routes to top-level
+      result.unshift(...getDemoRoutes(api.paths));
+
+      // append new routes
+      routes.push(...result);
+    }
+  });
+
+  // repalce default routes with generated routes
+  api.modifyRoutes(routes => {
+    const opts = mergeUserConfig(defaultOpts, api);
+    const root = routes.find(route => route.path === '/');
+    const childRoutes = root.routes;
     const meta = {
       menus: getMenuFromRoutes(childRoutes, opts, api.paths),
       locales: getLocaleFromRoutes(childRoutes, opts),
@@ -90,12 +108,9 @@ export default function(api: IApi) {
       repoUrl: getRepoUrl(pkg.repository?.url || pkg.repository),
     };
 
-    // append umi NotFound component to routes
-    childRoutes.push(...routes.filter(({ path: routerPath }) => !routerPath));
-
     // pass props for layout
-    result[0].component = `(props) => require('react').createElement(require('${
-      result[0].component
+    root.component = `(props) => require('react').createElement(require('${
+      root.component
     }').default, {
       ...${
         // escape " to ^ to avoid umi parse error, then umi will decode them
@@ -105,10 +120,7 @@ export default function(api: IApi) {
       ...props,
     })`;
 
-    // append single demo routes to top-level
-    result.unshift(...getDemoRoutes(api.paths));
-
-    return result;
+    return routes;
   });
 
   // exclude .md file for url-loader

diff --git a/packages/preset-dumi/src/routes/decorator/relative.ts b/packages/preset-dumi/src/routes/decorator/relative.ts
@@ -3,17 +3,13 @@ import slash from 'slash2';
 import { RouteProcessor } from '.';
 
 /**
- * this processor only use to convert relative component path to be relatived with umi temp routes.ts
- * it will be removed when umi 3 resolve relative component path properly like umi 2
+ * Umi process route component from pages path but dumi process with cwd, so the path need to be converted
  */
 export default (function relative(routes) {
   return routes.map(route => {
     if (route.component && !path.isAbsolute(route.component)) {
       route.component = slash(
-        path.relative(
-          path.join(this.umi.paths.absTmpPath, 'core'),
-          path.join(this.umi.paths.cwd, route.component),
-        ),
+        path.relative(this.umi.paths.absPagesPath, path.join(this.umi.paths.cwd, route.component)),
       );
     }
 

diff --git a/packages/preset-dumi/src/routes/getDemoRoutes.ts b/packages/preset-dumi/src/routes/getDemoRoutes.ts
@@ -22,5 +22,5 @@ export function addDemoRoute(filePath: string): string {
 export default (paths: IApi['paths']): IRoute[] =>
   Object.entries(singleRouteDemoSet).map(([filePath, routePathName]) => ({
     path: routePathName,
-    component: path.relative(path.join(paths.absTmpPath, 'core'), filePath),
+    component: path.relative(paths.absPagesPath, filePath),
   }));
diff --git a/packages/preset-dumi/src/routes/getMenuFromRoutes.ts b/packages/preset-dumi/src/routes/getMenuFromRoutes.ts
@@ -1,6 +1,7 @@
 import path from 'path';
 import slash from 'slash2';
 import { IRoute, IApi } from '@umijs/types';
+import ctx from '../context';
 import { IDumiOpts } from '..';
 
 export interface IMenuItem {
@@ -100,6 +101,14 @@ function convertUserMenuChilds(
   });
 }
 
+export function addHtmlSuffix(oPath: string) {
+  if (oPath && ctx.umi?.config?.exportStatic?.htmlSuffix) {
+    return `${oPath}.html`;
+  }
+
+  return oPath;
+}
+
 export function menuSorter(prev, next) {
   const prevOrder = typeof prev.meta?.order === 'number' ? prev.meta.order : Infinity;
   const nextOrder = typeof next.meta?.order === 'number' ? next.meta.order : Infinity;
@@ -133,7 +142,7 @@ export default function getMenuFromRoutes(
   routes.forEach(route => {
     if (isValidMenuRoutes(route)) {
       const { group } = route.meta;
-      const nav = route.meta.nav?.path || '*';
+      const nav = addHtmlSuffix(route.meta.nav?.path) || '*';
       const locale = route.meta.locale || opts.locales[0]?.[0] || '*';
       const menuItem: IMenuItem = {
         path: route.path,
@@ -147,7 +156,7 @@ export default function getMenuFromRoutes(
 
       if (group?.path) {
         const { title, path, ...meta } = group;
-        const groupKey = group.path || group.title;
+        const groupKey = addHtmlSuffix(group.path) || group.title;
 
         // group route items by group path & locale
         localeMenusMapping[locale] = {

diff --git a/packages/preset-dumi/src/routes/getNavFromRoutes.ts b/packages/preset-dumi/src/routes/getNavFromRoutes.ts
@@ -1,4 +1,5 @@
 import { IRoute } from '@umijs/types';
+import { addHtmlSuffix } from './getMenuFromRoutes';
 import { IDumiOpts } from '..';
 
 export interface INavItem {
@@ -23,12 +24,14 @@ export default (routes: IRoute[], opts: IDumiOpts, userCustomNavs: INav | INavIt
   routes.forEach(route => {
     if (route.meta?.nav) {
       const locale = route.meta.locale || opts.locales[0]?.[0] || '*';
+      const navPath = addHtmlSuffix(route.meta.nav.path);
 
       localeNavs[locale] = {
         ...(localeNavs[locale] || {}),
-        [route.meta.nav.path]: {
-          ...(localeNavs[locale]?.[route.meta.nav.path] || {}),
+        [navPath]: {
+          ...(localeNavs[locale]?.[navPath] || {}),
           ...(route.meta.nav || {}),
+          path: navPath,
         },
       };
     }

diff --git a/packages/preset-dumi/src/routes/getRouteConfig.ts b/packages/preset-dumi/src/routes/getRouteConfig.ts
@@ -21,8 +21,8 @@ export default (api: IApi, opts: IDumiOpts): IRoute[] => {
     // only apply user's routes if there has routes config
     config[0].routes = opts.routes.map(({ component, ...routeOpts }) => ({
       component: path.isAbsolute(component as string)
-        ? component
-        : slash(path.join(paths.absPagesPath, component as string)),
+        ? slash(path.relative(paths.cwd, component))
+        : component,
       ...routeOpts,
     }));
   } else {

diff --git a/packages/preset-dumi/src/routes/test/demo.test.js b/packages/preset-dumi/src/routes/test/demo.test.js
@@ -6,22 +6,20 @@ import getDemoRoutes from '../getDemoRoutes';
 const FIXTURES_PATH = path.join(__dirname, '..', 'fixtures');
 
 describe('routes: demo', () => {
-  let routes;
-
   it('getDemoRoutes', () => {
-    routes = getRoute(path.join(FIXTURES_PATH, 'demo'), { locales: [] });
-    routes = decorateRoute(
+    const routes = getRoute(path.join(FIXTURES_PATH, 'demo'), { locales: [] });
+    decorateRoute(
       routes,
       { locales: [] },
       {
         paths: {
           cwd: process.cwd(),
-          absTmpPath: path.join(process.cwd(), '.umi'),
+          absPagesPath: path.join(process.cwd(), 'src/pages'),
         },
       },
     );
 
-    expect(getDemoRoutes({ absTmpPath: path.join(process.cwd(), '.umi') })).toEqual([
+    expect(getDemoRoutes({ absPagesPath: path.join(process.cwd(), 'src/pages') })).toEqual([
       {
         path: '/_demos/demo',
         component: '../../packages/preset-dumi/src/routes/fixtures/demo/1/demo.tsx',

diff --git a/packages/preset-dumi/src/routes/test/locale.test.js b/packages/preset-dumi/src/routes/test/locale.test.js
@@ -108,7 +108,7 @@ describe('routes & menu: locales', () => {
       {
         paths: {
           cwd: process.cwd(),
-          absTmpPath: path.join(process.cwd(), '.umi'),
+          absPagesPath: path.join(process.cwd(), 'src/pages'),
         },
       },
     );

diff --git a/packages/preset-dumi/src/routes/test/normal.test.js b/packages/preset-dumi/src/routes/test/normal.test.js
@@ -56,7 +56,7 @@ describe('routes & menu: normal', () => {
       {
         paths: {
           cwd: process.cwd(),
-          absTmpPath: path.join(process.cwd(), '.umi'),
+          absPagesPath: path.join(process.cwd(), 'src/pages'),
         },
       },
     );

diff --git a/packages/preset-dumi/src/routes/test/site.test.js b/packages/preset-dumi/src/routes/test/site.test.js
@@ -60,7 +60,7 @@ describe('routes & menu: site mode', () => {
       {
         paths: {
           cwd: process.cwd(),
-          absTmpPath: path.join(process.cwd(), '.umi'),
+          absPagesPath: path.join(process.cwd(), 'src/pages'),
         },
       },
     );

diff --git a/packages/preset-dumi/src/themes/default/layout.tsx b/packages/preset-dumi/src/themes/default/layout.tsx
@@ -114,7 +114,7 @@ export default class Layout extends Component<ILayoutProps & RouteProps> {
       for (let i = navs[state.currentLocale].length - 1; i >= 0; i -= 1) {
         const nav = navs[state.currentLocale][i];
 
-        if (new RegExp(`^${nav.path}(/|$)`).test(location.pathname)) {
+        if (new RegExp(`^${nav.path.replace(/\.html$/, '')}(/|\.|$)`).test(location.pathname)) {
           navPath = nav.path;
           break;
         }