@alicloud/alfa-react 1.4.33 → 1.4.35

package/es/createAlfaApp.js

@@ -42,5 +42,17 @@ function createAlfaApp(option) {
     })));
   };
 }
+/**
+ * create memorized app in react function component, just create App after first mounted
+ * @param option
+ * @returns
+ */
 
+
+export function useAlfaApp(option) {
+  var App = useMemo(function () {
+    return createAlfaApp(option);
+  }, []);
+  return App;
+}
 export default createAlfaApp;

package/es/createAlfaWidget.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React from 'react';
+import React, { useMemo } from 'react';
 import { BaseLoader } from '@alicloud/alfa-core';
 import ErrorBoundary from './components/ErrorBoundary';
 import { createCWSWidget } from './widget';
@@ -69,5 +69,17 @@ function createAlfaWidget(option) {
     );
   };
 }
+/**
+ * create memorized app in react function component, just create App after first mounted
+ * @param option
+ * @returns
+ */
 
+
+export function useAlfaWidget(option) {
+  var App = useMemo(function () {
+    return createAlfaWidget(option);
+  }, []);
+  return App;
+}
 export default createAlfaWidget;

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 { countRegister } from './utils/counter';
 import { version as loaderVersion } from './version';
 
 var resolvePath = function resolvePath() {
@@ -52,8 +53,9 @@ var stripBasename = function stripBasename(path, basename) {
 
   var _basename = resolvePath(basename);
 
-  if (_path === _basename) return '/';
-  return _path.replace(new RegExp("^".concat(_basename), 'ig'), '');
+  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
@@ -102,6 +104,12 @@ export default function createApplication(loader) {
     var $syncHistory = useRef(syncHistory);
     var $basename = useRef(basename);
     var tagName = normalizeName(props.name);
+
+    var _useState5 = useState(''),
+        _useState6 = _slicedToArray(_useState5, 2),
+        releaseVersion = _useState6[0],
+        setReleaseVersion = _useState6[1];
+
     $syncHistory.current = syncHistory;
     $basename.current = basename;
     if (customProps.path) customProps.path = addLeftSlash(customProps.path); // 受控模式锁定一些参数
@@ -201,33 +209,36 @@ export default function createApplication(loader) {
       _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
         var _app$context$updateBo, _app$context, _app$context$baseFram;
 
-        var _yield$loader$registe, app, logger, _ref2, path, frameWindow;
+        var _yield$loader$registe, app, logger, realVersion, _ref2, path, frameWindow;
 
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                _context.next = 2;
+                countRegister(memoOptions.name);
+                _context.next = 3;
                 return loader.register(_objectSpread(_objectSpread({}, memoOptions), {}, {
                   container: memoOptions.container || appRef.current
                 }));
 
-              case 2:
+              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 = 8;
+                  _context.next = 11;
                   break;
                 }
 
                 return _context.abrupt("return");
 
-              case 8:
+              case 11:
                 if (app) {
-                  _context.next = 10;
+                  _context.next = 13;
                   break;
                 }
 
@@ -236,9 +247,9 @@ export default function createApplication(loader) {
                   E_MSG: 'load app failed.'
                 }));
 
-              case 10:
+              case 13:
                 if (appRef.current) {
-                  _context.next = 12;
+                  _context.next = 15;
                   break;
                 }
 
@@ -247,7 +258,7 @@ export default function createApplication(loader) {
                   E_MSG: 'cannot find container.'
                 }));
 
-              case 12:
+              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;
@@ -292,12 +303,12 @@ export default function createApplication(loader) {
                   }
                 }
 
-                _context.next = 18;
+                _context.next = 21;
                 return app.mount(appRef.current, {
                   customProps: customProps
                 });
 
-              case 18:
+              case 21:
                 if (frameWindow) {
                   // 每次挂载后主动触发子应用内的 popstate 事件，借此触发 react-router history 的检查逻辑
                   dispatchFramePopstate();
@@ -306,7 +317,7 @@ export default function createApplication(loader) {
 
                 setAppInstance(app);
 
-              case 20:
+              case 23:
               case "end":
                 return _context.stop();
             }
@@ -343,8 +354,12 @@ export default function createApplication(loader) {
 
     var dataAttrs = {
       'data-id': name,
-      'data-version': version,
-      'data-loader': loaderVersion
+      // 加载器版本
+      'data-loader': loaderVersion,
+      // 请求版本
+      'data-request-version': version || 'latest',
+      // 实际线上版本
+      'data-release-version': releaseVersion
     };
     return /*#__PURE__*/React.createElement(React.Fragment, null, !appInstance ? /*#__PURE__*/React.createElement(Loading, {
       loading: loading

package/es/index.js

@@ -1,5 +1,5 @@
-export { default as createAlfaApp } from './createAlfaApp';
-export { default as createAlfaWidget } from './createAlfaWidget';
+export { default as createAlfaApp, useAlfaApp } from './createAlfaApp';
+export { default as createAlfaWidget, useAlfaWidget } from './createAlfaWidget';
 export { eventEmitter as widgetEventEmitter } from './widget/index';
 export { default as addGlobalRequestInterceptor } from './addGlobalRequestInterceptor'; // todo
 

package/es/utils/counter.js

@@ -0,0 +1,18 @@
+var lastApp;
+var lastTime = 0;
+var min = 1000;
+/**
+ * 计算初始化次数，并提示重复加载的应用
+ * @param appId string
+ */
+
+export var countRegister = function countRegister(appId) {
+  var nowTime = Date.now();
+
+  if (lastApp === appId && lastTime && nowTime - lastTime < min) {
+    console.warn("[@alicloud/alfa-react] ".concat(appId, " \u91CD\u590D\u52A0\u8F7D\uFF0C\u8BF7\u68C0\u67E5\u4F60\u7684\u4EE3\u7801\u3002\u8BF7\u5728\u51FD\u6570\u7EC4\u4EF6\u4E2D\u4F7F\u7528 useAlfaApp \u6216 useAlfaWidget \u65B9\u6CD5\u3002"));
+  }
+
+  lastApp = appId;
+  lastTime = nowTime;
+};

package/es/version.js

@@ -1 +1 @@
-export var version = '1.4.33';
+export var version = '1.4.35';

package/lib/createAlfaApp.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+exports.useAlfaApp = useAlfaApp;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -65,6 +66,19 @@ function createAlfaApp(option) {
     })));
   };
 }
