Using decorators (binding, observable, etc.) as functions

I’m working on a solution for drop-in script for some of our projects that are just a single view and want to take advantage of aurelia’s view engine (without transpilers like babel). I have all working fine but I don’t know how to handle the decorators. Anyone have any examples of using decorators, like @bindable in a function so I can use this in vanilla JS without transpilers?

example code I’m using…

const { observable, bindable } = au; // loaded via aurelia-script (umd)

export class Component {
    message = 'my component';
    bindableProp = 'foo'; // using in attr <component test="my val"></component>
    observableProp = 'bar'; // observe using naming convention below

    observablePropChanged(newVar, oldVar) {
        console.log('newVar: ', newVar, 'oldVar: ', oldVar);
1 Like

there is an ongoing issue about this Simple Data-Binding-Only flavor of Aurelia 2 · Issue #1312 · aurelia/aurelia · GitHub