43081j / 43081j/eslint-plugin-lit

Add rule to ensure scrolling event handlers are passively bound

未关闭
#93 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
TypeScript
星标
138
派生
26
平均合并
23 小时 29 分钟
30 天内合并 PR
4

描述

This is a perf enhancement suggested by lighthouse.

When `wheel`, `touchstart`, `mousewheel`, `touchmove`, or`scroll` are bound in the template, they should utilize the `passive: true` property.

To achieve this, you could:

- Use the decorator `@eventOptions({passive: true})`
- Bind using the event syntax, `

`

Tricky things to note, these 2 cases should pass:

- `passive: false` explicitly set to false.
- when the event handler uses `e.preventDefault();` it should be fine to bind without `passive`.

https://web.dev/uses-passive-event-listeners/
https://github.com/GoogleChrome/lighthouse/blob/75735c6b2a2c13f0b92a0b9d00067235ffa21fcc/lighthouse-cli/test/fixtures/dobetterweb/dbw_tester.html#L273

贡献指南

这个仓库没有索引到贡献指南

调研方向

The rule needs to be added to the ESLint plugin for lit-html. Start by examining existing rules in the repository to understand the structure. Look for event handling in templates, specifically for the listed events (wheel, touchstart, etc.). The rule should check for the presence of passive: true or @eventOptions decorator, and allow passive: false or e.preventDefault(). Test the rule on sample lit-html templates to ensure it flags violations correctly.

由索引模型根据 Issue 内容生成。

评估

技术栈
eslint, javascript, typescript
领域
performance, tooling
Issue 类型
功能
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
描述清楚
新手友好度
55/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。