Using polymer mixins

Polymer Mixin

Mixins are a power feature of the polymer framework that allows to share code and behavior across multiple element types.

Unfortunately even if dart has a similar language feature at the moment there’s no way to define a Polymer mixin using Dart language mixin (see here for more details).

Because of that we had to come out with a different solution.

Using native mixins/behavior in dart polymer component

Polymerize supports both old style behaviors in hybrid mode and the new polymer 2.0 mixin. If you want to use a native mixin/behavior in a dart component you have first to define a stub for it. This can be autogenerated using the component wrapper. For instance a stub for a native (hybrid) JS mixin Polymer.IronValidatableBehavior is like this:

@JS('Polymer')
library my_lib;

@BowerImport(
 ref:'PolymerElements/iron-validatable-behavior#2.0-preview',
 import:"iron-validatable-behavior/iron-validatable-behavior.html",
 name:'iron-validatable-behavior')
@JS('IronValidatableBehavior')                                                                                                                                                                                                                    
abstract class IronValidatableBehavior  { 
}

Once defined the stub to mix that behavior in our component just add it to the implements clause of your class:

@PolymerRegister('my-comp')
class MyComp extends PolymerElement implements IronValidatableBehavior {
}

During the build phase polymerize will detect the temptative to use a @JS annotated class as an interface (that normally makes no sense) and instruments the code to inject the behavior during the element definition.

Defining a mixin in Dart

To define a mixin in dart declare a class and use the @PolymerBehavior annotation:

@PolymerBehavior('MyLib.MyPolymerBehavior')
abstract class MyBehave {
 ... 
}

Then use it from Dart in the same way of native-js mixins, i.e. in the implements clause of your element:

@PolymerRegister('my-comp')
class MyComp extends PolymerElement implements IronValidatableBehavior,MyBehave {
}

Like for native mixins polymerize will detect the use of a @PolymerBehavior annotated class in the implements clause and add the necessary logic to actually mix it in the class definition.

Polymerize will also create a class generator function and expose it with the name used as parameter in the @PolymerBehavior annotation. So it is possible to use Dart defined behavior in native JS components:

class MyNativeJSElement extends MyLib.MyPolymerBehavior(Polymer.Element) {
  static get is() {
	return "my-native-js";
  }

  ... 
}

Calling “super”

Because dart mixin are used in the implements clause of the class and of the different implementations between the js-land and dart-land, it is not possible to call the “super” implementation of a method inside mixins.

Unfortunately there are many important cases when you want to do that. Infact polymer requires that any callback handler like connectedCallback or ready to call the previous version of the method when ovverriding it in a mixin.

So in order to do the same thing in Dart polymerize provides an utility function callSuper, for example :

@PolymerBehavior('MyLib.MyPolymerBehavior')
abstract class MyBehave {
 ready() {
   callSuper(this,'ready');
   // do my stuff here
   ... 
 } 
}