Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(web-components): update to use foundation export paths and add extensions for package exports #28912

Conversation

chrisdholt
Copy link
Member

Previous Behavior

We previously imported from the root of fast-foundation for most core component pathing. This changes to primarily leverage specific package export paths when available. We also previously did not include file extensions for the fluent web component package exports which is problematic for import maps.

With import maps now providing a standard for package resolution in browsers and other JavaScript runtimes, using the extensionless style can result in bloated import map definitions. Explicit file extensions can avoid this issue by enabling the import map to utilize a packages folder mapping to map multiple subpaths where possible instead of a separate map entry per package subpath export. This also mirrors the requirement of using the full specifier path in relative and absolute import specifiers.

See here for more: https://nodejs.dev/en/api/v18/packages/#extensions-in-subpaths

New Behavior

Uses package exports where we can. Adds extensions to component specific package exports.

@chrisdholt chrisdholt requested review from a team as code owners August 18, 2023 18:56
@@ -1,4 +1,4 @@
import { ValuesOf } from '@microsoft/fast-foundation';
import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the motivation behind switching from the default export to the mapped exports here? Bundle size or build fix or anything else?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For types specifically it was just convention to match other scenarios where we are bringing things in. For non-type imports we want to ensure we are exporting pure es modules.

@size-auditor
Copy link

size-auditor bot commented Aug 18, 2023

Asset size changes

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

