@alicloud/alfa-react 1.6.2-alpha.0 → 1.6.2-alpha.2

package/es/createAlfaWidget.js

@@ -5,6 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useMemo } from 'react';
+import LazyLoad from 'react-lazyload';
 import { BaseLoader } from '@alicloud/alfa-core';
 import ErrorBoundary from './components/ErrorBoundary';
 import { createCWSWidget } from './widget';
@@ -41,7 +42,10 @@ var Application = createApplication(loader);
 function createAlfaWidget(option) {
   var _ref2 = option || {},
     name = _ref2.name,
-    dependencies = _ref2.dependencies;
+    dependencies = _ref2.dependencies,
+    priority = _ref2.priority,
+    dynamicConfig = _ref2.dynamicConfig,
+    manifest = _ref2.manifest;
   if (name.match(/@ali\/widget-/)) {
     // TODO load style
     return createCWSWidget(option);
@@ -51,13 +55,56 @@ function createAlfaWidget(option) {
   if (!name) return function () {
     return null;
   };
-  var passedInOption = option;
+  var preLoader;
+  if (priority === 'high') {
+    var p = loader.register(_objectSpread(_objectSpread({}, option), {}, {
+      // 必须设置 container，否则沙箱会创建插入一个新的 body
+      container: document.body,
+      dynamicConfig: typeof dynamicConfig === 'boolean' ? dynamicConfig : !manifest
+    }));
+    preLoader = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              return _context2.abrupt("return", p);
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function preLoader() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+  }
+  var passedInOption = _objectSpread({}, option);
 
   // 非 oneConsole 环境下设置 iframe 沙箱地址为 about:blank
   // 避免沙箱创建失败
   if (passedInOption.sandbox && !passedInOption.sandbox.sandBoxUrl && !isOneConsole()) {
     passedInOption.sandbox.sandBoxUrl = 'about:blank';
   }
+  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__*/
@@ -67,7 +114,8 @@ function createAlfaWidget(option) {
         // name={name}
         style: props.style || passedInOption.style,
         deps: dependencies || {},
-        customProps: _objectSpread({}, props)
+        customProps: _objectSpread({}, props),
+        preLoader: preLoader
       })))
     );
   };

package/es/createApplication.js

@@ -100,7 +100,8 @@ export default function createApplication(loader) {
       basename = props.basename,
       channel = props.channel,
       onSyncHistory = props.onSyncHistory,
-      delay = props.delay;
+      delay = props.delay,
+      preLoader = props.preLoader;
     var handleExternalLink = customProps.handleExternalLink;
     var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -266,7 +267,7 @@ export default function createApplication(loader) {
       if ($syncHistory.current) window.addEventListener('popstate', updateAppHistory);
       _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
         var _app$context$updateBo, _app$context, _app$context$baseFram;
-        var fakeBody, _yield$loader$registe, app, logger, realVersion, _ref2, path, frameWindow;
+        var fakeBody, _ref2, app, logger, realVersion, _ref3, path, frameWindow;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -283,46 +284,61 @@ export default function createApplication(loader) {
                 }, delay);
               });
             case 5:
-              _context.next = 7;
+              if (!preLoader) {
+                _context.next = 11;
+                break;
+              }
+              _context.next = 8;
+              return preLoader(_objectSpread(_objectSpread({}, memoOptions), {}, {
+                container: fakeBody
+              }));
+            case 8:
+              _context.t0 = _context.sent;
+              _context.next = 14;
+              break;
+            case 11:
+              _context.next = 13;
               return loader.register(_objectSpread(_objectSpread({}, memoOptions), {}, {
                 container: fakeBody
               }));
