Skip to content

docs(rfcs): add TS solution style config rfc#19044

Merged
Hotell merged 3 commits intomicrosoft:masterfrom
Hotell:hotell/rfc/ts-solution-style-config
Oct 22, 2021
Merged

docs(rfcs): add TS solution style config rfc#19044
Hotell merged 3 commits intomicrosoft:masterfrom
Hotell:hotell/rfc/ts-solution-style-config

Conversation

@Hotell
Copy link
Contributor

@Hotell Hotell commented Jul 21, 2021

Pull request checklist

  • [ ] Addresses an existing issue:
  • [ ] Include a change request file using $ yarn change

Description of changes

Focus areas to test

(optional)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 21, 2021

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 4fde9ba:

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

@size-auditor
Copy link

size-auditor bot commented Jul 21, 2021

Asset size changes

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

Baseline commit: 1df00258679108cac8425f7832c57f18cfea352d (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 21, 2021

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)
57.694 kB
18.16 kB
react-avatar
Avatar
54.953 kB
15.667 kB
react-badge
Badge
23.182 kB
6.986 kB
react-badge
CounterBadge
25.642 kB
7.682 kB
react-badge
PresenceBadge
30.661 kB
8.815 kB
react-button
Button
25.501 kB
7.738 kB
react-button
CompoundButton
30.758 kB
8.689 kB
react-button
MenuButton
27.526 kB
8.413 kB
react-button
SplitButton
33.637 kB
9.597 kB
react-button
ToggleButton
34.727 kB
8.39 kB
react-card
Card - All
48.995 kB
14.558 kB
react-card
Card
44.482 kB
13.339 kB
react-card
CardFooter
8.128 kB
3.424 kB
react-card
CardHeader
9.448 kB
3.878 kB
react-card
CardPreview
8.421 kB
3.599 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
169.335 kB
48.057 kB
react-components
react-components: FluentProvider & webLightTheme
32.188 kB
10.658 kB
react-divider
Divider
15.342 kB
5.585 kB
react-image
Image
9.771 kB
3.975 kB
react-input
Input
31.319 kB
11.305 kB
react-label
Label
8.952 kB
3.708 kB
react-link
Link
11.646 kB
4.699 kB
react-make-styles
makeStaticStyles (runtime)
7.59 kB
3.321 kB
react-make-styles
makeStyles + mergeClasses (runtime)
22.175 kB
8.366 kB
react-make-styles
makeStyles + mergeClasses (build time)
2.558 kB
1.204 kB
react-menu
Menu (including children components)
105.789 kB
32.202 kB
react-menu
Menu (including selectable components)
108.065 kB
32.575 kB
react-popover
Popover
101.153 kB
30.37 kB
react-portal
Portal
6.725 kB
2.237 kB
react-positioning
usePopper
23.145 kB
7.942 kB
react-provider
FluentProvider
15.147 kB
5.573 kB
react-slider
RangedSlider
41.41 kB
11.97 kB
react-slider
Slider
34.788 kB
10.855 kB
react-switch
Switch
26.602 kB
8.557 kB
react-text
Text - Default
11.338 kB
4.418 kB
react-text
Text - Wrappers
14.407 kB
4.724 kB
react-theme
Teams: all themes
25.712 kB
6.17 kB
react-theme
Teams: Light theme
17.215 kB
5.116 kB
react-tooltip
Tooltip
45.543 kB
15.541 kB
react-utilities
SSRProvider
213 B
170 B
🤖 This report was generated against 1df00258679108cac8425f7832c57f18cfea352d

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 21, 2021

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 927 932 5000
BaseButton mount 937 931 5000
Breadcrumb mount 2726 2662 1000
ButtonNext mount 528 520 5000
Checkbox mount 1618 1533 5000
CheckboxBase mount 1297 1336 5000
ChoiceGroup mount 4848 4847 5000
ComboBox mount 992 980 1000
CommandBar mount 10364 10350 1000
ContextualMenu mount 6471 6589 1000
DefaultButton mount 1178 1156 5000
DetailsRow mount 3783 3843 5000
DetailsRowFast mount 3854 3859 5000
DetailsRowNoStyles mount 3690 3779 5000
Dialog mount 2551 2532 1000
DocumentCardTitle mount 179 165 1000
Dropdown mount 3274 3252 5000
FluentProviderNext mount 3420 3509 5000
FluentProviderWithTheme mount 219 213 10
FluentProviderWithTheme virtual-rerender 100 97 10
FluentProviderWithTheme virtual-rerender-with-unmount 257 247 10
FocusTrapZone mount 1827 1840 5000
FocusZone mount 1878 1890 5000
IconButton mount 1796 1942 5000
Label mount 365 357 5000
Layer mount 3050 3028 5000
Link mount 495 505 5000
MakeStyles mount 1851 1839 50000
MenuButton mount 1540 1514 5000
MessageBar mount 2045 2034 5000
Nav mount 3363 3382 1000
OverflowSet mount 1144 1126 5000
Panel mount 2477 2486 1000
Persona mount 868 866 1000
Pivot mount 1457 1460 1000
PrimaryButton mount 1297 1324 5000
Rating mount 7893 7797 5000
SearchBox mount 1351 1345 5000
Shimmer mount 2566 2597 5000
Slider mount 1960 2030 5000
SpinButton mount 5028 5158 5000
Spinner mount 430 460 5000
SplitButton mount 3231 3182 5000
Stack mount 523 549 5000
StackWithIntrinsicChildren mount 1754 1763 5000
StackWithTextChildren mount 4742 4717 5000
SwatchColorPicker mount 10636 10497 5000
Tabs mount 1477 1447 1000
TagPicker mount 2671 2702 5000
TeachingBubble mount 13215 13225 5000
Text mount 441 439 5000
TextField mount 1444 1407 5000
ThemeProvider mount 1196 1233 5000
ThemeProvider virtual-rerender 650 632 5000
ThemeProvider virtual-rerender-with-unmount 1908 1923 5000
Toggle mount 842 823 5000
buttonNative mount 136 130 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
IconMinimalPerf.default 657 600 1.1:1
ListWith60ListItems.default 667 626 1.07:1
HeaderMinimalPerf.default 380 358 1.06:1
ImageMinimalPerf.default 384 361 1.06:1
LoaderMinimalPerf.default 738 696 1.06:1
ButtonMinimalPerf.default 177 168 1.05:1
ChatWithPopoverPerf.default 399 380 1.05:1
PortalMinimalPerf.default 195 185 1.05:1
ItemLayoutMinimalPerf.default 1249 1205 1.04:1
MenuButtonMinimalPerf.default 1704 1646 1.04:1
TreeMinimalPerf.default 813 785 1.04:1
CardMinimalPerf.default 558 543 1.03:1
ChatDuplicateMessagesPerf.default 311 302 1.03:1
LayoutMinimalPerf.default 368 359 1.03:1
ReactionMinimalPerf.default 387 375 1.03:1
TableMinimalPerf.default 423 409 1.03:1
AccordionMinimalPerf.default 155 152 1.02:1
ButtonSlotsPerf.default 561 552 1.02:1
CarouselMinimalPerf.default 467 457 1.02:1
StatusMinimalPerf.default 677 665 1.02:1
TextMinimalPerf.default 352 345 1.02:1
VideoMinimalPerf.default 624 609 1.02:1
DialogMinimalPerf.default 753 746 1.01:1
DividerMinimalPerf.default 374 372 1.01:1
FormMinimalPerf.default 415 410 1.01:1
InputMinimalPerf.default 1328 1319 1.01:1
SegmentMinimalPerf.default 343 338 1.01:1
SliderMinimalPerf.default 1740 1723 1.01:1
TableManyItemsPerf.default 1908 1891 1.01:1
ToolbarMinimalPerf.default 937 930 1.01:1
TooltipMinimalPerf.default 1050 1036 1.01:1
AnimationMinimalPerf.default 421 422 1:1
AttachmentSlotsPerf.default 1085 1080 1:1
BoxMinimalPerf.default 353 353 1:1
ButtonOverridesMissPerf.default 1795 1795 1:1
CheckboxMinimalPerf.default 2770 2772 1:1
DatepickerMinimalPerf.default 5547 5553 1:1
DropdownManyItemsPerf.default 684 686 1:1
DropdownMinimalPerf.default 3239 3240 1:1
LabelMinimalPerf.default 393 393 1:1
ListMinimalPerf.default 512 514 1:1
ListNestedPerf.default 550 552 1:1
RadioGroupMinimalPerf.default 454 456 1:1
AlertMinimalPerf.default 271 274 0.99:1
EmbedMinimalPerf.default 4337 4390 0.99:1
GridMinimalPerf.default 342 347 0.99:1
ListCommonPerf.default 635 641 0.99:1
MenuMinimalPerf.default 851 862 0.99:1
RosterPerf.default 1150 1166 0.99:1
ProviderMinimalPerf.default 1158 1175 0.99:1
SkeletonMinimalPerf.default 359 362 0.99:1
SplitButtonMinimalPerf.default 4235 4261 0.99:1
TextAreaMinimalPerf.default 502 506 0.99:1
CustomToolbarPrototype.default 4137 4177 0.99:1
AttachmentMinimalPerf.default 160 163 0.98:1
ChatMinimalPerf.default 645 658 0.98:1
FlexMinimalPerf.default 292 297 0.98:1
HeaderSlotsPerf.default 758 777 0.98:1
ProviderMergeThemesPerf.default 1734 1765 0.98:1
AvatarMinimalPerf.default 191 197 0.97:1
PopupMinimalPerf.default 591 611 0.97:1
RefMinimalPerf.default 228 240 0.95:1
TreeWith60ListItems.default 183 195 0.94:1

