@umijs/renderer-react - npm Package Compare versions

Comparing version 3.2.0-beta.8 to 3.2.0-beta.9

dist/index.esm.js

@@ -303,3 +303,4 @@ import { hydrate, render } from 'react-dom';
   var Component = route.component;
-  return function ComponentWithInitialPropsFetch(props) {
+
+  function ComponentWithInitialPropsFetch(props) {
     var _useState = useState(function () {
@@ -317,7 +318,10 @@ return window.g_initialProps;
        * 3. 如果任何时候都走 2 次，配置 forceInitial: true，这个场景用于静态站点的首屏加载希望走最新数据
+       * 4. 开启动态加载后，会在执行 getInitialProps 前预加载下
        */
       if (!window.g_initialProps) {
         _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-          var ctx, _opts$plugin$applyPlu, modifyGetInitialPropsCtx, _initialProps;
+          var _Component;
 
+          var preloadComponent, ctx, _opts$plugin$applyPlu, modifyGetInitialPropsCtx, _initialProps;
+
           return regeneratorRuntime.wrap(function _callee$(_context) {
@@ -327,2 +331,16 @@ while (1) {
                 case 0:
+                  if (!Component.preload) {
+                    _context.next = 5;
+                    break;
+                  }
+
+                  _context.next = 3;
+                  return Component.preload();
+
+                case 3:
+                  preloadComponent = _context.sent;
+                  // for test case, really use .default
+                  Component = preloadComponent.default || preloadComponent;
+
+                case 5:
                   ctx = _objectSpread2({
@@ -333,4 +351,4 @@ isServer: false,
 
-                  if (!Component.getInitialProps) {
-                    _context.next = 8;
+                  if (!((_Component = Component) === null || _Component === void 0 ? void 0 : _Component.getInitialProps)) {
+                    _context.next = 13;
                     break;
@@ -349,10 +367,10 @@ }
 
-                  _context.next = 6;
+                  _context.next = 11;
                   return Component.getInitialProps(ctx);
 
-                case 6:
+                case 11:
                   _initialProps = _context.sent;
                   setInitialProps(_initialProps);
 
-                case 8:
+                case 13:
                 case "end":
@@ -367,3 +385,8 @@ return _context.stop();
     return /*#__PURE__*/React.createElement(Component, _extends({}, props, initialProps));
-  };
+  } // flag for having wrappered
+
+
+  ComponentWithInitialPropsFetch.wrapInitialPropsLoaded = true;
+  ComponentWithInitialPropsFetch.displayName = 'ComponentWithInitialPropsFetch';
+  return ComponentWithInitialPropsFetch;
 } // TODO: custom Switch
@@ -426,6 +449,7 @@ // 1. keep alive
   } else {
-    var _route$component;
+    var _route$component, _route$component2, _route$component3;
 
     // avoid mount and unmount with url hash change
-    if (!process.env.__IS_SERVER && ((_route$component = route.component) === null || _route$component === void 0 ? void 0 : _route$component.getInitialProps)) {
+    if (!process.env.__IS_SERVER && // make sure loaded once
+    !((_route$component = route.component) === null || _route$component === void 0 ? void 0 : _route$component.wrapInitialPropsLoaded) && (((_route$component2 = route.component) === null || _route$component2 === void 0 ? void 0 : _route$component2.getInitialProps) || ((_route$component3 = route.component) === null || _route$component3 === void 0 ? void 0 : _route$component3.preload))) {
       // client Render for enable ssr, but not sure SSR success
@@ -509,5 +533,7 @@ route.component = wrapInitialPropsFetch(route, opts);
     var pathname,
+        matchedRoutes,
         _iterator,
         _step,
         _route$component,
+        matchRoute,
         route,
@@ -522,64 +548,67 @@ _preloadComponent2,
             pathname = _args.length > 1 && _args[1] !== undefined ? _args[1] : window.location.pathname;
-            _iterator = _createForOfIteratorHelper(readyRoutes);
-            _context.prev = 2;
+            // using matched routes not load all routes
+            matchedRoutes = matchRoutes(readyRoutes, pathname);
+            _iterator = _createForOfIteratorHelper(matchedRoutes);
+            _context.prev = 3;
 
             _iterator.s();
 
-          case 4:
+          case 5:
             if ((_step = _iterator.n()).done) {
-              _context.next = 17;
+              _context.next = 19;
               break;
             }
 
-            route = _step.value;
+            matchRoute = _step.value;
+            route = matchRoute.route; // load all preload function, because of only a chance to load
 
             if (!((_route$component = route.component) === null || _route$component === void 0 ? void 0 : _route$component.preload)) {
-              _context.next = 11;
+              _context.next = 13;
               break;
             }
 
-            _context.next = 9;
+            _context.next = 11;
             return route.component.preload();
 
-          case 9:
+          case 11:
             _preloadComponent2 = _context.sent;
             route.component = _preloadComponent2.default || _preloadComponent2;
 
-          case 11:
+          case 13:
             if (!route.routes) {
-              _context.next = 15;
+              _context.next = 17;
               break;
             }
 
-            _context.next = 14;
+            _context.next = 16;
             return preloadComponent(route.routes, pathname);
 
-          case 14:
+          case 16:
             route.routes = _context.sent;
 
-          case 15:
-            _context.next = 4;
-            break;
-
           case 17:
-            _context.next = 22;
+            _context.next = 5;
             break;
 
           case 19:
-            _context.prev = 19;
-            _context.t0 = _context["catch"](2);
+            _context.next = 24;
+            break;
 
+          case 21:
+            _context.prev = 21;
+            _context.t0 = _context["catch"](3);
+
             _iterator.e(_context.t0);
 
-          case 22:
-            _context.prev = 22;
+          case 24:
+            _context.prev = 24;
 
             _iterator.f();
 
-            return _context.finish(22);
+            return _context.finish(24);
 
-          case 25:
+          case 27:
             return _context.abrupt("return", readyRoutes);
 
-          case 26:
+          case 28:
           case "end":
@@ -589,3 +618,3 @@ return _context.stop();
       }
-    }, _callee, null, [[2, 19, 22, 25]]);
+    }, _callee, null, [[3, 21, 24, 27]]);
   }));
@@ -619,2 +648,3 @@ return _preloadComponent.apply(this, arguments);
         // dynamicImport should preload current route component
+        // first loades);
         preloadComponent(opts.routes).then(function () {
@@ -621,0 +651,0 @@ hydrate(rootContainer, rootElement);

dist/index.js

@@ -310,3 +310,4 @@ 'use strict';
   var Component = route.component;
-  return function ComponentWithInitialPropsFetch(props) {
+
+  function ComponentWithInitialPropsFetch(props) {
     var _useState = React.useState(function () {
@@ -324,7 +325,10 @@ return window.g_initialProps;
        * 3. 如果任何时候都走 2 次，配置 forceInitial: true，这个场景用于静态站点的首屏加载希望走最新数据
+       * 4. 开启动态加载后，会在执行 getInitialProps 前预加载下
        */
       if (!window.g_initialProps) {
         _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-          var ctx, _opts$plugin$applyPlu, modifyGetInitialPropsCtx, _initialProps;
+          var _Component;
 
+          var preloadComponent, ctx, _opts$plugin$applyPlu, modifyGetInitialPropsCtx, _initialProps;
+
           return regeneratorRuntime.wrap(function _callee$(_context) {
@@ -334,2 +338,16 @@ while (1) {
                 case 0:
+                  if (!Component.preload) {
+                    _context.next = 5;
+                    break;
+                  }
+
+                  _context.next = 3;
+                  return Component.preload();
+
+                case 3:
+                  preloadComponent = _context.sent;
+                  // for test case, really use .default
+                  Component = preloadComponent.default || preloadComponent;
+
+                case 5:
                   ctx = _objectSpread2({
@@ -340,4 +358,4 @@ isServer: false,
 
-                  if (!Component.getInitialProps) {
-                    _context.next = 8;
+                  if (!((_Component = Component) === null || _Component === void 0 ? void 0 : _Component.getInitialProps)) {
+                    _context.next = 13;
                     break;
@@ -356,10 +374,10 @@ }
 
-                  _context.next = 6;
+                  _context.next = 11;
                   return Component.getInitialProps(ctx);
 
-                case 6:
+                case 11:
                   _initialProps = _context.sent;
                   setInitialProps(_initialProps);
 
-                case 8:
+                case 13:
                 case "end":
@@ -374,3 +392,8 @@ return _context.stop();
     return /*#__PURE__*/React__default.createElement(Component, _extends({}, props, initialProps));
-  };
+  } // flag for having wrappered
+
+
+  ComponentWithInitialPropsFetch.wrapInitialPropsLoaded = true;
+  ComponentWithInitialPropsFetch.displayName = 'ComponentWithInitialPropsFetch';
+  return ComponentWithInitialPropsFetch;
 } // TODO: custom Switch
@@ -433,6 +456,7 @@ // 1. keep alive
   } else {
-    var _route$component;
+    var _route$component, _route$component2, _route$component3;
 
     // avoid mount and unmount with url hash change
-    if (!process.env.__IS_SERVER && ((_route$component = route.component) === null || _route$component === void 0 ? void 0 : _route$component.getInitialProps)) {
+    if (!process.env.__IS_SERVER && // make sure loaded once
+    !((_route$component = route.component) === null || _route$component === void 0 ? void 0 : _route$component.wrapInitialPropsLoaded) && (((_route$component2 = route.component) === null || _route$component2 === void 0 ? void 0 : _route$component2.getInitialProps) || ((_route$component3 = route.component) === null || _route$component3 === void 0 ? void 0 : _route$component3.preload))) {
       // client Render for enable ssr, but not sure SSR success
@@ -516,5 +540,7 @@ route.component = wrapInitialPropsFetch(route, opts);
     var pathname,
+        matchedRoutes,
         _iterator,
         _step,
         _route$component,
+        matchRoute,
         route,
@@ -529,64 +555,67 @@ _preloadComponent2,
             pathname = _args.length > 1 && _args[1] !== undefined ? _args[1] : window.location.pathname;
-            _iterator = _createForOfIteratorHelper(readyRoutes);
-            _context.prev = 2;
+            // using matched routes not load all routes
+            matchedRoutes = reactRouterConfig.matchRoutes(readyRoutes, pathname);
+            _iterator = _createForOfIteratorHelper(matchedRoutes);
+            _context.prev = 3;
 
             _iterator.s();
 
-          case 4:
+          case 5:
             if ((_step = _iterator.n()).done) {
-              _context.next = 17;
+              _context.next = 19;
               break;
             }
 
-            route = _step.value;
+            matchRoute = _step.value;
+            route = matchRoute.route; // load all preload function, because of only a chance to load
 
             if (!((_route$component = route.component) === null || _route$component === void 0 ? void 0 : _route$component.preload)) {
-              _context.next = 11;
+              _context.next = 13;
               break;
             }
 
-            _context.next = 9;
+            _context.next = 11;
             return route.component.preload();
 
-          case 9:
+          case 11:
             _preloadComponent2 = _context.sent;
             route.component = _preloadComponent2.default || _preloadComponent2;
 
-          case 11:
+          case 13:
             if (!route.routes) {
-              _context.next = 15;
+              _context.next = 17;
               break;
             }
 
-            _context.next = 14;
+            _context.next = 16;
             return preloadComponent(route.routes, pathname);
 
-          case 14:
+          case 16:
             route.routes = _context.sent;
 
-          case 15:
-            _context.next = 4;
-            break;
-
           case 17:
-            _context.next = 22;
+            _context.next = 5;
             break;
 
           case 19:
-            _context.prev = 19;
-            _context.t0 = _context["catch"](2);
+            _context.next = 24;
+            break;
 
+          case 21:
+            _context.prev = 21;
+            _context.t0 = _context["catch"](3);
+
             _iterator.e(_context.t0);
 
-          case 22:
-            _context.prev = 22;
+          case 24:
+            _context.prev = 24;
 
             _iterator.f();
 
-            return _context.finish(22);
+            return _context.finish(24);
 
-          case 25:
+          case 27:
             return _context.abrupt("return", readyRoutes);
 
-          case 26:
+          case 28:
           case "end":
@@ -596,3 +625,3 @@ return _context.stop();
       }
-    }, _callee, null, [[2, 19, 22, 25]]);
+    }, _callee, null, [[3, 21, 24, 27]]);
   }));
@@ -626,2 +655,3 @@ return _preloadComponent.apply(this, arguments);
         // dynamicImport should preload current route component
+        // first loades);
         preloadComponent(opts.routes).then(function () {
@@ -628,0 +658,0 @@ ReactDOM.hydrate(rootContainer, rootElement);

package.json

 {
   "name": "@umijs/renderer-react",
-  "version": "3.2.0-beta.8",
+  "version": "3.2.0-beta.9",
   "description": "@umijs/renderer-react",
@@ -31,3 +31,3 @@ "main": "dist/index.js",
     "@types/react-router-config": "^5.0.1",
-    "@umijs/runtime": "3.2.0-beta.8",
+    "@umijs/runtime": "3.2.0-beta.9",
     "react": "^16.13.1",
@@ -34,0 +34,0 @@ "react-dom": "^16.13.1",

No alert changes

Improved metrics

Total package byte prevSize

41311

7.81%

Lines of code

1160

4.32%

Dependency changes

• + Added

  @umijs/runtime@3.2.0-beta.9
  (transitive)

• - Removed

  @umijs/runtime@3.2.0-beta.8
  (transitive)

• Updated

  @umijs/runtime@3.2.0-beta.9