@alicloud/alfa-react 1.3.0-alpha.1 → 1.3.0-canary.11

package/lib/app.js

@@ -31,14 +31,16 @@ var _alfaCore = require("@alicloud/alfa-core");
 
 var _Loading = _interopRequireDefault(require("./components/Loading"));
 
-var _types = require("./types");
-
 var _ErrorBoundary = _interopRequireDefault(require("./components/ErrorBoundary"));
 
-var _getConsoleConfig = require("./utils/getConsoleConfig");
+var _getConsoleConfig = require("./app/getConsoleConfig");
+
+var _createIsomorphicMicroApp = require("./app/createIsomorphicMicroApp");
 
 var _utils = require("./utils");
 
+var _types = require("./types");
+
 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; }
@@ -55,8 +57,10 @@ var getProps = function getProps(props) {
   delete parcelProps.loading;
   delete parcelProps.entry;
   delete parcelProps.container;
-  delete parcelProps.logger;
-  delete parcelProps.env;
+  delete parcelProps.logger; // @ts-ignore
+
+  delete parcelProps.env; // @ts-ignore
+
   delete parcelProps.dependencies;
   return parcelProps;
 };
@@ -67,8 +71,7 @@ var Application = function Application(props) {
       loading = props.loading,
       style = props.style,
       className = props.className,
-      consoleConfig = props.consoleConfig,
-      i18nMessages = props.i18nMessages;
+      consoleConfig = props.consoleConfig;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -83,7 +86,7 @@ var Application = function Application(props) {
   var appRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-      var App;
+      var app;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
@@ -97,35 +100,27 @@ var Application = function Application(props) {
               });
 
             case 2:
-              App = _context.sent;
+              app = _context.sent;
 
-              if (App.context && App.context) {
-                App.context.window.ALIYUN_CONSOLE_CONFIG = consoleConfig;
-                App.context.window.ALIYUN_CONSOLE_I18N_MESSAGE = i18nMessages;
+              if (app.context && app.context.baseFrame) {
+                // @ts-ignore
+                app.context.baseFrame.contentWindow.ALIYUN_CONSOLE_CONFIG = consoleConfig;
               }
 
               _context.next = 6;
-              return App.load();
+              return app.load();
 
             case 6:
-              if (appRef.current) {
-                _context.next = 8;
-                break;
-              }
-
-              return _context.abrupt("return");
-
-            case 8:
-              _context.next = 10;
-              return App.mount(appRef.current, {
+              _context.next = 8;
+              return app.mount(appRef.current, {
                 customProps: getProps(props)
               });
 
-            case 10:
+            case 8:
               setMounted(true);
-              setApp(App);
+              setApp(app);
 
-            case 12:
+            case 10:
             case "end":
               return _context.stop();
           }
@@ -142,23 +137,31 @@ var Application = function Application(props) {
   }
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !mounted && /*#__PURE__*/_react.default.createElement(_Loading.default, {
+    microAppContainer: name,
     loading: loading
   }), sandbox && sandbox !== true && sandbox.disableFakeBody ? /*#__PURE__*/_react.default.createElement(name, {
     style: style,
     className: className,
     ref: appRef,
     dataId: name
-  }) : /*#__PURE__*/_react.default.createElement(name, {}, /*#__PURE__*/_react.default.createElement('div', {
-    ref: appRef
-  })));
+  }) : /*#__PURE__*/_react.default.createElement(name, {
+    children: /*#__PURE__*/_react.default.createElement('div', {
+      ref: appRef
+    })
+  }));
 };
 
 function createAlfaApp(option) {
   var name = option.name,
       loading = option.loading,
       manifest = option.manifest;
+
+  if ((0, _utils.isSSR)()) {
+    return (0, _createIsomorphicMicroApp.createIsomorphicAlfaApp)(option);
+  }
+
   var AlfaApp = /*#__PURE__*/(0, _react.lazy)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-    var resolvedManifest, consoleConfig, messages, i18nMessages, App;
+    var resolvedManifest, consoleConfig, AlfaApp;
     return _regenerator.default.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
@@ -177,34 +180,35 @@ function createAlfaApp(option) {
             resolvedManifest = _context2.sent;
 
           case 5:
+            // @ts-ignore
             consoleConfig = window.ALIYUN_CONSOLE_CONFIG || {};
-            _context2.next = 8;
+
+            if (!option.dynamicConfig) {
+              _context2.next = 10;
+              break;
+            }
+
+            _context2.next = 9;
             return (0, _getConsoleConfig.getConsoleConfig)(option, consoleConfig);
 
-          case 8:
+          case 9:
             consoleConfig = _context2.sent;
-            _context2.next = 11;
-            return (0, _alfaCore.getLocale)(option);
-
-          case 11:
-            messages = _context2.sent;
-            i18nMessages = _objectSpread(_objectSpread({}, window.ALIYUN_CONSOLE_I18N_MESSAGE), messages);
 
-            App = function App(props) {
+          case 10:
+            AlfaApp = function AlfaApp(props) {
               return /*#__PURE__*/_react.default.createElement(Application, (0, _extends2.default)({
                 manifest: resolvedManifest
               }, props, {
                 name: (0, _utils.normalizeName)(name),
-                consoleConfig: consoleConfig,
-                i18nMessages: i18nMessages
+                consoleConfig: consoleConfig
               }));
             };
 
             return _context2.abrupt("return", {
-              default: App
+              default: AlfaApp
             });
 
-          case 15:
+          case 12:
           case "end":
             return _context2.stop();
         }
@@ -214,6 +218,7 @@ function createAlfaApp(option) {
   return function (props) {
     return /*#__PURE__*/_react.default.createElement(_ErrorBoundary.default, props, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
       fallback: /*#__PURE__*/_react.default.createElement(_Loading.default, {
+        microAppContainer: (0, _utils.normalizeName)(name),
         loading: loading
       })
     }, /*#__PURE__*/_react.default.createElement(AlfaApp, (0, _extends2.default)({}, option, {

package/lib/base.d.ts

@@ -1,11 +1,8 @@
 import React, { HTMLAttributes } from 'react';
-import { IAppConfig, IOptions, AlfaEnvEnum } from '@alicloud/alfa-core';
+import { IAppConfig, IOptions } from '@alicloud/alfa-core';
 export interface IProps<T = any> extends HTMLAttributes<Element>, IAppConfig, IOptions {
     loading?: boolean | React.ReactChild;
     consoleConfig?: any;
-    i18nMessages?: any;
-    env?: AlfaEnvEnum;
-    dependencies?: any;
 }
 export default class MicroAppBase<T> extends React.Component<Partial<IProps<T>>> {
 }

package/lib/components/ErrorBoundary/index.js

@@ -63,6 +63,7 @@ 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) && window.__bl.error(error, errorInfo);
       }
 
+      console.error(error);
       this.props.appDidCatch && this.props.appDidCatch(error);
     }
   }, {

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

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

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

@@ -1,4 +1,7 @@
 import React from 'react';
-export default function getLoading({ loading }: {
+interface IProps {
     loading?: boolean | React.ReactChild;
-}): JSX.Element | null;
+    microAppContainer?: string;
+}
+export default function getLoading({ loading, microAppContainer }: IProps): JSX.Element | null;
+export {};

package/lib/components/Loading/index.js

@@ -11,8 +11,25 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Skeleton = _interopRequireDefault(require("./Skeleton"));
 
+var initialPath = window.location.pathname;
+
 function getLoading(_ref) {
-  var loading = _ref.loading;
+  var loading = _ref.loading,
+      microAppContainer = _ref.microAppContainer;
+
+  // 第一次如果是 ssr 出来的内容直接拿 ssr 的内容作为骨架做展示
+  // 防止出现首屏抖动
+  if (microAppContainer) {
+    var node = document.querySelector(microAppContainer); //@ts-ignore
+
+    if (initialPath === window.location.pathname && window.__isSSR) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        dangerouslySetInnerHTML: {
+          __html: node ? node.innerHTML : ''
+        }
+      });
+    }
+  }
 
   if (loading === false) {
     return null;

package/lib/context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IIsomorphicEnvironment } from '@alicloud/alfa-core';
+/**
+ * 用来提供 ssr 状态下的获取 服务端 manifest & bundle 的实现
+ */
+declare const EnvContext: import("react").Context<Partial<IIsomorphicEnvironment>>;
+export default EnvContext;

package/lib/context.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+/**
+ * 用来提供 ssr 状态下的获取 服务端 manifest & bundle 的实现
+ */
+var EnvContext = /*#__PURE__*/(0, _react.createContext)({});
+var _default = EnvContext;
+exports.default = _default;

package/lib/index.d.ts

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

package/lib/index.js

@@ -1,20 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "createAlfaApp", {
   enumerable: true,
   get: function get() {
-    return _createAlfaApp.default;
+    return _app.createAlfaApp;
   }
 });
 Object.defineProperty(exports, "createAlfaWidget", {
   enumerable: true,
   get: function get() {
-    return _createAlfaWidget.default;
+    return _widget.createAlfaWidget;
   }
 });
 Object.defineProperty(exports, "createEventBus", {
@@ -36,9 +34,9 @@ Object.defineProperty(exports, "widgetEventEmitter", {
   }
 });
 
-var _createAlfaApp = _interopRequireDefault(require("./createAlfaApp"));
+var _widget = require("./widget");
 
-var _createAlfaWidget = _interopRequireDefault(require("./createAlfaWidget"));
+var _app = require("./app");
 
 var _index = require("./widget/index");
 

package/lib/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'React';
-import { createMicroApp, IAppConfig } from '@alicloud/alfa-core';
+import { createMicroApp, IOptions } from '@alicloud/alfa-core';
 export interface AlfaVersion {
     entry: string;
 }
@@ -10,18 +10,20 @@ export interface AlfaReleaseConfig {
     'dist-tag': Record<string, string>;
 }
 export declare type EnvEnum = 'prod' | 'local' | 'pre' | 'daily';
-export interface AlfaFactoryOption extends IAppConfig {
+export interface AlfaFactoryOption extends IOptions {
+    name: string;
+    version?: string;
     loading?: boolean | React.ReactChild;
+    env?: EnvEnum;
+    url?: string;
+    manifest?: string;
     dependencies?: Record<string, any>;
     dynamicConfig?: boolean;
-    className?: string;
-    style?: Record<string, any>;
 }
 declare type OmitKeys = 'manifest';
 export interface WidgetFactoryOption extends Omit<AlfaFactoryOption, OmitKeys> {
     runtimeVersion?: string;
     alfaLoader?: boolean;
-    theme?: string;
 }
 export interface AlfaEnvConfigDescriptor {
     releaseUrl: string;

package/lib/utils.d.ts

@@ -1 +1,2 @@
 export declare const normalizeName: (name: string) => string;
+export declare const isSSR: () => boolean;

package/lib/utils.js

@@ -3,10 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.normalizeName = void 0;
+exports.normalizeName = exports.isSSR = void 0;
 
 var normalizeName = function normalizeName(name) {
   return name.replace(/@/g, '').replace(/\//g, '-');
 };
 
-exports.normalizeName = normalizeName;
+exports.normalizeName = normalizeName;
+
+var isSSR = function isSSR() {
+  return typeof document === 'undefined';
+};
+
+exports.isSSR = isSSR;

package/lib/widget/emitter.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="node" />
 import { EventEmitter } from 'events';
 declare class WidgetEventEmitter extends EventEmitter {
+    constructor();
     refersh(widgetId: string): boolean;
     refershWidget(widgetId: string): boolean;
 }

package/lib/widget/emitter.js

@@ -30,13 +30,13 @@ var WidgetEventEmitter = /*#__PURE__*/function (_EventEmitter) {
 
   function WidgetEventEmitter() {
     (0, _classCallCheck2.default)(this, WidgetEventEmitter);
-    return _super.apply(this, arguments);
-  }
+    return _super.call(this);
+  } // Compatible with the old api, this may get removed at sometime later.
+
 
   (0, _createClass2.default)(WidgetEventEmitter, [{
     key: "refersh",
-    value: // Compatible with the old api, this may get removed at sometime later.
-    function refersh(widgetId) {
+    value: function refersh(widgetId) {
       return this.emit("".concat(widgetId, ":REFRESH"));
     }
   }, {

package/lib/widget/getWidgetConfigById.js

@@ -27,25 +27,26 @@ var getWidgetConfigById = /*#__PURE__*/function () {
         switch (_context.prev = _context.next) {
           case 0:
             env = _env.ENV[option.env || (0, _env.getConsoleEnv)()];
+            console.log(env.configUrl);
 
             if (cachedConfig[option.name]) {
-              _context.next = 6;
+              _context.next = 7;
               break;
             }
 
-            _context.next = 4;
+            _context.next = 5;
             return _axios.default.get((0, _template.default)(env.configUrl)({
               id: option.name
             }));
 
-          case 4:
+          case 5:
             resp = _context.sent;
             cachedConfig[option.name] = resp.data;
 
-          case 6:
+          case 7:
             return _context.abrupt("return", cachedConfig[option.name]);
 
-          case 7:
+          case 8:
           case "end":
             return _context.stop();
         }

package/lib/widget/getWidgetDeps.js

@@ -57,7 +57,7 @@ var createWidget = function createWidget(option) {
 
     var id = _ref.id,
         version = _ref.version;
-    return (0, _widget.createCWSWidget)({
+    return (0, _widget.createAlfaWidget)({
       name: id,
       version: version,
       dependencies: option === null || option === void 0 ? void 0 : option.dependencies,
@@ -185,7 +185,7 @@ var getWidgetDeps = /*#__PURE__*/function () {
               react: _react.default,
               'react-dom': _reactDom.default,
               'prop-types': propTypes,
-              axios: _axios.default
+              'axios': _axios.default
             }, cachedRuntime[version].default), {}, (_objectSpread2 = {}, (0, _defineProperty2.default)(_objectSpread2, WIDGET_UTILS_PKG_NAME, injectedWidgetUtils), (0, _defineProperty2.default)(_objectSpread2, '@ali/widget-utils-config', injectedWidgetUtils), (0, _defineProperty2.default)(_objectSpread2, '@ali/widget-loader', createWidget), _objectSpread2)));
 
           case 31:

package/lib/widget.d.ts

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

package/lib/widget.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createCWSWidget = createCWSWidget;
+exports.createAlfaWidget = createAlfaWidget;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -37,7 +37,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function createCWSWidget(option) {
+function createAlfaWidget(option) {
   var AlfaWidget = /*#__PURE__*/(0, _react.lazy)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
     var url, config, _yield$getWidgetVersi, version, entryUrl, deps;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/alfa-react",
-  "version": "1.3.0-alpha.1",
+  "version": "1.3.0-canary.11",
   "description": "Alfa Framework (React Version)",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -9,7 +9,7 @@
   "license": "MIT",
   "scripts": {
     "start": "breezr start-storybook",
-    "prepublish": "npm run build && npm run babel && npm run babel:esm",
+    "prepublish": "npm run clean && npm run build && npm run babel && npm run babel:esm",
     "babel": "breezr build --engine babel && tsc --emitDeclarationOnly -d --declarationDir ./lib",
     "babel:esm": "breezr build --engine babel --es-module",
     "build": "breezr build --engine webpack",
@@ -19,14 +19,11 @@
     "access": "public"
   },
   "devDependencies": {
-    "@ali/home-widget-runtime": "^1.1.6",
     "@alicloud/console-toolkit-cli": "^1.0.0",
     "@alicloud/console-toolkit-preset-wind-component": "^1.0.0",
     "@types/chai": "^4.1.7",
     "@types/classnames": "^2.2.9",
-    "@types/crypto-js": "^4.0.2",
     "@types/jest": "^23.3.13",
-    "@types/lodash": "^4.14.176",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@types/single-spa-react": "^2.8.3",
@@ -38,14 +35,13 @@
     "typescript": "^3.0.3"
   },
   "dependencies": {
-    "@alicloud/alfa-core": "^1.3.0-alpha.3",
-    "@alicloud/console-os-loader": "^1.2.3",
+    "@alicloud/alfa-core": "1.3.0-canary.7",
+    "@alicloud/console-os-loader": "1.3.0-canary.5",
     "@alicloud/widget-utils-console": "^0.1.6",
-    "classnames": "^2.2.6",
-    "crypto-js": "^4.1.1"
+    "classnames": "^2.2.6"
   },
   "peerDependencies": {
     "react": "^16 | ^17"
   },
-  "gitHead": "43925181e0a3e489559b7ab1bb6c68e59e00d58e"
+  "gitHead": "92b51c833b6fd5aa584c0bbbab6470a79c96f8c4"
 }

package/es/utils/checkOptions.js

@@ -1,13 +0,0 @@
-// import { AlfaFactoryOption } from '@alicloud/alfa-core';
-// enum Type {
-//   app = 'app',
-//   widget = 'widget'
-// }
-// const getType = (name: string): Type => {
-//   return Type.app;
-// };
-// const checkOptions = <T extends AlfaFactoryOption>(option: T, type: Type): T => {
-//   const { name } = option;
-//   const type = get
-// };
-// export default checkOptions;

package/lib/createAlfaApp.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { AlfaFactoryOption } from './types';
-declare function createAlfaApp<P = any>(option: AlfaFactoryOption): (() => null) | React.MemoExoticComponent<(props: P) => JSX.Element>;
-export default createAlfaApp;