@worktile/planet 10.0.0 → 12.1.1

package/packages/planet/src/helpers.ts

@@ -0,0 +1,125 @@
+import { PlanetApplication } from './planet.class';
+
+const ELEMENT_NODE_TYPE = 1;
+
+export function hashCode(str: string): number {
+    let hash = 0;
+    let chr: number;
+    if (str.length === 0) {
+        return hash;
+    }
+    for (let i = 0; i < str.length; i++) {
+        chr = str.charCodeAt(i);
+        hash = (hash << 5) - hash + chr;
+        hash |= 0; // Convert to 32bit integer
+    }
+    return hash;
+}
+
+export function getHTMLElement(selector: string | HTMLElement): HTMLElement | null {
+    if (selector instanceof HTMLElement) {
+        return selector;
+    } else {
+        return document.querySelector(selector);
+    }
+}
+
+export function getTagNameByTemplate(template: string): string {
+    const element = createElementByTemplate(template);
+    return element ? element.nodeName : '';
+}
+
+export function createElementByTemplate(template: string) {
+    if (!template) {
+        return null;
+    }
+    const element = document.createRange().createContextualFragment(template).firstChild;
+    if (element && element.nodeType === ELEMENT_NODE_TYPE) {
+        return element as HTMLElement;
+    } else {
+        throw new Error(`invalid template '${template}'`);
+    }
+}
+
+export function coerceArray<T>(value: T | T[]): T[] {
+    return Array.isArray(value) ? value : [value];
+}
+
+export function isEmpty(value: any): boolean {
+    if (!value || value.length === 0) {
+        return true;
+    } else {
+        return false;
+    }
+}
+
+export function isFunction(value: any): value is Function {
+    const type = typeof value;
+    return !!value && type === 'function';
+}
+
+export function isObject(val: any) {
+    return val && typeof val === 'object';
+}
+/**
+ * Get file name from path
+ * 1. "main.js" => "main.js"
+ * 2. "assets/scripts/main.js" => "main.js"
+ * @param path path
+ */
+export function getResourceFileName(path: string) {
+    const lastSlashIndex = path.lastIndexOf('/');
+    if (lastSlashIndex >= 0) {
+        return path.slice(lastSlashIndex + 1);
+    } else {
+        return path;
+    }
+}
+
+/**
+ * Build resource path by manifest
+ * if manifest is { "main.js": "main.h2sh23abee.js"}
+ * 1. "main.js" => "main.h2sh23abee.js"
+ * 2. "assets/scripts/main.js" =>"assets/scripts/main.h2sh23abee.js"
+ * @param resourceFilePath Resource File Path
+ * @param manifestResult manifest
+ */
+export function buildResourceFilePath(resourceFilePath: string, manifestResult: { [key: string]: string }) {
+    const fileName = getResourceFileName(resourceFilePath);
+    if (manifestResult[fileName]) {
+        return resourceFilePath.replace(fileName, manifestResult[fileName]);
+    } else {
+        return resourceFilePath;
+    }
+}
+
+/**
+ * Get static resource full path
+ * @param app PlanetApplication
+ * @param manifestResult manifest
+ */
+export function getScriptsAndStylesFullPaths(app: PlanetApplication, manifestResult?: { [key: string]: string }) {
+    let scripts = app.scripts || [];
+    let styles = app.styles || [];
+    // combine resource path by manifest
+    if (manifestResult) {
+        scripts = scripts.map(script => {
+            return buildResourceFilePath(script, manifestResult);
+        });
+        styles = styles.map(style => {
+            return buildResourceFilePath(style, manifestResult);
+        });
+    }
+    if (app.resourcePathPrefix) {
+        scripts = scripts.map(script => {
+            return `${app.resourcePathPrefix}${script}`;
+        });
+        styles = styles.map(style => {
+            return `${app.resourcePathPrefix}${style}`;
+        });
+    }
+    return {
+        scripts: scripts,
+        styles: styles
+    };
+}

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

