[BUGFIX][Tracked Properties] Prevents autotracking ArrayProxy creation

This PR prevents an issue with inifinite rerendering that is
fundamentally caused by creating an array proxy and returning it from
a getter. This is commonly done with _promise arrays_, which proxy to
content that is fulfilled at a later point in time:

```js
export default CountrySelectComponent extends Component {
  @service store;

  get options() {
    return this.store.findAll('country');
  }
}
```

While it likely makes sense to memoize these types of requests, even in
that case, the cache will be busted by autotracking because the
_creation_ of the array proxy causes it's content to be tracked. When
the content is updated later, it will then invalidate the cache, causing
the value to be thrown away before it can even be used, and a new value
to be fetched. This loops infinitely.

To get around this, we realized that array proxies do not need to add
observers until they have been _interacted_ with in some way. We set the
`CONSUMED` flag on the proxy to indicate that this has happened, and
only add/remove observers if it has. Since this happens lazily, it is
_generally_ guaranteed to happen after the getter has returned, since it
usually doesn't make sense to both create a value and access it in the
same getter.

packages/@ember/-internals/extension-support/lib/data_adapter.js

@@ -1,9 +1,30 @@
 import { getOwner } from '@ember/-internals/owner';
 import { scheduleOnce } from '@ember/runloop';
-import { get, objectAt, addArrayObserver, removeArrayObserver } from '@ember/-internals/metal';
+import {
+  get,
+  objectAt,
+  addArrayObserver as internalAddArrayObserver,
+  removeArrayObserver as internalRemoveArrayObserver,
+} from '@ember/-internals/metal';
 import { dasherize } from '@ember/string';
 import { Namespace, Object as EmberObject, A as emberA } from '@ember/-internals/runtime';
 
+function addArrayObserver(arr, target, observer) {
+  if (arr.addArrayObserver) {
+    arr.addArrayObserver(target, observer);
+  } else {
+    internalAddArrayObserver(arr, target, observer);
+  }
+}
+
+function removeArrayObserver(arr, target, observer) {
+  if (arr.removeArrayObserver) {
+    arr.removeArrayObserver(target, observer);
+  } else {
+    internalRemoveArrayObserver(arr, target, observer);
+  }
+}
+
 /**
 @module @ember/debug
 */

packages/@ember/-internals/runtime/lib/system/array_proxy.js

@@ -11,10 +11,14 @@ import {
   removeArrayObserver,
   replace,
 } from '@ember/-internals/metal';
+import { symbol } from '@ember/-internals/utils';
+import { _WeakSet as WeakSet } from '@ember/polyfills';
 import EmberObject from './object';
 import { isArray, MutableArray } from '../mixins/array';
 import { assert } from '@ember/debug';
 
