4369122e-57f5-418b-8ef8-b36c31d3e121

Committed 07 Apr 2024 02:27AM UTC coverage: 92.582% (-0.6%) from 93.157%

Build # 4369122e-57f5-418b-8ef8-b36c31d3e121

Build Type

Pull #326

circleci

Committed by

lswl66

Commit Message

fix: fix review

Pull Request Pull Request #326: feat: support render portal component #INFR-12018

Run Details

260 of 294 branches covered (88.44%)

Branch coverage included in aggregate %.

10 of 14 new or added lines in 3 files covered. (71.43%)

6 existing lines in 2 files now uncovered.

701 of 744 relevant lines covered (94.22%)

19.1 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

96.01

/packages/planet/src/application/planet-application-loader.ts

import { ApplicationRef, Injectable, Injector, NgZone, signal } from '@angular/core';
import { Router } from '@angular/router';
import { Observable, Subject, forkJoin, from, of } from 'rxjs';
import { catchError, distinctUntilChanged, filter, map, share, switchMap, take, tap } from 'rxjs/operators';
import { AssetsLoader } from '../assets-loader';
import { createDebug } from '../debug';
import { GlobalEventDispatcher } from '../global-event-dispatcher';
import { getApplicationLoader, getPlanetApplicationRef, globalPlanet } from '../global-planet';
import { coerceArray, createElementByTemplate, getHTMLElement } from '../helpers';
import { PlanetApplication, PlanetOptions, PlanetRouterEvent, SwitchModes } from '../planet.class';
import { PlanetApplicationRef } from './planet-application-ref';
import { PlanetApplicationService } from './planet-application.service';
import { PlanetPortalApplication } from './portal-application';
const debug = createDebug('app-loader');

export enum ApplicationStatus {
    assetsLoading = 1,
    assetsLoaded = 2,
    bootstrapping = 3,
    bootstrapped = 4,
    active = 5,
    loadError = 10
}

export interface AppsLoadingStartEvent {
    shouldLoadApps: PlanetApplication[];
    shouldUnloadApps: PlanetApplication[];
}

export interface AppStatusChangeEvent {
    app: PlanetApplication;
    status: ApplicationStatus;
}

@Injectable({
    providedIn: 'root'
})
export class PlanetApplicationLoader {
    private firstLoad = true;

    private startRouteChangeEvent!: PlanetRouterEvent;

    private options: PlanetOptions;

    private inProgressAppAssetsLoads = new Map<string, Observable<PlanetApplication>>();

    private appsStatus = new Map<PlanetApplication, ApplicationStatus>();

    private portalApp = new PlanetPortalApplication();

    private routeChange$ = new Subject<PlanetRouterEvent>();

    private appStatusChange$ = new Subject<AppStatusChangeEvent>();

    private appsLoadingStart$ = new Subject<AppsLoadingStartEvent>();

    private innerLoading = signal(false);

    public get appStatusChange(): Observable<AppStatusChangeEvent> {
        return this.appStatusChange$.asObservable();
    }

    public get appsLoadingStart(): Observable<AppsLoadingStartEvent> {
        return this.appsLoadingStart$.asObservable();
    }

    /**
     * @deprecated please use loading signal
     */
    public loadingDone = false;

    public loading = this.innerLoading.asReadonly();

    constructor(
        private assetsLoader: AssetsLoader,
        private planetApplicationService: PlanetApplicationService,
        private ngZone: NgZone,
        router: Router,
        injector: Injector,
        applicationRef: ApplicationRef
    ) {
        if (getApplicationLoader()) {
            throw new Error('PlanetApplicationLoader has been injected in the portal, repeated injection is not allowed');
        }

        this.options = {
            switchMode: SwitchModes.default,
            errorHandler: (error: Error) => {
                console.error(error);
            }
        };
        this.portalApp.ngZone = ngZone;
        this.portalApp.applicationRef = applicationRef;
        this.portalApp.router = router;
        this.portalApp.injector = injector;
        this.portalApp.name = 'portal';
        this.portalApp.globalEventDispatcher = injector.get(GlobalEventDispatcher);
        globalPlanet.portalApplication = this.portalApp;
        this.setupRouteChange();
    }

    private setAppStatus(app: PlanetApplication, status: ApplicationStatus) {
        this.ngZone.run(() => {
            const fromStatus = this.appsStatus.get(app);
            debug(
                `app(${app.name}) status change: ${fromStatus ? ApplicationStatus[fromStatus] : 'empty'} => ${ApplicationStatus[status]}`
            );
            this.appsStatus.set(app, status);
            this.appStatusChange$.next({
                app: app,
                status: status
            });
        });
    }

    private getAppStatusChange$(app: PlanetApplication, status = ApplicationStatus.bootstrapped): Observable<PlanetApplication> {
        return this.appStatusChange.pipe(
            filter(event => {
                return event.app === app && event.status === status;
            }),
            map(() => {
                return app;
            })
        );
    }

    private switchModeIsCoexist(app: PlanetApplication) {
        if (app && app.switchMode) {
            return app.switchMode === SwitchModes.coexist;
        } else {
            return this.options.switchMode === SwitchModes.coexist;
        }
    }

    private errorHandler(error: Error) {
        this.ngZone.run(() => {
            this.options.errorHandler(error);
        });
    }

    private setLoadingDone() {
        this.ngZone.run(() => {
            this.loadingDone = true;
            this.innerLoading.set(false);
        });
    }

