abef6b29-4566-45cb-ba15-eb3380c7cbfc

Committed 18 Apr 2024 07:31AM UTC coverage: 92.554% (-0.5%) from 93.09%

Build # abef6b29-4566-45cb-ba15-eb3380c7cbfc

Build Type

Pull #326

circleci

Committed by

lswl66

Commit Message

fix: fix

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

Run Details

265 of 300 branches covered (88.33%)

Branch coverage included in aggregate %.

15 of 17 new or added lines in 2 files covered. (88.24%)

1 existing line in 1 file now uncovered.

717 of 761 relevant lines covered (94.22%)

19.42 hits per line

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

89.05

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

import { DOCUMENT } from '@angular/common';
import {
    ApplicationRef,
    ComponentRef,
    ElementRef,
    EmbeddedViewRef,
    EnvironmentInjector,
    Inject,
    Injectable,
    Injector,
    NgModuleRef,
    NgZone,
    TemplateRef,
    Type,
    createComponent,
    reflectComponentType
} from '@angular/core';
import { PlanetPortalApplication } from 'ngx-planet';
import { Observable, of, timer } from 'rxjs';
import { delayWhen, map, shareReplay } from 'rxjs/operators';
import { NgPlanetApplicationRef } from '../application/ng-planet-application-ref';
import { PlanetApplicationRef } from '../application/planet-application-ref';
import {
    getApplicationLoader,
    getApplicationService,
    getBootstrappedPlanetApplicationRef,
    getPlanetApplicationRef,
    globalPlanet
} from '../global-planet';
import { coerceArray } from '../helpers';
import { PlanetComponentRef } from './planet-component-types';
import { PlantComponentConfig } from './plant-component.config';

const componentWrapperClass = 'planet-component-wrapper';

function isComponentType<T>(component: PlanetComponent<T>): component is Type<T> {
    return typeof component === 'function' && component.constructor === Function;
}

export type PlanetComponent<T = unknown> =
    | {
          name: string;
          component: Type<T>;
      }
    | Type<T>;

@Injectable({
    providedIn: 'root'
})
export class PlanetComponentLoader {
    private get applicationLoader() {
        return getApplicationLoader();
    }

    private get applicationService() {
        return getApplicationService();
    }

    constructor(
        private applicationRef: ApplicationRef,
        private ngModuleRef: NgModuleRef<any>,
        private ngZone: NgZone,
        @Inject(DOCUMENT) private document: any
    ) {}

    private getPlantAppRef(name: string): Observable<PlanetApplicationRef> {
        const plantAppRef = getBootstrappedPlanetApplicationRef(name);
        if (plantAppRef) {
            return of(plantAppRef);
        } else {
            const app = this.applicationService.getAppByName(name);
            return this.applicationLoader.preload(app, true).pipe(
                map(() => {
                    return getPlanetApplicationRef(name);
                })
            );
        }
    }

    private createInjector<TData>(parentInjector: Injector, componentRef: PlanetComponentRef<TData>): Injector {
        return Injector.create({
            providers: [
                {
                    provide: PlanetComponentRef,
                    useValue: componentRef
                }
            ],
            parent: parentInjector
        });
    }

    private getContainerElement(config: PlantComponentConfig): HTMLElement {
        if (!config.container) {
            throw new Error(`config 'container' cannot be null`);
        } else {
            if ((config.container as ElementRef).nativeElement) {
                return (config.container as ElementRef).nativeElement;
            } else {
                return config.container as HTMLElement;
            }
        }
    }

    private insertComponentRootNodeToContainer(container: HTMLElement, componentRootNode: HTMLElement, hostClass: string) {
        const subApp = this.applicationService.getAppByName(this.ngModuleRef.instance.appName);
        componentRootNode.classList.add(componentWrapperClass);
        componentRootNode.setAttribute('planet-inline', '');
        if (hostClass) {
            componentRootNode.classList.add(hostClass);
        }
        if (subApp && subApp.stylePrefix) {
            componentRootNode.classList.add(subApp.stylePrefix);
        }
        // container 是注释则在前方插入，否则在元素内部插入
        if (container.nodeType === 8) {
            container.parentElement.insertBefore(componentRootNode, container);
        } else {
            container.appendChild(componentRootNode);
        }
    }

    private attachComponent<TData>(
        component: Type<unknown>,
        environmentInjector: EnvironmentInjector,
        config: PlantComponentConfig
    ): PlanetComponentRef<TData> {
        const plantComponentRef = new PlanetComponentRef();
        const appRef = this.applicationRef;
        const injector = this.createInjector<TData>(environmentInjector, plantComponentRef);
        const container = this.getContainerElement(config);

        const componentRef = createComponent(component, {
            environmentInjector: environmentInjector,
            elementInjector: injector,
            projectableNodes: config.projectableNodes as Node[][]
        });
        appRef.attachView(componentRef.hostView);
        const componentRootNode = this.getComponentRootNode(componentRef);
        this.insertComponentRootNodeToContainer(container, componentRootNode, config.hostClass || config.wrapperClass);
        if (config.initialState) {
            Object.assign(componentRef.instance, config.initialState);
        }
        plantComponentRef.componentInstance = componentRef.instance;
        plantComponentRef.componentRef = componentRef;
        plantComponentRef.hostElement = componentRootNode;
        plantComponentRef.dispose = () => {
            if (appRef.viewCount > 0) {
                appRef.detachView(componentRef.hostView);
            }
            componentRef?.destroy();
            componentRootNode.remove();
        };
        return plantComponentRef;
    }

