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

Add new codemods package #13884

Merged
merged 32 commits into from
Jul 8, 2020
Merged

Add new codemods package #13884

merged 32 commits into from
Jul 8, 2020

Conversation

joschect
Copy link
Contributor

@joschect joschect commented Jul 1, 2020

Pull request checklist

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

Description of changes

Adds the basis for codemods. Work that this completes:

  • Searches for codeMod files, loads and runs them
  • Searches for tsconfig files, and loads them to get the files on which codemods should run
  • Sets up for filtering codemods based on some criteria TBD
  • Adds the majority of the import-to-compat codemod
  • Sets up a framework for defining new codemods.

The primary files to focus on are upgrade.ts and runnerUtilities. These setup the framework for how codemods will run. Additional work still needs to be done to:

  • Add logging
  • Add more filtering to tests
  • Break out functions into utilities.

Focus areas to test

(optional)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 1, 2020

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

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration

@size-auditor
Copy link

size-auditor bot commented Jul 1, 2020

Asset size changes

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

Baseline commit: b4adf81c515bd8fcee8264da0dd93d23f881f3cd (build)

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Jul 1, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 835 825 5000
ButtonNext mount 508 544 5000
Checkbox mount 1421 1406 5000
CheckboxBase mount 1132 1176 5000
CheckboxNext mount 1374 1418 5000
ChoiceGroup mount 4447 4518 5000
ComboBox mount 814 805 1000
CommandBar mount 6991 6836 1000
ContextualMenu mount 12007 11961 1000
DefaultButton mount 990 980 5000
DetailsRow mount 3201 3289 5000
DetailsRowFast mount 3179 3121 5000
DetailsRowNoStyles mount 3146 3077 5000
Dialog mount 1378 1359 1000
DocumentCardTitle mount 1617 1631 1000
Dropdown mount 2288 2292 5000
FocusZone mount 1673 1625 5000
IconButton mount 1536 1576 5000
Label mount 290 305 5000
Link mount 388 398 5000
LinkNext mount 395 415 5000
MenuButton mount 1295 1308 5000
Nav mount 3204 2922 1000
Panel mount 1297 1276 1000
Persona mount 736 760 1000
Pivot mount 1295 1359 1000
PivotNext mount 1226 1266 1000
PrimaryButton mount 1111 1187 5000
SearchBox mount 1166 1156 5000
SearchBoxNext mount 1171 1172 5000
Slider mount 1352 1509 5000
SliderNext mount 1720 1767 5000
Spinner mount 396 381 5000
SplitButton mount 2865 2865 5000
Stack mount 480 483 5000
StackWithIntrinsicChildren mount 1749 1766 5000
StackWithTextChildren mount 4568 4430 5000
TagPicker mount 2524 2529 5000
Text mount 389 385 5000
TextField mount 1292 1256 5000
ThemeProvider mount 2774 2720 5000
ThemeProvider virtual-rerender 493 477 5000
Toggle mount 786 801 5000
ToggleNext mount 732 747 5000
button mount 103 96 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.37 0.45 0.82:1 2000 749
🦄 Button.Fluent 0.1 0.17 0.59:1 5000 481
🔧 Checkbox.Fluent 0.58 0.29 2:1 1000 581
🦄 Dialog.Fluent 0.13 0.19 0.68:1 5000 670
🔧 Dropdown.Fluent 2.98 0.4 7.45:1 1000 2975
🔧 Icon.Fluent 0.13 0.05 2.6:1 5000 636
🦄 Image.Fluent 0.06 0.1 0.6:1 5000 311
🔧 Slider.Fluent 1.46 0.31 4.71:1 1000 1460
🔧 Text.Fluent 0.06 0.02 3:1 5000 300
🦄 Tooltip.Fluent 0.09 15.39 0.01:1 5000 432

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 152 126 1.21:1
HeaderSlotsPerf.default 787 686 1.15:1
Text.Fluent 300 273 1.1:1
RefMinimalPerf.default 189 174 1.09:1
TextMinimalPerf.default 303 279 1.09:1
HierarchicalTreeMinimalPerf.default 378 350 1.08:1
ImageMinimalPerf.default 333 308 1.08:1
AnimationMinimalPerf.default 358 339 1.06:1
ChatMinimalPerf.default 537 508 1.06:1
GridMinimalPerf.default 295 278 1.06:1
MenuMinimalPerf.default 763 721 1.06:1
TextAreaMinimalPerf.default 410 386 1.06:1
HeaderMinimalPerf.default 313 297 1.05:1
LoaderMinimalPerf.default 688 653 1.05:1
ProviderMinimalPerf.default 795 760 1.05:1
RadioGroupMinimalPerf.default 360 344 1.05:1
StatusMinimalPerf.default 616 588 1.05:1
TreeMinimalPerf.default 798 759 1.05:1
MenuButtonMinimalPerf.default 1354 1301 1.04:1
AttachmentSlotsPerf.default 1024 999 1.03:1
ChatWithPopoverPerf.default 412 399 1.03:1
FormMinimalPerf.default 335 325 1.03:1
ListNestedPerf.default 798 776 1.03:1
ListWith60ListItems.default 997 967 1.03:1
PortalMinimalPerf.default 109 106 1.03:1
CarouselMinimalPerf.default 405 399 1.02:1
InputMinimalPerf.default 939 921 1.02:1
ListCommonPerf.default 867 851 1.02:1
SplitButtonMinimalPerf.default 3394 3315 1.02:1
VideoMinimalPerf.default 560 547 1.02:1
Icon.Fluent 636 623 1.02:1
Image.Fluent 311 306 1.02:1
Slider.Fluent 1460 1431 1.02:1
DropdownManyItemsPerf.default 1254 1245 1.01:1
ItemLayoutMinimalPerf.default 1082 1075 1.01:1
ProviderMergeThemesPerf.default 1698 1681 1.01:1
TableManyItemsPerf.default 2034 2004 1.01:1
Checkbox.Fluent 581 575 1.01:1
AlertMinimalPerf.default 271 270 1:1
AvatarMinimalPerf.default 433 432 1:1
BoxMinimalPerf.default 297 298 1:1
CardMinimalPerf.default 480 478 1:1
ChatDuplicateMessagesPerf.default 382 383 1:1
DividerMinimalPerf.default 297 298 1:1
SegmentMinimalPerf.default 283 283 1:1
TooltipMinimalPerf.default 673 675 1:1
Button.Fluent 481 481 1:1
Dropdown.Fluent 2975 2966 1:1
DialogMinimalPerf.default 667 672 0.99:1
EmbedMinimalPerf.default 1704 1719 0.99:1
FlexMinimalPerf.default 242 244 0.99:1
LayoutMinimalPerf.default 346 350 0.99:1
ListMinimalPerf.default 422 428 0.99:1
CustomToolbarPrototype.default 3348 3374 0.99:1
ButtonMinimalPerf.default 141 144 0.98:1
DropdownMinimalPerf.default 3006 3060 0.98:1
PopupMinimalPerf.default 577 590 0.98:1
TreeWith60ListItems.default 188 191 0.98:1
SliderMinimalPerf.default 1430 1475 0.97:1
IconMinimalPerf.default 597 613 0.97:1
ToolbarMinimalPerf.default 806 835 0.97:1
Dialog.Fluent 670 688 0.97:1
AccordionMinimalPerf.default 125 130 0.96:1
ButtonSlotsPerf.default 512 536 0.96:1
CheckboxMinimalPerf.default 2503 2595 0.96:1
Tooltip.Fluent 432 452 0.96:1
ReactionMinimalPerf.default 312 327 0.95:1
TableMinimalPerf.default 341 359 0.95:1
LabelMinimalPerf.default 341 364 0.94:1
Avatar.Fluent 749 793 0.94:1

packages/codemods/README.md Outdated Show resolved Hide resolved
packages/codemods/README.md Outdated Show resolved Hide resolved
packages/codemods/README.md Show resolved Hide resolved
packages/codemods/src/codeMods/ICodeMod.ts Outdated Show resolved Hide resolved
packages/codemods/src/codeMods/ICodeMod.ts Outdated Show resolved Hide resolved
packages/codemods/src/codeMods/ICodeMod.ts Outdated Show resolved Hide resolved
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.

Left some comments but for the rest, I'd appreciate if we could do a call where you walk through how various parts of the project and tests are intended to work. (it's a lot of code to try to understand at once)

packages/codemods/README.md Outdated Show resolved Hide resolved
packages/codemods/README.md Outdated Show resolved Hide resolved
packages/codemods/README.md Outdated Show resolved Hide resolved
packages/codemods/README.md Outdated Show resolved Hide resolved
packages/codemods/README.md Show resolved Hide resolved
packages/codemods/src/codeMods/ICodeMod.ts Outdated Show resolved Hide resolved
packages/codemods/src/codeMods/ICodeMod.ts Outdated Show resolved Hide resolved
packages/codemods/package.json Outdated Show resolved Hide resolved
Comment on lines 164 to 170
replacePersonaImport(file);
replaceIPersonaPropsImport(file);
replacePersonaSizeImport(file);
renamePrimaryTextProp(file);
renameRenderCoin(file);
Copy link
Member