Baseline commit: 8e94e5c9041b143e43af851db35a7d1fc74aa33b (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 18, 2023

📊 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
3.194 kB
1.314 kB
react-accordion
Accordion (including children components)
85.867 kB
26.007 kB
react-alert
Alert
89.69 kB
22.255 kB
react-avatar
Avatar
53.083 kB
14.674 kB
react-avatar
AvatarGroup
15.42 kB
6.167 kB
react-avatar
AvatarGroupItem
69.301 kB
18.97 kB
react-badge
Badge
23.78 kB
7.542 kB
react-badge
CounterBadge
24.67 kB
7.825 kB
react-badge
PresenceBadge
25.796 kB
7.444 kB
react-button
Button
36.883 kB
9.41 kB
react-button
CompoundButton
44.058 kB
10.884 kB
react-button
MenuButton
41.563 kB
10.74 kB
react-button
SplitButton
49.992 kB
12.319 kB
react-button
ToggleButton
55.247 kB
11.328 kB
react-card
Card - All
83.371 kB
23.863 kB
react-card
Card
78.14 kB
22.402 kB
react-card
CardFooter
9.04 kB
3.807 kB
react-card
CardHeader
10.979 kB
4.51 kB
react-card
CardPreview
9.847 kB
4.159 kB
react-checkbox
Checkbox
33.086 kB
10.319 kB
react-checkbox
CheckboxField
39.991 kB
12.208 kB
react-combobox
Combobox (including child components)
85.156 kB
27.33 kB
react-combobox
ComboboxField
81.573 kB
27.126 kB
react-combobox
Dropdown (including child components)
83.843 kB
27.082 kB
react-components
react-components: Button, FluentProvider & webLightTheme
64.085 kB
17.543 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
201.639 kB
56.18 kB
react-components
react-components: FluentProvider & webLightTheme
35.049 kB
11.533 kB
react-dialog
Dialog (including children components)
89.714 kB
26.685 kB
react-divider
Divider
17.105 kB
6.177 kB
react-field
Field
17.668 kB
6.543 kB
react-image
Image
11.259 kB
4.473 kB
react-infobutton
InfoButton
126.849 kB
38.662 kB
react-input
Input
24.848 kB
8.136 kB
react-input
InputField
35.053 kB
11.096 kB
react-label
Label
9.817 kB
4.067 kB
react-link
Link
12.306 kB
5.073 kB
react-menu
Menu (including children components)
126.199 kB
38.639 kB
react-menu
Menu (including selectable components)
129.268 kB
39.153 kB
react-overflow
hooks only
11.214 kB
4.271 kB
react-persona
Persona
59.921 kB
16.564 kB
react-popover
Popover
113.927 kB
35.082 kB
react-portal
Portal
11.377 kB
4.179 kB
react-portal-compat
PortalCompatProvider
6.324 kB
2.129 kB
react-positioning
usePositioning
22.857 kB
8.505 kB
react-progress
ProgressBar
13.573 kB
5.232 kB
react-progress
ProgressField
23.868 kB
8.368 kB
react-provider
FluentProvider
17.116 kB
6.332 kB
react-radio
Radio
32.671 kB
10.612 kB
react-radio
RadioGroup
14.885 kB
5.933 kB
react-radio
RadioGroupField
24.958 kB
9.067 kB
react-select
Select
24.14 kB
8.271 kB
react-select
SelectField
33.379 kB
10.779 kB
react-slider
Slider
33.086 kB
10.553 kB
react-slider
SliderField
42.917 kB
13.466 kB
react-spinbutton
SpinButton
45.179 kB
13.043 kB
react-spinbutton
SpinButtonField
54.442 kB
15.634 kB
react-spinner
Spinner
20.615 kB
6.682 kB
react-switch
Switch
28.22 kB
8.755 kB
react-switch
SwitchField
35.005 kB
10.654 kB
react-table
DataGrid
142.96 kB
38.958 kB
react-table
Table (Primitives only)
43.771 kB
12.063 kB
react-table
Table as DataGrid
134.285 kB
34.47 kB
react-table
Table (Selection only)
82.203 kB
20.534 kB
react-table
Table (Sort only)
81.632 kB
20.383 kB
react-text
Text - Default
12.261 kB
4.819 kB
react-text
Text - Wrappers
15.571 kB
5.23 kB
react-textarea
Textarea
26.331 kB
8.581 kB
react-textarea
TextareaField
36.532 kB
11.504 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
30.908 kB
6.714 kB
react-theme
Teams: Light theme
17.776 kB
5.141 kB
react-tooltip
Tooltip
45.962 kB
16.113 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against 8e94e5c9041b143e43af851db35a7d1fc74aa33b

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 18, 2023

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 1f37e6f:

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

@chrisdholt chrisdholt force-pushed the users/chhol/update-to-use-foundation-export-paths-and-add-extensions branch 6 times, most recently from 9ea8750 to a0de5cd Compare August 21, 2023 18:31
@chrisdholt chrisdholt force-pushed the users/chhol/update-to-use-foundation-export-paths-and-add-extensions branch from a0de5cd to 4015aae Compare August 21, 2023 20:07
@fabricteam
Copy link
Collaborator

fabricteam commented Aug 21, 2023

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

@chrisdholt chrisdholt force-pushed the users/chhol/update-to-use-foundation-export-paths-and-add-extensions branch from c0f26fb to 3033b1a Compare August 21, 2023 21:02
@chrisdholt chrisdholt force-pushed the users/chhol/update-to-use-foundation-export-paths-and-add-extensions branch from 3033b1a to 1f37e6f Compare August 21, 2023 21:20
@chrisdholt
Copy link
Member Author

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 3 pipeline(s).

@chrisdholt chrisdholt merged commit 2f59582 into microsoft:web-components-v3 Aug 21, 2023
21 checks passed
@chrisdholt chrisdholt deleted the users/chhol/update-to-use-foundation-export-paths-and-add-extensions branch August 21, 2023 22:29
chrisdholt added a commit that referenced this pull request Apr 29, 2024
…xtensions for package exports (#28912)

* update core component paths to use foundation export paths and add extensions to web component export paths

* change files

* update rollup to use esbuild and support package exports

* update to use esm package exports

* dedupe deps

* fix order of alias resolutions

* update paths for start end and patterns

* fix extension order for web component vr tests

* update module resolution for web component vr tests

* resolve tsx to js as well
radium-v pushed a commit to radium-v/fluentui that referenced this pull request Apr 29, 2024
…xtensions for package exports (microsoft#28912)

* update core component paths to use foundation export paths and add extensions to web component export paths

* change files

* update rollup to use esbuild and support package exports

* update to use esm package exports

* dedupe deps

* fix order of alias resolutions

* update paths for start end and patterns

* fix extension order for web component vr tests

* update module resolution for web component vr tests

* resolve tsx to js as well
radium-v pushed a commit to radium-v/fluentui that referenced this pull request Apr 29, 2024
…xtensions for package exports (microsoft#28912)

* update core component paths to use foundation export paths and add extensions to web component export paths

* change files

* update rollup to use esbuild and support package exports

* update to use esm package exports

* dedupe deps

* fix order of alias resolutions

* update paths for start end and patterns

* fix extension order for web component vr tests

* update module resolution for web component vr tests

* resolve tsx to js as well
radium-v pushed a commit to radium-v/fluentui that referenced this pull request Apr 30, 2024
…xtensions for package exports (microsoft#28912)

* update core component paths to use foundation export paths and add extensions to web component export paths

* change files

* update rollup to use esbuild and support package exports

* update to use esm package exports

* dedupe deps

* fix order of alias resolutions

* update paths for start end and patterns

* fix extension order for web component vr tests

* update module resolution for web component vr tests

* resolve tsx to js as well
radium-v pushed a commit that referenced this pull request Apr 30, 2024
…xtensions for package exports (#28912)

* update core component paths to use foundation export paths and add extensions to web component export paths

* change files

* update rollup to use esbuild and support package exports

* update to use esm package exports

* dedupe deps

* fix order of alias resolutions

* update paths for start end and patterns

* fix extension order for web component vr tests

* update module resolution for web component vr tests

* resolve tsx to js as well
radium-v pushed a commit that referenced this pull request May 2, 2024
…xtensions for package exports (#28912)

* update core component paths to use foundation export paths and add extensions to web component export paths

* change files

* update rollup to use esbuild and support package exports

* update to use esm package exports

* dedupe deps

* fix order of alias resolutions

* update paths for start end and patterns

* fix extension order for web component vr tests

* update module resolution for web component vr tests

* resolve tsx to js as well
radium-v pushed a commit that referenced this pull request May 2, 2024
…xtensions for package exports (#28912)

* update core component paths to use foundation export paths and add extensions to web component export paths

* change files

* update rollup to use esbuild and support package exports

* update to use esm package exports

* dedupe deps

* fix order of alias resolutions

* update paths for start end and patterns

* fix extension order for web component vr tests

* update module resolution for web component vr tests

* resolve tsx to js as well
radium-v pushed a commit that referenced this pull request May 2, 2024
…xtensions for package exports (#28912)

* update core component paths to use foundation export paths and add extensions to web component export paths

* change files

* update rollup to use esbuild and support package exports

* update to use esm package exports

* dedupe deps

* fix order of alias resolutions

* update paths for start end and patterns

* fix extension order for web component vr tests

* update module resolution for web component vr tests

* resolve tsx to js as well
radium-v pushed a commit that referenced this pull request May 3, 2024
…xtensions for package exports (#28912)

* update core component paths to use foundation export paths and add extensions to web component export paths

* change files

* update rollup to use esbuild and support package exports

* update to use esm package exports

* dedupe deps

* fix order of alias resolutions

* update paths for start end and patterns

* fix extension order for web component vr tests

* update module resolution for web component vr tests

* resolve tsx to js as well
radium-v pushed a commit that referenced this pull request May 6, 2024
…xtensions for package exports (#28912)

* update core component paths to use foundation export paths and add extensions to web component export paths

* change files

* update rollup to use esbuild and support package exports

* update to use esm package exports

* dedupe deps

* fix order of alias resolutions

* update paths for start end and patterns

* fix extension order for web component vr tests

* update module resolution for web component vr tests

* resolve tsx to js as well
radium-v pushed a commit that referenced this pull request May 6, 2024
…xtensions for package exports (#28912)

* update core component paths to use foundation export paths and add extensions to web component export paths

* change files

* update rollup to use esbuild and support package exports

* update to use esm package exports

* dedupe deps

* fix order of alias resolutions

* update paths for start end and patterns

* fix extension order for web component vr tests

* update module resolution for web component vr tests

* resolve tsx to js as well
radium-v pushed a commit that referenced this pull request May 8, 2024
…xtensions for package exports (#28912)

* update core component paths to use foundation export paths and add extensions to web component export paths

* change files

* update rollup to use esbuild and support package exports

* update to use esm package exports

* dedupe deps

* fix order of alias resolutions

* update paths for start end and patterns

* fix extension order for web component vr tests

* update module resolution for web component vr tests

* resolve tsx to js as well
radium-v pushed a commit that referenced this pull request May 10, 2024
…xtensions for package exports (#28912)

* update core component paths to use foundation export paths and add extensions to web component export paths

* change files

* update rollup to use esbuild and support package exports

* update to use esm package exports

* dedupe deps

* fix order of alias resolutions

* update paths for start end and patterns

* fix extension order for web component vr tests

* update module resolution for web component vr tests

* resolve tsx to js as well
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants