[New] : Avoid unsafe global window use

[jzabala]

This rule will prevent the unsafe use on window resulting from rendering React apps in environments where the global is not available.

I'll be grateful for getting all your comments and suggestions before summiting the final version.

Tested Conditions

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

Considerations

The issue talks about disabling the use of various globals variables aside from window. I think an easier solution would be to use the rule no-restricted-globals to force the use of window in the variables that we want.

Another solution would be to have the option of setting what globals will be disabled directly in this plugin with window as default. And to change the name of the rule to something like: no-unsafe-globals-use.

Let me know your opinion about this or if you have other ideas

Closes #2057

[ljharb]

This looks like a good start :-)

[jzabala]

This looks like a good start :-)

Thanks for your initial review @ljharb.

I think it is ready now 🙂

[osdiab]

i'm interested in this rule or something like it getting published - anything that needs to be done to help it along?

[osdiab]

FYI currently this errors incorrectly:

typeof window === "undefined" ? undefined : window.location.href

Alternatively,

if (typeof window === "undefined") {
  return;
}
console.log(window.location.href);

Also shadowing window still causes errors, like so:

function getWindow() {
  return typeof window !== "undefined" ? window : undefined;
}

// another file
const window = getWindow(); // this line errors but pretty sure it's actually fine
console.log(window?.location.href); // this errors too

though just giving it a different name works fine.

[osdiab]

also would probably make sense to check for document, but yeah maybe that makes more sense for no-restricted-globals

[ljharb]

Seems like this also needs handling for hooks in SFCs, to ensure window and whatnot is only used in effects?

I'm not stoked on the use of a class and this, or all the loops, in the implementation, but that's something we can worry about later.