feat(scripts): replace use of SWC CLI with SWC transform api #27380

TristanWatanabe · 2023-03-30T19:29:51Z

Changes:

instead of using the swc cli to transpile files, now use transform api via new swcTransform function to allow for more programmatic customizability.
As a happy side effect, this change removes the duplicate sourceMappingUrl from cjs outputs:

Related Issue(s)

Partially addresses [Bug]: commonjs source-maps sources point to .js and cjs files contain duplicated sourceMappingURL #27320

codesandbox-ci · 2023-03-30T19:41:25Z

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

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

size-auditor · 2023-03-30T19:45:28Z

Asset size changes

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

Baseline commit: 730f5d298721c8471cc0734fffccb2eefadccb2d (build)

fabricteam · 2023-03-30T19:48:15Z

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

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

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	565	569	5000
Button	mount	298	297	5000
Field	mount	991	1031	5000
FluentProvider	mount	646	646	5000
FluentProviderWithTheme	mount	81	81	10
FluentProviderWithTheme	virtual-rerender	68	70	10
FluentProviderWithTheme	virtual-rerender-with-unmount	63	67	10	Possible regression
InfoButton	mount	10	14	5000
MakeStyles	mount	860	868	50000
Persona	mount	1626	1563	5000
SpinButton	mount	1294	1271	5000

fabricteam · 2023-03-30T19:52:29Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `330 B`
`global-context` createContextSelector	`537 B` `342 B`
`priority-overflow` createOverflowManager	`3.194 kB` `1.315 kB`
`react-accordion` Accordion (including children components)	`88.431 kB` `26.755 kB`
`react-alert` Alert	`93.464 kB` `22.496 kB`
`react-avatar` Avatar	`57.712 kB` `15.048 kB`
`react-avatar` AvatarGroup	`15.561 kB` `6.25 kB`
`react-avatar` AvatarGroupItem	`73.888 kB` `19.537 kB`
`react-badge` Badge	`23.47 kB` `7.203 kB`
`react-badge` CounterBadge	`24.372 kB` `7.51 kB`
`react-badge` PresenceBadge	`32.05 kB` `8.37 kB`
`react-button` Button	`36.657 kB` `9.451 kB`
`react-button` CompoundButton	`43.811 kB` `10.931 kB`
`react-button` MenuButton	`41.342 kB` `10.786 kB`
`react-button` SplitButton	`49.564 kB` `12.365 kB`
`react-button` ToggleButton	`54.939 kB` `11.39 kB`
`react-card` Card - All	`88.631 kB` `25.056 kB`
`react-card` Card	`83.566 kB` `23.604 kB`
`react-card` CardFooter	`9.108 kB` `3.846 kB`
`react-card` CardHeader	`11.004 kB` `4.541 kB`
`react-card` CardPreview	`9.913 kB` `4.197 kB`
`react-checkbox` Checkbox	`34.415 kB` `10.828 kB`
`react-combobox` Combobox (including child components)	`87.65 kB` `28.201 kB`
`react-combobox` Dropdown (including child components)	`85.989 kB` `27.807 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`64.814 kB` `17.858 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`206.34 kB` `57.876 kB`
`react-components` react-components: FluentProvider & webLightTheme	`36.047 kB` `11.912 kB`
`react-datepicker-compat` DatePicker Compat	`222.477 kB` `59.161 kB`
`react-dialog` Dialog (including children components)	`91.991 kB` `27.45 kB`
`react-divider` Divider	`17.356 kB` `6.302 kB`
`react-field` Field	`18.815 kB` `7.03 kB`
`react-image` Image	`11.429 kB` `4.578 kB`
`react-infobutton` InfoButton	`130.036 kB` `39.727 kB`
`react-infobutton` InfoLabel	`133.501 kB` `40.805 kB`
`react-input` Input	`24.098 kB` `7.717 kB`
`react-label` Label	`10.054 kB` `4.19 kB`
`react-link` Link	`12.254 kB` `5.069 kB`
`react-menu` Menu (including children components)	`130.763 kB` `39.909 kB`
`react-menu` Menu (including selectable components)	`133.747 kB` `40.422 kB`
`react-overflow` hooks only	`11.206 kB` `4.266 kB`
`react-persona` Persona	`64.633 kB` `16.971 kB`
`react-popover` Popover	`116.998 kB` `36.074 kB`
`react-portal` Portal	`11.591 kB` `4.261 kB`
`react-portal-compat` PortalCompatProvider	`6.473 kB` `2.196 kB`
`react-positioning` usePositioning	`24.249 kB` `8.856 kB`
`react-progress` ProgressBar	`13.806 kB` `5.438 kB`
`react-provider` FluentProvider	`17.994 kB` `6.67 kB`
`react-radio` Radio	`27.319 kB` `8.667 kB`
`react-radio` RadioGroup	`11.241 kB` `4.704 kB`
`react-select` Select	`25.288 kB` `8.788 kB`
`react-slider` Slider	`34.237 kB` `11.054 kB`
`react-spinbutton` SpinButton	`34.036 kB` `10.376 kB`
`react-spinner` Spinner	`21.242 kB` `6.971 kB`
`react-switch` Switch	`29.839 kB` `9.292 kB`
`react-table` DataGrid	`150.783 kB` `41.468 kB`
`react-table` Table (Primitives only)	`45.026 kB` `12.519 kB`
`react-table` Table as DataGrid	`133.271 kB` `33.956 kB`
`react-table` Table (Selection only)	`79.04 kB` `19.33 kB`
`react-table` Table (Sort only)	`78.37 kB` `19.138 kB`
`react-tags` Tag	`21.919 kB` `7.883 kB`
`react-text` Text - Default	`12.442 kB` `4.924 kB`
`react-text` Text - Wrappers	`15.592 kB` `5.24 kB`
`react-textarea` Textarea	`27.601 kB` `9.085 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	`47.034 kB` `16.485 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 730f5d298721c8471cc0734fffccb2eefadccb2d}

