@worktile/planet 12.1.1 → 14.0.0-next.0

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

@@ -1,247 +0,0 @@
-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

@@ -1,187 +0,0 @@
-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

@@ -1,173 +0,0 @@
-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

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

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

@@ -1,58 +0,0 @@
-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);
-    });
-});