Solid/reactivity lint rule complains about async custom event handlers

Hello, I'm having some issues with solid eslint plugin regarding custom event handlers.
const comp = <my-element on-click={async () => {}} />
// warns:
// This tracked scope should not be async. Solid's reactivity only tracks synchronously. (eslintsolid/reactivity)
const comp = <my-element on-click={async () => {}} />
// warns:
// This tracked scope should not be async. Solid's reactivity only tracks synchronously. (eslintsolid/reactivity)
Just the line above is enough to reproduce it in playground. Is there any way to disable it? Or this could be a bug? I also checked if this has anything with event delegation as custom events are not delegated and it does not seem so:
const comp = <my-element on-click={async () => {}} on:click={async () => {}} onclick={async () => {}} onClick={async () => {}} />

// produces:
var _tmpl$ = /*#__PURE__*/_$template(`<my-element>`, true, false);
(() => {
var _el$ = _tmpl$();
_el$.$$click = async () => {}; // onclick (WARNS)
_el$.$$click = async () => {}; // onClick
_el$.addEventListener("-click", async () => {}); // on-click (WARNS)
_el$.addEventListener("click", async () => {}); // on:click
_el$._$owner = _$getOwner();
return _el$;
})();
_$delegateEvents(["click"]);
const comp = <my-element on-click={async () => {}} on:click={async () => {}} onclick={async () => {}} onClick={async () => {}} />

// produces:
var _tmpl$ = /*#__PURE__*/_$template(`<my-element>`, true, false);
(() => {
var _el$ = _tmpl$();
_el$.$$click = async () => {}; // onclick (WARNS)
_el$.$$click = async () => {}; // onClick
_el$.addEventListener("-click", async () => {}); // on-click (WARNS)
_el$.addEventListener("click", async () => {}); // on:click
_el$._$owner = _$getOwner();
return _el$;
})();
_$delegateEvents(["click"]);
2 Replies
pedro00dk
pedro00dkOP2w ago
Would changing this regex be enough to fix the issue? https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/src/rules/reactivity.ts#L853 It seems it is too strict, causing the if condition to fail. The It then falls a bit later at: https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/src/rules/reactivity.ts#L914 And the tracked scope is set as "function" instead of "called-function". Later the code falls here: https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/src/rules/reactivity.ts#L818 Which causes the error.
pedro00dk
pedro00dkOP2w ago
GitHub
Less strict checking of event handler attribute names by pedro00dk ...
Hi! I&#39;m having some issues with solid eslint plugin regarding asynchronous custom event handlers. const comp = &lt;my-element on-click={async () =&gt; {}} /&gt; // warns: // Thi...
Want results from more Discord servers?
Add your server