fabricteam · 2023-03-30T19:54:04Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
FlexMinimalPerf.default	164	151	1.09:1
AttachmentMinimalPerf.default	86	80	1.08:1
HeaderMinimalPerf.default	222	208	1.07:1
ImageMinimalPerf.default	230	218	1.06:1
TreeWith60ListItems.default	89	84	1.06:1
CarouselMinimalPerf.default	276	263	1.05:1
FormMinimalPerf.default	231	221	1.05:1
PopupMinimalPerf.default	363	347	1.05:1
PortalMinimalPerf.default	90	86	1.05:1
MenuMinimalPerf.default	520	501	1.04:1
SliderMinimalPerf.default	738	707	1.04:1
SplitButtonMinimalPerf.default	2340	2255	1.04:1
AlertMinimalPerf.default	163	158	1.03:1
AvatarMinimalPerf.default	109	106	1.03:1
ListCommonPerf.default	396	386	1.03:1
ProviderMinimalPerf.default	209	203	1.03:1
ToolbarMinimalPerf.default	560	544	1.03:1
VideoMinimalPerf.default	451	437	1.03:1
AttachmentSlotsPerf.default	653	641	1.02:1
ChatDuplicateMessagesPerf.default	153	150	1.02:1
DatepickerMinimalPerf.default	3649	3580	1.02:1
DropdownMinimalPerf.default	1419	1390	1.02:1
InputMinimalPerf.default	553	540	1.02:1
ListWith60ListItems.default	381	373	1.02:1
MenuButtonMinimalPerf.default	990	970	1.02:1
SkeletonMinimalPerf.default	198	195	1.02:1
AnimationMinimalPerf.default	293	290	1.01:1
ChatMinimalPerf.default	429	426	1.01:1
CheckboxMinimalPerf.default	1173	1166	1.01:1
DropdownManyItemsPerf.default	390	386	1.01:1
EmbedMinimalPerf.default	1774	1751	1.01:1
HeaderSlotsPerf.default	476	473	1.01:1
SegmentMinimalPerf.default	200	199	1.01:1
TableManyItemsPerf.default	1121	1110	1.01:1
TableMinimalPerf.default	237	235	1.01:1
ButtonOverridesMissPerf.default	634	633	1:1
DialogMinimalPerf.default	453	453	1:1
ListNestedPerf.default	332	333	1:1
TextAreaMinimalPerf.default	290	291	1:1
CardMinimalPerf.default	317	319	0.99:1
ChatWithPopoverPerf.default	198	200	0.99:1
ItemLayoutMinimalPerf.default	706	710	0.99:1
ReactionMinimalPerf.default	214	216	0.99:1
StatusMinimalPerf.default	399	402	0.99:1
DividerMinimalPerf.default	207	212	0.98:1
LayoutMinimalPerf.default	202	206	0.98:1
LoaderMinimalPerf.default	195	198	0.98:1
RosterPerf.default	1553	1584	0.98:1
ProviderMergeThemesPerf.default	651	664	0.98:1
RadioGroupMinimalPerf.default	259	265	0.98:1
IconMinimalPerf.default	387	396	0.98:1
TreeMinimalPerf.default	480	489	0.98:1
GridMinimalPerf.default	187	192	0.97:1
RefMinimalPerf.default	107	110	0.97:1
TooltipMinimalPerf.default	1270	1310	0.97:1
TextMinimalPerf.default	189	197	0.96:1
CustomToolbarPrototype.default	1435	1488	0.96:1
ButtonSlotsPerf.default	308	329	0.94:1
ListMinimalPerf.default	300	320	0.94:1
AccordionMinimalPerf.default	79	85	0.93:1
LabelMinimalPerf.default	224	240	0.93:1
ButtonMinimalPerf.default	82	89	0.92:1
BoxMinimalPerf.default	190	214	0.89:1

