@worktile/planet 12.1.0 → 12.1.1

package/packages/planet/src/assets-loader.ts

@@ -0,0 +1,247 @@
+import { Injectable } from '@angular/core';
+import { hashCode, isEmpty, getScriptsAndStylesFullPaths } from './helpers';
+import { of, Observable, Observer, forkJoin, concat } from 'rxjs';
+import { map, switchMap, concatAll } from 'rxjs/operators';
+import { HttpClient } from '@angular/common/http';
+import { PlanetApplication } from './planet.class';
+import { createSandbox } from './sandbox';
+
+export interface AssetsLoadResult {
+    src: string;
+    hashCode: number;
+    loaded: boolean;
+    status: string;
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AssetsLoader {
+    private loadedSources: number[] = [];
+
+    constructor(private http: HttpClient) {}
+
+    loadScript(src: string): Observable<AssetsLoadResult> {
+        const id = hashCode(src);
+        if (this.loadedSources.includes(id)) {
+            return of({
+                src: src,
+                hashCode: id,
+                loaded: true,
+                status: 'Loaded'
+            });
+        }
+        return new Observable((observer: Observer<AssetsLoadResult>) => {
+            const script: HTMLScriptElement = document.createElement('script');
+            script.type = 'text/javascript';
+            script.src = src;
+            script.async = true;
+            if (script['readyState']) {
+                // IE
+                script['onreadystatechange'] = () => {
+                    if (script['readyState'] === 'loaded' || script['readyState'] === 'complete') {
+                        script['onreadystatechange'] = null;
+                        observer.next({
+                            src: src,
+                            hashCode: id,
+                            loaded: true,
+                            status: 'Loaded'
+                        });
+                        observer.complete();
+                        this.loadedSources.push(id);
+                    }
+                };
+            } else {
+                // Others
+                script.onload = () => {
+                    observer.next({
+                        src: src,
+                        hashCode: id,
+                        loaded: true,
+                        status: 'Loaded'
+                    });
+                    observer.complete();
+                    this.loadedSources.push(id);
+                };
+            }
+            script.onerror = error => {
+                observer.error({
+                    src: src,
+                    hashCode: id,
+                    loaded: false,
+                    status: 'Error',
+                    error: error
+                });
+                observer.complete();
+            };
+            document.body.appendChild(script);
+        });
+    }
+
+    loadScriptWithSandbox(app: string, src: string): Observable<AssetsLoadResult> {
+        const id = hashCode(src);
+        if (this.loadedSources.includes(id)) {
+            return of({
+                src: src,
+                hashCode: id,
+                loaded: true,
+                status: 'Loaded'
+            });
+        }
+        return new Observable((observer: Observer<AssetsLoadResult>) => {
+            this.http.get(src, { responseType: 'text' }).subscribe(
+                (code: string) => {
+                    this.loadedSources.push(id);
+                    const sandbox = createSandbox(app);
+                    sandbox.execScript(code, src);
+                    observer.next({
+                        src: src,
+                        hashCode: id,
+                        loaded: true,
+                        status: 'Loaded'
+                    });
+                    observer.complete();
+                },
+                error => {
+                    observer.error({
+                        src: src,
+                        hashCode: id,
+                        loaded: false,
+                        status: 'Error',
+                        error: error
+                    });
+                    observer.complete();
+                }
+            );
+        });
+    }
+
+    loadStyle(src: string): Observable<AssetsLoadResult> {
+        const id = hashCode(src);
+        if (this.loadedSources.includes(id)) {
+            return of({
+                src: src,
+                hashCode: id,
+                loaded: true,
+                status: 'Loaded'
+            });
+        }
+        return new Observable((observer: Observer<AssetsLoadResult>) => {
+            const head = document.getElementsByTagName('head')[0];
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.type = 'text/css';
+            link.href = src;
+            link.media = 'all';
+            link.onload = () => {
+                observer.next({
+                    src: src,
+                    hashCode: id,
+                    loaded: true,
+                    status: 'Loaded'
+                });
+                observer.complete();
+                this.loadedSources.push(id);
+            };
+            link.onerror = error => {
+                observer.error({
+                    src: src,
+                    hashCode: id,
+                    loaded: true,
+                    status: 'Loaded',
+                    error: error
+                });
+                observer.complete();
+            };
+            head.appendChild(link);
+        });
+    }
+
+    loadScripts(
+        sources: string[],
+        options: {
+            app?: string;
+            sandbox?: boolean;
+            serial?: boolean;
+        } = {
+            serial: false,
+            sandbox: false
+        }
+    ): Observable<AssetsLoadResult[]> {
+        if (isEmpty(sources)) {
+            return of(null);
+        }
+        const observables = sources.map(src => {
+            // TODO: 暂时只支持Proxy沙箱
+            if (options.sandbox && window.Proxy) {
+                return this.loadScriptWithSandbox(options.app, src);
+            } else {
+                return this.loadScript(src);
+            }
+        });
+        if (options.serial) {
+            const a = concat(...observables).pipe(
+                map(item => {
+                    return of([item]);
+                }),
+                concatAll()
+            );
+            return a;
+        } else {
+            return forkJoin(observables).pipe();
+        }
+    }
+
+    loadStyles(sources: string[]): Observable<AssetsLoadResult[]> {
+        if (isEmpty(sources)) {
+            return of(null);
+        }
+        return forkJoin(
+            sources.map(src => {
+                return this.loadStyle(src);
+            })
+        );
+    }
+
+    loadScriptsAndStyles(
+        scripts: string[] = [],
+        styles: string[] = [],
+        options?: {
+            app?: string;
+            sandbox?: boolean;
+            serial?: boolean;
+        }
+    ) {
+        return forkJoin([this.loadScripts(scripts, options), this.loadStyles(styles)]);
+    }
+
+    loadAppAssets(app: PlanetApplication) {
+        if (app.manifest) {
+            return this.loadManifest(`${app.manifest}?t=${new Date().getTime()}`).pipe(
+                switchMap(manifestResult => {
+                    const { scripts, styles } = getScriptsAndStylesFullPaths(app, manifestResult);
+                    return this.loadScriptsAndStyles(scripts, styles, {
+                        app: app.name,
+                        sandbox: app.sandbox,
+                        serial: app.loadSerial
+                    });
+                })
+            );
+        } else {
+            const { scripts, styles } = getScriptsAndStylesFullPaths(app);
+            return this.loadScriptsAndStyles(scripts, styles, {
+                app: app.name,
+                sandbox: app.sandbox,
+                serial: app.loadSerial
+            });
+        }
+    }
+
+    loadManifest(url: string): Observable<{ [key: string]: string }> {
+        return this.http.get(url).pipe(
+            map((response: any) => {
+                return response;
+            })
+        );
+    }
+}

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

@@ -0,0 +1,187 @@
+import { TestBed, inject, tick, fakeAsync } from '@angular/core/testing';
+import { Compiler, Injector, Type, NgModuleRef } from '@angular/core';
+import { app1Name, App1Module, App1ProjectsComponent } from '../testing/app1.module';
+import { app2Name, App2Module } from '../testing/app2.module';
+import { PlanetPortalApplication } from '../application/portal-application';
+import { PlanetComponentLoader } from './planet-component-loader';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { of } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { PlantComponentConfig } from './plant-component.config';
+import {
+    defineApplication,
+    getPlanetApplicationRef,
+    getApplicationLoader,
+    clearGlobalPlanet,
+    getApplicationService
+} from '../global-planet';
+import { Planet } from 'ngx-planet/planet';
+import { RouterTestingModule } from '@angular/router/testing';
+
+describe('PlanetComponentLoader', () => {
+    let compiler: Compiler;
+    let injector: Injector;
+    let planet: Planet;
+
+    function defineAndBootstrapApplication(name: string, appModule: Type<any>) {
+        const ngModuleFactory = compiler.compileModuleSync(appModule);
+        const ngModuleRef = ngModuleFactory.create(injector);
+        defineApplication(name, {
+            template: '<app1-root></app1-root>',
+            bootstrap: (portalApp?: PlanetPortalApplication) => {
+                return new Promise(resolve => {
+                    resolve(ngModuleRef);
+                });
+            }
+        });
+        const appRef = getPlanetApplicationRef(name);
+        const portalApplication = new PlanetPortalApplication();
+        appRef.bootstrap(portalApplication);
+        return ngModuleRef;
+    }
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [HttpClientTestingModule, RouterTestingModule.withRoutes([])]
+        });
+        compiler = TestBed.inject(Compiler);
+        planet = TestBed.inject(Planet);
+        injector = TestBed.inject(Injector);
+    });
+
+    afterEach(() => {
+        clearGlobalPlanet();
+    });
+
+    it('should register component success', fakeAsync(() => {
+        // mock app1 and app2 bootstrap
+        const app1ModuleRef = defineAndBootstrapApplication(app1Name, App1Module);
+        registerAppComponents(app1ModuleRef);
+        tick();
+        const app1Ref = getPlanetApplicationRef(app1Name);
+        expect(app1Ref.getComponentFactory()).toBeTruthy();
+    }));
+
+    it('should app2 load app1 component when app1 component has completed the registration', fakeAsync(() => {
+        // mock app1 and app2 bootstrap
+        const app1ModuleRef = defineAndBootstrapApplication(app1Name, App1Module);
+        const app2ModuleRef = defineAndBootstrapApplication(app2Name, App2Module);
+        tick();
+
+        expect(() => {
+            loadApp1Component(app2ModuleRef);
+        }).toThrowError(`${app1Name}'s component(app1-projects) is not registered`);
+
+        registerAppComponents(app1ModuleRef);
+        tick();
+
+        expect(() => {
+            loadApp1Component(app2ModuleRef, { container: null });
+        }).toThrowError(`config 'container' cannot be null`);
+
+        loadApp1ComponentAndExpectHtml(app2ModuleRef);
+    }));
+
+    it('should app2 load app1 component with wrapperClass', fakeAsync(() => {
+        // mock app1 and app2 bootstrap
+        const app1ModuleRef = defineAndBootstrapApplication(app1Name, App1Module);
+        const app2ModuleRef = defineAndBootstrapApplication(app2Name, App2Module);
+        tick();
+        registerAppComponents(app1ModuleRef);
+        loadApp1Component(app2ModuleRef, { wrapperClass: 'custom-wrapper' }).subscribe(componentRef => {
+            expect(componentRef.wrapperElement.classList.contains('planet-component-wrapper')).toBeTruthy();
+            expect(componentRef.wrapperElement.classList.contains('custom-wrapper')).toBeTruthy();
+        });
+    }));
+
+    it('should app2 load app1 component with stylePrefix of app1', fakeAsync(() => {
+        // mock app1 and app2 bootstrap
+        const app1ModuleRef = defineAndBootstrapApplication(app1Name, App1Module);
+        const app2ModuleRef = defineAndBootstrapApplication(app2Name, App2Module);
+        const applicationService = getApplicationService();
+        const applicationServiceSpy = spyOn(applicationService, 'getAppByName');
+        applicationServiceSpy.and.returnValue({
+            stylePrefix: 'app1-prefix',
+            name: 'app1',
+            hostParent: '',
+            routerPathPrefix: ''
+        });
+        tick();
+        registerAppComponents(app1ModuleRef);
+        loadApp1Component(app2ModuleRef, { wrapperClass: 'custom-wrapper' }).subscribe(componentRef => {
+            expect(componentRef.wrapperElement.classList.contains('planet-component-wrapper')).toBeTruthy();
+            expect(componentRef.wrapperElement.classList.contains('custom-wrapper')).toBeTruthy();
+            expect(componentRef.wrapperElement.classList.contains('app1-prefix')).toBeTruthy();
+        });
+    }));
+
+    it('should app2 load app1 component and preload app1', fakeAsync(() => {
+        // mock app2 bootstrap
+        const app2ModuleRef = defineAndBootstrapApplication(app2Name, App1Module);
+        // mock app1 preload
+        const applicationLoader = getApplicationLoader();
+        const applicationLoaderSpy = spyOn(applicationLoader, 'preload');
+        const preload$ = of(getPlanetApplicationRef(app1Name)).pipe(
+            tap(() => {
+                const app1ModuleRef = defineAndBootstrapApplication(app1Name, App1Module);
+                registerAppComponents(app1ModuleRef);
+            })
+        );
+        applicationLoaderSpy.and.returnValue(preload$);
+        expect(applicationLoaderSpy).not.toHaveBeenCalled();
+        loadApp1ComponentAndExpectHtml(app2ModuleRef);
+        expect(applicationLoaderSpy).toHaveBeenCalled();
+    }));
+
+    it('should app2 dispose app1 component', fakeAsync(() => {
+        // mock app1 and app2 bootstrap
+        const app1ModuleRef = defineAndBootstrapApplication(app1Name, App1Module);
+        const app2ModuleRef = defineAndBootstrapApplication(app2Name, App2Module);
+        tick();
+        registerAppComponents(app1ModuleRef);
+        loadApp1Component(app2ModuleRef).subscribe(componentRef => {
+            const parent = componentRef.wrapperElement.parentElement;
+            componentRef.dispose();
+            expect(parent.innerHTML).toEqual('');
+        });
+    }));
+});
+
+function registerAppComponents(appModuleRef: NgModuleRef<any>) {
+    const componentLoader = appModuleRef.injector.get(PlanetComponentLoader);
+    componentLoader.register([{ name: 'app1-projects', component: App1ProjectsComponent }]);
+}
+
+function loadApp1Component(appModuleRef: NgModuleRef<any>, config?: Partial<PlantComponentConfig>) {
+    const componentLoader = appModuleRef.injector.get(PlanetComponentLoader);
+    const hostElement = createComponentHostElement();
+    const result = componentLoader.load(
+        app1Name,
+        'app1-projects',
+        Object.assign({}, { container: hostElement }, config)
+    );
+    tick(20);
+    return result;
+}
+
+function loadApp1ComponentAndExpectHtml(app2ModuleRef: NgModuleRef<any>) {
+    loadApp1Component(app2ModuleRef).subscribe(componentRef => {
+        expect(componentRef.wrapperElement.outerHTML).toEqual(
+            `<div class="planet-component-wrapper" planet-inline=""><app1-projects> projects is work </app1-projects></div>`
+        );
+    });
+}
+
+function createComponentHostElement(): HTMLElement {
+    const componentHostClass = 'component-host';
+    let element = document.body.getElementsByClassName(componentHostClass)[0];
+    if (element) {
+        element.innerHTML = '';
+        return element as HTMLElement;
+    } else {
+        element = document.createElement('DIV');
+        element.classList.add('component-host');
+        document.body.appendChild(element);
+        return element as HTMLElement;
+    }
+}

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

