0 comment

PnP/SPFx Version 1.3.0 released – Check your project version on the fly

Right before the launch of the first version of PnP/SPFx I had a longer chat with a friend of mine Thomas Goelles, and he pointed out that it is great to be able to re-run the generator to add more web parts using a specific version of a framework. There was one fact that we haven’t thought about or maybe overlooked. What happens when the current project setup does not support the required version yet?

Evergreen SPFx project - Version 1.3.0 relased

The previous version had merely a blocking mechanism implemented that checked if the current project was created using version 1.6.

In this new version, the behaviour has changed through the help of the Office 365 CLI and support of Waldek Mastykarz. Instead of just blocking you from using the generator on an old project we provide you guidance to upgrade to the latest release.

Your project needs an upgrade when you run it on an existing project

Your project needs an upgrade when you run it on an existing project

Now when you execute yo @pnp/spfxthis check your existing project and save the upgrade guide to the root folder of your project as a markdown file.

Some background information for developers. We do not execute the CLI from the project via the console instead of the Office 365 CLI is used more like an API. The CLI uses TypeScript compiled to JavaScript; this makes it possible to consume any command form any JavaScript-based application.

Testing improvement

The older versions of the generator already have been tested with the Mocha framework. There were two problems related to these tests. These analyses required some manual love. SPFx with its multiple frameworks and additional libraries that kind of writing tests wasn’t something built for the future. Current there is support for the following framework included:

  • ReactJS, KnockoutJS, no framework
  • Handlebars
  • VueJS

On top of these is we offer to choose from additional libraries.

  • jQuery Version 2 or Version 3
  • @pnp/pnpjs
  • React reusable property panes

Finally, the generator includes choosing one of these assets supported by SPFx.

  • Web Part for on-premises and SharePoint Online
  • Application Customizer
  • ListView Customizer
  • Field Customizer

These options allow many permutations and a different setup for a new and existing project. All tests against the SPFx framework are now running in a single test, that creates currently 260 different projects and checks 2583 different project aspects. One test with all the aspects runs for about 40 seconds on my MacBook locally and may vary on other devices. All tests use the Mocha testing framework. On top of that, we created a special test bench, test runner and basic reusable test case suite.

All tests passed all good

All tests passed all good

Special thanks in this version

Thomas Goelles (@thomyg) for pointing out the gap in the generator.Waldek Mastykarz (@waldekm) for support to make the integration of the Office CLI happen.Paweł Hawrylak – (@pawelhawrylak) for constant support on issue list and PRs. Allen (Github user: brooksca) for pointing out an issue.

You don’t have to be a developer to support this SharePoint and Office 365 Pattern and Practices project. If you have questions, concerns or like to share your feedback. Please create an issue or reach out to us on Twitter.

Thank you for your support!

Sharing is caring – Stay tuned for further updates

Final note: To update or install

npm install -g @pnp/generator-spfx@latest

And start your engines using with:

Yo @pnp/spfx

on new or existing projects.

🖤 Love to hear your feedback !!! 🖤

Leave a Reply

Required fields are marked *.

This site uses Akismet to reduce spam. Learn how your comment data is processed.