fix(elements): template render part connectivity on embedded view destroy (#15784)

Author: damyanpetev

projects/igniteui-angular-elements/src/app/wrapper/template-ref-wrapper.ts

@@ -6,36 +6,37 @@ const PREFIX_IMPLICIT_PROP = '$implicit';
 
 /**
  * Wraps a template ref and exposes the entire context to the template as additional prop
+ * @internal
  */
 export class TemplateRefWrapper<C extends object> extends TemplateRef<C> {
 
-    get elementRef(): ElementRef<any> {
+    public override get elementRef(): ElementRef<any> {
         return this.innerTemplateRef.elementRef;
     }
 
     /** Create a wrapper around TemplateRef with the context exposed */
-    constructor(public innerTemplateRef: TemplateRef<C>, private _templateFunction: any) {
+    constructor(public innerTemplateRef: TemplateRef<C>, private _templateFunction: any, private embeddedViewDestroyCallback: (container: HTMLElement) => void) {
         super();
     }
 
     private _contentContext = new Map<string, TemplateRefWrapperContentContext>();
 
-    override createEmbeddedView(context: C, injector?: Injector): EmbeddedViewRef<C> {
+    public override createEmbeddedView(context: C, injector?: Injector): EmbeddedViewRef<C> {
         return this.createEmbeddedViewImpl(context, injector);
     }
 
     /** @internal Angular 16 impl gets called directly... */
-    createEmbeddedViewImpl(context: C, injector?: Injector, _hydrationInfo: any = null): EmbeddedViewRef<C> {
+    public createEmbeddedViewImpl(context: C, injector?: Injector, _hydrationInfo: any = null): EmbeddedViewRef<C> {
         //#region bridged template props
-        let isBridged = !!this._templateFunction.___isBridged;
+        const isBridged = !!this._templateFunction.___isBridged;
         let contentContext: TemplateRefWrapperContentContext;
         let contentId: string;
         let root: any;
         //#endregion
 
         // https://github.com/angular/angular/pull/51887
         /**  Angular 17+ context is behind a proxy: will throw on set for templates without context & underlying object will change, so Proxy extra props on top */
-        let ctx = <C>new Proxy(context, {
+        const ctx = <C>new Proxy(context, {
             has(_target, prop): boolean {
                 if (prop === IMPLICIT_PROP) {
                     return true;
@@ -79,24 +80,28 @@ export class TemplateRefWrapper<C extends object> extends TemplateRef<C> {
             this._contentContext.set(contentId, contentContext);
             this._templateFunction.___onTemplateInit(this._templateFunction, root, contentContext);
             //contentContext.templateFunction.___onTemplateContextChanged(contentContext.templateFunction, contentContext.root, context);
+        }
 
-            viewRef.onDestroy(() => {
+        viewRef.onDestroy(() => {
+            this.embeddedViewDestroyCallback(viewRef.rootNodes[0]);
+            if (isBridged) {
                 this.destroyingBridgedView(contentContext);
-            });
-        }
+            }
+        });
 
         return viewRef;
     }
 
-    destroyingBridgedView(contentContext: TemplateRefWrapperContentContext) {
+    private destroyingBridgedView(contentContext: TemplateRefWrapperContentContext) {
         this._templateFunction.___onTemplateTeardown(this._templateFunction, contentContext.root, contentContext);
         this._contentContext.delete(contentContext._id);
     }
 
 }
 
+/** @internal */
 class TemplateRefWrapperContentContext {
-    _id: string;
-    root: any;
-    templateFunction: any;
+    public _id: string;
+    public root: any;
+    public templateFunction: any;
 }

projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.spec.ts

@@ -1,7 +1,21 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { html } from 'lit-html';
+import { AsyncDirective, directive } from 'lit/async-directive.js';
 import { TemplateWrapperComponent } from './wrapper.component';
 
+const directiveLog = [];
+class ToLowerAsyncDirective extends AsyncDirective {
+    public override render(text: string) {
+        directiveLog.push('render');
+        return text.toLocaleLowerCase();
+    }
+
+    protected override disconnected(): void {
+        directiveLog.push('disconnected');
+    }
+  }
+  export const toLowerAsync = directive(ToLowerAsyncDirective);
+
 describe('WrapperComponent', () => {
   let component: TemplateWrapperComponent;
   let fixture: ComponentFixture<TemplateWrapperComponent>;
@@ -22,4 +36,31 @@ describe('WrapperComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should render template', () => {
+    const context = { text: "Oh hi" };
+    const templateRef = component.addTemplate((ctx) => html`<span id="template1">${ctx.text}</span>`);
+    const embeddedView = templateRef.createEmbeddedView(context);
+    embeddedView.detectChanges();
+
+    const span = embeddedView.rootNodes[0].querySelector("#template1");
+    expect(span).toBeDefined();
+    expect(span.textContent).toBe(context.text);
+  });
+
+
+  it('should update connectivity on template with AsyncDirective', () => {
+    const context = { text: "OH HI" };
+    const templateRef = component.addTemplate((ctx) => html`<span id="template1">${toLowerAsync(ctx.text)}</span>`);
+    const embeddedView = templateRef.createEmbeddedView(context);
+    embeddedView.detectChanges();
+
+    const span = embeddedView.rootNodes[0].querySelector("#template1");
+    expect(span).toBeDefined();
+    expect(span.textContent).toBe(context.text.toLocaleLowerCase());
+    expect(directiveLog).toEqual(['render']);
+
+    embeddedView.destroy();
+    expect(directiveLog).toEqual(['render', 'disconnected']);
+  });
 });

projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectorRef, Component, QueryList, TemplateRef, ViewChildren } fr
 import { Subject } from 'rxjs';
 import { TemplateRefWrapper } from './template-ref-wrapper';
 
-import { render, TemplateResult } from 'lit-html';
+import { render, type RootPart, type TemplateResult } from 'lit-html';
 
 type TemplateFunction = (arg: any) => TemplateResult;
 
@@ -17,6 +17,8 @@ export class TemplateWrapperComponent {
     public templateFunctions: TemplateFunction[] = [];
     public templateRendered = new Subject<HTMLElement>();
 
+    private childParts: WeakMap<HTMLElement, RootPart> = new WeakMap();
+
     /**
      * All template refs
      * Warning: the first is always the root `@for` template
@@ -27,15 +29,25 @@ export class TemplateWrapperComponent {
 
     constructor(private cdr: ChangeDetectorRef) { }
 
-    public litRender(container: HTMLElement, templateFunc: (arg: any) => TemplateResult, arg: any) {
-        render(templateFunc(arg), container);
+    protected litRender(container: HTMLElement, templateFunc: (arg: any) => TemplateResult, arg: any) {
+        const part = render(templateFunc(arg), container);
+
+        let existingPart = this.childParts.get(container);
+        if (existingPart && existingPart !== part) {
+            // should be just one per container, this might be redundant
+            this.embeddedViewDestroyCallback(container);
+            existingPart = undefined;
+        }
+        if (!existingPart) {
+            this.childParts.set(container, part);
+        }
         this.templateRendered.next(container);
     }
 
     public addTemplate(templateFunc: TemplateFunction): TemplateRef<any> {
         this.templateFunctions.push(templateFunc);
         this.cdr.detectChanges();
-        return new TemplateRefWrapper(this.templateRefs.last, templateFunc);
+        return new TemplateRefWrapper(this.templateRefs.last, templateFunc, this.embeddedViewDestroyCallback);
     }
 
     public getTemplateFunction(templateRef: TemplateRefWrapper<any>): TemplateFunction | undefined {
@@ -45,4 +57,19 @@ export class TemplateWrapperComponent {
         const index = this.templateRefs.toArray().indexOf(templateRef.innerTemplateRef);
         return this.templateFunctions[index - 1];
     }
+
+    /**
+     * Set connectivity on RootPart produced by {@link https://lit.dev/docs/api/templates/#render render()}
+     * when Angular destroys the owning EmbeddedView.
+     *
+     * Required for any `AsyncDirective` in the template result, as those rely on the part to trigger
+     * the lifecycle hooks like `disconnected`, and is the "responsibility of the caller to `render`".
+     * @see {@link https://lit.dev/docs/api/misc/#RootPart} Details section.
+     */
+    protected embeddedViewDestroyCallback = (container: HTMLElement) => {
+        if (container && this.childParts.has(container)) {
+            this.childParts.get(container).setConnected(false);
+            this.childParts.delete(container);
+        }
+    }
 }