[Tutorial] show using AbortController for simpler cleanup with event listeners

[NullVoxPopuli]

From @sukima: https://tritarget.org/#examples%2Fpage-unload-management%2Fevent-handler-abort

Instead of:

  @action setupWindowListener() {
    /* setup */
    window.addEventListener('beforeunload', this.handleUnload)

    registerDestructor(this, () => {
      /* teardown */
      window.removeEventListener('beforeunload', this.handleUnload)
    });
  }

Maybe this?

  @action setupWindowListener() {
    /* setup */
    let cleanup = new AbortController();
    let { signal } = cleanup;
    window.addEventListener('beforeunload', this.handleUnload, { signal })

    /* tear down */
    registerDestructor(cleanup, cleanup.abort);
  }

[sukima]

I think registerDestructor needs this as a first parameter. I believe it needs this to have it participate in the component tear down right?

  @action setupWindowListener() {
    /* setup */
    let cleanup = new AbortController();
    let { signal } = cleanup;
    window.addEventListener('beforeunload', this.handleUnload, { signal })

    /* tear down */
    registerDestructor(this, () => cleanup.abort);
  }

Also in this simple example you can get away with an extra object creation:

  @action setupWindowListener() {
    /* setup */
    let cleanup = new AbortController();
    window.addEventListener('beforeunload', this.handleUnload, cleanup)

    /* tear down */
    registerDestructor(this, () => cleanup.abort);
  }