@worktile/planet 14.0.0 → 14.1.1

package/fesm2020/worktile-planet.mjs

@@ -1,12 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, NgZone, Inject, Optional, Component, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, NgZone, Inject, Optional, Component, Injector, createComponent, EventEmitter, Directive, Input, Output, NgModule } from '@angular/core';
 import * as i3 from '@angular/router';
 import { Router, NavigationEnd } from '@angular/router';
 import * as i1 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
-import { map, concatAll, switchMap, take, shareReplay, filter, distinctUntilChanged, catchError, tap, share, startWith, delayWhen } from 'rxjs/operators';
+import { map, concatAll, switchMap, take, shareReplay, filter, distinctUntilChanged, catchError, tap, share, startWith, delayWhen, takeUntil } from 'rxjs/operators';
 import { Observable, of, concat, forkJoin, from, Subject, timer } from 'rxjs';
-import { PortalInjector, DomPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
 import { DOCUMENT } from '@angular/common';
 
 var SwitchModes;
@@ -1854,32 +1853,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                 }]
         }] });
 
-class NgxPlanetModule {
-    static forRoot(apps) {
-        return {
-            ngModule: NgxPlanetModule,
-            providers: [
-                {
-                    provide: PLANET_APPLICATIONS,
-                    useValue: apps
-                }
-            ]
-        };
-    }
-}
-NgxPlanetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: NgxPlanetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgxPlanetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: NgxPlanetModule, declarations: [EmptyComponent], imports: [HttpClientModule], exports: [HttpClientModule, EmptyComponent] });
-NgxPlanetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: NgxPlanetModule, imports: [HttpClientModule, HttpClientModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: NgxPlanetModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [EmptyComponent],
-                    imports: [HttpClientModule],
-                    providers: [],
-                    exports: [HttpClientModule, EmptyComponent]
-                }]
-        }] });
-
 class PlanetComponentRef {
 }
 
@@ -1890,7 +1863,6 @@ class PlanetComponentLoader {
         this.ngModuleRef = ngModuleRef;
         this.ngZone = ngZone;
         this.document = document;
-        this.domPortalOutletCache = new WeakMap();
     }
     get applicationLoader() {
         return getApplicationLoader();
@@ -1910,9 +1882,15 @@ class PlanetComponentLoader {
         }
     }
     createInjector(appModuleRef, componentRef) {
-        const injectionTokens = new WeakMap([[PlanetComponentRef, componentRef]]);
-        const defaultInjector = appModuleRef.injector;
-        return new PortalInjector(defaultInjector, injectionTokens);
+        return Injector.create({
+            providers: [
+                {
+                    provide: PlanetComponentRef,
+                    useValue: componentRef
+                }
+            ],
+            parent: appModuleRef.injector
+        });
     }
     getContainerElement(config) {
         if (!config.container) {
@@ -1927,49 +1905,55 @@ class PlanetComponentLoader {
             }
         }
     }
-    createWrapperElement(config) {
-        const container = this.getContainerElement(config);
-        const element = this.document.createElement('div');
+    insertComponentRootNodeToContainer(container, componentRootNode, hostClass) {
         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);
+        componentRootNode.classList.add(componentWrapperClass);
+        componentRootNode.setAttribute('planet-inline', '');
+        if (hostClass) {
+            componentRootNode.classList.add(hostClass);
         }
         if (subApp && subApp.stylePrefix) {
-            element.classList.add(subApp.stylePrefix);
+            componentRootNode.classList.add(subApp.stylePrefix);
+        }
+        // container 是注释则在前方插入，否则在元素内部插入
+        if (container.nodeType === 8) {
+            container.parentElement.insertBefore(componentRootNode, container);
+        }
+        else {
+            container.appendChild(componentRootNode);
         }
-        container.appendChild(element);
-        return element;
     }
     attachComponent(plantComponent, appModuleRef, config) {
         const plantComponentRef = new PlanetComponentRef();
-        const componentFactoryResolver = appModuleRef.componentFactoryResolver;
         const appRef = this.applicationRef;
         const injector = this.createInjector(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(componentPortal);
+        const container = this.getContainerElement(config);
+        const componentRef = createComponent(plantComponent.component, {
+            environmentInjector: appModuleRef.injector,
+            elementInjector: injector
+        });
+        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.wrapperElement = wrapper;
+        plantComponentRef.hostElement = componentRootNode;
         plantComponentRef.dispose = () => {
-            this.domPortalOutletCache.delete(wrapper);
-            portalOutlet.dispose();
+            if (appRef.viewCount > 0) {
+                appRef.detachView(componentRef.hostView);
+            }
+            componentRef?.destroy();
+            componentRootNode.remove();
         };
         return plantComponentRef;
     }
+    /** Gets the root HTMLElement for an instantiated component. */
+    getComponentRootNode(componentRef) {
+        return componentRef.hostView.rootNodes[0];
+    }
     registerComponentFactory(componentOrComponents) {
         const app = this.ngModuleRef.instance.appName;
         this.getPlantAppRef(app).subscribe(appRef => {
@@ -2027,6 +2011,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                     args: [DOCUMENT]
                 }] }]; } });
 
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+class PlanetComponentOutlet {
+    constructor(elementRef, planetComponentLoader, ngZone) {
+        this.elementRef = elementRef;
+        this.planetComponentLoader = planetComponentLoader;
+        this.ngZone = ngZone;
+        this.planetComponentLoaded = new EventEmitter();
+        this.destroyed$ = new Subject();
+    }
+    ngOnChanges(changes) {
+        if (this.planetComponentOutlet && !changes.planetComponentOutlet.isFirstChange()) {
+            this.loadComponent();
+        }
+    }
+    ngAfterViewInit() {
+        this.loadComponent();
+    }
+    loadComponent() {
+        this.clear();
+        if (this.planetComponentOutlet && this.planetComponentOutletApp) {
+            this.planetComponentLoader
+                .load(this.planetComponentOutletApp, this.planetComponentOutlet, {
+                container: this.elementRef.nativeElement,
+                initialState: this.planetComponentOutletInitialState
+            })
+                .pipe(takeUntil(this.destroyed$))
+                .subscribe(componentRef => {
+                this.componentRef = componentRef;
+                this.ngZone.run(() => {
+                    Promise.resolve().then(() => {
+                        this.planetComponentLoaded.emit(this.componentRef);
+                    });
+                });
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.clear();
+        this.destroyed$.complete();
+    }
+    clear() {
+        this.componentRef?.dispose();
+        this.destroyed$.next();
+    }
+}
+PlanetComponentOutlet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: PlanetComponentOutlet, deps: [{ token: i0.ElementRef }, { token: PlanetComponentLoader }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+PlanetComponentOutlet.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.2", type: PlanetComponentOutlet, selector: "[planetComponentOutlet]", inputs: { planetComponentOutlet: "planetComponentOutlet", planetComponentOutletApp: "planetComponentOutletApp", planetComponentOutletInitialState: "planetComponentOutletInitialState" }, outputs: { planetComponentLoaded: "planetComponentLoaded" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: PlanetComponentOutlet, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[planetComponentOutlet]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: PlanetComponentLoader }, { type: i0.NgZone }]; }, propDecorators: { planetComponentOutlet: [{
+                type: Input
+            }], planetComponentOutletApp: [{
+                type: Input
+            }], planetComponentOutletInitialState: [{
+                type: Input
+            }], planetComponentLoaded: [{
+                type: Output
+            }] } });
+
+class NgxPlanetModule {
+    static forRoot(apps) {
+        return {
+            ngModule: NgxPlanetModule,
+            providers: [
+                {
+                    provide: PLANET_APPLICATIONS,
+                    useValue: apps
+                }
+            ]
+        };
+    }
+}
+NgxPlanetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: NgxPlanetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxPlanetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: NgxPlanetModule, declarations: [EmptyComponent, PlanetComponentOutlet], imports: [HttpClientModule], exports: [HttpClientModule, EmptyComponent, PlanetComponentOutlet] });
+NgxPlanetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: NgxPlanetModule, imports: [HttpClientModule, HttpClientModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: NgxPlanetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [EmptyComponent, PlanetComponentOutlet],
+                    imports: [HttpClientModule],
+                    providers: [],
+                    exports: [HttpClientModule, EmptyComponent, PlanetComponentOutlet]
+                }]
+        }] });
+
 class PlantComponentConfig {
     constructor() {
         /** Data being injected into the child component. */
@@ -2042,5 +2114,5 @@ class PlantComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ApplicationStatus, AssetsLoader, EmptyComponent, GlobalEventDispatcher, NgxPlanetModule, PLANET_APPLICATIONS, Planet, PlanetApplicationLoader, PlanetApplicationRef, PlanetApplicationService, PlanetComponentLoader, PlanetComponentRef, PlanetPortalApplication, PlantComponentConfig, SwitchModes, defineApplication, getPlanetApplicationRef, getPortalApplicationData };
+export { ApplicationStatus, AssetsLoader, EmptyComponent, GlobalEventDispatcher, NgxPlanetModule, PLANET_APPLICATIONS, Planet, PlanetApplicationLoader, PlanetApplicationRef, PlanetApplicationService, PlanetComponentLoader, PlanetComponentOutlet, PlanetComponentRef, PlanetPortalApplication, PlantComponentConfig, SwitchModes, defineApplication, getPlanetApplicationRef, getPortalApplicationData };
 //# sourceMappingURL=worktile-planet.mjs.map