chore: use only one ts-node and improve perfomance by using `swc` for compilation #24255

Hotell · 2022-08-05T15:56:44Z

Current Behavior

various ts-node versions are used
ts-node doesn't adhere to single version policy standard
ts-node perf is not the best one

New Behavior

one ts-node is used adhering to single version policy
ts-node is extremely performant as it uses swc under the hood (70x times faster)

Related Issue(s)

Hotell · 2022-08-05T15:57:16Z

package.json

@@ -216,6 +216,7 @@
    "loader-utils": "2.0.0",
    "memfs": "3.2.2",
    "node-fetch": "2.6.7",
+    "nx": "13.10.6",


re-ordered during yarn add

Hotell · 2022-08-05T15:58:26Z

scripts/ts-node-register.js

+  cwd: __dirname,
+  // https://github.com/TypeStrong/ts-node#skipproject - don't read tsconfig within ts-node
+  skipProject: true,
+  swc: true,


this makes execution 70 times faster :)

codesandbox-ci · 2022-08-05T16:05:21Z

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

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

size-auditor · 2022-08-05T16:08:34Z

Asset size changes

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

Baseline commit: 05ef1df8bba19f528bd0e012e9c1d48017cbff91 (build)

fabricteam · 2022-08-05T16:09:14Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1561	1537	5000
Button	mount	1164	1181	5000
FluentProvider	mount	1911	1878	5000
FluentProviderWithTheme	mount	748	767	10
FluentProviderWithTheme	virtual-rerender	749	710	10
FluentProviderWithTheme	virtual-rerender-with-unmount	752	754	10
MakeStyles	mount	2278	2298	50000
SpinButton	mount	3156	3130	5000

fabricteam · 2022-08-05T16:15:10Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`533 B` `341 B`
`global-context` createContextSelector	`554 B` `348 B`
`priority-overflow` createOverflowManager	`2.936 kB` `1.212 kB`
`react-accordion` Accordion (including children components)	`79.485 kB` `24.082 kB`
`react-alert` Alert	`82.803 kB` `20.582 kB`
`react-avatar` Avatar	`48.533 kB` `13.78 kB`
`react-avatar` AvatarGroup	`13.43 kB` `5.382 kB`
`react-avatar` AvatarGroupItem	`65.094 kB` `18.361 kB`
`react-badge` Badge	`22.494 kB` `7.157 kB`
`react-badge` CounterBadge	`23.397 kB` `7.449 kB`
`react-badge` PresenceBadge	`23.947 kB` `7.022 kB`
`react-button` Button	`36.396 kB` `9.575 kB`
`react-button` CompoundButton	`43.469 kB` `10.812 kB`
`react-button` MenuButton	`39.014 kB` `10.456 kB`
`react-button` SplitButton	`46.506 kB` `11.827 kB`
`react-button` ToggleButton	`51.912 kB` `11.004 kB`
`react-card` Card - All	`67.42 kB` `19.249 kB`
`react-card` Card	`63.102 kB` `18.167 kB`
`react-card` CardFooter	`8.461 kB` `3.555 kB`
`react-card` CardHeader	`9.504 kB` `3.896 kB`
`react-card` CardPreview	`8.562 kB` `3.61 kB`
`react-combobox` Combobox (including child components)	`75.081 kB` `24.145 kB`
`react-combobox` Dropdown (including child components)	`74.594 kB` `24.134 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`192.699 kB` `52.786 kB`
`react-components` react-components: FluentProvider & webLightTheme	`32.688 kB` `10.736 kB`
`react-dialog` Dialog (including children components)	`85.064 kB` `25.293 kB`
`react-divider` Divider	`16.321 kB` `5.837 kB`
`react-image` Image	`10.68 kB` `4.215 kB`
`react-input` Input	`23.554 kB` `7.644 kB`
`react-label` Label	`9.238 kB` `3.815 kB`
`react-link` Link	`12.197 kB` `4.912 kB`
`react-menu` Menu (including children components)	`118.866 kB` `36.006 kB`
`react-menu` Menu (including selectable components)	`122.065 kB` `36.499 kB`
`react-overflow` hooks only	`10.839 kB` `4.146 kB`
`react-popover` Popover	`106.133 kB` `32.244 kB`
`react-portal` Portal	`10.49 kB` `3.845 kB`
`react-positioning` usePositioning	`23.854 kB` `8.299 kB`
`react-provider` FluentProvider	`15.565 kB` `5.818 kB`
`react-radio` Radio	`36.329 kB` `12.024 kB`
`react-radio` RadioGroup	`14.319 kB` `5.711 kB`
`react-select` Select	`20.746 kB` `7.299 kB`
`react-slider` Slider	`31.988 kB` `10.019 kB`
`react-spinbutton` SpinButton	`44.227 kB` `12.492 kB`
`react-spinner` Spinner	`19.932 kB` `6.363 kB`
`react-switch` Switch	`32.781 kB` `10.348 kB`
`react-text` Text - Default	`11.572 kB` `4.537 kB`
`react-text` Text - Wrappers	`14.882 kB` `4.977 kB`
`react-textarea` Textarea	`23.078 kB` `7.707 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`28.995 kB` `6.215 kB`
`react-theme` Teams: Light theme	`16.973 kB` `4.86 kB`
`react-tooltip` Tooltip	`45.509 kB` `15.537 kB`
`react-utilities` SSRProvider	`189 B` `161 B`

