Dart Angular 2 annotation how do they work?

Question

I'm currently playing with the Dart version of Angular 2.

I have seen that the library is using a lot of Metadata as @Component for example.

I would like to know how are those directives working?

I went on http://www.darlang.org. They explain how to define an annotation but not how to use it to construct an object as it is done in angular.io.

Could someone explain how the magic is working?

Answer 1

In Dart annotations by itself don't do anything than exist beside the code element where they are added.

At runtime:

You can use dart:mirrors to query the imported libraries for elements like fields, functions, classes, parameters, ... for these annotations.
dart:mirrors is discouraged for browser applications. In this case you can use the reflectable package with quite similar capabilities.

See also:

• https://www.dartlang.org/articles/reflection-with-mirrors/
• https://api.dartlang.org/1.14.1/dart-mirrors/dart-mirrors-library.html
• https://stackoverflow.com/search?q=%5Bdart-mirrors%5D+annotations

At buildtime

You can create a transformer and register it in pubspec.yaml to be run by pub serve and pub build.
In this case the Dart analyzer can be utilized to query the source files for annotations and, like Angular does, modify the source code in a build step to add/replace/remove arbitrary code.

For more details about transformers
- https://www.dartlang.org/tools/pub/assets-and-transformers.html
- https://www.dartlang.org/tools/pub/transformers/
- https://www.dartlang.org/tools/pub/transformers/examples/ - https://www.dartlang.org/tools/pub/transformers/aggregate.html - https://pub.dartlang.org/packages/code_transformers