    private getAppNames(apps: PlanetApplication[]): string | string[] {
        return apps.length === 0
            ? `[]`
            : apps.map(item => {
                  return item.name;
              });
    }

    private setupRouteChange() {
        this.routeChange$
            .pipe(
                distinctUntilChanged((x, y) => {
                    return (x && x.url) === (y && y.url);
                }),
                // Using switchMap so we cancel executing loading when a new one comes in
                switchMap(event => {
                    // Return new observable use of and catchError,
                    // in order to prevent routeChange$ completed which never trigger new route change
                    return of(event).pipe(
                        // unload apps and return should load apps
                        map(() => {
                            debug(`route change, url is: ${event.url}`);
                            this.startRouteChangeEvent = event;
                            const shouldLoadApps = this.planetApplicationService.getAppsByMatchedUrl(event.url);
                            debug(`should load apps: ${this.getAppNames(shouldLoadApps)}`);
                            const shouldUnloadApps = this.getUnloadApps(shouldLoadApps);
                            this.appsLoadingStart$.next({
                                shouldLoadApps,
                                shouldUnloadApps
                            });
                            this.unloadApps(shouldUnloadApps, event);
                            debug(`unload apps: ${this.getAppNames(shouldUnloadApps)}`);
                            return shouldLoadApps;
                        }),
                        // Load app assets (static resources)
                        switchMap(shouldLoadApps => {
                            let hasAppsNeedLoadingAssets = false;
                            const loadApps$ = shouldLoadApps.map(app => {
                                const appStatus = this.appsStatus.get(app);
                                if (
                                    !appStatus ||
                                    appStatus === ApplicationStatus.assetsLoading ||
                                    appStatus === ApplicationStatus.loadError
                                ) {
                                    debug(
                                        `app(${app.name}) status is ${ApplicationStatus[appStatus as ApplicationStatus]}, start load assets`
                                    );
                                    hasAppsNeedLoadingAssets = true;
                                    return this.ngZone.runOutsideAngular(() => {
                                        return this.startLoadAppAssets(app);
                                    });
                                } else {
                                    return of(app);
                                }
                            });
                            if (hasAppsNeedLoadingAssets) {
                                this.loadingDone = false;
                                this.innerLoading.set(true);
                            }
                            return loadApps$.length > 0 ? forkJoin(loadApps$) : of([] as PlanetApplication[]);
                        }),
                        // Bootstrap or show apps
                        map(apps => {
                            const apps$: Observable<PlanetApplication>[] = apps.map(app => {
                                return of(app).pipe(
                                    switchMap(app => {
                                        const appStatus = this.appsStatus.get(app);
                                        if (appStatus === ApplicationStatus.bootstrapped) {
                                            debug(`[routeChange] app(${app.name}) status is bootstrapped, show app and active`);
                                            this.showApp(app);
                                            const appRef = getPlanetApplicationRef(app.name);
                                            appRef?.navigateByUrl(event.url);
                                            this.setAppStatus(app, ApplicationStatus.active);
                                            this.setLoadingDone();
                                            return of(app);
                                        } else if (appStatus === ApplicationStatus.assetsLoaded) {
                                            debug(`[routeChange] app(${app.name}) status is assetsLoaded, start bootstrapping`);
                                            return this.bootstrapApp(app).pipe(
                                                map(() => {
                                                    debug(`app(${app.name}) bootstrapped success, active it`);
                                                    this.setAppStatus(app, ApplicationStatus.active);
                                                    this.setLoadingDone();
                                                    return app;
                                                })
                                            );
                                        } else if (appStatus === ApplicationStatus.active) {
                                            debug(`[routeChange] app(${app.name}) is active, do nothings`);
                                            const appRef = getPlanetApplicationRef(app.name);
                                            // Backwards compatibility sub app use old version which has not getCurrentRouterStateUrl
                                            const currentUrl = appRef?.getCurrentRouterStateUrl ? appRef.getCurrentRouterStateUrl() : '';
                                            if (currentUrl !== event.url) {
                                                appRef?.navigateByUrl(event.url);
                                            }
                                            return of(app);
                                        } else {
                                            debug(
                                                `[routeChange] app(${app.name}) status is ${
                                                    ApplicationStatus[appStatus as ApplicationStatus]
                                                }`
                                            );
                                            return this.getAppStatusChange$(app).pipe(
                                                take(1),
                                                map(() => {
                                                    debug(`app(${app.name}) status is bootstrapped by subscribe status change, active it`);
                                                    this.setAppStatus(app, ApplicationStatus.active);
                                                    this.showApp(app);
                                                    return app;
                                                })
                                            );
                                        }
                                    })
                                );
                            });

                            if (apps$.length > 0) {
                                debug(`start load and active apps: ${this.getAppNames(apps)}`);
                                // 切换到应用后会有闪烁现象，所以使用 setTimeout 后启动应用
                                // example: redirect to app1's dashboard from portal's about page
                                // If app's route has redirect, it doesn't work, it ok just in setTimeout, I don't know why.
                                // TODO:: remove it, it is ok in version Angular 9.x
                                setTimeout(() => {
                                    // 此处判断是因为如果静态资源加载完毕还未启动被取消，还是会启动之前的应用，虽然可能性比较小，但是无法排除这种可能性，所以只有当 Event 是最后一个才会启动
                                    if (this.startRouteChangeEvent === event) {
                                        // runOutsideAngular for fix error: `Expected to not be in Angular Zone, but it is!`
                                        this.ngZone.runOutsideAngular(() => {
                                            forkJoin(apps$).subscribe(() => {
                                                this.setLoadingDone();
                                                this.ensurePreloadApps(apps);
                                            });
                                        });
                                    }
                                });
                            } else {
                                debug(`no apps need to be loaded, ensure preload apps`);
                                this.ensurePreloadApps(apps);
                                this.setLoadingDone();
                            }
                        }),
                        // Error handler
                        catchError(error => {
                            debug(`apps loader error: ${error}`);
                            this.errorHandler(error);
                            return [];
                        })
                    );
                })
            )
            .subscribe();
    }