@@ -0,0 +1,173 @@
+import { Injectable, ApplicationRef, NgModuleRef, NgZone, ElementRef, Inject } from '@angular/core';
+import { ComponentType, DomPortalOutlet, ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { PlanetApplicationRef } from '../application/planet-application-ref';
+import { PlanetComponentRef } from './planet-component-ref';
+import { PlantComponentConfig } from './plant-component.config';
+import { coerceArray } from '../helpers';
+import { map, shareReplay, finalize, debounce, filter, take, delay, delayWhen } from 'rxjs/operators';
+import { of, Observable, interval, timer } from 'rxjs';
+import { DOCUMENT } from '@angular/common';
+import { globalPlanet, getApplicationLoader, getApplicationService } from '../global-planet';
+
+const componentWrapperClass = 'planet-component-wrapper';
+
+export interface PlanetComponent<T = any> {
+    name: string;
+    component: ComponentType<T>;
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PlanetComponentLoader {
+    private domPortalOutletCache = new WeakMap<any, DomPortalOutlet>();
+
+    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> {
+        if (globalPlanet.apps[name] && globalPlanet.apps[name].appModuleRef) {
+            return of(globalPlanet.apps[name]);
+        } else {
+            const app = this.applicationService.getAppByName(name);
+            return this.applicationLoader.preload(app, true).pipe(
+                map(() => {
+                    return globalPlanet.apps[name];
+                })
+            );
+        }
+    }
+
+    private createInjector<TData>(
+        appModuleRef: NgModuleRef<any>,
+        componentRef: PlanetComponentRef<TData>
+    ): PortalInjector {
+        const injectionTokens = new WeakMap<any, any>([[PlanetComponentRef, componentRef]]);
+        const defaultInjector = appModuleRef.injector;
+        return new PortalInjector(defaultInjector, injectionTokens);
+    }
+
+    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 createWrapperElement(config: PlantComponentConfig) {
+        const container = this.getContainerElement(config);
+        const element = this.document.createElement('div');
+        const subApp = this.applicationService.getAppByName(this.ngModuleRef.instance.appName);
+        element.classList.add(componentWrapperClass);
+        element.setAttribute('planet-inline', '');
+        if (config.wrapperClass) {
+            element.classList.add(config.wrapperClass);
+        }
+        if (subApp && subApp.stylePrefix) {
+            element.classList.add(subApp.stylePrefix);
+        }
+        container.appendChild(element);
+        return element;
+    }
+
+    private attachComponent<TData>(
+        plantComponent: PlanetComponent,
+        appModuleRef: NgModuleRef<any>,
+        config: PlantComponentConfig
+    ): PlanetComponentRef<TData> {
+        const plantComponentRef = new PlanetComponentRef();
+        const componentFactoryResolver = appModuleRef.componentFactoryResolver;
+        const appRef = this.applicationRef;
+        const injector = this.createInjector<TData>(appModuleRef, plantComponentRef);
+        const wrapper = this.createWrapperElement(config);
+        let portalOutlet = this.domPortalOutletCache.get(wrapper);
+        if (portalOutlet) {
+            portalOutlet.detach();
+        } else {
+            portalOutlet = new DomPortalOutlet(wrapper, componentFactoryResolver, appRef, injector);
+            this.domPortalOutletCache.set(wrapper, portalOutlet);
+        }
+        const componentPortal = new ComponentPortal(plantComponent.component, null);
+        const componentRef = portalOutlet.attachComponentPortal<TData>(componentPortal);
+        if (config.initialState) {
+            Object.assign(componentRef.instance, config.initialState);
+        }
+        plantComponentRef.componentInstance = componentRef.instance;
+        plantComponentRef.componentRef = componentRef;
+        plantComponentRef.wrapperElement = wrapper;
+        plantComponentRef.dispose = () => {
+            this.domPortalOutletCache.delete(wrapper);
+            portalOutlet.dispose();
+        };
+        return plantComponentRef;
+    }
+
+    private registerComponentFactory(componentOrComponents: PlanetComponent | PlanetComponent[]) {
+        const app = this.ngModuleRef.instance.appName;
+        this.getPlantAppRef(app).subscribe(appRef => {
+            appRef.registerComponentFactory((componentName: string, config: PlantComponentConfig<any>) => {
+                const components = coerceArray(componentOrComponents);
+                const component = components.find(item => item.name === componentName);
+                if (component) {
+                    return this.ngZone.run(() => {
+                        const componentRef = this.attachComponent<any>(component, appRef.appModuleRef, config);
+                        return componentRef;
+                    });
+                } else {
+                    throw Error(`unregistered component ${componentName} in app ${app}`);
+                }
+            });
+        });
+    }
+
+    register(components: PlanetComponent | PlanetComponent[]) {
+        setTimeout(() => {
+            this.registerComponentFactory(components);
+        });
+    }
+
+    load<TComp = unknown, TData = unknown>(
+        app: string,
+        componentName: string,
+        config: PlantComponentConfig<TData>
+    ): Observable<PlanetComponentRef<TComp>> {
+        const result = this.getPlantAppRef(app).pipe(
+            delayWhen(appRef => {
+                if (appRef.getComponentFactory()) {
+                    return of('');
+                } else {
+                    // Because register use 'setTimeout',so timer 20
+                    return timer(20);
+                }
+            }),
+            map(appRef => {
+                const componentFactory = appRef.getComponentFactory();
+                if (componentFactory) {
+                    return componentFactory<TData, TComp>(componentName, config);
+                } else {
+                    throw new Error(`${app}'s component(${componentName}) is not registered`);
+                }
+            }),
+            shareReplay()
+        );
+        result.subscribe();
+        return result;
+    }
+}

package/packages/planet/src/component/planet-component-ref.ts

@@ -0,0 +1,8 @@
+import { ComponentRef, ElementRef } from '@angular/core';
+
+export class PlanetComponentRef<TComp = any> {
+    wrapperElement: HTMLElement;
+    componentInstance: TComp;
+    componentRef: ComponentRef<TComp>;
+    dispose: () => void;
+}

package/{component/plant-component.config.d.ts → packages/planet/src/component/plant-component.config.ts}

@@ -1,10 +1,10 @@
-import { ElementRef } from '@angular/core';
-export declare class PlantComponentConfig<TData = any> {
+import { ViewContainerRef, ElementRef } from '@angular/core';
+
+export class PlantComponentConfig<TData = any> {
     /** Load target container */
     container: HTMLElement | ElementRef<HTMLElement | any>;
     /** Component wrapper class. */
     wrapperClass?: string;
     /** Data being injected into the child component. */
-    initialState?: TData | null;
+    initialState?: TData | null = null;
 }
-//# sourceMappingURL=plant-component.config.d.ts.map

package/packages/planet/src/debug.spec.ts

@@ -0,0 +1,58 @@
+import { createDebug, clearDebugFactory, setDebugFactory, getDebugFactory, Debug, Debugger } from './debug';
+
+describe('debug', () => {
+    afterEach(() => {
+        clearDebugFactory();
+    });
+
+    it('should bypass create debug and log message', () => {
+        const debug = createDebug('app-loader');
+        debug('this is debug message');
+        expect(true).toBe(true);
+    });
+
+    it('should set debug factory success', () => {
+        const mockDebugFactory = function(namespace: string): Debugger {
+            return undefined;
+        } as Debug;
+        setDebugFactory(mockDebugFactory);
+        const debugFactory = getDebugFactory();
+        expect(debugFactory).toBe(mockDebugFactory);
+    });
+
+    it('should set debug factory fail', () => {
+        const mockDebugFactory = {} as Debug;
+        expect(() => {
+            setDebugFactory(mockDebugFactory);
+        }).toThrowError('debug factory type is invalid, must be function');
+    });
+
+    it('should use custom debug factory to debug', () => {
+        const mockDebug = jasmine.createSpy('mock debug');
+        const mockDebugFactory = jasmine.createSpy('mock debug factory').and.callFake(namespace => {
+            expect(namespace).toEqual('planet:app-loader');
+            return mockDebug;
+        });
+        setDebugFactory(mockDebugFactory as any);
+        const debug = createDebug('app-loader');
+        expect(mockDebug).not.toHaveBeenCalled();
+        debug('this is debug message');
+        expect(mockDebug).toHaveBeenCalled();
+
+        expect(mockDebug).toHaveBeenCalledWith('this is debug message', []);
+    });
+
+    it('should use cache debug for same namespace', () => {
+        const mockDebugFactory = jasmine.createSpy('mock debug factory').and.callFake(namespace => {
+            expect(namespace).toEqual('planet:app-loader');
+            return jasmine.createSpy('mock debug');
+        });
+        setDebugFactory(mockDebugFactory as any);
+        expect(mockDebugFactory).toHaveBeenCalledTimes(0);
+        const debug1 = createDebug('app-loader');
+        const debug2 = createDebug('app-loader');
+        debug1('message1');
+        debug2('message2');
+        expect(mockDebugFactory).toHaveBeenCalledTimes(1);
+    });
+});