@@ -0,0 +1,79 @@
+import { TestBed } from '@angular/core/testing';
+import { NgxPlanetModule } from './module';
+import { NgModule } from '@angular/core';
+import { Planet } from './planet';
+import { clearGlobalPlanet } from './global-planet';
+import { PlanetApplicationService } from './application/planet-application.service';
+import { RouterTestingModule } from '@angular/router/testing';
+
+const app1 = {
+    name: 'app1',
+    hostParent: '.host-selector',
+    selector: 'app1-root',
+    routerPathPrefix: '/app1',
+    hostClass: 'app1-host',
+    preload: false,
+    resourcePathPrefix: '/static/app1/',
+    styles: ['styles/main.css'],
+    scripts: ['vendor.js', 'main.js'],
+    loadSerial: false,
+    manifest: '',
+    extra: {
+        appName: '应用1'
+    }
+};
+
+@NgModule({
+    imports: [NgxPlanetModule, RouterTestingModule.withRoutes([])]
+})
+class AppModule {}
+
+@NgModule({
+    imports: [NgxPlanetModule.forRoot([app1]), RouterTestingModule.withRoutes([])]
+})
+class AppModuleWithApps {}
+
+describe('NgxPlanetModule', () => {
+    afterEach(() => {
+        clearGlobalPlanet();
+        const applicationService = TestBed.inject(PlanetApplicationService);
+        applicationService['apps'] = [];
+        applicationService['appsMap'] = {};
+    });
+
+    describe('basic', () => {
+        beforeEach(() => {
+            TestBed.configureTestingModule({
+                imports: [AppModule]
+            });
+        });
+
+        it('should get NgxPlanetModule', () => {
+            expect(TestBed.inject(NgxPlanetModule)).toBeTruthy();
+        });
+
+        it('should get planet', () => {
+            const planet: Planet = TestBed.inject(Planet);
+            expect(planet).toBeTruthy();
+            expect(planet.getApps()).toEqual([]);
+        });
+    });
+
+    describe('forRoot', () => {
+        beforeEach(() => {
+            TestBed.configureTestingModule({
+                imports: [AppModuleWithApps]
+            });
+        });
+
+        it('should get NgxPlanetModule', () => {
+            expect(TestBed.inject(NgxPlanetModule)).toBeTruthy();
+        });
+
+        it('should register app1 when use forRoot', () => {
+            const planet: Planet = TestBed.inject(Planet);
+            expect(planet).toBeTruthy();
+            expect(planet.getApps()).toEqual([app1]);
+        });
+    });
+});

package/packages/planet/src/module.ts

@@ -0,0 +1,25 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { PlanetApplication, PLANET_APPLICATIONS } from './planet.class';
+import { HttpClientModule } from '@angular/common/http';
+import { EmptyComponent } from './empty/empty.component';
+
+@NgModule({
+    declarations: [EmptyComponent],
+    entryComponents: [EmptyComponent],
+    imports: [HttpClientModule],
+    providers: [],
+    exports: [HttpClientModule, EmptyComponent]
+})
+export class NgxPlanetModule {
+    static forRoot(apps: PlanetApplication[]): ModuleWithProviders<NgxPlanetModule> {
+        return {
+            ngModule: NgxPlanetModule,
+            providers: [
+                {
+                    provide: PLANET_APPLICATIONS,
+                    useValue: apps
+                }
+            ]
+        };
+    }
+}

package/packages/planet/src/planet.class.ts