    private startLoadAppAssets(app: PlanetApplication): Observable<PlanetApplication> {
        if (this.inProgressAppAssetsLoads.get(app.name)) {
            return this.inProgressAppAssetsLoads.get(app.name);
        } else {
            const loadApp$ = this.assetsLoader.loadAppAssets(app).pipe(
                tap(() => {
                    this.inProgressAppAssetsLoads.delete(app.name);
                    this.setAppStatus(app, ApplicationStatus.assetsLoaded);
                }),
                map(() => {
                    return app;
                }),
                catchError(error => {
                    this.inProgressAppAssetsLoads.delete(app.name);
                    this.setAppStatus(app, ApplicationStatus.loadError);
                    throw error;
                }),
                share()
            );
            this.inProgressAppAssetsLoads.set(app.name, loadApp$);
            this.setAppStatus(app, ApplicationStatus.assetsLoading);
            return loadApp$;
        }
    }

    private hideApp(planetApp: PlanetApplication) {
        const appRef = getPlanetApplicationRef(planetApp.name);
        const appRootElement = document.querySelector(appRef?.selector || (planetApp.selector as string));
        if (appRootElement) {
            appRootElement.setAttribute('style', 'display:none;');
        }
    }

    private showApp(planetApp: PlanetApplication) {
        const appRef = getPlanetApplicationRef(planetApp.name);
        const appRootElement = document.querySelector(appRef?.selector || (planetApp.selector as string));
        if (appRootElement) {
            appRootElement.setAttribute('style', '');
        }
    }

    private destroyApp(planetApp: PlanetApplication) {
        const appRef = getPlanetApplicationRef(planetApp.name);
        if (appRef) {
            appRef.destroy();
        }
        const container = getHTMLElement(planetApp.hostParent);
        const appRootElement = container?.querySelector((appRef && appRef.selector) || (planetApp.selector as string));
        if (appRootElement) {
            container?.removeChild(appRootElement);
        }
    }

    private bootstrapApp(app: PlanetApplication, defaultStatus: 'hidden' | 'display' = 'display'): Observable<PlanetApplicationRef> {
        debug(`app(${app.name}) start bootstrapping`);
        this.setAppStatus(app, ApplicationStatus.bootstrapping);
        const appRef = getPlanetApplicationRef(app.name);
        if (appRef && appRef.bootstrap) {
            const container = getHTMLElement(app.hostParent);
            let appRootElement: HTMLElement;
            if (container) {
                appRootElement = container.querySelector(appRef.selector || app.selector!)!;
                if (!appRootElement) {
                    if (appRef.template) {
                        appRootElement = createElementByTemplate(appRef.template)!;
                    } else {
                        appRootElement = document.createElement(app.selector!);
                    }
                    appRootElement.setAttribute('style', 'display:none;');
                    if (app.hostClass) {
                        appRootElement.classList.add(...coerceArray(app.hostClass));
                    }
                    if (app.stylePrefix) {
                        appRootElement.classList.add(...coerceArray(app.stylePrefix));
                    }
                    container.appendChild(appRootElement);
                }
            }
            let result = appRef.bootstrap(this.portalApp);
            // Backwards compatibility promise for bootstrap
            if ((result as any)['then']) {
                result = from(result) as Observable<PlanetApplicationRef>;
            }
            return result.pipe(
                tap(() => {
                    debug(`app(${app.name}) bootstrapped success for ${defaultStatus}`);
                    this.setAppStatus(app, ApplicationStatus.bootstrapped);
                    if (defaultStatus === 'display' && appRootElement) {
                        appRootElement.removeAttribute('style');
                    }
                }),
                map(() => {
                    return appRef;
                })
            );
        } else {
            throw new Error(
                `[${app.name}] not found, make sure that the app has the correct name defined use defineApplication(${app.name}) and runtimeChunk and vendorChunk are set to true, details see https://github.com/worktile/ngx-planet#throw-error-cannot-read-property-call-of-undefined-at-__webpack_require__-bootstrap79`
            );
        }
    }

    private getUnloadApps(activeApps: PlanetApplication[]) {
        const unloadApps: PlanetApplication[] = [];
        this.appsStatus.forEach((value, app) => {
            if (value === ApplicationStatus.active && !activeApps.find(item => item.name === app.name)) {
                unloadApps.push(app);
            }
        });
        return unloadApps;
    }

