Disallow `window` and `document` access in `@fluentui/react-components` by spmonahan · Pull Request #29962 · microsoft/fluentui

spmonahan · 2023-11-30T19:36:44Z

Previous Behavior

You could directly use window or document.

New Behavior

You must get a reference to window or document from context (i.e., useFluent()).

Related Issue(s)

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

Updates to remove getWindow() usage in favor of useFluent().

codesandbox-ci · 2023-11-30T19:50:13Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9ead8d5:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

fabricteam · 2023-11-30T19:50:53Z

Perf Analysis (`@fluentui/react-components`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender	65	56	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	643	663	5000
Button	mount	313	319	5000
Field	mount	1158	1133	5000
FluentProvider	mount	714	693	5000
FluentProviderWithTheme	mount	81	85	10
FluentProviderWithTheme	virtual-rerender	65	56	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	78	75	10
MakeStyles	mount	857	836	50000
Persona	mount	1764	1715	5000
SpinButton	mount	1362	1413	5000

fabricteam · 2023-11-30T19:51:15Z

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	88	80	1.1:1
ListMinimalPerf.default	322	296	1.09:1
ListWith60ListItems.default	362	337	1.07:1
ReactionMinimalPerf.default	213	200	1.07:1
SegmentMinimalPerf.default	199	186	1.07:1
CheckboxMinimalPerf.default	1168	1107	1.06:1
FlexMinimalPerf.default	157	148	1.06:1
GridMinimalPerf.default	190	180	1.06:1
BoxMinimalPerf.default	196	187	1.05:1
DropdownManyItemsPerf.default	401	381	1.05:1
AlertMinimalPerf.default	152	146	1.04:1
TreeMinimalPerf.default	475	456	1.04:1
TreeWith60ListItems.default	88	85	1.04:1
VideoMinimalPerf.default	450	433	1.04:1
AvatarMinimalPerf.default	107	104	1.03:1
ButtonOverridesMissPerf.default	670	648	1.03:1
RadioGroupMinimalPerf.default	265	257	1.03:1
SplitButtonMinimalPerf.default	2294	2230	1.03:1
CarouselMinimalPerf.default	265	261	1.02:1
HeaderSlotsPerf.default	472	463	1.02:1
LayoutMinimalPerf.default	196	193	1.02:1
ListCommonPerf.default	390	383	1.02:1
PopupMinimalPerf.default	351	343	1.02:1
ProviderMergeThemesPerf.default	649	637	1.02:1
SkeletonMinimalPerf.default	192	189	1.02:1
IconMinimalPerf.default	387	379	1.02:1
ButtonMinimalPerf.default	87	86	1.01:1
DropdownMinimalPerf.default	1423	1407	1.01:1
EmbedMinimalPerf.default	1851	1831	1.01:1
ListNestedPerf.default	313	309	1.01:1
CustomToolbarPrototype.default	1468	1459	1.01:1
ChatMinimalPerf.default	427	425	1:1
DividerMinimalPerf.default	199	200	1:1
LabelMinimalPerf.default	215	216	1:1
MenuButtonMinimalPerf.default	937	940	1:1
PortalMinimalPerf.default	83	83	1:1
ProviderMinimalPerf.default	198	198	1:1
RefMinimalPerf.default	105	105	1:1
TableMinimalPerf.default	220	221	1:1
TooltipMinimalPerf.default	1277	1272	1:1
AccordionMinimalPerf.default	82	83	0.99:1
AttachmentSlotsPerf.default	629	637	0.99:1
ButtonSlotsPerf.default	309	312	0.99:1
CardMinimalPerf.default	301	303	0.99:1
ChatWithPopoverPerf.default	193	194	0.99:1
DatepickerMinimalPerf.default	3573	3619	0.99:1
DialogMinimalPerf.default	426	432	0.99:1
InputMinimalPerf.default	536	539	0.99:1
AnimationMinimalPerf.default	283	290	0.98:1
ChatDuplicateMessagesPerf.default	151	154	0.98:1
ItemLayoutMinimalPerf.default	690	703	0.98:1
MenuMinimalPerf.default	486	496	0.98:1
StatusMinimalPerf.default	384	393	0.98:1
TextAreaMinimalPerf.default	281	287	0.98:1
HeaderMinimalPerf.default	204	211	0.97:1
ImageMinimalPerf.default	220	226	0.97:1
TableManyItemsPerf.default	1071	1099	0.97:1
FormMinimalPerf.default	205	214	0.96:1
RosterPerf.default	1539	1600	0.96:1
ToolbarMinimalPerf.default	512	531	0.96:1
LoaderMinimalPerf.default	179	189	0.95:1
SliderMinimalPerf.default	728	767	0.95:1
TextMinimalPerf.default	180	203	0.89:1

fabricteam · 2023-11-30T19:57:20Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-calendar-compat` Calendar Compat	`141.973 kB` `36.998 kB`	`141.777 kB` `36.979 kB`	`-196 B` `-19 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`208.225 kB` `59.512 kB`	`208.298 kB` `59.555 kB`	`73 B` `43 B`
`react-datepicker-compat` DatePicker Compat	`213.203 kB` `59.559 kB`	`213.106 kB` `59.615 kB`	`-97 B` `56 B`
`react-infobutton` InfoButton	`131.436 kB` `41.374 kB`	`131.509 kB` `41.418 kB`	`73 B` `44 B`
`react-infobutton` InfoLabel	`135.123 kB` `42.51 kB`	`135.196 kB` `42.551 kB`	`73 B` `41 B`
`react-menu` Menu (including children components)	`141.042 kB` `43.238 kB`	`141.114 kB` `43.272 kB`	`72 B` `34 B`
`react-menu` Menu (including selectable components)	`143.728 kB` `43.739 kB`	`143.8 kB` `43.772 kB`	`72 B` `33 B`
`react-popover` Popover	`120.17 kB` `37.863 kB`	`120.248 kB` `37.918 kB`	`78 B` `55 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `330 B`
`global-context` createContextSelector	`537 B` `342 B`
`priority-overflow` createOverflowManager	`4.447 kB` `1.853 kB`
`react-accordion` Accordion (including children components)	`93.224 kB` `28.468 kB`
`react-alert` Alert	`83.926 kB` `23.362 kB`
`react-avatar` Avatar	`50.167 kB` `15.836 kB`
`react-avatar` AvatarGroup	`19.696 kB` `7.8 kB`
`react-avatar` AvatarGroupItem	`64.823 kB` `20.176 kB`
`react-badge` Badge	`26.897 kB` `8.713 kB`
`react-badge` CounterBadge	`27.798 kB` `9.013 kB`
`react-badge` PresenceBadge	`25.303 kB` `9.22 kB`
`react-button` Button	`39.707 kB` `11.207 kB`
`react-button` CompoundButton	`47.063 kB` `12.691 kB`
`react-button` MenuButton	`44.481 kB` `12.569 kB`
`react-button` SplitButton	`52.495 kB` `14.166 kB`
`react-button` ToggleButton	`56.754 kB` `13.104 kB`
`react-card` Card - All	`93.207 kB` `27.001 kB`
`react-card` Card	`88.031 kB` `25.501 kB`
`react-card` CardFooter	`13.056 kB` `5.388 kB`
`react-card` CardHeader	`15.299 kB` `6.143 kB`
`react-card` CardPreview	`14.007 kB` `5.757 kB`
`react-checkbox` Checkbox	`34.057 kB` `11.732 kB`
`react-combobox` Combobox (including child components)	`92.107 kB` `30.05 kB`
`react-combobox` Dropdown (including child components)	`90.528 kB` `29.714 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`69.816 kB` `20.132 kB`
`react-components` react-components: FluentProvider & webLightTheme	`42.101 kB` `13.957 kB`
`react-dialog` Dialog (including children components)	`94.805 kB` `28.321 kB`
`react-divider` Divider	`20.812 kB` `7.742 kB`
`react-field` Field	`22.419 kB` `8.541 kB`
`react-image` Image	`15.728 kB` `6.225 kB`
`react-input` Input	`26.879 kB` `9.097 kB`
`react-jsx-runtime` Classic Pragma	`1.049 kB` `531 B`
`react-jsx-runtime` JSX Dev Runtime	`3.775 kB` `1.644 kB`
`react-jsx-runtime` JSX Runtime	`4.369 kB` `1.879 kB`
`react-label` Label	`14.141 kB` `5.764 kB`
`react-link` Link	`17.074 kB` `6.892 kB`
`react-message-bar` MessageBar (all components)	`25.173 kB` `9.005 kB`
`react-overflow` hooks only	`12.837 kB` `4.837 kB`
`react-persona` Persona	`57.058 kB` `17.711 kB`
`react-portal` Portal	`12.565 kB` `4.591 kB`
`react-portal-compat` PortalCompatProvider	`6.822 kB` `2.311 kB`
`react-positioning` usePositioning	`25.68 kB` `9.278 kB`
`react-progress` ProgressBar	`17.42 kB` `6.89 kB`
`react-provider` FluentProvider	`22.641 kB` `8.384 kB`
`react-radio` Radio	`31.07 kB` `10.218 kB`
`react-radio` RadioGroup	`15.337 kB` `6.258 kB`
`react-select` Select	`28.601 kB` `10.176 kB`
`react-slider` Slider	`38.153 kB` `12.54 kB`
`react-spinbutton` SpinButton	`36.766 kB` `11.757 kB`
`react-spinner` Spinner	`23.394 kB` `8.46 kB`
`react-switch` Switch	`33.535 kB` `10.849 kB`
`react-table` DataGrid	`153.989 kB` `43.365 kB`
`react-table` Table (Primitives only)	`43.805 kB` `13.72 kB`
`react-table` Table as DataGrid	`127.211 kB` `34.69 kB`
`react-table` Table (Selection only)	`72.389 kB` `19.864 kB`
`react-table` Table (Sort only)	`70.996 kB` `19.467 kB`
`react-tags` InteractionTag	`15.251 kB` `6.062 kB`
`react-tags` Tag	`29.974 kB` `9.408 kB`
`react-tags` TagGroup	`74.055 kB` `22.168 kB`
`react-text` Text - Default	`16.697 kB` `6.553 kB`
`react-text` Text - Wrappers	`19.87 kB` `6.873 kB`
`react-textarea` Textarea	`30.939 kB` `10.451 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`34.616 kB` `7.299 kB`
`react-theme` Teams: Light theme	`19.287 kB` `5.49 kB`
`react-timepicker-compat-preview` TimePicker	`93.504 kB` `31.338 kB`
`react-toast` Toast (including Toaster)	`92.972 kB` `27.892 kB`
`react-tooltip` Tooltip	`52.843 kB` `18.633 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 419d7609ad9ce151f8f544c891d55e3a395c13d1}

