github / github/auto-complete-element

Use abortcontroller to simplify connectedCallback

Aberta
#55 0 comentários 0 reações 0 responsáveis Ver no GitHub
Linguagem predominante
JavaScript
Estrelas
407
Forks
57
Merge médio
1d 7h
PRs com merge (30d)
5

Descrição

Per https://github.com/github/auto-complete-element/pull/53#discussion_r761014561, we register many event handlers like `addEventlistener('foo', this.bar = this.bar.bind(bar))`, but rather than calling function bind we can use `handleEvent` and rather than calling `removeEventListener` a bunch, we can store an abort controller per-instance (e.g. with a private field) and abort during `disconnectedCallback`.

The pattern would look as follows:

```ts
class MyElement extends HTMElement {
#ctl = new AbortController()

connectedCallback() {
this.input.addEventListener('foo', this, { signal: this.#ctl.signal })
// many more events here...
}

handleEvent(event) {
if (event.type === 'foo' && event.currentTarget === this.input) {
// do things
}
}

disconnectedCallback() {
this.#ctl.abort()
}

}
```

Guia de contribuição

Abrir o guia de contribuição

Direção de pesquisa

Localize o connectedCallback do elemento personalizado e a configuração existente dos listeners de eventos; em seguida, inspecione seu disconnectedCallback e os handlers atualmente vinculados ou removidos individualmente. Substitua essa vinculação do ciclo de vida por handleEvent e um AbortController da instância, conforme descrito, e verifique se os listeners são registrados e limpos corretamente quando o elemento é desconectado.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
javascript
Domínio
frontend
Tipo de issue
Refatoração
Dificuldade
3/5
Tempo estimado
1-2 dias
Status de atividade
Estagnada
Clareza
Razoavelmente clara
Facilidade para iniciantes
45/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.