@alicloud/alfa-react 1.4.40-alpha.0 → 1.5.0-alpha.0

package/lib/createApplication.js

@@ -1,166 +1,134 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createApplication;
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
+var _alfaCore = require("@alicloud/alfa-core");
 var _Loading = _interopRequireDefault(require("./components/Loading"));
-
 var _utils = require("./utils");
-
 var _counter = require("./utils/counter");
-
 var _version = require("./version");
-
 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; }
-
 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) { (0, _defineProperty2.default)(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; }
-
+var eventBus = (0, _alfaCore.createEventBus)();
 var resolvePath = function resolvePath() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
   }
-
   return "/".concat(args.join('/')).replace(/\/+/g, '/');
 };
+
 /**
  * 去掉 location.origin 的路径
  */
-
-
 var peelPath = function peelPath(location) {
   return location.pathname + location.search + location.hash;
 };
-
 var addBasename = function addBasename(path, basename) {
   if (!basename) return path;
   return resolvePath(basename, path);
 };
-
 var addLeftSlash = function addLeftSlash(path) {
   return path.charAt(0) === '/' ? path : "/".concat(path);
 };
+
 /**
  * 从 path 移除 basename 部分
  * @param path
  * @param basename
  * @returns string
  */
-
-
 var stripBasename = function stripBasename(path, basename) {
   if (!basename) return path;
-
   var _path = resolvePath(path);
-
   var _basename = resolvePath(basename);
-
-  if (_path === _basename) return '/'; // escape all possible regex special characters
-
+  if (_path === _basename) return '/';
+  // escape all possible regex special characters
   return _path.replace(new RegExp("^".concat(_basename.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1')), 'ig'), '');
 };
+
 /**
  * container for microApp mount
  * @param loader alfa-core loader
  * @returns
  */
-
-
 function createApplication(loader) {
   return function Application(props) {
     var name = props.name,
-        version = props.version,
-        manifest = props.manifest,
-        loading = props.loading,
-        customProps = props.customProps,
-        className = props.className,
-        style = props.style,
-        container = props.container,
-        entry = props.entry,
-        url = props.url,
-        customLogger = props.logger,
-        deps = props.deps,
-        env = props.env,
-        beforeMount = props.beforeMount,
-        afterMount = props.afterMount,
-        beforeUnmount = props.beforeUnmount,
-        afterUnmount = props.afterUnmount,
-        beforeUpdate = props.beforeUpdate,
-        customSandbox = props.sandbox,
-        locale = props.locale,
-        dynamicConfig = props.dynamicConfig,
-        noCache = props.noCache,
-        syncHistory = props.syncHistory,
-        basename = props.basename;
-
+      version = props.version,
+      manifest = props.manifest,
+      loading = props.loading,
+      customProps = props.customProps,
+      className = props.className,
+      style = props.style,
+      container = props.container,
+      entry = props.entry,
+      url = props.url,
+      customLogger = props.logger,
+      deps = props.deps,
+      env = props.env,
+      beforeMount = props.beforeMount,
+      afterMount = props.afterMount,
+      beforeUnmount = props.beforeUnmount,
+      afterUnmount = props.afterUnmount,
+      beforeUpdate = props.beforeUpdate,
+      customSandbox = props.sandbox,
+      locale = props.locale,
+      dynamicConfig = props.dynamicConfig,
+      noCache = props.noCache,
+      syncHistory = props.syncHistory,
+      basename = props.basename;
+    var handleExternalLink = customProps.handleExternalLink;
     var _useState = (0, _react.useState)(null),
-        _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-        appInstance = _useState2[0],
-        setAppInstance = _useState2[1];
-
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      appInstance = _useState2[0],
+      setAppInstance = _useState2[1];
     var _useState3 = (0, _react.useState)(null),
-        _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-        setError = _useState4[1];
-
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      setError = _useState4[1];
     var appRef = (0, _react.useRef)(undefined);
     var $syncHistory = (0, _react.useRef)(syncHistory);
     var $basename = (0, _react.useRef)(basename);
     var tagName = (0, _utils.normalizeName)(props.name);
-
     var _useState5 = (0, _react.useState)(''),
-        _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-        releaseVersion = _useState6[0],
-        setReleaseVersion = _useState6[1];
-
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      releaseVersion = _useState6[0],
+      setReleaseVersion = _useState6[1];
     $syncHistory.current = syncHistory;
     $basename.current = basename;
-    if (customProps.__innerStamp) console.warn('Please do not use __innerStamp which used in internal.'); // 更新标记，保证每次更新都会更新
-
+    if (customProps.__innerStamp) console.warn('Please do not use __innerStamp which used in internal.');
+    // 更新标记，保证每次更新都会更新
     customProps.__innerStamp = (+new Date()).toString(36);
-    if (customProps.path) customProps.path = addLeftSlash(customProps.path); // 受控模式锁定一些参数
+    if (customProps.path) customProps.path = addLeftSlash(customProps.path);
 
+    // 受控模式锁定一些参数
     if ($syncHistory.current) {
       // 禁止子应用和 consoleBase 通信
-      customProps.consoleBase = null; // 覆写 path 参数，用于通知子应用更新路由
-
-      customProps.path = stripBasename(peelPath(window.location), $basename.current); // 禁止注入 history
-
+      customProps.consoleBase = null;
+      // 覆写 path 参数，用于通知子应用更新路由
+      customProps.path = addLeftSlash(stripBasename(peelPath(window.location), $basename.current));
+      // 禁止注入 history
       customProps.__injectHistory = null;
     }
-
     var sandbox = (0, _react.useMemo)(function () {
       var _UA_Opt, _RISK_INFO, _um;
-
       var aliyunExternalsVars = [];
-
       if ((_UA_Opt = window.UA_Opt) !== null && _UA_Opt !== void 0 && _UA_Opt.LogVal) {
         var _UA_Opt2;
-
         aliyunExternalsVars.push('UA_Opt');
         aliyunExternalsVars.push((_UA_Opt2 = window.UA_Opt) === null || _UA_Opt2 === void 0 ? void 0 : _UA_Opt2.LogVal);
       }
-
       if ((_RISK_INFO = window.RISK_INFO) !== null && _RISK_INFO !== void 0 && _RISK_INFO.UMID) aliyunExternalsVars.push('RISK_INFO');
       if ((_um = window.um) !== null && _um !== void 0 && _um.getToken) aliyunExternalsVars.push('um');
       return _objectSpread(_objectSpread({}, customSandbox), {}, {
@@ -168,14 +136,16 @@ function createApplication(loader) {
         //   ...(customSandbox?.allowResources || []),
         //   /^https?:\/\/at\.alicdn\.com\//,
         // ],
-        externalsVars: [].concat((0, _toConsumableArray2.default)((customSandbox === null || customSandbox === void 0 ? void 0 : customSandbox.externalsVars) || []), [// global vars used in ConsoleBase.forApp
+        externalsVars: [].concat((0, _toConsumableArray2.default)((customSandbox === null || customSandbox === void 0 ? void 0 : customSandbox.externalsVars) || []), [
+        // global vars used in ConsoleBase.forApp
         '_console_base_ready_'], aliyunExternalsVars),
         // 配置沙箱初始化 path
         initialPath: (customSandbox === null || customSandbox === void 0 ? void 0 : customSandbox.initialPath) || customProps.path,
         syncInitHref: !!$syncHistory.current
       });
-    }, [customSandbox, customProps.path]); // 固化第一次的配置
+    }, [customSandbox, customProps.path]);
 
+    // 固化第一次的配置
     var memoOptions = (0, _react.useMemo)(function () {
       return {
         entry: entry,
@@ -208,21 +178,20 @@ function createApplication(loader) {
       var originalPushState;
       var originalReplaceState;
       var originalGo;
-
       var dispatchFramePopstate = function dispatchFramePopstate() {
         var _App, _App$context$baseFram, _App$context$baseFram2;
-
         var popstateEvent = new Event('popstate');
         popstateEvent.state = 'mock';
         (_App = App) === null || _App === void 0 ? void 0 : (_App$context$baseFram = _App.context.baseFrame) === null || _App$context$baseFram === void 0 ? void 0 : (_App$context$baseFram2 = _App$context$baseFram.contentWindow) === null || _App$context$baseFram2 === void 0 ? void 0 : _App$context$baseFram2.dispatchEvent(popstateEvent);
       };
-
       var updateAppHistory = function updateAppHistory() {
         if (App) {
-          var nextPath = peelPath(App.context.location); // 路由同步只应该在相同 basename 下生效
+          var nextPath = peelPath(App.context.location);
 
-          if (!peelPath(window.location).startsWith($basename.current || '')) return; // 如果主子应用路径不同，主动通知子应用 popstate 事件
+          // 路由同步只应该在相同 basename 下生效
+          if (!peelPath(window.location).startsWith($basename.current || '')) return;
 
+          // 如果主子应用路径不同，主动通知子应用 popstate 事件
           if (nextPath !== stripBasename(peelPath(window.location), $basename.current)) {
             if (originalReplaceState) {
               originalReplaceState(history.state, '', stripBasename(peelPath(window.location), $basename.current));
@@ -230,125 +199,105 @@ 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 _yield$loader$registe, app, logger, realVersion, _ref2, path, frameWindow;
-
         return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                (0, _counter.countRegister)(memoOptions.name);
-                _context.next = 3;
-                return loader.register(_objectSpread(_objectSpread({}, memoOptions), {}, {
-                  container: memoOptions.container || appRef.current
-                }));
-
-              case 3:
-                _yield$loader$registe = _context.sent;
-                app = _yield$loader$registe.app;
-                logger = _yield$loader$registe.logger;
-                realVersion = _yield$loader$registe.version;
-                setReleaseVersion(realVersion || 'unknown');
-                App = app; // container has been unmounted
-
-                if (!isUnmounted) {
-                  _context.next = 11;
-                  break;
-                }
-
-                return _context.abrupt("return");
-
-              case 11:
-                if (app) {
-                  _context.next = 13;
-                  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 13:
-                if (appRef.current) {
-                  _context.next = 15;
-                  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 15:
-                // 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 : appRef.current);
-                _ref2 = memoOptions.props, path = _ref2.path;
-                frameWindow = (_app$context$baseFram = app.context.baseFrame) === null || _app$context$baseFram === void 0 ? void 0 : _app$context$baseFram.contentWindow;
-
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              (0, _counter.countRegister)(memoOptions.name);
+              _context.next = 3;
+              return loader.register(_objectSpread(_objectSpread({}, memoOptions), {}, {
+                container: memoOptions.container || appRef.current
+              }));
+            case 3:
+              _yield$loader$registe = _context.sent;
+              app = _yield$loader$registe.app;
+              logger = _yield$loader$registe.logger;
+              realVersion = _yield$loader$registe.version;
+              setReleaseVersion(realVersion || 'unknown');
+              App = app;
+
+              // container has been unmounted
+              if (!isUnmounted) {
+                _context.next = 11;
+                break;
+              }
+              return _context.abrupt("return");
+            case 11:
+              if (app) {
+                _context.next = 13;
+                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 13:
+              if (appRef.current) {
+                _context.next = 15;
+                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 15:
+              // 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 : appRef.current);
+              _ref2 = memoOptions.props, path = _ref2.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;
+                originalReplaceState = frameWindow === null || frameWindow === void 0 ? void 0 : frameWindow.history.replaceState;
+                originalGo = frameWindow === null || frameWindow === void 0 ? void 0 : frameWindow.history.go;
+                // update context history according to path
+                if (path) originalReplaceState(history.state, '', path.replace(/\/+/g, '/'));
                 if (frameWindow) {
-                  originalPushState = frameWindow === null || frameWindow === void 0 ? void 0 : frameWindow.history.pushState;
-                  originalReplaceState = frameWindow === null || frameWindow === void 0 ? void 0 : frameWindow.history.replaceState;
-                  originalGo = frameWindow === null || frameWindow === void 0 ? void 0 : frameWindow.history.go; // update context history according to path
-
-                  if (path) originalReplaceState(history.state, '', path.replace(/\/+/g, '/'));
-
-                  if (frameWindow) {
-                    frameWindow.history.pushState = function (data, unused, _url) {
-                      if ($syncHistory.current) {
-                        var nextPath = addBasename((_url === null || _url === void 0 ? void 0 : _url.toString()) || '', $basename.current);
-
-                        if ("".concat(nextPath) !== peelPath(window.location)) {
-                          window.history.pushState(data, unused, nextPath);
-                        }
-
-                        originalReplaceState(data, unused, _url);
-                      } else {
-                        originalPushState(data, unused, _url);
-                      }
-                    };
-
-                    frameWindow.history.replaceState = function (data, unused, _url) {
+                  frameWindow.history.pushState = function (data, unused, _url) {
+                    if ($syncHistory.current) {
                       var nextPath = addBasename((_url === null || _url === void 0 ? void 0 : _url.toString()) || '', $basename.current);
-
-                      if ($syncHistory.current) {
-                        window.history.replaceState(data, unused, nextPath);
+                      if ("".concat(nextPath) !== peelPath(window.location)) {
+                        window.history.pushState(data, unused, nextPath);
                       }
-
                       originalReplaceState(data, unused, _url);
-                    }; // 劫持微应用的返回
-
-
-                    frameWindow.history.go = function (n) {
-                      window.history.go(n);
-                    };
-                  }
+                    } else {
+                      originalPushState(data, unused, _url);
+                    }
+                  };
+                  frameWindow.history.replaceState = function (data, unused, _url) {
+                    var nextPath = addBasename((_url === null || _url === void 0 ? void 0 : _url.toString()) || '', $basename.current);
+                    if ($syncHistory.current) {
+                      window.history.replaceState(data, unused, nextPath);
+                    }
+                    originalReplaceState(data, unused, _url);
+                  };
+
+                  // 劫持微应用的返回
+                  frameWindow.history.go = function (n) {
+                    window.history.go(n);
+                  };
                 }
-
-                _context.next = 21;
-                return app.mount(appRef.current, {
-                  customProps: customProps
-                });
-
-              case 21:
-                if (frameWindow) {
-                  // 每次挂载后主动触发子应用内的 popstate 事件，借此触发 react-router history 的检查逻辑
-                  dispatchFramePopstate();
-                } // just run once
-
-
-                setAppInstance(app);
-
-              case 23:
-              case "end":
-                return _context.stop();
-            }
+              }
+              _context.next = 21;
+              return app.mount(appRef.current, {
+                customProps: customProps
+              });
+            case 21:
+              if (frameWindow) {
+                // 每次挂载后主动触发子应用内的 popstate 事件，借此触发 react-router history 的检查逻辑
+                dispatchFramePopstate();
+              }
+
+              // just run once
+              setAppInstance(app);
+            case 23:
+            case "end":
+              return _context.stop();
           }
         }, _callee);
       }))().catch(function (e) {
@@ -358,27 +307,33 @@ function createApplication(loader) {
       });
       return function () {
         var _App$context$baseFram3, _App$context$baseFram4;
-
         isUnmounted = true;
         if ($syncHistory.current) window.removeEventListener('popstate', updateAppHistory);
         if (!App) return;
         var frameHistory = (_App$context$baseFram3 = App.context.baseFrame) === null || _App$context$baseFram3 === void 0 ? void 0 : (_App$context$baseFram4 = _App$context$baseFram3.contentWindow) === null || _App$context$baseFram4 === void 0 ? void 0 : _App$context$baseFram4.history;
-
         if (frameHistory) {
           if (originalPushState !== frameHistory.pushState) frameHistory.pushState = originalPushState;
           if (originalReplaceState !== frameHistory.replaceState) frameHistory.replaceState = originalReplaceState;
           if (originalGo !== frameHistory.go) frameHistory.go = originalGo;
         }
+        App.unmount();
 
-        App.unmount(); // TODO: 在沙箱中嵌套时，unmount 必须销毁沙箱实例，避免在其它微应用中复用该沙箱，导致环境变量污染
+        // TODO: 在沙箱中嵌套时，unmount 必须销毁沙箱实例，避免在其它微应用中复用该沙箱，导致环境变量污染
         // if (isOsContext()) App.destroy();
       };
     }, [memoOptions]);
-
+    (0, _react.useEffect)(function () {
+      var _handleExternalLink = function _handleExternalLink(href) {
+        handleExternalLink === null || handleExternalLink === void 0 ? void 0 : handleExternalLink(href);
+      };
+      eventBus.on("".concat((0, _utils.normalizeName)(name), ":external-router"), _handleExternalLink);
+      return function () {
+        eventBus.removeListener("".concat((0, _utils.normalizeName)(name), ":external-router"), _handleExternalLink);
+      };
+    }, [handleExternalLink, name]);
     if (appInstance) {
       appInstance.update(customProps);
     }
-
     var dataAttrs = {
       'data-id': name,
       // 加载器版本