Wrap arrays to avoid prototype extensions (ember-learn#691)

* Wrap arrays to avoid prototype extensions

Fixes ember-learn#532

* Add note about disabling prototype extensions

* Wrap in cta markup

* Update CTA

Author: RobbieTheWagner

guides/release/applications/services.md

@@ -33,14 +33,15 @@ Like any Ember object, a service is initialized and can have properties and meth
 Below, the shopping cart service manages an items array that represents the items currently in the shopping cart.
 
 ```javascript {data-filename=app/services/shopping-cart.js}
+import { A } from '@ember/array';
 import Service from '@ember/service';
 
 export default Service.extend({
   items: null,
 
   init() {
     this._super(...arguments);
-    this.set('items', []);
+    this.set('items', A([]));
   },
 
   add(item) {

guides/release/components/the-component-lifecycle.md

@@ -61,17 +61,18 @@ you can use `didUpdateAttrs` to clear any error state that was built up from edi
 ```
 
 ```javascript {data-filename=/app/components/profile-editor.js}
+import { A } from '@ember/array';
 import Component from '@ember/component';
 
 export default Component.extend({
   init() {
     this._super(...arguments);
-    this.set('errors', []);
+    this.set('errors', A([]));
   },
 
   didUpdateAttrs() {
     this._super(...arguments);
-    this.set('errors', []);
+    this.set('errors', A([]));
   },
 
   actions: {

guides/release/object-model/classes-and-instances.md

@@ -171,10 +171,11 @@ setup work, and you'll see strange behavior in your application.
 Arrays and objects defined directly on any `Ember.Object` are shared across all instances of that class.
 
 ```javascript
+import { A } from '@ember/array';
 import EmberObject from '@ember/object';
 
 const Person = EmberObject.extend({
-  shoppingList: ['eggs', 'cheese']
+  shoppingList: A(['eggs', 'cheese'])
 });
 
 Person.create({
@@ -198,11 +199,12 @@ Person.create({
 To avoid this behavior, it is encouraged to initialize those arrays and object properties during `init()`. Doing so ensures each instance will be unique.
 
 ```javascript
+import { A } from '@ember/array';
 import EmberObject from '@ember/object';
 
 const Person = EmberObject.extend({
   init() {
-    this.set('shoppingList', ['eggs', 'cheese']);
+    this.set('shoppingList', A(['eggs', 'cheese']));
   }
 });
 

guides/release/object-model/computed-properties-and-aggregate-data.md

@@ -10,18 +10,19 @@ In those cases we can use the `[]` array key to tell the property to update at t
 We'll use the familiar todo list for our examples:
 
 ```javascript {data-filename=app/components/todo-list.js}
+import { A } from '@ember/array';
 import EmberObject, { computed } from '@ember/object';
 import Component from '@ember/component';
 
 export default Component.extend({
   todos: null,
 
   init() {
-    this.set('todos', [
+    this.set('todos', A([
       EmberObject.create({ title: 'Buy food', isDone: true }),
       EmberObject.create({ title: 'Eat food', isDone: false }),
       EmberObject.create({ title: 'Catalog Tomster collection', isDone: true }),
-    ]);
+    ]));
   },
 
   titles: computed('todos.[]', function() {
@@ -108,6 +109,7 @@ Ember also provides a computed property macro
 which is a shorter way of expressing the above computed property:
 
 ```javascript {data-filename=app/components/todo-list.js}
+import { A } from '@ember/array';
 import EmberObject, { computed } from '@ember/object';
 import { filterBy } from '@ember/object/computed';
 import Component from '@ember/component';
@@ -116,11 +118,11 @@ export default Component.extend({
   todos: null,
 
   init() {
-    this.set('todos', [
+    this.set('todos', A([
       EmberObject.create({ isDone: true }),
       EmberObject.create({ isDone: false }),
       EmberObject.create({ isDone: true }),
-    ]);
+    ]));
   },
 
   incomplete: filterBy('todos', 'isDone', false)

guides/release/object-model/enumerables.md

@@ -14,6 +14,29 @@ possible. This minimizes incompatibility with other libraries, and
 allows Ember.js to use the native browser implementations in arrays
 where available.
 
+<div class="cta">
+  <div class="cta-note">
+    <div class="cta-note-body">
+      <div class="cta-note-heading">Zoey says...</div>
+      <div class="cta-note-message">
+        It is best practice to 
+        <a href="https://guides.emberjs.com/release/configuring-ember/disabling-prototype-extensions/">
+          disable prototype extensions
+        </a>
+        in your app.
+        
+        For example, with prototype extensions disabled, Ember's convenience methods like <code>firstObject</code> will only 
+        be available on <code>EmberArray</code>s and will not work on native JavaScript arrays.
+        This configuration is especially important for apps that use 
+        <a href="https://ember-fastboot.com/">
+          Ember Fastboot
+        </a>.   
+      </div>
+    </div>
+    <img src="/images/mascots/zoey.png" role="presentation" alt="Ember Mascot">
+  </div>
+</div>
+
 ## Use of Observable Methods and Properties
 
 In order for Ember to observe when you make a change to an enumerable, you need
@@ -74,7 +97,9 @@ that you can bind to.
 
 
 ```javascript
-let animals = ['rooster', 'pig'];
+import { A } from '@ember/array';
+
+let animals = A(['rooster', 'pig']);
 
 animals.get('lastObject');
 //=> "pig"
@@ -105,6 +130,7 @@ in turn and return a new array:
 
 
 ```javascript
+import { A } from '@ember/array';
 import EmberObject from '@ember/object';
 
 let hawaii = EmberObject.create({
@@ -115,7 +141,7 @@ let california = EmberObject.create({
   capital: 'Sacramento'
 });
 
-let states = [hawaii, california];
+let states = A([hawaii, california]);
 
 states.mapBy('capital');
 //=> ["Honolulu", "Sacramento"]
@@ -144,17 +170,18 @@ When working with a collection of Ember objects, you will often want to filter a
 
 
 ```javascript
+import { A } from '@ember/array';
 import EmberObject from '@ember/object';
 
 Todo = EmberObject.extend({
   title: null,
   isDone: false
 });
 
-let todos = [
+let todos = A([
   Todo.create({ title: 'Write code', isDone: true }),
   Todo.create({ title: 'Go to sleep' })
-];
+]);
 
 todos.filterBy('isDone', true);
 
@@ -173,17 +200,18 @@ use the [`every()`](https://emberjs.com/api/ember/release/classes/MutableArray/m
 
 
 ```javascript
+import { A } from '@ember/array';
 import EmberObject from '@ember/object';
 
 Person = EmberObject.extend({
   name: null,
   isHappy: false
 });
 
-let people = [
+let people = A([
   Person.create({ name: 'Yehuda', isHappy: true }),
   Person.create({ name: 'Majd', isHappy: false })
-];
+]);
 
 people.every((person, index, self) => person.get('isHappy'));