chore: upgrade landing-page dependencies

ly525
1 parent 6ac81823
Showing 3 changed files with 122 additions and 45 deletions
front-end/landing-page/src/pages/.umi/router.js
front-end/landing-page/src/pages/.umi/umi.js
front-end/landing-page/src/pages/.umi/umiExports.ts
 import React from 'react';
-import { Router as DefaultRouter, Route, Switch } from 'react-router-dom';
+import {
+  Router as DefaultRouter,
+  Route,
+  Switch,
+  StaticRouter,
+} from 'react-router-dom';
 import dynamic from 'umi/dynamic';
 import renderRoutes from 'umi/lib/renderRoutes';
-import history from '@tmp/history';
+import history from '@@/history';
 const Router = DefaultRouter;
@@ -68,7 +73,15 @@ export default class RouterWrapper extends React.Component {
       });
     }
     this.unListen = history.listen(routeChangeHandler);
-    routeChangeHandler(history.location);
+    // dva 中 history.listen 会初始执行一次
+    // 这里排除掉 dva 的场景，可以避免 onRouteChange 在启用 dva 后的初始加载时被多执行一次
+    const isDva =
+      history.listen
+        .toString()
+        .indexOf('callback(history.location, history.action)') > -1;
+    if (!isDva) {
+      routeChangeHandler(history.location);
+    }
   }
   componentWillUnmount() {
@@ -32,7 +32,7 @@ let clientRender = async () =&gt; {
     props = window.g_initialData;
   } else {
     const pathname = location.pathname;
-    const activeRoute = findRoute(require('@tmp/router').routes, pathname);
+    const activeRoute = findRoute(require('@@/router').routes, pathname);
     // 在客户端渲染前，执行 getInitialProps 方法
     // 拿到初始数据
     if (
@@ -81,58 +81,122 @@ if (__IS_BROWSER) {
 // export server render
 let serverRender, ReactDOMServer;
 if (!__IS_BROWSER) {
+  const { matchRoutes } = require('react-router-config');
+  const { StaticRouter } = require('react-router');
+  // difference: umi-history has query object
+  const { createLocation } = require('umi-history');
+  // don't remove, use stringify html map
+  const stringify = require('serialize-javascript');
+  const router = require('./router');
+
+  /**
+   * 1. Load dynamicImport Component
+   * 2. Get Component initialProps function data
+   * return Component props
+   * @param pathname
+   * @param props
+   */
+  const getInitialProps = async (pathname, props) => {
+    const { routes } = router;
+    const matchedComponents = matchRoutes(routes, pathname)
+      .map(({ route }) => {
+        if (route.component) {
+          return !route.component.preload
+            ? // 同步
+              route.component
+            : // 异步，支持 dynamicImport
+              route.component.preload().then(component => component.default);
+        }
+      })
+      .filter(c => c);
+    const loadedComponents = await Promise.all(matchedComponents);
+
+    // get Store
+    const initialProps = plugins.apply('modifyInitialProps', {
+      initialValue: {},
+    });
+    // support getInitialProps
+    const promises = loadedComponents.map(component => {
+      if (component && component.getInitialProps) {
+        return component.getInitialProps({
+          isServer: true,
+          ...props,
+          ...initialProps,
+        });
+      }
+      return Promise.resolve(null);
+    });
+
+    return Promise.all(promises);
+  };
+
   serverRender = async (ctx = {}) => {
     // ctx.req.url may be `/bar?locale=en-US`
     const [pathname] = (ctx.req.url || '').split('?');
-    const history = require('@tmp/history').default;
-    history.push(ctx.req.url);
-    let props = {};
-    const activeRoute =
-      findRoute(require('./router').routes, pathname) || false;
-    if (
-      activeRoute &&
-      activeRoute.component &&
-      activeRoute.component.getInitialProps
-    ) {
-      const initialProps = plugins.apply('modifyInitialProps', {
-        initialValue: {},
-      });
-      // patch query object
-      const location = history.location
-        ? { ...history.location, query: getUrlQuery(history.location.search) }
-        : {};
-      props = await activeRoute.component.getInitialProps({
-        route: activeRoute,
-        isServer: true,
-        location,
-        // only exist in server
-        req: ctx.req || {},
-        res: ctx.res || {},
-        ...initialProps,
-      });
-      props = plugins.apply('initialProps', {
-        initialValue: props,
+    // global
+    global.req = {
+      url: ctx.req.url,
+    };
+    const location = createLocation(ctx.req.url);
+    const activeRoute = findRoute(router.routes, pathname);
+    // omit component
+    const { component, ...restRoute } = activeRoute || {};
+    // router context hook
+    // get current router status 40x / 30x, share with server
+    const context = {};
+    // TODO: getInitialProps timeout handle
+    const initialData = await getInitialProps(pathname, {
+      route: restRoute,
+      // only exist in server
+      req: ctx.req || {},
+      res: ctx.res || {},
+      context,
+      location,
+    });
+
+    // 当前路由（不包含 Layout）的 getInitialProps 有返回值
+    // Page 值为 undefined 时，有 getInitialProps 无返回，此时 return dva model
+    const pageData = initialData[initialData.length - 1];
+    if (pageData === undefined) {
+      initialData[initialData.length - 1] = plugins.apply('initialProps', {
+        initialValue: pageData,
       });
-    } else {
-      // message activeRoute or getInitialProps not found
-      console.log(
-        !activeRoute
-          ? `${pathname} activeRoute not found`
-          : `${pathname} activeRoute's getInitialProps function not found`,
-      );
     }
+
+    // reduce all match component getInitialProps
+    // in the same object key
+    // page data key will override layout key
+    const props = Array.isArray(initialData)
+      ? initialData.reduce(
+          (acc, curr) => ({
+            ...acc,
+            ...curr,
+          }),
+          {},
+        )
+      : {};
+
+    const App = React.createElement(
+      StaticRouter,
+      {
+        location: ctx.req.url,
+        context,
+      },
+      React.createElement(router.default, props),
+    );
+
+    // render rootContainer for htmlTemplateMap
     const rootContainer = plugins.apply('rootContainer', {
-      initialValue: React.createElement(require('./router').default, props),
+      initialValue: App,
     });
     const htmlTemplateMap = {};
+    const matchPath = activeRoute ? activeRoute.path : undefined;
     return {
-      htmlElement:
-        activeRoute && activeRoute.path
-          ? htmlTemplateMap[activeRoute.path]
-          : '',
+      htmlElement: matchPath ? htmlTemplateMap[matchPath] : '',
       rootContainer,
-      matchPath: activeRoute && activeRoute.path,
+      matchPath,
       g_initialData: props,
+      context,
     };
   };
   // using project react-dom version