@alicloud/alfa-react 1.3.3 → 1.4.0-alpha.0

package/es/components/ErrorBoundary/index.js

@@ -25,7 +25,7 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
     _this = _super.call(this, props);
     _this.state = {
       hasError: false,
-      error: null
+      error: undefined
     };
     return _this;
   }
@@ -46,8 +46,9 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
       isFunction((_window = window) === null || _window === void 0 ? void 0 : (_window$__bl = _window.__bl) === null || _window$__bl === void 0 ? void 0 : _window$__bl.error) && ((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$__bl = _window2.__bl) === null || _window2$__bl === void 0 ? void 0 : _window2$__bl.error(error, errorInfo)); // You can also log the error to an error reporting service in appDidCatch
 
       appDidCatch && appDidCatch(error, errorInfo);
-      logger === null || logger === void 0 ? void 0 : logger.error({
-        E_MSG: '',
+      (logger === null || logger === void 0 ? void 0 : logger.error) && logger.error({
+        E_CODE: 'RuntimeError',
+        E_MSG: error.message,
         E_STACK: error,
         C_STACK: errorInfo
       });
@@ -58,7 +59,8 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
       var error = this.state.error;
 
       if (this.state.hasError) {
-        // You can render any custom fallback UI
+        if (this.props.fallbackRender) return this.props.fallbackRender(error); // You can render any custom fallback UI
+
         return /*#__PURE__*/React.createElement(ErrorPanel, {
           error: error
         });

package/es/createApplication.js

@@ -11,6 +11,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useRef, useEffect, useState, useMemo } from 'react';
 import Loading from './components/Loading';
 import { normalizeName } from './utils';
+import { version as loaderVersion } from './version';
 
 /**
  * container for microApp mount
@@ -44,16 +45,19 @@ export default function createApplication(loader) {
         app = _useState2[0],
         setApp = _useState2[1];
 
-    var appRef = useRef(null);
+    var appRef = useRef(undefined);
     var tagName = normalizeName(props.name);
     var sandbox = useMemo(function () {
       return _objectSpread(_objectSpread({}, customSandbox), {}, {
+        // allowResources: [
+        //   ...(customSandbox?.allowResources || []),
+        //   /^https?:\/\/at\.alicdn\.com\//,
+        // ],
         externalsVars: [].concat(_toConsumableArray((customSandbox === null || customSandbox === void 0 ? void 0 : customSandbox.externalsVars) || []), [// global vars used in ConsoleBase.forApp
         '_console_base_ready_'])
       });
     }, [customSandbox]);
     useEffect(function () {
-      // eslint-disable-next-line no-useless-catch
       _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
         var _yield$loader$registe, App, logger;
 
@@ -61,15 +65,7 @@ export default function createApplication(loader) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                if (!app) {
-                  _context.next = 2;
-                  break;
-                }
-
-                return _context.abrupt("return");
-
-              case 2:
-                _context.next = 4;
+                _context.next = 2;
                 return loader.register({
                   entry: entry,
                   url: url,
@@ -89,40 +85,42 @@ export default function createApplication(loader) {
                   beforeUpdate: beforeUpdate
                 });
 
-              case 4:
+              case 2:
                 _yield$loader$registe = _context.sent;
                 App = _yield$loader$registe.app;
                 logger = _yield$loader$registe.logger;
 
                 if (App) {
-                  _context.next = 9;
+                  _context.next = 7;
                   break;
                 }
 
-                return _context.abrupt("return", logger === null || logger === void 0 ? void 0 : logger.error({
+                return _context.abrupt("return", (logger === null || logger === void 0 ? void 0 : logger.error) && logger.error({
+                  E_CODE: 'RuntimeError',
                   E_MSG: 'load app failed.'
                 }));
 
-              case 9:
+              case 7:
                 if (appRef.current) {
-                  _context.next = 11;
+                  _context.next = 9;
                   break;
                 }
 
-                return _context.abrupt("return", logger === null || logger === void 0 ? void 0 : logger.error({
+                return _context.abrupt("return", (logger === null || logger === void 0 ? void 0 : logger.error) && logger.error({
+                  E_CODE: 'RuntimeError',
                   E_MSG: 'cannot find container.'
                 }));
 
-              case 11:
-                _context.next = 13;
+              case 9:
+                _context.next = 11;
                 return App.mount(appRef.current, {
                   customProps: customProps
                 });
 
-              case 13:
+              case 11:
                 setApp(App);
 
-              case 14:
+              case 12:
               case "end":
                 return _context.stop();
             }
@@ -141,15 +139,21 @@ export default function createApplication(loader) {
       app.update(customProps);
     }
 
+    var dataAttrs = {
+      'data-id': version,
+      'data-version': version,
+      'data-loader': loaderVersion
+    };
     return /*#__PURE__*/React.createElement(React.Fragment, null, !app ? /*#__PURE__*/React.createElement(Loading, {
       loading: loading
-    }) : null, sandbox && sandbox.disableFakeBody ? /*#__PURE__*/React.createElement(tagName, {
+    }) : null, sandbox && sandbox.disableFakeBody ? /*#__PURE__*/React.createElement(tagName, _objectSpread({
       style: style,
       className: className,
-      ref: appRef,
-      dataId: name
-    }) : /*#__PURE__*/React.createElement(tagName, {}, /*#__PURE__*/React.createElement('div', {
       ref: appRef
+    }, dataAttrs)) : /*#__PURE__*/React.createElement(tagName, _objectSpread({}, dataAttrs), /*#__PURE__*/React.createElement('div', {
+      ref: appRef,
+      style: style,
+      className: className
     })));
   };
 }

package/es/hooks/beforeLoadHook.js

@@ -7,8 +7,9 @@ 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 { getLocale } from '@alicloud/alfa-core';
-import { getConsoleConfig } from '../utils/getConsoleConfig'; // inject consoleConfig & locales after load
+import { getConfig, getLocale } from '@alicloud/alfa-core';
+import { getConsoleConfig } from '../utils/getConsoleConfig';
+import { getConsoleGlobal } from '../utils/getConsoleGlobal'; // inject consoleConfig & locales after load
 
 function afterLoadHook(_x) {
   return _afterLoadHook.apply(this, arguments);
@@ -16,7 +17,7 @@ function afterLoadHook(_x) {
 
 function _afterLoadHook() {
   _afterLoadHook = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(appConfig) {
-    var app, logger, defaultConsoleConfig, CONFIG_START_TIME, _yield$Promise$all$ca, _yield$Promise$all$ca2, consoleConfig, messages, CONFIG_END_TIME, i18nMessages, END_TIME;
+    var app, logger, defaultConsoleConfig, defaultConsoleGlobal, CONFIG_START_TIME, configData, _yield$Promise$all, _yield$Promise$all2, consoleConfig, consoleGlobal, messages, CONFIG_END_TIME, i18nMessages, END_TIME;
 
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
@@ -24,39 +25,41 @@ function _afterLoadHook() {
           case 0:
             app = appConfig.app, logger = appConfig.logger;
             defaultConsoleConfig = window.ALIYUN_CONSOLE_CONFIG || {};
+            defaultConsoleGlobal = window.ALIYUN_CONSOLE_GLOBAL || {};
             CONFIG_START_TIME = Date.now();
-            _context.next = 5;
-            return Promise.all([getConsoleConfig(appConfig, defaultConsoleConfig), getLocale(appConfig)]).catch(function (e) {
-              logger === null || logger === void 0 ? void 0 : logger.error({
-                E_MSG: 'fetch config & locale error.',
-                E_STACK: e
-              });
-              return [{}, {}];
-            });
+            _context.next = 6;
+            return getConfig(appConfig);
+
+          case 6:
+            configData = _context.sent;
+            _context.next = 9;
+            return Promise.all([getConsoleConfig(configData, defaultConsoleConfig), getConsoleGlobal(configData, defaultConsoleGlobal), getLocale(appConfig)]);
 
-          case 5:
-            _yield$Promise$all$ca = _context.sent;
-            _yield$Promise$all$ca2 = _slicedToArray(_yield$Promise$all$ca, 2);
-            consoleConfig = _yield$Promise$all$ca2[0];
-            messages = _yield$Promise$all$ca2[1];
+          case 9:
+            _yield$Promise$all = _context.sent;
+            _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 3);
+            consoleConfig = _yield$Promise$all2[0];
+            consoleGlobal = _yield$Promise$all2[1];
+            messages = _yield$Promise$all2[2];
             CONFIG_END_TIME = Date.now();
-            i18nMessages = _objectSpread(_objectSpread({}, window.ALIYUN_CONSOLE_I18N_MESSAGE), messages);
+            i18nMessages = _objectSpread(_objectSpread({}, window.ALIYUN_CONSOLE_I18N_MESSAGE), messages); // inject global variables
 
             if (app && app.context) {
               app.context.window.ALIYUN_CONSOLE_CONFIG = consoleConfig;
-              app.context.window.ALIYUN_CONSOLE_I18N_MESSAGE = i18nMessages; // (app.context.history as any) = {};
+              app.context.window.ALIYUN_CONSOLE_GLOBAL = consoleGlobal;
+              app.context.window.ALIYUN_CONSOLE_I18N_MESSAGE = i18nMessages;
             }
 
             END_TIME = Date.now();
-            logger === null || logger === void 0 ? void 0 : logger.record({
+            (logger === null || logger === void 0 ? void 0 : logger.record) && logger.record({
               CONFIG_START_TIME: CONFIG_START_TIME,
               CONFIG_END_TIME: CONFIG_END_TIME,
               END_TIME: END_TIME
             });
-            logger === null || logger === void 0 ? void 0 : logger.send();
+            (logger === null || logger === void 0 ? void 0 : logger.send) && logger.send();
             return _context.abrupt("return", appConfig);
 
-          case 16:
+          case 21:
           case "end":
             return _context.stop();
         }

package/es/hooks/beforeResolveHook.js

@@ -10,30 +10,21 @@ function beforeResolveHook(_x) {
 
 function _beforeResolveHook() {
   _beforeResolveHook = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(appConfig) {
-    var resolvedManifest, logger, START_TIME, MANIFEST_START_TIME, MANIFEST_END_TIME;
+    var logger, START_TIME, MANIFEST_START_TIME, resolvedManifest, MANIFEST_END_TIME;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            resolvedManifest = appConfig.manifest;
             logger = appConfig.logger;
             START_TIME = Date.now();
             MANIFEST_START_TIME = Date.now();
-
-            if (resolvedManifest) {
-              _context.next = 8;
-              break;
-            }
-
-            _context.next = 7;
+            _context.next = 5;
             return getManifest(appConfig);
 
-          case 7:
+          case 5:
             resolvedManifest = _context.sent;
-
-          case 8:
             MANIFEST_END_TIME = Date.now();
-            logger === null || logger === void 0 ? void 0 : logger.record({
+            (logger === null || logger === void 0 ? void 0 : logger.record) && logger.record({
               LOADER_VERSION: LOADER_VERSION,
               START_TIME: START_TIME,
               MANIFEST_START_TIME: MANIFEST_START_TIME,
@@ -42,7 +33,7 @@ function _beforeResolveHook() {
             appConfig.manifest = resolvedManifest;
             return _context.abrupt("return", appConfig);
 
-          case 12:
+          case 10:
           case "end":
             return _context.stop();
         }

package/es/utils/getConsoleConfig.js

@@ -6,7 +6,6 @@ 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 { getConfig } from '@alicloud/alfa-core';
 import md5 from 'crypto-js/md5';
 /**
  * transform
@@ -14,12 +13,13 @@ import md5 from 'crypto-js/md5';
  */
 
 var processFeatures = function processFeatures(features) {
+  if (!features) return {};
   return Object.keys(features).reduce(function (newFeatures, key) {
     var _ALIYUN_CONSOLE_CONFI;
 
-    var feature = features[key];
+    var feature = features === null || features === void 0 ? void 0 : features[key];
     if (!feature) return newFeatures;
-    var uid = ((_ALIYUN_CONSOLE_CONFI = window.ALIYUN_CONSOLE_CONFIG) === null || _ALIYUN_CONSOLE_CONFI === void 0 ? void 0 : _ALIYUN_CONSOLE_CONFI.CURRENT_PK) || '';
+    var uid = ((_ALIYUN_CONSOLE_CONFI = window.ALIYUN_CONSOLE_CONFIG) === null || _ALIYUN_CONSOLE_CONFI === void 0 ? void 0 : _ALIYUN_CONSOLE_CONFI.MAIN_ACCOUNT_PK) || '';
     var md5Uid = md5(uid).toString();
     var enableBlockList = feature.enableBlockList,
         enableSampling = feature.enableSampling,
@@ -59,20 +59,14 @@ var mergeConfigDataWithConsoleConfig = function mergeConfigDataWithConsoleConfig
 };
 
 export var getConsoleConfig = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(config, consoleConfig) {
-    var configData;
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(configData, consoleConfig) {
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            _context.next = 2;
-            return getConfig(config);
-
-          case 2:
-            configData = _context.sent;
             return _context.abrupt("return", mergeConfigDataWithConsoleConfig(configData, consoleConfig));
 
-          case 4:
+          case 1:
           case "end":
             return _context.stop();
         }

package/es/utils/getConsoleGlobal.js

@@ -0,0 +1,28 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+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; }
+
+export var getConsoleGlobal = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(configData, global) {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            return _context.abrupt("return", _objectSpread(_objectSpread({}, global), configData === null || configData === void 0 ? void 0 : configData.GLOBAL_DATA));
+
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function getConsoleGlobal(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();

package/es/version.js

@@ -1 +1 @@
-export var version = '1.3.3';
+export var version = '1.4.0-alpha.0';

package/lib/app.js

@@ -80,7 +80,7 @@ var Application = function Application(props) {
       app = _useState4[0],
       setApp = _useState4[1];
 
-  var appRef = (0, _react.useRef)(null);
+  var appRef = (0, _react.useRef)(undefined);
   (0, _react.useEffect)(function () {
     (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
       var App;

package/lib/components/ErrorBoundary/ErrorPanel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface IProps {
-    error: Error | null;
+    error?: Error;
 }
 declare const ErrorPanel: React.FC<IProps>;
 export default ErrorPanel;

package/lib/components/ErrorBoundary/index.d.ts

@@ -1,12 +1,13 @@
 import React, { ErrorInfo } from 'react';
 import { AlfaLogger } from '@alicloud/alfa-core';
 interface IProps {
+    fallbackRender?: (error?: Error) => Element;
     appDidCatch?: (error?: Error, info?: ErrorInfo) => void;
     logger?: AlfaLogger;
 }
 interface State {
     hasError: boolean;
-    error: Error | null;
+    error?: Error;
 }
 declare class ErrorBoundary extends React.Component<IProps, State> {
     constructor(props: IProps);

package/lib/components/ErrorBoundary/index.js

@@ -39,7 +39,7 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
     _this = _super.call(this, props);
     _this.state = {
       hasError: false,
-      error: null
+      error: undefined
     };
     return _this;
   }
@@ -60,8 +60,9 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
       (0, _isFunction.default)((_window = window) === null || _window === void 0 ? void 0 : (_window$__bl = _window.__bl) === null || _window$__bl === void 0 ? void 0 : _window$__bl.error) && ((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$__bl = _window2.__bl) === null || _window2$__bl === void 0 ? void 0 : _window2$__bl.error(error, errorInfo)); // You can also log the error to an error reporting service in appDidCatch
 
       appDidCatch && appDidCatch(error, errorInfo);
-      logger === null || logger === void 0 ? void 0 : logger.error({
-        E_MSG: '',
+      (logger === null || logger === void 0 ? void 0 : logger.error) && logger.error({
+        E_CODE: 'RuntimeError',
+        E_MSG: error.message,
         E_STACK: error,
         C_STACK: errorInfo
       });
@@ -72,7 +73,8 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
       var error = this.state.error;
 
       if (this.state.hasError) {
-        // You can render any custom fallback UI
+        if (this.props.fallbackRender) return this.props.fallbackRender(error); // You can render any custom fallback UI
+
         return /*#__PURE__*/_react.default.createElement(_ErrorPanel.default, {
           error: error
         });

package/lib/createApplication.js

@@ -25,6 +25,8 @@ var _Loading = _interopRequireDefault(require("./components/Loading"));
 
 var _utils = require("./utils");
 
+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; }
@@ -65,16 +67,19 @@ function createApplication(loader) {
         app = _useState2[0],
         setApp = _useState2[1];
 
-    var appRef = (0, _react.useRef)(null);
+    var appRef = (0, _react.useRef)(undefined);
     var tagName = (0, _utils.normalizeName)(props.name);
     var sandbox = (0, _react.useMemo)(function () {
       return _objectSpread(_objectSpread({}, customSandbox), {}, {
+        // allowResources: [
+        //   ...(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
         '_console_base_ready_'])
       });
     }, [customSandbox]);
     (0, _react.useEffect)(function () {
-      // eslint-disable-next-line no-useless-catch
       (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
         var _yield$loader$registe, App, logger;
 
@@ -82,15 +87,7 @@ function createApplication(loader) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                if (!app) {
-                  _context.next = 2;
-                  break;
-                }
-
-                return _context.abrupt("return");
-
-              case 2:
-                _context.next = 4;
+                _context.next = 2;
                 return loader.register({
                   entry: entry,
                   url: url,
@@ -110,40 +107,42 @@ function createApplication(loader) {
                   beforeUpdate: beforeUpdate
                 });
 
-              case 4:
+              case 2:
                 _yield$loader$registe = _context.sent;
                 App = _yield$loader$registe.app;
                 logger = _yield$loader$registe.logger;
 
                 if (App) {
-                  _context.next = 9;
+                  _context.next = 7;
                   break;
                 }
 
-                return _context.abrupt("return", logger === null || logger === void 0 ? void 0 : logger.error({
+                return _context.abrupt("return", (logger === null || logger === void 0 ? void 0 : logger.error) && logger.error({
+                  E_CODE: 'RuntimeError',
                   E_MSG: 'load app failed.'
                 }));
 
-              case 9:
+              case 7:
                 if (appRef.current) {
-                  _context.next = 11;
+                  _context.next = 9;
                   break;
                 }
 
-                return _context.abrupt("return", logger === null || logger === void 0 ? void 0 : logger.error({
+                return _context.abrupt("return", (logger === null || logger === void 0 ? void 0 : logger.error) && logger.error({
+                  E_CODE: 'RuntimeError',
                   E_MSG: 'cannot find container.'
                 }));
 
-              case 11:
-                _context.next = 13;
+              case 9:
+                _context.next = 11;
                 return App.mount(appRef.current, {
                   customProps: customProps
                 });
 
-              case 13:
+              case 11:
                 setApp(App);
 
-              case 14:
+              case 12:
               case "end":
                 return _context.stop();
             }
@@ -161,15 +160,21 @@ function createApplication(loader) {
       app.update(customProps);
     }
 
+    var dataAttrs = {
+      'data-id': version,
+      'data-version': version,
+      'data-loader': _version.version
+    };
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !app ? /*#__PURE__*/_react.default.createElement(_Loading.default, {
       loading: loading
-    }) : null, sandbox && sandbox.disableFakeBody ? /*#__PURE__*/_react.default.createElement(tagName, {
+    }) : null, sandbox && sandbox.disableFakeBody ? /*#__PURE__*/_react.default.createElement(tagName, _objectSpread({
       style: style,
       className: className,
-      ref: appRef,
-      dataId: name
-    }) : /*#__PURE__*/_react.default.createElement(tagName, {}, /*#__PURE__*/_react.default.createElement('div', {
       ref: appRef
+    }, dataAttrs)) : /*#__PURE__*/_react.default.createElement(tagName, _objectSpread({}, dataAttrs), /*#__PURE__*/_react.default.createElement('div', {
+      ref: appRef,
+      style: style,
+      className: className
     })));
   };
 }

package/lib/hooks/beforeLoadHook.js

@@ -19,6 +19,8 @@ var _alfaCore = require("@alicloud/alfa-core");
 
 var _getConsoleConfig = require("../utils/getConsoleConfig");
 
+var _getConsoleGlobal = require("../utils/getConsoleGlobal");
+
 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; }
@@ -30,7 +32,7 @@ function afterLoadHook(_x) {
 
 function _afterLoadHook() {
   _afterLoadHook = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(appConfig) {
-    var app, logger, defaultConsoleConfig, CONFIG_START_TIME, _yield$Promise$all$ca, _yield$Promise$all$ca2, consoleConfig, messages, CONFIG_END_TIME, i18nMessages, END_TIME;
+    var app, logger, defaultConsoleConfig, defaultConsoleGlobal, CONFIG_START_TIME, configData, _yield$Promise$all, _yield$Promise$all2, consoleConfig, consoleGlobal, messages, CONFIG_END_TIME, i18nMessages, END_TIME;
 
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) {
@@ -38,39 +40,41 @@ function _afterLoadHook() {
           case 0:
             app = appConfig.app, logger = appConfig.logger;
             defaultConsoleConfig = window.ALIYUN_CONSOLE_CONFIG || {};
+            defaultConsoleGlobal = window.ALIYUN_CONSOLE_GLOBAL || {};
             CONFIG_START_TIME = Date.now();
-            _context.next = 5;
-            return Promise.all([(0, _getConsoleConfig.getConsoleConfig)(appConfig, defaultConsoleConfig), (0, _alfaCore.getLocale)(appConfig)]).catch(function (e) {
-              logger === null || logger === void 0 ? void 0 : logger.error({
-                E_MSG: 'fetch config & locale error.',
-                E_STACK: e
-              });
-              return [{}, {}];
-            });
-
-          case 5:
-            _yield$Promise$all$ca = _context.sent;
-            _yield$Promise$all$ca2 = (0, _slicedToArray2.default)(_yield$Promise$all$ca, 2);
-            consoleConfig = _yield$Promise$all$ca2[0];
-            messages = _yield$Promise$all$ca2[1];
+            _context.next = 6;
+            return (0, _alfaCore.getConfig)(appConfig);
+
+          case 6:
+            configData = _context.sent;
+            _context.next = 9;
+            return Promise.all([(0, _getConsoleConfig.getConsoleConfig)(configData, defaultConsoleConfig), (0, _getConsoleGlobal.getConsoleGlobal)(configData, defaultConsoleGlobal), (0, _alfaCore.getLocale)(appConfig)]);
+
+          case 9:
+            _yield$Promise$all = _context.sent;
+            _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 3);
+            consoleConfig = _yield$Promise$all2[0];
+            consoleGlobal = _yield$Promise$all2[1];
+            messages = _yield$Promise$all2[2];
             CONFIG_END_TIME = Date.now();
-            i18nMessages = _objectSpread(_objectSpread({}, window.ALIYUN_CONSOLE_I18N_MESSAGE), messages);
+            i18nMessages = _objectSpread(_objectSpread({}, window.ALIYUN_CONSOLE_I18N_MESSAGE), messages); // inject global variables
 
             if (app && app.context) {
               app.context.window.ALIYUN_CONSOLE_CONFIG = consoleConfig;
-              app.context.window.ALIYUN_CONSOLE_I18N_MESSAGE = i18nMessages; // (app.context.history as any) = {};
+              app.context.window.ALIYUN_CONSOLE_GLOBAL = consoleGlobal;
+              app.context.window.ALIYUN_CONSOLE_I18N_MESSAGE = i18nMessages;
             }
 
             END_TIME = Date.now();
-            logger === null || logger === void 0 ? void 0 : logger.record({
+            (logger === null || logger === void 0 ? void 0 : logger.record) && logger.record({
               CONFIG_START_TIME: CONFIG_START_TIME,
               CONFIG_END_TIME: CONFIG_END_TIME,
               END_TIME: END_TIME
             });
-            logger === null || logger === void 0 ? void 0 : logger.send();
+            (logger === null || logger === void 0 ? void 0 : logger.send) && logger.send();
             return _context.abrupt("return", appConfig);
 
-          case 16:
+          case 21:
           case "end":
             return _context.stop();
         }