feat: add .js file extension to built output + unwrap folder import/export to support native ESM within browser #30770

Hotell · 2024-03-13T15:44:29Z

Previous Behavior

New Behavior

💡 NOTE:

these new behaviours are turned on if jsc.baseUrl is set within project .swcrc
this PR adds this behaviours to tokens package

unwrapping directory import/export statements in order to generate ESM valid code

Before

// =============
// typescript source
// =============
export { typographyStyles } from './global'; // 🚨 invalid directory path - wont work within browser

⬇ build (swc) ⬇

export { typographyStyles } from './global'; // 🚨 invalid directory path - wont work within browser

After

// =============
// typescript source
// =============
export { typographyStyles } from './global'; // 🚨 invalid directory path - wont work within browser

⬇ build (swc) ⬇

export { typographyStyles } from './global/index.js'; // ✅

`.js` extension addition to all import/export statements in build output

manual swc postprocessing until it will be supported natively emit .js extensions to produce valid ESM import/export paths swc-project/swc#8742

Related Issue(s)

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

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

…rt unwrapping in build output

fabricteam · 2024-03-13T15:48:46Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `328 B`
`global-context` createContextSelector	`537 B` `339 B`
`keyboard-key` keyboard-key package	`3.746 kB` `1.928 kB`
`priority-overflow` createOverflowManager	`4.447 kB` `1.853 kB`
`react` ActivityItem	`68.833 kB` `22.613 kB`
`react` Announced	`36.473 kB` `12.628 kB`
`react` Autofill	`15.365 kB` `4.743 kB`
`react` Breadcrumb	`196.083 kB` `58.757 kB`
`react` Button	`190.127 kB` `55.019 kB`
`react` ButtonGrid	`175.918 kB` `53.25 kB`
`react` Calendar	`118.756 kB` `36.101 kB`
`react` Callout	`80.866 kB` `26.564 kB`
`react` Check	`51.062 kB` `17.152 kB`
`react` Checkbox	`57.791 kB` `19.17 kB`
`react` ChoiceGroup	`63.339 kB` `20.824 kB`
`react` ChoiceGroupOption	`56.601 kB` `18.695 kB`
`react` Coachmark	`89.704 kB` `28.407 kB`
`react` Color	`7.737 kB` `3.106 kB`
`react` ColorPicker	`129.984 kB` `40.589 kB`
`react` ComboBox	`245.355 kB` `70.51 kB`
`react` CommandBar	`197.362 kB` `58.46 kB`
`react` ContextualMenu	`150.967 kB` `46.982 kB`
`react` DatePicker	`180.318 kB` `54.947 kB`
`react` DateTimeUtilities	`5.244 kB` `1.849 kB`
`react` DetailsList	`225.886 kB` `64.647 kB`
`react` Dialog	`205.294 kB` `61.428 kB`
`react` Divider	`17.63 kB` `6.234 kB`
`react` DocumentCard	`211.08 kB` `62.793 kB`
`react` DragDrop	`8.343 kB` `2.724 kB`
`react` DraggableZone	`33.345 kB` `11.166 kB`
`react` Dropdown	`227.732 kB` `66.867 kB`
`react` ExtendedPicker	`94.987 kB` `27.297 kB`
`react` Fabric	`39.75 kB` `13.688 kB`
`react` Facepile	`205.992 kB` `61.67 kB`
`react` FloatingPicker	`236.233 kB` `67.368 kB`
`react` FocusTrapZone	`15.831 kB` `5.54 kB`
`react` FocusZone	`53.259 kB` `16.869 kB`
`react` Grid	`175.918 kB` `53.25 kB`
`react` GroupedList	`131.636 kB` `39.657 kB`
`react` GroupedListV2	`119.324 kB` `36.822 kB`
`react` HoverCard	`93.735 kB` `29.778 kB`
`react` Icon	`49.74 kB` `16.603 kB`
`react` Icons	`65.829 kB` `24.212 kB`
`react` Image	`44.79 kB` `15.024 kB`
`react` Keytip	`78.588 kB` `25.825 kB`
`react` KeytipData	`13.585 kB` `4.418 kB`
`react` KeytipLayer	`100.422 kB` `31.128 kB`
`react` Keytips	`103.175 kB` `32.07 kB`
`react` Label	`36.347 kB` `12.639 kB`
`react` Layer	`45.683 kB` `15.585 kB`
`react` Link	`37.673 kB` `12.993 kB`
`react` List	`38.136 kB` `12.004 kB`
`react` MarqueeSelection	`72.119 kB` `21.676 kB`
`react` MessageBar	`184.707 kB` `55.523 kB`
`react` Modal	`90.409 kB` `29.213 kB`
`react` Nav	`183.442 kB` `55.093 kB`
`react` OverflowSet	`31.044 kB` `10.593 kB`
`react` Overlay	`38.784 kB` `13.401 kB`
`react` Panel	`194.946 kB` `58.34 kB`
`react` Persona	`111.705 kB` `35.58 kB`
`react` PersonaCoin	`111.705 kB` `35.58 kB`
`react` PersonaPresence	`55.928 kB` `18.715 kB`
`react` Pickers	`287.603 kB` `80.607 kB`
`react` Pivot	`184.252 kB` `55.823 kB`
`react` Popup	`12.032 kB` `4.114 kB`
`react` Positioning	`21.821 kB` `7.334 kB`
`react` PositioningContainer	`70.754 kB` `22.84 kB`
`react` ProgressIndicator	`37.498 kB` `12.906 kB`
`react` Rating	`78.989 kB` `25.18 kB`
`react` ResizeGroup	`13.286 kB` `4.365 kB`
`react` ResponsiveMode	`8.078 kB` `2.95 kB`
`react` ScrollablePane	`53.538 kB` `17.113 kB`
`react` SearchBox	`182.982 kB` `55.1 kB`
`react` SelectableOption	`724 B` `413 B`
`react` SelectedItemsList	`226.659 kB` `66.321 kB`
`react` Selection	`41.202 kB` `11.839 kB`
`react` Separator	`33.397 kB` `11.529 kB`
`react` Shimmer	`47.265 kB` `15.632 kB`
`react` ShimmeredDetailsList	`236.654 kB` `67.42 kB`
`react` Slider	`55.575 kB` `18.574 kB`
`react` SpinButton	`186.661 kB` `56.205 kB`
`react` Spinner	`39.691 kB` `13.815 kB`
`react` Stack	`40.761 kB` `13.931 kB`
`react` Sticky	`32.064 kB` `10.324 kB`
`react` Styling	`44.812 kB` `14.688 kB`
`react` SwatchColorPicker	`186.166 kB` `56.724 kB`
`react` TeachingBubble	`200.004 kB` `59.345 kB`
`react` Text	`35.931 kB` `12.486 kB`
`react` TextField	`78.587 kB` `24.642 kB`
`react` Theme	`42.456 kB` `13.773 kB`
`react` ThemeGenerator	`12.34 kB` `4.106 kB`
`react` TimePicker	`235.197 kB` `68.29 kB`
`react` Toggle	`44.17 kB` `15.346 kB`
`react` Tooltip	`84.225 kB` `27.277 kB`
`react` Utilities	`71.851 kB` `21.843 kB`
`react` Viewport	`22.945 kB` `7.292 kB`
`react` WeeklyDayPicker	`98.762 kB` `30.828 kB`
`react` WindowProvider	`1.059 kB` `541 B`
`react-accordion` Accordion (including children components)	`100.125 kB` `30.423 kB`
`react-alert` Alert	`83.737 kB` `23.475 kB`
`react-avatar` Avatar	`50.175 kB` `15.944 kB`
`react-avatar` AvatarGroup	`19.702 kB` `7.794 kB`
`react-avatar` AvatarGroupItem	`64.829 kB` `20.272 kB`
`react-badge` Badge	`26.905 kB` `8.73 kB`
`react-badge` CounterBadge	`27.806 kB` `9.025 kB`
`react-badge` PresenceBadge	`25.311 kB` `9.307 kB`
`react-breadcrumb` @fluentui/react-breadcrumb - package	`115.48 kB` `31.843 kB`
`react-button` Button	`39.513 kB` `11.17 kB`
`react-button` CompoundButton	`46.874 kB` `12.662 kB`
`react-button` MenuButton	`44.292 kB` `12.544 kB`
`react-button` SplitButton	`52.306 kB` `14.135 kB`
`react-button` ToggleButton	`56.559 kB` `13.068 kB`
`react-calendar-compat` Calendar Compat	`152.073 kB` `39.83 kB`
`react-card` Card - All	`101.557 kB` `28.932 kB`
`react-card` Card	`96.382 kB` `27.401 kB`
`react-card` CardFooter	`13.064 kB` `5.386 kB`
`react-card` CardHeader	`15.307 kB` `6.144 kB`
`react-card` CardPreview	`14.015 kB` `5.752 kB`
`react-checkbox` Checkbox	`35.656 kB` `12.07 kB`
`react-combobox` Combobox (including child components)	`102.686 kB` `33.174 kB`
`react-combobox` Dropdown (including child components)	`104.06 kB` `33.101 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`71.098 kB` `20.515 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`217.205 kB` `61.941 kB`
`react-components` react-components: FluentProvider & webLightTheme	`43.585 kB` `14.352 kB`
`react-datepicker-compat` DatePicker Compat	`224.523 kB` `62.94 kB`
`react-dialog` Dialog (including children components)	`100.928 kB` `29.921 kB`
`react-divider` Divider	`20.922 kB` `7.791 kB`
`react-field` Field	`22.542 kB` `8.609 kB`
`react-image` Image	`15.745 kB` `6.231 kB`
`react-infobutton` InfoButton	`138.694 kB` `43.395 kB`
`react-infobutton` InfoLabel	`142.495 kB` `44.625 kB`
`react-input` Input	`26.891 kB` `9.12 kB`
`react-jsx-runtime` Classic Pragma	`1.057 kB` `530 B`
`react-jsx-runtime` JSX Dev Runtime	`3.781 kB` `1.646 kB`
`react-jsx-runtime` JSX Runtime	`4.377 kB` `1.881 kB`
`react-label` Label	`14.266 kB` `5.829 kB`
`react-link` Link	`17.082 kB` `6.911 kB`
`react-menu` Menu (including children components)	`149.426 kB` `45.505 kB`
`react-menu` Menu (including selectable components)	`152.112 kB` `46.018 kB`
`react-message-bar` MessageBar (all components)	`25.566 kB` `9.13 kB`
`react-northstar` Accordion	`85.392 kB` `26.518 kB`
`react-northstar` Alert	`87.45 kB` `26.902 kB`
`react-northstar` Animation	`55.34 kB` `17.829 kB`
`react-northstar` Attachment	`86.844 kB` `26.692 kB`
`react-northstar` Avatar	`80.279 kB` `24.629 kB`
`react-northstar` Box	`75.248 kB` `23.806 kB`
`react-northstar` Breadcrumb	`79.92 kB` `24.709 kB`
`react-northstar` Button	`83.16 kB` `25.947 kB`
`react-northstar` Card	`82.705 kB` `25.023 kB`
`react-northstar` Carousel	`105.182 kB` `31.871 kB`
`react-northstar` Chat	`152.378 kB` `45.964 kB`
`react-northstar` Checkbox	`79.807 kB` `25.078 kB`
`react-northstar` Datepicker	`184.939 kB` `56.194 kB`
`react-northstar` Debug	`8.801 kB` `3.594 kB`
`react-northstar` Design	`36.589 kB` `12.067 kB`
`react-northstar` Dialog	`112.058 kB` `33.615 kB`
`react-northstar` Divider	`76.619 kB` `24.129 kB`
`react-northstar` Dropdown	`196.499 kB` `59.455 kB`
`react-northstar` Embed	`81.477 kB` `25.417 kB`
`react-northstar` Flex	`47.728 kB` `15.438 kB`
`react-northstar` Form	`92.527 kB` `28.879 kB`
`react-northstar` Grid	`70.584 kB` `22.278 kB`
`react-northstar` Header	`74.756 kB` `23.461 kB`
`react-northstar` Image	`73.591 kB` `23.329 kB`
`react-northstar` Input	`88.346 kB` `27.78 kB`
`react-northstar` ItemLayout	`78.231 kB` `24.454 kB`
`react-northstar` Label	`77.92 kB` `24.41 kB`
`react-northstar` Layout	`75.393 kB` `23.798 kB`
`react-northstar` List	`88.493 kB` `27.547 kB`
`react-northstar` Loader	`78.616 kB` `24.729 kB`
`react-northstar` Menu	`126.89 kB` `39.872 kB`
`react-northstar` MenuButton	`161.296 kB` `48.883 kB`
`react-northstar` Pill	`83.722 kB` `26.069 kB`
`react-northstar` Popup	`133.604 kB` `41.483 kB`
`react-northstar` Portal	`58.338 kB` `18.852 kB`
`react-northstar` Provider	`93.138 kB` `29.63 kB`
`react-northstar` RadioGroup	`83.282 kB` `26.053 kB`
`react-northstar` Reaction	`77.28 kB` `24.122 kB`
`react-northstar` Segment	`76.209 kB` `23.892 kB`
`react-northstar` Skeleton	`77.765 kB` `24.2 kB`
`react-northstar` Slider	`84.27 kB` `26.737 kB`
`react-northstar` SplitButton	`176.534 kB` `52.63 kB`
`react-northstar` Status	`76.272 kB` `24.05 kB`
`react-northstar` SvgIcon	`36.823 kB` `11.743 kB`
`react-northstar` Table	`80.796 kB` `25.154 kB`
`react-northstar` Text	`74.114 kB` `23.507 kB`
`react-northstar` TextArea	`74.248 kB` `23.492 kB`
`react-northstar` Toolbar	`173.345 kB` `52.08 kB`
`react-northstar` Tooltip	`108.261 kB` `34.482 kB`
`react-northstar` Tree	`87.855 kB` `27.217 kB`
`react-northstar` Video	`75.411 kB` `23.799 kB`
`react-overflow` hooks only	`12.86 kB` `4.825 kB`
`react-persona` Persona	`57.066 kB` `17.821 kB`
`react-popover` Popover	`126.884 kB` `39.803 kB`
`react-portal` Portal	`13.633 kB` `4.869 kB`
`react-portal-compat` PortalCompatProvider	`7.944 kB` `2.588 kB`
`react-positioning` usePositioning	`26.398 kB` `9.539 kB`
`react-progress` ProgressBar	`17.428 kB` `6.899 kB`
`react-provider` FluentProvider	`23.759 kB` `8.657 kB`
`react-radio` Radio	`32.95 kB` `10.252 kB`
`react-radio` RadioGroup	`15.354 kB` `6.265 kB`
`react-select` Select	`28.609 kB` `10.204 kB`
`react-slider` Slider	`39.949 kB` `12.968 kB`
`react-spinbutton` SpinButton	`36.774 kB` `11.789 kB`
`react-spinner` Spinner	`24.696 kB` `8.342 kB`
`react-switch` Switch	`35.14 kB` `11.199 kB`
`react-table` DataGrid	`165.189 kB` `45.907 kB`
`react-table` Table (Primitives only)	`45.324 kB` `14.116 kB`
`react-table` Table as DataGrid	`136.573 kB` `36.817 kB`
`react-table` Table (Selection only)	`76.334 kB` `20.553 kB`
`react-table` Table (Sort only)	`74.977 kB` `20.155 kB`
`react-tags` InteractionTag	`15.259 kB` `6.056 kB`
`react-tags` Tag	`29.982 kB` `9.441 kB`
`react-tags` TagGroup	`80.556 kB` `24.027 kB`
`react-text` Text - Default	`16.705 kB` `6.57 kB`
`react-text` Text - Wrappers	`19.878 kB` `6.897 kB`
`react-textarea` Textarea	`30.947 kB` `10.477 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-timepicker-compat` TimePicker	`104.707 kB` `34.558 kB`
`react-toast` Toast (including Toaster)	`100.198 kB` `29.761 kB`
`react-tooltip` Tooltip	`54.58 kB` `19.188 kB`
`react-utilities` SSRProvider	`180 B` `160 B`