_{🤖 This report was generated against 05ef1df8bba19f528bd0e012e9c1d48017cbff91}

fabricteam · 2022-08-05T16:15:33Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
BoxMinimalPerf.default	294	278	1.06:1
ImageMinimalPerf.default	311	294	1.06:1
ListWith60ListItems.default	519	491	1.06:1
PortalMinimalPerf.default	150	142	1.06:1
ListNestedPerf.default	459	438	1.05:1
SkeletonMinimalPerf.default	288	275	1.05:1
LabelMinimalPerf.default	317	308	1.03:1
RadioGroupMinimalPerf.default	372	360	1.03:1
RefMinimalPerf.default	182	176	1.03:1
SegmentMinimalPerf.default	284	276	1.03:1
TextMinimalPerf.default	285	276	1.03:1
AttachmentSlotsPerf.default	930	911	1.02:1
AvatarMinimalPerf.default	157	154	1.02:1
ButtonMinimalPerf.default	134	131	1.02:1
ButtonSlotsPerf.default	448	438	1.02:1
CarouselMinimalPerf.default	388	382	1.02:1
ChatWithPopoverPerf.default	321	314	1.02:1
CheckboxMinimalPerf.default	2273	2232	1.02:1
FlexMinimalPerf.default	231	227	1.02:1
MenuMinimalPerf.default	717	706	1.02:1
CustomToolbarPrototype.default	2305	2267	1.02:1
ToolbarMinimalPerf.default	782	764	1.02:1
TooltipMinimalPerf.default	931	910	1.02:1
AlertMinimalPerf.default	223	221	1.01:1
ButtonOverridesMissPerf.default	1259	1245	1.01:1
ChatMinimalPerf.default	614	609	1.01:1
DividerMinimalPerf.default	289	287	1.01:1
DropdownManyItemsPerf.default	562	558	1.01:1
DropdownMinimalPerf.default	2647	2623	1.01:1
HeaderMinimalPerf.default	290	286	1.01:1
InputMinimalPerf.default	1083	1076	1.01:1
ItemLayoutMinimalPerf.default	988	976	1.01:1
ListMinimalPerf.default	430	425	1.01:1
MenuButtonMinimalPerf.default	1399	1389	1.01:1
PopupMinimalPerf.default	519	514	1.01:1
ProviderMinimalPerf.default	333	331	1.01:1
StatusMinimalPerf.default	558	553	1.01:1
TextAreaMinimalPerf.default	396	393	1.01:1
TreeMinimalPerf.default	679	673	1.01:1
AnimationMinimalPerf.default	441	442	1:1
CardMinimalPerf.default	444	443	1:1
DialogMinimalPerf.default	635	633	1:1
GridMinimalPerf.default	274	274	1:1
HeaderSlotsPerf.default	626	623	1:1
ListCommonPerf.default	518	520	1:1
LoaderMinimalPerf.default	564	563	1:1
ProviderMergeThemesPerf.default	1050	1048	1:1
SliderMinimalPerf.default	1401	1405	1:1
SplitButtonMinimalPerf.default	3640	3624	1:1
TableManyItemsPerf.default	1550	1551	1:1
TreeWith60ListItems.default	131	131	1:1
VideoMinimalPerf.default	513	515	1:1
DatepickerMinimalPerf.default	4754	4817	0.99:1
EmbedMinimalPerf.default	3409	3439	0.99:1
LayoutMinimalPerf.default	287	290	0.99:1
RosterPerf.default	919	925	0.99:1
TableMinimalPerf.default	329	336	0.98:1
ChatDuplicateMessagesPerf.default	233	239	0.97:1
FormMinimalPerf.default	315	324	0.97:1
IconMinimalPerf.default	469	482	0.97:1
AccordionMinimalPerf.default	117	122	0.96:1
ReactionMinimalPerf.default	290	305	0.95:1
AttachmentMinimalPerf.default	113	120	0.94:1

