For years, I wanted the ability to use variables as object keys in Javascript. Thanks to ES2015, we got the ability to have computed object keys from within the object definition itself. This isn’t a new or cutting-edge addition, we’ve had it in Javascript for a while now and it is well-supported. The reason for …
Javascript
If/else In Aurelia Using The “else” Attribute
Did you know Aurelia introduced an else attribute a while ago which allows you to do if/else statements in your views complete with support for animation? If you have been working with Aurelia for more than a few months, then you probably have been working with if/else statements by using multiple if.bind attributes in your …
How To Convert FormData To JSON Object
Recently, whilst working on a project I needed to take HTML FormData and then convert it to JSON to be sent off to an API. By default the FormData object does not work in the way you would want it to for JSON. Using the for..of syntax introduced in ECMAScript 2015, we can access the …
Webpack Support Lands In Aurelia CLI
I have been waiting for this day to come for a long time now: the Aurelia CLI now supports scaffolding Webpack applications from scratch. My biggest gripe with the skeletons the Aurelia team provide is they have a lot of stuff in them I have to remove for every new project. Admittedly, the skeletons serve …
Checking If a View Slot Is Defined In Aurelia
Aurelia supports the <slot> element provided via the HTML Web Components specification, which allows you to define placeholders in your HTML that can be replaced. A lot of examples around seem to wrap a slot with a DIV, perhaps a class. The issue with this approach is if you have a styled DIV wrapping a …
Get Root $index Value From Within Nested Aurelia Repeaters
Recently in an Aurelia project, I was working with nested repeaters (3 levels deep). The problem was I needed to get the $index from the top level repeater (so, level one). Instinctively, I presumed that you could do this: $parent.$parent.$parent.$index This does not work. The $parent variable only extends to the parent and cannot be …
Aurelia Routing + Switching Root Using setRoot
In your Aurelia applications, you might have two or more roots defining different entry points into your application. I personally create a public facing root which has public routes and an auth protected shell which has routes for logged in users only. Let’s say for this example you have two roots: publicRoot and privateRoot. Your …
Module ES2015 and TypeScript 2.4 Dynamic Imports
Introduced in TypeScript 2.4 is support for the ECMAScript dynamic imports feature. If you didn’t see the announcement or read it properly, you’re probably here because you’re getting the following error. In my case I use Webpack and I was trying to add in some dynamic import goodness and getting this error: Dynamic import cannot …
Auth Protected Routes in Aurelia With Firebase
sing both Aurelia and firebase together is exceptionally convenient for my workflow. When it comes to authentication, I have certain routes I want to protect. The best way to add in authentication checks for routes in Aurelia is to create a router pipeline step. Specifically, an authorise pipeline step. Because of the way Firebase uses …
Aurelia Dynamic Compose + Webpack = Module ID Not Found
If you’re using the latest and greatest Webpack plugin for Aurelia, there is a possibility if you use the <compose> element to dynamically render UI you will run into an issue where Webpack doesn’t know about the dynamic imports. Specifically, I am talking about usage of <compose> that might look like the following: <template> <compose …
