ember data section class syntax (ember-learn#543) (ember-learn#553)

* WIP class syntax

* fix relationships snippets

* mostly convert adapters + serializers

* update to runspired's explanation of double extend

* update other examples, fix typos

* address comments to clean up examples

* unify destructuring style

Author: efx

guides/release/models/customizing-adapters.md

@@ -1,8 +1,9 @@
 In Ember Data, an Adapter determines how data is persisted to a
 backend data store. Things such as the backend host, URL format
- and headers used to talk to a REST API can all be configured 
- in an adapter.
-  
+ and headers used to talk to a REST API can all be configured
+ in an adapter. You can even switch to storing data in local storage
+ using a [local storage adapter](https://github.com/locks/ember-localstorage-adapter).
+
 Ember Data's default Adapter has some built-in assumptions about
 how a [REST API should look](http://jsonapi.org/). If your backend conventions
 differ from those assumptions, Ember Data allows either slight adjustments
@@ -25,10 +26,11 @@ specific Adapters.
 
 ```javascript {data-filename=app/adapters/application.js}
 import DS from 'ember-data';
+const { JSONAPIAdapter } = DS;
 
-export default DS.JSONAPIAdapter.extend({
+export default class ApplicationAdapter extends JSONAPIAdapter {
   // Application specific overrides go here
-});
+}
 ```
 
 If you have one model that has exceptional rules for communicating
@@ -39,10 +41,11 @@ following file:
 
 ```javascript {data-filename=app/adapters/post.js}
 import DS from 'ember-data';
+const { JSONAPIAdapter } = DS;
 
-export default DS.JSONAPIAdapter.extend({
-  namespace: 'api/v1'
-});
+export default class ApplicationAdapter extends JSONAPIAdapter {
+  namespace = 'api/v1';
+}
 ```
 
 Ember Data comes with several built-in adapters.
@@ -148,10 +151,11 @@ specific URL namespace.
 
 ```javascript {data-filename=app/adapters/application.js}
 import DS from 'ember-data';
+const { JSONAPIAdapter } = DS;
 
-export default DS.JSONAPIAdapter.extend({
-  namespace: 'api/1'
-});
+export default class ApplicationAdapter extends JSONAPIAdapter {
+  namespace = 'api/1';
+}
 ```
 
 Requests for `person` would now target `http://emberjs.com/api/1/people/1`.
@@ -165,10 +169,11 @@ property on the adapter.
 
 ```javascript {data-filename=app/adapters/application.js}
 import DS from 'ember-data';
+const { JSONAPIAdapter } = DS;
 
-export default DS.JSONAPIAdapter.extend({
-  host: 'https://api.example.com'
-});
+export default class ApplicationAdapter extends JSONAPIAdapter {
+  host = 'https://api.example.com';
+}
 ```
 
 Requests for `person` would now target `https://api.example.com/people/1`.
@@ -187,12 +192,13 @@ underscore_case instead of dash-case you could override the
 ```javascript {data-filename=app/adapters/application.js}
 import DS from 'ember-data';
 import { underscore } from '@ember/string';
+const { JSONAPIAdapter } = DS;
 
-export default DS.JSONAPIAdapter.extend({
+export default class ApplicationAdapter extends JSONAPIAdapter {
   pathForType(type) {
     return underscore(type);
   }
-});
+}
 ```
 
 Requests for `person` would now target `/person/1`.
@@ -202,44 +208,46 @@ Requests for `user-profile` would now target `/user_profile/1`.
 
 Some APIs require HTTP headers, e.g. to provide an API key. Arbitrary
 headers can be set as key/value pairs on the `JSONAPIAdapter`'s `headers`
-object and Ember Data will send them along with each Ajax request.
-(Note that we set headers in `init()` because default property values
+object and Ember Data will send them along with each ajax request.
+(Note that we set headers in `constructor()` because default property values
 should not be arrays or objects.)
 
 ```javascript {data-filename=app/adapters/application.js}
 import DS from 'ember-data';
+const { JSONAPIAdapter } = DS;
 
-export default DS.JSONAPIAdapter.extend({
-  init() {
-    this._super(...arguments);
+export default class ApplicationAdapter extends JSONAPIAdapter {
+  constructor() {
+    super(...arguments);
 
-    this.set('headers', {
+    this.headers = {
       'API_KEY': 'secret key',
       'ANOTHER_HEADER': 'Some header value'
-    });
+    };
   }
-});
+}
 ```
 
-`headers` can also be used as a computed property to support dynamic
-headers. In the example below, the headers are generated with a computed
-property dependent on the `session` service.
+You can combine tracked properties with ES6 getters to make `headers` dynamic.
+In the example below, the headers are generated dynamically using a
+property from the `session` service.
 
 ```javascript {data-filename=app/adapters/application.js}
 import DS from 'ember-data';
-import { computed } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
+const { JSONAPIAdapter } = DS;
 
-
-export default DS.JSONAPIAdapter.extend({
-  session: service('session'),
-  headers: computed('session.authToken', function() {
+export default class ApplicationAdapter extends JSONAPIAdapter {
+  @service session;
+  @tracked session.authToken;
+  get headers() {
     return {
       'API_KEY': this.session.authToken,
       'ANOTHER_HEADER': 'Some header value'
     };
-  })
-});
+  }
+}
 ```
 
 In some cases, your dynamic headers may require data from some
@@ -278,10 +286,11 @@ does not specify an `serializer:application`.
 
 ```javascript {data-filename=app/adapters/my-custom-adapter.js}
 import DS from 'ember-data';
+const { JSONAPIAdapter } = DS;
 
-export default DS.JSONAPIAdapter.extend({
-  defaultSerializer: '-default'
-});
+export default class MyCustomAdapter extends JSONAPIAdapter {
+  defaultSerializer = '-default';
+}
 ```
 
 ## Community Adapters