fabricteam · 2022-08-05T16:22:55Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	968	962	5000
Breadcrumb	mount	2787	2771	1000
Checkbox	mount	2701	2650	5000
CheckboxBase	mount	2346	2310	5000
ChoiceGroup	mount	4803	4835	5000
ComboBox	mount	963	999	1000
CommandBar	mount	10635	10647	1000
ContextualMenu	mount	11846	11676	1000
DefaultButton	mount	1171	1188	5000
DetailsRow	mount	3941	3990	5000
DetailsRowFast	mount	3869	3800	5000
DetailsRowNoStyles	mount	3708	3670	5000
Dialog	mount	2850	2898	1000
DocumentCardTitle	mount	181	184	1000
Dropdown	mount	3387	3414	5000
FocusTrapZone	mount	1959	1920	5000
FocusZone	mount	1886	1838	5000
IconButton	mount	1823	1782	5000
Label	mount	353	367	5000
Layer	mount	3220	3222	5000
Link	mount	509	493	5000
MenuButton	mount	1564	1603	5000
MessageBar	mount	2197	2195	5000
Nav	mount	3421	3493	1000
OverflowSet	mount	1160	1142	5000
Panel	mount	2322	2253	1000
Persona	mount	1081	1040	1000
Pivot	mount	1541	1601	1000
PrimaryButton	mount	1425	1370	5000
Rating	mount	8032	8058	5000
SearchBox	mount	1388	1396	5000
Shimmer	mount	2586	2560	5000
Slider	mount	2013	1996	5000
SpinButton	mount	5190	5255	5000
Spinner	mount	455	442	5000
SplitButton	mount	3231	3270	5000
Stack	mount	536	527	5000
StackWithIntrinsicChildren	mount	2355	2431	5000
StackWithTextChildren	mount	5388	5399	5000
SwatchColorPicker	mount	12049	12081	5000
TagPicker	mount	2797	2735	5000
TeachingBubble	mount	94515	94948	5000
Text	mount	444	471	5000
TextField	mount	1411	1473	5000
ThemeProvider	mount	1255	1258	5000
ThemeProvider	virtual-rerender	701	685	5000
ThemeProvider	virtual-rerender-with-unmount	1891	1887	5000
Toggle	mount	837	814	5000
buttonNative	mount	137	126	5000

Hotell · 2022-08-05T16:28:21Z

yarn.lock

    diff "^4.0.1"
    make-error "^1.1.1"
-    source-map-support "^0.5.17"
+    v8-compile-cache-lib "^3.0.1"
    yn "3.1.1"

 ts-node@~9.1.1:


we will dedupe once we migrate to nx 14

Hotell · 2022-08-05T17:34:04Z

apps/ssr-tests-v9/package.json

@@ -9,13 +9,13 @@
  },
  "license": "MIT",
  "scripts": {
-    "build": "ts-node --transpile-only ./src/build.ts",
+    "build": "ts-node --swc ./src/build.ts",


cc @layershifter

Hotell · 2022-08-08T09:48:52Z

can you check this pls @chrisdholt 🙌, ts-node is not used at all in web-components codebase, so this just makes things simpler :) ty

Hotell added 4 commits August 5, 2022 09:53

chore: use only 1 instance of ts-node in monorepo

0dc756f

perf(scripts): use swc when executing ts-node

8dcce6d

move to ts-node 10 to leverage swc

17be879

fixup! chore: use only 1 instance of ts-node in monorepo

3073801

msft-fluent-ui-bot assigned TristanWatanabe Aug 5, 2022