-            case 7:
-              _yield$loader$registe = _context.sent;
-              app = _yield$loader$registe.app;
-              logger = _yield$loader$registe.logger;
-              realVersion = _yield$loader$registe.version;
+            case 13:
+              _context.t0 = _context.sent;
+            case 14:
+              _ref2 = _context.t0;
+              app = _ref2.app;
+              logger = _ref2.logger;
+              realVersion = _ref2.version;
               setReleaseVersion(realVersion || 'unknown');
               App = app;
 
               // container has been unmounted
               if (!isUnmounted) {
-                _context.next = 15;
+                _context.next = 22;
                 break;
               }
               return _context.abrupt("return");
-            case 15:
+            case 22:
               if (app) {
-                _context.next = 17;
+                _context.next = 24;
                 break;
               }
               return _context.abrupt("return", (logger === null || logger === void 0 ? void 0 : logger.error) && logger.error({
                 E_CODE: 'RuntimeError',
                 E_MSG: 'load app failed.'
               }));
-            case 17:
+            case 24:
               if (appRef.current) {
-                _context.next = 19;
+                _context.next = 26;
                 break;
               }
               return _context.abrupt("return", (logger === null || logger === void 0 ? void 0 : logger.error) && logger.error({
                 E_CODE: 'RuntimeError',
                 E_MSG: 'cannot find container.'
               }));
-            case 19:
+            case 26:
               // update body in sandbox context
               (_app$context$updateBo = (_app$context = app.context).updateBody) === null || _app$context$updateBo === void 0 ? void 0 : _app$context$updateBo.call(_app$context, memoOptions.sandbox.disableFakeBody ? document.body : fakeBody);
-              _ref2 = memoOptions.props, path = _ref2.path;
+              _ref3 = memoOptions.props, path = _ref3.path;
               frameWindow = (_app$context$baseFram = app.context.baseFrame) === null || _app$context$baseFram === void 0 ? void 0 : _app$context$baseFram.contentWindow;
               if (frameWindow) {
                 originalPushState = frameWindow === null || frameWindow === void 0 ? void 0 : frameWindow.history.pushState;
@@ -356,11 +372,11 @@ export default function createApplication(loader) {
                   window.history.go(n);
                 });
               }
-              _context.next = 25;
+              _context.next = 32;
               return app.mount(fakeBody, {
                 customProps: customProps
               });
-            case 25:
+            case 32:
               (logger === null || logger === void 0 ? void 0 : logger.record) && (logger === null || logger === void 0 ? void 0 : logger.record({
                 END_TIME: Date.now()
               }));
@@ -372,7 +388,7 @@ export default function createApplication(loader) {
 
               // just run once
               setAppInstance(app);
-            case 29:
+            case 36:
             case "end":
               return _context.stop();
           }

package/es/schedule.js

@@ -0,0 +1,41 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+export var Schedule = /*#__PURE__*/function () {
+  function Schedule() {
+    _classCallCheck(this, Schedule);
+    this.pending = [];
+    this.running = [];
+    this.delaying = [];
+  }
+  _createClass(Schedule, [{
+    key: "push",
+    value: function push(priority, task) {
+      var _this = this;
+      return new Promise(function (resolve) {
+        if (priority === 'high') {
+          var p = task().then(function (result) {
+            resolve(result);
+          }).finally(function () {});
+          _this.running.push(p);
+        }
+        if (priority === 'medium') {
+          _this.pending.push(task);
+        }
+        if (priority === 'low') {
+          _this.delaying.push(task);
+        }
+      });
+    }
+  }, {
+    key: "check",
+    value: function check() {
+      if (this.running.length === 0) {
+        while (this.pending.length) {
+          var task = this.pending.shift();
+          if (task) this.running.push(task());
+        }
+      }
+    }
+  }]);
+  return Schedule;
+}();

package/es/version.js

@@ -1 +1 @@
-export var version = '1.6.2-alpha.0';
+export var version = '1.6.2-alpha.2';

package/lib/createAlfaWidget.js

@@ -12,6 +12,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactLazyload = _interopRequireDefault(require("react-lazyload"));
 var _alfaCore = require("@alicloud/alfa-core");
 var _ErrorBoundary = _interopRequireDefault(require("./components/ErrorBoundary"));
 var _widget = require("./widget");
