-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Description
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