@@ -0,0 +1,59 @@
+import { InjectionToken } from '@angular/core';
+import { Debug } from './debug';
+
+export interface PlanetOptions {
+    switchMode?: SwitchModes;
+    errorHandler: (error: Error) => void;
+    debugFactory?: Debug;
+}
+
+export interface PlanetApplication<TExtra = any> {
+    name: string;
+    // 应用加载的宿主元素或者选择器
+    hostParent: string | HTMLElement;
+
+    // 子应用的选择器
+    /**
+     * @deprecated please use new defineApplication to set selector
+     */
+    selector?: string;
+    // 子应用路由前缀路径
+    routerPathPrefix: string | RegExp;
+    // 宿主元素附加样式
+    hostClass?: string | string[];
+    // 是否需要预加载
+    preload?: boolean;
+    // 是否开启沙箱
+    sandbox?: boolean;
+    // 切换应用的模式
+    switchMode?: SwitchModes;
+    // 资源文件路径的前缀
+    resourcePathPrefix?: string;
+    // 样式前缀
+    stylePrefix?: string;
+    // 样式资源文件
+    styles?: string[];
+    // 脚本资源文件
+    scripts?: string[];
+    // 串行加载，默认并行加载脚本资源
+    loadSerial?: boolean;
+    // 皮肤样式的路径
+    themeStylesPath?: string;
+    // 应用程序打包后的脚本和样式文件替换
+    manifest?: string;
+    // 附加数据，主要应用于业务，比如图标，子应用的颜色，显示名等个性化配置
+    extra?: TExtra;
+}
+
+export enum SwitchModes {
+    default = 'default',
+    coexist = 'coexist'
+}
+
+export interface PlanetRouterEvent {
+    url: string;
+}
+
+const PLANET_APPLICATIONS = new InjectionToken<PlanetApplication>('PLANET_APPLICATIONS');
+
+export { PLANET_APPLICATIONS };

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

@@ -0,0 +1,226 @@
+import { TestBed, tick, fakeAsync, waitForAsync } from '@angular/core/testing';
+import { Planet } from './planet';
+import { NgxPlanetModule } from './module';
+import { Router, Event } from '@angular/router';
+import { SwitchModes, PlanetRouterEvent, PlanetOptions } from './planet.class';
+import { PlanetApplicationService } from './application/planet-application.service';
+import { PlanetApplicationLoader } from './application/planet-application-loader';
+import { EmptyComponent } from './empty/empty.component';
+import { NgZone } from '@angular/core';
+import { getApplicationService, getApplicationLoader, clearGlobalPlanet } from './global-planet';
+import { RouterTestingModule } from '@angular/router/testing';
+import { debug } from 'debug';
+import { getDebugFactory, setDebugFactory } from './debug';
+
+const app1 = {
+    name: 'app1',
+    hostParent: '.host-selector',
+    selector: 'app1-root',
+    routerPathPrefix: '/app1',
+    hostClass: 'app1-host',
+    preload: false,
+    switchMode: SwitchModes.default,
+    resourcePathPrefix: '/static/app1/',
+    styles: ['styles/main.css'],
+    scripts: ['vendor.js', 'main.js'],
+    loadSerial: false,
+    manifest: '',
+    extra: {
+        appName: '应用1'
+    }
+};
+
+const app2 = {
+    name: 'app2',
+    hostParent: '.host-selector',
+    selector: 'app2-root',
+    routerPathPrefix: '/app2',
+    hostClass: 'app2-host',
+    preload: false,
+    switchMode: SwitchModes.coexist,
+    resourcePathPrefix: '/static/app2',
+    styles: ['styles/main.css'],
+    scripts: ['vendor.js', 'main.js'],
+    loadSerial: false,
+    extra: {
+        appName: '应用2'
+    }
+};
+
+describe('Planet', () => {
+    let planet: Planet;
+    let planetApplicationService: PlanetApplicationService;
+    let planetApplicationLoader: PlanetApplicationLoader;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                NgxPlanetModule,
+                RouterTestingModule.withRoutes([
+                    {
+                        path: '**',
+                        component: EmptyComponent
+                    }
+                ])
+            ]
+        });
+        planet = TestBed.inject(Planet);
+        planetApplicationService = getApplicationService();
+        planetApplicationLoader = getApplicationLoader();
+    });
+
+    afterEach(() => {
+        clearGlobalPlanet();
+    });
+
+    it('should create planet', () => {
+        expect(planet).toBeTruthy();
+    });
+
+    it('should register app1', () => {
+        const registerSpy = spyOn(planetApplicationService, 'register');
+        expect(registerSpy).not.toHaveBeenCalled();
+        planet.registerApp(app1);
+        expect(registerSpy).toHaveBeenCalled();
+        expect(registerSpy).toHaveBeenCalledWith(app1);
+    });
+
+    it('should register multiple apps', () => {
+        const registerSpy = spyOn(planetApplicationService, 'register');
+        expect(registerSpy).not.toHaveBeenCalled();
+        planet.registerApps([app1, app2]);
+        expect(registerSpy).toHaveBeenCalled();
+        expect(registerSpy).toHaveBeenCalledWith([app1, app2]);
+    });
+
+    it('should unregister app', () => {
+        const unregisterSpy = spyOn(planetApplicationService, 'unregister');
+        expect(unregisterSpy).not.toHaveBeenCalled();
+        planet.unregisterApp('app1');
+        expect(unregisterSpy).toHaveBeenCalled();
+        expect(unregisterSpy).toHaveBeenCalledWith('app1');
+    });
+
+    it('should get apps', () => {
+        const getAppsSpy = spyOn(planetApplicationService, 'getApps');
+        getAppsSpy.and.returnValue([app1, app2]);
+        expect(getAppsSpy).not.toHaveBeenCalled();
+        const apps = planet.getApps();
+        expect(getAppsSpy).toHaveBeenCalled();
+        expect(apps).toEqual([app1, app2]);
+    });
+
+    it('should set options success', () => {
+        const setOptionsSpy = spyOn(planetApplicationLoader, 'setOptions');
+        expect(setOptionsSpy).not.toHaveBeenCalled();
+        const options: PlanetOptions = {
+            switchMode: SwitchModes.coexist,
+            errorHandler: () => {},
+            debugFactory: debug
+        };
+        planet.setOptions(options);
+        expect(setOptionsSpy).toHaveBeenCalled();
+        expect(setOptionsSpy).toHaveBeenCalledWith(options);
+        expect(getDebugFactory()).toEqual(debug);
+        setDebugFactory(null);
+    });
+
+    it('should reroute when start or navigateByUrl', fakeAsync(() => {
+        const router: Router = TestBed.inject(Router);
+        const ngZone: NgZone = TestBed.inject(NgZone);
+        const rerouteSpy = spyOn(planetApplicationLoader, 'reroute');
+        expect(rerouteSpy).not.toHaveBeenCalled();
+        planet.start();
+        expect(rerouteSpy).toHaveBeenCalledTimes(1);
+
+        ngZone.run(() => {
+            router.navigateByUrl('/app1/dashboard');
+        });
+
+        tick();
+
+        expect(rerouteSpy).toHaveBeenCalledTimes(2);
+        expect(rerouteSpy).toHaveBeenCalledWith({
+            url: '/app1/dashboard'
+        });
+
+        ngZone.run(() => {
+            router.navigateByUrl('/app1/users');
+        });
+        tick();
+
+        expect(rerouteSpy).toHaveBeenCalledTimes(3);
+        expect(rerouteSpy).toHaveBeenCalledWith({
+            url: '/app1/users'
+        });
+    }));
+
+    it('should load app when redirect to app url "users"', fakeAsync(() => {
+        const router: Router = TestBed.inject(Router);
+        const ngZone: NgZone = TestBed.inject(NgZone);
+        const rerouteSpy = spyOn(planetApplicationLoader, 'reroute');
+        router.resetConfig([
+            {
+                path: '',
+                redirectTo: 'users',
+                pathMatch: 'full'
+            },
+            {
+                path: 'redirect-to-users',
+                redirectTo: 'users',
+                pathMatch: 'full'
+            },
+            {
+                path: 'users',
+                component: EmptyComponent
+            }
+        ]);
+        let planetRouterEvent!: PlanetRouterEvent;
+        rerouteSpy.and.callFake(function(event) {
+            planetRouterEvent = event;
+        });
+        expect(rerouteSpy).toHaveBeenCalledTimes(0);
+        planet.start();
+        expect(rerouteSpy).toHaveBeenCalledTimes(1);
+        ngZone.run(() => {
+            router.navigateByUrl('/redirect-to-users');
+        });
+        tick();
+        expect(rerouteSpy).toHaveBeenCalledTimes(2);
+        expect(planetRouterEvent.url).toEqual('/users');
+    }));
+
+    it('should reroute not be call when planet stop', fakeAsync(() => {
+        const router: Router = TestBed.inject(Router);
+        const ngZone: NgZone = TestBed.inject(NgZone);
+        const rerouteSpy = spyOn(planetApplicationLoader, 'reroute');
+        expect(rerouteSpy).not.toHaveBeenCalled();
+        planet.start();
+        expect(rerouteSpy).toHaveBeenCalledTimes(1);
+
+        ngZone.run(() => {
+            router.navigateByUrl('/app1/dashboard');
+        });
+
+        tick();
+
+        expect(rerouteSpy).toHaveBeenCalledTimes(2);
+        expect(rerouteSpy).toHaveBeenCalledWith({
+            url: '/app1/dashboard'
+        });
+
+        planet.stop();
+
+        ngZone.run(() => {
+            router.navigateByUrl('/app1/users');
+        });
+        tick();
+
+        // rerouteSpy should not be call
+        // url should not change
+        expect(rerouteSpy).toHaveBeenCalledTimes(2);
+        expect(rerouteSpy).toHaveBeenCalledWith({
+            url: '/app1/dashboard'
+        });
+    }));
+});

