Repository: ice-lab/icestark
Pull request #622 (2022-10-08 09:33:57)

AppRouter support className and fix window.microApps not equal to insider microApps variable
## AppRouter support className
The `AppRouter` component will render an empty div to mount children, but can't add `className` to allow custom style.

## fix window.microApps
`window.microApps` assign to `microApps` variable, [https://github.com/ice-lab/icestark/blob/master/packages/icestark/src/apps.ts#L103](https://github.com/ice-lab/icestark/blob/master/packages/icestark/src/apps.ts#L103)
but `updateAppConfig` function called, `microApps` variable will reassign to new Array and window.microApps will not equal any more. [https://github.com/ice-lab/icestark/blob/master/packages/icestark/src/apps.ts#L160](https://github.com/ice-lab/icestark/blob/master/packages/icestark/src/apps.ts#L160)


wisdomofgod: 邮件已收到~~
ClarkXia: 冲突处理下
coffeedeveloper: 已解决冲突
maoxiaoke: LGTM


Patch:
diff --git a/packages/icestark/src/AppRouter.tsx b/packages/icestark/src/AppRouter.tsx
index 3294dec..97ade80 100644
--- a/packages/icestark/src/AppRouter.tsx
+++ b/packages/icestark/src/AppRouter.tsx
@@ -35,6 +35,7 @@ export interface AppRouterProps {
   basename?: string;
   fetch?: Fetch;
   prefetch?: Prefetch;
+  className?: string;
 }
 
 interface AppRouterState {
@@ -194,6 +195,7 @@ export default class AppRouter extends React.Component<AppRouterProps, AppRouter
       LoadingComponent,
       children,
       basename: frameworkBasename,
+      className,
     } = this.props;
     const { url, appLoading, started } = this.state;
 
@@ -247,7 +249,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,
diff --git a/packages/icestark/src/apps.ts b/packages/icestark/src/apps.ts
index 0acc5b7..511ce77 100644
--- a/packages/icestark/src/apps.ts
+++ b/packages/icestark/src/apps.ts
@@ -159,7 +159,7 @@ export function getAppConfig(appName: string) {
 }
 
 export function updateAppConfig(appName: string, config) {
-  microApps = microApps.map((microApp) => {
+  (window as any).microApps = microApps = microApps.map((microApp) => {
     if (microApp.name === appName) {
       return {
         ...microApp,


Test patch:
diff --git a/packages/icestark/__tests__/AppRouter.spec.tsx b/packages/icestark/__tests__/AppRouter.spec.tsx
index 69d52c0..954c875 100644
--- a/packages/icestark/__tests__/AppRouter.spec.tsx
+++ b/packages/icestark/__tests__/AppRouter.spec.tsx
@@ -178,4 +178,28 @@ describe('AppRouter', () => {
 
     unmount();
   })
-})
\ No newline at end of file
+
+  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();
+  })
+})
diff --git a/packages/icestark/__tests__/app.spec.tsx b/packages/icestark/__tests__/app.spec.tsx
index 6a07343..089cdbf 100644
--- a/packages/icestark/__tests__/app.spec.tsx
+++ b/packages/icestark/__tests__/app.spec.tsx
@@ -117,5 +117,38 @@ describe('app start', () => {
 
     const errorApp = await createMicroApp('app-error');
     expect(errorApp).toBe(null);
-  })
-});
\ No newline at end of file
+  });
+
+  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);
+  });
+});