@alicloud/alfa-react 1.6.2-alpha.3 → 1.6.2-alpha.5

package/es/createAlfaWidget.js

@@ -13,6 +13,7 @@ import createApplication from './createApplication';
 import beforeResolveHook from './hooks/beforeResolveHook';
 import beforeLoadHook from './hooks/beforeLoadHook';
 import { isOneConsole } from './helpers/oneConsole';
+import Loading from './components/Loading';
 var loader = BaseLoader.create();
 loader.beforeResolve.use(beforeResolveHook);
 loader.beforeLoad.use(beforeLoadHook);
@@ -45,7 +46,10 @@ function createAlfaWidget(option) {
     dependencies = _ref2.dependencies,
     priority = _ref2.priority,
     dynamicConfig = _ref2.dynamicConfig,
-    manifest = _ref2.manifest;
+    manifest = _ref2.manifest,
+    loading = _ref2.loading,
+    lazyLoad = _ref2.lazyLoad,
+    delay = _ref2.delay;
   if (name.match(/@ali\/widget-/)) {
     // TODO load style
     return createCWSWidget(option);
@@ -86,38 +90,54 @@ function createAlfaWidget(option) {
   if (passedInOption.sandbox && !passedInOption.sandbox.sandBoxUrl && !isOneConsole()) {
     passedInOption.sandbox.sandBoxUrl = 'about:blank';
   }
+  var useDelay = function useDelay() {
+    return useMemo(function () {
+      if (typeof delay === 'number') {
+        return new Promise(function (resolve) {
+          setTimeout(function () {
+            resolve();
+          }, delay);
+        });
+      }
+      if (typeof delay === 'function') {
+        var fnReturn = delay();
+        if (typeof fnReturn.then === 'function') return fnReturn;
+        if (typeof fnReturn === 'number') return fnReturn;
+      }
+      return undefined;
+    }, []);
+  };
   if (priority === 'low') {
     return function (props) {
-      return (
-        /*#__PURE__*/
-        // Compatible with old logic
-        // props should not passed in errorBoundary
-        React.createElement(LazyLoad, {
-          height: 1,
-          once: true
-        }, /*#__PURE__*/React.createElement(ErrorBoundary, props, /*#__PURE__*/React.createElement(Application, _extends({}, passedInOption, {
-          // name={name}
-          style: props.style || passedInOption.style,
-          deps: dependencies || {},
-          customProps: _objectSpread({}, props),
-          preLoader: preLoader
-        }))))
-      );
-    };
-  }
-  return function (props) {
-    return (
-      /*#__PURE__*/
+      var delayPromise = useDelay();
+
       // Compatible with old logic
       // props should not passed in errorBoundary
-      React.createElement(ErrorBoundary, props, /*#__PURE__*/React.createElement(Application, _extends({}, passedInOption, {
-        // name={name}
+      return /*#__PURE__*/React.createElement(LazyLoad, _extends({
+        placeholder: /*#__PURE__*/React.createElement(Loading, {
+          loading: loading
+        })
+      }, _objectSpread({}, lazyLoad)), /*#__PURE__*/React.createElement(ErrorBoundary, props, /*#__PURE__*/React.createElement(Application, _extends({}, passedInOption, {
+        delayPromise: delayPromise,
         style: props.style || passedInOption.style,
         deps: dependencies || {},
         customProps: _objectSpread({}, props),
         preLoader: preLoader
-      })))
-    );
+      }))));
+    };
+  }
+  return function (props) {
+    var delayPromise = useDelay();
+
+    // Compatible with old logic
+    // props should not passed in errorBoundary
+    return /*#__PURE__*/React.createElement(ErrorBoundary, props, /*#__PURE__*/React.createElement(Application, _extends({}, passedInOption, {
+      delayPromise: delayPromise,
+      style: props.style || passedInOption.style,
+      deps: dependencies || {},
+      customProps: _objectSpread({}, props),
+      preLoader: preLoader
+    })));
   };
 }
 

package/es/createApplication.js

@@ -13,6 +13,7 @@ import Loading from './components/Loading';
 import { normalizeName, setNativeProperty } from './utils';
 import { countRegister } from './utils/counter';
 import { version as loaderVersion } from './version';
+import { forceCheck } from 'react-lazyload';
 var eventBus = createEventBus();
 var resolvePath = function resolvePath() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -100,7 +101,7 @@ export default function createApplication(loader) {
       basename = props.basename,
       channel = props.channel,
       onSyncHistory = props.onSyncHistory,
-      delay = props.delay,
+      delayPromise = props.delayPromise,
       preLoader = props.preLoader;
     var handleExternalLink = customProps.handleExternalLink;
     var _useState = useState(null),
@@ -273,16 +274,12 @@ export default function createApplication(loader) {
             case 0:
               countRegister(memoOptions.name);
               fakeBody = memoOptions.container || appRef.current || document.body;
-              if (!delay) {
+              if (!delayPromise) {
                 _context.next = 5;
                 break;
               }
               _context.next = 5;
-              return new Promise(function (resolve) {
-                setTimeout(function () {
-                  resolve(undefined);
-                }, delay);
-              });
+              return delayPromise;
             case 5:
               if (!preLoader) {
                 _context.next = 11;
@@ -377,7 +374,13 @@ export default function createApplication(loader) {
                 customProps: customProps
               });
             case 32:
+              // 降低优先级
+              setTimeout(function () {
+                forceCheck();
+              }, 0);
               (logger === null || logger === void 0 ? void 0 : logger.record) && (logger === null || logger === void 0 ? void 0 : logger.record({
+                REQUEST_VERSION: memoOptions.version,
+                RESPONSE_VERSION: realVersion,
                 END_TIME: Date.now()
               }));
               (logger === null || logger === void 0 ? void 0 : logger.send) && (logger === null || logger === void 0 ? void 0 : logger.send());
@@ -388,7 +391,7 @@ export default function createApplication(loader) {
 
               // just run once
               setAppInstance(app);
-            case 36:
+            case 37:
             case "end":
               return _context.stop();
           }

package/es/index.js

@@ -4,5 +4,6 @@ export { default as createAlfaWidget, useAlfaWidget } from './createAlfaWidget';
 export { eventEmitter as widgetEventEmitter } from './widget/index';
 export { default as addGlobalRequestInterceptor } from './addGlobalRequestInterceptor';
 export * from './utils';
+export { forceCheck } from 'react-lazyload';
 // todo
 export { createEventBus, prefetch } from '@alicloud/alfa-core';

package/es/version.js

@@ -1 +1 @@
-export var version = '1.6.2-alpha.3';
+export var version = '1.6.2-alpha.5';

package/lib/createAlfaWidget.js

@@ -20,6 +20,7 @@ var _createApplication = _interopRequireDefault(require("./createApplication"));
 var _beforeResolveHook = _interopRequireDefault(require("./hooks/beforeResolveHook"));
 var _beforeLoadHook = _interopRequireDefault(require("./hooks/beforeLoadHook"));
 var _oneConsole = require("./helpers/oneConsole");
+var _Loading = _interopRequireDefault(require("./components/Loading"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -56,7 +57,10 @@ function createAlfaWidget(option) {
     dependencies = _ref2.dependencies,
     priority = _ref2.priority,
     dynamicConfig = _ref2.dynamicConfig,
-    manifest = _ref2.manifest;
+    manifest = _ref2.manifest,
+    loading = _ref2.loading,
+    lazyLoad = _ref2.lazyLoad,
+    delay = _ref2.delay;
   if (name.match(/@ali\/widget-/)) {
     // TODO load style
     return (0, _widget.createCWSWidget)(option);
@@ -97,38 +101,54 @@ function createAlfaWidget(option) {
   if (passedInOption.sandbox && !passedInOption.sandbox.sandBoxUrl && !(0, _oneConsole.isOneConsole)()) {
     passedInOption.sandbox.sandBoxUrl = 'about:blank';
   }
+  var useDelay = function useDelay() {
+    return (0, _react.useMemo)(function () {
+      if (typeof delay === 'number') {
+        return new Promise(function (resolve) {
+          setTimeout(function () {
+            resolve();
+          }, delay);
+        });
+      }
+      if (typeof delay === 'function') {
+        var fnReturn = delay();
+        if (typeof fnReturn.then === 'function') return fnReturn;
+        if (typeof fnReturn === 'number') return fnReturn;
+      }
+      return undefined;
+    }, []);
+  };
   if (priority === 'low') {
     return function (props) {
-      return (
-        /*#__PURE__*/
-        // Compatible with old logic
-        // props should not passed in errorBoundary
-        _react.default.createElement(_reactLazyload.default, {
-          height: 1,
-          once: true
-        }, /*#__PURE__*/_react.default.createElement(_ErrorBoundary.default, props, /*#__PURE__*/_react.default.createElement(Application, (0, _extends2.default)({}, passedInOption, {
-          // name={name}
-          style: props.style || passedInOption.style,
-          deps: dependencies || {},
-          customProps: _objectSpread({}, props),
-          preLoader: preLoader
-        }))))
-      );
-    };
-  }
-  return function (props) {
-    return (
-      /*#__PURE__*/
+      var delayPromise = useDelay();
+
       // Compatible with old logic
       // props should not passed in errorBoundary
-      _react.default.createElement(_ErrorBoundary.default, props, /*#__PURE__*/_react.default.createElement(Application, (0, _extends2.default)({}, passedInOption, {
-        // name={name}
+      return /*#__PURE__*/_react.default.createElement(_reactLazyload.default, (0, _extends2.default)({
+        placeholder: /*#__PURE__*/_react.default.createElement(_Loading.default, {
+          loading: loading
+        })
+      }, _objectSpread({}, lazyLoad)), /*#__PURE__*/_react.default.createElement(_ErrorBoundary.default, props, /*#__PURE__*/_react.default.createElement(Application, (0, _extends2.default)({}, passedInOption, {
+        delayPromise: delayPromise,
         style: props.style || passedInOption.style,
         deps: dependencies || {},
         customProps: _objectSpread({}, props),
         preLoader: preLoader
-      })))
-    );
+      }))));
+    };
+  }
+  return function (props) {
+    var delayPromise = useDelay();
+
+    // Compatible with old logic
+    // props should not passed in errorBoundary
+    return /*#__PURE__*/_react.default.createElement(_ErrorBoundary.default, props, /*#__PURE__*/_react.default.createElement(Application, (0, _extends2.default)({}, passedInOption, {
+      delayPromise: delayPromise,
+      style: props.style || passedInOption.style,
+      deps: dependencies || {},
+      customProps: _objectSpread({}, props),
+      preLoader: preLoader
+    })));
   };
 }
 

package/lib/createApplication.js

@@ -19,6 +19,7 @@ var _Loading = _interopRequireDefault(require("./components/Loading"));
 var _utils = require("./utils");
 var _counter = require("./utils/counter");
 var _version = require("./version");
+var _reactLazyload = require("react-lazyload");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -110,7 +111,7 @@ function createApplication(loader) {
       basename = props.basename,
       channel = props.channel,
       onSyncHistory = props.onSyncHistory,
-      delay = props.delay,
+      delayPromise = props.delayPromise,
       preLoader = props.preLoader;
     var handleExternalLink = customProps.handleExternalLink;
     var _useState = (0, _react.useState)(null),
@@ -283,16 +284,12 @@ function createApplication(loader) {
             case 0:
               (0, _counter.countRegister)(memoOptions.name);
               fakeBody = memoOptions.container || appRef.current || document.body;
-              if (!delay) {
+              if (!delayPromise) {
                 _context.next = 5;
                 break;
               }
               _context.next = 5;
-              return new Promise(function (resolve) {
-                setTimeout(function () {
-                  resolve(undefined);
-                }, delay);
-              });
+              return delayPromise;
             case 5:
               if (!preLoader) {
                 _context.next = 11;
@@ -387,7 +384,13 @@ function createApplication(loader) {
                 customProps: customProps
               });
             case 32:
+              // 降低优先级
+              setTimeout(function () {
+                (0, _reactLazyload.forceCheck)();
+              }, 0);
               (logger === null || logger === void 0 ? void 0 : logger.record) && (logger === null || logger === void 0 ? void 0 : logger.record({
+                REQUEST_VERSION: memoOptions.version,
+                RESPONSE_VERSION: realVersion,
                 END_TIME: Date.now()
               }));
               (logger === null || logger === void 0 ? void 0 : logger.send) && (logger === null || logger === void 0 ? void 0 : logger.send());
@@ -398,7 +401,7 @@ function createApplication(loader) {
 
               // just run once
               setAppInstance(app);
-            case 36:
+            case 37:
             case "end":
               return _context.stop();
           }

package/lib/index.js

@@ -13,6 +13,7 @@ var _exportNames = {
   useAlfaWidget: true,
   widgetEventEmitter: true,
   addGlobalRequestInterceptor: true,
+  forceCheck: true,
   createEventBus: true,
   prefetch: true
 };
@@ -46,6 +47,12 @@ Object.defineProperty(exports, "createEventBus", {
     return _alfaCore.createEventBus;
   }
 });
+Object.defineProperty(exports, "forceCheck", {
+  enumerable: true,
+  get: function get() {
+    return _reactLazyload.forceCheck;
+  }
+});
 Object.defineProperty(exports, "prefetch", {
   enumerable: true,
   get: function get() {
@@ -87,6 +94,7 @@ Object.keys(_utils).forEach(function (key) {
     }
   });
 });
+var _reactLazyload = require("react-lazyload");
 var _alfaCore = require("@alicloud/alfa-core");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/version.js

@@ -4,5 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = void 0;
-var version = '1.6.2-alpha.3';
+var version = '1.6.2-alpha.5';
 exports.version = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/alfa-react",
-  "version": "1.6.2-alpha.3",
+  "version": "1.6.2-alpha.5",
   "description": "Alfa Framework (React Version)",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,7 +48,6 @@
     "react-dom": ">=16.0.0"
   },
   "scripts": {
-    "prepublish": "npm run version && npm run babel && npm run babel:esm && npm run types",
     "pub": "pnpm publish",
     "build": "breezr build --engine webpack",
     "babel": "breezr build --engine babel",

package/types/createApplication.d.ts

@@ -54,6 +54,7 @@ export interface IApplicationProps<C = any> extends AlfaFactoryOption {
      */
     history?: any;
     preLoader?: BaseLoader['register'];
+    delayPromise?: Promise<any>;
 }
 /**
  * container for microApp mount

package/types/index.d.ts

@@ -4,4 +4,5 @@ export { default as createAlfaWidget, useAlfaWidget } from './createAlfaWidget';
 export { eventEmitter as widgetEventEmitter } from './widget/index';
 export { default as addGlobalRequestInterceptor } from './addGlobalRequestInterceptor';
 export * from './utils';
+export { forceCheck } from 'react-lazyload';
 export { createEventBus, prefetch } from '@alicloud/alfa-core';

package/types/types/index.d.ts

@@ -47,14 +47,33 @@ export interface AlfaFactoryOption extends IAppConfig {
     /**
      * 延迟加载
      */
-    delay?: number;
+    delay?: number | (() => Promise<any>);
     /**
      * 优先级
-     * - high: 尽可能早的加载
-     * - medium: 当 mount 发生后并且 high priority 队列清空后开始加载
-     * - low: 当出现在视窗内并且更高优先级的队列全部清空后，最晚不会迟于 10s 开始加载
+     * - high: 在 mount 前尽可能早的加载
+     * - medium: mount 后开始加载
+     * - low: 懒加载，出现在视窗内开始加载
      */
     priority?: 'high' | 'medium' | 'low';
+    /**
+     * 懒加载配置，配合 priority low 使用
+     */
+    lazyLoad?: {
+        /**
+         * 相对于视窗偏移位置就开始加载
+         */
+        offset?: number | number[] | undefined;
+        throttle?: number | boolean | undefined;
+        debounce?: number | boolean | undefined;
+        /**
+         * 占位
+         */
+        placeholder?: React.ReactNode | undefined;
+        /**
+         * 监听 scroll 事件的节点，当父节点设置 overflow 时会导致 window 无法监听到 scroll 事件
+         */
+        scrollContainer?: string | Element | undefined;
+    };
 }
 type ThenArg<T> = T extends PromiseLike<infer U> ? U : T;
 export type MicroApplication = ThenArg<ReturnType<typeof createMicroApp>>;

package/types/version.d.ts

@@ -1 +1 @@
-export declare const version = "1.6.2-alpha.3";
+export declare const version = "1.6.2-alpha.5";