feat(react-jsx-runtime): scaffolds `react-jsx-runtime` package #27379

bsunderhus · 2023-03-30T17:07:30Z

New Behavior

scaffolds new package react-jsx-runtime

fabricteam · 2023-03-30T17:16:09Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`533 B` `341 B`
`global-context` createContextSelector	`560 B` `352 B`
`priority-overflow` createOverflowManager	`3.194 kB` `1.314 kB`
`react-accordion` Accordion (including children components)	`88.882 kB` `26.551 kB`
`react-alert` Alert	`96.647 kB` `23.133 kB`
`react-avatar` Avatar	`60.312 kB` `15.579 kB`
`react-avatar` AvatarGroup	`18.178 kB` `6.683 kB`
`react-avatar` AvatarGroupItem	`76.573 kB` `20.086 kB`
`react-badge` Badge	`25.85 kB` `7.585 kB`
`react-badge` CounterBadge	`26.833 kB` `7.889 kB`
`react-badge` PresenceBadge	`34.458 kB` `8.693 kB`
`react-button` Button	`39.749 kB` `9.959 kB`
`react-button` CompoundButton	`46.921 kB` `11.428 kB`
`react-button` MenuButton	`44.437 kB` `11.306 kB`
`react-button` SplitButton	`52.931 kB` `12.872 kB`
`react-button` ToggleButton	`58.121 kB` `11.878 kB`
`react-card` Card - All	`83.489 kB` `23.894 kB`
`react-card` Card	`78.308 kB` `22.431 kB`
`react-card` CardFooter	`9.035 kB` `3.799 kB`
`react-card` CardHeader	`10.959 kB` `4.503 kB`
`react-card` CardPreview	`9.84 kB` `4.153 kB`
`react-checkbox` Checkbox	`37.02 kB` `11.255 kB`
`react-combobox` Combobox (including child components)	`89.718 kB` `28.49 kB`
`react-combobox` Dropdown (including child components)	`88.402 kB` `28.217 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`67.994 kB` `18.395 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`207.512 kB` `57.555 kB`
`react-components` react-components: FluentProvider & webLightTheme	`38.819 kB` `12.351 kB`
`react-datepicker-compat` DatePicker Compat	`251.272 kB` `67.329 kB`
`react-dialog` Dialog (including children components)	`93.388 kB` `27.408 kB`
`react-divider` Divider	`19.863 kB` `6.697 kB`
`react-field` Field	`21.509 kB` `7.408 kB`
`react-image` Image	`14.011 kB` `4.993 kB`
`react-infobutton` InfoButton	`130.577 kB` `39.439 kB`
`react-infobutton` InfoLabel	`133.874 kB` `40.488 kB`
`react-input` Input	`26.707 kB` `8.113 kB`
`react-label` Label	`12.57 kB` `4.586 kB`
`react-link` Link	`12.301 kB` `5.07 kB`
`react-menu` Menu (including children components)	`131.038 kB` `39.653 kB`
`react-menu` Menu (including selectable components)	`134.174 kB` `40.187 kB`
`react-overflow` hooks only	`11.214 kB` `4.271 kB`
`react-persona` Persona	`67.338 kB` `17.524 kB`
`react-popover` Popover	`117.58 kB` `35.828 kB`
`react-portal` Portal	`11.649 kB` `4.263 kB`
`react-portal-compat` PortalCompatProvider	`6.446 kB` `2.185 kB`
`react-positioning` usePositioning	`24.008 kB` `8.798 kB`
`react-progress` ProgressBar	`16.322 kB` `5.822 kB`
`react-provider` FluentProvider	`20.766 kB` `7.119 kB`
`react-radio` Radio	`35.48 kB` `11.126 kB`
`react-radio` RadioGroup	`18.889 kB` `6.929 kB`
`react-select` Select	`27.915 kB` `9.189 kB`
`react-slider` Slider	`36.845 kB` `11.474 kB`
`react-spinbutton` SpinButton	`36.598 kB` `10.752 kB`
`react-spinner` Spinner	`23.425 kB` `7.195 kB`
`react-switch` Switch	`32.438 kB` `9.706 kB`
`react-table` DataGrid	`150.829 kB` `41.052 kB`
`react-table` Table (Primitives only)	`47.119 kB` `12.703 kB`
`react-table` Table as DataGrid	`138.971 kB` `35.722 kB`
`react-table` Table (Selection only)	`86.8 kB` `21.742 kB`
`react-table` Table (Sort only)	`86.13 kB` `21.549 kB`
`react-text` Text - Default	`15.018 kB` `5.327 kB`
`react-text` Text - Wrappers	`15.572 kB` `5.23 kB`
`react-textarea` Textarea	`30.108 kB` `9.478 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`31.33 kB` `6.764 kB`
`react-theme` Teams: Light theme	`17.895 kB` `5.162 kB`
`react-tooltip` Tooltip	`49.388 kB` `16.815 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 1071a2a382741b1328228b336c2a94de388a3963}

