Ember.js: Better errors when accessing "this" in template-only components

[tomdale]

Some pre-Octane idioms rely on the implicit, empty component existing in template-only components. Some of the newer helpers (fn and on) have better error messages if they are used when there is no backing component. We should make sure that all cases of attempted access of the backing component produce a helpful error message and suggest creating a component class to go with the template.

One idea would be to have getSelf() in the component manager return a proxy in dev mode that throws an error.

[rwjblue]

Thanks for making this issue @tomdale! I think this would go a long way towards at least making it clear what was happening to @GavinJoyce in https://github.com/emberjs/ember.js/issues/17202.

[lifeart]

I suppose it should be at this line https://github.com/emberjs/ember.js/blob/master/packages/@ember/-internals/glimmer/lib/component-managers/template-only.ts#L76

Any objections about error message?

You trying to acces "property" inside template context, but, this is template-only-component and context does not exists.

[rwjblue]

@lifeart - We already have a nice helper function that builds the proxy for this that we can use in development builds (we use it for on and fn).

https://github.com/emberjs/ember.js/blob/74d30950781b5734d17a0ebf25831ebf07a88a16/packages/%40ember/-internals/glimmer/lib/utils/untouchable-this.ts#L5

[lifeart]

looks like we need to pass NULL_REFERENCE into buildUntouchableThis as second argument for expected behavour

[BobrImperator]

This might not be the best place to discuss the issue, but I have a "better errors" request as well ;)
https://github.com/emberjs/ember.js/blob/master/packages/%40ember/-internals/glimmer/lib/helpers/fn.ts#L90

fn helper currently returns error like this Error: Assertion Failed: You must pass a function as the 'fn' helpers first argument, you passed undefined

I think it's not clear enough, I often ask myself in that moment what happened, and I go through changes I've made to find out what's going on, because I have no idea what property is failing.

From what I saw, the callbackRef has a property key, so I think We could use that to inform what property actually fails.

I'd propose something along these lines
Error: Assertion Failed: fn helper received 'callbackRef.value' for 'callbackRef.property' as first argument -> Error: Assertion Failed: fn helper received null for loadData as first argument
This is not the best example, but my point is to add info about property name that's failing.
Please let me know if you'd like to have me to create an issue or a PR for that.