fabricteam · 2023-03-30T19:57:02Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2023-03-30T20:06:28Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	610	619	5000
Breadcrumb	mount	1683	1689	1000
Checkbox	mount	1698	1706	5000
CheckboxBase	mount	1490	1488	5000
ChoiceGroup	mount	2909	2936	5000
ComboBox	mount	638	653	1000
CommandBar	mount	6215	6232	1000
ContextualMenu	mount	13033	13092	1000
DefaultButton	mount	751	732	5000
DetailsRow	mount	2227	2148	5000
DetailsRowFast	mount	2257	2168	5000
DetailsRowNoStyles	mount	1984	2069	5000
Dialog	mount	2751	2773	1000
DocumentCardTitle	mount	222	218	1000
Dropdown	mount	1957	2008	5000
FocusTrapZone	mount	1143	1137	5000
FocusZone	mount	1073	1086	5000
GroupedList	mount	41612	41936	2
GroupedList	virtual-rerender	20040	19969	2
GroupedList	virtual-rerender-with-unmount	50427	50788	2
GroupedListV2	mount	235	223	2
GroupedListV2	virtual-rerender	221	215	2
GroupedListV2	virtual-rerender-with-unmount	215	233	2
IconButton	mount	1090	1079	5000
Label	mount	344	327	5000
Layer	mount	2702	2727	5000
Link	mount	387	394	5000
MenuButton	mount	937	950	5000
MessageBar	mount	21325	21296	5000
Nav	mount	1967	1972	1000
OverflowSet	mount	765	781	5000
Panel	mount	1797	1790	1000
Persona	mount	728	758	1000
Pivot	mount	882	873	1000
PrimaryButton	mount	860	852	5000
Rating	mount	4616	4603	5000
SearchBox	mount	902	948	5000
Shimmer	mount	1924	1872	5000
Slider	mount	1353	1323	5000
SpinButton	mount	2885	2847	5000
Spinner	mount	383	387	5000
SplitButton	mount	1865	1842	5000
Stack	mount	416	421	5000
StackWithIntrinsicChildren	mount	889	857	5000
StackWithTextChildren	mount	2669	2650	5000
SwatchColorPicker	mount	6098	6138	5000
TagPicker	mount	1462	1436	5000
Text	mount	364	382	5000
TextField	mount	918	904	5000
ThemeProvider	mount	841	839	5000
ThemeProvider	virtual-rerender	595	589	5000
ThemeProvider	virtual-rerender-with-unmount	1276	1265	5000
Toggle	mount	615	621	5000
buttonNative	mount	181	187	5000

Hotell

I like this approach !

few questions:

isn't this slower than executing swc/cli ? ( i assume the cli does this anyway under the hood but on native level via rust ? thus should be faster ? )
if it's slower than I'm bit on hold if we should go with this to mitigate that source map issue. Ideally the double source map issue should be resolved on swc core to mirror what is babel doing ( removes and re-emits source map based on source )

wdyt ?

scripts/tasks/src/swc.ts

TristanWatanabe · 2023-04-04T22:30:02Z

@Hotell If you look at this file, it looks like the swc cli also uses transform from the @swc/core package under the hood. Also from the very small sample size comparisons in terms of speed below, there's not much difference:

With SWC/CLI average (3 runs on CI)

package	swc:esm (sec)	swc:cjs (sec)	swc:compile (sec)
react-text	0.27	0.4	4.09
react-components	0.54	0.58	4.16

With SWC/core transform (1 runs on CI)

package	swc:esm (sec)	swc:cjs (sec)	swc:compile (sec)
react-text	0.31	0.19	4.02
react-components	0.1	0.04	3.02

package.json

fabricteam · 2023-04-27T16:25:20Z

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

* master: Added truncation and tooltips to the Breadcrumb (microsoft#27859) applying package updates applying package updates Export selection types from combobox (microsoft#28054) fix(react-datepicker-compat): Remove focus function from the deps to avoid constant move of focus (microsoft#28053) Updated poster for new stable components (microsoft#28051) Griffel/bump to 1.5.7 (microsoft#27925) feat(scripts): replace use of SWC CLI with SWC transform api (microsoft#27380) chore: Add positioning test for scroll jumps (microsoft#28043) chore: migrate to TS 4.5 (microsoft#27936) Fix toolbar divider styles (microsoft#28044) fix: createFocusOutlineStyle don't work with CSS variables (microsoft#27966) feat(react-tags): use simple button for TagButton content instead of aria button (microsoft#28033)

TristanWatanabe added 4 commits March 23, 2023 15:29

feat: use swc transform api and replace use of swc cli

889b414

chore: remove swc/cli dependency

e848c83

chore: cleanup function

32e311b

Apply PR review suggestions

1794361

TristanWatanabe self-assigned this Mar 30, 2023

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

TristanWatanabe changed the title ~~feat: use swc transform api and replace use of swc cli~~ feat(scripts): replace use of SWC CLI with SWC transform api Mar 30, 2023

TristanWatanabe added the Area: Build System label Mar 30, 2023

TristanWatanabe marked this pull request as ready for review March 30, 2023 22:12

TristanWatanabe requested a review from a team as a code owner March 30, 2023 22:12

TristanWatanabe requested a review from Hotell March 30, 2023 22:14

Hotell reviewed Apr 4, 2023

View reviewed changes

scripts/tasks/src/swc.ts Outdated Show resolved Hide resolved

scripts/tasks/src/swc.ts Outdated Show resolved Hide resolved

scripts/tasks/src/swc.ts Show resolved Hide resolved

scripts/tasks/src/swc.ts Outdated Show resolved Hide resolved

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

fabricteam reviewed Apr 5, 2023

View reviewed changes

package.json Show resolved Hide resolved

Merge branch 'master' into scripts/replace-swc-cli

9ee1310

Hotell approved these changes Apr 12, 2023

View reviewed changes

Merge branch 'master' into scripts/replace-swc-cli

5b0c8b7

TristanWatanabe added 2 commits May 27, 2023 14:34

Merge branch 'master' into scripts/replace-swc-cli

9d28afe

chore: update yarn lock file

29cdd4f

github-actions bot removed this from the April Project Cycle Q2 2023 milestone May 30, 2023

github-actions bot added this to the May Project Cycle Q2 2023 milestone May 30, 2023

deduplicate semver

c5e50ec

TristanWatanabe merged commit 98c157f into microsoft:master May 30, 2023

TristanWatanabe deleted the scripts/replace-swc-cli branch May 30, 2023 16:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(scripts): replace use of SWC CLI with SWC transform api #27380

feat(scripts): replace use of SWC CLI with SWC transform api #27380

TristanWatanabe 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

fabricteam commented Mar 30, 2023 •

edited

Loading

fabricteam commented Mar 30, 2023 •

edited

Loading

fabricteam commented Mar 30, 2023 •

edited

Loading

fabricteam commented Mar 30, 2023 •

edited

Loading

Hotell left a comment

TristanWatanabe commented Apr 4, 2023

fabricteam commented Apr 27, 2023 •

edited

Loading

feat(scripts): replace use of SWC CLI with SWC transform api #27380

feat(scripts): replace use of SWC CLI with SWC transform api #27380

Conversation

TristanWatanabe commented Mar 30, 2023 • edited Loading

Changes:

Related Issue(s)

codesandbox-ci bot commented Mar 30, 2023 • edited Loading

size-auditor bot commented Mar 30, 2023 • edited Loading

Asset size changes

fabricteam commented Mar 30, 2023 • edited Loading

Perf Analysis (@fluentui/react-components)

fabricteam commented Mar 30, 2023 • edited Loading

📊 Bundle size report

fabricteam commented Mar 30, 2023 • edited Loading

Perf Analysis (@fluentui/react-northstar)

fabricteam commented Mar 30, 2023 • edited Loading

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam commented Mar 30, 2023 • edited Loading

Perf Analysis (@fluentui/react)

Hotell left a comment

Choose a reason for hiding this comment

TristanWatanabe commented Apr 4, 2023

fabricteam commented Apr 27, 2023 • edited Loading

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

TristanWatanabe 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-components`)

fabricteam 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

fabricteam commented Mar 30, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Apr 27, 2023 •

edited

Loading