_{🤖 This report was generated against 0e4c8b7a83dc85945b135f89159225e09110a155}

codesandbox-ci · 2024-03-13T16:02:43Z

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.

scripts/tasks/src/swc/types.ts

…within a function

fabricteam · 2024-03-13T16:53:23Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	621	652	5000
Button	mount	289	291	5000
Field	mount	1087	1107	5000
FluentProvider	mount	705	711	5000
FluentProviderWithTheme	mount	88	84	10
FluentProviderWithTheme	virtual-rerender	66	63	10
FluentProviderWithTheme	virtual-rerender-with-unmount	74	71	10
MakeStyles	mount	842	835	50000
Persona	mount	1726	1712	5000
SpinButton	mount	1386	1402	5000

fabricteam · 2024-03-13T16:55:54Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2024-03-13T16:56:42Z

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

⚠️ 2 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
AttachmentMinimalPerf.default	84	73	1.15:1	analysis
ChatDuplicateMessagesPerf.default	155	145	1.07:1	analysis

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
TreeWith60ListItems.default	92	84	1.1:1
FlexMinimalPerf.default	169	155	1.09:1
LayoutMinimalPerf.default	211	194	1.09:1
IconMinimalPerf.default	395	363	1.09:1
TextMinimalPerf.default	211	194	1.09:1
ButtonSlotsPerf.default	335	309	1.08:1
ListWith60ListItems.default	377	349	1.08:1
ButtonMinimalPerf.default	92	86	1.07:1
ProviderMinimalPerf.default	215	201	1.07:1
ChatMinimalPerf.default	460	436	1.06:1
HeaderMinimalPerf.default	212	200	1.06:1
ImageMinimalPerf.default	230	218	1.06:1
ButtonOverridesMissPerf.default	662	633	1.05:1
LabelMinimalPerf.default	224	213	1.05:1
PortalMinimalPerf.default	89	85	1.05:1
RadioGroupMinimalPerf.default	272	258	1.05:1
ReactionMinimalPerf.default	219	208	1.05:1
RefMinimalPerf.default	112	107	1.05:1
AvatarMinimalPerf.default	112	108	1.04:1
LoaderMinimalPerf.default	194	186	1.04:1
AnimationMinimalPerf.default	306	296	1.03:1
ChatWithPopoverPerf.default	201	196	1.03:1
DividerMinimalPerf.default	212	206	1.03:1
PopupMinimalPerf.default	352	342	1.03:1
SkeletonMinimalPerf.default	204	198	1.03:1
StatusMinimalPerf.default	396	385	1.03:1
TableMinimalPerf.default	236	229	1.03:1
VideoMinimalPerf.default	435	421	1.03:1
AlertMinimalPerf.default	165	161	1.02:1
DropdownMinimalPerf.default	1469	1441	1.02:1
EmbedMinimalPerf.default	1932	1895	1.02:1
FormMinimalPerf.default	221	217	1.02:1
ListCommonPerf.default	401	394	1.02:1
SegmentMinimalPerf.default	192	188	1.02:1
CustomToolbarPrototype.default	1510	1475	1.02:1
TreeMinimalPerf.default	486	476	1.02:1
BoxMinimalPerf.default	200	199	1.01:1
CardMinimalPerf.default	301	299	1.01:1
GridMinimalPerf.default	190	188	1.01:1
InputMinimalPerf.default	545	542	1.01:1
ListMinimalPerf.default	314	310	1.01:1
TableManyItemsPerf.default	1114	1105	1.01:1
CheckboxMinimalPerf.default	1151	1146	1:1
HeaderSlotsPerf.default	468	469	1:1
ProviderMergeThemesPerf.default	636	637	1:1
TextAreaMinimalPerf.default	294	293	1:1
AttachmentSlotsPerf.default	659	664	0.99:1
DialogMinimalPerf.default	448	451	0.99:1
DropdownManyItemsPerf.default	389	392	0.99:1
ListNestedPerf.default	314	318	0.99:1
MenuMinimalPerf.default	506	511	0.99:1
SplitButtonMinimalPerf.default	2287	2299	0.99:1
TooltipMinimalPerf.default	1280	1295	0.99:1
ItemLayoutMinimalPerf.default	715	726	0.98:1
MenuButtonMinimalPerf.default	937	954	0.98:1
ToolbarMinimalPerf.default	546	556	0.98:1
CarouselMinimalPerf.default	259	268	0.97:1
DatepickerMinimalPerf.default	3563	3694	0.96:1
RosterPerf.default	1530	1590	0.96:1
SliderMinimalPerf.default	724	755	0.96:1
AccordionMinimalPerf.default	78	87	0.9:1

fabricteam · 2024-03-13T17:00:27Z

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam · 2024-03-13T17:05:16Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	637	612	5000
Breadcrumb	mount	1659	1688	1000
Checkbox	mount	1689	1678	5000
CheckboxBase	mount	1495	1477	5000
ChoiceGroup	mount	2862	2919	5000
ComboBox	mount	648	653	1000
CommandBar	mount	6229	6232	1000
ContextualMenu	mount	14104	13610	1000
DefaultButton	mount	736	735	5000
DetailsRow	mount	2151	2192	5000
DetailsRowFast	mount	2214	2143	5000
DetailsRowNoStyles	mount	2003	1986	5000
Dialog	mount	2789	2608	1000
DocumentCardTitle	mount	231	240	1000
Dropdown	mount	1949	1960	5000
FocusTrapZone	mount	1138	1167	5000
FocusZone	mount	1077	1071	5000
GroupedList	mount	41745	41951	2
GroupedList	virtual-rerender	20108	20212	2
GroupedList	virtual-rerender-with-unmount	50724	51150	2
GroupedListV2	mount	225	228	2
GroupedListV2	virtual-rerender	213	217	2
GroupedListV2	virtual-rerender-with-unmount	229	230	2
IconButton	mount	1086	1092	5000
Label	mount	337	339	5000
Layer	mount	2702	2678	5000
Link	mount	390	417	5000
MenuButton	mount	931	928	5000
MessageBar	mount	21415	21470	5000
Nav	mount	1942	1898	1000
OverflowSet	mount	773	782	5000
Panel	mount	1765	1768	1000
Persona	mount	734	735	1000
Pivot	mount	869	869	1000
PrimaryButton	mount	843	841	5000
Rating	mount	4659	4503	5000
SearchBox	mount	920	916	5000
Shimmer	mount	1843	1858	5000
Slider	mount	1328	1337	5000
SpinButton	mount	2843	2860	5000
Spinner	mount	379	391	5000
SplitButton	mount	1869	1822	5000
Stack	mount	414	409	5000
StackWithIntrinsicChildren	mount	836	857	5000
StackWithTextChildren	mount	2587	2569	5000
SwatchColorPicker	mount	6196	6061	5000
TagPicker	mount	1445	1435	5000
Text	mount	370	359	5000
TextField	mount	954	924	5000
ThemeProvider	mount	828	825	5000
ThemeProvider	virtual-rerender	592	586	5000
ThemeProvider	virtual-rerender-with-unmount	1277	1280	5000
Toggle	mount	594	603	5000
buttonNative	mount	187	199	5000

