jsx-eslint/eslint-plugin-react

Rule proposal: ssr-friendly

Offen

#2.057 geöffnet am 26.11.2018

Auf GitHub ansehenContributor Guide
 (21 Kommentare) (23 Reaktionen) (0 zugewiesene Personen)JavaScript (2.731 Forks)batch import
acceptedhelp wantednew rule

Repository-Metriken

Stars
 (9.293 Sterne)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

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

Contributor Guide

Research-Richtung
Analysieren Sie die vorhandenen Regeln in eslint plugin react, um das Muster für die Erstellung einer neuen Regel zu verstehen. Implementieren Sie dann eine Regel, die ungeschützte globale Browser Variablen (z.B. window, document) in Lifecycle Methoden erkennt, die nicht componentDidMount, componentDidUpdate, componentWillUnmount, useEffect, useLayoutEffect und Event Handler sind. Erwägen Sie, automatische Korrekturoptionen bereitzustellen und Guards wie 'typeof window !== "undefined"' zu behandeln.
Tech Stack
javascriptreact
Domain
frontendtooling
Issue Type
Funktion
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-2 Tage
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
ReactESLint
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
60