Skip to content
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.

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

feat(react-jsx-runtime): v9 packages to use importSource #28959

Conversation

bsunderhus
Copy link
Contributor

@bsunderhus bsunderhus commented Aug 23, 2023

  1. Migrates all v9 packages to use the new import source mechanism available in @fluentui/react-jsx-runtime feat: supports new automatic JSX runtime #28810
  2. Bumps peerDependencies to comply with minimal react version requirement (v16.14.0)

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

fabricteam commented Aug 23, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

@bsunderhus bsunderhus force-pushed the react-jsx-runtime/feat--v9-packages-to-use-importSource branch from c1a8d06 to 3d44821 Compare August 23, 2023 12:06
@bsunderhus bsunderhus changed the title DO NOT MERGE - feat(react-jsx-runtime): v9 packages to use importSource feat(react-jsx-runtime): v9 packages to use importSource Aug 23, 2023
@fabricteam
Copy link
Collaborator

fabricteam commented Aug 23, 2023

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)
88.934 kB
26.969 kB
91.384 kB
27.926 kB
2.45 kB
957 B
react-alert
Alert
82.011 kB
22.042 kB
84.549 kB
23.128 kB
2.538 kB
1.086 kB
react-avatar
Avatar
47.206 kB
14.562 kB
49.738 kB
15.631 kB
2.532 kB
1.069 kB
react-avatar
AvatarGroup
16.186 kB
6.457 kB
18.584 kB
7.448 kB
2.398 kB
991 B
react-avatar
AvatarGroupItem
61.985 kB
18.974 kB
64.39 kB
19.977 kB
2.405 kB
1.003 kB
react-badge
Badge
23.253 kB
7.288 kB
25.793 kB
8.348 kB
2.54 kB
1.06 kB
react-badge
CounterBadge
24.154 kB
7.589 kB
26.694 kB
8.658 kB
2.54 kB
1.069 kB
react-badge
PresenceBadge
22.21 kB
7.9 kB
24.75 kB
8.96 kB
2.54 kB
1.06 kB
react-button
Button
37.127 kB
9.727 kB
39.658 kB
10.79 kB
2.531 kB
1.063 kB
react-button
CompoundButton
44.476 kB
11.225 kB
47.013 kB
12.284 kB
2.537 kB
1.059 kB
react-button
MenuButton
41.536 kB
10.992 kB
44.085 kB
12.041 kB
2.549 kB
1.049 kB
react-button
SplitButton
49.571 kB
12.548 kB
52.111 kB
13.612 kB
2.54 kB
1.064 kB
react-button
ToggleButton
54.215 kB
11.634 kB
56.746 kB
12.698 kB
2.531 kB
1.064 kB
react-card
Card - All
88.694 kB
25.317 kB
91.249 kB
26.409 kB
2.555 kB
1.092 kB
react-card
Card
83.495 kB
23.797 kB
86.038 kB
24.868 kB
2.543 kB
1.071 kB
react-card
CardFooter
9.408 kB
3.96 kB
11.951 kB
5.031 kB
2.543 kB
1.071 kB
react-card
CardHeader
11.701 kB
4.748 kB
14.237 kB
5.798 kB
2.536 kB
1.05 kB
react-card
CardPreview
10.367 kB
4.351 kB
12.903 kB
5.408 kB
2.536 kB
1.057 kB
react-checkbox
Checkbox
33.072 kB
10.727 kB
35.614 kB
11.771 kB
2.542 kB
1.044 kB
react-combobox
Combobox (including child components)
87.933 kB
28.539 kB
90.383 kB
29.52 kB
2.45 kB
981 B
react-combobox
Dropdown (including child components)
86.278 kB
28.169 kB
88.738 kB
29.167 kB
2.46 kB
998 B
react-components
react-components: Button, FluentProvider & webLightTheme
66.907 kB
18.548 kB
69.517 kB
19.64 kB
2.61 kB
1.092 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
205.508 kB
58.347 kB
208.067 kB
59.345 kB
2.559 kB
998 B
react-components
react-components: FluentProvider & webLightTheme
38.103 kB
12.469 kB
40.713 kB
13.509 kB
2.61 kB
1.04 kB
react-datepicker-compat
DatePicker Compat
208.62 kB
57.77 kB
211.173 kB
58.752 kB
2.553 kB
982 B
react-dialog
Dialog (including children components)
87.504 kB
26.478 kB
89.917 kB
27.447 kB
2.413 kB
969 B
react-divider
Divider
17.168 kB
6.327 kB
19.704 kB
7.38 kB
2.536 kB
1.053 kB
react-field
Field
18.466 kB
7.046 kB
21.036 kB
8.091 kB
2.57 kB
1.045 kB
react-image
Image
12.099 kB
4.808 kB
14.62 kB
5.869 kB
2.521 kB
1.061 kB
react-infobutton
InfoButton
126.751 kB
39.688 kB
129.184 kB
40.661 kB
2.433 kB
973 B
react-infobutton
InfoLabel
130.464 kB
40.865 kB
132.909 kB
41.852 kB
2.445 kB
987 B
react-input
Input
23.414 kB
7.759 kB
25.955 kB
8.81 kB
2.541 kB
1.051 kB
react-label
Label
10.493 kB
4.334 kB
13.036 kB
5.405 kB
2.543 kB
1.071 kB
react-link
Link
13.37 kB
5.445 kB
15.902 kB
6.506 kB
2.532 kB
1.061 kB
react-menu
Menu (including children components)
136.96 kB
41.935 kB
139.369 kB
42.976 kB
2.409 kB
1.041 kB
react-menu
Menu (including selectable components)
139.696 kB
42.47 kB
142.105 kB
43.507 kB
2.409 kB
1.037 kB
react-persona
Persona
54.101 kB
16.433 kB
56.629 kB
17.505 kB
2.528 kB
1.072 kB
react-popover
Popover
116.022 kB
36.301 kB
118.438 kB
37.318 kB
2.416 kB
1.017 kB
react-progress
ProgressBar
13.872 kB
5.539 kB
16.409 kB
6.58 kB
2.537 kB
1.041 kB
react-provider
FluentProvider
18.648 kB
6.899 kB
21.258 kB
7.937 kB
2.61 kB
1.038 kB
react-radio
Radio
26.784 kB
8.642 kB
29.318 kB
9.699 kB
2.534 kB
1.057 kB
react-radio
RadioGroup
11.814 kB
4.911 kB
14.344 kB
5.942 kB
2.53 kB
1.031 kB
react-select
Select
24.776 kB
8.731 kB
27.324 kB
9.773 kB
2.548 kB
1.042 kB
react-slider
Slider
34.311 kB
11.102 kB
36.849 kB
12.171 kB
2.538 kB
1.069 kB
react-spinbutton
SpinButton
32.992 kB
10.31 kB
35.53 kB
11.367 kB
2.538 kB
1.057 kB
react-spinner
Spinner
19.748 kB
7.055 kB
22.292 kB
8.113 kB
2.544 kB
1.058 kB
react-switch
Switch
29.343 kB
9.299 kB
31.885 kB
10.356 kB
2.542 kB
1.057 kB
react-table
DataGrid
154.174 kB
42.648 kB
156.473 kB
43.597 kB
2.299 kB
949 B
react-table
Table (Primitives only)
39.939 kB
12.198 kB
42.52 kB
13.286 kB
2.581 kB
1.088 kB
react-table
Table as DataGrid
126.91 kB
33.753 kB
129.333 kB
34.77 kB
2.423 kB
1.017 kB
react-table
Table (Selection only)
72.188 kB
19.062 kB
74.617 kB
20.089 kB
2.429 kB
1.027 kB
react-table
Table (Sort only)
70.819 kB
18.665 kB
73.248 kB
19.685 kB
2.429 kB
1.02 kB
react-tags-preview
InteractionTag
11.31 kB
4.567 kB
13.85 kB
5.626 kB
2.54 kB
1.059 kB
react-tags-preview
Tag
27.061 kB
8.519 kB
29.604 kB
9.567 kB
2.543 kB
1.048 kB
react-tags-preview
TagGroup
69.959 kB
20.568 kB
72.493 kB
21.628 kB
2.534 kB
1.06 kB
react-text
Text - Default
13.113 kB
5.151 kB
15.644 kB
6.223 kB
2.531 kB
1.072 kB
react-text
Text - Wrappers
16.285 kB
5.477 kB
18.817 kB
6.546 kB
2.532 kB
1.069 kB
react-textarea
Textarea
27.479 kB
9.12 kB
30.005 kB
10.156 kB
2.526 kB
1.036 kB
react-toast
Toast (including Toaster)
88.365 kB
26.188 kB
90.782 kB
27.171 kB
2.417 kB
983 B
react-tooltip
Tooltip
48.593 kB
17.017 kB
51.154 kB
18.06 kB
2.561 kB
1.043 kB
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
330 B
global-context
createContextSelector
537 B
342 B
react-jsx-runtime
Classic Pragma
1.072 kB
544 B
react-jsx-runtime
JSX Dev Runtime
2.775 kB
1.29 kB
react-jsx-runtime
JSX Runtime
3.293 kB
1.529 kB
react-overflow
hooks only
12.594 kB
4.702 kB
react-portal
Portal
12.362 kB
4.543 kB
react-portal-compat
PortalCompatProvider
6.541 kB
2.227 kB
react-positioning
usePositioning
25.245 kB
9.141 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against b93c2ac22355b6cb6f33dd509c6cd9c21f4fffc8

@bsunderhus bsunderhus force-pushed the react-jsx-runtime/feat--v9-packages-to-use-importSource branch from a4b4626 to bdd7f3e Compare August 23, 2023 12:21
@fabricteam
Copy link
Collaborator

fabricteam commented Aug 23, 2023

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 618 601 5000 Possible regression
Button mount 309 309 5000 Possible regression
SpinButton mount 1365 1334 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 618 601 5000 Possible regression
Button mount 309 309 5000 Possible regression
Field mount 1124 1120 5000
FluentProvider mount 698 705 5000
FluentProviderWithTheme mount 75 80 10
FluentProviderWithTheme virtual-rerender 74 73 10
FluentProviderWithTheme virtual-rerender-with-unmount 76 73 10
InfoButton mount 8 15 5000
MakeStyles mount 853 855 50000
Persona mount 1723 1710 5000
SpinButton mount 1365 1334 5000 Possible regression

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 23, 2023

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 4809681:

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

@bsunderhus bsunderhus force-pushed the react-jsx-runtime/feat--v9-packages-to-use-importSource branch from bdd7f3e to 4904656 Compare August 23, 2023 13:00
@size-auditor
Copy link

size-auditor bot commented Aug 23, 2023

Asset size changes

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

Baseline commit: b93c2ac22355b6cb6f33dd509c6cd9c21f4fffc8 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 28, 2023

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ImageMinimalPerf.default 240 217 1.11:1
ProviderMinimalPerf.default 216 197 1.1:1
ChatWithPopoverPerf.default 203 186 1.09:1
PortalMinimalPerf.default 94 86 1.09:1
SegmentMinimalPerf.default 205 192 1.07:1
CardMinimalPerf.default 321 307 1.05:1
IconMinimalPerf.default 377 361 1.04:1
TextMinimalPerf.default 194 186 1.04:1
TreeWith60ListItems.default 88 85 1.04:1
VideoMinimalPerf.default 450 432 1.04:1
AnimationMinimalPerf.default 300 291 1.03:1
ButtonOverridesMissPerf.default 645 633 1.02:1
DialogMinimalPerf.default 445 438 1.02:1
DropdownManyItemsPerf.default 389 381 1.02:1
ReactionMinimalPerf.default 221 217 1.02:1
SplitButtonMinimalPerf.default 2257 2222 1.02:1
AccordionMinimalPerf.default 79 78 1.01:1
AvatarMinimalPerf.default 102 101 1.01:1
DatepickerMinimalPerf.default 3637 3611 1.01:1
InputMinimalPerf.default 546 538 1.01:1
ListMinimalPerf.default 313 309 1.01:1
LoaderMinimalPerf.default 199 198 1.01:1
PopupMinimalPerf.default 379 375 1.01:1
TreeMinimalPerf.default 472 466 1.01:1
ButtonMinimalPerf.default 85 85 1:1
CheckboxMinimalPerf.default 1136 1133 1:1
DividerMinimalPerf.default 204 203 1:1
FormMinimalPerf.default 216 216 1:1
HeaderMinimalPerf.default 210 209 1:1
HeaderSlotsPerf.default 458 460 1:1
LabelMinimalPerf.default 218 218 1:1
TableManyItemsPerf.default 1069 1069 1:1
AttachmentSlotsPerf.default 658 664 0.99:1
BoxMinimalPerf.default 187 188 0.99:1
ListWith60ListItems.default 368 373 0.99:1
SkeletonMinimalPerf.default 194 195 0.99:1
TableMinimalPerf.default 229 231 0.99:1
ToolbarMinimalPerf.default 532 537 0.99:1
AlertMinimalPerf.default 157 161 0.98:1
ButtonSlotsPerf.default 308 313 0.98:1
ChatMinimalPerf.default 413 420 0.98:1
DropdownMinimalPerf.default 1414 1445 0.98:1
EmbedMinimalPerf.default 1852 1889 0.98:1
ItemLayoutMinimalPerf.default 691 705 0.98:1
LayoutMinimalPerf.default 195 199 0.98:1
ListNestedPerf.default 331 337 0.98:1
MenuButtonMinimalPerf.default 949 973 0.98:1
ProviderMergeThemesPerf.default 669 681 0.98:1
SliderMinimalPerf.default 715 727 0.98:1
TextAreaMinimalPerf.default 272 278 0.98:1
CustomToolbarPrototype.default 1454 1489 0.98:1
CarouselMinimalPerf.default 250 257 0.97:1
MenuMinimalPerf.default 495 512 0.97:1
GridMinimalPerf.default 177 185 0.96:1
ListCommonPerf.default 379 395 0.96:1
RefMinimalPerf.default 102 106 0.96:1
TooltipMinimalPerf.default 1264 1319 0.96:1
FlexMinimalPerf.default 150 158 0.95:1
RosterPerf.default 1597 1685 0.95:1
ChatDuplicateMessagesPerf.default 146 155 0.94:1
StatusMinimalPerf.default 374 404 0.93:1
RadioGroupMinimalPerf.default 253 286 0.88:1
AttachmentMinimalPerf.default 72 89 0.81:1

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 28, 2023

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 28, 2023

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 28, 2023

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 610 642 5000
Breadcrumb mount 1661 1675 1000
Checkbox mount 1671 1682 5000
CheckboxBase mount 1463 1461 5000
ChoiceGroup mount 2840 2919 5000
ComboBox mount 652 643 1000
CommandBar mount 6197 6251 1000
ContextualMenu mount 15523 14698 1000
DefaultButton mount 746 739 5000
DetailsRow mount 2184 2156 5000
DetailsRowFast mount 2127 2239 5000
DetailsRowNoStyles mount 2027 2001 5000
Dialog mount 2806 2700 1000
DocumentCardTitle mount 229 225 1000
Dropdown mount 1949 1950 5000
FocusTrapZone mount 1133 1136 5000
FocusZone mount 1082 1047 5000
GroupedList mount 41435 41870 2
GroupedList virtual-rerender 19842 19861 2
GroupedList virtual-rerender-with-unmount 52593 50676 2
GroupedListV2 mount 216 229 2
GroupedListV2 virtual-rerender 205 215 2
GroupedListV2 virtual-rerender-with-unmount 224 218 2
IconButton mount 1052 1089 5000
Label mount 332 332 5000
Layer mount 2671 2740 5000
Link mount 381 378 5000
MenuButton mount 918 914 5000
MessageBar mount 21106 21195 5000
Nav mount 1924 1886 1000
OverflowSet mount 758 767 5000
Panel mount 1778 1739 1000
Persona mount 736 753 1000
Pivot mount 864 848 1000
PrimaryButton mount 829 852 5000
Rating mount 4571 4606 5000
SearchBox mount 901 882 5000
Shimmer mount 1838 1806 5000
Slider mount 1328 1325 5000
SpinButton mount 2824 2877 5000
Spinner mount 383 378 5000
SplitButton mount 1810 1810 5000
Stack mount 412 401 5000
StackWithIntrinsicChildren mount 860 844 5000
StackWithTextChildren mount 2571 2578 5000
SwatchColorPicker mount 6214 6106 5000
TagPicker mount 1438 1424 5000
Text mount 369 373 5000
TextField mount 934 947 5000
ThemeProvider mount 821 842 5000
ThemeProvider virtual-rerender 584 577 5000
ThemeProvider virtual-rerender-with-unmount 1295 1254 5000
Toggle mount 599 606 5000
buttonNative mount 187 198 5000

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/cxe-prg!

