Skip to content

feat: supports new automatic JSX runtime #28810

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
bsunderhus merged 1 commit into from
Aug 15, 2023
Merged

feat: supports new automatic JSX runtime #28810

bsunderhus merged 1 commit into from
Aug 15, 2023

Conversation

@bsunderhus
Copy link
Contributor

@bsunderhus bsunderhus commented Aug 10, 2023 •
edited by layershifter
Loading

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)

@bsunderhus bsunderhus self-assigned this Aug 10, 2023
@github-actions github-actions bot added this to the August Project Cycle Q4 2023 milestone Aug 10, 2023
@fabricteam
Copy link
Collaborator

fabricteam commented Aug 10, 2023 •
edited
Loading

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
Copy link

codesandbox-ci bot commented Aug 10, 2023 •
edited
Loading

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
Copy link
Collaborator

fabricteam commented Aug 10, 2023 •
edited
Loading

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
Copy link
Collaborator

fabricteam commented Aug 10, 2023 •
edited
Loading

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 10, 2023 •
edited
Loading

📊 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
Copy link

size-auditor bot commented Aug 10, 2023 •
edited
Loading

Asset size changes

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

Baseline commit: f9f2b69201c81811e8e4ce23f971d6174127d0ca (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 10, 2023 •
edited
Loading

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 10, 2023 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
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

@bsunderhus bsunderhus marked this pull request as ready for review August 10, 2023 16:49
@bsunderhus bsunderhus requested review from a team as code owners August 10, 2023 16:49
layershifter
layershifter reviewed Aug 11, 2023
View reviewed changes
layershifter
layershifter reviewed Aug 11, 2023
View reviewed changes
@bsunderhus bsunderhus force-pushed the react-jsx-runtime/feat--jsx-import-source branch from c4f9d8c to d1f331c Compare August 11, 2023 09:47
@bsunderhus bsunderhus force-pushed the react-jsx-runtime/feat--jsx-import-source branch from d1f331c to ad998e0 Compare August 11, 2023 09:56
layershifter
layershifter approved these changes Aug 11, 2023
View reviewed changes
@bsunderhus bsunderhus force-pushed the react-jsx-runtime/feat--jsx-import-source branch from ad998e0 to 84dc573 Compare August 11, 2023 09:59
@bsunderhus bsunderhus enabled auto-merge (squash) August 11, 2023 09:59
@bsunderhus bsunderhus disabled auto-merge August 11, 2023 10:19
@bsunderhus bsunderhus force-pushed the react-jsx-runtime/feat--jsx-import-source branch from 84dc573 to 67b355f Compare August 11, 2023 10:19
@bsunderhus bsunderhus enabled auto-merge (squash) August 11, 2023 10:54
@bsunderhus bsunderhus mentioned this pull request Aug 14, 2023
Merged
marcosmoura
marcosmoura approved these changes Aug 15, 2023
View reviewed changes
Copy link
Contributor

@marcosmoura marcosmoura left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@bsunderhus bsunderhus merged commit d40ea6e into microsoft:master Aug 15, 2023
@bsunderhus bsunderhus deleted the react-jsx-runtime/feat--jsx-import-source branch August 15, 2023 12:43
This was referenced Aug 22, 2023
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@fabricteam fabricteam fabricteam left review comments

@marcosmoura marcosmoura marcosmoura approved these changes

@layershifter layershifter layershifter approved these changes

Assignees

@bsunderhus bsunderhus

Labels

None yet

Projects

None yet

Milestone

August Project Cycle Q4 2023

Development

Successfully merging this pull request may close these issues.

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

4 participants

@bsunderhus @fabricteam @marcosmoura @layershifter