    private unloadApps(shouldUnloadApps: PlanetApplication[], event: PlanetRouterEvent) {
        const hideApps: PlanetApplication[] = [];
        const destroyApps: PlanetApplication[] = [];
        shouldUnloadApps.forEach(app => {
            if (this.switchModeIsCoexist(app)) {
                debug(`hide app(${app.name}) for coexist mode`);
                hideApps.push(app);
                this.hideApp(app);
                this.setAppStatus(app, ApplicationStatus.bootstrapped);
            } else {
                destroyApps.push(app);
                // 销毁之前先隐藏，否则会出现闪烁，因为 destroy 是延迟执行的
                // 如果销毁不延迟执行，会出现切换到主应用的时候会有视图卡顿现象
                this.hideApp(app);
                this.setAppStatus(app, ApplicationStatus.assetsLoaded);
            }
        });

        if (hideApps.length > 0 || destroyApps.length > 0) {
            // 从其他应用切换到主应用的时候会有视图卡顿现象，所以先等主应用渲染完毕后再加载其他应用
            // 此处尝试使用 this.ngZone.onStable.pipe(take(1)) 应用之间的切换会出现闪烁
            setTimeout(() => {
                hideApps.forEach(app => {
                    const appRef = getPlanetApplicationRef(app.name);
                    if (appRef) {
                        appRef.navigateByUrl(event.url);
                    }
                });
                destroyApps.forEach(app => {
                    debug(`destroy app(${app.name})`);
                    this.destroyApp(app);
                });
            });
        }
    }

    private preloadApps(activeApps?: PlanetApplication[]) {
        setTimeout(() => {
            const toPreloadApps = this.planetApplicationService.getAppsToPreload(
                activeApps ? activeApps.map(item => item.name) : undefined
            );
            debug(`start preload apps: ${this.getAppNames(toPreloadApps)}`);
            const loadApps$ = toPreloadApps.map(preloadApp => {
                return this.preloadInternal(preloadApp);
            });

            forkJoin(loadApps$).subscribe({
                error: error => {
                    this.errorHandler(error);
                }
            });
        });
    }

    private ensurePreloadApps(activeApps?: PlanetApplication[]) {
        // Start preload apps
        // Start preload when first time app loaded
        if (this.firstLoad) {
            this.preloadApps(activeApps);
            this.firstLoad = false;
        }
    }

    public setOptions(options: Partial<PlanetOptions>) {
        this.options = {
            ...this.options,
            ...options
        };
    }

    /**
     * reset route by current router
     */
    public reroute(event: PlanetRouterEvent) {
        this.routeChange$.next(event);
    }

    private preloadInternal(app: PlanetApplication, immediate?: boolean): Observable<PlanetApplicationRef | null> {
        const status = this.appsStatus.get(app);
        if (!status || status === ApplicationStatus.loadError) {
            debug(`preload app(${app.name}), status is empty, start to load assets`);
            return this.startLoadAppAssets(app).pipe(
                switchMap(() => {
                    debug(`preload app(${app.name}), assets loaded, start bootstrap app, immediate: ${!!immediate}`);
                    if (immediate) {
                        return this.bootstrapApp(app, 'hidden');
                    } else {
                        return this.ngZone.runOutsideAngular(() => {
                            return this.bootstrapApp(app, 'hidden');
                        });
                    }
                }),
                catchError(error => {
                    this.errorHandler(error);
                    return of(null);
                }),
                map(() => {
                    return getPlanetApplicationRef(app.name);
                })
            );
        } else if ([ApplicationStatus.assetsLoading, ApplicationStatus.assetsLoaded, ApplicationStatus.bootstrapping].includes(status)) {
            debug(`preload app(${app.name}), status is ${ApplicationStatus[status]}, return until bootstrapped`);
            return this.getAppStatusChange$(app).pipe(
                take(1),
                map(() => {
                    return getPlanetApplicationRef(app.name);
                })
            );
        } else {
            const appRef = getPlanetApplicationRef(app.name);
            if (!appRef) {
                throw new Error(`${app.name}'s status is ${ApplicationStatus[status]}, planetApplicationRef is null.`);
            }
            return of(appRef);
        }
    }

    /**
     * Preload planet application
     * @param app app
     * @param immediate bootstrap on stable by default, setting immediate is true, it will bootstrap immediate
     */
    public preload(app: PlanetApplication, immediate?: boolean): Observable<PlanetApplicationRef> {
        return this.preloadInternal(app, immediate);
    }
}