@@ -52,7 +53,10 @@ var Application = (0, _createApplication.default)(loader);
 function createAlfaWidget(option) {
   var _ref2 = option || {},
     name = _ref2.name,
-    dependencies = _ref2.dependencies;
+    dependencies = _ref2.dependencies,
+    priority = _ref2.priority,
+    dynamicConfig = _ref2.dynamicConfig,
+    manifest = _ref2.manifest;
   if (name.match(/@ali\/widget-/)) {
     // TODO load style
     return (0, _widget.createCWSWidget)(option);
@@ -62,13 +66,56 @@ function createAlfaWidget(option) {
   if (!name) return function () {
     return null;
   };
-  var passedInOption = option;
+  var preLoader;
+  if (priority === 'high') {
+    var p = loader.register(_objectSpread(_objectSpread({}, option), {}, {
+      // 必须设置 container，否则沙箱会创建插入一个新的 body
+      container: document.body,
+      dynamicConfig: typeof dynamicConfig === 'boolean' ? dynamicConfig : !manifest
+    }));
+    preLoader = /*#__PURE__*/function () {
+      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              return _context2.abrupt("return", p);
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function preLoader() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+  }
+  var passedInOption = _objectSpread({}, option);
 
   // 非 oneConsole 环境下设置 iframe 沙箱地址为 about:blank
   // 避免沙箱创建失败
   if (passedInOption.sandbox && !passedInOption.sandbox.sandBoxUrl && !(0, _oneConsole.isOneConsole)()) {
     passedInOption.sandbox.sandBoxUrl = 'about:blank';
   }
+  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__*/
@@ -78,7 +125,8 @@ function createAlfaWidget(option) {
         // name={name}
         style: props.style || passedInOption.style,
         deps: dependencies || {},
-        customProps: _objectSpread({}, props)
+        customProps: _objectSpread({}, props),
+        preLoader: preLoader
       })))
     );
   };

package/lib/createApplication.js

@@ -110,7 +110,8 @@ function createApplication(loader) {
       basename = props.basename,
       channel = props.channel,
       onSyncHistory = props.onSyncHistory,
-      delay = props.delay;
+      delay = props.delay,
+      preLoader = props.preLoader;
     var handleExternalLink = customProps.handleExternalLink;
     var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -276,7 +277,7 @@ function createApplication(loader) {
       if ($syncHistory.current) window.addEventListener('popstate', updateAppHistory);
       (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
         var _app$context$updateBo, _app$context, _app$context$baseFram;
-        var fakeBody, _yield$loader$registe, app, logger, realVersion, _ref2, path, frameWindow;
+        var fakeBody, _ref2, app, logger, realVersion, _ref3, path, frameWindow;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -293,46 +294,61 @@ function createApplication(loader) {
                 }, delay);
               });
             case 5:
-              _context.next = 7;
+              if (!preLoader) {
+                _context.next = 11;
+                break;
+              }
+              _context.next = 8;
+              return preLoader(_objectSpread(_objectSpread({}, memoOptions), {}, {
+                container: fakeBody
+              }));
+            case 8:
+              _context.t0 = _context.sent;
+              _context.next = 14;
+              break;
+            case 11:
+              _context.next = 13;
               return loader.register(_objectSpread(_objectSpread({}, memoOptions), {}, {
                 container: fakeBody
               }));
-            case 7:
-              _yield$loader$registe = _context.sent;
-              app = _yield$loader$registe.app;
-              logger = _yield$loader$registe.logger;
-              realVersion = _yield$loader$registe.version;
+            case 13:
+              _context.t0 = _context.sent;
+            case 14:
+              _ref2 = _context.t0;
+              app = _ref2.app;
+              logger = _ref2.logger;
+              realVersion = _ref2.version;
               setReleaseVersion(realVersion || 'unknown');
               App = app;
 
               // container has been unmounted
               if (!isUnmounted) {
-                _context.next = 15;
+                _context.next = 22;
                 break;
               }
               return _context.abrupt("return");