fabricteam · 2023-11-30T19:57:37Z

🕵 FluentUIV0 No visual regressions between this PR and main

size-auditor · 2023-11-30T19:58:57Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 419d7609ad9ce151f8f544c891d55e3a395c13d1 (build)

fabricteam · 2023-11-30T20:03:02Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2023-11-30T20:03:31Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	626	645	5000
Breadcrumb	mount	1732	1743	1000
Checkbox	mount	1692	1729	5000
CheckboxBase	mount	1519	1486	5000
ChoiceGroup	mount	2950	2966	5000
ComboBox	mount	710	675	1000
CommandBar	mount	6499	6467	1000
ContextualMenu	mount	15916	15728	1000
DefaultButton	mount	745	770	5000
DetailsRow	mount	2256	2189	5000
DetailsRowFast	mount	2212	2306	5000
DetailsRowNoStyles	mount	2039	2060	5000
Dialog	mount	2833	2678	1000
DocumentCardTitle	mount	236	237	1000
Dropdown	mount	1993	2019	5000
FocusTrapZone	mount	1161	1165	5000
FocusZone	mount	1087	1122	5000
GroupedList	mount	41977	42683	2
GroupedList	virtual-rerender	20234	20538	2
GroupedList	virtual-rerender-with-unmount	54120	51904	2
GroupedListV2	mount	234	236	2
GroupedListV2	virtual-rerender	220	225	2
GroupedListV2	virtual-rerender-with-unmount	236	248	2
IconButton	mount	1104	1134	5000
Label	mount	332	337	5000
Layer	mount	2758	2752	5000
Link	mount	403	391	5000
MenuButton	mount	951	927	5000
MessageBar	mount	22155	21978	5000
Nav	mount	1919	1972	1000
OverflowSet	mount	796	811	5000
Panel	mount	1827	1841	1000
Persona	mount	742	753	1000
Pivot	mount	892	871	1000
PrimaryButton	mount	863	852	5000
Rating	mount	4730	4691	5000
SearchBox	mount	947	938	5000
Shimmer	mount	1948	1979	5000
Slider	mount	1317	1344	5000
SpinButton	mount	2907	2879	5000
Spinner	mount	399	391	5000
SplitButton	mount	1859	1827	5000
Stack	mount	423	405	5000
StackWithIntrinsicChildren	mount	856	846	5000
StackWithTextChildren	mount	2616	2645	5000
SwatchColorPicker	mount	6218	6201	5000
TagPicker	mount	1460	1467	5000
Text	mount	383	371	5000
TextField	mount	938	955	5000
ThemeProvider	mount	843	841	5000
ThemeProvider	virtual-rerender	604	608	5000
ThemeProvider	virtual-rerender-with-unmount	1285	1302	5000
Toggle	mount	614	634	5000
buttonNative	mount	197	194	5000

