BuilderIO / BuilderIO/mitosis

webcomponents: unnecessary listeners oprations

Open
#285 6 comments 0 reactions 0 assignees View on GitHub
enhancement web-components
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.