refactor(theme): improve theme component load logic

umijs · Aug 14, 2020 · f468948 · f468948
1 parent 9dc0d40
commit f468948
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 15 deletions.
diff --git a/packages/dumi/e2e/minimal/.umirc.ts b/packages/dumi/e2e/minimal/.umirc.ts
@@ -0,0 +1,8 @@
+import path from 'path';
+
+export default {
+  chainWebpack(config) {
+    // load dumi-default-theme for testing
+    config.module.rule('js').include.add(path.join(__dirname, '../../../theme-default'));
+  },
+};
diff --git a/packages/preset-dumi/src/index.test.ts b/packages/preset-dumi/src/index.test.ts
@@ -1,6 +1,5 @@
 import fs from 'fs';
 import path from 'path';
-import symlink from 'symlink-dir';
 import { Service } from '@umijs/core';
 import { render } from '@testing-library/react';
 
@@ -30,14 +29,6 @@ describe('preset-dumi', () => {
       presets: [require.resolve('@umijs/preset-built-in'), require.resolve('./index.ts')],
     });
 
-    // FIXME: find the real reason why component path missing 1 level in routes.ts
-    service.paths.absPagesPath += '/tmp';
-    // workaround for load theme
-    await symlink(
-      path.join(__dirname, '../../theme-default'),
-      path.join(service.paths.absNodeModulesPath, 'dumi-theme-default'),
-    );
-
     await service.run({
       name: 'g',
       args: {

diff --git a/packages/preset-dumi/src/loader/index.ts b/packages/preset-dumi/src/loader/index.ts
@@ -16,6 +16,7 @@ export default async function loader(content: string) {
     import React from 'react';
     import { Link, AnchorLink } from 'dumi/theme';
     ${theme.builtins
+      .concat(theme.fallbacks)
       .map(component => `import ${component.identifier} from '${component.source}';`)
       .join('\n')}
     ${builtins

diff --git a/packages/preset-dumi/src/plugins/core.ts b/packages/preset-dumi/src/plugins/core.ts
@@ -8,6 +8,7 @@ import getMenuFromRoutes from '../routes/getMenuFromRoutes';
 import getLocaleFromRoutes from '../routes/getLocaleFromRoutes';
 import getHostPkgAlias from '../utils/getHostPkgAlias';
 import getRepoUrl from '../utils/getRepoUrl';
+import getTheme from '../theme/loader';
 import ctx, { init as setContext } from '../context';
 import { IDumiOpts } from '..';
 
@@ -142,7 +143,7 @@ export default function(api: IApi) {
 
     // pass props for layout
     root.component = `(props) => require('react').createElement(require('${
-      root.component
+      getTheme().layoutPath
     }').default, {
       ...${
         // escape " to ^ to avoid umi parse error, then umi will decode them

diff --git a/packages/preset-dumi/src/plugins/features/demos.ts b/packages/preset-dumi/src/plugins/features/demos.ts
@@ -53,7 +53,10 @@ export default {
 
   // add single demo render route
   api.modifyRoutes(routes => {
-    const Previewer = getTheme().builtins.find(({ identifier }) => identifier === 'Previewer');
+    const theme = getTheme();
+    const Previewer = theme.builtins
+      .concat(theme.fallbacks)
+      .find(({ identifier }) => identifier === 'Previewer');
 
     routes.unshift(
       {

diff --git a/packages/preset-dumi/src/routes/getRouteConfig.ts b/packages/preset-dumi/src/routes/getRouteConfig.ts
@@ -4,7 +4,6 @@ import slash from 'slash2';
 import { IApi, IRoute } from '@umijs/types';
 import getRouteConfigFromDir from './getRouteConfigFromDir';
 import decorateRoutes from './decorator';
-import getTheme from '../theme/loader';
 import { IDumiOpts } from '../index';
 
 export default (api: IApi, opts: IDumiOpts): IRoute[] => {
@@ -39,7 +38,7 @@ export default (api: IApi, opts: IDumiOpts): IRoute[] => {
   config.push({
     path: '/',
     wrappers: [slash(path.join(__dirname, '../theme/layout'))],
-    component: slash(path.relative(path.join(paths.absTmpPath, 'core'), getTheme().layoutPath)),
+    // component: the real theme layout will be configure in core.ts
     // decorate standard umi routes
     routes: decorateRoutes(childRoutes, opts, api),
     title: opts.title,

diff --git a/packages/preset-dumi/src/theme/loader.ts b/packages/preset-dumi/src/theme/loader.ts
@@ -55,7 +55,7 @@ function detectInstalledTheme() {
 export default () => {
   if (!cache) {
     const [theme = FALLBACK_THEME] = detectInstalledTheme();
-    const modulePath = path.join(ctx.umi.paths.absNodeModulesPath, theme);
+    const modulePath = winPath(path.join(ctx.umi.paths.absNodeModulesPath, theme));
     const builtinPath = path.join(modulePath, 'src/builtins');
     const components = fs.existsSync(builtinPath)
       ? fs
@@ -79,7 +79,7 @@ export default () => {
 
     cache = {
       name: theme,
-      layoutPath: path.join(modulePath, 'src', 'layout'),
+      layoutPath: winPath(path.join(theme, 'src', 'layout')),
       modulePath,
       builtins: components,
       fallbacks,