package/packages/planet/src/planet.ts

@@ -0,0 +1,113 @@
+import { Injectable, Inject, Optional, Injector } from '@angular/core';
+import { NavigationEnd, RouterEvent, Router } from '@angular/router';
+import { PlanetOptions, PlanetApplication, PLANET_APPLICATIONS } from './planet.class';
+import { PlanetApplicationService } from './application/planet-application.service';
+import {
+    PlanetApplicationLoader,
+    AppsLoadingStartEvent,
+    AppStatusChangeEvent
+} from './application/planet-application-loader';
+import { Observable, Subscription } from 'rxjs';
+import { filter, startWith, distinctUntilChanged, map } from 'rxjs/operators';
+import {
+    setPortalApplicationData,
+    setApplicationLoader,
+    setApplicationService,
+    getApplicationLoader,
+    getApplicationService
+} from './global-planet';
+import { setDebugFactory } from './debug';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class Planet {
+    private get planetApplicationLoader(): PlanetApplicationLoader {
+        return getApplicationLoader();
+    }
+
+    private get planetApplicationService() {
+        return getApplicationService();
+    }
+
+    public get loadingDone() {
+        return this.planetApplicationLoader.loadingDone;
+    }
+
+    public get appStatusChange(): Observable<AppStatusChangeEvent> {
+        return this.planetApplicationLoader.appStatusChange;
+    }
+
+    public get appsLoadingStart(): Observable<AppsLoadingStartEvent> {
+        return this.planetApplicationLoader.appsLoadingStart;
+    }
+
+    private subscription?: Subscription;
+
+    constructor(
+        private injector: Injector,
+        private router: Router,
+        @Inject(PLANET_APPLICATIONS) @Optional() planetApplications: PlanetApplication[]
+    ) {
+        if (!this.planetApplicationLoader) {
+            setApplicationLoader(this.injector.get(PlanetApplicationLoader));
+        }
+        if (!this.planetApplicationService) {
+            setApplicationService(this.injector.get(PlanetApplicationService));
+        }
+
+        if (planetApplications) {
+            this.registerApps(planetApplications);
+        }
+    }
+
+    setOptions(options: Partial<PlanetOptions>) {
+        this.planetApplicationLoader.setOptions(options);
+        if (options.debugFactory) {
+            setDebugFactory(options.debugFactory);
+        }
+    }
+
+    setPortalAppData<T>(data: T) {
+        setPortalApplicationData(data);
+    }
+
+    registerApp<TExtra>(app: PlanetApplication<TExtra>) {
+        this.planetApplicationService.register(app);
+    }
+
+    registerApps<TExtra>(apps: PlanetApplication<TExtra>[]) {
+        this.planetApplicationService.register(apps);
+    }
+
+    unregisterApp(name: string) {
+        this.planetApplicationService.unregister(name);
+    }
+
+    getApps() {
+        return this.planetApplicationService.getApps();
+    }
+
+    start() {
+        this.subscription = (this.router.events as Observable<RouterEvent>)
+            .pipe(
+                filter(event => {
+                    return event instanceof NavigationEnd;
+                }),
+                map(event => {
+                    return (event as NavigationEnd).urlAfterRedirects || event.url;
+                }),
+                startWith(location.pathname),
+                distinctUntilChanged()
+            )
+            .subscribe((url: string) => {
+                this.planetApplicationLoader.reroute({
+                    url: url
+                });
+            });
+    }
+
+    stop() {
+        this.subscription?.unsubscribe();
+    }
+}

