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

chore: reexport themes separately #13268

Merged
merged 3 commits into from
May 22, 2020
Merged

chore: reexport themes separately #13268

merged 3 commits into from
May 22, 2020

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented May 21, 2020

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ yarn change

BREAKING CHANGES

This PR removes themes export from @fluentui/react-northstar. Instead of it please use direct exports of themes.

Before

import { themes } from '@fluentui/react-northstar'
// ---
<Provider theme={themes.teams} />

After

import { teamsTheme, teamsDarkTheme, teamsHighContrastTheme } from '@fluentui/react-northstar'
// ---
<Provider theme={teamsTheme} />

Description of changes

import * as themes from './themes';
//
// Theme
//
export { themes };

Existing reexport breaks treeshaking because it fails ModuleConcatenation process in Webpack:

/*! ModuleConcatenation bailout: Cannot concat with ./packages/fluentui/react-bindings/dist/es/telemetry/useTelemetry.js because of ./packages/fluentui/react-northstar/dist/es/index.js */
/*! ModuleConcatenation bailout: Cannot concat with ./packages/fluentui/react-bindings/dist/es/utils/getElementType.js because of ./packages/fluentui/react-northstar/dist/es/index.js */
/*! ModuleConcatenation bailout: Cannot concat with ./packages/fluentui/react-northstar/dist/es/components/Box/Box.js because of ./packages/fluentui/react-northstar/dist/es/index.js */
/*! ModuleConcatenation bailout: Cannot concat with ./packages/fluentui/react-northstar/dist/es/types.js because of ./packages/fluentui/react-northstar/dist/es/index.js */
/*! ModuleConcatenation bailout: Cannot concat with ./packages/fluentui/react-northstar/dist/es/utils/childrenExist.js because of ./packages/fluentui/react-northstar/dist/es/utils/index.js */
/*! ModuleConcatenation bailout: Cannot concat with ./packages/fluentui/react-northstar/dist/es/utils/factories.js because of ./packages/fluentui/react-northstar/dist/es/index.js */

If Webpack fails to concatenate modules it makes dead-code elimination via Terser almost useless 💣

Measures are taken from
packages/fluentui/docs/src/examples/components/Accordion/Performance/AccordionDefault.bsize.tsx with enabled concatenateModules in webpack.config.stats.ts.

Before

873KB

image

After

704KB (-169KB/20%)

image


As a side-effect it also decouples themes. As namespace reexports are handled by Webpack in a different way than in Rollup they were all included to bundles.

import { themes } from "./index";
console.log(themes.teams);

image

@msft-github-bot
Copy link
Contributor

msft-github-bot commented May 21, 2020

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 885 891 5000
Checkbox 1680 1671 5000
CheckboxBase 1366 1400 5000
CheckboxNext 1658 1661 5000
ChoiceGroup 5348 5314 5000
ComboBox 997 963 1000
CommandBar 8412 8328 1000
ContextualMenu 14379 14533 1000
DefaultButton 1138 1161 5000
DetailsRow 3643 3793 5000
DetailsRow (fast icons) 3618 3749 5000
DetailsRow without styles 3389 3487 5000
Dialog 1559 1590 1000
DocumentCardTitle with truncation 2074 2082 1000
Dropdown 2587 2576 5000
FocusZone 1853 1835 5000
IconButton 1796 1762 5000
Label 339 347 5000
Link 494 510 5000
LinkNext 481 486 5000
MenuButton 1496 1474 5000
Nav 3459 3471 1000
Panel 1551 1510 1000
Persona 910 910 1000
Pivot 1489 1435 1000
PrimaryButton 1318 1297 5000
SearchBox 1328 1276 5000
Slider 1605 1615 5000
SliderNext 1631 1604 5000
Spinner 430 426 5000
SplitButton 3326 3360 5000
Stack 524 509 5000
Stack with Intrinsic children 1978 1978 5000
Stack with Text children 5211 5161 5000
TagPicker 2908 2959 5000
Text 432 421 5000
TextField 1494 1461 5000
Toggle 941 910 5000
ToggleNext 920 930 5000
button 78 77 5000

