@alicloud/alfa-react 1.7.0-alpha.0 → 1.7.1-alpha.0

package/es/components/Loading/index.js

@@ -4,10 +4,8 @@ export default function getLoading(_ref) {
   var loading = _ref.loading;
   if (loading === false) {
     return null;
-  } else if (loading && /*#__PURE__*/React.isValidElement(loading)) {
-    return loading;
   }
-  return /*#__PURE__*/React.createElement(Skeleton, {
+  return loading && /*#__PURE__*/React.isValidElement(loading) ? loading : /*#__PURE__*/React.createElement(Skeleton, {
     active: true
   });
 }

package/es/createAlfaWidget.js

@@ -141,6 +141,14 @@ function createAlfaWidget(option) {
     })));
   };
 }
+export function createAlfaWidgetSingleton(option) {
+  return createAlfaWidget(_objectSpread(_objectSpread({}, option), {}, {
+    noCache: true,
+    sandbox: {
+      sandBoxUrl: 'about:blank'
+    }
+  }));
+}
 
 /**
  * create memorized app in react function component, just create App after first mounted

package/es/createApplication.js

@@ -5,65 +5,22 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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) { _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 React, { useRef, useEffect, useState, useMemo, useContext } from 'react';
+import React, { useRef, useEffect, useState, useMemo, useContext, useCallback } from 'react';
 import { createEventBus } from '@alicloud/alfa-core';
 import { ConsoleRegion, ConsoleResourceGroup, ConsoleContext } from '@alicloud/xconsole-context';
 import { forApp } from '@alicloud/console-base-messenger';
+import { forceCheck } from 'react-lazyload';
 import Loading from './components/Loading';
-import { normalizeName, setNativeProperty } from './utils';
+import { normalizeName, setNativeProperty, peelPath, getHistoryState, stripBasename, addBasename, addLeftSlash } from './utils';
+import { useCallbackRef } from './hooks';
 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++) {
-    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
-  return _path.replace(new RegExp("^".concat(_basename.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1')), 'ig'), '');
-};
-
-/**
- * fix Error (we do not know why):
- * Failed to read the 'state' property from 'History':
- * May not use a History object associated with a Document that is not fully active
- * @returns any
- */
-var getHistoryState = function getHistoryState() {
-  try {
-    var _window;
-    return (_window = window) === null || _window === void 0 ? void 0 : _window.history.state;
-  } catch (e) {
-    return null;
-  }
+var dispatchFramePopstate = function dispatchFramePopstate(App) {
+  var _App$context$baseFram, _App$context$baseFram2;
+  var popstateEvent = new Event('popstate');
+  popstateEvent.state = getHistoryState() || {};
+  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);
 };
 
 /**
@@ -100,7 +57,6 @@ export default function createApplication(loader) {
       syncResourceGroup = props.syncResourceGroup,
       basename = props.basename,
       channel = props.channel,
-      onSyncHistory = props.onSyncHistory,
       delayPromise = props.delayPromise,
       preLoader = props.preLoader;
     var handleExternalLink = customProps.handleExternalLink;
@@ -122,6 +78,12 @@ export default function createApplication(loader) {
       _useState6 = _slicedToArray(_useState5, 2),
       releaseVersion = _useState6[0],
       setReleaseVersion = _useState6[1];
+    var initOptions = useRef({
+      delayPromise: delayPromise,
+      preLoader: preLoader,
+      container: container
+    });
+    var onSyncHistory = useCallbackRef(props.onSyncHistory || function () {});
     $syncHistory.current = syncHistory;
     $basename.current = basename;
 
@@ -211,7 +173,6 @@ export default function createApplication(loader) {
         name: name,
         version: version,
         manifest: manifest,
-        container: container,
         props: customProps,
         sandbox: sandbox,
         logger: customLogger,
@@ -229,18 +190,15 @@ export default function createApplication(loader) {
         channel: channel
       };
     }, []);
+    var getFakeBody = useCallback(function () {
+      return initOptions.current.container || appRef.current || document.body;
+    }, []);
     useEffect(function () {
       var isUnmounted = false;
       var App;
       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 = getHistoryState() || {};
-        (_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);
-      };
 
       /**
        * 因为要兼容历史逻辑，所以这段逻辑并不会执行
@@ -258,7 +216,7 @@ export default function createApplication(loader) {
           if (nextPath !== stripBasename(peelPath(window.location), $basename.current)) {
             if (originalReplaceState) {
               originalReplaceState(getHistoryState(), '', stripBasename(peelPath(window.location), $basename.current));
-              dispatchFramePopstate();
+              dispatchFramePopstate(App);
             }
           }
         }
@@ -273,20 +231,20 @@ export default function createApplication(loader) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               countRegister(memoOptions.name);
-              fakeBody = memoOptions.container || appRef.current || document.body;
-              if (!delayPromise) {
+              fakeBody = getFakeBody();
+              if (!initOptions.current.delayPromise) {
                 _context.next = 5;
                 break;
               }
               _context.next = 5;
-              return delayPromise;
+              return initOptions.current.delayPromise;
             case 5:
-              if (!preLoader) {
+              if (!initOptions.current.preLoader) {
                 _context.next = 11;
                 break;
               }
               _context.next = 8;
-              return preLoader(_objectSpread(_objectSpread({}, memoOptions), {}, {
+              return initOptions.current.preLoader(_objectSpread(_objectSpread({}, memoOptions), {}, {
                 container: fakeBody
               }));
             case 8:
@@ -348,7 +306,7 @@ export default function createApplication(loader) {
                     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);
-                      onSyncHistory && onSyncHistory('push', nextPath, data);
+                      onSyncHistory('push', nextPath, data);
                     }
                     originalReplaceState(data, unused, _url);
                   } else {
@@ -359,7 +317,7 @@ export default function createApplication(loader) {
                   var nextPath = addBasename((_url === null || _url === void 0 ? void 0 : _url.toString()) || '', $basename.current);
                   if ($syncHistory.current) {
                     window.history.replaceState(data, unused, nextPath);
-                    onSyncHistory && onSyncHistory('replace', nextPath, data);
+                    onSyncHistory('replace', nextPath, data);
                   }
                   originalReplaceState(data, unused, _url);
                 };
@@ -369,35 +327,16 @@ export default function createApplication(loader) {
                   window.history.go(n);
                 });
               }
-              _context.next = 32;
-              return app.mount(fakeBody, {
-                customProps: customProps
-              });
-            case 32:
-              if (!isUnmounted) {
-                _context.next = 34;
-                break;
-              }
-              return _context.abrupt("return");
-            case 34:
-              // 降低优先级
-              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());
-              if (frameWindow) {
-                // 每次挂载后主动触发子应用内的 popstate 事件，借此触发 react-router history 的检查逻辑
-                dispatchFramePopstate();
-              }
 
               // just run once
               setAppInstance(app);
-            case 39:
+            case 33:
             case "end":
               return _context.stop();
           }
@@ -422,12 +361,10 @@ export default function createApplication(loader) {
             setNativeProperty(frameHistory, 'go', originalGo);
           }
         }
-        App.unmount();
-
         // TODO: 在沙箱中嵌套时，unmount 必须销毁沙箱实例，避免在其它微应用中复用该沙箱，导致环境变量污染
         // if (isOsContext()) App.destroy();
       };
-    }, [memoOptions]);
+    }, [memoOptions, getFakeBody, onSyncHistory]);
     useEffect(function () {
       var _handleExternalLink = function _handleExternalLink(href) {
         handleExternalLink === null || handleExternalLink === void 0 ? void 0 : handleExternalLink(href);
@@ -437,6 +374,36 @@ export default function createApplication(loader) {
         eventBus.removeListener("".concat(normalizeName(name), ":external-router"), _handleExternalLink);
       };
     }, [handleExternalLink, name]);
+    useEffect(function () {
+      var isUnmounted = false;
+      // 等待加载完成并更新了视图后再挂载
+      if (!appInstance) return;
+      appInstance.mount(getFakeBody(), {
+        customProps: customProps
+      }).then(function () {
+        var _appInstance$context$;
+        if (isUnmounted) return;
+
+        // 每次挂载后检查是否还有 lazyload 组件未加载
+        setTimeout(function () {
+          forceCheck();
+        }, 0);
+        if ((_appInstance$context$ = appInstance.context.baseFrame) !== null && _appInstance$context$ !== void 0 && _appInstance$context$.contentWindow) {
+          // 每次挂载后主动触发子应用内的 popstate 事件，借此触发 react-router history 的检查逻辑
+          dispatchFramePopstate(appInstance);
+        }
+      }).catch(function (e) {
+        setError(function () {
+          throw e;
+        });
+      });
+
+      // 手动销毁
+      return function () {
+        isUnmounted = true;
+        appInstance.unmount();
+      };
+    }, [appInstance, getFakeBody]);
     if (appInstance) {
       appInstance.update(customProps);
     }
@@ -449,16 +416,18 @@ export default function createApplication(loader) {
       // 实际线上版本
       'data-release-version': releaseVersion
     };
-    return /*#__PURE__*/React.createElement(React.Fragment, null, !appInstance ? /*#__PURE__*/React.createElement(Loading, {
-      loading: loading
-    }) : null, sandbox && sandbox.disableFakeBody ? /*#__PURE__*/React.createElement(tagName, _objectSpread({
+    return /*#__PURE__*/React.createElement(React.Fragment, null, sandbox !== null && sandbox !== void 0 && sandbox.disableFakeBody ? /*#__PURE__*/React.createElement(tagName, _objectSpread({
       style: style,
       className: className,
       ref: appRef
-    }, dataAttrs)) : /*#__PURE__*/React.createElement(tagName, _objectSpread({}, dataAttrs), /*#__PURE__*/React.createElement('div', {
+    }, dataAttrs), /*#__PURE__*/React.createElement(Loading, {
+      loading: !appInstance && loading
+    })) : /*#__PURE__*/React.createElement(tagName, _objectSpread({}, dataAttrs), /*#__PURE__*/React.createElement('div', {
       ref: appRef,
       style: style,
       className: className
-    })));
+    }, /*#__PURE__*/React.createElement(Loading, {
+      loading: !appInstance && loading
+    }))));
   };
 }