package/{public-api.d.ts → packages/planet/src/public-api.ts}

@@ -1,3 +1,7 @@
+/*
+ * Public API Surface of core
+ */
+
 export * from './planet';
 export * from './global-event-dispatcher';
 export * from './application/portal-application';

package/packages/planet/src/sandbox/constants.ts

@@ -0,0 +1,6 @@
+export const PLANET_SANDBOX_WINDOW_WHITELIST = window['___PLANET_SANDBOX_WINDOW_WHITELIST___'];
+export const PLANET_SANDBOX_DOCUMENT_WHITELIST = window['___PLANET_SANDBOX_DOCUMENT_WHITELIST___'];
+export const SANDBOX_INSTANCE = Symbol.for('PLANET_SANDBOX_INSTANCE');
+export const RAW_NODE = Symbol.for('PLANET_RAW_NODE');
+export const WINDOW_BIND_FN = Symbol.for('PLANET_WINDOW_BIND_FN');
+export const DOCUMENT_BIND_FN = Symbol.for('PLANET_DOCUMENT_BIND_FN');

package/packages/planet/src/sandbox/exec.ts

@@ -0,0 +1,22 @@
+import { Global } from './types';
+
+export function execScript(code: string, url: string, global: Global, strictGlobal: boolean) {
+    const sourceUrl = '//# sourceURL='.concat(url, '\n');
+    const window = (0, eval)('window');
+    window.tempGlobal = global;
+    code = strictGlobal
+        ? ';(function(window, self, globalThis){with(window){;'
+              .concat(code, '\n')
+              .concat(
+                  sourceUrl,
+                  '}}).bind(window.tempGlobal)(window.tempGlobal, window.tempGlobal, window.tempGlobal);'
+              )
+        : ';(function(window, self, globalThis){;'
+              .concat(code, '\n')
+              .concat(
+                  sourceUrl,
+                  '}).bind(window.tempGlobal)(window.tempGlobal, window.tempGlobal, window.tempGlobal);'
+              );
+    (0, eval)(code);
+    delete window.tempGlobal;
+}

package/packages/planet/src/sandbox/index.ts

@@ -0,0 +1,24 @@
+import { SandboxOptions } from './sandbox';
+import { ProxySandbox } from './proxy/proxy-sandbox';
+import { SnapshotSandbox } from './snapshot/snapshot-sandbox';
+import { SANDBOX_INSTANCE } from './constants';
+
+export { Sandbox } from './sandbox';
+
+const defaultOptions: Partial<SandboxOptions> = {
+    strictGlobal: false
+};
+
+export function createSandbox(app: string, options?: SandboxOptions) {
+    options = Object.assign({}, defaultOptions, options || {});
+
+    if (window.Proxy) {
+        return new ProxySandbox(app, options);
+    } else {
+        return new SnapshotSandbox(app, options);
+    }
+}
+
+export function getSandboxInstance() {
+    return window[SANDBOX_INSTANCE];
+}