feat: make `tokens` package native ESM (build transforms) by Hotell · Pull Request #30620 · microsoft/fluentui

Hotell · 2024-02-26T13:16:12Z

Blockers

babel-preset: transforms don't work with native ESM packages that use .mjs griffel#513

Previous Behavior

New Behavior

Uses compile time transforms for tokens package to produce native ESM package

Related Issue(s)

Fixes [Feature]: Add .js file extension to built output to improve native ESM support #30634

fabricteam · 2024-02-26T13:23:01Z

🕵 fluentuiv9 No visual regressions between this PR and main

codesandbox-ci · 2024-02-26T13:29:22Z

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.

fabricteam · 2024-02-26T13:31:16Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2024-02-26T13:32:47Z

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

⚠️ 9 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
PortalMinimalPerf.default	92	85	1.08:1	analysis
RefMinimalPerf.default	118	111	1.06:1	analysis
TreeWith60ListItems.default	89	84	1.06:1	analysis
AvatarMinimalPerf.default	115	110	1.05:1	analysis
AttachmentMinimalPerf.default	83	80	1.04:1	analysis
ButtonMinimalPerf.default	89	87	1.02:1	analysis
AccordionMinimalPerf.default	85	84	1.01:1	analysis
AlertMinimalPerf.default	160	164	0.98:1	analysis
ChatWithPopoverPerf.default	182	196	0.93:1	analysis

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
DividerMinimalPerf.default	247	208	1.19:1
ChatDuplicateMessagesPerf.default	154	140	1.1:1
BoxMinimalPerf.default	201	185	1.09:1
HeaderMinimalPerf.default	214	200	1.07:1
ProviderMinimalPerf.default	209	195	1.07:1
ListMinimalPerf.default	317	300	1.06:1
DialogMinimalPerf.default	467	444	1.05:1
IconMinimalPerf.default	394	377	1.05:1
InputMinimalPerf.default	555	533	1.04:1
TooltipMinimalPerf.default	1321	1275	1.04:1
CardMinimalPerf.default	310	300	1.03:1
DropdownMinimalPerf.default	1459	1423	1.03:1
FlexMinimalPerf.default	158	154	1.03:1
SliderMinimalPerf.default	774	749	1.03:1
TreeMinimalPerf.default	500	484	1.03:1
VideoMinimalPerf.default	444	431	1.03:1
ButtonOverridesMissPerf.default	648	637	1.02:1
LayoutMinimalPerf.default	201	197	1.02:1
MenuMinimalPerf.default	515	504	1.02:1
RadioGroupMinimalPerf.default	259	255	1.02:1
SegmentMinimalPerf.default	198	194	1.02:1
TableManyItemsPerf.default	1119	1094	1.02:1
TableMinimalPerf.default	232	227	1.02:1
AnimationMinimalPerf.default	305	301	1.01:1
AttachmentSlotsPerf.default	630	625	1.01:1
EmbedMinimalPerf.default	1892	1875	1.01:1
GridMinimalPerf.default	188	187	1.01:1
ListNestedPerf.default	327	323	1.01:1
PopupMinimalPerf.default	354	349	1.01:1
ProviderMergeThemesPerf.default	644	639	1.01:1
SplitButtonMinimalPerf.default	2286	2261	1.01:1
TextMinimalPerf.default	191	189	1.01:1
ChatMinimalPerf.default	433	431	1:1
CheckboxMinimalPerf.default	1154	1149	1:1
DatepickerMinimalPerf.default	3584	3589	1:1
HeaderSlotsPerf.default	467	467	1:1
ItemLayoutMinimalPerf.default	701	700	1:1
MenuButtonMinimalPerf.default	952	949	1:1
ButtonSlotsPerf.default	316	319	0.99:1
FormMinimalPerf.default	218	221	0.99:1
RosterPerf.default	1554	1571	0.99:1
SkeletonMinimalPerf.default	197	199	0.99:1
ToolbarMinimalPerf.default	537	545	0.99:1
CarouselMinimalPerf.default	258	264	0.98:1
LoaderMinimalPerf.default	193	196	0.98:1
ReactionMinimalPerf.default	207	212	0.98:1
CustomToolbarPrototype.default	1459	1484	0.98:1
TextAreaMinimalPerf.default	282	292	0.97:1
ListWith60ListItems.default	357	376	0.95:1
StatusMinimalPerf.default	389	408	0.95:1
DropdownManyItemsPerf.default	387	410	0.94:1
ListCommonPerf.default	373	395	0.94:1
ImageMinimalPerf.default	207	225	0.92:1
LabelMinimalPerf.default	214	232	0.92:1