apps/perf-test-react-components/src/scenarios/FluentProviderWithTheme.tsx

packages/eslint-plugin/src/configs/react-config.js

packages/eslint-plugin/src/configs/restricted-globals.js

packages/react-components/global-context/src/global-context-selector.ts

packages/react-components/global-context/src/global-context.ts

packages/react-components/react-calendar-compat/src/components/Calendar/Calendar.tsx

packages/react-components/react-motion-preview/src/utils/dom-style.ts

packages/react-components/react-utilities/src/ssr/canUseDOM.ts

spmonahan · 2023-12-01T16:39:07Z

/azp run

azure-pipelines · 2023-12-01T16:39:33Z

Azure Pipelines successfully started running 4 pipeline(s).

fabricteam · 2023-12-01T19:01:28Z

🕵 fluentuiv8 No visual regressions between this PR and main

change/@fluentui-react-window-provider-5257f709-976b-4616-9470-013dfe88e991.json

apps/perf-test-react-components/src/scenarios/MakeStyles.tsx

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/useDebounce.ts

apps/public-docsite-v9/src/DocsComponents/Toc.stories.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

spmonahan added 13 commits November 29, 2023 04:54

update @fluentui/react-components eslint config to disallow and .

5544157

update apps/ to disallow and .

047eb9e