codesandbox-ci · 2023-03-30T17:19:20Z

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 01b93ca:

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

size-auditor · 2023-03-30T17:20:53Z

Asset size changes

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

Baseline commit: af3c827937dcb0a32f52ef8a93b91c1276956b56 (build)

fabricteam · 2023-03-30T17:33:28Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ImageMinimalPerf.default	318	294	1.08:1
LoaderMinimalPerf.default	245	231	1.06:1
AccordionMinimalPerf.default	106	101	1.05:1
ReactionMinimalPerf.default	298	285	1.05:1
ButtonMinimalPerf.default	118	114	1.04:1
HeaderMinimalPerf.default	280	269	1.04:1
AttachmentMinimalPerf.default	107	104	1.03:1
ButtonSlotsPerf.default	383	372	1.03:1
CarouselMinimalPerf.default	326	317	1.03:1
HeaderSlotsPerf.default	627	606	1.03:1
CardMinimalPerf.default	396	388	1.02:1
ChatWithPopoverPerf.default	245	241	1.02:1
DividerMinimalPerf.default	281	276	1.02:1
RosterPerf.default	1682	1643	1.02:1
RadioGroupMinimalPerf.default	360	352	1.02:1
TextMinimalPerf.default	268	264	1.02:1
TextAreaMinimalPerf.default	362	356	1.02:1
BoxMinimalPerf.default	266	263	1.01:1
CheckboxMinimalPerf.default	1342	1331	1.01:1
EmbedMinimalPerf.default	2083	2058	1.01:1
InputMinimalPerf.default	664	659	1.01:1
ListMinimalPerf.default	416	410	1.01:1
MenuMinimalPerf.default	649	644	1.01:1
MenuButtonMinimalPerf.default	1183	1176	1.01:1
PopupMinimalPerf.default	484	477	1.01:1
RefMinimalPerf.default	144	142	1.01:1
SkeletonMinimalPerf.default	268	265	1.01:1
SplitButtonMinimalPerf.default	2776	2739	1.01:1
TableManyItemsPerf.default	1416	1407	1.01:1
TableMinimalPerf.default	320	316	1.01:1
TooltipMinimalPerf.default	1587	1575	1.01:1
AnimationMinimalPerf.default	389	390	1:1
ButtonOverridesMissPerf.default	772	769	1:1
ChatMinimalPerf.default	555	556	1:1
DatepickerMinimalPerf.default	4335	4329	1:1
DialogMinimalPerf.default	610	607	1:1
DropdownManyItemsPerf.default	478	478	1:1
DropdownMinimalPerf.default	1746	1753	1:1
FlexMinimalPerf.default	211	210	1:1
ItemLayoutMinimalPerf.default	884	887	1:1
PortalMinimalPerf.default	118	118	1:1
ProviderMergeThemesPerf.default	849	852	1:1
SegmentMinimalPerf.default	272	273	1:1
SliderMinimalPerf.default	849	850	1:1
ToolbarMinimalPerf.default	688	686	1:1
TreeMinimalPerf.default	613	611	1:1
TreeWith60ListItems.default	110	110	1:1
AttachmentSlotsPerf.default	783	788	0.99:1
ChatDuplicateMessagesPerf.default	183	184	0.99:1
FormMinimalPerf.default	286	290	0.99:1
ListCommonPerf.default	500	503	0.99:1
ListNestedPerf.default	410	416	0.99:1
ListWith60ListItems.default	460	464	0.99:1
IconMinimalPerf.default	481	486	0.99:1
CustomToolbarPrototype.default	1810	1828	0.99:1
VideoMinimalPerf.default	528	534	0.99:1
AlertMinimalPerf.default	195	199	0.98:1
GridMinimalPerf.default	261	265	0.98:1
LayoutMinimalPerf.default	276	282	0.98:1
ProviderMinimalPerf.default	254	259	0.98:1
LabelMinimalPerf.default	294	302	0.97:1
StatusMinimalPerf.default	533	547	0.97:1
AvatarMinimalPerf.default	137	142	0.96:1

