bubble mutationObserver options up to modifier

[BryanCrotaz]

It's very easy to accidentally create an infinite loop that crashes the browser because by default you're observing the entire tree.

<div {{create-ref "outer" bucket=this tracked=true}}>
  <div style={{this.style}}/>
</div>

@trackedRef("outer") _outer;

get style() {
  return htmlSafe(`font-height:${this._outer.clientHeight}px`);
}

Default should be to only monitor the element that has the modifier. Options should be provided:

• subtree: false - this is the expensive one
• children: false
• attributes: true
• resize: true

[lifeart]

@BryanCrotaz agree, I was thinking about config hash, to allow users customize obervers flags

[BryanCrotaz]

that's complex to write in the template, I'd prefer optional attributes on the modifier directly

[BryanCrotaz]

{{create-tracked-ref "mine" children=true}}

And there's a warning if you try and use them with tracking=false ("did you mean to turn tracking on?")

[BryanCrotaz]

plus the observer options include old attribute values which aren't accessible through the modifier, so that might get confusing

[lifeart]

implemented in ember-ref-modifier@2.0.0