[TESTING] Browser matrix-based transpilation #26504

TristanWatanabe · 2023-01-25T18:29:35Z

Previous Behavior

New Behavior

Related Issue(s)

Fixes #

… packages

… transpiled ESM

…again with SWC for browser matrix support

…files

fabricteam · 2023-01-25T18:52:07Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`priority-overflow` createOverflowManager	`3.182 kB` `1.308 kB`	`3.187 kB` `1.31 kB`	`5 B` `2 B`
`react-accordion` Accordion (including children components)	`80.097 kB` `24.712 kB`	`80.406 kB` `24.796 kB`	`309 B` `84 B`
`react-alert` Alert	`86.163 kB` `21.727 kB`	`86.521 kB` `21.859 kB`	`358 B` `132 B`
`react-avatar` Avatar	`52.952 kB` `14.728 kB`	`53.221 kB` `14.817 kB`	`269 B` `89 B`
`react-avatar` AvatarGroup	`15.42 kB` `6.167 kB`	`15.494 kB` `6.188 kB`	`74 B` `21 B`
`react-avatar` AvatarGroupItem	`69.17 kB` `19.027 kB`	`69.514 kB` `19.124 kB`	`344 B` `97 B`
`react-badge` Badge	`23.78 kB` `7.542 kB`	`23.854 kB` `7.559 kB`	`74 B` `17 B`
`react-badge` CounterBadge	`24.67 kB` `7.825 kB`	`24.744 kB` `7.841 kB`	`74 B` `16 B`
`react-badge` PresenceBadge	`25.728 kB` `7.439 kB`	`25.802 kB` `7.464 kB`	`74 B` `25 B`
`react-button` Button	`33.487 kB` `8.822 kB`	`33.65 kB` `8.869 kB`	`163 B` `47 B`
`react-button` CompoundButton	`40.507 kB` `10.172 kB`	`40.677 kB` `10.215 kB`	`170 B` `43 B`
`react-button` MenuButton	`38.167 kB` `10.153 kB`	`38.337 kB` `10.203 kB`	`170 B` `50 B`
`react-button` SplitButton	`45.737 kB` `11.577 kB`	`46.031 kB` `11.678 kB`	`294 B` `101 B`
`react-button` ToggleButton	`49.45 kB` `10.849 kB`	`49.687 kB` `10.89 kB`	`237 B` `41 B`
`react-card` Card - All	`78.082 kB` `22.521 kB`	`78.59 kB` `22.681 kB`	`508 B` `160 B`
`react-card` Card	`72.92 kB` `21.108 kB`	`73.304 kB` `21.221 kB`	`384 B` `113 B`
`react-card` CardFooter	`9.04 kB` `3.807 kB`	`9.114 kB` `3.828 kB`	`74 B` `21 B`
`react-card` CardHeader	`10.916 kB` `4.487 kB`	`11.11 kB` `4.537 kB`	`194 B` `50 B`
`react-card` CardPreview	`9.847 kB` `4.159 kB`	`9.989 kB` `4.197 kB`	`142 B` `38 B`
`react-checkbox` Checkbox	`32.768 kB` `10.213 kB`	`33.123 kB` `10.291 kB`	`355 B` `78 B`
`react-checkbox` CheckboxField	`39.615 kB` `12.07 kB`	`40.039 kB` `12.175 kB`	`424 B` `105 B`
`react-combobox` Combobox (including child components)	`82.678 kB` `26.408 kB`	`83.226 kB` `26.577 kB`	`548 B` `169 B`
`react-combobox` ComboboxField	`79.037 kB` `26.159 kB`	`79.643 kB` `26.324 kB`	`606 B` `165 B`
`react-combobox` Dropdown (including child components)	`81.346 kB` `26.144 kB`	`81.893 kB` `26.292 kB`	`547 B` `148 B`
`react-components` react-components: Button, FluentProvider & webLightTheme	`60.391 kB` `16.843 kB`	`80.163 kB` `23.987 kB`	`19.772 kB` `7.144 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`188.158 kB` `52.87 kB`	`208.73 kB` `60.429 kB`	`20.572 kB` `7.559 kB`
`react-components` react-components: FluentProvider & webLightTheme	`34.751 kB` `11.453 kB`	`54.218 kB` `18.243 kB`	`19.467 kB` `6.79 kB`
`react-dialog` Dialog (including children components)	`83.576 kB` `24.951 kB`	`84.159 kB` `25.079 kB`	`583 B` `128 B`
`react-divider` Divider	`17.042 kB` `6.153 kB`	`17.238 kB` `6.201 kB`	`196 B` `48 B`
`react-field` Field	`17.554 kB` `6.498 kB`	`17.752 kB` `6.555 kB`	`198 B` `57 B`
`react-image` Image	`11.259 kB` `4.473 kB`	`11.333 kB` `4.492 kB`	`74 B` `19 B`
`react-infobutton` InfoButton	`118.656 kB` `36.11 kB`	`119.53 kB` `36.305 kB`	`874 B` `195 B`
`react-input` Input	`24.848 kB` `8.136 kB`	`25.015 kB` `8.18 kB`	`167 B` `44 B`
`react-input` InputField	`34.932 kB` `11.044 kB`	`35.287 kB` `11.139 kB`	`355 B` `95 B`
`react-label` Label	`9.817 kB` `4.067 kB`	`9.891 kB` `4.088 kB`	`74 B` `21 B`
`react-link` Link	`12.306 kB` `5.073 kB`	`12.38 kB` `5.088 kB`	`74 B` `15 B`
`react-menu` Menu (including children components)	`118.221 kB` `36.568 kB`	`119.166 kB` `36.79 kB`	`945 B` `222 B`
`react-menu` Menu (including selectable components)	`121.29 kB` `37.071 kB`	`122.235 kB` `37.301 kB`	`945 B` `230 B`
`react-overflow` hooks only	`11.139 kB` `4.233 kB`	`11.435 kB` `4.309 kB`	`296 B` `76 B`
`react-persona` Persona	`58.989 kB` `16.379 kB`	`59.258 kB` `16.471 kB`	`269 B` `92 B`
`react-popover` Popover	`105.773 kB` `32.613 kB`	`106.647 kB` `32.829 kB`	`874 B` `216 B`
`react-portal-compat` PortalCompatProvider	`6.069 kB` `2.053 kB`	`26.643 kB` `9.561 kB`	`20.574 kB` `7.508 kB`
`react-positioning` usePositioning	`20.856 kB` `7.766 kB`	`20.955 kB` `7.808 kB`	`99 B` `42 B`
`react-progress` ProgressBar	`13.573 kB` `5.232 kB`	`13.647 kB` `5.252 kB`	`74 B` `20 B`
`react-progress` ProgressField	`23.747 kB` `8.314 kB`	`24.009 kB` `8.392 kB`	`262 B` `78 B`
`react-provider` FluentProvider	`16.818 kB` `6.247 kB`	`36.226 kB` `12.997 kB`	`19.408 kB` `6.75 kB`
`react-radio` Radio	`32.353 kB` `10.504 kB`	`32.712 kB` `10.587 kB`	`359 B` `83 B`
`react-radio` RadioGroup	`14.822 kB` `5.91 kB`	`15.107 kB` `6 kB`	`285 B` `90 B`
`react-radio` RadioGroupField	`24.837 kB` `9.021 kB`	`25.189 kB` `9.12 kB`	`352 B` `99 B`
`react-select` Select	`24.14 kB` `8.271 kB`	`24.307 kB` `8.308 kB`	`167 B` `37 B`
`react-select` SelectField	`33.258 kB` `10.729 kB`	`33.613 kB` `10.828 kB`	`355 B` `99 B`
`react-slider` Slider	`32.768 kB` `10.438 kB`	`33.128 kB` `10.526 kB`	`360 B` `88 B`
`react-slider` SliderField	`42.541 kB` `13.318 kB`	`42.965 kB` `13.422 kB`	`424 B` `104 B`
`react-spinbutton` SpinButton	`45.161 kB` `13.035 kB`	`45.38 kB` `13.088 kB`	`219 B` `53 B`
`react-spinbutton` SpinButtonField	`54.303 kB` `15.568 kB`	`54.71 kB` `15.717 kB`	`407 B` `149 B`
`react-spinner` Spinner	`20.552 kB` `6.658 kB`	`20.749 kB` `6.719 kB`	`197 B` `61 B`
`react-switch` Switch	`27.902 kB` `8.647 kB`	`28.181 kB` `8.714 kB`	`279 B` `67 B`
`react-switch` SwitchField	`34.629 kB` `10.518 kB`	`34.977 kB` `10.598 kB`	`348 B` `80 B`
`react-table` DataGrid	`129.423 kB` `35.243 kB`	`130.269 kB` `35.401 kB`	`846 B` `158 B`
`react-table` Table (Primitives only)	`42.971 kB` `11.781 kB`	`43.202 kB` `11.825 kB`	`231 B` `44 B`
`react-table` Table as DataGrid	`127.672 kB` `32.893 kB`	`128.449 kB` `33.075 kB`	`777 B` `182 B`
`react-table` Table (Selection only)	`81.106 kB` `20.161 kB`	`81.813 kB` `20.304 kB`	`707 B` `143 B`
`react-table` Table (Sort only)	`80.535 kB` `20.005 kB`	`81.193 kB` `20.139 kB`	`658 B` `134 B`
`react-text` Text - Default	`12.261 kB` `4.819 kB`	`12.335 kB` `4.838 kB`	`74 B` `19 B`
`react-text` Text - Wrappers	`15.571 kB` `5.23 kB`	`15.645 kB` `5.251 kB`	`74 B` `21 B`
`react-textarea` Textarea	`26.331 kB` `8.581 kB`	`26.498 kB` `8.616 kB`	`167 B` `35 B`
`react-textarea` TextareaField	`36.411 kB` `11.458 kB`	`36.766 kB` `11.548 kB`	`355 B` `90 B`
`react-theme` Teams: all themes	`30.908 kB` `6.714 kB`	`30.967 kB` `6.751 kB`	`59 B` `37 B`
`react-theme` Teams: Light theme	`17.776 kB` `5.141 kB`	`17.835 kB` `5.178 kB`	`59 B` `37 B`
`react-tooltip` Tooltip	`43.634 kB` `15.26 kB`	`44.003 kB` `15.371 kB`	`369 B` `111 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`533 B` `341 B`
`global-context` createContextSelector	`554 B` `348 B`
`react-portal` Portal	`11.122 kB` `4.102 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 6134f0d688a0ea092586dd319b314b946c4fc3d3}

codesandbox-ci · 2023-01-25T19:04:36Z

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

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

size-auditor · 2023-01-25T19:04:58Z

Asset size changes

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

Baseline commit: 6134f0d688a0ea092586dd319b314b946c4fc3d3 (build)

fabricteam · 2023-01-25T19:08:45Z

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

⚠️ No perf measurements available

fabricteam · 2023-01-25T19:11:56Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1197	1198	5000
Breadcrumb	mount	2859	2812	1000
Checkbox	mount	2645	2633	5000
CheckboxBase	mount	2374	2392	5000
ChoiceGroup	mount	4264	4292	5000
ComboBox	mount	1159	1219	1000
CommandBar	mount	9333	9290	1000
ContextualMenu	mount	10204	10141	1000
DefaultButton	mount	1360	1365	5000
DetailsRow	mount	3409	3389	5000
DetailsRowFast	mount	3397	3378	5000
DetailsRowNoStyles	mount	3213	3228	5000
Dialog	mount	2973	2949	1000
DocumentCardTitle	mount	573	581	1000
Dropdown	mount	3190	3157	5000
FocusTrapZone	mount	1979	1972	5000
FocusZone	mount	1945	1897	5000
GroupedList	mount	1840	2056	2
GroupedList	virtual-rerender	1105	1107	2
GroupedList	virtual-rerender-with-unmount	1602	1634	2
GroupedListV2	mount	572	563	2
GroupedListV2	virtual-rerender	542	545	2
GroupedListV2	virtual-rerender-with-unmount	560	574	2
IconButton	mount	1774	1785	5000
Label	mount	746	737	5000
Layer	mount	4186	4178	5000
Link	mount	854	853	5000
MenuButton	mount	1610	1632	5000
MessageBar	mount	2346	2351	5000
Nav	mount	3079	3094	1000
OverflowSet	mount	1415	1420	5000
Panel	mount	2505	2485	1000
Persona	mount	1289	1309	1000
Pivot	mount	1530	1496	1000
PrimaryButton	mount	1498	1491	5000
Rating	mount	6982	6953	5000
SearchBox	mount	1497	1504	5000
Shimmer	mount	2939	2966	5000
Slider	mount	2086	2123	5000
SpinButton	mount	4264	4327	5000
Spinner	mount	843	834	5000
SplitButton	mount	2852	2865	5000
Stack	mount	865	862	5000
StackWithIntrinsicChildren	mount	2259	2242	5000
StackWithTextChildren	mount	4945	4944	5000
SwatchColorPicker	mount	9437	9489	5000
TagPicker	mount	2332	2333	5000
TeachingBubble	mount	75994	75417	5000
Text	mount	815	819	5000
TextField	mount	1547	1547	5000
ThemeProvider	mount	1442	1431	5000
ThemeProvider	virtual-rerender	1139	1142	5000
ThemeProvider	virtual-rerender-with-unmount	1982	1991	5000
Toggle	mount	1143	1124	5000
buttonNative	mount	540	533	5000

fabricteam · 2023-01-25T19:26:37Z

🕵 FluentUI-v0 No visual regressions between this PR and main

fabricteam · 2023-01-25T20:15:49Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1275	1285	5000
Button	mount	930	933	5000
FluentProvider	mount	1550	1553	5000
FluentProviderWithTheme	mount	586	594	10
FluentProviderWithTheme	virtual-rerender	545	544	10
FluentProviderWithTheme	virtual-rerender-with-unmount	589	597	10
InfoButton	mount	517	530	5000
MakeStyles	mount	1984	1985	50000
Persona	mount	2871	2812	5000
SpinButton	mount	2351	2373	5000

TristanWatanabe · 2023-01-26T17:42:15Z

Update: Exporting withFluentProvider from @fluentui/react-storybook-addon and explicitly declaring this decorator within the v9 VR test package resolves the problem. Still not really sure why this needs to suddenly be explicitly declared though 😕

Commit with this fix: 0605317

For some reason, having the packages transpiled with SWC is causing the v9 VR tests written in CSF to not render with the FluentProvider. It works fine when storybook starts locally but not when build-storybook is ran and then snapshots are taken. The issue stems from the way the stories are being compiled with the build-storybook because when those files were opened, the rendered component already doesn't have proper styling

fabricteam · 2023-01-26T18:51:12Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2023-01-26T18:57:44Z

🕵 fluentuiv9 No visual regressions between this PR and main

TristanWatanabe added 22 commits January 20, 2023 01:03

feat: add swc task and TS declaration file emit task

35ae6c6

feat: update migrate-converged-pkg to add swcrc file

64760b1

chore: update build just-task to account for swc transpilation for v9…

983b3ac

… packages

chore: add swcrc file and deps to v9 packages

10ffe65

chore: update yarn.lock

61afebb

fix: add "@swc/cli": "0.1.59" dep

48a82da

chore: update yarn.lock file

7fe4702

chore: add babel-plugin-module-resolver

880d4d5

Test: add module-resolver plugin to babel.ts and compile CJS based of…

3251eff

… transpiled ESM

fix: use babel-plugin-module-resolver version that supports node < 16

dc868e9

fix(global-context): restore node types

bf8a75d

fix: add swcrc files to v9 apps

544fff8

Merge branch 'master' into swc-transpilation-take-2

3fc2995

fix: add swcrc file to v8-v9 migration package

5a0a83e

New Approach: Transpile with TS first and then transpile those files …

3635c42

…again with SWC for browser matrix support

fix(vr-tests-v9): use rootMain storybook addons

dba0744

fix: add react-storybook-addon back

0616364

fix(migrate-converged-pkg): use full browser support matrix as targets

f7290ae

chore: update swcrc files of v9 packages to target full browser matrix

4b14776

chore: use full browser matrix as targets for v9 apps

1e5bd4c

Merge branch 'master' into swc-transpilation-take-2

133db53

fix: export withFluentDecorator to fix VR test changes affecting CSF …

0605317

…files

TristanWatanabe self-assigned this Jan 25, 2023

msft-fluent-ui-bot assigned layershifter Jan 25, 2023

github-actions bot added this to the January Project Cycle Q1 2023 milestone Jan 25, 2023

TristanWatanabe unassigned layershifter Jan 25, 2023

TristanWatanabe mentioned this pull request Jan 27, 2023

setup v9 transpilation to be based on browser support minbar #26170

Open

8 tasks

TristanWatanabe closed this Jan 27, 2023

TristanWatanabe mentioned this pull request Jan 27, 2023

[TEST] Run migration generator with changes for browser matrix based transpilation #26528

Closed

TristanWatanabe mentioned this pull request Feb 24, 2023

chore: prerequisite changes before migrating v9 packages to SWC based transpilation #26965

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[TESTING] Browser matrix-based transpilation #26504

[TESTING] Browser matrix-based transpilation #26504

Uh oh!

TristanWatanabe commented Jan 25, 2023

Uh oh!

fabricteam commented Jan 25, 2023 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Jan 25, 2023 •

edited

Loading

Uh oh!

size-auditor bot commented Jan 25, 2023 •

edited

Loading

Uh oh!

fabricteam commented Jan 25, 2023

Uh oh!

fabricteam commented Jan 25, 2023 •

edited

Loading

Uh oh!

fabricteam commented Jan 25, 2023 •

edited

Loading

Uh oh!

fabricteam commented Jan 25, 2023 •

edited

Loading

Uh oh!

TristanWatanabe commented Jan 26, 2023 •

edited

Loading

Uh oh!

fabricteam commented Jan 26, 2023

Uh oh!

fabricteam commented Jan 26, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[TESTING] Browser matrix-based transpilation #26504

[TESTING] Browser matrix-based transpilation #26504

Uh oh!

Conversation

TristanWatanabe commented Jan 25, 2023

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

fabricteam commented Jan 25, 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 Jan 25, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Jan 25, 2023

Perf Analysis (@fluentui/react-northstar)

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

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

Uh oh!

🕵 FluentUI-v0 No visual regressions between this PR and main

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

TristanWatanabe commented Jan 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Jan 26, 2023

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

fabricteam commented Jan 26, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fabricteam commented Jan 25, 2023 •

edited

Loading

codesandbox-ci bot commented Jan 25, 2023 •

edited

Loading

size-auditor bot commented Jan 25, 2023 •

edited

Loading

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

fabricteam commented Jan 25, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Jan 25, 2023 •

edited

Loading

fabricteam commented Jan 25, 2023 •

edited

Loading

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

TristanWatanabe commented Jan 26, 2023 •

edited

Loading