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.

Sign up for GitHub

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

Jump to bottom

Add create-component script and improve create-package #16197

Merged
merged 27 commits into from
Jan 27, 2021
Merged

Add create-component script and improve create-package #16197

merged 27 commits into from
Jan 27, 2021

Conversation

joschemd
Copy link
Collaborator

@joschemd joschemd commented Dec 10, 2020 •
edited by khmakoto

Associated with
#15929

Description of changes

create-package:
Bug Fix

  • fixed recursive file drop
  • added default true for adding tests when adding react components (previously skipped as it was undefined)
    New
  • Update paths for new react packages
  • Added storybook skeleton for new react packages

create-component:
New

  • Added script to create a component under a package created with create-package

Focus areas to test

create-component / create-package

@codesandbox-ci
Copy link

codesandbox-ci bot commented Dec 10, 2020 •
edited

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 b957609:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@fabricteam
Copy link
Collaborator

fabricteam commented Dec 10, 2020 •
edited

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 837 830 5000
BaseButtonCompat mount 897 900 5000
Breadcrumb mount 44212 44880 5000
Checkbox mount 1532 1501 5000
CheckboxBase mount 1246 1289 5000
ChoiceGroup mount 4722 4690 5000
ComboBox mount 972 972 1000
CommandBar mount 10243 10344 1000
ContextualMenu mount 6122 6168 1000
DefaultButtonCompat mount 1109 1126 5000
DetailsRow mount 3730 3671 5000
DetailsRowFast mount 3651 3697 5000
DetailsRowNoStyles mount 3440 3412 5000
Dialog mount 1438 1467 1000
DocumentCardTitle mount 1874 1859 1000
Dropdown mount 3261 3363 5000
FocusTrapZone mount 1757 1774 5000
FocusZone mount 1867 1872 5000
IconButtonCompat mount 1734 1730 5000
Label mount 339 339 5000
Layer mount 1791 1786 5000
Link mount 480 477 5000
MakeStyles mount 2198 2227 50000
MenuButtonCompat mount 1470 1469 5000
MessageBar mount 2036 2047 5000
Nav mount 3675 3254 1000
OverflowSet mount 1067 1051 5000
Panel mount 1478 1376 1000
Persona mount 868 875 1000
Pivot mount 1420 1452 1000
PrimaryButtonCompat mount 1288 1275 5000
Rating mount 7555 7464 5000
SearchBox mount 1274 1312 5000
Shimmer mount 2599 2570 5000
Slider mount 1928 1919 5000
SpinButton mount 5032 5026 5000
Spinner mount 434 412 5000
SplitButtonCompat mount 3249 3209 5000
Stack mount 497 487 5000
StackWithIntrinsicChildren mount 1529 1539 5000
StackWithTextChildren mount 4480 4480 5000
SwatchColorPicker mount 11153 10296 5000
Tabs mount 1520 1426 1000
TagPicker mount 2855 2845 5000
TeachingBubble mount 11795 11609 5000
Text mount 417 410 5000
TextField mount 1355 1383 5000
ThemeProvider mount 2156 2180 5000
ThemeProvider virtual-rerender 656 656 5000
Toggle mount 785 821 5000
button mount 700 683 5000
buttonNative mount 108 115 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.17 0.5 0.34:1 2000 349
🦄 Button.Fluent 0.12 0.21 0.57:1 5000 581
🔧 Checkbox.Fluent 0.65 0.34 1.91:1 1000 654
🎯 Dialog.Fluent 0.16 0.22 0.73:1 5000 801
🔧 Dropdown.Fluent 3.01 0.41 7.34:1 1000 3014
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 679
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 413
🔧 Slider.Fluent 1.56 0.44 3.55:1 1000 1557
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 372
🦄 Tooltip.Fluent 0.12 0.9 0.13:1 5000 596

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 190 167 1.14:1
ButtonMinimalPerf.default 202 183 1.1:1
ListNestedPerf.default 603 562 1.07:1
DropdownManyItemsPerf.default 762 716 1.06:1
HeaderMinimalPerf.default 401 379 1.06:1
ReactionMinimalPerf.default 427 401 1.06:1
Checkbox.Fluent 654 621 1.05:1
Image.Fluent 413 392 1.05:1
PortalMinimalPerf.default 176 169 1.04:1
SegmentMinimalPerf.default 389 374 1.04:1
StatusMinimalPerf.default 766 737 1.04:1
Avatar.Fluent 349 337 1.04:1
FlexMinimalPerf.default 325 317 1.03:1
RadioGroupMinimalPerf.default 474 461 1.03:1
SkeletonMinimalPerf.default 396 384 1.03:1
TableMinimalPerf.default 435 423 1.03:1
Icon.Fluent 679 658 1.03:1
Tooltip.Fluent 596 576 1.03:1
AccordionMinimalPerf.default 167 164 1.02:1
AttachmentSlotsPerf.default 1231 1202 1.02:1
ButtonOverridesMissPerf.default 1719 1689 1.02:1
ButtonSlotsPerf.default 591 581 1.02:1
ButtonUseCssPerf.default 831 816 1.02:1
CarouselMinimalPerf.default 494 482 1.02:1
ChatMinimalPerf.default 655 643 1.02:1
GridMinimalPerf.default 374 368 1.02:1
ItemLayoutMinimalPerf.default 1277 1252 1.02:1
LabelMinimalPerf.default 445 437 1.02:1
ListCommonPerf.default 667 652 1.02:1
ListMinimalPerf.default 508 500 1.02:1
LoaderMinimalPerf.default 735 718 1.02:1
MenuMinimalPerf.default 878 865 1.02:1
SliderMinimalPerf.default 1618 1593 1.02:1
TextMinimalPerf.default 377 370 1.02:1
TextAreaMinimalPerf.default 515 504 1.02:1
CustomToolbarPrototype.default 3835 3775 1.02:1
VideoMinimalPerf.default 654 639 1.02:1
AvatarMinimalPerf.default 203 200 1.01:1
ChatDuplicateMessagesPerf.default 378 373 1.01:1
DialogMinimalPerf.default 835 827 1.01:1
DividerMinimalPerf.default 395 391 1.01:1
FormMinimalPerf.default 429 426 1.01:1
ImageMinimalPerf.default 395 392 1.01:1
LayoutMinimalPerf.default 436 430 1.01:1
PopupMinimalPerf.default 727 718 1.01:1
ProviderMergeThemesPerf.default 1639 1626 1.01:1
Dialog.Fluent 801 793 1.01:1
AlertMinimalPerf.default 295 296 1:1
ChatWithPopoverPerf.default 457 457 1:1
DropdownMinimalPerf.default 3077 3078 1:1
EmbedMinimalPerf.default 4219 4220 1:1
ProviderMinimalPerf.default 954 952 1:1
RefMinimalPerf.default 249 250 1:1
SplitButtonMinimalPerf.default 3817 3821 1:1
TooltipMinimalPerf.default 850 847 1:1
Dropdown.Fluent 3014 3024 1:1
AnimationMinimalPerf.default 420 424 0.99:1
ButtonUseCssNestingPerf.default 1088 1101 0.99:1
CardMinimalPerf.default 566 569 0.99:1
DatepickerMinimalPerf.default 47377 47967 0.99:1
HeaderSlotsPerf.default 809 815 0.99:1
InputMinimalPerf.default 1317 1336 0.99:1
MenuButtonMinimalPerf.default 1567 1587 0.99:1
TreeMinimalPerf.default 800 810 0.99:1
Text.Fluent 372 376 0.99:1
BoxMinimalPerf.default 378 386 0.98:1
CheckboxMinimalPerf.default 2830 2900 0.98:1
ListWith60ListItems.default 633 645 0.98:1
TableManyItemsPerf.default 2068 2107 0.98:1
ToolbarMinimalPerf.default 969 989 0.98:1
TreeWith60ListItems.default 191 194 0.98:1
Button.Fluent 581 598 0.97:1
Slider.Fluent 1557 1609 0.97:1
IconMinimalPerf.default 701 740 0.95:1
RosterPerf.default 1156 1263 0.92:1