update global-context to disallow and .

e64bc3d

update and refactor calendar-compat

db13cc6

Updates to remove getWindow() usage in favor of useFluent().

disable eslint rule for stories

d7d40e9

disable eslint rule

7494f85

disable eslint rule

4b332fe

update to use from context

ea89f19

update eslint config

b53ed0c

clean up a few lint stragglers

6ca6b9d

change files

9e79bbc

PR feedback

af0c8c4

PR feedback

1908ee5

spmonahan requested review from a team, marcosmoura and sopranopillow as code owners November 30, 2023 19:36

github-actions bot added this to the November Project Cycle Q1 2024 milestone Nov 30, 2023

behowell approved these changes Nov 30, 2023

View reviewed changes

spmonahan mentioned this pull request Nov 30, 2023

Is the window fallback necessary here? #29963

Closed

2 tasks

spmonahan closed this Dec 1, 2023

spmonahan reopened this Dec 1, 2023

github-actions bot modified the milestones: November Project Cycle Q1 2024, December Project Cycle Q1 2024 Dec 1, 2023

khmakoto reviewed Dec 1, 2023

View reviewed changes

khmakoto approved these changes Dec 1, 2023

View reviewed changes

Apply suggestions from code review

9ead8d5

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

marcosmoura approved these changes Dec 12, 2023

View reviewed changes

layershifter approved these changes Dec 13, 2023

View reviewed changes

spmonahan merged commit b6766ba into microsoft:master Dec 13, 2023

spmonahan mentioned this pull request Dec 13, 2023

chore: disallow document and window via eslint for React #28887

Closed

Conversation

spmonahan commented Nov 30, 2023

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

codesandbox-ci bot commented Nov 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Nov 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

fabricteam commented Nov 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

fabricteam commented Nov 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Nov 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 FluentUIV0 No visual regressions between this PR and main

Uh oh!

size-auditor bot commented Nov 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Nov 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

fabricteam commented Nov 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

spmonahan commented Dec 1, 2023

Uh oh!

azure-pipelines bot commented Dec 1, 2023

Uh oh!

fabricteam commented Dec 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

codesandbox-ci bot commented Nov 30, 2023 •

edited

Loading

fabricteam commented Nov 30, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

fabricteam commented Nov 30, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-northstar`)

fabricteam commented Nov 30, 2023 •

edited

Loading

fabricteam commented Nov 30, 2023 •

edited

Loading

size-auditor bot commented Nov 30, 2023 •

edited

Loading

fabricteam commented Nov 30, 2023 •

edited

Loading

fabricteam commented Nov 30, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Dec 1, 2023 •

edited

Loading