Skip to content

[Feature]: add lint rules to disallow accessing globals like document and window #28145

@spmonahan

Description

@spmonahan

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

I want to add eslint rules that disallow accessing browser globals, specifically, document and window, but I'm happy to expand the list if necessary.

I selected Fluent v9 as the affected version but we should enforce this globally and make exceptions as needed as programming with globals is generally problematic.

Have you discussed this feature with our team

@behowell @khmakato

Additional context

First some terminology:

  • main/parent window: the main window where the app lives. This is the thing you navigate to, e.g., myapp.example.com.
  • projected/child window: a window spawned and managed by the main window (e.g., opened with window.open()).

It is fairly common for the main window to spawn projected window but control the React context in the projected window from the parent window. This is useful to pass a theme to the projected window from the main window.

Another common scenario is "embeddable app" that are meant to live inside another app. These apps may need to access global APIs but since they are embedded inside other apps they don't control the global environment so directly accessing global APIs can lead to bugs.

Fluent v8 implements a solution to this called WindowProvider that is a React context allowing authors to set window (and thereby document). This context can then be read with useWindow() and useDocument() so components access the correct objects.

Validations

  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Fixes

Fluent v8

  • AutoFill
  • ChoiceGroup
  • Coachmark
  • ColorRectangle
  • ComboBox
  • DetailsList
  • DocumentCard
  • Dropdown
  • FocusTrapZone
  • KeytipLayer
  • List
  • MarqueeSelection
  • Nav
  • OverflowSet
  • Panel
  • ScrollablePane
  • SelectedItemsList
  • Slider
  • Sticky
  • SwatchColorPicker
  • Tooltip
  • BasePicker
  • DraggableZone
  • cssColor
  • positioning
  • SelectionZone

Fluent v9

  • react-shared-contexts
  • react-tree
  • react-utilities

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions