Modify dynamic loadable component.

package.json

@@ -67,9 +67,9 @@
  "raw-tree-replace-loader": "^1.1.0",
  "rdoc-dev-utils": "^1.0.2",
  "react": "^16.3.2",
- "react-dev-utils": "^5.0.1",
  "react-document-title": "^2.0.3",
  "react-dom": "^16.3.2",
+ "react-dynamic-loadable": "^1.0.8",
  "react-hot-loader": "^4.1.1",
  "react-markdown": "^3.3.0",
  "react-router-dom": "^4.2.2",

src/web/Router.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { HashRouter, withRouter, Route, Switch } from 'react-router-dom';
+import lazyload from 'react-dynamic-loadable';
 import theme from '__project_theme__';
 import menuSource from './rdoc.tree.data.json';
-import lazyload from './lib/lazyload/';
 
 // 判断目录下是否存在 README.md
 // 存在返回路由属性，表示是一个路由

templates/default/introduce/api/theme-api.md

@@ -52,10 +52,15 @@ import menuSource from './rdoc.tree.data.json';
 
 ```js
 import BaseLayout from './layout/BasicLayout';
+import Loading from './component/Loading';
+
 export default function (Lazyload, props) {
  if (props.routeData && props.routeData.length > 0) {
  props.routeData.map((item) => {
- const Pages = Lazyload(() => import('./routes/Pages'), {...item,...props});
+ item.component = Lazyload({
+ component: () => import('./routes/Pages'),
+ LoadingComponent: Loading,
+ });
  return item;
  });
  }
@@ -69,11 +74,14 @@ export default function (Lazyload, props) {
 
 ### Lazyload
 
-文档功能工具提供的，懒加载方法，下面方法为路由添加 `component` 并传入相应参数。
+文档工具包 [react-dynamic-loadable](https://github.com/jaywcjlove/react-dynamic-loadable) 提供的，懒加载方法，下面方法为路由添加 `component` 并传入相应参数。
 
 ```js
 props.routeData.map((item) => {
- const Pages = Lazyload(() => import('./routes/Pages'), {...item,...props});
+ item.component = Lazyload({
+ component: () => import('./routes/Pages'),
+ LoadingComponent: Loading,
+ });
  return item;
 });
 ```
@@ -217,15 +225,13 @@ props.routeData.map((item) => {
 
 ## 默认依赖包
 
-工具基础的前端包工具，制作主题不需要安装。
+工具基础的前端包工具，制作主题需要安装依赖包，提供一个实例 [rdoc-theme-load-react](https://github.com/react-doc/rdoc-theme-load-react)。
 
 ```bash
 {
  "classnames": "2.2.5",
  "highlight.js": "9.12.0",
  "prop-types": "15.6.0",
- "flowchart.js": "1.8.0",
- "katex": "0.9.0-alpha2",
  "react": "16.2.0",
  "react-dom": "16.2.0",
  "react-markdown": "3.1.3",

theme/default/index.js

@@ -25,10 +25,15 @@ const getIndexProps = (menus = [], attr) => {
 export default function (Lazyload, props) {
  let indexRoute = null;
 
+ const LoadableComponent = Lazyload({
+ component: () => import('./routes/Pages'),
+ LoadingComponent: Loading,
+ });
+
  // 路由加载Component
  if (props.routeData && props.routeData.length > 0) {
  props.routeData.map((item) => {
- item.component = Lazyload(() => import('./routes/Pages'), item, <Loading />);
+ item.component = LoadableComponent;
  return item;
  });
  }
@@ -53,7 +58,7 @@ export default function (Lazyload, props) {
  // 首页路由放置路由数组中生成路由
  props.routeData.unshift({
  ...indexItem,
- component: Lazyload(() => import('./routes/Pages'), indexItem, <Loading />),
+ component: LoadableComponent,
  });
 
  // 获取首页路由

theme/default/index.less

@@ -1,5 +1,5 @@
 body {
- background-color: #fff;
+ background-color: #f9f9f9;
  font-family: Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 body, html {
@@ -28,5 +28,6 @@ a {
 :global {
  #root {
  height: 100%;
+ height: 100vh;
  }
 }

theme/default/layout/BasicLayout.js

@@ -98,7 +98,14 @@ export default class BasicLayout extends PureComponent {
  );
  }
  return (
- <Route key={item.path} exact path={item.path} component={item.component} />
+ <Route key={item.path}
+ exact
+ path={item.path}
+ render={() => {
+ const Comp = item.component;
+ return <Comp {...item} />;
+ }}
+ />
  );
  })}
  <Redirect to="/404" />

theme/default/layout/IndexLayout.js

@@ -27,7 +27,14 @@ export default class IndexLayout extends PureComponent {
  );
  }
  return (
- <Route key={item.path} exact path={item.path} component={item.component} />
+ <Route key={item.path}
+ exact
+ path={item.path}
+ render={() => {
+ const Comp = item.component;
+ return <Comp {...item} />;
+ }}
+ />
  );
  })}
  </Switch>

theme/default/lib/markdown/index.js

@@ -28,8 +28,8 @@ export default class Markdown extends React.Component {
  this.renderMarkdown();
  }
  renderMarkdown() {
- const { page: { type, relative, props } } = this.props;
- const relativeMd = relative || props.relative;
+ const { props: { type, relative } } = this.props;
+ const relativeMd = relative;
  if (!relativeMd) return null;
  let filename = formatPath(relativeMd);
  if (type === 'directory') {
@@ -50,8 +50,7 @@ export default class Markdown extends React.Component {
  });
  }
  render() {
- const { page } = this.props;
- const { title, layout } = page.mdconf;
+ const { mdconf: { title, layout } } = this.props;
  return (
  <div className={styles.markdownWapper}>
  {title && layout !== 'IndexLayout' && <h1 id={title} className={styles.pageTitle}>{title}</h1>}