Search code examples
ecmascript-6traceur

How can i access field annotations in traceur atscript


// Options: --annotations --array-comprehension --async-functions --debug --debug-names --exponentiation --free-variable-checker --generator-comprehension --low-resolution-source-map --input-source-map --member-variables --module-name --referrer --require --script --symbols --types --validate 

//annotation class
class Template{
    value:string;
    constructor(value:string){
        this.value = value;
    }
}

//annotation class
class Attribute{}

@Template('<div>xxx</div>')
class SomeEl{
    @Attribute counter:int=0;
    constructor(){}
}


(function main(){
    console.log(SomeEl.annotations);
    console.log(SomeEl.properties); //prints undefined
})();

How can i access field annotations in atscript? i am only able to access class annotations but not field annotations witin a class, would appreciate your help

the above gets transcoded into

$traceurRuntime.options.symbols = true;
var Template = function Template(value) {
  "use strict";
  this.value = value;
};
($traceurRuntime.createClass)(Template, {}, {});
Object.defineProperty(Template, "parameters", {get: function() {
    return [[$traceurRuntime.type.string]];
  }});
var Attribute = function Attribute() {
  "use strict";
};
($traceurRuntime.createClass)(Attribute, {}, {});
var SomeEl = function SomeEl() {
  "use strict";
  this.counter = 0;
};
($traceurRuntime.createClass)(SomeEl, {}, {});
Object.defineProperty(SomeEl, "annotations", {get: function() {
    return [new Template('<div>xxx</div>')];
  }});
(function main() {
  console.log(SomeEl.annotations);
  console.log(SomeEl.properties);
})();

and i don't see that considered the @Attribute annotation of filed counter


Solution

  • There are a couple of things going wrong here, annotations on the constructor are the same as annotations on the class.

    @Template('<div>xxx</div>')
    class SomeEl{
       @Attribute
       constructor(){}
    }
    

    The above translates into into:

    Object.defineProperty(SomeEl, "annotations", {get: function() {
      return [new Template('<div>xxx</div>'), new Attribute];
    }});
    

    Notice that annotations on the constructor are the same as annotations on the class. An annotation on any other function will place the annotation on that function, but the constructor and class are essentially the same.

    The reason new Attribute never showed up in the annotations is likely your counter: int and semicolon (;). You're confusing another concept of AtScript, which is parameter annotations. These are written like so:

    @Template('<div>xxx</div>')
    class SomeEl{
        constructor(counter: int){}
    }
    

    This translates into the following, which is what I believe you want:

      var SomeEl = function SomeEl(counter) {};
      ($traceurRuntime.createClass)(SomeEl, {}, {});
      Object.defineProperty(SomeEl, "annotations", {get: function() {
          return [new Template('<div>xxx</div>')];
        }});
      Object.defineProperty(SomeEl, "parameters", {get: function() {
          return [[int]];
        }});
      return {};