1	import { ApplicationRef, Injectable, Injector, NgZone, signal } from '@angular/core';
2	import { Router } from '@angular/router';
3	import { Observable, Subject, forkJoin, from, of } from 'rxjs';
4	import { catchError, distinctUntilChanged, filter, map, share, switchMap, take, tap } from 'rxjs/operators';
5	import { AssetsLoader } from '../assets-loader';
6	import { createDebug } from '../debug';
7	import { GlobalEventDispatcher } from '../global-event-dispatcher';
8	import { getApplicationLoader, getPlanetApplicationRef, globalPlanet } from '../global-planet';
9	import { coerceArray, createElementByTemplate, getHTMLElement } from '../helpers';
10	import { PlanetApplication, PlanetOptions, PlanetRouterEvent, SwitchModes } from '../planet.class';
11	import { PlanetApplicationRef } from './planet-application-ref';
12	import { PlanetApplicationService } from './planet-application.service';
13	import { PlanetPortalApplication } from './portal-application';
14	const debug = createDebug('app-loader');	1✔
15
16	export enum ApplicationStatus {	1✔
17	assetsLoading = 1,	1✔
18	assetsLoaded = 2,	1✔
19	bootstrapping = 3,	1✔
20	bootstrapped = 4,	1✔
21	active = 5,	1✔
22	loadError = 10	1✔
23	}
24
25	export interface AppsLoadingStartEvent {
26	shouldLoadApps: PlanetApplication[];
27	shouldUnloadApps: PlanetApplication[];
28	}
29
30	export interface AppStatusChangeEvent {
31	app: PlanetApplication;
32	status: ApplicationStatus;
33	}
34
35	@Injectable({
36	providedIn: 'root'
37	})
38	export class PlanetApplicationLoader {	1✔
39	private firstLoad = true;	50✔
40
41	private startRouteChangeEvent!: PlanetRouterEvent;
42
43	private options: PlanetOptions;
44
45	private inProgressAppAssetsLoads = new Map<string, Observable<PlanetApplication>>();	50✔
46
47	private appsStatus = new Map<PlanetApplication, ApplicationStatus>();	50✔
48
49	private portalApp = new PlanetPortalApplication();	50✔
50
51	private routeChange$ = new Subject<PlanetRouterEvent>();	50✔
52
53	private appStatusChange$ = new Subject<AppStatusChangeEvent>();	50✔
54
55	private appsLoadingStart$ = new Subject<AppsLoadingStartEvent>();	50✔
56
57	private innerLoading = signal(false);	50✔
58
59	public get appStatusChange(): Observable<AppStatusChangeEvent> {
60	return this.appStatusChange$.asObservable();	22✔
61	}
62
63	public get appsLoadingStart(): Observable<AppsLoadingStartEvent> {
64	return this.appsLoadingStart$.asObservable();	6✔
65	}
66
67	/**
68	* @deprecated please use loading signal
69	*/
70	public loadingDone = false;	50✔
71
72	public loading = this.innerLoading.asReadonly();	50✔
73
74	constructor(
75	private assetsLoader: AssetsLoader,	50✔
76	private planetApplicationService: PlanetApplicationService,	50✔
77	private ngZone: NgZone,	50✔
78	router: Router,
79	injector: Injector,
80	applicationRef: ApplicationRef
81	) {
82	if (getApplicationLoader()) {	50✔
83	throw new Error('PlanetApplicationLoader has been injected in the portal, repeated injection is not allowed');	1✔
84	}
85
86	this.options = {	49✔
87	switchMode: SwitchModes.default,
88	errorHandler: (error: Error) => {
89	console.error(error);	2✔
90	}
91	};
92	this.portalApp.ngZone = ngZone;	49✔
93	this.portalApp.applicationRef = applicationRef;	49✔
94	this.portalApp.router = router;	49✔
95	this.portalApp.injector = injector;	49✔
96	this.portalApp.name = 'portal';	49✔
97	this.portalApp.globalEventDispatcher = injector.get(GlobalEventDispatcher);	49✔
98	globalPlanet.portalApplication = this.portalApp;	49✔
99	this.setupRouteChange();	49✔
100	}
101
102	private setAppStatus(app: PlanetApplication, status: ApplicationStatus) {
103	this.ngZone.run(() => {	129✔
104	const fromStatus = this.appsStatus.get(app);	129✔
105	debug(	129✔
106	`app(${app.name}) status change: ${fromStatus ? ApplicationStatus[fromStatus] : 'empty'} => ${ApplicationStatus[status]}`	129✔
107	);
108	this.appsStatus.set(app, status);	129✔
109	this.appStatusChange$.next({	129✔
110	app: app,
111	status: status
112	});
113	});
114	}
115
116	private getAppStatusChange$(app: PlanetApplication, status = ApplicationStatus.bootstrapped): Observable<PlanetApplication> {	4✔
117	return this.appStatusChange.pipe(	4✔
118	filter(event => {
119	return event.app === app && event.status === status;	5✔
120	}),
121	map(() => {
122	return app;	4✔
123	})
124	);
125	}
126
127	private switchModeIsCoexist(app: PlanetApplication) {
128	if (app && app.switchMode) {	7✔
129	return app.switchMode === SwitchModes.coexist;	5✔
130	} else {
131	return this.options.switchMode === SwitchModes.coexist;	2✔
132	}
133	}
134
135	private errorHandler(error: Error) {
136	this.ngZone.run(() => {	6✔
137	this.options.errorHandler(error);	6✔
138	});
139	}
140
141	private setLoadingDone() {
142	this.ngZone.run(() => {	44✔
143	this.loadingDone = true;	44✔
144	this.innerLoading.set(false);	44✔
145	});
146	}
147
148	private getAppNames(apps: PlanetApplication[]): string \| string[] {
149	return apps.length === 0	116✔
150	? `[]`
151	: apps.map(item => {
152	return item.name;	65✔
153	});
154	}
155
156	private setupRouteChange() {
157	this.routeChange$	49✔
158	.pipe(
159	distinctUntilChanged((x, y) => {
160	return (x && x.url) === (y && y.url);	16✔
161	}),
162	// Using switchMap so we cancel executing loading when a new one comes in
163	switchMap(event => {
164	// Return new observable use of and catchError,
165	// in order to prevent routeChange$ completed which never trigger new route change
166	return of(event).pipe(	37✔
167	// unload apps and return should load apps
168	map(() => {
169	debug(`route change, url is: ${event.url}`);	37✔
170	this.startRouteChangeEvent = event;	37✔
171	const shouldLoadApps = this.planetApplicationService.getAppsByMatchedUrl(event.url);	37✔
172	debug(`should load apps: ${this.getAppNames(shouldLoadApps)}`);	37✔
173	const shouldUnloadApps = this.getUnloadApps(shouldLoadApps);	37✔
174	this.appsLoadingStart$.next({	37✔
175	shouldLoadApps,
176	shouldUnloadApps
177	});
178	this.unloadApps(shouldUnloadApps, event);	37✔
179	debug(`unload apps: ${this.getAppNames(shouldUnloadApps)}`);	37✔
180	return shouldLoadApps;	37✔
181	}),
182	// Load app assets (static resources)
183	switchMap(shouldLoadApps => {
184	let hasAppsNeedLoadingAssets = false;	37✔
185	const loadApps$ = shouldLoadApps.map(app => {	37✔
186	const appStatus = this.appsStatus.get(app);	32✔
187	if (	32✔
188	!appStatus \|\|	48✔
189	appStatus === ApplicationStatus.assetsLoading \|\|
190	appStatus === ApplicationStatus.loadError
191	) {
192	debug(	25✔
193	`app(${app.name}) status is ${ApplicationStatus[appStatus as ApplicationStatus]}, start load assets`
194	);
195	hasAppsNeedLoadingAssets = true;	25✔
196	return this.ngZone.runOutsideAngular(() => {	25✔
197	return this.startLoadAppAssets(app);	25✔
198	});
199	} else {
200	return of(app);	7✔
201	}
202	});
203	if (hasAppsNeedLoadingAssets) {	37✔
204	this.loadingDone = false;	25✔
205	this.innerLoading.set(true);	25✔
206	}
207	return loadApps$.length > 0 ? forkJoin(loadApps$) : of([] as PlanetApplication[]);	37✔
208	}),
209	// Bootstrap or show apps
210	map(apps => {
211	const apps$: Observable<PlanetApplication>[] = apps.map(app => {	28✔
212	return of(app).pipe(	23✔
213	switchMap(app => {
214	const appStatus = this.appsStatus.get(app);	22✔
215	if (appStatus === ApplicationStatus.bootstrapped) {	22✔
216	debug(`[routeChange] app(${app.name}) status is bootstrapped, show app and active`);	2✔
217	this.showApp(app);	2✔
218	const appRef = getPlanetApplicationRef(app.name);	2✔
219	appRef?.navigateByUrl(event.url);	2✔
220	this.setAppStatus(app, ApplicationStatus.active);	2✔
221	this.setLoadingDone();	2✔
222	return of(app);	2✔
223	} else if (appStatus === ApplicationStatus.assetsLoaded) {	20✔
224	debug(`[routeChange] app(${app.name}) status is assetsLoaded, start bootstrapping`);	15✔
225	return this.bootstrapApp(app).pipe(	15✔
226	map(() => {
227	debug(`app(${app.name}) bootstrapped success, active it`);	15✔
228	this.setAppStatus(app, ApplicationStatus.active);	15✔
229	this.setLoadingDone();	15✔
230	return app;	15✔
231	})
232	);
233	} else if (appStatus === ApplicationStatus.active) {	5✔
234	debug(`[routeChange] app(${app.name}) is active, do nothings`);	4✔
235	const appRef = getPlanetApplicationRef(app.name);	4✔
236	// Backwards compatibility sub app use old version which has not getCurrentRouterStateUrl
237	const currentUrl = appRef?.getCurrentRouterStateUrl ? appRef.getCurrentRouterStateUrl() : '';	4!
238	if (currentUrl !== event.url) {	4✔
239	appRef?.navigateByUrl(event.url);	3✔
240	}
241	return of(app);	4✔
242	} else {
243	debug(	1✔
244	`[routeChange] app(${app.name}) status is ${
245	ApplicationStatus[appStatus as ApplicationStatus]
246	}`
247	);
248	return this.getAppStatusChange$(app).pipe(	1✔
249	take(1),
250	map(() => {
251	debug(`app(${app.name}) status is bootstrapped by subscribe status change, active it`);	1✔
252	this.setAppStatus(app, ApplicationStatus.active);	1✔
253	this.showApp(app);	1✔
254	return app;	1✔
255	})
256	);
257	}
258	})
259	);
260	});
261
262	if (apps$.length > 0) {	28✔
263	debug(`start load and active apps: ${this.getAppNames(apps)}`);	23✔
264	// 切换到应用后会有闪烁现象，所以使用 setTimeout 后启动应用
265	// example: redirect to app1's dashboard from portal's about page
266	// If app's route has redirect, it doesn't work, it ok just in setTimeout, I don't know why.
267	// TODO:: remove it, it is ok in version Angular 9.x
268	setTimeout(() => {	23✔
269	// 此处判断是因为如果静态资源加载完毕还未启动被取消，还是会启动之前的应用，虽然可能性比较小，但是无法排除这种可能性，所以只有当 Event 是最后一个才会启动
270	if (this.startRouteChangeEvent === event) {	23✔
271	// runOutsideAngular for fix error: `Expected to not be in Angular Zone, but it is!`
272	this.ngZone.runOutsideAngular(() => {	22✔
273	forkJoin(apps$).subscribe(() => {	22✔
274	this.setLoadingDone();	22✔
275	this.ensurePreloadApps(apps);	22✔
276	});
277	});
278	}
279	});
280	} else {
281	debug(`no apps need to be loaded, ensure preload apps`);	5✔
282	this.ensurePreloadApps(apps);	5✔
283	this.setLoadingDone();	5✔
284	}
285	}),
286	// Error handler
287	catchError(error => {
288	debug(`apps loader error: ${error}`);	4✔
289	this.errorHandler(error);	4✔
290	return [];	4✔
291	})
292	);
293	})
294	)
295	.subscribe();
296	}
297
298	private startLoadAppAssets(app: PlanetApplication): Observable<PlanetApplication> {
299	if (this.inProgressAppAssetsLoads.get(app.name)) {	32!
UNCOV 300	return this.inProgressAppAssetsLoads.get(app.name);	×
301	} else {
302	const loadApp$ = this.assetsLoader.loadAppAssets(app).pipe(	32✔
303	tap(() => {
304	this.inProgressAppAssetsLoads.delete(app.name);	21✔
305	this.setAppStatus(app, ApplicationStatus.assetsLoaded);	21✔
306	}),
307	map(() => {
308	return app;	21✔
309	}),
310	catchError(error => {
311	this.inProgressAppAssetsLoads.delete(app.name);	6✔
312	this.setAppStatus(app, ApplicationStatus.loadError);	6✔
313	throw error;	6✔
314	}),
315	share()
316	);
317	this.inProgressAppAssetsLoads.set(app.name, loadApp$);	32✔
318	this.setAppStatus(app, ApplicationStatus.assetsLoading);	32✔
319	return loadApp$;	32✔
320	}
321	}
322
323	private hideApp(planetApp: PlanetApplication) {
324	const appRef = getPlanetApplicationRef(planetApp.name);	4✔
325	const appRootElement = document.querySelector(appRef?.selector \|\| (planetApp.selector as string));	4✔
326	if (appRootElement) {	4✔
327	appRootElement.setAttribute('style', 'display:none;');	4✔
328	}
329	}
330
331	private showApp(planetApp: PlanetApplication) {
332	const appRef = getPlanetApplicationRef(planetApp.name);	3✔
333	const appRootElement = document.querySelector(appRef?.selector \|\| (planetApp.selector as string));	3✔
334	if (appRootElement) {	3✔
335	appRootElement.setAttribute('style', '');	3✔
336	}
337	}
338
339	private destroyApp(planetApp: PlanetApplication) {
340	const appRef = getPlanetApplicationRef(planetApp.name);	60✔
341	if (appRef) {	60✔
342	appRef.destroy();	2✔
343	}
344	const container = getHTMLElement(planetApp.hostParent);	60✔
345	const appRootElement = container?.querySelector((appRef && appRef.selector) \|\| (planetApp.selector as string));	60✔
346	if (appRootElement) {	60✔
347	container?.removeChild(appRootElement);	20✔
348	}
349	}
350
351	private bootstrapApp(app: PlanetApplication, defaultStatus: 'hidden' \| 'display' = 'display'): Observable<PlanetApplicationRef> {	16✔
352	debug(`app(${app.name}) start bootstrapping`);	21✔
353	this.setAppStatus(app, ApplicationStatus.bootstrapping);	21✔
354	const appRef = getPlanetApplicationRef(app.name);	21✔
355	if (appRef && appRef.bootstrap) {	21✔
356	const container = getHTMLElement(app.hostParent);	20✔
357	let appRootElement: HTMLElement;
358	if (container) {	20✔
359	appRootElement = container.querySelector(appRef.selector \|\| app.selector!)!;	20✔
360	if (!appRootElement) {	20✔
361	if (appRef.template) {	20✔
362	appRootElement = createElementByTemplate(appRef.template)!;	1✔
363	} else {
364	appRootElement = document.createElement(app.selector!);	19✔
365	}
366	appRootElement.setAttribute('style', 'display:none;');	20✔
367	if (app.hostClass) {	20✔
368	appRootElement.classList.add(...coerceArray(app.hostClass));	20✔
369	}
370	if (app.stylePrefix) {	20✔
371	appRootElement.classList.add(...coerceArray(app.stylePrefix));	15✔
372	}
373	container.appendChild(appRootElement);	20✔
374	}
375	}
376	let result = appRef.bootstrap(this.portalApp);	20✔
377	// Backwards compatibility promise for bootstrap
378	if ((result as any)['then']) {	20!
UNCOV 379	result = from(result) as Observable<PlanetApplicationRef>;	×
380	}
381	return result.pipe(	20✔
382	tap(() => {
383	debug(`app(${app.name}) bootstrapped success for ${defaultStatus}`);	20✔
384	this.setAppStatus(app, ApplicationStatus.bootstrapped);	20✔
385	if (defaultStatus === 'display' && appRootElement) {	20✔
386	appRootElement.removeAttribute('style');	15✔
387	}
388	}),
389	map(() => {
390	return appRef;	20✔
391	})
392	);
393	} else {
394	throw new Error(	1✔
395	`[${app.name}] not found, make sure that the app has the correct name defined use defineApplication(${app.name}) and runtimeChunk and vendorChunk are set to true, details see https://github.com/worktile/ngx-planet#throw-error-cannot-read-property-call-of-undefined-at-__webpack_require__-bootstrap79`
396	);
397	}
398	}
399
400	private getUnloadApps(activeApps: PlanetApplication[]) {
401	const unloadApps: PlanetApplication[] = [];	37✔
402	this.appsStatus.forEach((value, app) => {	37✔
403	if (value === ApplicationStatus.active && !activeApps.find(item => item.name === app.name)) {	15✔
404	unloadApps.push(app);	4✔
405	}
406	});
407	return unloadApps;	37✔
408	}
409
410	private unloadApps(shouldUnloadApps: PlanetApplication[], event: PlanetRouterEvent) {
411	const hideApps: PlanetApplication[] = [];	37✔
412	const destroyApps: PlanetApplication[] = [];	37✔
413	shouldUnloadApps.forEach(app => {	37✔
414	if (this.switchModeIsCoexist(app)) {	4✔
415	debug(`hide app(${app.name}) for coexist mode`);	2✔
416	hideApps.push(app);	2✔
417	this.hideApp(app);	2✔
418	this.setAppStatus(app, ApplicationStatus.bootstrapped);	2✔
419	} else {
420	destroyApps.push(app);	2✔
421	// 销毁之前先隐藏，否则会出现闪烁，因为 destroy 是延迟执行的
422	// 如果销毁不延迟执行，会出现切换到主应用的时候会有视图卡顿现象
423	this.hideApp(app);	2✔
424	this.setAppStatus(app, ApplicationStatus.assetsLoaded);	2✔
425	}
426	});
427
428	if (hideApps.length > 0 \|\| destroyApps.length > 0) {	37✔
429	// 从其他应用切换到主应用的时候会有视图卡顿现象，所以先等主应用渲染完毕后再加载其他应用
430	// 此处尝试使用 this.ngZone.onStable.pipe(take(1)) 应用之间的切换会出现闪烁
431	setTimeout(() => {	4✔
432	hideApps.forEach(app => {	4✔
433	const appRef = getPlanetApplicationRef(app.name);	2✔
434	if (appRef) {	2✔
435	appRef.navigateByUrl(event.url);	2✔
436	}
437	});
438	destroyApps.forEach(app => {	4✔
439	debug(`destroy app(${app.name})`);	2✔
440	this.destroyApp(app);	2✔
441	});
442	});
443	}
444	}
445
446	private preloadApps(activeApps?: PlanetApplication[]) {
447	setTimeout(() => {	19✔
448	const toPreloadApps = this.planetApplicationService.getAppsToPreload(	19✔
449	activeApps ? activeApps.map(item => item.name) : undefined	15!
450	);
451	debug(`start preload apps: ${this.getAppNames(toPreloadApps)}`);	19✔
452	const loadApps$ = toPreloadApps.map(preloadApp => {	19✔
453	return this.preloadInternal(preloadApp);	6✔
454	});
455
456	forkJoin(loadApps$).subscribe({	19✔
457	error: error => {
UNCOV 458	this.errorHandler(error);	×
459	}
460	});
461	});
462	}
463
464	private ensurePreloadApps(activeApps?: PlanetApplication[]) {
465	// Start preload apps
466	// Start preload when first time app loaded
467	if (this.firstLoad) {	27✔
468	this.preloadApps(activeApps);	19✔
469	this.firstLoad = false;	19✔
470	}
471	}
472
473	public setOptions(options: Partial<PlanetOptions>) {
474	this.options = {	5✔
475	...this.options,
476	...options
477	};
478	}
479
480	/**
481	* reset route by current router
482	*/
483	public reroute(event: PlanetRouterEvent) {
484	this.routeChange$.next(event);	38✔
485	}
486
487	private preloadInternal(app: PlanetApplication, immediate?: boolean): Observable<PlanetApplicationRef \| null> {
488	const status = this.appsStatus.get(app);	10✔
489	if (!status \|\| status === ApplicationStatus.loadError) {	10✔
490	debug(`preload app(${app.name}), status is empty, start to load assets`);	7✔
491	return this.startLoadAppAssets(app).pipe(	7✔
492	switchMap(() => {
493	debug(`preload app(${app.name}), assets loaded, start bootstrap app, immediate: ${!!immediate}`);	5✔
494	if (immediate) {	5✔
495	return this.bootstrapApp(app, 'hidden');	1✔
496	} else {
497	return this.ngZone.runOutsideAngular(() => {	4✔
498	return this.bootstrapApp(app, 'hidden');	4✔
499	});
500	}
501	}),
502	catchError(error => {
503	this.errorHandler(error);	2✔
504	return of(null);	2✔
505	}),
506	map(() => {
507	return getPlanetApplicationRef(app.name);	7✔
508	})
509	);
510	} else if ([ApplicationStatus.assetsLoading, ApplicationStatus.assetsLoaded, ApplicationStatus.bootstrapping].includes(status)) {	3!
511	debug(`preload app(${app.name}), status is ${ApplicationStatus[status]}, return until bootstrapped`);	3✔
512	return this.getAppStatusChange$(app).pipe(	3✔
513	take(1),
514	map(() => {
515	return getPlanetApplicationRef(app.name);	3✔
516	})
517	);
518	} else {
519	const appRef = getPlanetApplicationRef(app.name);	×
520	if (!appRef) {	×
UNCOV 521	throw new Error(`${app.name}'s status is ${ApplicationStatus[status]}, planetApplicationRef is null.`);	×
522	}
UNCOV 523	return of(appRef);	×
524	}
525	}
526
527	/**
528	* Preload planet application
529	* @param app app
530	* @param immediate bootstrap on stable by default, setting immediate is true, it will bootstrap immediate
531	*/
532	public preload(app: PlanetApplication, immediate?: boolean): Observable<PlanetApplicationRef> {
533	return this.preloadInternal(app, immediate);	4✔
534	}
535	}

worktile / ngx-planet / 4369122e-57f5-418b-8ef8-b36c31d3e121

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous