feat(eslint-plugin): new no-window-eq-undefined rule

[sunub]

Pre-flight checklist

• [x] I have read the Contributing Guidelines on pull requests.
• [x] If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
• [x] If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

Docusaurus first generates static HTML via SSR (Server-Side Rendering) and then performs Hydration in the browser. Using typeof window at the top level of a component can cause different HTML structures to be rendered between the server (Node.js) and the client (browser), leading to Hydration Mismatch issues.

To address this problem, I aimed to restrict such usage by introducing an ESLint rule, as proposed in the related issue.

During the implementation of this ESLint rule, I focused on comprehensively covering all potential violation patterns detailed below:

Comprehensive Pattern Detection :

• typeof window === 'undefined' (The most common SSR check)
• window === undefined (Direct existence check)
• All comparison operators (===, !==, ==, !=) and operand order swapping were also accounted for.

Allowed Exception Patterns:

• Inside useEffect: This is considered safe as the code execution is guaranteed to run only on the client side.
• Using useIsBrowser(): This is permitted as it is the safe environment detection hook provided by Docusaurus.
• In Event Handlers: Accessing the window object is allowed within event handlers, as their execution is guaranteed to occur only on the client side upon user interaction.

Test Plan

I have added unit test code for the cases that pass and the cases that fail, referencing the format of the previously written ESLint rules.

Test links

Deploy preview: https://deploy-preview-11524--docusaurus-2.netlify.app/docs/api/misc/@docusaurus/eslint-plugin/no-window-eq-undefined/

Related issues/PRs

#6472

AI Assistance / Methodology

First, I thoroughly read the comment written by the Collaborator in the relevant issue. I determined that an understanding of the AST (Abstract Syntax Tree) was necessary. I then studied AST principles and used the AST Explorer tool to directly write and test the necessary rules and patterns.

During this process, I utilized an AI pre-trained to provide advice, specifically asking it to critique the code like "Dan Abramov." I engaged in a discussion with the AI to verify the logical soundness of my implementation and check for any potential omissions.

Building on this, I also had the AI analyze the existing code within eslint-plugin-react-hooks and used the insights gained to inform the design and implementation of the required functionalities for this new rule. I take full responsibility for the submitted code, which I have reviewed, validated, and debugged.

[meta-cla[bot]]

Hi @sunub!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[netlify[bot]]

✅ [V2]

Built without sensitive environment variables

Name	Link
🔨 Latest commit	21e55fe431c967dbf3223aa4d85e074e639bbee4
🔍 Latest deploy log	https://app.netlify.com/projects/docusaurus-2/deploys/6904371ff34f0a00085ffbec
😎 Deploy Preview	https://deploy-preview-11524--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[meta-cla[bot]]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!