jsx-eslint/eslint-plugin-react

Rule proposal: ssr-friendly

Open

#2,057 创建于 2018年11月26日

在 GitHub 查看
 (21 评论) (23 反应) (0 负责人)JavaScript (2,797 fork)batch import
acceptedhelp wantednew rule

仓库指标

Star
 (8,630 star)
PR 合并指标
 (30 天内没有已合并 PR)

描述

In order to be SSR compliant, you can only access browser globals such as window, document and so on, inside of componentDidMount, componentDidUpdate and componentWillUnmount

A rule could be created to avoid the use of unguarded browser globals in other lifecycle methods.

Example of a guard:

if (typeof window !== 'undefined') {
 // I can use browser globals in here
}

Use of browser globals are allowed when:

  • used in a guard
  • used in componentDidMount, componentDidUpdate and componentWillUnmount
  • used in useEffect or useLayoutEffect
  • used in an event handler

贡献者指南

研究方向
分析 eslint plugin react 中现有的规则，了解创建新规则的模式。然后实现一个规则，检测在除 componentDidMount、componentDidUpdate、componentWillUnmount、useEffect、useLayoutEffect 和事件处理程序之外的生命周期方法中未防护的浏览器全局变量（例如 window、document）。考虑提供自动修复选项并处理诸如 'typeof window !== "undefined"' 之类的防护。
技术栈
javascriptreact
领域
frontendtooling
议题类型
功能
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
3
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-2 天
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
活跃
清晰度议题是否清楚说明期望改动、验收标准和下一步。
清晰
前置要求
ReactESLint
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
60