[BUGFIX][FEAT][Tracked Properties] Adds Arg Proxy Feature Flag

[pzuraq]

Currently, we pass a captured snapshot of arguments to the custom
component manager and expect users to update their args and trigger
notifications, dirtying any getters that rely on args. This is
problematic for a few reasons:

1. It's fundamentally less efficient, since every getter on a component
   will invalidate any time any of the arguments on the component
   changes. This may not be a huge deal in most components, but it could
   be problematic at scale.
2. Upstream components will currently rerender if anything changes
   downstream of them.

The second problem is more of an issue here. The crux of the issue is
that as we are rendering, we must somehow dirty the args object in
order for getters to invalidate. Currently, there are two ways of doing
this:

1. Dirtying the tag and bumping the global revision count. This results
   in the component itself being dirtied, which causes arguments to be
   assigned again on the next render, which dirties everything again.
2. Setting the argument's tag to CURRENT_TAG, as we do in Glimmer.js.
   This always returns the latest revision though, which means that we
   are always dirty.

This issue can crop up in many forms and leads to infinite rerender bugs
when it does.

The solution proposed here is to instead use a Proxy (or an object with
manually defined getters on platforms which do not support Proxy) to
wrap args. This allows us to directly access the references that
represent the arguments, and push their tags onto the autotrack stack as
accessed. Everything entangles properly, and we only rerender or
recalculate a getter when needed.

Alternatively, we could add a way to set the args tag to exactly
the current revision as the component is rendering. This would solve the
problems of upstream invalidations, but would not solve the issue of all
getters on a component invalidating each render.

Fixes #17799

[rwjblue]

Seems good to me, and given that its behind a feature flag it should be easy to roll back if we end up wanting to.

👍

[cibernox]

I believe this may fix a problem I've experienced porting ember-basic-drodown to glimmer. I have a CP that depends on args.{top,left,width,others} that is not recomputing when those values change:

• Property: https://github.com/cibernox/ember-basic-dropdown/blob/2e95aab5df644d3f86f2cbc7fe2870da0406192e/addon/components/basic-dropdown/content.js#L74-L101
• Values being passed: https://github.com/cibernox/ember-basic-dropdown/blob/2e95aab5df644d3f86f2cbc7fe2870da0406192e/addon/templates/components/basic-dropdown.hbs#L24-L29

Copying explanation from @pzuraq:

- ahhh
- I know why it is
- we don't actually use set('args'), we use a setter
- so we don't actually notify args, we notify __args__
- autotracking will work correctly though, it's odd your CP isn't autotracking
- ah, but you probably haven't turned on autotracking
- k
- yeah, so the fixes/updates we have to do, we'll definitely address this

In case this help creating a test that validates the fix

[cibernox]

What's the state of this? I can help verify that it fixes my issue upgrading my addons

[pzuraq]

@cibernox there will likely need to be a little additional work for it to fix your issue, we're working on a followup to the Tracked Properties RFC that will address some core issues we've found with interop between computed properties and tracked properties at the moment. This is semi-related, but on its own it likely won't fix your issue just yet.

[cibernox]

I can try to add a failing test for my issue if that helps, I think I've isolated it. Idk if it should be in ember or in glimmer

[rwjblue]

We chatted a bit about this, but I'd like to get the component itself into this message target is going to be the empty {} POJO you make just above. Can we update this to definition.ComponentClass.class instead? At least it would toString the component name...

[rwjblue]

LGTM, lets land once CI is green...

Concerns addressed...

[basicBrogrammer]

I'm running in to this issue .... at first i thought i had to do @computed('args.nameOfArg') but that didn't cause a rerender. When i remove the computed decorator it gives me the Max Stack. Is this the same issue? If so, how do i update my ember octane preview module?