Article
0 comment

PnP/SPFx 1.6.0-beta1 published – StyleLint, Webpack Bundle Analyzer, Jest Testing and more

Today I published the first beta version of the upcoming PnP/SFPx version 1.6.0. It is the most significant releases since the launch of the Angular Elements support for SPFx.

@pnp/spfx-beta1

Instead of adding new frameworks at the moment this release focuses more on your development workflow. There are updates included that helps you to write cleaner code, reduce bundle sizes and last but not least helps you on testing your ReactJS projects.

StyleLint

StyleLint is a mighty, modern linter that helps you avoid errors and enforce conventions in your styles. If you already implemented in your company coding guidelines for CSS or SASS. This tool helps you on vetting your styles used in your web parts.

Stylelint Demo and rules

If this sounds like the perfect option, you were already looking for please check out their website, on stylelint.io for full-featured documentation.

Thanks to Sergei Sergeev who implemented the setup in this version.

Jest – Delightful JavaScript Testing

You maybe heard about this testing framework from Elio Strufys blog on unit testing in SPFx. Recently Andrew Connell also wrote a blog post on how to enable Jest in the SharePoint framework. He also published three npm packages that make it easier through so-called Jest presets to enable it for ReactJS on any project. SharePoint framework support ReactJS 15 and ReactJS 16. For testing, you need to make specific configurations according to the used ReactJS version which can be tricky to figure out for any new project. Through the integration in the generator, everything is set up automatically with every new React project.

Webpack Bundle Analyzer

On docs.microsoft.com you find excellent documentation on how to optimise your build for production. This article describes what the best approach is to include third-party APIs and how to identify those. Through a tool named Web Pack Bundle analyser, this can be a, and you can validate your bundle size continuous during development. You can follow the steps to set up the described components and add gulp tasks to your project every time manually or use PnP/SPFx for a ready-to-go setup. A thank goes to Mikael Svenson who came up with this idea.

ReactJS+ and Knockout+ generators

When you start using this beta version now, you find some additional, air quote, frameworks named ReactJS+ and KnockoutJS+. The plus sign should indicate that there is more to that than use the bare bone ReactJS and Knockout projects.

ReactJS and Knockout Plus

Back in the previous versions we only had to deal with dependency injection in the ‘package.json’ files. To make use of the Web Pack Bundle Analyser and the Style Linter we also need to add custom gulp task in the gulp file too. To make it less complicated, I decided to create two new generators that still use the @microsoft/SharePoint generators but also have individual generators that handle the code injection in the gulp file. Even if it is named now React+ and Knockout+, in the end, you get 100% SharePoint Framework compliant projects but with some extra benefits. In the upcoming pnp/spfx final version 1.6.0, I remove the support for ReactJS and Knockout without extras because they are from my point of view not needed anymore. We would love to hear your views, thoughts and concerns.

Please share your feedback

If you run into any issue testing this beta version, please open a ticket on the issue list. Version 1.6.0 is going to be from my point of view the largest in case of changes in the generator, and we highly rely on your valuable feedback.

Automated Test result of pnp/SPFx testing

We have more than 20000 automated test running, but there are still some things that sadly cannot be covered by those tests.

Thank you very much and always remember – Sharing is caring.

Try it:

npm install -g @pnp/generator-spfx

To test run using npx:

npx -p yo -p @pnp/[email protected] yo @pnp/spfx

@pnp/spfx on Github
Documentation of @pnp/spfx

Leave a Reply

Required fields are marked *.


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