fabricteam · 2023-03-30T17:40:38Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	826	814	5000
Breadcrumb	mount	2219	2263	1000
Checkbox	mount	2186	2171	5000
CheckboxBase	mount	1905	1906	5000
ChoiceGroup	mount	3746	3761	5000
ComboBox	mount	895	903	1000
CommandBar	mount	8128	8188	1000
ContextualMenu	mount	16830	17633	1000
DefaultButton	mount	1006	995	5000
DetailsRow	mount	2926	2905	5000
DetailsRowFast	mount	2934	2918	5000
DetailsRowNoStyles	mount	2683	2690	5000
Dialog	mount	3462	3513	1000
DocumentCardTitle	mount	313	321	1000
Dropdown	mount	2602	2576	5000
FocusTrapZone	mount	1494	1510	5000
FocusZone	mount	1484	1450	5000
GroupedList	mount	50676	59238	2
GroupedList	virtual-rerender	24491	24568	2
GroupedList	virtual-rerender-with-unmount	75030	74891	2
GroupedListV2	mount	319	320	2
GroupedListV2	virtual-rerender	302	301	2
GroupedListV2	virtual-rerender-with-unmount	319	330	2
IconButton	mount	1448	1452	5000
Label	mount	459	454	5000
Layer	mount	3556	3629	5000
Link	mount	555	532	5000
MenuButton	mount	1245	1243	5000
MessageBar	mount	28504	28973	5000
Nav	mount	2536	2558	1000
OverflowSet	mount	1023	1031	5000
Panel	mount	2254	2263	1000
Persona	mount	985	980	1000
Pivot	mount	1173	1195	1000
PrimaryButton	mount	1093	1119	5000
Rating	mount	5850	5850	5000
SearchBox	mount	1157	1140	5000
Shimmer	mount	2335	2378	5000
Slider	mount	1741	1704	5000
SpinButton	mount	3770	3728	5000
Spinner	mount	524	522	5000
SplitButton	mount	2432	2459	5000
Stack	mount	536	541	5000
StackWithIntrinsicChildren	mount	1141	1128	5000
StackWithTextChildren	mount	3245	3229	5000
SwatchColorPicker	mount	8124	8187	5000
TagPicker	mount	2029	2035	5000
Text	mount	507	507	5000
TextField	mount	1226	1224	5000
ThemeProvider	mount	1151	1138	5000
ThemeProvider	virtual-rerender	787	776	5000
ThemeProvider	virtual-rerender-with-unmount	1745	1731	5000
Toggle	mount	810	801	5000
buttonNative	mount	286	285	5000

bsunderhus · 2023-03-31T13:04:04Z

blocked by #27377

fabricteam · 2023-03-31T16:05:14Z

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

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

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	854	879	5000
Button	mount	467	437	5000
Field	mount	1474	1446	5000
FluentProvider	mount	1074	1064	5000
FluentProviderWithTheme	mount	140	130	10
FluentProviderWithTheme	virtual-rerender	130	117	10
FluentProviderWithTheme	virtual-rerender-with-unmount	124	135	10	Possible regression
InfoButton	mount	24	23	5000
MakeStyles	mount	1353	1400	50000
Persona	mount	2347	2372	5000
SpinButton	mount	1949	1915	5000

fabricteam · 2023-03-31T16:14:25Z

🕵 fluentuiv9 No visual regressions between this PR and main

.github/CODEOWNERS

packages/react-components/react-dialog/package.json

packages/react-components/react-dialog/src/components/Dialog/renderDialog.tsx

packages/react-components/react-jsx-runtime/README.md

packages/react-components/react-jsx-runtime/docs/Spec.md

packages/react-components/react-jsx-runtime/src/jsx.ts

packages/react-components/react-jsx-runtime/package.json

packages/react-components/react-jsx-runtime/.npmignore

packages/react-components/react-jsx-runtime/docs/Spec.md

JustSlone

We should remove the Spec.md and any other component specific files

.github/CODEOWNERS

bsunderhus self-assigned this Mar 30, 2023

msft-fluent-ui-bot assigned GeoffCoxMSFT Mar 30, 2023

github-actions bot added this to the March Project Cycle Q1 2023 milestone Mar 30, 2023

bsunderhus unassigned GeoffCoxMSFT Mar 31, 2023

bsunderhus added the Status: Blocked Resolution blocked by another issue label Mar 31, 2023

bsunderhus force-pushed the react-jsx-runtime/feat--create-react-jsx-runtime-package branch from 7c25a30 to bd7cee5 Compare March 31, 2023 13:23

