Updates, changes and new aurelia plugins

Hello coders,

Today we’re releasing a stable version for almost all of our aurelia plugins, a couple new plugins and a preview-version of our new Node.js ORM wetland.

General changes

First we’ll be talking about general changes in our community. It has been growing, so we had to make a couple of changes.

Organisational changes

We’ve hired @doktordirk as our community manager. He’s responsible for answering issues, reviewing pull requests, answering questions on Gitter. A big, and finally public welcome to Dirk!

We’ve also assigned plugin owners to make sure that plugins keep moving forward. This has proven itself very useful and the plugins now have their own roadmaps (more on that later). @RWOverdijk as the lead developer is now focussed on the architecture and development of consistency.

Release schedule

We’ll no longer work with release candidates for as long as we have. The next versions will follow semver, and due to our new testing environment be rolled out a lot more frequent.

Big updates

The following is a summary of changes made to existing libraries.


  • Migration to npm and name changed spoonx/aurelia-api -> aurelia-api
  • Allow multipart/form-data and x-ww-form-urlencoded
  • Add findOne, updateOne,.. methods to allow for path/id?filter=some
  • Package for esNext/typescript , jspm/webpack/aurelia-cli


  • Migration to npm and name changed spoonx/aurelia-authentication-> aurelia-authentication
  • Package for esNext/typescript , jspm/webpack/aurelia-cli
  • Completely refactored for consistency. many parameters renamed. getter/setter for the old names ensure BC
  • AuthService.authenticated status automatically updated according to token ttl. including across tabs and optional auto logout page reload/redirect
  • Binding signal ‘authentication-change’
  • EventAggregator publishes ‘authentication-change’ with authenticated status data
  • Optional function can be set to customize data extraction from non-jwt
  • Refresh_token with optional auto-refresh
  • Auth0 support using auth0-lock
  • OIDC logout support
  • Updated provider defaults


  • Migration to npm and name changed spoonx/aurelia-orm-> aurelia-orm
  • Package for esNext/typescript , jspm/webpack/aurelia-cli
  • Association-select component much more customizable (translation, placeholder …)
  • Paged component added
  • Add generic metadata with the data decorator
  • Set an entities id property name with the idProperty decorator
  • Entity: Save new children and mark as dirty when children added or removed. (https://github.com/SpoonX/aurelia-orm/commit/37f6b515)
  • Added entity.reset(shallow)
  • Entity: setData with optional markClean (https://github.com/SpoonX/aurelia-orm/commit/ee01480)
  • Validation: upgrade to aurelia-validation 0.12+


  • Migration to npm and name changed spoonx/aurelia-notification-> aurelia-notification
  • Updated to new aurelia-i18n. BREAKING CHANGE: Cannot be used without aurelia-i18n anymore
  • Package for esNext/typescript , jspm/webpack/aurelia-cli

all plugins

  • Added gitbooks (https://plugin_name.spoonx.org/ e.g. https://aurelia-orm.spoonx.org)
  • All plugins are published on npm
  • Adding basic d.ts files for typescript users (typescript 2 install ready)
  • Made the plugins @easyWebpack ready
  • Added bundle instructions of jspm and aurelia-cli

New stuff

We’ve also been working on some new stuff! The author of each plugin wrote a little piece on it.


By @doktordirk and @RWOverdijk.

We needed a place to demo our plugins, and so we created swan-example.

SWAN is a nifty little stack, which stands for Sails Waterline Aurelia and Node. It comes with a cli tool, which isn’t much yet, but does help you define a project structure and get started quickly using our opinionated aurelia-skeleton and auth-ready node server. We’ve used this tool to build the swan-example, which you can see by clicking here.

  • Username: example
  • Password: example



By @bas080.

Components often require some HTML. We at SpoonX tend to use bootstrap for styling and templating. But we also want to make it easy for people that might use other CSS frameworks. Aurelia-view-manager allows you to easily overwrite the HTML template of components that use aurelia-view-manager’s @resolvedView decorator. If you want to make your component CSS framework independent, head over to the usage section.

Github | Docs


By @bas080.

Aurelia form makes your life easier by letting you define and generate forms based on data. It does so by using something named a schema.

A schema is a collection of objects that describes the form you want. The schema consists out of basic javascript data types which every programmer understands and knows how to manipulate. A simple example:

You can then use this schema and the object that holds the data like this:

<schema-form schema.bind="schema" model.bind="credentials"></schema-form>

This plugin is especially useful when combined with aurelia-orm, as it generates the form based on your entity schema using the custom component <entity-form />.

Github | Docs


By @VMBindraban.

Pager is a component that handles pagination for your application.

Beside the basic functionality of a paginator like setting amount of items for each page, it also supports:

  • Data from an array
  • Data from a resource (using aurelia-orm)
  • Criteria (using a resource with sailsjs/waterline or express)
  • Page range, for example 3 4 [5] 6 7
  • Your own custom template (defaults to bootstrap)



By @VMBindraban.

Aurelia-filter is an basic GUI criteria selector, it generates a search/filter criteria object. You can easily generate criteria based on AND or OR conditional blocks. Based on the field you have selected, it can transform the input field into the proper type, for example a number or date. It supports all the sailsJS/waterline operators. There is also support for entities (using aurelia-orm).



By @jeremyvergnas.

Datatable is probably one the most common components you can find within interactive applications. It allows you to have an overview of your data and manipulate them, in a user-friendly manner.

Aurelia-datatable has been made to provide you an easy and powerful way to implement datatables in your Aurelia application(s). In combination with aurelia-orm, aurelia-view-manager and aurelia-pager, you will get, out of the box, a datatable component ready to use, with the following features:

  • Custom columns (with aliases and value converter)
  • Sorting
  • Searching
  • Pagination
  • Custom criteria
  • Optional edit/remove actions on your rows
  • Custom actions on your rows
  • Custom footer on your datatable

Github | Docs


By @doktordirk.

With the increasing number of plugins, plugin initialization and configuration has become somewhat tedious. Currently, one might have something like this, a long list of plugins and their configs:

Using aurelia-config, that becomes easier and more organized. We have just have a single namespaced config object with all the configuration options and aurelia-config does all those plugin calls for us witch the appropriate namespace section. Here’s a simple example:

That’s the main feature of aurelia-config, but there’s more to it.

  • initialize and configure you plugins in one place with a single namespaced configuration object.
  • automatically load and merge defaults which can be directly loaded from plugins by aurelia-config itself.
  • access the merged config by using our resolver or injecting aurelia-config everywhere.
  • since the merged setting are an instance of homefront, all it’s method are available, too.


By @Rawphs.

Homefront is a module that allows you to merge, flatten, expand, search in, fetch from, remove from, put in and work with objects easily. It was started as an educational project but has made its way into wetland, aurelia-config and json-statham. It is fully tested, and makes working with objects a lot more fun.



By @bas080.

Aurelia-charts is a plugin that allows you to use the chart library you like most. It has a simple api and standardizes the way charts are used in your projects. It does so by letting others define sane defaults.

It allows for you to write your own plugins, or use an existing one (for example aurelia-charts-c3).

This project is being used by us, but isn’t labeled “stable” yet, as is visible by the lack of documentation.


Bonus: Wetland

By @RWOverdijk.

For the past two months we’ve been working on a brand new nodeJS orm. For now it lacks documentation, but has neat features. It’s based on the JPA spec (which took some reading) and took inspiration from the way doctrine implemented it. It obviously required some changes to fit the node.js world, but those were kept to a minimum.

A glossary of its features to date:

  • Abstracted principles (repositories, entities, hydrators)
  • Unit of work using proxies
  • Nested joins
  • Nested persist
  • Mapping
  • Transactions
  • Migrations
  • Great performance (smart hydrator and state management)
  • Strict typing (written in typescript)

Feel free to browse the code, and if you’re interested leave a star so you can track the progress.



We’re very happy with the work we’ve done. The plugins are stable and the documentation is clear.

  • If you have questions, suggestions or a need for banter, feel free to join us on gitter.
  • If you like our work, help us out and star our repositories.

Happy coding!

Release posts

Good day to you all!

This blog post is just the “hello world” of our new release posts. We have been working hard to provide quality modules for aurelia over the past six months, and we’re proud of what we’ve accomplished so far.
We’ve unified the structure of our repositories, including docs, tests, linters and more.

On top of a bunch of small utilities and repositories we’ve released, we’ve also created these:

These modules are being used, and are becoming more important. This all means it’s time to be more public about what’s going on with these repositories.

Starting with our next big release, we’ll be posting updates on this blog about what exactly it is we’re releasing. This includes migration guides, fixes, features and more.

That’ll be it for now. Until next time!

Aurelia orm restful apis

Today I released a new version of aurelia orm. You can find it here: https://github.com/SpoonX/aurelia-orm

The reason I built it, is because I was missing a nice, structured way of working with my Rest API resources. Sure, There are libraries out there like breeze. But in my opinion, they are huge and needlessly complex; which is exactly what I want to avoid.

Aurelia-orm adds some cool features like entity definitions, repositories, associations and validation. This makes it easier to organise, too, seeing how most logic can now be placed in repositories.

There’s plenty of documentation, so have fun!

PHPStorm / Webstorm plugin acejump

Fresh IDE, happy me

Today is a good day. I got to configure my IDE on a new machine, which is always a joy. I started setting up the basics such as code style, libraries, line numbers, eof newline etc and moved on to the plugins. To my surprise, very few people I work with seemed to be familiar with an amazing plugin called AceJump. This triggered me to write about it and try to better your IDEs one by one.

What is AceJump?

AceJump is a plugin by johnlindquist that allows you to jump your cursor through a file, by simple find and magic. The plugin itself has the following description:

General usage instructions
Hit “ctrl+;”, type a char, then select a char to jump to. When selecting the char “shift” will select the block between the cursor and char. You can toggle “target mode” by tapping “ctrl+;” again, which will select the word you jump to. You can remap the AceJump keyboard shortcut in File->Settings->KeyMap and search for “Ace Jump”. Right-click on it, then select a different shortcut.

The simplicity of the plugin, and the power it gives you makes it an important tool to have in your arsenal. More info about the plugin can be found in this youtube video by John: Ace Jump.

Where can I get it?

You can find the plugin by clicking here or by going to File->Settings->Plugins->Browse Repositories and searching AceJump.

Babel ES7 Leading decorators must be attached to a class declaration

If you ever find yourself seeing this error, the solution is very simple. Remove the semicolon behind your attributes.


As an example, here’s the (current) default app.js from Aurelia. I’ve introduced the bug on line 7.

Upon adding a semicolon behind your decorator (@inject(Router)) you’ll find yourself having above error. So, to fix the error simply remove the semicolon.

Q&A: Schema attribute sails.js models


What is the schema attributes inside models in sails


The schema attribute defines whether or not to enforce the schema.

Come again?

Relational databases tend to have a predefined schema (including what type can be stored, what the name of the column is etcetera). Whatever you insert, fetch or update has to adhere to that schema. Mongo, redis etc don’t have that. You can just insert whatever makes you happy. By setting schema to true, you’re forcing waterline to apply the same rules to schema-less adapters.

javascript dependency management

Hello fellow geek,

A while back, I wrote an article about javascript dependency management, explaining my discomfort with most options out there. I tried filling the void with something meaningful by creating useuses; a gulp plugin that adds zero extra bytes to your combined files but does add meaning to your individual files.

I came to realise, that this plugin was flawed in a couple of ways, so naturally I’ve fixed those flaws. And thus I stand here today to proudly present a new module that takes a different approach but still uses the same solution.


But before I do, I’d like to explain what @uses is supposed to mean, why I think it’s better and how it should be applied.

What’s @uses?

@uses is an annotation I’ve been using for a while now. It allows me to keep track of what dependencies my files have easily.

How do I use it?

Here’s what it looks like:

As you can see, it unobtrusively informs the developer about the dependencies being used by this particular file. So using it is really simple: just maintain the dependencies of your file in the annotations, and you’re already doing it.

So, why is it better?

The arguments I’ve presented in my previous blog post still stand. In summary:

  • It doesn’t add extra bytes
  • It doesn’t force a dependency upon you
  • It doesn’t use weird tags, or magic. Just an annotation.
  • I adds value to your files.


Like I mentioned earlier, I made quite some improvements to the module. Here are the biggest ones.

It’s not a grunt plugin anymore

The biggest flaw was that it forced you to use gulp. There was no standalone version, or alternative for let’s say gulp.~ Useuses itself is now a standalone module that can be used via the CLI, or programmatically.

This means it can be used in grunt, gulp, or any environment for that matter.

It’s faster

I’ve made improvements in the file searches, sorting of dependencies and making sure there aren’t any duplicates. These improvements have made this module a lot faster.

It’s lighter

The module does its job by utilising streams now, not buffering the entire file, for every file. This means that its memory footprint is a lot smaller.

Using it

You can find the module here:

Github: https://github.com/SpoonX/useuses NPM: https://www.npmjs.org/package/useuses

Sails.js count blueprint

I’ve been in need of a count blueprint for a while now, so I decided to just go ahead and make one. IF you want to use it, feel free. Here’s the code:

Documentation for everything

Hello fellow geeks!

Today I’d like to share a nice piece of software that has boosted my productivity by 200%. It’s a tool that allows you to download documentation from a lot of libraries, frameworks, programming / scripting languages, stack overflow, packagist and more. It’s called Dash (for mac) and Zeal docs for Windows / linux. For this post I will be talking about Dash specifically, but most of it also applies to zealdocs.

What it does

Like they say themselves:

Dash gives your Mac instant offline access to 150+ API documentation sets.

It integrates with the system (shortkey) and a lot of editors / other systems. As an example, in your editor, you can select some text (for instance, Angular’s $http) and push the shortkeys for Dash (defaults to cmd+shift+d), which will bring up the documentation on $http for angular.js. Are you writing php, and are you unsure on what strstr or stristr do? Select that, press the shortkeys and boom, documentation.

Like I said, it has documentation for a lot of things. Node.js, PHP, javascript, ruby, Zend Framework 2, Laravel, and much, much, much (I can keep going like this) much more.

It also supports Packagist and automatically builds documentation for all packages you wish to use, if there aren’t any. And it supports stackoverflow by downloading answered questions which you can search.


It’s offline, fast, has everything in one place and doesn’t force you to wait for the browser. It’s just cool. Check it out:

Mac: Dash

Windows/Linux: Zeal docs

Javascript censoring text

Yesterday I released a new module. I thought about it for a bit and decided to write about it.
The reason for this, is that I want to elaborate the reason for building this module, and at the same time perhaps supply a use-case to you.
I’m firmly against censoring anyone or anything, so I hope this module, if at all, gets used for the good.

Why I built it

We’re running and providing some very high-traffic communications services, one of them being chat.
The chat doesn’t allow you to share contact information (for security purposes) and so we needed a way to both sensor occurrences, and be notified whenever it happened.
When receiving notifications we also wanted to see the offending matches highlighted, and for that reason, I’ve added the highlight functionality.

The module was built with performance (regex, rather complex can become a slowing factor on high traffic messaging systems) and ease of use in mind.
It’s not rocket science, so it doesn’t need a freakishly large and complicated engine.

And thus, behold, the censoring module was born.

First, some code

Code speaks more than… Me. So here’s an example:

What it does

The module is compact, but does what it should do very well. What it does:

  • Supply a default set of filters
  • Supply the possibility to censor words
  • Supply the possibility to highlight matches (found abuses)
  • Detect words, even if they’ve b33n 13373d…
  • or s.p.l-i*t up.

What it doesn’t

To make sure you don’t get the wrong idea, I want to clear up some (already) misconceptions.

  • It doesn’t censor a predefined set of words.
  • It doesn’t actually censor by default.
  • It doesn’t swap words.

Where can I find the module?

Github: https://github.com/SpoonX/Censoring

NPM: https://www.npmjs.org/package/censoring

Installation is simple:

npm install --save censoring

©SpoonX 2016