erik lieben

Erik Lieben software developer @Effectory

Creating a typed version of Aurelia’s computedFrom decorator with Typescript

When using the computedFrom decorator in Aurelia, you currently need to specify the fields it depends upon using strings. Which is useful, because in Aurelia you could create a field/ property that is only defined in the view and not in the ViewModel. Now if you are using TypeScript and are very used to things being typed, you might not like these strings, because they could contain typos. In version 2.1 of TypeScript, the keyof index type query was introduced which allows us to force a string to equal one of the member names of an object. With this new feature, we can make the computedFrom decorated typed.

When using the computedFrom decorator in Aurelia, you currently need to specify the fields it depends upon using strings. Which is useful, because in Aurelia you could create a field/ property that is only defined in the view and not in the ViewModel.

Now if you are using TypeScript and are very used to things being typed, you might not like these strings, because they could contain typos.

In version 2.1 of TypeScript, the keyof index type query was introduced which allows us to force a string to equal one of the member names of an object. With this new feature, we can make the computedFrom decorated typed.

read more...

Using SVG in Aurelia with a inline SVG custom element

Maintaining a significant portion of inline SVG in your HTML pages isn't the most fun task and most of the times won't help you to understand your HTML code quickly. Dwayne Charrington found a great solution for this problem by creating a custom element that replaces itself with external SVG (Inline SVG custom element for Aurelia). This is a very easy to use solution and works great! In my use case I also needed my SVG image to respond to changes in my application / modify it with bindings in Aurelia, which isn't possible (or I don't know how to do it :-)). I've played around a bit and came up with the following modification to resolve this specific case. I extended his idea and made it possible to, for example, bind to the attributes of a given SVG object or repeat a given SVG object with a repeat.for.

Maintaining a significant portion of inline SVG in your HTML pages isn't the most fun task and most of the times won't help you to understand your HTML code quickly.

Dwayne Charrington found a great solution for this problem by creating a custom element that replaces itself with external SVG (Inline SVG custom element for Aurelia). This is a very easy to use solution and works great! In my use case I also needed my SVG image to respond to changes in my application / modify it with bindings in Aurelia, which isn't possible (or I don't know how to do it :-)).

I've played around a bit and came up with the following modification to resolve this specific case. I extended his idea and made it possible to, for example, bind to the attributes of a given SVG object or repeat a given SVG object with a repeat.for.

read more...

Using tslib for TypeScript 2.1 with Aurelia to save bandwidth

The [TypeScript release notes for version 2.1](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html) contains an interesting section named ‘Support for external helpers library (tslib)’. This new feature allows you to use require.js to get the polyfills or helper functions that are normally generated by TypeScript in each file to support backward compatibility (using ESnext features supported by TypeScript, but not yet by all browsers).

The TypeScript release notes for version 2.1 contains an interesting section named ‘Support for external helpers library (tslib)’. This new feature allows you to use require.js to get the polyfills or helper functions that are normally generated by TypeScript in each file to support backward compatibility (using ESnext features supported by TypeScript, but not yet by all browsers).

read more...