Merge pull request #551 from muziejus/octane

Change Tutorial examples to use Class Syntax (#540)

guides/release/tutorial/autocomplete-component.md

@@ -78,26 +78,26 @@ The `key-up` property will be bound to the `handleFilterEntry` action.
 The `handleFilterEntry` action will apply the search term filter to the list of rentals, and set a component attribute called `results`. The `results` are passed to the `{{yield}}` helper in the template. In the yielded block component, those same `results` are referred to as `|filteredResults|`. Let's apply the filter to our rentals:
 
 ```javascript {data-filename=app/components/list-filter.js}
-import Component from '@ember/component';
-
-export default Component.extend({
-  classNames: ['list-filter'],
-  value: '',
-
-  init() {
-    this._super(...arguments);
-    this.filter('').then((results) => this.set('results', results));
-  },
-
-  actions: {
-    handleFilterEntry() {
-      let filterInputValue = this.value;
-      let filterAction = this.filter;
-      filterAction(filterInputValue).then((filterResults) => this.set('results', filterResults));
-    }
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ListFilterComponent extends Component {
+  @tracked value = '';
+  @tracked results;
+
+  constructor() {
+    super(...arguments);
+    this.args.filter('').then((results) => this.results = results);
   }
 
-});
+  @action
+  handleFilterEntry() {
+    let filterInputValue = this.value;
+    let filterAction = this.args.filter;
+    filterAction(filterInputValue).then((filterResults) => this.results = filterResults);
+  }
+}
 ```
 
 #### Filtering Data Based on Input
@@ -129,18 +129,18 @@ Now, define your new controller like so:
 
 ```javascript {data-filename=app/controllers/rentals.js}
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
 
-export default Controller.extend({
-  actions: {
-    filterByCity(param) {
-      if (param !== '') {
-        return this.store.query('rental', { city: param });
-      } else {
-        return this.store.findAll('rental');
-      }
+export default class RentalsController extends Controller {
+  @action
+  filterByCity(param) {
+    if (param !== '') {
+      return this.store.query('rental', { city: param });
+    } else {
+      return this.store.findAll('rental');
     }
   }
-});
+}
 ```
 
 When the user types in the text field in our component, the `filterByCity` action in the controller is called.
@@ -228,60 +228,60 @@ We will update the results on screen only if the original filter value and the c
 
 ```javascript {data-filename="app/controllers/rentals.js" data-diff="-7,+8,+9,+10,+11,-13,+14,+15,+16,+17"}
 import Controller from '@ember/controller';
-
-export default Controller.extend({
-  actions: {
-    filterByCity(param) {
-      if (param !== '') {
-        return this.store.query('rental', { city: param });
-        return this.store
-          .query('rental', { city: param }).then((results) => {
-            return { query: param, results: results };
-          });
-      } else {
-        return this.store.findAll('rental');
-        return this.store
-          .findAll('rental').then((results) => {
-            return { query: param, results: results };
-          });
-      }
+import { action } from '@ember/object';
+
+export default class RentalsController extends Controller {
+  @action
+  filterByCity(param) {
+    if (param !== '') {
+      return this.store.query('rental', { city: param });
+      return this.store
+        .query('rental', { city: param }).then((results) => {
+          return { query: param, results: results };
+        });
+    } else {
+      return this.store.findAll('rental');
+      return this.store
+        .findAll('rental').then((results) => {
+          return { query: param, results: results };
+        });
     }
   }
-});
+}
 ```
 
 In the `filterByCity` function in the rentals controller above,
 we've added a new property called `query` to the filter results instead of just returning an array of rentals as before.
 
-```javascript {data-filename="app/components/list-filter.js" data-diff="-19,-9,+10,+11,+12,+20,+21,+22,+23,+24"}
-import Component from '@ember/component';
+```javascript {data-filename="app/components/list-filter.js" data-diff="-20,-10,+11,+12,+13,+21,+22,+23,+24,+25"}
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
-export default Component.extend({
-  classNames: ['list-filter'],
-  value: '',
+export default class ListFilterComponent extends Component {
+  @tracked value = '';
+  @tracked results;
 
-  init() {
-    this._super(...arguments);
-    this.filter('').then((results) => this.set('results', results));
-    this.filter('').then((allResults) => {
-      this.set('results', allResults.results);
+  constructor() {
+    super(...arguments);
+    this.args.filter('').then((results) => this.results = results);
+    this.args.filter('').then((allResults) => {
+      this.results = allResults.results;
     });
-  },
-
-  actions: {
-    handleFilterEntry() {
-      let filterInputValue = this.value;
-      let filterAction = this.filter;
-      filterAction(filterInputValue).then((filterResults) => this.set('results', filterResults));
-      filterAction(filterInputValue).then((filterResults) => {
-        if (filterResults.query === this.value) {
-          this.set('results', filterResults.results);
-        }
-      });
-    }
   }
 
-});
+  @action
+  handleFilterEntry() {
+    let filterInputValue = this.value;
+    let filterAction = this.args.filter;
+    filterAction(filterInputValue).then((filterResults) => this.results = filterResults);
+    filterAction(filterInputValue).then((filterResults) => {
+      if (filterResults.query === this.value) {
+        this.results = filterResults.results;
+      }
+    });
+  }
+}
 ```
 
 In our list filter component JavaScript, we use the `query` property to compare to the `value` property of the component.

guides/release/tutorial/ember-data.md

@@ -63,7 +63,7 @@ In this case, call the [`findAll`](https://www.emberjs.com/api/ember-data/releas
 ```javascript {data-filename="app/routes/rentals.js" data-diff="+5,-6,-7,-8,-9,-10,-11,-12,-13,-14,-15,-16,-17,-18,-19,-20,-21,-22,-23,-24,-25,-26,-27,-28,-29,-30,-31,-32,-33"}
 import Route from '@ember/routing/route';
 
-export default Route.extend({
+export default class RentalsRoute extends Route {
   model() {
     return this.store.findAll('rental');
     return [{
@@ -95,7 +95,7 @@ export default Route.extend({
       description: "Convenience is at your doorstep with this charming downtown rental. Great restaurants and active night life are within a few feet."
     }];
   }
-});
+}
 ```
 
 When we call `findAll`, Ember Data will attempt to fetch rentals from `/api/rentals`.

guides/release/tutorial/model-hook.md

@@ -20,7 +20,7 @@ Let's open `app/routes/rentals.js` and return an array of rental objects from th
 ```javascript {data-filename="app/routes/rentals.js" data-diff="+4,+5,+6,+7,+8,+9,+10,+11,+12,+13,+14,+15,+16,+17,+18,+19,+20,+21,+22,+23,+24,+25,+26,+27,+28,+29,+30,+31,+32,+33"}
 import Route from '@ember/routing/route';
 
-export default Route.extend({
+export default class RentalsRoute extends Route {
   model() {
     return [{
       id: 'grand-old-mansion',
@@ -51,7 +51,7 @@ export default Route.extend({
       description: 'Convenience is at your doorstep with this charming downtown rental. Great restaurants and active night life are within a few feet.'
     }];
   }
-});
+}
 ```
 
 Note that here, we are using the ES6 shorthand method definition syntax: `model()` is the same as writing `model: function()`.

guides/release/tutorial/routes-and-templates.md

@@ -230,11 +230,11 @@ function:
 ```javascript {data-filename="app/routes/index.js" data-diff="+4,+5,+6"}
 import Route from '@ember/routing/route';
 
-export default Route.extend({
+export default class IndexRoute extends Route {
   beforeModel() {
     this.replaceWith('rentals');
   }
-});
+}
 ```
 
  The `replaceWith` function is similar to the route's

guides/release/tutorial/service.md

@@ -86,20 +86,20 @@ otherwise we will create a new HTML element and call our Leaflet map service to
 ```javascript {data-filename="app/services/map-element.js" data-diff="+1,+2,+3,+4,+6,+8,+9,+11,+12,+13,+14,+15,+16,+18,+19,+20,+21,+22,+23,+24,+25,+26,+27,+28,+30,+31,+32,+33,+34,+35"}
 import { camelize } from '@ember/string';
 import Service from '@ember/service';
-import { set } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { set } from '@ember/object';
 
-export default Service.extend({
+export default class MapElementService extends Service {
 
-  geocode: service(),
-  map: service(),
+  @service geocode;
+  @service map;
 
-  init() {
+  constructor() {
     if (!this.cachedMaps) {
       set(this, 'cachedMaps', {});
     }
-    this._super(...arguments);
-  },
+    super(...arguments);
+  }
 
   async getMapElement(location) {
     let camelizedLocation = camelize(location);
@@ -111,15 +111,14 @@ export default Service.extend({
       this.cachedMaps[camelizedLocation] = element;
     }
     return element;
-  },
+  }
 
   _createMapElement() {
     let element = document.createElement('div');
     element.className = 'map';
     return element;
-  },
-});
-
+  }
+}
 ```
 
 ### Display Maps With a Component
@@ -145,22 +144,22 @@ We append the map element we get back from the service by implementing `didInser
 which is a [component lifecycle hook](../../components/the-component-lifecycle/#toc_integrating-with-third-party-libraries-with-didinsertelement).
 This function runs during the component render, after the component's markup gets inserted into the page.
 
-```javascript {data-filename="app/components/location-map.js" data-diff="+2,+5,+6,+8,+9,+10,+11,+12"}
-import Component from '@ember/component';
+```javascript {data-filename="app/components/location-map.js" data-diff="+2,+5,+6,+7,+9,+10,+11,+12,+13,+14"}
+import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 
-export default Component.extend({
-  classNames: ['map-container'],
-  mapElement: service(),
+export default class LocationMapComponent extends Component {
+
+  @service mapElement;
 
   didInsertElement() {
-    this._super(...arguments);
-    this.mapElement.getMapElement(this.location).then((mapElement) => {
+    super(...arguments);
+    this.mapElement.getMapElement(this.args.location).then((mapElement) => {
       this.element.append(mapElement);
     });
 
   }
-});
+}
 ```
 
 You may have noticed that `this.location` refers to a property location we haven't defined.

guides/release/tutorial/simple-component.md

@@ -135,30 +135,33 @@ giving it the `image` class name so that our test can find it.
 The value of `isWide` comes from our component's JavaScript file, in this case `rental-listing.js`.
 Since we want the image to be smaller at first, we will set the property to start as `false`:
 
-```javascript {data-filename="app/components/rental-listing.js" data-diff="+4"}
-import Component from '@ember/component';
+```javascript {data-filename="app/components/rental-listing.js" data-diff="+2,+5"}
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
-export default Component.extend({
-  isWide: false
-});
+export default class RentalListingComponent extends Component {
+  @tracked isWide = false;
+}
 ```
 
 To allow the user to widen the image, we will need to add an action that toggles
 the value of `isWide`. Let's create the `toggleImageSize` action to toggle the
 `isWide` property on our component:
 
-```javascript {data-filename="app/components/rental-listing.js" data-diff="-4,+5,+6,+7,+8,+9,+10"}
-import Component from '@ember/component';
+```javascript {data-filename="app/components/rental-listing.js" data-diff="+3,+7,+8,+9,+10,+11,+12"}
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from "@ember/object";
+
+export default class RentalListingComponent extends Component {
+  @tracked isWide = false;
 
-export default Component.extend({
-  isWide: false
-  isWide: false,
-  actions: {
-    toggleImageSize() {
-      this.toggleProperty('isWide');
-    }
+  @action
+  toggleImageSize() {
+    this.toggleProperty('isWide');
   }
-});
+
+}
 ```
 
 In order to trigger this action, we need to use the `{{action}}` helper in our