feat: supports new automatic JSX runtime by bsunderhus · Pull Request #28810 · microsoft/fluentui

bsunderhus · 2023-08-10T16:01:23Z

Previous Behavior

Previously @fluentui/react-jsx-runtime only supported the classic mode of declaring a JSX pragma, through a signature similar to React.createElement

New Behavior

Add support for React 17's automatic JSX transform (works from React 16.14).

This PR adds support for the new "automatic" JSX runtime from React 16.14/17+

Related Issue(s)

Fixes [Chore]: Investigate how to opt-out of jsx comments #27646

fabricteam · 2023-08-10T16:13:17Z

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

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender-with-unmount	72	80	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	628	614	5000
Button	mount	312	303	5000
Field	mount	1098	1140	5000
FluentProvider	mount	671	682	5000
FluentProviderWithTheme	mount	77	85	10
FluentProviderWithTheme	virtual-rerender	60	61	10
FluentProviderWithTheme	virtual-rerender-with-unmount	72	80	10	Possible regression
InfoButton	mount	9	12	5000
MakeStyles	mount	842	838	50000
Persona	mount	1731	1668	5000
SpinButton	mount	1368	1329	5000

codesandbox-ci · 2023-08-10T16:13:46Z

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 67b355f:

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

fabricteam · 2023-08-10T16:15:58Z

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

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
PortalMinimalPerf.default	87	82	1.06:1	analysis

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	86	80	1.08:1
DividerMinimalPerf.default	209	195	1.07:1
ImageMinimalPerf.default	221	207	1.07:1
SegmentMinimalPerf.default	210	196	1.07:1
TextAreaMinimalPerf.default	288	268	1.07:1
CarouselMinimalPerf.default	262	248	1.06:1
FlexMinimalPerf.default	161	153	1.05:1
RefMinimalPerf.default	116	111	1.05:1
AvatarMinimalPerf.default	113	109	1.04:1
CheckboxMinimalPerf.default	1172	1129	1.04:1
DropdownManyItemsPerf.default	400	383	1.04:1
PopupMinimalPerf.default	356	342	1.04:1
ProviderMinimalPerf.default	199	191	1.04:1
TreeMinimalPerf.default	477	460	1.04:1
ChatMinimalPerf.default	432	420	1.03:1
LayoutMinimalPerf.default	206	200	1.03:1
ListNestedPerf.default	324	316	1.03:1
TableManyItemsPerf.default	1110	1077	1.03:1
TextMinimalPerf.default	191	185	1.03:1
VideoMinimalPerf.default	431	420	1.03:1
CardMinimalPerf.default	325	319	1.02:1
DialogMinimalPerf.default	448	439	1.02:1
DropdownMinimalPerf.default	1426	1399	1.02:1
ListMinimalPerf.default	307	302	1.02:1
ListWith60ListItems.default	365	359	1.02:1
SliderMinimalPerf.default	745	733	1.02:1
SplitButtonMinimalPerf.default	2261	2224	1.02:1
TableMinimalPerf.default	232	227	1.02:1
AttachmentMinimalPerf.default	81	80	1.01:1
BoxMinimalPerf.default	193	191	1.01:1
ChatWithPopoverPerf.default	191	189	1.01:1
DatepickerMinimalPerf.default	3519	3500	1.01:1
GridMinimalPerf.default	182	181	1.01:1
ItemLayoutMinimalPerf.default	710	702	1.01:1
LabelMinimalPerf.default	217	215	1.01:1
ListCommonPerf.default	390	385	1.01:1
ReactionMinimalPerf.default	211	208	1.01:1
InputMinimalPerf.default	541	540	1:1
MenuMinimalPerf.default	485	483	1:1
MenuButtonMinimalPerf.default	958	958	1:1
RosterPerf.default	1551	1550	1:1
RadioGroupMinimalPerf.default	263	264	1:1
TooltipMinimalPerf.default	1232	1238	1:1
ButtonOverridesMissPerf.default	651	655	0.99:1
ChatDuplicateMessagesPerf.default	153	154	0.99:1
AlertMinimalPerf.default	151	154	0.98:1
AnimationMinimalPerf.default	285	291	0.98:1
EmbedMinimalPerf.default	1839	1883	0.98:1
HeaderMinimalPerf.default	200	205	0.98:1
CustomToolbarPrototype.default	1445	1477	0.98:1
ToolbarMinimalPerf.default	529	538	0.98:1
ButtonMinimalPerf.default	86	89	0.97:1
ProviderMergeThemesPerf.default	646	665	0.97:1
SkeletonMinimalPerf.default	188	194	0.97:1
StatusMinimalPerf.default	391	403	0.97:1
HeaderSlotsPerf.default	443	461	0.96:1
LoaderMinimalPerf.default	182	189	0.96:1
AttachmentSlotsPerf.default	593	624	0.95:1
FormMinimalPerf.default	213	225	0.95:1
TreeWith60ListItems.default	82	86	0.95:1
ButtonSlotsPerf.default	299	318	0.94:1
IconMinimalPerf.default	361	390	0.93:1

fabricteam · 2023-08-10T16:17:29Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2023-08-10T16:22:56Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`88.456 kB` `26.845 kB`	`88.592 kB` `26.885 kB`	`136 B` `40 B`
`react-alert` Alert	`81.7 kB` `21.993 kB`	`81.836 kB` `22.031 kB`	`136 B` `38 B`
`react-avatar` Avatar	`46.874 kB` `14.463 kB`	`47.01 kB` `14.502 kB`	`136 B` `39 B`
`react-avatar` AvatarGroup	`15.98 kB` `6.393 kB`	`16.116 kB` `6.431 kB`	`136 B` `38 B`
`react-avatar` AvatarGroupItem	`61.653 kB` `18.876 kB`	`61.789 kB` `18.912 kB`	`136 B` `36 B`
`react-badge` Badge	`23.047 kB` `7.218 kB`	`23.183 kB` `7.254 kB`	`136 B` `36 B`
`react-badge` CounterBadge	`23.948 kB` `7.516 kB`	`24.084 kB` `7.553 kB`	`136 B` `37 B`
`react-badge` PresenceBadge	`22.004 kB` `7.831 kB`	`22.14 kB` `7.867 kB`	`136 B` `36 B`
`react-button` Button	`36.942 kB` `9.716 kB`	`37.078 kB` `9.751 kB`	`136 B` `35 B`
`react-button` CompoundButton	`44.291 kB` `11.196 kB`	`44.427 kB` `11.234 kB`	`136 B` `38 B`
`react-button` MenuButton	`41.328 kB` `10.971 kB`	`41.464 kB` `11.001 kB`	`136 B` `30 B`
`react-button` SplitButton	`49.363 kB` `12.514 kB`	`49.499 kB` `12.555 kB`	`136 B` `41 B`
`react-button` ToggleButton	`53.988 kB` `11.61 kB`	`54.124 kB` `11.65 kB`	`136 B` `40 B`
`react-card` Card - All	`88.199 kB` `25.234 kB`	`88.335 kB` `25.271 kB`	`136 B` `37 B`
`react-card` Card	`83.041 kB` `23.706 kB`	`83.177 kB` `23.742 kB`	`136 B` `36 B`
`react-card` CardFooter	`9.202 kB` `3.903 kB`	`9.338 kB` `3.932 kB`	`136 B` `29 B`
`react-card` CardHeader	`11.454 kB` `4.678 kB`	`11.59 kB` `4.716 kB`	`136 B` `38 B`
`react-card` CardPreview	`10.161 kB` `4.279 kB`	`10.297 kB` `4.317 kB`	`136 B` `38 B`
`react-checkbox` Checkbox	`32.736 kB` `10.614 kB`	`32.872 kB` `10.652 kB`	`136 B` `38 B`
`react-combobox` Combobox (including child components)	`86.939 kB` `28.239 kB`	`87.075 kB` `28.263 kB`	`136 B` `24 B`
`react-combobox` Dropdown (including child components)	`85.299 kB` `27.875 kB`	`85.435 kB` `27.903 kB`	`136 B` `28 B`
`react-components` react-components: Button, FluentProvider & webLightTheme	`66.478 kB` `18.477 kB`	`66.614 kB` `18.512 kB`	`136 B` `35 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`202.881 kB` `57.576 kB`	`203.017 kB` `57.615 kB`	`136 B` `39 B`
`react-components` react-components: FluentProvider & webLightTheme	`37.651 kB` `12.343 kB`	`37.787 kB` `12.387 kB`	`136 B` `44 B`
`react-datepicker-compat` DatePicker Compat	`206.965 kB` `57.361 kB`	`207.101 kB` `57.398 kB`	`136 B` `37 B`
`react-dialog` Dialog (including children components)	`86.602 kB` `26.308 kB`	`86.738 kB` `26.341 kB`	`136 B` `33 B`
`react-divider` Divider	`16.962 kB` `6.266 kB`	`17.098 kB` `6.303 kB`	`136 B` `37 B`
`react-field` Field	`18.159 kB` `6.953 kB`	`18.295 kB` `6.978 kB`	`136 B` `25 B`
`react-image` Image	`11.893 kB` `4.746 kB`	`12.029 kB` `4.783 kB`	`136 B` `37 B`
`react-infobutton` InfoButton	`125.088 kB` `39.205 kB`	`125.224 kB` `39.235 kB`	`136 B` `30 B`
`react-infobutton` InfoLabel	`128.758 kB` `40.384 kB`	`128.894 kB` `40.413 kB`	`136 B` `29 B`
`react-input` Input	`23.101 kB` `7.644 kB`	`23.237 kB` `7.688 kB`	`136 B` `44 B`
`react-label` Label	`10.287 kB` `4.281 kB`	`10.423 kB` `4.31 kB`	`136 B` `29 B`
`react-link` Link	`13.119 kB` `5.359 kB`	`13.254 kB` `5.397 kB`	`135 B` `38 B`
`react-menu` Menu (including children components)	`134.933 kB` `41.372 kB`	`135.069 kB` `41.401 kB`	`136 B` `29 B`
`react-menu` Menu (including selectable components)	`137.619 kB` `41.867 kB`	`137.755 kB` `41.898 kB`	`136 B` `31 B`
`react-persona` Persona	`53.769 kB` `16.336 kB`	`53.905 kB` `16.371 kB`	`136 B` `35 B`
`react-popover` Popover	`114.441 kB` `35.891 kB`	`114.577 kB` `35.925 kB`	`136 B` `34 B`
`react-progress` ProgressBar	`13.582 kB` `5.447 kB`	`13.718 kB` `5.476 kB`	`136 B` `29 B`
`react-provider` FluentProvider	`18.196 kB` `6.769 kB`	`18.332 kB` `6.817 kB`	`136 B` `48 B`
`react-radio` Radio	`26.481 kB` `8.57 kB`	`26.617 kB` `8.601 kB`	`136 B` `31 B`
`react-radio` RadioGroup	`11.486 kB` `4.794 kB`	`11.622 kB` `4.833 kB`	`136 B` `39 B`
`react-select` Select	`24.463 kB` `8.615 kB`	`24.599 kB` `8.651 kB`	`136 B` `36 B`
`react-slider` Slider	`33.998 kB` `11.001 kB`	`34.134 kB` `11.039 kB`	`136 B` `38 B`
`react-spinbutton` SpinButton	`32.545 kB` `10.172 kB`	`32.681 kB` `10.209 kB`	`136 B` `37 B`
`react-spinner` Spinner	`19.441 kB` `6.977 kB`	`19.577 kB` `7.008 kB`	`136 B` `31 B`
`react-switch` Switch	`28.956 kB` `9.179 kB`	`29.092 kB` `9.217 kB`	`136 B` `38 B`
`react-table` DataGrid	`152.634 kB` `42.209 kB`	`152.77 kB` `42.242 kB`	`136 B` `33 B`
`react-table` Table (Primitives only)	`39.502 kB` `12.099 kB`	`39.638 kB` `12.129 kB`	`136 B` `30 B`
`react-table` Table as DataGrid	`126.088 kB` `33.577 kB`	`126.224 kB` `33.612 kB`	`136 B` `35 B`
`react-table` Table (Selection only)	`71.458 kB` `18.877 kB`	`71.594 kB` `18.91 kB`	`136 B` `33 B`
`react-table` Table (Sort only)	`70.077 kB` `18.48 kB`	`70.213 kB` `18.511 kB`	`136 B` `31 B`
`react-tags-preview` InteractionTag	`33.653 kB` `9.14 kB`	`33.789 kB` `9.174 kB`	`136 B` `34 B`
`react-tags-preview` Tag	`25.292 kB` `8.36 kB`	`25.428 kB` `8.396 kB`	`136 B` `36 B`
`react-tags-preview` TagGroup	`69.523 kB` `20.462 kB`	`69.659 kB` `20.498 kB`	`136 B` `36 B`
`react-text` Text - Default	`12.907 kB` `5.102 kB`	`13.043 kB` `5.129 kB`	`136 B` `27 B`
`react-text` Text - Wrappers	`16.079 kB` `5.411 kB`	`16.215 kB` `5.447 kB`	`136 B` `36 B`
`react-textarea` Textarea	`27.166 kB` `9.013 kB`	`27.302 kB` `9.047 kB`	`136 B` `34 B`
`react-toast` Toast (including Toaster)	`87.554 kB` `26.007 kB`	`87.69 kB` `26.037 kB`	`136 B` `30 B`
`react-tooltip` Tooltip	`47.78 kB` `16.807 kB`	`47.916 kB` `16.838 kB`	`136 B` `31 B`
`react-tree` FlatTree	`129.67 kB` `37.187 kB`	`129.806 kB` `37.222 kB`	`136 B` `35 B`
`react-tree` PersonaFlatTree	`130.693 kB` `37.371 kB`	`130.829 kB` `37.407 kB`	`136 B` `36 B`
`react-tree` PersonaTree	`127.588 kB` `36.264 kB`	`127.724 kB` `36.301 kB`	`136 B` `37 B`
`react-tree` Tree	`126.565 kB` `36.065 kB`	`126.701 kB` `36.104 kB`	`136 B` `39 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.162 kB` `1.735 kB`
`react-overflow` hooks only	`12.419 kB` `4.687 kB`
`react-portal` Portal	`12.255 kB` `4.504 kB`
`react-portal-compat` PortalCompatProvider	`6.48 kB` `2.203 kB`
`react-positioning` usePositioning	`25.111 kB` `9.1 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`34.611 kB` `7.295 kB`
`react-theme` Teams: Light theme	`19.282 kB` `5.486 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against f9f2b69201c81811e8e4ce23f971d6174127d0ca}

size-auditor · 2023-08-10T16:24:26Z

Asset size changes

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

Baseline commit: f9f2b69201c81811e8e4ce23f971d6174127d0ca (build)

fabricteam · 2023-08-10T16:25:03Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2023-08-10T16:28:12Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	620	616	5000
Breadcrumb	mount	1681	1657	1000
Checkbox	mount	1676	1672	5000
CheckboxBase	mount	1494	1493	5000
ChoiceGroup	mount	2886	2925	5000
ComboBox	mount	649	649	1000
CommandBar	mount	6283	6320	1000
ContextualMenu	mount	11920	12143	1000
DefaultButton	mount	740	745	5000
DetailsRow	mount	2155	2207	5000
DetailsRowFast	mount	2211	2164	5000
DetailsRowNoStyles	mount	1970	1984	5000
Dialog	mount	2798	2832	1000
DocumentCardTitle	mount	224	222	1000
Dropdown	mount	1968	1975	5000
FocusTrapZone	mount	1114	1133	5000
FocusZone	mount	1075	1081	5000
GroupedList	mount	41086	40869	2
GroupedList	virtual-rerender	19821	19714	2
GroupedList	virtual-rerender-with-unmount	50225	50462	2
GroupedListV2	mount	227	216	2
GroupedListV2	virtual-rerender	213	207	2
GroupedListV2	virtual-rerender-with-unmount	226	227	2
IconButton	mount	1049	1077	5000
Label	mount	334	327	5000
Layer	mount	2704	2737	5000
Link	mount	386	381	5000
MenuButton	mount	934	919	5000
MessageBar	mount	21450	21617	5000
Nav	mount	1956	1910	1000
OverflowSet	mount	787	786	5000
Panel	mount	1755	1775	1000
Persona	mount	725	769	1000
Pivot	mount	853	868	1000
PrimaryButton	mount	836	839	5000
Rating	mount	4598	4616	5000
SearchBox	mount	902	903	5000
Shimmer	mount	1858	1851	5000
Slider	mount	1329	1274	5000
SpinButton	mount	2826	2853	5000
Spinner	mount	376	394	5000
SplitButton	mount	1836	1817	5000
Stack	mount	414	402	5000
StackWithIntrinsicChildren	mount	846	860	5000
StackWithTextChildren	mount	2583	2570	5000
SwatchColorPicker	mount	6043	6040	5000
TagPicker	mount	1467	1443	5000
Text	mount	375	367	5000
TextField	mount	941	944	5000
ThemeProvider	mount	823	820	5000
ThemeProvider	virtual-rerender	588	592	5000
ThemeProvider	virtual-rerender-with-unmount	1290	1299	5000
Toggle	mount	601	636	5000
buttonNative	mount	189	183	5000

marcosmoura

Approved for files owned by @microsoft/fluentui-react-build!

bsunderhus self-assigned this Aug 10, 2023

github-actions Bot added this to the August Project Cycle Q4 2023 milestone Aug 10, 2023

bsunderhus marked this pull request as ready for review August 10, 2023 16:49

bsunderhus requested review from a team as code owners August 10, 2023 16:49