bsunderhus force-pushed the react-jsx-runtime/feat--create-react-jsx-runtime-package branch 2 times, most recently from 7653999 to 654c3d7 Compare March 31, 2023 16:08

layershifter reviewed Apr 3, 2023

View reviewed changes

github-actions bot modified the milestones: March Project Cycle Q1 2023, April Project Cycle Q2 2023 Apr 3, 2023

bsunderhus removed the Status: Blocked Resolution blocked by another issue label Apr 3, 2023

bsunderhus force-pushed the react-jsx-runtime/feat--create-react-jsx-runtime-package branch 7 times, most recently from 36e8026 to c05a8b9 Compare April 5, 2023 11:31

bsunderhus changed the title ~~feat(react-jsx-runtime): updates JSX custom pragma~~ feat(react-jsx-runtime): create react-jsx-runtime package Apr 5, 2023

bsunderhus changed the title ~~feat(react-jsx-runtime): create react-jsx-runtime package~~ feat(react-jsx-runtime): scaffolds react-jsx-runtime package Apr 5, 2023

bsunderhus marked this pull request as ready for review April 5, 2023 11:33

bsunderhus requested review from a team, JustSlone, jurokapsiar and tudorpopams as code owners April 5, 2023 11:33

layershifter reviewed Apr 5, 2023

View reviewed changes

packages/react-components/react-jsx-runtime/package.json Outdated Show resolved Hide resolved

layershifter approved these changes Apr 5, 2023

View reviewed changes

tudorpopams requested a review from Hotell April 5, 2023 12:06

bsunderhus force-pushed the react-jsx-runtime/feat--create-react-jsx-runtime-package branch from 30bf17e to 28abafb Compare April 5, 2023 12:22

ling1726 reviewed Apr 5, 2023

View reviewed changes

packages/react-components/react-jsx-runtime/.npmignore Show resolved Hide resolved

ling1726 reviewed Apr 5, 2023

View reviewed changes

packages/react-components/react-jsx-runtime/docs/Spec.md Outdated Show resolved Hide resolved

ling1726 approved these changes Apr 5, 2023

View reviewed changes

JustSlone approved these changes Apr 5, 2023

View reviewed changes

bsunderhus enabled auto-merge (squash) April 5, 2023 17:45

fabricteam reviewed Apr 5, 2023

View reviewed changes

.github/CODEOWNERS Show resolved Hide resolved

fabricteam reviewed Apr 5, 2023

View reviewed changes

.github/CODEOWNERS Show resolved Hide resolved

bsunderhus and others added 4 commits April 5, 2023 20:27

feat: creates react-jsx-runtime package

ae9f4b7

Apply suggestions from code review

4dc4f12

chore: fix package.json

864714e

chore: remove Spec.md

01b93ca

bsunderhus force-pushed the react-jsx-runtime/feat--create-react-jsx-runtime-package branch from 96e57b4 to 01b93ca Compare April 5, 2023 18:27

fabricteam reviewed Apr 5, 2023

View reviewed changes

.github/CODEOWNERS Show resolved Hide resolved

fabricteam reviewed Apr 5, 2023

View reviewed changes

.github/CODEOWNERS Show resolved Hide resolved

bsunderhus merged commit ae395e3 into microsoft:master Apr 6, 2023

feat(react-jsx-runtime): scaffolds react-jsx-runtime package #27379

feat(react-jsx-runtime): scaffolds react-jsx-runtime package #27379

Uh oh!

Conversation

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

Uh oh!

New Behavior

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

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

Uh oh!

Uh oh!

size-auditor bot commented Mar 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 Mar 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 Mar 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

bsunderhus commented Mar 31, 2023

Uh oh!

fabricteam commented Mar 31, 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 Mar 31, 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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JustSlone left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

feat(react-jsx-runtime): scaffolds `react-jsx-runtime` package #27379

feat(react-jsx-runtime): scaffolds `react-jsx-runtime` package #27379

bsunderhus commented Mar 30, 2023 •

edited

Loading

fabricteam commented Mar 30, 2023 •

edited

Loading

codesandbox-ci bot commented Mar 30, 2023 •

edited

Loading

size-auditor bot commented Mar 30, 2023 •

edited

Loading

fabricteam commented Mar 30, 2023 •

edited

Loading

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

fabricteam commented Mar 30, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Mar 31, 2023 •

edited

Loading

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

fabricteam commented Mar 31, 2023 •

edited

Loading