Updates to the tutorial so it works on 5.11-beta

Author: kategengler

src/markdown/tutorial/part-1/01-orientation.md

@@ -270,11 +270,11 @@ As text on the welcome page pointed out, the source code for the page is located
 @@ -1,7 +1 @@
 -{{page-title "SuperRentals"}}
 -
+-{{outlet}}
+-
 -{{! The following component displays Ember's default welcome message. }}
 -<WelcomePage />
 -{{! Feel free to remove this! }}
--
--{{outlet}}
 \ No newline at end of file
 +Hello World!!!
 ```

src/markdown/tutorial/part-1/06-interactive-components.md

@@ -55,8 +55,8 @@ Ember will create an *[instance][TODO: link to instance]* of the class whenever
 
 ```run:file:patch lang=js cwd=super-rentals filename=app/components/rental/image.js
 @@ -3 +3,6 @@
--export default class RentalImageComponent extends Component {}
-+export default class RentalImageComponent extends Component {
+-export default class RentalImage extends Component {}
++export default class RentalImage extends Component {
 +  constructor(...args) {
 +    super(...args);
 +    this.isLarge = false;
@@ -121,7 +121,7 @@ Since this pattern of initializing instance variables in the constructor is pret
 
 ```run:file:patch lang=js cwd=super-rentals filename=app/components/rental/image.js
 @@ -3,6 +3,3 @@
- export default class RentalImageComponent extends Component {
+ export default class RentalImage extends Component {
 -  constructor(...args) {
 -    super(...args);
 -    this.isLarge = false;
@@ -149,7 +149,7 @@ Let's modify our class to add a *[method](../../../in-depth-topics/native-classe
 +import { tracked } from '@glimmer/tracking';
 +import { action } from '@ember/object';
 
- export default class RentalImageComponent extends Component {
+ export default class RentalImage extends Component {
 -  isLarge = false;
 +  @tracked isLarge = false;
 +

src/markdown/tutorial/part-1/07-reusable-components.md

@@ -107,15 +107,15 @@ Let's start with our JavaScript file:
  import Component from '@glimmer/component';
 +import ENV from 'super-rentals/config/environment';
 
--export default class MapComponent extends Component {}
-+export default class MapComponent extends Component {
+-export default class Map extends Component {}
++export default class Map extends Component {
 +  get token() {
 +    return encodeURIComponent(ENV.MAPBOX_ACCESS_TOKEN);
 +  }
 +}
 ```
 
-Here, we import the access token from the config file and return it from a `token` *[getter](https://javascript.info/property-accessors)*. This allows us to access our token as `this.token` both inside the `MapComponent` class body, as well as the component's template. It is also important to [URL-encode](https://javascript.info/url#encoding-strings) the token, just in case it contains any special characters that are not URL-safe.
+Here, we import the access token from the config file and return it from a `token` *[getter](https://javascript.info/property-accessors)*. This allows us to access our token as `this.token` both inside the `Map` class body, as well as the component's template. It is also important to [URL-encode](https://javascript.info/url#encoding-strings) the token, just in case it contains any special characters that are not URL-safe.
 
 ## Interpolating Values in Templates
 
@@ -334,7 +334,7 @@ index 78e765f..1cad468 100644
 
 +const MAPBOX_API = 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/static';
 +
- export default class MapComponent extends Component {
+ export default class Map extends Component {
 +  get src() {
 +    let { lng, lat, width, height, zoom } = this.args;
 +

src/markdown/tutorial/part-2/10-service-injection.md

@@ -87,10 +87,10 @@ Whew! Let's look at the JavaScript class next.
 
 ```run:file:patch lang=js cwd=super-rentals filename=app/components/share-button.js
 @@ -3 +3,27 @@
--export default class ShareButtonComponent extends Component {}
+-export default class ShareButton extends Component {}
 +const TWEET_INTENT = 'https://twitter.com/intent/tweet';
 +
-+export default class ShareButtonComponent extends Component {
++export default class ShareButton extends Component {
 +  get currentURL() {
 +    return window.location.href;
 +  }
@@ -217,7 +217,7 @@ To fix our problem, we would need to do the same. Ember exposes this internal st
 +import { service } from '@ember/service';
  import Component from '@glimmer/component';
 @@ -5,4 +6,6 @@
- export default class ShareButtonComponent extends Component {
+ export default class ShareButton extends Component {
 +  @service router;
 +
    get currentURL() {

src/markdown/tutorial/part-2/12-provider-components.md

@@ -221,7 +221,7 @@ Now that we have our component all set up, we can finally wire up our search box
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-export default class RentalsComponent extends Component {
+export default class Rentals extends Component {
   @tracked query = '';
 }
 ```
@@ -257,7 +257,7 @@ Now that our search query is wired up to our `<Rentals>` component, we can get i
 ```run:file:create lang=js cwd=super-rentals filename=app/components/rentals/filter.js
 import Component from '@glimmer/component';
 
-export default class RentalsFilterComponent extends Component {
+export default class RentalsFilter extends Component {
   get results() {
     let { rentals, query } = this.args;