VSCode extension for automating spfx project upgrade tasks

[garrytrinder]

Currently the spfx project upgrade will generate a report of tasks for you to follow to upgrade your SharePoint Framework solution to a desired version of the framework.

Whilst this approach puts you in control of what changes you make to your project, when moving through many versions of the framework, say v1 to v1.10 this list can become quite daunting and results in substantial amount of copy and paste tasks to get to your desired outcome.

So as the framework develops and upgrading older projects to the latest version becomes a bigger task, what if there was a VSCode extension that automatically merges the changes from the report with your project?

We could have the extension display the list of report recommendations, displaying required and optional changes that you can make from within VSCode without having to switch between your code and the report.

Would this be of interest?

Ideas and suggestions welcome 😊

[waldekmastykarz]

This is a great idea. To keep things simple, the extension could take as input upgrade report generated by the CLI in JSON format and apply the necessary changes based on its contents. To allow undoing changes in case where the project isn't in source control, it could leave the changed files open and unsaved in the editor for the user to review.

Having done a number of project upgrades last weeks, I think it would be a great time saver, especially for larger projects with many components.

[garrytrinder]

I’ve just seen a really cool feature in VSCode called CodeTour, it’s currently in Preview but has a very interesting approach to code based tutorials, currently read only but might bridge the gap between what we have now and what we would like in the future.

https://twitter.com/lostintangent/status/1253338456027049989?s=21

[hugoabernier]

@garrytrinder @waldekmastykarz I tested using Code Tours to walk through an SPFx Project Upgrade command. It could be pretty sweet!

Here's what a full upgrade looked like:

[garrytrinder]

Oh man, that is awesome ❤️

[waldekmastykarz]

This is COOL! Do you have the code/instructions somewhere where we could give it a try?

[hugoabernier]

@waldekmastykarz you can download the sample project with a .tour report, ready to upgrade at https://github.com/hugoabernier/Office365CLI-tourpoc.

I tried to use the exam same information provided by the existing .json report. The only thing I did was to convert it to a .tour schema, and highlighted the affected line number (which is optional).

Let me know what you think!

[pkskelly]

We were thinking of using jupyter notebooks internally for some projects to ramp folks up, but then we saw CodeTour. But this takes it to another level! Love this!