@size-auditor
Copy link

size-auditor bot commented Dec 10, 2020 •
edited

Asset size changes

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

Baseline commit: 7f659ff8d22cb6f0f352e7eefa04fda7b4fbd5b3 (build)

khmakoto
khmakoto approved these changes Dec 10, 2020
View reviewed changes
Copy link
Member

@khmakoto khmakoto left a comment •
edited

Choose a reason for hiding this comment

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

This looks good! Thanks for doing this!

@ecraig12345 ecraig12345 changed the title Joschemd/working Add create-component script and improve create-package Dec 10, 2020
dzearing
dzearing approved these changes Jan 11, 2021
View reviewed changes
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.

Looks pretty great!

xugao
xugao approved these changes Jan 11, 2021
View reviewed changes
...ate-component/templates/component/src/components/{{componentName}}/{{componentName}}.tsx.hbs Outdated Show resolved Hide resolved
...nent/templates/component/src/components/{{componentName}}/use{{componentName}}Classes.ts.hbs Outdated Show resolved Hide resolved
scripts/create-package/plop-templates-storybook/demo/index.tsx.hbs Outdated Show resolved Hide resolved
...nent/templates/component/src/components/{{componentName}}/use{{componentName}}Classes.ts.hbs Outdated Show resolved Hide resolved
...e-component/templates/component/src/components/{{componentName}}/use{{componentName}}.ts.hbs Outdated Show resolved Hide resolved
...nent/templates/component/src/components/{{componentName}}/use{{componentName}}Classes.ts.hbs Outdated Show resolved Hide resolved
...e-component/templates/component/src/components/{{componentName}}/use{{componentName}}.ts.hbs Outdated Show resolved Hide resolved
scripts/create-component/templates/storybook/{{componentName}}.stories.tsx.hbs Outdated Show resolved Hide resolved
ecraig12345
ecraig12345 requested changes Jan 12, 2021
View reviewed changes
Copy link
Member

@ecraig12345 ecraig12345 left a comment

Choose a reason for hiding this comment

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

Thanks for doing this, but there are some improvements I'd like to see before this goes in.

.vscode/launch.json Outdated Show resolved Hide resolved
scripts/create-component/create-component.ts Outdated Show resolved Hide resolved
scripts/create-component/create-component.ts Outdated Show resolved Hide resolved
scripts/create-package/plop-templates-storybook/demo/index.tsx.hbs Outdated Show resolved Hide resolved
scripts/create-component/templates/component/src/common/isConformant.ts Outdated Show resolved Hide resolved
...nent/templates/component/src/components/{{componentName}}/use{{componentName}}Classes.ts.hbs Outdated Show resolved Hide resolved
scripts/create-component/create-component.ts Outdated Show resolved Hide resolved
scripts/create-component/create-component.ts Outdated Show resolved Hide resolved
scripts/create-component/create-component.ts Show resolved Hide resolved
scripts/create-component/create-component.ts Show resolved Hide resolved
ecraig12345
ecraig12345 reviewed Jan 12, 2021
View reviewed changes
Copy link
Member

@ecraig12345 ecraig12345 left a comment

Choose a reason for hiding this comment

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

Some additional comments below. Really sorry about the delayed review here!! One thing that would help in the future would be to consider splitting changes touching multiple discrete areas into multiple PRs, in this case doing the create-package fixes and create-component addition separately (though to be fair I'm not always the best about this myself).

Of all these comments and the previous ones, I think the most critical to address before initial check-in is getting rid of the brackets in the filenames--as mentioned in a later comment about that, while it's technically allowed, it's almost certain to break something. The rest could potentially be addressed later.

scripts/create-component/create-component.ts Outdated Show resolved Hide resolved
scripts/create-component/create-component.ts Outdated Show resolved Hide resolved
scripts/create-component/create-component.ts Outdated Show resolved Hide resolved
scripts/create-component/create-component.ts Outdated Show resolved Hide resolved
scripts/create-component/create-component.ts Outdated Show resolved Hide resolved
scripts/create-component/templates/component/src/components/{{componentName}}/index.ts.hbs Outdated Show resolved Hide resolved
scripts/create-package/plopfile.ts Outdated Show resolved Hide resolved
scripts/create-package/plopfile.ts Outdated Show resolved Hide resolved
scripts/create-package/plopfile.ts Outdated Show resolved Hide resolved
scripts/create-package/plopfile.ts Outdated Show resolved Hide resolved
@joschemd joschemd mentioned this pull request Jan 26, 2021
Closed
@joschemd-MS
Update scripts\create-component\plop-templates-component\src\componen…
a655d40 
…ts\{{componentName}}\use{{componentName}}.ts.hbs
@joschemd joschemd merged commit 1670a00 into microsoft:master Jan 27, 2021
@joschemd joschemd mentioned this pull request Jan 27, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@xugao xugao xugao approved these changes

@khmakoto khmakoto khmakoto approved these changes

@layershifter layershifter layershifter left review comments

@dzearing dzearing dzearing approved these changes

@ecraig12345 ecraig12345 ecraig12345 approved these changes

@assuncaocharles assuncaocharles Awaiting requested review from assuncaocharles

@behowell behowell Awaiting requested review from behowell

@evlevy evlevy Awaiting requested review from evlevy

@hyoshis hyoshis Awaiting requested review from hyoshis

@Jacqueline-ms Jacqueline-ms Awaiting requested review from Jacqueline-ms

@JasonGore JasonGore Awaiting requested review from JasonGore

@joschect joschect Awaiting requested review from joschect

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar

@ling1726 ling1726 Awaiting requested review from ling1726

@lorejoh12 lorejoh12 Awaiting requested review from lorejoh12

@miroslavstastny miroslavstastny Awaiting requested review from miroslavstastny

@pompomon pompomon Awaiting requested review from pompomon

@Raghurk Raghurk Awaiting requested review from Raghurk

@wsmd wsmd Awaiting requested review from wsmd

Assignees

@ecraig12345 ecraig12345

Labels
Area: Build System
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
9 participants
@joschemd @fabricteam @dzearing @xugao @ecraig12345 @khmakoto @layershifter @msft-fluent-ui-bot @joschemd-MS