package/es/hooks/index.js

@@ -13,4 +13,5 @@ export function useLoaderEvent(eventName, cb) {
       emitter.off(eventName, listener);
     };
   }, [eventName]);
-}
+}
+export * from './useCallbackRef';

package/es/hooks/useCallbackRef.js

@@ -0,0 +1,10 @@
+import { useCallback, useRef, useEffect } from 'react';
+export function useCallbackRef(callback) {
+  var ref = useRef(callback);
+  useEffect(function () {
+    ref.current = callback;
+  }, [callback]);
+  return useCallback(function () {
+    return ref.current.apply(ref, arguments);
+  }, []);
+}

package/es/utils/index.js

@@ -33,4 +33,54 @@ export var setNativeProperty = function setNativeProperty(obj, propertyName, val
   if (desc && typeof desc.set === 'undefined') return;
   obj[propertyName] = value;
 };
-export var IS_SSR = typeof document === 'undefined';
+export var IS_SSR = typeof document === 'undefined';
+
+/**
+ * 去掉 location.origin 的路径
+ */
+export var peelPath = function peelPath(location) {
+  return location.pathname + location.search + location.hash;
+};
+export 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, '/');
+};
+export var addBasename = function addBasename(path, basename) {
+  if (!basename) return path;
+  return resolvePath(basename, path);
+};
+export var addLeftSlash = function addLeftSlash(path) {
+  return path.charAt(0) === '/' ? path : "/".concat(path);
+};
+
+/**
+ * 从 path 移除 basename 部分
+ * @param path
+ * @param basename
+ * @returns string
+ */
+export 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
+  return _path.replace(new RegExp("^".concat(_basename.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1')), 'ig'), '');
+};
+
+/**
+ * fix Error (we do not know why):
+ * Failed to read the 'state' property from 'History':
+ * May not use a History object associated with a Document that is not fully active
+ * @returns any
+ */
+export var getHistoryState = function getHistoryState() {
+  try {
+    var _window;
+    return (_window = window) === null || _window === void 0 ? void 0 : _window.history.state;
+  } catch (e) {
+    return null;
+  }
+};

package/es/version.js

@@ -1 +1 @@
-export var version = '1.7.0-alpha.0';
+export var version = '1.7.1-alpha.0';

package/lib/components/Loading/index.js

@@ -11,10 +11,8 @@ function getLoading(_ref) {
   var loading = _ref.loading;
   if (loading === false) {
     return null;
-  } else if (loading && /*#__PURE__*/_react.default.isValidElement(loading)) {
-    return loading;
   }
-  return /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+  return loading && /*#__PURE__*/_react.default.isValidElement(loading) ? loading : /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
     active: true
   });
 }

package/lib/createAlfaWidget.js

@@ -5,6 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.createAlfaWidgetSingleton = createAlfaWidgetSingleton;
 exports.default = void 0;
 exports.useAlfaWidget = useAlfaWidget;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
@@ -152,6 +153,14 @@ function createAlfaWidget(option) {
     })));
   };
 }
+function createAlfaWidgetSingleton(option) {
+  return createAlfaWidget(_objectSpread(_objectSpread({}, option), {}, {
+    noCache: true,
+    sandbox: {
+      sandBoxUrl: 'about:blank'
+    }
+  }));
+}
 
 /**
  * create memorized app in react function component, just create App after first mounted

package/lib/createApplication.js

@@ -15,65 +15,22 @@ var _react = _interopRequireWildcard(require("react"));
 var _alfaCore = require("@alicloud/alfa-core");
 var _xconsoleContext = require("@alicloud/xconsole-context");
 var _consoleBaseMessenger = require("@alicloud/console-base-messenger");
+var _reactLazyload = require("react-lazyload");
 var _Loading = _interopRequireDefault(require("./components/Loading"));
 var _utils = require("./utils");
+var _hooks = require("./hooks");
 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; }
 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
-  return _path.replace(new RegExp("^".concat(_basename.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1')), 'ig'), '');
-};
-
-/**
- * fix Error (we do not know why):
- * Failed to read the 'state' property from 'History':
- * May not use a History object associated with a Document that is not fully active
- * @returns any
- */
-var getHistoryState = function getHistoryState() {
-  try {
-    var _window;
-    return (_window = window) === null || _window === void 0 ? void 0 : _window.history.state;
-  } catch (e) {
-    return null;
-  }
+var dispatchFramePopstate = function dispatchFramePopstate(App) {
+  var _App$context$baseFram, _App$context$baseFram2;
+  var popstateEvent = new Event('popstate');
+  popstateEvent.state = (0, _utils.getHistoryState)() || {};
+  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);
 };
 
 /**
@@ -110,7 +67,6 @@ function createApplication(loader) {
       syncResourceGroup = props.syncResourceGroup,
       basename = props.basename,
       channel = props.channel,
-      onSyncHistory = props.onSyncHistory,
       delayPromise = props.delayPromise,
       preLoader = props.preLoader;
     var handleExternalLink = customProps.handleExternalLink;
@@ -132,15 +88,21 @@ function createApplication(loader) {
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
       releaseVersion = _useState6[0],
       setReleaseVersion = _useState6[1];
+    var initOptions = (0, _react.useRef)({
+      delayPromise: delayPromise,
+      preLoader: preLoader,
+      container: container
+    });
+    var onSyncHistory = (0, _hooks.useCallbackRef)(props.onSyncHistory || function () {});
     $syncHistory.current = syncHistory;
     $basename.current = basename;
 
     // if (customProps.__innerStamp) console.warn('Please do not use __innerStamp which used in internal.');
     // 更新标记，保证每次更新都会更新
     customProps.__innerStamp = (+new Date()).toString(36);
-    customProps.__historyState = getHistoryState();
+    customProps.__historyState = (0, _utils.getHistoryState)();
     if (customProps.path) {
-      customProps.path = addLeftSlash(customProps.path);
+      customProps.path = (0, _utils.addLeftSlash)(customProps.path);
     }
 
     // 受控模式锁定一些参数
@@ -148,7 +110,7 @@ function createApplication(loader) {
       // 禁止子应用和 consoleBase 通信
       customProps.consoleBase = null;
       // 覆写 path 参数，用于通知子应用更新路由
-      customProps.path = addLeftSlash(stripBasename(peelPath(window.location), $basename.current));
+      customProps.path = (0, _utils.addLeftSlash)((0, _utils.stripBasename)((0, _utils.peelPath)(window.location), $basename.current));
       // 禁止注入 history
       customProps.__injectHistory = null;
     }
@@ -221,7 +183,6 @@ function createApplication(loader) {
         name: name,
         version: version,
         manifest: manifest,
-        container: container,
         props: customProps,
         sandbox: sandbox,
         logger: customLogger,
@@ -239,18 +200,15 @@ function createApplication(loader) {
         channel: channel
       };
     }, []);
+    var getFakeBody = (0, _react.useCallback)(function () {
+      return initOptions.current.container || appRef.current || document.body;
+    }, []);
     (0, _react.useEffect)(function () {
       var isUnmounted = false;
       var App;
       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 = getHistoryState() || {};
-        (_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);
-      };
 
       /**
        * 因为要兼容历史逻辑，所以这段逻辑并不会执行
@@ -259,16 +217,16 @@ function createApplication(loader) {
        */
       var updateAppHistory = function updateAppHistory() {
         if (App) {
-          var nextPath = peelPath(App.context.location);
+          var nextPath = (0, _utils.peelPath)(App.context.location);
 
           // 路由同步只应该在相同 basename 下生效
-          if (!peelPath(window.location).startsWith($basename.current || '')) return;
+          if (!(0, _utils.peelPath)(window.location).startsWith($basename.current || '')) return;
 
           // 如果主子应用路径不同，主动通知子应用 popstate 事件
-          if (nextPath !== stripBasename(peelPath(window.location), $basename.current)) {
+          if (nextPath !== (0, _utils.stripBasename)((0, _utils.peelPath)(window.location), $basename.current)) {
             if (originalReplaceState) {
-              originalReplaceState(getHistoryState(), '', stripBasename(peelPath(window.location), $basename.current));
-              dispatchFramePopstate();
+              originalReplaceState((0, _utils.getHistoryState)(), '', (0, _utils.stripBasename)((0, _utils.peelPath)(window.location), $basename.current));
+              dispatchFramePopstate(App);
             }
           }
         }
@@ -283,20 +241,20 @@ function createApplication(loader) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               (0, _counter.countRegister)(memoOptions.name);
-              fakeBody = memoOptions.container || appRef.current || document.body;
-              if (!delayPromise) {
+              fakeBody = getFakeBody();
+              if (!initOptions.current.delayPromise) {
                 _context.next = 5;
                 break;
               }
               _context.next = 5;
-              return delayPromise;
+              return initOptions.current.delayPromise;
             case 5:
-              if (!preLoader) {
+              if (!initOptions.current.preLoader) {
                 _context.next = 11;
                 break;
               }
               _context.next = 8;
-              return preLoader(_objectSpread(_objectSpread({}, memoOptions), {}, {
+              return initOptions.current.preLoader(_objectSpread(_objectSpread({}, memoOptions), {}, {
                 container: fakeBody
               }));
             case 8:
@@ -352,13 +310,13 @@ function createApplication(loader) {
                 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(getHistoryState(), '', path.replace(/\/+/g, '/'));
+                if (path) originalReplaceState((0, _utils.getHistoryState)(), '', path.replace(/\/+/g, '/'));
                 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)) {
+                    var nextPath = (0, _utils.addBasename)((_url === null || _url === void 0 ? void 0 : _url.toString()) || '', $basename.current);
+                    if ("".concat(nextPath) !== (0, _utils.peelPath)(window.location)) {
                       window.history.pushState(data, unused, nextPath);
-                      onSyncHistory && onSyncHistory('push', nextPath, data);
+                      onSyncHistory('push', nextPath, data);
                     }
                     originalReplaceState(data, unused, _url);
                   } else {
@@ -366,10 +324,10 @@ function createApplication(loader) {
                   }
                 };
                 frameWindow.history.replaceState = function (data, unused, _url) {
-                  var nextPath = addBasename((_url === null || _url === void 0 ? void 0 : _url.toString()) || '', $basename.current);
+                  var nextPath = (0, _utils.addBasename)((_url === null || _url === void 0 ? void 0 : _url.toString()) || '', $basename.current);
                   if ($syncHistory.current) {
                     window.history.replaceState(data, unused, nextPath);
-                    onSyncHistory && onSyncHistory('replace', nextPath, data);
+                    onSyncHistory('replace', nextPath, data);
                   }
                   originalReplaceState(data, unused, _url);
                 };
@@ -379,35 +337,16 @@ function createApplication(loader) {
                   window.history.go(n);
                 });
               }
-              _context.next = 32;
-              return app.mount(fakeBody, {
-                customProps: customProps
-              });
-            case 32:
-              if (!isUnmounted) {
-                _context.next = 34;
-                break;
-              }
-              return _context.abrupt("return");
-            case 34:
-              // 降低优先级
-              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());
-              if (frameWindow) {
-                // 每次挂载后主动触发子应用内的 popstate 事件，借此触发 react-router history 的检查逻辑
-                dispatchFramePopstate();
-              }
 
               // just run once
               setAppInstance(app);
-            case 39:
+            case 33:
             case "end":
               return _context.stop();
           }
@@ -432,12 +371,10 @@ function createApplication(loader) {
             (0, _utils.setNativeProperty)(frameHistory, 'go', originalGo);
           }
         }
-        App.unmount();
-
         // TODO: 在沙箱中嵌套时，unmount 必须销毁沙箱实例，避免在其它微应用中复用该沙箱，导致环境变量污染
         // if (isOsContext()) App.destroy();
       };
-    }, [memoOptions]);
+    }, [memoOptions, getFakeBody, onSyncHistory]);
     (0, _react.useEffect)(function () {
       var _handleExternalLink = function _handleExternalLink(href) {
         handleExternalLink === null || handleExternalLink === void 0 ? void 0 : handleExternalLink(href);
@@ -447,6 +384,36 @@ function createApplication(loader) {
         eventBus.removeListener("".concat((0, _utils.normalizeName)(name), ":external-router"), _handleExternalLink);
       };
     }, [handleExternalLink, name]);
+    (0, _react.useEffect)(function () {
+      var isUnmounted = false;
+      // 等待加载完成并更新了视图后再挂载
+      if (!appInstance) return;
+      appInstance.mount(getFakeBody(), {
+        customProps: customProps
+      }).then(function () {
+        var _appInstance$context$;
+        if (isUnmounted) return;
+
+        // 每次挂载后检查是否还有 lazyload 组件未加载
+        setTimeout(function () {
+          (0, _reactLazyload.forceCheck)();
+        }, 0);
+        if ((_appInstance$context$ = appInstance.context.baseFrame) !== null && _appInstance$context$ !== void 0 && _appInstance$context$.contentWindow) {
+          // 每次挂载后主动触发子应用内的 popstate 事件，借此触发 react-router history 的检查逻辑
+          dispatchFramePopstate(appInstance);
+        }
+      }).catch(function (e) {
+        setError(function () {
+          throw e;
+        });
+      });
+
+      // 手动销毁
+      return function () {
+        isUnmounted = true;
+        appInstance.unmount();
+      };
+    }, [appInstance, getFakeBody]);
     if (appInstance) {
       appInstance.update(customProps);
     }
@@ -459,16 +426,18 @@ function createApplication(loader) {
       // 实际线上版本
       'data-release-version': releaseVersion
     };
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !appInstance ? /*#__PURE__*/_react.default.createElement(_Loading.default, {
-      loading: loading
-    }) : null, sandbox && sandbox.disableFakeBody ? /*#__PURE__*/_react.default.createElement(tagName, _objectSpread({
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sandbox !== null && sandbox !== void 0 && sandbox.disableFakeBody ? /*#__PURE__*/_react.default.createElement(tagName, _objectSpread({
       style: style,
       className: className,
       ref: appRef
-    }, dataAttrs)) : /*#__PURE__*/_react.default.createElement(tagName, _objectSpread({}, dataAttrs), /*#__PURE__*/_react.default.createElement('div', {
+    }, dataAttrs), /*#__PURE__*/_react.default.createElement(_Loading.default, {
+      loading: !appInstance && loading
+    })) : /*#__PURE__*/_react.default.createElement(tagName, _objectSpread({}, dataAttrs), /*#__PURE__*/_react.default.createElement('div', {
       ref: appRef,
       style: style,
       className: className
-    })));
+    }, /*#__PURE__*/_react.default.createElement(_Loading.default, {
+      loading: !appInstance && loading
+    }))));
   };
 }