-            case 15:
+            case 22:
               if (app) {
-                _context.next = 17;
+                _context.next = 24;
                 break;
               }
               return _context.abrupt("return", (logger === null || logger === void 0 ? void 0 : logger.error) && logger.error({
                 E_CODE: 'RuntimeError',
                 E_MSG: 'load app failed.'
               }));
-            case 17:
+            case 24:
               if (appRef.current) {
-                _context.next = 19;
+                _context.next = 26;
                 break;
               }
               return _context.abrupt("return", (logger === null || logger === void 0 ? void 0 : logger.error) && logger.error({
                 E_CODE: 'RuntimeError',
                 E_MSG: 'cannot find container.'
               }));
-            case 19:
+            case 26:
               // update body in sandbox context
               (_app$context$updateBo = (_app$context = app.context).updateBody) === null || _app$context$updateBo === void 0 ? void 0 : _app$context$updateBo.call(_app$context, memoOptions.sandbox.disableFakeBody ? document.body : fakeBody);
-              _ref2 = memoOptions.props, path = _ref2.path;
+              _ref3 = memoOptions.props, path = _ref3.path;
               frameWindow = (_app$context$baseFram = app.context.baseFrame) === null || _app$context$baseFram === void 0 ? void 0 : _app$context$baseFram.contentWindow;
               if (frameWindow) {
                 originalPushState = frameWindow === null || frameWindow === void 0 ? void 0 : frameWindow.history.pushState;
@@ -366,11 +382,11 @@ function createApplication(loader) {
                   window.history.go(n);
                 });
               }
-              _context.next = 25;
+              _context.next = 32;
               return app.mount(fakeBody, {
                 customProps: customProps
               });
-            case 25:
+            case 32:
               (logger === null || logger === void 0 ? void 0 : logger.record) && (logger === null || logger === void 0 ? void 0 : logger.record({
                 END_TIME: Date.now()
               }));
@@ -382,7 +398,7 @@ function createApplication(loader) {
 
               // just run once
               setAppInstance(app);
-            case 29:
+            case 36:
             case "end":
               return _context.stop();
           }

package/lib/schedule.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Schedule = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var Schedule = /*#__PURE__*/function () {
+  function Schedule() {
+    (0, _classCallCheck2.default)(this, Schedule);
+    this.pending = [];
+    this.running = [];
+    this.delaying = [];
+  }
+  (0, _createClass2.default)(Schedule, [{
+    key: "push",
+    value: function push(priority, task) {
+      var _this = this;
+      return new Promise(function (resolve) {
+        if (priority === 'high') {
+          var p = task().then(function (result) {
+            resolve(result);
+          }).finally(function () {});
+          _this.running.push(p);
+        }
+        if (priority === 'medium') {
+          _this.pending.push(task);
+        }
+        if (priority === 'low') {
+          _this.delaying.push(task);
+        }
+      });
+    }
+  }, {
+    key: "check",
+    value: function check() {
+      if (this.running.length === 0) {
+        while (this.pending.length) {
+          var task = this.pending.shift();
+          if (task) this.running.push(task());
+        }
+      }
+    }
+  }]);
+  return Schedule;
+}();
+exports.Schedule = Schedule;

package/lib/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/alfa-react",
-  "version": "1.6.2-alpha.0",
+  "version": "1.6.2-alpha.2",
   "description": "Alfa Framework (React Version)",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,6 +22,7 @@
     "@types/prop-types": "^15.7.5",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
+    "@types/react-lazyload": "^3.2.3",
     "@types/single-spa-react": "^2.8.3",
     "jest": "^23.6.0",
     "react": "^16.9.0",
@@ -38,13 +39,14 @@
     "classnames": "^2.2.6",
     "crypto-js": "^4.1.1",
     "prop-types": "^15.8.1",