Perf Analysis (Fluent)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
AccordionMinimalPerf.default 120 150 0.8:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.74 0.52 1.42:1 2000 1484
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 577
🔧 Checkbox.Fluent 1.15 0.35 3.29:1 1000 1150
🔧 Dialog.Fluent 0.6 0.22 2.73:1 5000 2996
🔧 Dropdown.Fluent 6.68 0.46 14.52:1 1000 6675
🔧 Icon.Fluent 0.14 0.05 2.8:1 5000 724
🦄 Image.Fluent 0.07 0.11 0.64:1 5000 368
🔧 Slider.Fluent 2.9 0.38 7.63:1 1000 2896
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 358
🦄 Tooltip.Fluent 0.1 19.5 0.01:1 5000 523

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ChatWithPopoverPerf.default 740 708 1.05:1
TextAreaMinimalPerf.default 482 457 1.05:1
AlertMinimalPerf.default 347 333 1.04:1
InputMinimalPerf.default 1708 1646 1.04:1
AvatarMinimalPerf.default 781 761 1.03:1
CardMinimalPerf.default 600 583 1.03:1
CheckboxMinimalPerf.default 5576 5427 1.03:1
StatusMinimalPerf.default 706 683 1.03:1
Button.Fluent 577 559 1.03:1
AttachmentSlotsPerf.default 1385 1353 1.02:1
DialogMinimalPerf.default 3017 2963 1.02:1
DropdownManyItemsPerf.default 2320 2264 1.02:1
TooltipMinimalPerf.default 796 781 1.02:1
VideoMinimalPerf.default 645 631 1.02:1
Icon.Fluent 724 709 1.02:1
FlexMinimalPerf.default 303 299 1.01:1
HierarchicalTreeMinimalPerf.default 432 429 1.01:1
ImageMinimalPerf.default 382 380 1.01:1
LabelMinimalPerf.default 426 420 1.01:1
SegmentMinimalPerf.default 347 343 1.01:1
SplitButtonMinimalPerf.default 3961 3913 1.01:1
TableMinimalPerf.default 392 390 1.01:1
Dialog.Fluent 2996 2973 1.01:1
FormMinimalPerf.default 400 402 1:1
MenuMinimalPerf.default 710 707 1:1
ProviderMergeThemesPerf.default 1907 1912 1:1
ProviderMinimalPerf.default 876 878 1:1
ReactionMinimalPerf.default 388 389 1:1
TextMinimalPerf.default 355 354 1:1
CustomToolbarPrototype.default 5058 5082 1:1
ToolbarMinimalPerf.default 816 814 1:1
TreeWith60ListItems.default 307 306 1:1
Avatar.Fluent 1484 1477 1:1
Checkbox.Fluent 1150 1145 1:1
Dropdown.Fluent 6675 6688 1:1
Tooltip.Fluent 523 523 1:1
AnimationMinimalPerf.default 756 766 0.99:1
AttachmentMinimalPerf.default 156 157 0.99:1
DropdownMinimalPerf.default 6717 6762 0.99:1
EmbedMinimalPerf.default 3611 3640 0.99:1
GridMinimalPerf.default 1416 1429 0.99:1
HeaderSlotsPerf.default 1401 1414 0.99:1
ListMinimalPerf.default 472 476 0.99:1
ListWith60ListItems.default 1642 1652 0.99:1
LoaderMinimalPerf.default 1284 1292 0.99:1
MenuButtonMinimalPerf.default 1772 1795 0.99:1
RadioGroupMinimalPerf.default 605 614 0.99:1
RefMinimalPerf.default 212 215 0.99:1
TreeMinimalPerf.default 1344 1362 0.99:1
ChatMinimalPerf.default 611 621 0.98:1
ItemLayoutMinimalPerf.default 2740 2794 0.98:1
SliderMinimalPerf.default 3024 3087 0.98:1
IconMinimalPerf.default 686 699 0.98:1
Image.Fluent 368 377 0.98:1
Text.Fluent 358 365 0.98:1
CarouselMinimalPerf.default 538 556 0.97:1
DividerMinimalPerf.default 350 361 0.97:1
LayoutMinimalPerf.default 829 853 0.97:1
ListCommonPerf.default 1193 1224 0.97:1
PortalMinimalPerf.default 122 126 0.97:1
BoxMinimalPerf.default 342 355 0.96:1
ListNestedPerf.default 1147 1195 0.96:1
ButtonSlotsPerf.default 781 828 0.94:1
ChatDuplicateMessagesPerf.default 552 588 0.94:1
Slider.Fluent 2896 3067 0.94:1
ButtonMinimalPerf.default 174 187 0.93:1
HeaderMinimalPerf.default 340 368 0.92:1
PopupMinimalPerf.default 268 292 0.92:1

@size-auditor
Copy link

size-auditor bot commented May 21, 2020

Asset size changes

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

Baseline commit: 77ade9a313abc59753fb7550cd050ffc38678d44 (build)

//
export { themes };
export { default as teamsTheme } from './themes/teams';
Copy link
Member

@dzearing dzearing May 21, 2020

Choose a reason for hiding this comment

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

This would be a breaking change for downstream consumers importing themes currently. Make sure to add a CHANGELOG note.

Copy link
Member

@dzearing dzearing left a comment

Choose a reason for hiding this comment

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

Add breaking changelog note :)

@layershifter layershifter merged commit e3e33eb into master May 22, 2020
@layershifter layershifter deleted the chore/teams-exports branch May 26, 2020 13:24
miroslavstastny pushed a commit to levithomason/fluentui that referenced this pull request Jun 8, 2020
* chore: reexport themes separately

* add changelog entry
mike-solomon added a commit to mike-solomon/fluentui that referenced this pull request Jun 24, 2020
Right now, if you try and copy the code from the Quickstart guide, you'll end up with an error about "teamsTheme" not being defined. This is because we're importing "themes" instead of "teamsTheme". I suspect this was just glanced over in this PR: microsoft#13268
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants