Prevent dart2js interceptor calls on `rootEl`

[leonsenft]

The event listener registration on rootEl in the following Dart code

class ViewMaterialButtonComponent0 extends AppView<import2.MaterialButtonComponent> {
  ...
  ViewMaterialButtonComponent0(...) {
   ...
   rootEl = document.createElement('material-button');
  }
  ...
  ComponentRef build() {
    final import2.MaterialButtonComponent _ctx = ctx;
    final HtmlElement parentRenderNode = initViewRoot(rootEl);
    var doc = document;
    _el_0 = createAndAppend(doc, 'div', parentRenderNode);
    _el_0.className = 'content';
    addShimC(_el_0);
    project(_el_0, 0);
    _compView_1 = new import4.ViewMaterialRippleComponent0(this, 1);
    _el_1 = _compView_1.rootEl;
    parentRenderNode.append(_el_1);
    addShimC(_el_1);
    _MaterialRippleComponent_1_2 = new import5.MaterialRippleComponent(new ElementRef(_el_1));
    _compView_1.create(_MaterialRippleComponent_1_2, []);
    _el_1.addEventListener('mousedown', eventHandler1(ctx.onMouseDown));
    _el_1.addEventListener('mouseup', eventHandler1(ctx.onMouseUp));
    init(const [], const []);
    rootEl.addEventListener('mousedown', eventHandler1(_ctx.onMouseDown));
    rootEl.addEventListener('mouseup', eventHandler1(_ctx.onMouseUp));
    rootEl.addEventListener('click', eventHandler1(_ctx.handleClick));
    rootEl.addEventListener('keypress', eventHandler1(_ctx.handleKeyPress));
    rootEl.addEventListener('focus', eventHandler1(_ctx.onFocus));
    rootEl.addEventListener('blur', eventHandler1(_ctx.onBlur));
    return null;
  }
}

is transformed into the following JavaScript

J._addEventListener$3$x = function(receiver, a0, a1, a2) {
  return J.getInterceptor$x(receiver)._addEventListener$3(receiver, a0, a1, a2);
};
...
J._addEventListener$3$x(this.rootEl, "mousedown", this.eventHandler1$1(t2.get$onMouseDown(_ctx)), null);
J._addEventListener$3$x(this.rootEl, "mouseup", this.eventHandler1$1(t2.get$onMouseUp(_ctx)), null);
J._addEventListener$3$x(this.rootEl, "click", this.eventHandler1$1(_ctx.get$handleClick()), null);
J._addEventListener$3$x(this.rootEl, "keypress", this.eventHandler1$1(_ctx.get$handleKeyPress()), null);
J._addEventListener$3$x(this.rootEl, "focus", this.eventHandler1$1(t2.get$onFocus(_ctx)), null);
J._addEventListener$3$x(this.rootEl, "blur", this.eventHandler1$1(t2.get$onBlur(_ctx)), null);

The dart2js team had the following to say about this:

The code would be better if rootEl was cached in a local. Since the field is not final and dart2js does not understand that the code in eventHandler1 and addEventListener does not update the field, dart2js has to re-load the field for each call, and can learn nothing from the code. Each addEventListener call involves getInterceptor.

I also wonder if making it final, and initializing it via AppView's constructor invoked by the generated code would work as well.

[leonsenft]

It seems that rootEl can't be made final because in View<Component>Host it's initialized in the build() function. I'm not sure it can be moved from there to the constructor either as there's a significant amount of logic surrounding it for @deferred components.

[matanlurey]

Just an update as of 2018, the following code:

@Component(
  selector: 'material-button-like',
  template: '',
)
class HasManyNativeHostEvents {
  @HostListener('mousedown')
  void onMouseDown(Object e) {}

  @HostListener('mouseup')
  void onMouseUp(Object e) {}

  @HostListener('click')
  void onClick(Object e) {}

  @HostListener('keypress')
  void onKeyPress(Object e) {}

  @HostListener('focus')
  void onFocus(Object e) {}

  @HostListener('blur')
  void onBlur(Object e) {}
}

... generates the following build method:

  @override
  ComponentRef<import1.HasManyNativeHostEvents> build() {
    final import1.HasManyNativeHostEvents _ctx = ctx;
    final import2.HtmlElement parentRenderNode = initViewRoot(rootEl);
    init(const [], null);
    rootEl.addEventListener('mousedown', eventHandler0(_ctx.onMouseDown));
    rootEl.addEventListener('mouseup', eventHandler0(_ctx.onMouseUp));
    rootEl.addEventListener('click', eventHandler0(_ctx.onClick));
    rootEl.addEventListener('keypress', eventHandler0(_ctx.onKeyPress));
    rootEl.addEventListener('focus', eventHandler0(_ctx.onFocus));
    rootEl.addEventListener('blur', eventHandler0(_ctx.onBlur));
    return null;
  }

... so this problem looks like it still occurs.

It looks like the best thing we can do is "hoist" rootEl near the beginning. I'll add golden file, and we can go from there since I couldn't find a (good) example of this in our _goldens.

[matanlurey]

Closed in #970.