-    "@alicloud/console-os-loader": "^1.4.42",
-    "@alicloud/alfa-core": "^1.4.37"
+    "react-lazyload": "^3.2.1",
+    "@alicloud/alfa-core": "^1.4.37",
+    "@alicloud/console-os-loader": "^1.4.42"
   },
   "peerDependencies": {
-    "react": ">=16.0.0"
+    "react": ">=16.0.0",
+    "react-dom": ">=16.0.0"
   },
-  "gitHead": "ff9294b1d5e08b14691c8aa2bef098da2857f3df",
   "scripts": {
     "prepublish": "npm run version && npm run babel && npm run babel:esm && npm run types",
     "pub": "pnpm publish",
@@ -54,7 +56,7 @@
     "types": "tsc --emitDeclarationOnly -d --declarationDir ./types",
     "storybook": "breezr start-storybook",
     "clean": "rm -rf lib es dist types yarn.lock",
-    "start": "breezr start-storybook",
+    "start": "NODE_OPTIONS=--openssl-legacy-provider breezr start-storybook",
     "precommit": "npm run version",
     "version": "node -p \"'export const version = \\'' + require('./package.json').version + '\\';'\" > src/version.ts && git add src/version.ts"
   }

package/types/components/Loading/Title.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface SkeletonTitleProps {
     prefixCls?: string;
     className?: string;

package/types/createAlfaApp.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AlfaFactoryOption } from './types';
 import type { IApplicationProps, IApplicationCustomProps } from './createApplication';
 interface IProps extends IApplicationProps, IApplicationCustomProps {

package/types/createAlfaWidget.d.ts

@@ -1,13 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 import { AlfaFactoryOption } from './types';
-import type { IApplicationCustomProps } from './createApplication';
-interface IProps extends Omit<IApplicationCustomProps, 'consoleBase' | 'path' | 'appConfig'> {
-}
-declare function createAlfaWidget<P = any>(option: AlfaFactoryOption): (() => null) | ((props: P & IProps) => JSX.Element);
+declare function createAlfaWidget<P = any>(option: AlfaFactoryOption): React.FC<any>;
 /**
  * create memorized app in react function component, just create App after first mounted
  * @param option
  * @returns
  */
-export declare function useAlfaWidget<P = any>(option: AlfaFactoryOption, deps?: any[]): (() => null) | ((props: P & IProps) => JSX.Element);
+export declare function useAlfaWidget<P = any>(option: AlfaFactoryOption, deps?: any[]): React.FC<any>;
 export default createAlfaWidget;

package/types/createApplication.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseLoader } from '@alicloud/alfa-core';
 import { AlfaFactoryOption } from './types';
 export interface IApplicationCustomProps {
@@ -54,6 +53,7 @@ export interface IApplicationProps<C = any> extends AlfaFactoryOption {
      * 注入给子应用的 history 实例，不推荐使用
      */
     history?: any;
+    preLoader?: BaseLoader['register'];
 }
 /**
  * container for microApp mount

package/types/schedule.d.ts

@@ -0,0 +1,8 @@
+export declare class Schedule {
+    private delaying;
+    private pending;
+    private running;
+    constructor();
+    push(priority: 'high' | 'medium' | 'low', task: () => Promise<any>): Promise<unknown>;
+    check(): void;
+}

package/types/types/index.d.ts

@@ -48,6 +48,13 @@ export interface AlfaFactoryOption extends IAppConfig {
      * 延迟加载
      */
     delay?: number;
+    /**
+     * 优先级
+     * - high: 尽可能早的加载
+     * - medium: 当 mount 发生后并且 high priority 队列清空后开始加载
+     * - low: 当出现在视窗内并且更高优先级的队列全部清空后，最晚不会迟于 10s 开始加载
+     */
+    priority?: 'high' | 'medium' | 'low';
 }
 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.0";
+export declare const version = "1.6.2-alpha.2";

package/types/widget.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { WidgetFactoryOption } from './types';
 export declare function createCWSWidget<T>(option: WidgetFactoryOption): (props: T) => JSX.Element;