☁️ Nx Cloud Report

Attention: This version of the Nx Cloud GitHub bot will cease to function on July 1st, 2023. An organization admin can update your integration here.

CI is running/has finished running commands for commit a085ff3. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Sent with 💌 from NxCloud.

@arturovt thank u for the PR!! Is it possible to elaborate a bit on this? I did memory leak inspections before merging it, so same as @edbzn I cannot observe any problems with the current solution. Thanks for investigating btw :)

The spec defines the following:

Event listeners can be removed by utilizing the removeEventListener() method, passing the same arguments.

Browser engines store event listeners differently on elements, but usually by "joining" listeners and options.

Given the following example:

@Component({
  selector: 'app-root',
  template: `
    <section
      id="scroll"
      #scrollContainer
      style="height: 300px; width: 300px; overflow-y: scroll"
    >
      <p *ngFor="let _ of array">Hey</p>
    </section>
    <button (click)="destroy()"></button>
  `,
})
export class AppComponent {
  array = Array.from({ length: 40 });

  @ViewChild('scrollContainer', { static: true })
  scrollContainer!: ElementRef<HTMLElement>;

  private l = () => {
    console.log(this);
  };

  constructor(private ngModuleRef: NgModuleRef<unknown>) {}

  ngOnInit(): void {
    // @ts-ignore
    this.scrollContainer.nativeElement['__zone_symbol__addEventListener'](
      'scroll',
      this.l,
      { passive: true }
    );
  }

  ngOnDestroy() {
    // @ts-ignore
    this.scrollContainer.nativeElement['__zone_symbol__removeEventListener'](
      'scroll',
      this.l
    );
  }

  destroy() {
    this.ngModuleRef.destroy();
  }
}

If we click the 'destroy' button and save the snapshot in Firefox, we may see the folllowing:

Now let's find what captures section with its virtual address 0x7fe639b05900:

$ fxsnapshot 67708.fxsnapshot 'nodes { id: 0x7fe639b05900 }'

CaptureMap {
    lambdas: IdVec(
        [
            LambdaInfo {
                arity: 0,
                parent: None,
                captured: {},
            },
        ],
        PhantomData<fxsnapshot::query::ast::LambdaId>,
    ),
    uses: IdVec(
        [],
        PhantomData<fxsnapshot::query::ast::UseId>,
    ),
}

Which means the event listener still captures the element.

Chrome's Blink also expects the reference to be passed when calling removeEventListener:

bool EventTarget::removeEventListener(const AtomicString &event_type,
                                      const EventListener *listener,
                                      EventListenerOptions *options) {
  return RemoveEventListenerInternal(event_type, listener, options);
}

Firefox Gecko is also checking both listener and options passed:

if (listener->mListener == aListenerHolder &&
    listener->mFlags.EqualsForRemoval(aFlags)) {
  mListeners.RemoveElementAt(i);
}

One of the engines that's doesn't care about options is Safari's WebKit:

bool EventTarget::removeEventListener(const AtomicString& eventType, EventListener* listener, bool useCapture)

Since it doesn't have a signature where options should be passed when calling removeEventListener. Everything yields to the fact that browsers have different implementations of the spec.

Material is following the same approach and passes options back when removing event listeners: https://github.com/angular/components/blob/285f46dc2b4c5b127d356cb7c4714b221f03ce50/src/material/legacy-slider/slider.ts#L572-L573

Codecov Report

Merging #1563 (a085ff3) into main (addc3bd) will decrease coverage by 0.05%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             main    #1563      +/-   ##
==========================================
- Coverage   81.63%   81.58%   -0.05%     
==========================================
  Files         105      104       -1     
  Lines        2232     2227       -5     
  Branches      407      406       -1     
==========================================
- Hits         1822     1817       -5     
  Misses        332      332              
  Partials       78       78              

Flags with carried forward coverage won't be shown. Click here to find out more.

see 3 files with indirect coverage changes