+const CONSUMED = new WeakSet();
+
 const ARRAY_OBSERVER_MAPPING = {
   willChange: '_arrangedContentArrayWillChange',
   didChange: '_arrangedContentArrayDidChange',
@@ -101,11 +105,12 @@ export default class ArrayProxy extends EmberObject {
     this._length = 0;
 
     this._arrangedContent = null;
-    this._addArrangedContentArrayObsever();
   }
 
   willDestroy() {
-    this._removeArrangedContentArrayObsever();
+    if (CONSUMED.has(this)) {
+      this._removeArrangedContentArrayObserver();
+    }
   }
 
   /**
@@ -164,6 +169,10 @@ export default class ArrayProxy extends EmberObject {
 
   // Overriding objectAt is not supported.
   objectAt(idx) {
+    if (!CONSUMED.has(this)) {
+      this._addArrangedContentArrayObserver();
+    }
+
     if (this._objects === null) {
       this._objects = [];
     }
@@ -187,6 +196,10 @@ export default class ArrayProxy extends EmberObject {
 
   // Overriding length is not supported.
   get length() {
+    if (!CONSUMED.has(this)) {
+      this._addArrangedContentArrayObserver();
+    }
+
     if (this._lengthDirty) {
       let arrangedContent = get(this, 'arrangedContent');
       this._length = arrangedContent ? get(arrangedContent, 'length') : 0;
@@ -217,24 +230,31 @@ export default class ArrayProxy extends EmberObject {
   }
 
   [PROPERTY_DID_CHANGE](key) {
+    if (!CONSUMED.has(this)) {
+      // The array proxy hasn't been accessed yet, nothing needs to be updated
+      return;
+    }
+
     if (key === 'arrangedContent') {
       let oldLength = this._objects === null ? 0 : this._objects.length;
       let arrangedContent = get(this, 'arrangedContent');
       let newLength = arrangedContent ? get(arrangedContent, 'length') : 0;
 
-      this._removeArrangedContentArrayObsever();
+      this._removeArrangedContentArrayObserver();
       this.arrayContentWillChange(0, oldLength, newLength);
 
       this._invalidate();
 
       this.arrayContentDidChange(0, oldLength, newLength);
-      this._addArrangedContentArrayObsever();
+      this._addArrangedContentArrayObserver();
     } else if (key === 'content') {
       this._invalidate();
     }
   }
 
-  _addArrangedContentArrayObsever() {
+  _addArrangedContentArrayObserver() {
+    CONSUMED.add(this);
+
     let arrangedContent = get(this, 'arrangedContent');
     if (arrangedContent) {
       assert("Can't set ArrayProxy's content to itself", arrangedContent !== this);
@@ -243,15 +263,23 @@ export default class ArrayProxy extends EmberObject {
         isArray(arrangedContent) || arrangedContent.isDestroyed
       );
 
-      addArrayObserver(arrangedContent, this, ARRAY_OBSERVER_MAPPING);
+      if (arrangedContent.addArrayObserver) {
+        arrangedContent.addArrayObserver(this, ARRAY_OBSERVER_MAPPING);
+      } else {
+        addArrayObserver(arrangedContent, this, ARRAY_OBSERVER_MAPPING);
+      }
 
       this._arrangedContent = arrangedContent;
     }
   }
 
-  _removeArrangedContentArrayObsever() {
+  _removeArrangedContentArrayObserver() {
     if (this._arrangedContent) {
-      removeArrayObserver(this._arrangedContent, this, ARRAY_OBSERVER_MAPPING);
+      if (this._arrangedContent.removeArrayObserver) {
+        this._arrangedContent.removeArrayObserver(this, ARRAY_OBSERVER_MAPPING);
+      } else {
+        removeArrayObserver(this._arrangedContent, this, ARRAY_OBSERVER_MAPPING);
+      }
     }
   }
 
@@ -291,4 +319,12 @@ ArrayProxy.reopen(MutableArray, {
     @public
   */
   arrangedContent: alias('content'),
+
+  addArrayObserver(target, opts) {
+    if (!CONSUMED.has(this)) {
+      this._addArrangedContentArrayObserver();
+    }
+
+    this._super(target, opts);
+  },
 });

packages/@ember/-internals/runtime/tests/helpers/array.js

@@ -5,8 +5,6 @@ import {
   get,
   set,
   computed,
-  addArrayObserver,
-  removeArrayObserver,
   arrayContentWillChange,
   arrayContentDidChange,
 } from '@ember/-internals/metal';
@@ -63,12 +61,12 @@ const ArrayTestsObserverClass = EmberObject.extend({
   },
 
   observeArray(obj) {
-    addArrayObserver(obj, this);
+    obj.addArrayObserver(this);
     return this;
   },
 
   stopObserveArray(obj) {
-    removeArrayObserver(obj, this);
+    obj.removeArrayObserver(this);
     return this;
   },
 

packages/@ember/-internals/runtime/tests/mixins/array_test.js

@@ -5,7 +5,6 @@ import {
   addObserver,
   observer as emberObserver,
   computed,
-  addArrayObserver,
   removeArrayObserver,
   arrayContentDidChange,
   arrayContentWillChange,
@@ -195,7 +194,7 @@ moduleFor(
         _after: null,
       });
 
-      addArrayObserver(obj, observer);
+      obj.addArrayObserver(observer);
     }
 
     afterEach() {

packages/@ember/-internals/runtime/tests/system/array_proxy/watching_and_listening_test.js

@@ -26,6 +26,9 @@ moduleFor(
 
       proxy.set('content', content);
 
+      // consume the array
+      proxy.objectAt(0);
+
       assert.deepEqual(sortedListenersFor(content, '@array:before'), [
         '_arrangedContentArrayWillChange',
       ]);
@@ -39,6 +42,9 @@ moduleFor(
       let content2 = A();
       let proxy = ArrayProxy.create({ content: content1 });
 
+      // consume the array
+      proxy.objectAt(0);
+
       assert.deepEqual(sortedListenersFor(content1, '@array:before'), [
         '_arrangedContentArrayWillChange',
       ]);