chore: update detached loader utils

Author: edusperoni

apps/nativescript-demo-ng/src/tests/detached-utils-tests.ts

@@ -0,0 +1,97 @@
+import { Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, EmbeddedViewRef, Injector, NgModule, NO_ERRORS_SCHEMA, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { generateDetachedLoader, generateNativeScriptView, NgViewRef } from '@nativescript/angular';
+import { GridLayout, ProxyViewContainer } from '@nativescript/core';
+
+@Component({
+  template: `<ng-container #vc></ng-container><ng-template #template><GridLayout></GridLayout></ng-template>`,
+})
+export class GenerateViewComponent {
+  @ViewChild('vc', { read: ViewContainerRef }) vc: ViewContainerRef;
+  @ViewChild('template', { read: TemplateRef }) template: TemplateRef<void>;
+  constructor(public injector: Injector) {}
+}
+
+@Component({
+  template: `<GridLayout></GridLayout>`,
+})
+export class GeneratedComponent {}
+
+@NgModule({
+  declarations: [GeneratedComponent, GenerateViewComponent],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class GeneratedModule {}
+
+describe('generateNativeScriptView', () => {
+  let fixture: ComponentFixture<GenerateViewComponent>;
+  let cleanup: Array<NgViewRef<unknown> | ComponentRef<unknown> | EmbeddedViewRef<unknown>> = [];
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [GenerateViewComponent, GeneratedComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(GenerateViewComponent);
+    fixture.detectChanges();
+    await fixture.whenRenderingDone();
+  });
+  afterEach(() => {
+    cleanup.forEach((v) => {
+      if (v instanceof NgViewRef) {
+        v.ref.destroy();
+      }
+      if (v instanceof ComponentRef || v instanceof EmbeddedViewRef) {
+        v.destroy();
+      }
+    });
+    cleanup = [];
+  });
+
+  it('should generate a native view', () => {
+    const ngViewRef = generateNativeScriptView(GeneratedComponent, {
+      injector: fixture.componentRef.instance.injector,
+    });
+    cleanup.push(ngViewRef);
+    expect(ngViewRef.view).toBeInstanceOf(ProxyViewContainer);
+    expect(ngViewRef.firstNativeLikeView).toBeInstanceOf(GridLayout);
+  });
+
+  it('should generate a native view from template', () => {
+    const ngViewRef = generateNativeScriptView(fixture.componentInstance.template, {
+      injector: fixture.componentRef.instance.injector,
+    });
+    cleanup.push(ngViewRef);
+    expect(ngViewRef.view).toBeInstanceOf(GridLayout);
+    expect(ngViewRef.firstNativeLikeView).toBeInstanceOf(GridLayout);
+  });
+
+  it('should reuse a DetachedLoaderRef', () => {
+    const containerRef = generateDetachedLoader(fixture.componentRef.instance.injector.get(ComponentFactoryResolver), fixture.componentRef.instance.injector);
+    cleanup.push(containerRef);
+    const ngViewRef = generateNativeScriptView(GeneratedComponent, {
+      injector: fixture.componentRef.instance.injector,
+      detachedLoaderRef: containerRef,
+    });
+    cleanup.push(ngViewRef);
+    ngViewRef.ref.destroy();
+    expect(containerRef.hostView.destroyed).toBeFalse();
+  });
+
+  it('should destroy a DetachedLoaderRef', () => {
+    const ngViewRef = generateNativeScriptView(GeneratedComponent, {
+      injector: fixture.componentRef.instance.injector,
+      viewContainerRef: fixture.componentInstance.vc,
+    });
+    cleanup.push(ngViewRef);
+    ngViewRef.ref.destroy();
+    expect((ngViewRef as any).detachedLoaderRef.hostView.destroyed).toBeTrue();
+  });
+
+  it('should destroy a DetachedLoaderRef from template', () => {
+    const ngViewRef = generateNativeScriptView(fixture.componentInstance.template, {
+      injector: fixture.componentRef.instance.injector,
+    });
+    cleanup.push(ngViewRef);
+    ngViewRef.ref.destroy();
+    expect((ngViewRef as any).detachedLoaderRef.hostView.destroyed).toBeTrue();
+  });
+});

packages/angular/src/lib/cdk/portal/nsdom-portal-outlet.ts

@@ -58,6 +58,10 @@ export class NativeScriptDomPortalOutlet extends BasePortalOutlet {
     }
     // At this point the component has been instantiated, so we move it to the location in the DOM
     // where we want it to be rendered.
+    const rootNode = this._getComponentRootNode(componentRef);
+    if (rootNode.parent) {
+      this._viewUtil.removeChild(rootNode.parent as View, rootNode);
+    }
     this._viewUtil.appendChild(this.outletElement, this._getComponentRootNode(componentRef));
 
     return componentRef;
@@ -76,7 +80,12 @@ export class NativeScriptDomPortalOutlet extends BasePortalOutlet {
     // But for the DomPortalOutlet the view can be added everywhere in the DOM
     // (e.g Overlay Container) To move the view to the specified host element. We just
     // re-append the existing root nodes.
-    viewRef.rootNodes.forEach((rootNode) => this._viewUtil.appendChild(this.outletElement, rootNode));
+    viewRef.rootNodes.forEach((rootNode) => {
+      if (rootNode.parent) {
+        this._viewUtil.removeChild(rootNode.parent as View, rootNode);
+      }
+      this._viewUtil.appendChild(this.outletElement, rootNode);
+    });
 
     // Note that we want to detect changes after the nodes have been moved so that
     // any directives inside the portal that are looking at the DOM inside a lifecycle

packages/angular/src/lib/detached-loader-utils.ts

@@ -28,7 +28,7 @@ export function generateDetachedLoader(resolver: ComponentFactoryResolver, injec
  * For opening modals and others, the firstNativeLikeView should be detached.
  * @param typeOrTemplate ComponentType or TemplateRef that should be instanced
  * @param options options for creating the view
- * @returns ComponentRef or EmbeddedViewRef for the type
+ * @returns NgViewRef
  */
 export function generateNativeScriptView<T>(
   typeOrTemplate: Type<T> | TemplateRef<T>,
@@ -71,6 +71,7 @@ export function generateNativeScriptView<T>(
     });
   }
   const viewRef = new NgViewRef(componentOrTemplateRef);
+  (viewRef as any).detachedLoaderRef = detachedLoaderRef;
   if (!options.keepNativeViewAttached) {
     viewRef.detachNativeLikeView();
   }

packages/angular/src/lib/view-refs.ts

@@ -30,7 +30,7 @@ export class NgViewRef<T> implements NgViewRef<T> {
 
   constructor(ref: EmbeddedViewRef<T> | ComponentRef<T>) {
     this.ref = ref;
-    this.view = ref instanceof EmbeddedViewRef ? ref.rootNodes.find((v) => !(v instanceof InvisibleNode)) : ref.location.nativeElement;
+    this.view = ref instanceof ComponentRef ? ref.location.nativeElement : ref.rootNodes.find((v) => !(v instanceof InvisibleNode));
     this.firstNativeLikeView = getFirstNativeLikeView(this.view);
   }