proposal: simplify api

[lifeart]

We could go this ways:

---

<div {{ref "field"}} ></div>

class Component {
  @ref("field") node = null;
}

where {{ref "field"}} will be transformed to {{ref this "field"}}, and @ref decorator will control property access (and will throw error if property does not yeat setted), it should fix all tracked issues.

one more interesting thing, we can share refs between components (we could add ability to have "global" refs), in this case, we will use @ref("field") to access ref-bucket, and we can introduce {{ref-for "field"}} helper, and it can return actual dom node, with same ref.

it may be {{global-ref "footer"}}, @globalRef("footer"), {{global-ref-to "footer"}}

in therory "ref-bucket" approach may simplify dom ref usages for template-only components, for example

<div {{ref "field"}}>hello</div>

{{get (ref-to "field") "textContent"}}

<SecondComponent @helloNode={{ref-to "field"}} />

example: https://github.com/lifeart/ember-ref-bucket

<div {{bound-to this.getNode}}></div>

class Component {
   getNode() { return null }
}

quite straightforward usage, we will patch getNode method on this during modifier initialization, and getNode will return value or null.

---

<div {{ref-to this.node}}></div>

class Component {
   node = null;
}

and check for this.node property descriptior (it shoud be simple, without getters/setters )

---

@jrjohnson @simonihmig @wycats what do you think? Any suggestions, additions?

// related duscussion -https://github.com/lifeart/ember-ref-modifier/pull/232

[lifeart]

[jrjohnson]

I'm not super into the global refs part of this proposal, but I don't mind.

I'm worried about throwing an error when unset, I think that would make it more difficult to use waitForProperty in a task. Which is one nice way to hold off on performing some action until the element exists.

[lifeart]

waitForProperty will work, any @ref decorator return null or node. (if node does not exists it will return null) also, it's possible to register destructor for node itself - https://github.com/lifeart/ember-ref-bucket#use-registernodedestructor

[jrjohnson]

I'm not sure how returning null aligns with and will throw error if property does not yet set. Am I reading this wrong?

[lifeart]

why it shoud throw error if property does not set? updated approach don't set any properties on instnces, only define custom getter on existing property

[dmaok]

You can also omit the ref name you accept in the decorator and use the component property name. <div {{ref="fooBazBarElement"}}></div>

class Component {
  @ref() fooBazBarElement = null;
}