webcomponents: unnecessary listeners oprations
- Dominant language
- TypeScript
- Stars
- 14.4k
- Forks
- 671
- PR merge metrics
- No merged PRs in 30d
Description
**Describe the bug**
[The update() logic](https://mitosis.builder.io/?outputTab=webcomponents) remove and add the very same listener for no gain/reason whatsoever.
**To Reproduce**
Steps to reproduce the behavior:
1. visit [this demo page](https://mitosis.builder.io/?outputTab=webcomponents)
2. note the following code as output:
```js
update() {
this.querySelectorAll("[data-name='input-1']").forEach((el) => {
el.value = this.state.name;
// these two operations are unnecessary because the listener is the same
// and the DOM would not add twice the same reference/listener
el.removeEventListener("input", this.onInput1Input);
el.addEventListener("input", this.onInput1Input);
});
}
```
**Expected behavior**
Adding twice the very same listener doesn't mean the listener is triggered twice. Removing and adding the same listener one line after the other results in bloated DOM operations for no gain reason, or benefit, it's just more code, and slower.
Contributor guide
Research direction
Start with the linked webcomponents demo and inspect the generated update() method shown in the issue. Trace the compiler entry point that produces the listener operations, then verify the generated output no longer performs an immediate remove/add pair for the same listener while preserving listener behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100