fabricteam · 2024-02-26T13:33:46Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-jsx-runtime` JSX Dev Runtime	`3.783 kB` `1.648 kB`	`3.781 kB` `1.646 kB`	`-2 B` `-2 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`keyboard-key` keyboard-key package	`3.746 kB` `1.928 kB`
`priority-overflow` createOverflowManager	`4.447 kB` `1.853 kB`
`react-jsx-runtime` Classic Pragma	`1.057 kB` `530 B`
`react-jsx-runtime` JSX Runtime	`4.377 kB` `1.881 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`35.666 kB` `7.453 kB`
`react-theme` Teams: Light theme	`19.642 kB` `5.549 kB`
`react-utilities` SSRProvider	`180 B` `160 B`

_{🤖 This report was generated against b072525b88f147ed988efd2e17a5bc9d4d1238a0}

fabricteam · 2024-02-26T13:35:40Z

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam · 2024-02-26T13:41:00Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	639	643	5000	Possible regression
Breadcrumb	mount	1678	1672	1000	Possible regression
Checkbox	mount	1702	1703	5000	Possible regression
CheckboxBase	mount	1478	1464	5000	Possible regression
ChoiceGroup	mount	2909	2886	5000	Possible regression
ComboBox	mount	654	647	1000	Possible regression
CommandBar	mount	6223	6179	1000	Possible regression
ContextualMenu	mount	12272	12909	1000	Possible regression
DefaultButton	mount	750	744	5000	Possible regression
DetailsRow	mount	2173	2214	5000	Possible regression
DetailsRowFast	mount	2233	2177	5000	Possible regression
DetailsRowNoStyles	mount	2033	2023	5000	Possible regression
Dialog	mount	2773	2643	1000	Possible regression
DocumentCardTitle	mount	230	219	1000	Possible regression
Dropdown	mount	1953	1991	5000	Possible regression
FocusTrapZone	mount	1161	1142	5000	Possible regression
FocusZone	mount	1078	1095	5000	Possible regression
GroupedList	mount	41361	41701	2	Possible regression
GroupedList	virtual-rerender	17807	19862	2	Possible regression
GroupedList	virtual-rerender-with-unmount	50984	50662	2	Possible regression
GroupedListV2	mount	218	231	2	Possible regression
GroupedListV2	virtual-rerender	216	214	2	Possible regression
GroupedListV2	virtual-rerender-with-unmount	229	229	2	Possible regression
IconButton	mount	1067	1093	5000	Possible regression
Label	mount	335	337	5000	Possible regression
Layer	mount	2771	2729	5000	Possible regression
Link	mount	392	393	5000	Possible regression
MenuButton	mount	953	974	5000	Possible regression
Nav	mount	1970	1991	1000	Possible regression
OverflowSet	mount	791	798	5000	Possible regression
Panel	mount	1804	1748	1000	Possible regression
Persona	mount	718	772	1000	Possible regression
Pivot	mount	869	907	1000	Possible regression
PrimaryButton	mount	851	860	5000	Possible regression
Rating	mount	4593	4617	5000	Possible regression
SearchBox	mount	911	917	5000	Possible regression
Shimmer	mount	1884	1911	5000	Possible regression
Slider	mount	1337	1331	5000	Possible regression
SpinButton	mount	2888	2878	5000	Possible regression
Spinner	mount	383	373	5000	Possible regression
SplitButton	mount	1848	1810	5000	Possible regression
Stack	mount	424	418	5000	Possible regression
StackWithIntrinsicChildren	mount	879	857	5000	Possible regression
StackWithTextChildren	mount	2620	2609	5000	Possible regression
SwatchColorPicker	mount	6200	6169	5000	Possible regression
TagPicker	mount	1454	1461	5000	Possible regression
Text	mount	366	373	5000	Possible regression
TextField	mount	942	946	5000	Possible regression
ThemeProvider	mount	839	848	5000	Possible regression
ThemeProvider	virtual-rerender	581	601	5000	Possible regression
ThemeProvider	virtual-rerender-with-unmount	1246	1266	5000	Possible regression
Toggle	mount	623	617	5000	Possible regression
buttonNative	mount	201	197	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	639	643	5000	Possible regression
Breadcrumb	mount	1678	1672	1000	Possible regression
Checkbox	mount	1702	1703	5000	Possible regression
CheckboxBase	mount	1478	1464	5000	Possible regression
ChoiceGroup	mount	2909	2886	5000	Possible regression
ComboBox	mount	654	647	1000	Possible regression
CommandBar	mount	6223	6179	1000	Possible regression
ContextualMenu	mount	12272	12909	1000	Possible regression
DefaultButton	mount	750	744	5000	Possible regression
DetailsRow	mount	2173	2214	5000	Possible regression
DetailsRowFast	mount	2233	2177	5000	Possible regression
DetailsRowNoStyles	mount	2033	2023	5000	Possible regression
Dialog	mount	2773	2643	1000	Possible regression
DocumentCardTitle	mount	230	219	1000	Possible regression
Dropdown	mount	1953	1991	5000	Possible regression
FocusTrapZone	mount	1161	1142	5000	Possible regression
FocusZone	mount	1078	1095	5000	Possible regression
GroupedList	mount	41361	41701	2	Possible regression
GroupedList	virtual-rerender	17807	19862	2	Possible regression
GroupedList	virtual-rerender-with-unmount	50984	50662	2	Possible regression
GroupedListV2	mount	218	231	2	Possible regression
GroupedListV2	virtual-rerender	216	214	2	Possible regression
GroupedListV2	virtual-rerender-with-unmount	229	229	2	Possible regression
IconButton	mount	1067	1093	5000	Possible regression
Label	mount	335	337	5000	Possible regression
Layer	mount	2771	2729	5000	Possible regression
Link	mount	392	393	5000	Possible regression
MenuButton	mount	953	974	5000	Possible regression
MessageBar	mount	21257	21564	5000
Nav	mount	1970	1991	1000	Possible regression
OverflowSet	mount	791	798	5000	Possible regression
Panel	mount	1804	1748	1000	Possible regression
Persona	mount	718	772	1000	Possible regression
Pivot	mount	869	907	1000	Possible regression
PrimaryButton	mount	851	860	5000	Possible regression
Rating	mount	4593	4617	5000	Possible regression
SearchBox	mount	911	917	5000	Possible regression
Shimmer	mount	1884	1911	5000	Possible regression
Slider	mount	1337	1331	5000	Possible regression
SpinButton	mount	2888	2878	5000	Possible regression
Spinner	mount	383	373	5000	Possible regression
SplitButton	mount	1848	1810	5000	Possible regression
Stack	mount	424	418	5000	Possible regression
StackWithIntrinsicChildren	mount	879	857	5000	Possible regression
StackWithTextChildren	mount	2620	2609	5000	Possible regression
SwatchColorPicker	mount	6200	6169	5000	Possible regression
TagPicker	mount	1454	1461	5000	Possible regression
Text	mount	366	373	5000	Possible regression
TextField	mount	942	946	5000	Possible regression
ThemeProvider	mount	839	848	5000	Possible regression
ThemeProvider	virtual-rerender	581	601	5000	Possible regression
ThemeProvider	virtual-rerender-with-unmount	1246	1266	5000	Possible regression
Toggle	mount	623	617	5000	Possible regression
buttonNative	mount	201	197	5000	Possible regression

Hotell · 2024-02-26T14:14:31Z

+  },
  webpackFinal: config => {
+    config.resolve ??= {};
+    config.resolve.extensionAlias = {


needed because SB6 uses webpack4

webpack/webpack#13252

fabricteam · 2024-02-27T14:00:18Z

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

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	623	641	5000	Possible regression
Button	mount	295	305	5000	Possible regression
Field	mount	1103	1123	5000	Possible regression
FluentProvider	mount	705	689	5000	Possible regression
FluentProviderWithTheme	mount	74	77	10	Possible regression
FluentProviderWithTheme	virtual-rerender	63	58	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	68	77	10	Possible regression
MakeStyles	mount	847	886	50000	Possible regression
Persona	mount	1756	1756	5000	Possible regression
SpinButton	mount	1352	1410	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	623	641	5000	Possible regression
Button	mount	295	305	5000	Possible regression
Field	mount	1103	1123	5000	Possible regression
FluentProvider	mount	705	689	5000	Possible regression
FluentProviderWithTheme	mount	74	77	10	Possible regression
FluentProviderWithTheme	virtual-rerender	63	58	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	68	77	10	Possible regression
MakeStyles	mount	847	886	50000	Possible regression
Persona	mount	1756	1756	5000	Possible regression
SpinButton	mount	1352	1410	5000	Possible regression

…tooling modification need

…st-scripts

github-actions Bot added this to the February Project Cycle Q1 2024 milestone Feb 26, 2024

Hotell commented Feb 26, 2024

View reviewed changes

Comment thread package.json

Hotell added the Status: Do Not Merge 🚫 label Feb 26, 2024

Hotell commented Feb 26, 2024

View reviewed changes

Hotell force-pushed the hotell/pkg/tokens-to-full-esm branch from a0eaf8e to 1e0383a Compare February 27, 2024 14:54

spmonahan reviewed Feb 27, 2024

View reviewed changes

Comment thread packages/react-components/react-utilities/.swcrc

Hotell changed the title ~~feat: make tokens package native ESM~~ feat: make tokens package native ESM (build transforms) Mar 1, 2024

Hotell mentioned this pull request Mar 5, 2024

[Bug]: swc-plugin-de-indent-template-literal doesn't work with new swc #30718

Closed

2 tasks

github-actions Bot modified the milestones: February Project Cycle Q1 2024, March Project Cycle Q1 2024 Mar 5, 2024

Hotell mentioned this pull request Mar 6, 2024

babel-preset: transforms don't work with native ESM packages that use .mjs microsoft/griffel#513

Closed

Hotell force-pushed the hotell/pkg/tokens-to-full-esm branch from ed2373a to f24b38d Compare March 6, 2024 14:39

spmonahan and others added 10 commits March 6, 2024 15:41

Test swc transform imports

9769bf4

get swc transform working on tokens

c43dd19

chore: patch just-task to support esm and update swc transform plugin

b2201da

chore(tokens): make jest and just work in native ESM

32e2193

chore(tools): apply single version policy for dev deps

ba3a965

feat(tokens): make module ESM native

9717e62

feat(.storybook): enable native ESM package resolution

301496b

chore(vr-tests-*): enable native ESM package resolution

fa54c27

chore(perf-test-react-components): enable native ESM package resolution

09aa074

chore: bump webpack n friends

842833c

Hotell added 8 commits March 6, 2024 15:45

chore: add esm integration test

bdafc6b

changefiles

7508343

chore: fix types after webpack bump

7ded1d8

chore: fix types after webpack bump

4d6524e

feat(tokens): demonstrate actuall .mjs build transforms only without …

5a00c38

…tooling modification need

chore: add babel cli to demo griffel babel transform issue outside ju…

75085fc

…st-scripts

chore(esm-integration-app): add griffel

a0108e9

chore: bump swc deindent plugin to support swc 1.4

e4e6204

Hotell force-pushed the hotell/pkg/tokens-to-full-esm branch from f24b38d to e4e6204 Compare March 6, 2024 14:45

chore: resolve yarn.lock after rebase

d8d7fa1

Hotell closed this May 14, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: make `tokens` package native ESM (build transforms)#30620

feat: make `tokens` package native ESM (build transforms)#30620
Hotell wants to merge 19 commits into
microsoft:masterfrom
Hotell:hotell/pkg/tokens-to-full-esm

Hotell commented Feb 26, 2024 •

edited

Loading

Uh oh!

Uh oh!

fabricteam commented Feb 26, 2024 •

edited

Loading

Uh oh!

codesandbox-ci Bot commented Feb 26, 2024 •

edited

Loading

Uh oh!

fabricteam commented Feb 26, 2024 •

edited

Loading

Uh oh!

fabricteam commented Feb 26, 2024 •

edited

Loading

Uh oh!

fabricteam commented Feb 26, 2024 •

edited

Loading

Uh oh!

fabricteam commented Feb 26, 2024 •

edited

Loading

Uh oh!

fabricteam commented Feb 26, 2024 •

edited

Loading

Uh oh!

Hotell Feb 26, 2024

Uh oh!

fabricteam commented Feb 27, 2024 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

Hotell commented Feb 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Blockers

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

Uh oh!

fabricteam commented Feb 26, 2024 • 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!

codesandbox-ci Bot commented Feb 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Feb 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

fabricteam commented Feb 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Potential regressions comparing to master

Uh oh!

fabricteam commented Feb 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Feb 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 FluentUIV0 No visual regressions between this PR and main

Uh oh!

fabricteam commented Feb 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

Hotell Feb 26, 2024

Choose a reason for hiding this comment

Uh oh!

fabricteam commented Feb 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Hotell commented Feb 26, 2024 •

edited

Loading

fabricteam commented Feb 26, 2024 •

edited

Loading

codesandbox-ci Bot commented Feb 26, 2024 •

edited

Loading

fabricteam commented Feb 26, 2024 •

edited

Loading

fabricteam commented Feb 26, 2024 •

edited

Loading

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

fabricteam commented Feb 26, 2024 •

edited

Loading

fabricteam commented Feb 26, 2024 •

edited

Loading

fabricteam commented Feb 26, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Feb 27, 2024 •

edited

Loading

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