github-actions bot added this to the July Project Cycle Q3 2022 milestone Aug 5, 2022

Hotell commented Aug 5, 2022

View reviewed changes

chore:dedup ts-loader

1f679c8

Hotell changed the title ~~Hotell/use swc with ts node~~ chore: use only one ts-node and increase perfomance by using swc for compilation Aug 5, 2022

Hotell added 2 commits August 5, 2022 18:33

generate changefiles

03ad109

chore: ignore satisfied as it acts weird

ca290f1

Hotell unassigned TristanWatanabe Aug 5, 2022

Hotell marked this pull request as ready for review August 5, 2022 17:31

Hotell requested review from a team, chrisdholt, EisenbergEffect and nicholasrice as code owners August 5, 2022 17:31

Hotell added the Area: Build System label Aug 5, 2022

Hotell removed this from the July Project Cycle Q3 2022 milestone Aug 5, 2022

Hotell changed the title ~~chore: use only one ts-node and increase perfomance by using swc for compilation~~ chore: use only one ts-node and improve perfomance by using swc for compilation Aug 5, 2022

Hotell commented Aug 5, 2022

View reviewed changes

Hotell self-assigned this Aug 8, 2022

Hotell mentioned this pull request Aug 8, 2022

chore(scripts): enable type-checks on ci and fix all ts-errors #24264

Merged

ling1726 approved these changes Aug 8, 2022

View reviewed changes

chrisdholt approved these changes Aug 8, 2022

View reviewed changes

Hotell merged commit 5a44edc into microsoft:master Aug 9, 2022

Hotell deleted the hotell/use-swc-with-ts-node branch August 9, 2022 14:19

spmonahan mentioned this pull request Sep 8, 2022

Stress Test: add build commands #24575

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: use only one ts-node and improve perfomance by using `swc` for compilation #24255

chore: use only one ts-node and improve perfomance by using `swc` for compilation #24255

Hotell commented Aug 5, 2022 •

edited

Loading

Hotell Aug 5, 2022

Hotell Aug 5, 2022

codesandbox-ci bot commented Aug 5, 2022 •

edited

Loading

size-auditor bot commented Aug 5, 2022 •

edited

Loading

fabricteam commented Aug 5, 2022 •

edited

Loading

fabricteam commented Aug 5, 2022 •

edited

Loading

fabricteam commented Aug 5, 2022 •

edited

Loading

fabricteam commented Aug 5, 2022 •

edited

Loading

Hotell Aug 5, 2022

Hotell Aug 5, 2022

Hotell commented Aug 8, 2022

chore: use only one ts-node and improve perfomance by using swc for compilation #24255

chore: use only one ts-node and improve perfomance by using swc for compilation #24255

Conversation

Hotell commented Aug 5, 2022 • edited Loading

Current Behavior

New Behavior

Related Issue(s)

Hotell Aug 5, 2022

Choose a reason for hiding this comment

Hotell Aug 5, 2022

Choose a reason for hiding this comment

codesandbox-ci bot commented Aug 5, 2022 • edited Loading

size-auditor bot commented Aug 5, 2022 • edited Loading

Asset size changes

fabricteam commented Aug 5, 2022 • edited Loading

Perf Analysis (@fluentui/react-components)

fabricteam commented Aug 5, 2022 • edited Loading

📊 Bundle size report

fabricteam commented Aug 5, 2022 • edited Loading

Perf Analysis (@fluentui/react-northstar)

fabricteam commented Aug 5, 2022 • edited Loading

Perf Analysis (@fluentui/react)

Hotell Aug 5, 2022

Choose a reason for hiding this comment

Hotell Aug 5, 2022

Choose a reason for hiding this comment

Hotell commented Aug 8, 2022

chore: use only one ts-node and improve perfomance by using `swc` for compilation #24255

chore: use only one ts-node and improve perfomance by using `swc` for compilation #24255

Hotell commented Aug 5, 2022 •

edited

Loading

codesandbox-ci bot commented Aug 5, 2022 •

edited

Loading

size-auditor bot commented Aug 5, 2022 •

edited

Loading

fabricteam commented Aug 5, 2022 •

edited

Loading

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

fabricteam commented Aug 5, 2022 •

edited

Loading

fabricteam commented Aug 5, 2022 •

edited

Loading

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

fabricteam commented Aug 5, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)