[WIP] Release 2.7.6

packages/icestark-app/src/index.ts

@@ -1,5 +1,5 @@
 export { default as getMountNode } from './getMountNode';
-export { default as renderNotFound } from './renderNotFound';
+export { default as renderError, renderNotFound } from './renderError';
 export { default as getBasename } from './getBasename';
 export { default as setBasename } from './setBasename';
 export { default as registerAppEnter } from './registerAppEnter';

packages/icestark-app/src/renderNotFound.ts → packages/icestark-app/src/renderError.ts

@@ -1,31 +1,44 @@
-import { getCache } from './cache';
-
-/**
- * CustomEvent Polyfill for IE
- */
-(function () {
-  if (typeof (window as any).CustomEvent === 'function') return false;
-
-  function CustomEvent(event, params) {
-    params = params || { bubbles: false, cancelable: false, detail: null };
-    const evt = document.createEvent('CustomEvent');
-    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-    return evt;
-  }
-
-  (window as any).CustomEvent = CustomEvent;
-})();
-
-/**
- * Trigger customEvent icestark:not-found
- */
-export default () => {
-  if (getCache('root')) {
-    window.dispatchEvent(new CustomEvent('icestark:not-found'));
-
-    // Compatible processing return renderNotFound();
-    return null;
-  }
-
-  return 'Current sub-application is running independently';
-};
+import { getCache } from './cache';
+
+/**
+ * CustomEvent Polyfill for IE
+ */
+(function () {
+  if (typeof (window as any).CustomEvent === 'function') return false;
+
+  function CustomEvent(event, params) {
+    params = params || { bubbles: false, cancelable: false, detail: null };
+    const evt = document.createEvent('CustomEvent');
+    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+    return evt;
+  }
+
+  (window as any).CustomEvent = CustomEvent;
+})();
+
+/**
+ * Trigger customEvent icestark:error
+ */
+export default (error) => {
+  if (getCache('root')) {
+    window.dispatchEvent(new CustomEvent('icestark:error', { bubbles: false, cancelable: false, detail: error }));
+    // Compatible processing return renderError();
+    return null;
+  }
+
+  return 'Current sub-application is running independently';
+};
+
+/**
+ * Trigger customEvent icestark:not-found
+ */
+export const renderNotFound = () => {
+  if (getCache('root')) {
+    window.dispatchEvent(new CustomEvent('icestark:not-found'));
+
+    // Compatible processing return renderNotFound();
+    return null;
+  }
+
+  return 'Current sub-application is running independently';
+};

packages/icestark/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/stark",
-  "version": "2.7.5",
+  "version": "2.7.6",
   "description": "Icestark is a JavaScript library for multiple projects, Ice workbench solution.",
   "scripts": {
     "build": "rm -rf lib && tsc",

packages/icestark/src/AppRoute.tsx

@@ -146,7 +146,8 @@ export default class AppRoute extends React.Component<AppRouteProps, AppRouteSta
     if (this.validateRender()) {
       this.setState({ showComponent: true });
     } else {
-      this.renderChild();
+      // 使用requestIdleCallback渲染子应用，可避免在预加载场景下，因executeScript中的eval函数执行js脚本，而导致的进程阻塞及页面卡顿
+      window.requestIdleCallback(() => this.renderChild());
     }
   };
 

packages/icestark/src/AppRouter.tsx

@@ -47,7 +47,9 @@ export default class AppRouter extends React.Component<AppRouterProps, AppRouter
   static defaultProps = {
     onRouteChange: () => {},
     // eslint-disable-next-line react/jsx-filename-extension
-    ErrorComponent: ({ err }: { err: string | Error}) => <div>{ typeof err === 'string' ? err : err?.message }</div>,
+    ErrorComponent: ({ err }: { err: string | Error }) => (
+      <div>{typeof err === 'string' ? err : err?.message}</div>
+    ),
     LoadingComponent: <div>Loading...</div>,
     NotFoundComponent: <div>NotFound</div>,
     onAppEnter: () => {},
@@ -84,16 +86,17 @@ export default class AppRouter extends React.Component<AppRouterProps, AppRouter
   componentDidMount() {
     // render NotFoundComponent eventListener
     window.addEventListener('icestark:not-found', this.triggerNotFound);
+    window.addEventListener('icestark:error', this.errorEventHandler);
 
     /** lifecycle `componentWillUnmount` of pre-rendering executes later then
      * `constructor` and `componentWilllMount` of next-rendering, whereas `start` should be invoked before `unload`.
      * status `started` used to make sure parent's `componentDidMount` to be invoked eariler then child's,
      * for mounting child component needs global configuration be settled.
      */
-    const { shouldAssetsRemove, onAppEnter, onAppLeave, fetch, basename } = this.props;
+    const { shouldAssetsRemove, onAppLeave, fetch, basename } = this.props;
     start({
       onAppLeave,
-      onAppEnter,
+      onAppEnter: this.appEnter,
       onLoadingApp: this.loadingApp,
       onFinishLoading: this.finishLoading,
       onError: this.triggerError,
@@ -109,6 +112,7 @@ export default class AppRouter extends React.Component<AppRouterProps, AppRouter
   componentWillUnmount() {
     this.unmounted = true;
     window.removeEventListener('icestark:not-found', this.triggerNotFound);
+    window.removeEventListener('icestark:error', this.errorEventHandler);
     unload();
     this.setState({ started: false });
   }
@@ -130,7 +134,7 @@ export default class AppRouter extends React.Component<AppRouterProps, AppRouter
               ...childElement.props,
               /**
                * name of AppRoute may be not provided, use `path` instead.
-              */
+               */
               name: name || converArray2String(path),
             };
           }
@@ -154,6 +158,13 @@ export default class AppRouter extends React.Component<AppRouterProps, AppRouter
     this.setState({ url: ICESTSRK_ERROR });
   };
 
+  /**
+   * error event handler
+   */
+  errorEventHandler = (e: CustomEvent): void => {
+    this.triggerError(e.detail);
+  };
+
   triggerNotFound = (): void => {
     // if AppRouter is unmounted, cancel all operations
     if (this.unmounted) return;
@@ -173,6 +184,14 @@ export default class AppRouter extends React.Component<AppRouterProps, AppRouter
     }
   };
 
+  appEnter = (app: AppConfig) => {
+    this.props.onAppEnter(app);
+    if (this.props.prefetch) {
+      // 预加载场景需要将loading提升，否则会由于脚本阻塞进程，导致loading失效
+      this.setState({ appLoading: app.name });
+    }
+  };
+
   loadingApp = (app: AppConfig) => {
     if (this.unmounted) return;
     this.props.onLoadingApp(app);
@@ -256,7 +275,7 @@ export default class AppRouter extends React.Component<AppRouterProps, AppRouter
             name: this.appKey,
             componentProps,
             cssLoading: appLoading === this.appKey,
-            onAppEnter: this.props.onAppEnter,
+            onAppEnter: this.appEnter,
             onAppLeave: this.props.onAppLeave,
           })}
         </div>