    /** Gets the root HTMLElement for an instantiated component. */
    private getComponentRootNode(componentRef: ComponentRef<any>): HTMLElement {
        return (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
    }

    private registerComponentFactory(componentOrComponents: PlanetComponent | PlanetComponent[]) {
        const app = this.ngModuleRef.instance.appName;
        let appRef$: Observable<NgPlanetApplicationRef | PlanetPortalApplication>;

        if (app) {
            appRef$ = this.getPlantAppRef(app) as Observable<NgPlanetApplicationRef>;
        } else {
            appRef$ = of(globalPlanet.portalApplication);
        }

        appRef$.subscribe(appRef => {
            appRef.registerComponentFactory((componentName: string, config: PlantComponentConfig<any>) => {
                const components = coerceArray(componentOrComponents);
                const planetComponent = components.find(item => {
                    return isComponentType(item)
                        ? reflectComponentType(item).selector.includes(componentName)
                        : item.name === componentName;
                });
                if (planetComponent) {
                    return this.ngZone.run(() => {
                        const componentRef = this.attachComponent<any>(
                            isComponentType(planetComponent) ? planetComponent : planetComponent.component,
                            appRef instanceof NgPlanetApplicationRef ? appRef.appModuleRef.injector : this.ngModuleRef.injector,
                            config
                        );
                        return componentRef;
                    });
                } else {
                    throw Error(`unregistered component ${componentName} in app ${app}`);
                }
            });
        });
    }

    register(components: PlanetComponent | PlanetComponent[], immediate?: boolean) {
        if (immediate) {
            this.registerComponentFactory(components);
        } else {
            setTimeout(() => {
                this.registerComponentFactory(components);
            });
        }
    }

    load<TComp = unknown, TData = unknown>(
        app: string,
        componentName: string,
        config: PlantComponentConfig<TData>
    ): Observable<PlanetComponentRef<TComp>> {
        let appRef$: Observable<NgPlanetApplicationRef | PlanetPortalApplication>;
        if (app === globalPlanet.portalApplication.name) {
            appRef$ = of(globalPlanet.portalApplication);
        } else {
            appRef$ = this.getPlantAppRef(app).pipe(
                delayWhen((appRef: NgPlanetApplicationRef) => {
                    if (appRef.getComponentFactory()) {
                        return of('');
                    } else {
                        // Because register use 'setTimeout',so timer 20
                        return timer(20);
                    }
                })
            );
        }
        const result = appRef$.pipe(
            map(appRef => {
                const componentFactory = appRef.getComponentFactory();
                if (componentFactory) {
                    const projectableEmbeddedViewRefs: EmbeddedViewRef<any>[] = [];
                    const projectableNodes: Node[][] = (config.projectableNodes || []).map(node => {
                        if (node instanceof TemplateRef) {
                            const viewRef = node.createEmbeddedView({});
                            projectableEmbeddedViewRefs.push(viewRef);
                            this.applicationRef.attachView(viewRef);
                            return viewRef.rootNodes;
                        } else {
                            return node;
                        }
                    });
                    const compRef = componentFactory<TData, TComp>(componentName, { ...config, projectableNodes: projectableNodes });
                    const dispose = compRef.dispose.bind(compRef);
                    compRef.dispose = () => {
                        projectableEmbeddedViewRefs.forEach(viewRef => {
                            this.applicationRef.detachView(viewRef);
                            viewRef.destroy();
                        });
                        dispose();
                    };
                    return compRef;
                } else {
                    throw new Error(`${app}'s component(${componentName}) is not registered`);
                }
            }),
            shareReplay()
        );
        result.subscribe();
        return result;
    }
}

1	import { DOCUMENT } from '@angular/common';
2	import {
3	ApplicationRef,
4	ComponentRef,
5	ElementRef,
6	EmbeddedViewRef,
7	EnvironmentInjector,
8	Inject,
9	Injectable,
10	Injector,
11	NgModuleRef,
12	NgZone,
13	TemplateRef,
14	Type,
15	createComponent,
16	reflectComponentType
17	} from '@angular/core';
18	import { PlanetPortalApplication } from 'ngx-planet';
19	import { Observable, of, timer } from 'rxjs';
20	import { delayWhen, map, shareReplay } from 'rxjs/operators';
21	import { NgPlanetApplicationRef } from '../application/ng-planet-application-ref';
22	import { PlanetApplicationRef } from '../application/planet-application-ref';
23	import {
24	getApplicationLoader,
25	getApplicationService,
26	getBootstrappedPlanetApplicationRef,
27	getPlanetApplicationRef,
28	globalPlanet
29	} from '../global-planet';
30	import { coerceArray } from '../helpers';
31	import { PlanetComponentRef } from './planet-component-types';
32	import { PlantComponentConfig } from './plant-component.config';
33
34	const componentWrapperClass = 'planet-component-wrapper';	1✔
35
36	function isComponentType<T>(component: PlanetComponent<T>): component is Type<T> {
37	return typeof component === 'function' && component.constructor === Function;	22✔
38	}
39
40	export type PlanetComponent<T = unknown> =
41	\| {
42	name: string;
43	component: Type<T>;
44	}
45	\| Type<T>;
46
47	@Injectable({
48	providedIn: 'root'
49	})
50	export class PlanetComponentLoader {	1✔
51	private get applicationLoader() {
52	return getApplicationLoader();	1✔
53	}
54
55	private get applicationService() {
56	return getApplicationService();	11✔
57	}
58
59	constructor(
60	private applicationRef: ApplicationRef,	21✔
61	private ngModuleRef: NgModuleRef<any>,	21✔
62	private ngZone: NgZone,	21✔
63	@Inject(DOCUMENT) private document: any	21✔
64	) {}
65
66	private getPlantAppRef(name: string): Observable<PlanetApplicationRef> {
67	const plantAppRef = getBootstrappedPlanetApplicationRef(name);	23✔
68	if (plantAppRef) {	23✔
69	return of(plantAppRef);	22✔
70	} else {
71	const app = this.applicationService.getAppByName(name);	1✔
72	return this.applicationLoader.preload(app, true).pipe(	1✔
73	map(() => {
74	return getPlanetApplicationRef(name);	1✔
75	})
76	);
77	}
78	}
79
80	private createInjector<TData>(parentInjector: Injector, componentRef: PlanetComponentRef<TData>): Injector {
81	return Injector.create({	11✔
82	providers: [
83	{
84	provide: PlanetComponentRef,
85	useValue: componentRef
86	}
87	],
88	parent: parentInjector
89	});
90	}
91
92	private getContainerElement(config: PlantComponentConfig): HTMLElement {
93	if (!config.container) {	11✔
94	throw new Error(`config 'container' cannot be null`);	1✔
95	} else {
96	if ((config.container as ElementRef).nativeElement) {	10!
97	return (config.container as ElementRef).nativeElement;	×
98	} else {
99	return config.container as HTMLElement;	10✔
100	}
101	}
102	}
103
104	private insertComponentRootNodeToContainer(container: HTMLElement, componentRootNode: HTMLElement, hostClass: string) {
105	const subApp = this.applicationService.getAppByName(this.ngModuleRef.instance.appName);	10✔
106	componentRootNode.classList.add(componentWrapperClass);	10✔
107	componentRootNode.setAttribute('planet-inline', '');	10✔
108	if (hostClass) {	10✔
109	componentRootNode.classList.add(hostClass);	3✔
110	}
111	if (subApp && subApp.stylePrefix) {	10✔
112	componentRootNode.classList.add(subApp.stylePrefix);	1✔
113	}
114	// container 是注释则在前方插入，否则在元素内部插入
115	if (container.nodeType === 8) {	10✔
116	container.parentElement.insertBefore(componentRootNode, container);	1✔
117	} else {
118	container.appendChild(componentRootNode);	9✔
119	}
120	}
121
122	private attachComponent<TData>(
123	component: Type<unknown>,
124	environmentInjector: EnvironmentInjector,
125	config: PlantComponentConfig
126	): PlanetComponentRef<TData> {
127	const plantComponentRef = new PlanetComponentRef();	11✔
128	const appRef = this.applicationRef;	11✔
129	const injector = this.createInjector<TData>(environmentInjector, plantComponentRef);	11✔
130	const container = this.getContainerElement(config);	11✔
131
132	const componentRef = createComponent(component, {	10✔
133	environmentInjector: environmentInjector,
134	elementInjector: injector,
135	projectableNodes: config.projectableNodes as Node[][]
136	});
137	appRef.attachView(componentRef.hostView);	10✔
138	const componentRootNode = this.getComponentRootNode(componentRef);	10✔
139	this.insertComponentRootNodeToContainer(container, componentRootNode, config.hostClass \|\| config.wrapperClass);	10✔
140	if (config.initialState) {	10!
141	Object.assign(componentRef.instance, config.initialState);	×
142	}
143	plantComponentRef.componentInstance = componentRef.instance;	10✔
144	plantComponentRef.componentRef = componentRef;	10✔
145	plantComponentRef.hostElement = componentRootNode;	10✔
146	plantComponentRef.dispose = () => {	10✔
147	if (appRef.viewCount > 0) {	1✔
148	appRef.detachView(componentRef.hostView);	1✔
149	}
150	componentRef?.destroy();	1✔
151	componentRootNode.remove();	1✔
152	};
153	return plantComponentRef;	10✔
154	}
155
156	/** Gets the root HTMLElement for an instantiated component. */
157	private getComponentRootNode(componentRef: ComponentRef<any>): HTMLElement {
158	return (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;	10✔
159	}
160
161	private registerComponentFactory(componentOrComponents: PlanetComponent \| PlanetComponent[]) {
162	const app = this.ngModuleRef.instance.appName;	11✔
163	let appRef$: Observable<NgPlanetApplicationRef \| PlanetPortalApplication>;
164
165	if (app) {	11!
166	appRef$ = this.getPlantAppRef(app) as Observable<NgPlanetApplicationRef>;	11✔
167	} else {
NEW 168	appRef$ = of(globalPlanet.portalApplication);	×
169	}
170
171	appRef$.subscribe(appRef => {	11✔
172	appRef.registerComponentFactory((componentName: string, config: PlantComponentConfig<any>) => {	11✔
173	const components = coerceArray(componentOrComponents);	11✔
174	const planetComponent = components.find(item => {	11✔
175	return isComponentType(item)	11✔
176	? reflectComponentType(item).selector.includes(componentName)
177	: item.name === componentName;
178	});
179	if (planetComponent) {	11!
180	return this.ngZone.run(() => {	11✔
181	const componentRef = this.attachComponent<any>(	11✔
182	isComponentType(planetComponent) ? planetComponent : planetComponent.component,	11✔
183	appRef instanceof NgPlanetApplicationRef ? appRef.appModuleRef.injector : this.ngModuleRef.injector,	11!
184	config
185	);
186	return componentRef;	10✔
187	});
188	} else {
189	throw Error(`unregistered component ${componentName} in app ${app}`);	×
190	}
191	});
192	});
193	}
194
195	register(components: PlanetComponent \| PlanetComponent[], immediate?: boolean) {
196	if (immediate) {	11!
UNCOV 197	this.registerComponentFactory(components);	×
198	} else {
199	setTimeout(() => {	11✔
200	this.registerComponentFactory(components);	11✔
201	});
202	}
203	}
204
205	load<TComp = unknown, TData = unknown>(
206	app: string,
207	componentName: string,
208	config: PlantComponentConfig<TData>
209	): Observable<PlanetComponentRef<TComp>> {
210	let appRef$: Observable<NgPlanetApplicationRef \| PlanetPortalApplication>;
211	if (app === globalPlanet.portalApplication.name) {	12!
NEW 212	appRef$ = of(globalPlanet.portalApplication);	×
213	} else {
214	appRef$ = this.getPlantAppRef(app).pipe(	12✔
215	delayWhen((appRef: NgPlanetApplicationRef) => {
216	if (appRef.getComponentFactory()) {	12✔
217	return of('');	3✔
218	} else {
219	// Because register use 'setTimeout',so timer 20
220	return timer(20);	9✔
221	}
222	})
223	);
224	}
225	const result = appRef$.pipe(	12✔
226	map(appRef => {
227	const componentFactory = appRef.getComponentFactory();	12✔
228	if (componentFactory) {	12✔
229	const projectableEmbeddedViewRefs: EmbeddedViewRef<any>[] = [];	11✔
230	const projectableNodes: Node[][] = (config.projectableNodes \|\| []).map(node => {	11✔
231	if (node instanceof TemplateRef) {	2✔
232	const viewRef = node.createEmbeddedView({});	1✔
233	projectableEmbeddedViewRefs.push(viewRef);	1✔
234	this.applicationRef.attachView(viewRef);	1✔
235	return viewRef.rootNodes;	1✔
236	} else {
237	return node;	1✔
238	}
239	});
240	const compRef = componentFactory<TData, TComp>(componentName, { ...config, projectableNodes: projectableNodes });	11✔
241	const dispose = compRef.dispose.bind(compRef);	10✔
242	compRef.dispose = () => {	10✔
243	projectableEmbeddedViewRefs.forEach(viewRef => {	1✔
244	this.applicationRef.detachView(viewRef);	×
245	viewRef.destroy();	×
246	});
247	dispose();	1✔
248	};
249	return compRef;	10✔
250	} else {
251	throw new Error(`${app}'s component(${componentName}) is not registered`);	1✔
252	}
253	}),
254	shareReplay()
255	);
256	result.subscribe();	12✔
257	return result;	12✔
258	}
259	}

worktile / ngx-planet / abef6b29-4566-45cb-ba15-eb3380c7cbfc

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