+/**
+ * create memorized app in react function component, just create App after first mounted
+ * @param option
+ * @returns
+ */
+
+
+function useAlfaApp(option) {
+  var App = (0, _react.useMemo)(function () {
+    return createAlfaApp(option);
+  }, []);
+  return App;
+}
 
 var _default = createAlfaApp;
 exports.default = _default;

package/lib/createAlfaWidget.js

@@ -2,10 +2,13 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+exports.useAlfaWidget = useAlfaWidget;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -13,7 +16,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _alfaCore = require("@alicloud/alfa-core");
 
@@ -27,6 +30,10 @@ var _beforeResolveHook = _interopRequireDefault(require("./hooks/beforeResolveHo
 
 var _beforeLoadHook = _interopRequireDefault(require("./hooks/beforeLoadHook"));
 
+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; }
+
 var loader = _alfaCore.BaseLoader.create();
 
 loader.beforeResolve.use(_beforeResolveHook.default);
@@ -89,6 +96,19 @@ function createAlfaWidget(option) {
     );
   };
 }
+/**
+ * create memorized app in react function component, just create App after first mounted
+ * @param option
+ * @returns
+ */
+
+
+function useAlfaWidget(option) {
+  var App = (0, _react.useMemo)(function () {
+    return createAlfaWidget(option);
+  }, []);
+  return App;
+}
 
 var _default = createAlfaWidget;
 exports.default = _default;

package/lib/createApplication.js

@@ -25,6 +25,8 @@ 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); }
@@ -74,8 +76,9 @@ var stripBasename = function stripBasename(path, basename) {
 
   var _basename = resolvePath(basename);
 
-  if (_path === _basename) return '/';
-  return _path.replace(new RegExp("^".concat(_basename), 'ig'), '');
+  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
@@ -124,6 +127,12 @@ function createApplication(loader) {
     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];
+
     $syncHistory.current = syncHistory;
     $basename.current = basename;
     if (customProps.path) customProps.path = addLeftSlash(customProps.path); // 受控模式锁定一些参数
@@ -222,33 +231,36 @@ function createApplication(loader) {
       (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
         var _app$context$updateBo, _app$context, _app$context$baseFram;
 
-        var _yield$loader$registe, app, logger, _ref2, path, frameWindow;
+        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:
-                _context.next = 2;
+                (0, _counter.countRegister)(memoOptions.name);
+                _context.next = 3;
                 return loader.register(_objectSpread(_objectSpread({}, memoOptions), {}, {
                   container: memoOptions.container || appRef.current
                 }));
 
-              case 2:
+              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 = 8;
+                  _context.next = 11;
                   break;
                 }
 
                 return _context.abrupt("return");
 
-              case 8:
+              case 11:
                 if (app) {
-                  _context.next = 10;
+                  _context.next = 13;
                   break;
                 }
 
@@ -257,9 +269,9 @@ function createApplication(loader) {
                   E_MSG: 'load app failed.'
                 }));
 
-              case 10:
+              case 13:
                 if (appRef.current) {
-                  _context.next = 12;
+                  _context.next = 15;
                   break;
                 }
 
@@ -268,7 +280,7 @@ function createApplication(loader) {
                   E_MSG: 'cannot find container.'
                 }));
 
-              case 12:
+              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;
@@ -313,12 +325,12 @@ function createApplication(loader) {
                   }
                 }
 
-                _context.next = 18;
+                _context.next = 21;
                 return app.mount(appRef.current, {
                   customProps: customProps
                 });
 
-              case 18:
+              case 21:
                 if (frameWindow) {
                   // 每次挂载后主动触发子应用内的 popstate 事件，借此触发 react-router history 的检查逻辑
                   dispatchFramePopstate();
@@ -327,7 +339,7 @@ function createApplication(loader) {
 
                 setAppInstance(app);
 
-              case 20:
+              case 23:
               case "end":
                 return _context.stop();
             }
@@ -363,8 +375,12 @@ function createApplication(loader) {
 
     var dataAttrs = {
       'data-id': name,
-      'data-version': version,
-      'data-loader': _version.version
+      // 加载器版本
+      'data-loader': _version.version,
+      // 请求版本
+      'data-request-version': version || 'latest',
+      // 实际线上版本
+      'data-release-version': releaseVersion
     };
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !appInstance ? /*#__PURE__*/_react.default.createElement(_Loading.default, {
       loading: loading

package/lib/index.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -35,6 +37,18 @@ Object.defineProperty(exports, "prefetch", {
     return _alfaCore.prefetch;
   }
 });
+Object.defineProperty(exports, "useAlfaApp", {
+  enumerable: true,
+  get: function get() {
+    return _createAlfaApp.useAlfaApp;
+  }
+});
+Object.defineProperty(exports, "useAlfaWidget", {
+  enumerable: true,
+  get: function get() {
+    return _createAlfaWidget.useAlfaWidget;
+  }
+});
 Object.defineProperty(exports, "widgetEventEmitter", {
   enumerable: true,
   get: function get() {
@@ -42,12 +56,16 @@ Object.defineProperty(exports, "widgetEventEmitter", {
   }
 });
 
-var _createAlfaApp = _interopRequireDefault(require("./createAlfaApp"));
+var _createAlfaApp = _interopRequireWildcard(require("./createAlfaApp"));
 
-var _createAlfaWidget = _interopRequireDefault(require("./createAlfaWidget"));
+var _createAlfaWidget = _interopRequireWildcard(require("./createAlfaWidget"));
 
 var _index = require("./widget/index");
 
 var _addGlobalRequestInterceptor = _interopRequireDefault(require("./addGlobalRequestInterceptor"));
 
-var _alfaCore = require("@alicloud/alfa-core");
+var _alfaCore = require("@alicloud/alfa-core");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/utils/counter.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.countRegister = void 0;
+var lastApp;
+var lastTime = 0;
+var min = 1000;
+/**
+ * 计算初始化次数，并提示重复加载的应用
+ * @param appId string
+ */
+
+var countRegister = function countRegister(appId) {
+  var nowTime = Date.now();
+
+  if (lastApp === appId && lastTime && nowTime - lastTime < min) {
+    console.warn("[@alicloud/alfa-react] ".concat(appId, " \u91CD\u590D\u52A0\u8F7D\uFF0C\u8BF7\u68C0\u67E5\u4F60\u7684\u4EE3\u7801\u3002\u8BF7\u5728\u51FD\u6570\u7EC4\u4EF6\u4E2D\u4F7F\u7528 useAlfaApp \u6216 useAlfaWidget \u65B9\u6CD5\u3002"));
+  }
+
+  lastApp = appId;
+  lastTime = nowTime;
+};
+
+exports.countRegister = countRegister;

package/lib/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/alfa-react",
-  "version": "1.4.33",
+  "version": "1.4.35",
   "description": "Alfa Framework (React Version)",
   "main": "lib/index.js",
   "module": "es/index.js",

package/types/createAlfaApp.d.ts

@@ -11,4 +11,10 @@ interface IProps {
     path?: string;
 }
 declare function createAlfaApp<P = any>(option: AlfaFactoryOption): (() => null) | ((props: P & IProps) => JSX.Element);
+/**
+ * create memorized app in react function component, just create App after first mounted
+ * @param option
+ * @returns
+ */
+export declare function useAlfaApp<P = any>(option: AlfaFactoryOption): (() => null) | ((props: P & IProps) => JSX.Element);
 export default createAlfaApp;

package/types/createAlfaWidget.d.ts

@@ -1,4 +1,10 @@
 /// <reference types="react" />
 import { AlfaFactoryOption } from './types';
 declare function createAlfaWidget<P = any>(option: AlfaFactoryOption): ((props: P) => JSX.Element) | (() => null);
+/**
+ * create memorized app in react function component, just create App after first mounted
+ * @param option
+ * @returns
+ */
+export declare function useAlfaWidget<P = any>(option: AlfaFactoryOption): ((props: P) => JSX.Element) | (() => null);
 export default createAlfaWidget;

package/types/index.d.ts

@@ -1,5 +1,5 @@
-export { default as createAlfaApp } from './createAlfaApp';
-export { default as createAlfaWidget } from './createAlfaWidget';
+export { default as createAlfaApp, useAlfaApp } from './createAlfaApp';
+export { default as createAlfaWidget, useAlfaWidget } from './createAlfaWidget';
 export { eventEmitter as widgetEventEmitter } from './widget/index';
 export { default as addGlobalRequestInterceptor } from './addGlobalRequestInterceptor';
 export { createEventBus, prefetch } from '@alicloud/alfa-core';

package/types/utils/counter.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 计算初始化次数，并提示重复加载的应用
+ * @param appId string
+ */
+export declare const countRegister: (appId: string) => void;

package/types/version.d.ts

@@ -1 +1 @@
-export declare const version = "1.4.33";
+export declare const version = "1.4.35";