feat: add explicit `.js` file extensions to all relative import/export statement within built output to support native ESM within browser by Hotell · Pull Request #32997 · microsoft/fluentui

Hotell · 2024-10-07T16:49:28Z

Previous Behavior

New Behavior

@fluentui/tokens

enables full path resolution when compiling with swc(emit .js extensions to produce valid ESM import/export paths swc-project/swc#8742) which add .js extension explicitly to all imports/exports for esm and commonjs module output
- NOTE: this behaviour is enabled IFF jsc.baseUrl is present within projects .swcrc configuration
implements e2e with playwright that tests native ESM in real browser
mitigates issues ([Bug]: Unable to Compile Tokens #30795, [Bug]: FluentUI v9.47.0 all tests are failed with serialized error { code: 'ERR_PACKAGE_PATH_NOT_EXPORTED' } #30802) where the issue was that we transformed 3rd party exports which led to creating invalid path according to map export ( @swc/helpers )

Related Issue(s)

fabricteam · 2024-10-07T17:01:30Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	660	668	5000
Button	mount	316	321	5000
Field	mount	1172	1148	5000
FluentProvider	mount	716	751	5000
FluentProviderWithTheme	mount	78	83	10
FluentProviderWithTheme	virtual-rerender	37	46	10
FluentProviderWithTheme	virtual-rerender-with-unmount	76	75	10
MakeStyles	mount	900	894	50000
Persona	mount	1818	1778	5000
SpinButton	mount	1398	1419	5000
SwatchPicker	mount	1748	1759	5000

change/@fluentui-tokens-7b6f098e-f611-4292-adb9-4c0351d335cb.json

fabricteam · 2024-10-07T17:03:17Z

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam · 2024-10-07T17:04:52Z

📊 Bundle size report

✅ No changes found

change/@fluentui-tokens-7b6f098e-f611-4292-adb9-4c0351d335cb.json

fabricteam · 2024-10-07T17:07:10Z

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

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
AccordionMinimalPerf.default	91	80	1.14:1	analysis

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
PortalMinimalPerf.default	93	81	1.15:1
AttachmentMinimalPerf.default	90	81	1.11:1
DividerMinimalPerf.default	218	200	1.09:1
TreeWith60ListItems.default	86	79	1.09:1
CarouselMinimalPerf.default	272	252	1.08:1
HeaderMinimalPerf.default	221	205	1.08:1
DialogMinimalPerf.default	464	434	1.07:1
ListWith60ListItems.default	394	367	1.07:1
LoaderMinimalPerf.default	191	178	1.07:1
ButtonSlotsPerf.default	329	310	1.06:1
FlexMinimalPerf.default	169	159	1.06:1
ImageMinimalPerf.default	238	226	1.05:1
ButtonMinimalPerf.default	84	81	1.04:1
ReactionMinimalPerf.default	217	208	1.04:1
SliderMinimalPerf.default	760	729	1.04:1
TableManyItemsPerf.default	1141	1093	1.04:1
TextAreaMinimalPerf.default	295	283	1.04:1
AnimationMinimalPerf.default	307	299	1.03:1
AttachmentSlotsPerf.default	651	630	1.03:1
ChatDuplicateMessagesPerf.default	158	154	1.03:1
ChatWithPopoverPerf.default	202	196	1.03:1
CheckboxMinimalPerf.default	1179	1145	1.03:1
EmbedMinimalPerf.default	1946	1882	1.03:1
InputMinimalPerf.default	558	542	1.03:1
MenuMinimalPerf.default	522	505	1.03:1
PopupMinimalPerf.default	363	353	1.03:1
ToolbarMinimalPerf.default	552	536	1.03:1
BoxMinimalPerf.default	199	195	1.02:1
ProviderMinimalPerf.default	210	206	1.02:1
SegmentMinimalPerf.default	202	198	1.02:1
SkeletonMinimalPerf.default	205	200	1.02:1
AvatarMinimalPerf.default	108	107	1.01:1
CardMinimalPerf.default	302	300	1.01:1
GridMinimalPerf.default	201	199	1.01:1
MenuButtonMinimalPerf.default	961	954	1.01:1
TooltipMinimalPerf.default	1306	1291	1.01:1
TreeMinimalPerf.default	488	484	1.01:1
DropdownManyItemsPerf.default	390	390	1:1
DropdownMinimalPerf.default	1433	1426	1:1
LayoutMinimalPerf.default	199	200	1:1
RadioGroupMinimalPerf.default	263	264	1:1
RefMinimalPerf.default	110	110	1:1
ChatMinimalPerf.default	445	451	0.99:1
DatepickerMinimalPerf.default	3766	3786	0.99:1
HeaderSlotsPerf.default	469	472	0.99:1
SplitButtonMinimalPerf.default	2242	2261	0.99:1
StatusMinimalPerf.default	388	391	0.99:1
IconMinimalPerf.default	392	396	0.99:1
TextMinimalPerf.default	186	187	0.99:1
LabelMinimalPerf.default	222	227	0.98:1
ListMinimalPerf.default	314	322	0.98:1
ListNestedPerf.default	330	337	0.98:1
RosterPerf.default	1572	1604	0.98:1
ProviderMergeThemesPerf.default	655	670	0.98:1
CustomToolbarPrototype.default	1473	1496	0.98:1
VideoMinimalPerf.default	430	438	0.98:1
ButtonOverridesMissPerf.default	643	661	0.97:1
ItemLayoutMinimalPerf.default	705	727	0.97:1
TableMinimalPerf.default	231	240	0.96:1
AlertMinimalPerf.default	164	172	0.95:1
ListCommonPerf.default	379	401	0.95:1
FormMinimalPerf.default	219	235	0.93:1

fabricteam · 2024-10-07T17:19:05Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	632	630	5000
Breadcrumb	mount	1691	1663	1000
Checkbox	mount	1654	1680	5000
CheckboxBase	mount	1491	1460	5000
ChoiceGroup	mount	2967	2964	5000
ComboBox	mount	681	697	1000
CommandBar	mount	6493	6496	1000
ContextualMenu	mount	11806	12215	1000
DefaultButton	mount	797	782	5000
DetailsRow	mount	2289	2206	5000
DetailsRowFast	mount	2250	2270	5000
DetailsRowNoStyles	mount	2046	2054	5000
Dialog	mount	2714	2703	1000
DocumentCardTitle	mount	231	222	1000
Dropdown	mount	2012	2037	5000
FocusTrapZone	mount	1153	1180	5000
FocusZone	mount	1096	1095	5000
GroupedList	mount	42073	42452	2
GroupedList	virtual-rerender	20310	20441	2
GroupedList	virtual-rerender-with-unmount	51829	51810	2
GroupedListV2	mount	238	237	2
GroupedListV2	virtual-rerender	212	211	2
GroupedListV2	virtual-rerender-with-unmount	238	230	2
IconButton	mount	1158	1126	5000
Label	mount	343	338	5000
Layer	mount	2699	2740	5000
Link	mount	400	393	5000
MenuButton	mount	977	973	5000
MessageBar	mount	21400	21444	5000
Nav	mount	2036	2028	1000
OverflowSet	mount	788	804	5000
Panel	mount	1852	1816	1000
Persona	mount	734	765	1000
Pivot	mount	915	921	1000
PrimaryButton	mount	919	924	5000
Rating	mount	4638	4777	5000
SearchBox	mount	923	916	5000
Shimmer	mount	1910	1860	5000
Slider	mount	1334	1348	5000
SpinButton	mount	2895	2973	5000
Spinner	mount	390	408	5000
SplitButton	mount	1844	1877	5000
Stack	mount	414	430	5000
StackWithIntrinsicChildren	mount	880	900	5000
StackWithTextChildren	mount	2755	2760	5000
SwatchColorPicker	mount	6411	6427	5000
TagPicker	mount	1445	1457	5000
Text	mount	391	389	5000
TextField	mount	950	950	5000
ThemeProvider	mount	851	843	5000
ThemeProvider	virtual-rerender	584	576	5000
ThemeProvider	virtual-rerender-with-unmount	1331	1298	5000
Toggle	mount	612	614	5000
buttonNative	mount	189	196	5000

scripts/tasks/src/swc/utils.ts

scripts/tasks/src/swc/types.ts

packages/tokens/.swcrc

packages/tokens/playwright.config.ts

.gitignore

scripts/tasks/src/swc/utils.ts

…tensions to swc compilation for all import/export statements if baseUrl is present within .swcrc

…rt unwrapping in build output

…within a function

…n the browser

.gitignore

github-actions bot added this to the October Project Cycle Q4 2024 milestone Oct 7, 2024

Hotell force-pushed the native-esm/tokens/attempt-2 branch from 432876b to f7e592b Compare October 7, 2024 16:50

fabricteam reviewed Oct 7, 2024

View reviewed changes

change/@fluentui-tokens-7b6f098e-f611-4292-adb9-4c0351d335cb.json Show resolved Hide resolved

fabricteam reviewed Oct 7, 2024

View reviewed changes

change/@fluentui-tokens-7b6f098e-f611-4292-adb9-4c0351d335cb.json Show resolved Hide resolved

Hotell changed the title ~~Native esm/tokens/attempt 2~~ feat: add explicit .js file extensions to all relative import/export statement within built output to support native ESM within browser Oct 8, 2024

Hotell added Area: Build System Fluent UI react-components (v9) web-components labels Oct 8, 2024