@bsunderhus bsunderhus force-pushed the react-jsx-runtime/feat--v9-packages-to-use-importSource branch 2 times, most recently from c382deb to 0e0a134 Compare August 30, 2023 16:15
@bsunderhus bsunderhus force-pushed the react-jsx-runtime/feat--v9-packages-to-use-importSource branch from 0e0a134 to 816fa4b Compare August 31, 2023 09:35
@layershifter layershifter merged commit eea6d93 into microsoft:master Aug 31, 2023
@layershifter
Copy link
Member

We had enough approvals, CI was 🟢 , force merged to unblock.

@bsunderhus bsunderhus deleted the react-jsx-runtime/feat--v9-packages-to-use-importSource branch September 1, 2023 08:28
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Sep 3, 2023
* master:
  refactor(react-drawer): change DrawerHeaderTitle slot creation while keeping the same API (microsoft#29042)
  test(react-drawer): add render tests for drawer subcomponents (microsoft#29043)
  Grouped vertical bar chart - Component tests (microsoft#29031)
  docs: add Fluent UI Insights EP06 to README (microsoft#29051)
  chore: use swc-plugin-de-indent-template-literal for consoles (microsoft#29040)
  chore: adds swc-plugin-de-indent-template-literal (microsoft#29037)
  feat(react-jsx-runtime): v9 packages to use importSource (microsoft#28959)
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Sep 3, 2023
* master: (32 commits)
  refactor(react-drawer): change DrawerHeaderTitle slot creation while keeping the same API (microsoft#29042)
  test(react-drawer): add render tests for drawer subcomponents (microsoft#29043)
  Grouped vertical bar chart - Component tests (microsoft#29031)
  docs: add Fluent UI Insights EP06 to README (microsoft#29051)
  chore: use swc-plugin-de-indent-template-literal for consoles (microsoft#29040)
  chore: adds swc-plugin-de-indent-template-literal (microsoft#29037)
  feat(react-jsx-runtime): v9 packages to use importSource (microsoft#28959)
  chore: update swc build dependencies (microsoft#28989)
  fix(react-tags-preview): add hover/pressed style for windows high contrast (microsoft#29035)
  chore(react-tags-preview): use InteractionTag for TagGroup's stories (microsoft#29024)
  chore(react-tags-preview): use makeResetStyles for base styles (microsoft#29022)
  chore: fix codesandbox export for preview component by making @fluentui/react-components required dependency (microsoft#29016)
  applying package updates
  feat(react-motion): create useReducedMotion and apply to useMotion to skip animations (microsoft#29014)
  ReAdd: Keytips: Align keytipData with visible instance for dupes (microsoft#28992)
  feat(react-drawer): add motion to Drawer (microsoft#28999)
  fix(react-utilities): avoid calling requestAnimationFrame when in SSR (microsoft#29015)
  fix(ssr-tests-v9): use correct path for ssr-tests-v9 stories (microsoft#29025)
  chore: updates devcontainer to use v16-bookworm image (microsoft#28997)
  feat(docsite): add Application Insights telemetry (microsoft#28709)
  ...
@micahgodbolt
Copy link
Member

16.9.8 is the last release of @types/react-dom before 17.0, so the peer dep of ">=16.14.0 <19.0.0" means that no 16.x version will satisfy

#30196 related

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants