Expose / Document API for creating Polymer elements imperatively

[Andersmholmgren]

Note: some of this may exist but not be explicitly documented for this use case. In that case this request is for such documentation

Currently, Polymer Dart provides support for easily coding new components, making heavy use of annotations.

Whilst this is very convenient for manually coding new components it is not so convenient for integrating existing components that are in some different form.

For such use cases it is more convenient to have an API that supports easy creation of adapters between the two component models.

I would like to see a part of the wiki dedicated to showing how to create such integrations. Note, some of required features are supported well today, and could simply be documented in this section.

Motivation

Keeping the majority of the application independent from Polymer allows

• better reuse in other UIs (e.g. flutter)
• comprehensive out of browser unit test coverage

Binding To Polymer Properties

My model has its own idea of properties (actually just immutable dart properties) and changes to these are notified via streams.

I believe the notifyPath method will make triggering updates fairly straightforward. However, I suspect I will still need a way to tell Polymer about the existence of these properties in the first place (although I haven't tested this).

I should be able to generate a Property object for each of these so an API like

void addProperty(Property p);

would likely be ideal.

Binding From Polymer Properties (Listening to Changes)

My model has methods to call for updates to properties. It would be nice if I could pass these into Property rather than the String name of the method (which is very JS hacky IMO :-)).

new Property(valueChanged: (int newValue) => ...)

Registering the component

API to support registration of a component. After I have adapted my component into polymer form then I'd like to register it. e.g.

registerPolymerElement('my-element', myElement);

[Andersmholmgren]

I attempted to write my own annotation to use in place of PolymerRegister that creates the properties from my model like so

class FrolymerRegister extends CustomElementProxy {
  final Map<String, dynamic> hostAttributes;
  final PolymerAdapterFactory adapterFactory;

  const FrolymerRegister(String tagName, this.adapterFactory,
      {String extendsTag, this.hostAttributes})
      : super(tagName, extendsTag: extendsTag);

  void initialize(Type type) {
    print('FrolymerRegister.initialize($type)');
    // Register the element via polymer js.
    context.callMethod('Polymer', [createPolymerDescriptor(adapterFactory())]);
    // Register the dart type as a proxy.
    super.initialize(type);
  }
}

Here createPolymerDescriptor is my own version.

However, I couldn't get this to work. It seems that only @PolymerRegister gets picked up. Even extending PolymerRegister doesn't do the trick.

PolymerRegister is hardwired to use reflection in its initialize method so I can't use that directly.

[Andersmholmgren]

I'm thinking / hoping that this might come for free by moving the new js interop stuff.