Announcing NGXS 3.3

Photo by NASA on Unsplash

NGXS 3.2 was released in July this year and the community has been growing at a rapid pace over the past few months. Since then we have been very busy answering questions, having many discussions about what direction we want to take the framework and adding a number of features and bug fixes. We are very excited to announce the long awaited NGXS version 3.3 release today!

NGXS Labs

There is definitely no lack of enthusiasm for the NGXS project and as a result there has been a proliferation of pull requests to add new features to the framework. This is very exciting but at the same time has been one of the big challenges. How do we incorporate the growing innovation around the framework and experiment with different ideas without compromising the stability and comprehensibility of the core framework? In response to this we have created NGXS Labs.

The NGXS Labs github organisation can be found here: https://github.com/ngxs-labs

The idea with this github organisation is to provide a place for the community to create libraries that augment the main framework with functionality that does not need to be integrated directly into the framework and therefore can evolve through their initial iterations of experimentation without affecting the main @ngxs/store library. Once a project in the labs space has stabilised, has received significant adoption and is accepted as a recommended approach then it can be moved to the ngxs github organisation.

From time to time we will be posting about projects that have been started under the ngxs-labs organisation to get community involvement and feedback around them. The details of some of the current projects in the labs can be found here: https://ngxs.gitbook.io/ngxs/ngxs-labs/intro

One of the labs projects that has been receiving a lot of attention is the emitter package. It can be found here: https://github.com/ngxs-labs/emitter

Angular 7 Support

We upgraded the dependencies of the framework to ensure that it will work with Angular 7. There were essentially no changes required to support this new version. Kudos to the Angular team for the easy upgrade. With NGXS 3.3 your npm will not complain anymore about mismatched peer dependencies. Along with this comes an upgrade of the core library to TypeScript 3.1 which will enable some great typing safety features into the future. We have also made sure that the typing definitions produced after the upgrade are version compatible with TypeScript 2.x for those who do not have the luxury of upgrading quickly.

[ PR #615 ]

Support for Strict Content Security Policy

NGXS is being used by some large clients with strict security policies for their published websites. Unfortunately one of the performance optimisations in the core library code violated pages that have been set to use a strict content security policy. This policy is activated in the page head like this:
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
This html meta setting disallows the use of dynamic javascript code like eval(...) or new Function(' return ...;') which has been used in the core library to create the fastest root state tree selectors possible. In order to support the strict policy we have added a compatibility flag that allows the user to optionally downgrade this optimisation to a property accessor enumeration that leverages a reducer to retrieve the property value. The performance impact of this change is relatively small, but is the price that must be paid for the strict security policy. The compatiblity setting is configured in the NgxsModule.forRoot options like this:

The default for this setting is false so that the average user takes advantage of the performance benefits of the dynamically generated property getters.

[ PR #569 ]

Plugin Improvements

The form plugin has received some improvements around handling arrays:

• The path to the form that has been bound to the state using the form plugin directive can now refer to a path that includes an array index. For example: myState.todos.1.form. This will allow for multiple forms to be bound to different indexes of an array to handle use cases that require multiple indexed forms. [ #587 ]
• The form plugin can now handle the case where you have included a FormArray in the form that you are binding to. [ #659 ]

The other plugins have also received some love:

• Feature: Devtools plugin support for ‘IMPORT_STATE’ [ #507 ]
• Fix: Storage Plugin should handle undefined [ #538 ]
• Fix: Expose Websocket Plugin WebsocketMessageError action [ #504 ]

What else landed?

Have a look at the changelog to view other changes included in this release.

What is next?

We have some exciting things planned for the next release. You can keep track of them here: https://github.com/ngxs/store/milestone/6

PS. We are currently testing our own NGXS Schematics and will be releasing them soon. Stay tuned!