fabricteam · 2024-03-13T17:06:03Z

🕵 fluentuiv9 No visual regressions between this PR and main

package.json

github-actions bot added this to the March Project Cycle Q1 2024 milestone Mar 13, 2024

Hotell changed the title ~~Hotell/pkg/tokens to full esm build time~~ feat: add .js file extension to built output + unwrap folder import/export to support native ESM within browser Mar 13, 2024

Hotell added 3 commits March 13, 2024 16:46

chore: bump swc to latest

dc19a2e

feat(scripts-task): enable unwrapping directory and explicit '.js' ex…

81ace43

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

feat(tokens): enable .js extension addition and directory import/expo…

eca68d5

…rt unwrapping in build output

generate changefiles

b37c7fb

Hotell force-pushed the hotell/pkg/tokens-to-full-esm-build-time branch from fb86988 to b37c7fb Compare March 13, 2024 15:49

fixup! chore: bump swc to latest

0d40f69

Hotell commented Mar 13, 2024

View reviewed changes

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

Hotell added 2 commits March 13, 2024 17:36

refactor(scripts-tasks): encapsulate swc build output postprocessing …

63573c1

…within a function

fixup! fixup! chore: bump swc to latest

c07ea15

Hotell added Area: Build System Fluent UI react-components (v9) labels Mar 13, 2024

Hotell linked an issue Mar 13, 2024 that may be closed by this pull request

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

Open

1 task

Hotell marked this pull request as ready for review March 13, 2024 16:53

Hotell requested a review from a team as a code owner March 13, 2024 16:53

spmonahan approved these changes Mar 13, 2024

View reviewed changes

ling1726 reviewed Mar 13, 2024

View reviewed changes

package.json Show resolved Hide resolved

ling1726 approved these changes Mar 13, 2024

View reviewed changes

Hotell merged commit e4022e2 into microsoft:master Mar 14, 2024
21 checks passed

Hotell deleted the hotell/pkg/tokens-to-full-esm-build-time branch March 14, 2024 16:41

elliot-huffman mentioned this pull request Mar 15, 2024

[Bug]: Unable to Compile Tokens #30795

Closed

2 tasks

micahgodbolt mentioned this pull request Mar 18, 2024

revert: "feat: add .js file extension to built output + unwrap folder import/export to support native ESM within browser" #30803

Merged

Hotell mentioned this pull request Oct 7, 2024

feat: add explicit .js file extensions to all relative import/export statement within built output to support native ESM within browser #32997

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add .js file extension to built output + unwrap folder import/export to support native ESM within browser #30770

feat: add .js file extension to built output + unwrap folder import/export to support native ESM within browser #30770

Hotell commented Mar 13, 2024 •

edited

Loading

fabricteam commented Mar 13, 2024 •

edited

Loading

codesandbox-ci bot commented Mar 13, 2024 •

edited

Loading

fabricteam commented Mar 13, 2024

fabricteam commented Mar 13, 2024

fabricteam commented Mar 13, 2024

fabricteam commented Mar 13, 2024

fabricteam commented Mar 13, 2024

fabricteam commented Mar 13, 2024

feat: add .js file extension to built output + unwrap folder import/export to support native ESM within browser #30770

feat: add .js file extension to built output + unwrap folder import/export to support native ESM within browser #30770

Conversation

Hotell commented Mar 13, 2024 • edited Loading

Previous Behavior

New Behavior

unwrapping directory import/export statements in order to generate ESM valid code

.js extension addition to all import/export statements in build output

Related Issue(s)

fabricteam commented Mar 13, 2024 • edited Loading

📊 Bundle size report

codesandbox-ci bot commented Mar 13, 2024 • edited Loading

fabricteam commented Mar 13, 2024

Perf Analysis (@fluentui/react-components)

fabricteam commented Mar 13, 2024

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam commented Mar 13, 2024

Perf Analysis (@fluentui/react-northstar)

Potential regressions comparing to master

fabricteam commented Mar 13, 2024

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam commented Mar 13, 2024

Perf Analysis (@fluentui/react)

fabricteam commented Mar 13, 2024

🕵 fluentuiv9 No visual regressions between this PR and main

Hotell commented Mar 13, 2024 •

edited

Loading

`.js` extension addition to all import/export statements in build output

fabricteam commented Mar 13, 2024 •

edited

Loading

codesandbox-ci bot commented Mar 13, 2024 •

edited

Loading

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

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

Perf Analysis (`@fluentui/react`)