Release: 2.8.0

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 See [https://github.com/ice-lab/icestark/releases](https://github.com/ice-lab/icestark/releases) for what has changed in each version of icestark.
 
+## 2.8.0
+
+- [fix] When icestark unloads, avoid re-triggering 'unloadMicroApp'. ([#521](https://github.com/ice-lab/icestark/issues/521))
+
 ## 2.7.5
 
 - [fix] avoid to set undefined url when state change.
@@ -93,6 +97,7 @@ See [https://github.com/ice-lab/icestark/releases](https://github.com/ice-lab/ic
 ## 2.2.1
 
 - [fix] css assets are unable to load when remove `umd` from sub-application.
+
 ## 2.2.0
 
 - [feat] no need to use `umd` anymore. Migrate to `loadScriptMode` or use `setLibraryName` in sub-application. ([#240](https://github.com/ice-lab/icestark/issues/240))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "icestark-monorepo",
-  "version": "2.7.3",
+  "version": "2.8.0",
   "private": true,
   "description": "Icestark is a JavaScript library for multiple projects, Ice workbench solution.",
   "scripts": {

packages/icestark/__tests__/AppRouter.spec.tsx

@@ -6,6 +6,7 @@ import { getCache, setCache } from '../src/util/cache';
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { AppRouter, AppRoute } from '../src/index';
+import { getMicroApps } from '../src/apps';
 
 const delay = (milliscond: number) => new Promise(resolve => setTimeout(resolve, milliscond));
 
@@ -145,4 +146,60 @@ describe('AppRouter', () => {
 
     unmount();
   })
-})
+
+  test('app-cached', async () => {
+    (fetch as FetchMock).mockResponseOnce(umdSourceWithSetLibrary.toString());
+    const { container, unmount } = render(
+      <AppRouter>
+        <AppRoute
+          loadScriptMode="fetch"
+          cached
+          name="seller"
+          path="/seller"
+          title="小二"
+          url={[
+            '//icestark.com/index.js'
+          ]}
+        />
+      </AppRouter>
+    );
+    window.history.pushState({}, 'test', '/seller');
+
+    await delay(1000);
+    expect(container.innerHTML).toContain('商家平台')
+
+    window.history.pushState({}, 'test', '/waiter');
+    await delay(1000);
+
+    const app = getMicroApps().find(app => app.name === 'seller');
+    expect(app.status).toEqual('UNMOUNTED');
+    expect(!!app.mount).toBeTruthy();
+    expect(!!app.unmount).toBeTruthy();
+
+    unmount();
+  })
+
+  test('app-className-custom', async () => {
+    (fetch as FetchMock).mockResponseOnce(umdSourceWithSetLibrary.toString());
+    const { container, unmount } = render(
+      <AppRouter className="ice-app-router-custom">
+        <AppRoute
+          loadScriptMode="fetch"
+          name="seller"
+          path="/seller"
+          title="小二"
+          url={[
+            '//icestark.com/index.js'
+          ]}
+        />
+      </AppRouter>
+    );
+
+    window.history.pushState({}, 'test', '/seller');
+    await delay(1000);
+
+    expect(container.querySelector('.ice-app-router-custom')).toBeTruthy();
+
+    unmount();
+  })
+})

packages/icestark/__tests__/app.spec.tsx

@@ -117,5 +117,38 @@ describe('app start', () => {
 
     const errorApp = await createMicroApp('app-error');
     expect(errorApp).toBe(null);
-  })
-});
+  });
+
+  test('window.microApps should be equal to insider microApps', async () => {
+    let status = '';
+    registerMicroApps([
+      {
+        name: 'app7',
+        activePath: '/testapp',
+        url: ['//icestark.com/index.js'],
+        mount: () => {
+          status = MOUNTED;
+        },
+        unmount: () => {
+          status = UNMOUNTED;
+        },
+      } as AppConfig,
+    ]);
+    window.history.pushState({}, 'test', '/testapp');
+    const findMicroAppByName = (microApps, name) => microApps.filter(d => d.name === name)[0];
+    await mountMicroApp('app7');
+    expect(status).toBe(MOUNTED);
+    expect(findMicroAppByName(getMicroApps(), 'app7').status).toEqual(findMicroAppByName((window as any).microApps, 'app7').status);
+    expect(findMicroAppByName(getMicroApps(), 'app7').status).toEqual(status);
+
+    await unmountMicroApp('app7');
+    expect(status).toBe(UNMOUNTED);
+    expect(findMicroAppByName(getMicroApps(), 'app7').status).toEqual(findMicroAppByName((window as any).microApps, 'app7').status);
+    expect(findMicroAppByName(getMicroApps(), 'app7').status).toEqual(status);
+
+    await createMicroApp('app7');
+    expect(status).toBe(MOUNTED);
+    expect(findMicroAppByName(getMicroApps(), 'app7').status).toEqual(findMicroAppByName((window as any).microApps, 'app7').status);
+    expect(findMicroAppByName(getMicroApps(), 'app7').status).toEqual(status);
+  });
+});