package/lib/hooks/index.js

@@ -3,9 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  useLoaderEvent: true
+};
 exports.useLoaderEvent = useLoaderEvent;
 var _react = require("react");
 var _alfaCore = require("@alicloud/alfa-core");
+var _useCallbackRef = require("./useCallbackRef");
+Object.keys(_useCallbackRef).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useCallbackRef[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useCallbackRef[key];
+    }
+  });
+});
 var emitter = (0, _alfaCore.createEventBus)();
 function useLoaderEvent(eventName, cb) {
   var fn = (0, _react.useRef)(cb);

package/lib/hooks/useCallbackRef.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCallbackRef = useCallbackRef;
+var _react = require("react");
+function useCallbackRef(callback) {
+  var ref = (0, _react.useRef)(callback);
+  (0, _react.useEffect)(function () {
+    ref.current = callback;
+  }, [callback]);
+  return (0, _react.useCallback)(function () {
+    return ref.current.apply(ref, arguments);
+  }, []);
+}

package/lib/utils/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setNativeProperty = exports.normalizeName = exports.isOsContext = exports.IS_SSR = void 0;
+exports.stripBasename = exports.setNativeProperty = exports.resolvePath = exports.peelPath = exports.normalizeName = exports.isOsContext = exports.getHistoryState = exports.addLeftSlash = exports.addBasename = exports.IS_SSR = void 0;
 /**
  * kernel 会为沙箱 context 注入 __IS_CONSOLE_OS_CONTEXT__
  */
@@ -43,4 +43,60 @@ var setNativeProperty = function setNativeProperty(obj, propertyName, value) {
 };
 exports.setNativeProperty = setNativeProperty;
 var IS_SSR = typeof document === 'undefined';
-exports.IS_SSR = IS_SSR;
+
+/**
+ * 去掉 location.origin 的路径
+ */
+exports.IS_SSR = IS_SSR;
+var peelPath = function peelPath(location) {
+  return location.pathname + location.search + location.hash;
+};
+exports.peelPath = peelPath;
+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, '/');
+};
+exports.resolvePath = resolvePath;
+var addBasename = function addBasename(path, basename) {
+  if (!basename) return path;
+  return resolvePath(basename, path);
+};
+exports.addBasename = addBasename;
+var addLeftSlash = function addLeftSlash(path) {
+  return path.charAt(0) === '/' ? path : "/".concat(path);
+};
+
+/**
+ * 从 path 移除 basename 部分
+ * @param path
+ * @param basename
+ * @returns string
+ */
+exports.addLeftSlash = addLeftSlash;
+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
+  return _path.replace(new RegExp("^".concat(_basename.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1')), 'ig'), '');
+};
+
+/**
+ * fix Error (we do not know why):
+ * Failed to read the 'state' property from 'History':
+ * May not use a History object associated with a Document that is not fully active
+ * @returns any
+ */
+exports.stripBasename = stripBasename;
+var getHistoryState = function getHistoryState() {
+  try {
+    var _window;
+    return (_window = window) === null || _window === void 0 ? void 0 : _window.history.state;
+  } catch (e) {
+    return null;
+  }
+};
+exports.getHistoryState = getHistoryState;

package/lib/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/alfa-react",
-  "version": "1.7.0-alpha.0",
+  "version": "1.7.1-alpha.0",
   "description": "Alfa Framework (React Version)",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -41,7 +41,7 @@
     "prop-types": "^15.8.1",
     "react-lazyload": "^3.2.1",
     "@alicloud/alfa-core": "^1.4.38",
-    "@alicloud/console-os-loader": "^1.4.44"
+    "@alicloud/console-os-loader": "^1.4.45-alpha.0"
   },
   "peerDependencies": {
     "react": ">=16.0.0",

package/types/createAlfaWidget.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { AlfaFactoryOption } from './types';
 declare function createAlfaWidget<P = any>(option: AlfaFactoryOption): React.FC<any>;
+export declare function createAlfaWidgetSingleton(option: AlfaFactoryOption): React.FC<any>;
 /**
  * create memorized app in react function component, just create App after first mounted
  * @param option

package/types/createApplication.d.ts

@@ -1,5 +1,5 @@
 import { BaseLoader } from '@alicloud/alfa-core';
-import { AlfaFactoryOption } from './types';
+import type { AlfaFactoryOption } from './types';
 export interface IApplicationCustomProps {
     /**
      * 根结点样式

package/types/hooks/index.d.ts

@@ -1 +1,2 @@
 export declare function useLoaderEvent<P = any>(eventName: string, cb: (args: P) => void): void;
+export * from './useCallbackRef';

package/types/hooks/useCallbackRef.d.ts

@@ -0,0 +1 @@
+export declare function useCallbackRef<T extends (...args: any[]) => any>(callback: T): (...args: Parameters<T>) => any;

package/types/utils/index.d.ts

@@ -12,3 +12,24 @@ export declare const isOsContext: () => boolean;
  */
 export declare const setNativeProperty: (obj: any, propertyName: string, value: any) => void;
 export declare const IS_SSR: boolean;
+/**
+ * 去掉 location.origin 的路径
+ */
+export declare const peelPath: (location: Location) => string;
+export declare const resolvePath: (...args: Array<string | undefined>) => string;
+export declare const addBasename: (path: string, basename?: string) => string;
+export declare const addLeftSlash: (path: string) => string;
+/**
+ * 从 path 移除 basename 部分
+ * @param path
+ * @param basename
+ * @returns string
+ */
+export declare const stripBasename: (path: string, basename?: string) => string;
+/**
+ * fix Error (we do not know why):
+ * Failed to read the 'state' property from 'History':
+ * May not use a History object associated with a Document that is not fully active
+ * @returns any
+ */
+export declare const getHistoryState: () => any;

package/types/version.d.ts

@@ -1 +1 @@
-export declare const version = "1.7.0-alpha.0";
+export declare const version = "1.7.1-alpha.0";