@dzearing dzearing Jul 6, 2020

Choose a reason for hiding this comment

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

These right here; in my suggestion above, could these be just replacement types in a config?

Some of them probably not. E.g. renameRenderCoin finds Persona jsx elements and renames onRenderCoin to onRenderAvatarCoin (which I think is wrong btw.)

Copy link
Member

Choose a reason for hiding this comment

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

So, you may need a custom type which does some sort of manual work programatically. But whatever we can do to simplify and keep the codemod data driven is good.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is more of a proof of concept for right now that I should make more clear.

As for the config, we could potentially allow some of these to take in a json blob. For the start we should get the api of the functions correct. Trip and I are working on that.

packages/codemods/package.json Outdated Show resolved Hide resolved
packages/codemods/src/command.ts Show resolved Hide resolved
packages/codemods/src/command.ts Show resolved Hide resolved
packages/codemods/src/command.ts Show resolved Hide resolved
});

it('correctly repaths from index', () => {
const file = project.getSourceFileOrThrow('ImportsStuff.tsx');
Copy link
Member

Choose a reason for hiding this comment

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

I'm having trouble understanding what some of the rest of these do too, since you're using fake files which don't actually reference OUFR.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's making sure that the utilities/each individual piece does the job that it's supposed to do. That way when they all get put together it will work as expected.

Copy link
Member

Choose a reason for hiding this comment

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

Part of what I meant by that was that it would be helpful to have more comments explaining what each one does. And I'm still having trouble how it works with fake files which don't actually reference OUFR.

const tVal = val as InterfaceDeclaration;
const struct = tVal.getStructure();
expect(
(struct.extends as string[])?.some(str => {
Copy link
Member

Choose a reason for hiding this comment

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

What happens if struct.extends isn't defined?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It has to be defined, at least that's a guarantee when you call getStructure()

Copy link
Member

Choose a reason for hiding this comment

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

In that case can you use ! instead of ?

packages/codemods/README.md Outdated Show resolved Hide resolved
packages/codemods/README.md Outdated Show resolved Hide resolved
packages/codemods/README.md Outdated Show resolved Hide resolved
packages/codemods/README.md Outdated Show resolved Hide resolved
packages/codemods/README.md Outdated Show resolved Hide resolved
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
Co-authored-by: Xu Gao <xugao0131@hotmail.com>
@joschect joschect merged commit 4099ffe into microsoft:master Jul 8, 2020
@msft-github-bot
Copy link
Contributor

🎉@fluentui/codemods@v0.2.0 has been released which incorporates this pull request.:tada:

Handy links:

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

7 participants