@gouttierre gouttierre added this to the July Project Cycle Q2 2021 milestone Jul 22, 2021
@Hotell Hotell changed the title docs(rfcs): add ts solution style config rfc docs(rfcs): add TS solution style config rfc Jul 22, 2021
@Hotell
Copy link
Contributor Author

Hotell commented Jul 22, 2021

@Hotell - provide simple demo for @ecraig12345 how it works

@Hotell Hotell marked this pull request as ready for review July 23, 2021 11:26
@Hotell Hotell requested a review from a team July 23, 2021 11:26

- we'll need to adjust current build setup to accommodate our changes

`just-scripts` doesn't support TypeScript `build` mode, so we'll need to provide another solution.
Copy link
Member

Choose a reason for hiding this comment

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

If it literally just doesn't support passing the appropriate option through, that's very easy to fix

> see [Open Issues](#open_issues)

- leaking global types
- invalid type checking (TS is not following proper `target` and `lib`)
Copy link
Member

Choose a reason for hiding this comment

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

It might be better to just directly link to the issues here, rather than having them in a separate section


```json
{
"extends": "./tsconfig.json",
Copy link
Contributor

@ling1726 ling1726 Aug 30, 2021

Choose a reason for hiding this comment

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

Could be a stupid question, are there any circular issues since each tsconfig is extending the root tsconfig.json which is then also referencing each tsconfig? 🤔🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

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

no question is stupid @ling1726 :)

there are no circular issues, this is by design from TS folks

@Hotell Hotell force-pushed the hotell/rfc/ts-solution-style-config branch from edbc971 to 4fde9ba Compare October 22, 2021 11:55
@Hotell Hotell enabled auto-merge (squash) October 22, 2021 11:55
@Hotell Hotell removed this from the August Project Cycle Q3 2021 milestone Oct 22, 2021
@Hotell Hotell added this to the October Project Cycle Q4 2021 milestone Oct 22, 2021
@Hotell Hotell merged commit 5fcfc3b into microsoft:master Oct 22, 2021
mlp73 pushed a commit to mlp73/fluentui that referenced this pull request Jan 17, 2022
* docs(rfcs): add ts solution style config rfc

* Update rfcs/build-system/02-solution-style-ts-configs.md

* docs(rfcs): tweaks from PR suggestions

Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
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.

7 participants