packages/icestark/__tests__/handleAssets.spec.tsx

@@ -649,12 +649,13 @@ describe('appendCSS', () => {
     const div = document.createElement('div');
 
     appendCSS(
-      div,
       {
         type: AssetTypeEnum.EXTERNAL,
         content: '/test.css'
-      },
-      'icestark-css-0'
+      },{
+        root: div,
+        id: 'icestark-css-0'
+      }
     )
       .then(() => {
         expect(div.innerHTML).toContain('id="icestark-css-0"');
@@ -671,10 +672,13 @@ describe('appendCSS', () => {
   test('appendCSS -> style', () => {
     const div = document.createElement('div');
     const style = '.test { color: #fff;}';
-    appendCSS(div, {
+    appendCSS({
       type: AssetTypeEnum.INLINE,
       content: style,
-    }, 'icestark-css-0')
+    }, {
+      root: div,
+      id: 'icestark-css-0'
+    })
       .then(() => {
         expect(div.innerHTML).toContain('id="icestark-css-0"');
         expect(div.innerHTML).toContain(style);
@@ -694,12 +698,14 @@ describe('appendCSS', () => {
     const div = document.createElement('div');
 
     appendCSS(
-      div,
       {
         type: AssetTypeEnum.EXTERNAL,
         content: '/test.css'
       },
-      'icestark-css-0'
+      {
+        root: div,
+        id: 'icestark-css-0'
+      }
     )
       .then(() => {
         expect(div.innerHTML).toContain('id="icestark-css-0"');

packages/icestark/package.json

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

packages/icestark/src/AppRoute.tsx

@@ -1,9 +1,13 @@
 import * as React from 'react';
 import renderComponent from './util/renderComponent';
 import { AppHistory } from './appHistory';
-import { unloadMicroApp, BaseConfig, createMicroApp } from './apps';
+import { unloadMicroApp, unmountMicroApp, BaseConfig, createMicroApp } from './apps';
 import { converArray2String } from './util/helpers';
-import { callCapturedEventListeners, resetCapturedEventListeners } from './util/capturedListeners';
+import { started } from './start';
+import {
+  callCapturedEventListeners,
+  resetCapturedEventListeners,
+} from './util/capturedListeners';
 import isEqual from 'lodash.isequal';
 
 import type { PathData } from './util/checkActive';
@@ -136,6 +140,7 @@ export default class AppRoute extends React.Component<AppRouteProps, AppRouteSta
 
   mountApp = () => {
     resetCapturedEventListeners();
+
     const { onAppEnter } = this.props;
 
     // Trigger app enter
@@ -151,15 +156,15 @@ export default class AppRoute extends React.Component<AppRouteProps, AppRouteSta
   };
 
   unmountApp = () => {
-    const { name, onAppLeave } = this.props;
+    const { name, onAppLeave, cached } = this.props;
 
     // Trigger app leave
     if (typeof onAppLeave === 'function') {
       onAppLeave(genCompatibleAppConfig(this.props));
     }
 
-    if (!this.validateRender()) {
-      unloadMicroApp(name);
+    if (!this.validateRender() && started) {
+      cached ? unmountMicroApp(name) : unloadMicroApp(name);
     }
   };
 

packages/icestark/src/AppRouter.tsx

@@ -35,6 +35,7 @@ export interface AppRouterProps {
   basename?: string;
   fetch?: Fetch;
   prefetch?: Prefetch;
+  className?: string;
 }
 
 interface AppRouterState {
@@ -195,6 +196,7 @@ export default class AppRouter extends React.Component<AppRouterProps, AppRouter
       LoadingComponent,
       children,
       basename: frameworkBasename,
+      className,
     } = this.props;
     const { url, appLoading, started } = this.state;
 
@@ -249,7 +251,7 @@ export default class AppRouter extends React.Component<AppRouterProps, AppRouter
         history: appHistory,
       };
       return (
-        <div>
+        <div className={className}>
           {appLoading === this.appKey ? renderComponent(LoadingComponent, {}) : null}
           {React.cloneElement(element, {
             key: this.appKey,