Octane - Replace some references to Computed Properties with Tracked (ember-learn#805)

* change some mentioned of CPs to tracked/getters

* replace more CPs

* Apply suggestions from code review

Co-Authored-By: Robert Jackson <[email protected]>

* update following rwjblue's suggestions

Author: jenweber

guides/release/applications/dependency-injection.md

@@ -234,29 +234,28 @@ For example, this component plays songs with different audio services based
 on a song's `audioType`.
 
 ```javascript {data-filename=app/components/play-audio.js}
-import Component from '@ember/component';
-import { computed } from '@ember/object';
+import Component from '@glimmer/component';
 import { getOwner } from '@ember/application';
 
 // Usage:
 //
-// {{play-audio song=song}}
+// <PlayAudio @song=this.song />
 //
-export default Component.extend({
-  audioService: computed('song.audioType', function() {
-    if (!this.song) {
+export default class PlayAudioComponent extends Component {
+  get audioService() {
+    if (!this.args.song) {
       return null;
     }
 
     let applicationInstance = getOwner(this);
-    let audioType = this.song.audioType;
+    let { audioType } = this.args.song;
 
     return applicationInstance.lookup(`service:audio-${audioType}`);
-  }),
+  }
 
   click() {
     let player = this.audioService;
-    player.play(this.song.file);
+    player.play(this.args.song.file);
   }
-});
+}
 ```

guides/release/controllers/index.md

@@ -27,7 +27,7 @@ Controllers are used as an extension of the model loaded from the Route. Any att
 
 Controllers are singletons so we should avoid keeping state that does not derive from either the Model or Query Parameters since these would persist in between activations such as when a user leaves the Route and then re-enters it.
 
-Controllers can also contain actions that enable the Route's components to update the Model or Query Parameters through it using Computed Properties.
+Controllers can also contain actions, Query Parameters, Tracked Properties, and more.
 
 ### Basic Controller Example
 
@@ -103,5 +103,5 @@ Yes! Controllers are still an integral part of an Ember application architecture
 #### When should we create a Controller?
 
 * We want to pass down actions or variables to share with a Route’s child components
-* We have a computed property that depends on the results of the model hook
+* We need to compute a value based on the results of the model hook
 * We need to support query parameters

guides/release/models/relationships.md

@@ -267,7 +267,7 @@ updated and saved this often results in the creation of a great deal
 of code for very little benefit. An alternate approach is to define
 these relationships using an attribute with no transform
 (`attr()`). This makes it easy to access readonly values in
-computed properties and templates without the overhead of defining
+other objects and templates without the overhead of defining
 extraneous models.
 
 ### Creating Records

guides/release/routing/query-params.md

@@ -41,15 +41,14 @@ and the `category` property on `controller:articles`. In other words,
 once the `articles` route has been entered, any changes to the
 `category` query param in the URL will update the `category` property
 on `controller:articles`, and vice versa.
-Note that you can't bind `queryParams` to computed properties, they
+Note that you can't make `queryParams` be a dynamically generated property (neither computed property, nor property getter); they
 have to be values.
 
-Now we need to define a computed property of our category-filtered
-array that the `articles` template will render:
+Now we need to define a getter for our category-filtered
+array, which the `articles` template will render. For the getter to recompute when values change, `category` and `model` should be marked as tracked properties:
 
 ```javascript {data-filename=app/controllers/articles.js}
 import Controller from '@ember/controller';
-import { computed } from '@ember/object';
 
 export default class ArticlesController extends Controller {
   queryParams = ['category'];

guides/release/services/index.md

@@ -92,12 +92,10 @@ you must look up the service using Ember's [`getOwner`](https://emberjs.com/api/
 
 ```javascript {data-filename=app/components/cart-contents.js}
 import Component from '@glimmer/component';
-import { computed } from '@ember/object';
 import { getOwner } from '@ember/application';
 
 export default class CartContentsComponent extends Component {
   //will load the service in file /app/services/shopping-cart.js
-  @computed
   get cart() {
     return getOwner(this).lookup('service:shopping-cart');
   }

guides/release/templates/built-in-helpers.md

@@ -14,13 +14,13 @@ API documentation.
 The [`{{get}}`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/get?anchor=get)
 helper makes it easy to dynamically send the value of a variable to another
 helper or component. This can be useful if you want to output one of several
-values based on the result of a computed property.
+values based on the result of a getter.
 
 ```handlebars
 {{get this.address this.part}}
 ```
 
-if the `part` computed property returns "zip", this will display the result of `this.address.zip`.
+If the `part` getter returns "zip", this will display the result of `this.address.zip`.
 If it returns "city", you get `this.address.city`.
 
 ### The `concat` helper

guides/release/testing/index.md

@@ -27,7 +27,7 @@ Notice how there is nothing Ember specific about the test, it is just a straight
 Examples of Unit Tests are:
 
 * The return value of a `getFullName` utility combines its `firstName` and `lastName` parameters correctly.
-* A computed property macro formats a price depending on its `currency` and `cents` dependent keys.
+* A getter formats a price depending on tracked properties like `currency` and `cents` .
 * A utility function that adds padding on a string based on the value passed.
 
 Unit Tests are useful for testing pure functions where the return value is only determined by its input values, without any observable side effects.
@@ -64,7 +64,7 @@ Container Tests are ideal for testing Controllers, Routes, or Services where we
 
 Examples of Container Tests are:
 
-* A `fullName` attribute on a controller is computed by combining its `firstName` and `lastName` attributes.
+* A `fullName` attribute on a controller is a getter that combines the tracked properties `firstName` and `lastName`.
 * A serializer properly converts the blog request payload into a blog post model object.
 * Blog dates are properly formatted through a `time` service.
 

guides/release/testing/testing-controllers.md

@@ -1,4 +1,4 @@
-_Container testing methods and computed properties follow previous patterns shown
+_Container testing methods and getters follow previous patterns shown
 in [Testing Basics][] because Ember.Controller extends Ember.Object._
 
 Controllers can be tested using the `setupTest` helper which is part

guides/release/testing/testing-models.md

@@ -1,4 +1,4 @@
-_Container testing methods and computed properties follow previous patterns shown
+_Container testing methods and getters follow previous patterns shown
 in [Testing Basics][] because DS.Model extends Ember.Object._
 
 [Ember Data][] Models can be tested in a module that uses the `setupTest` helper.

guides/release/testing/testing-routes.md

@@ -1,4 +1,4 @@
-_Container testing methods and computed properties follow previous patterns shown
+_Container testing methods and getters follow previous patterns shown
 in [Testing Basics][] because Ember.Route extends Ember.Object._
 
 Testing routes can be done both via application tests or container tests. Application tests