Update routing example

examples/routing/.editorconfig

@@ -4,7 +4,6 @@
 
 root = true
 
-
 [*]
 end_of_line = lf
 charset = utf-8

examples/routing/.eslintrc.js

@@ -1,8 +1,14 @@
+'use strict';
+
 module.exports = {
   root: true,
+  parser: 'babel-eslint',
   parserOptions: {
     ecmaVersion: 2018,
-    sourceType: 'module'
+    sourceType: 'module',
+    ecmaFeatures: {
+      legacyDecorators: true
+    }
   },
   plugins: [
     'ember'
@@ -14,8 +20,7 @@ module.exports = {
   env: {
     browser: true
   },
-  rules: {
-  },
+  rules: {},
   overrides: [
     // node files
     {
@@ -30,21 +35,19 @@ module.exports = {
         'server/**/*.js'
       ],
       parserOptions: {
-        sourceType: 'script',
-        ecmaVersion: 2015
+        sourceType: 'script'
       },
       env: {
         browser: false,
         node: true
       },
       plugins: ['node'],
-      rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
-        // add your custom rules and overrides for node files here
-
+      extends: ['plugin:node/recommended'],
+      rules: {
         // this can be removed once the following is fixed
         // https://github.com/mysticatea/eslint-plugin-node/issues/77
         'node/no-unpublished-require': 'off'
-      })
+      }
     }
   ]
 };

examples/routing/.template-lintrc.js

@@ -1,5 +1,5 @@
 'use strict';
 
 module.exports = {
-  extends: 'recommended'
+  extends: 'octane'
 };

examples/routing/README.md

@@ -8,15 +8,16 @@ A short introduction of this app could easily go here.
 You will need the following things properly installed on your computer.
 
 * [Git](https://git-scm.com/)
-* [Node.js](https://nodejs.org/) (with npm)
+* [Node.js](https://nodejs.org/)
+* [Yarn](https://yarnpkg.com/)
 * [Ember CLI](https://ember-cli.com/)
 * [Google Chrome](https://google.com/chrome/)
 
 ## Installation
 
 * `git clone <repository-url>` this repository
 * `cd routing`
-* `npm install`
+* `yarn install`
 
 ## Running / Development
 
@@ -35,9 +36,9 @@ Make use of the many generators for code, try `ember help generate` for more det
 
 ### Linting
 
-* `npm run lint:hbs`
-* `npm run lint:js`
-* `npm run lint:js -- --fix`
+* `yarn lint:hbs`
+* `yarn lint:js`
+* `yarn lint:js --fix`
 
 ### Building
 

examples/routing/app/app.js

@@ -1,14 +1,12 @@
 import Application from '@ember/application';
-import Resolver from './resolver';
+import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
-import config from './config/environment';
+import config from 'routing/config/environment';
 
-const App = Application.extend({
-  modulePrefix: config.modulePrefix,
-  podModulePrefix: config.podModulePrefix,
-  Resolver
-});
+export default class App extends Application {
+  modulePrefix = config.modulePrefix;
+  podModulePrefix = config.podModulePrefix;
+  Resolver = Resolver;
+}
 
 loadInitializers(App, config.modulePrefix);
-
-export default App;

examples/routing/app/controllers/media.js

@@ -1,21 +1,25 @@
-import Controller from '@ember/controller';
-import { computed } from '@ember/object';
-import { equal } from '@ember/object/computed';
+import Controller from "@ember/controller";
+import { tracked } from "@glimmer/tracking";
 
-export default Controller.extend({
-  queryParams: ['filter'],
-  filter: 'albums',
+export default class MediaController extends Controller {
+  queryParams = ["filter"];
+  @tracked filter = "albums";
 
-  showAlbums: equal('filter', 'albums'),
-  showMovies: equal('filter', 'movies'),
+  get showAlbums() {
+    return this.filter === "albums";
+  }
 
-  media: computed('showAlbums', 'showMovies', function() {
+  get showMovies() {
+    return this.filter === "movies";
+  }
+
+  get media() {
     if (this.showAlbums) {
       return this.model.albums;
     } else if (this.showMovies) {
       return this.model.movies;
-    } else {
-      return [];
     }
-  })
-});
+
+    return [];
+  }
+}

examples/routing/app/router.js

@@ -1,17 +1,15 @@
-import EmberRouter from '@ember/routing/router';
-import config from './config/environment';
+import EmberRouter from "@ember/routing/router";
+import config from "routing/config/environment";
 
-const Router = EmberRouter.extend({
-  location: config.locationType,
-  rootURL: config.rootURL
-});
+export default class Router extends EmberRouter {
+  location = config.locationType;
+  rootURL = config.rootURL;
+}
 
-Router.map(function() {
-  this.route('media', function() {
-    this.route('medium', { path: '/:medium_id' });
+Router.map(function () {
+  this.route("media", function () {
+    this.route("medium", { path: "/:medium_id" });
   });
-  this.route('fail');
-  this.route('not-found', { path: '*wildcard' });
+  this.route("fail");
+  this.route("not-found", { path: "*wildcard" });
 });
-
-export default Router;

examples/routing/app/routes/fail.js

@@ -1,14 +1,14 @@
+import { action } from '@ember/object';
 import Route from '@ember/routing/route';
 
-export default Route.extend({
+export default class FailRoute extends Route {
   model() {
     return Promise.reject('an error occured!');
-  },
+  }
 
-  actions: {
-    error(e) {
-      //eslint-disable-next-line no-console
-      console.error('Routing error:', e);
-    }
+  @action
+  error(e) {
+    //eslint-disable-next-line no-console
+    console.error('Routing error:', e);
   }
-});
+}

examples/routing/app/routes/media.js

@@ -18,11 +18,11 @@ const MOVIES = [
   { title: "Creed – Rocky’s Legacy" }
 ];
 
-export default Route.extend({
+export default class MediaRoute extends Route {
   model() {
     return hash({
       albums: delayedResponse(ALBUMS),
       movies: delayedResponse(MOVIES)
     });
   }
-});
+}

examples/routing/app/routes/media/medium.js

@@ -1,10 +1,10 @@
-import Route from '@ember/routing/route';
-import delayedResponse from '../../utils/delayed-response';
+import Route from "@ember/routing/route";
+import delayedResponse from "../../utils/delayed-response";
 
-export default Route.extend({
+export default class MediumRoute extends Route {
   model(params) {
     const title = `The individual medium for ID ${params.medium_id}`;
 
     return delayedResponse({ title });
   }
-});
+}

examples/routing/app/templates/application.hbs

@@ -1,13 +1,13 @@
 <nav>
   <ul>
     <li>
-      {{link-to "Home" "index"}}
+      <LinkTo @route="index">Home</LinkTo>
     </li>
     <li>
-      {{link-to "Media" "media"}}
+      <LinkTo @route="media">Media</LinkTo>
     </li>
     <li>
-      {{link-to "Error" "fail"}}
+      <LinkTo @route="fail">Error</LinkTo>
     </li>
     <li>
       <a href="/unknown-page">Unknown Page</a>

examples/routing/app/templates/media.hbs

@@ -1,14 +1,14 @@
 <h1>Media</h1>
 
-{{link-to "Albums" (query-params filter="albums")}}
-{{link-to "Movies" (query-params filter="movies")}}
+<LinkTo @query={{hash filter="albums"}} class="album-link">Albums</LinkTo>
+<LinkTo @query={{hash filter="movies"}} class="movies-link">Movies</LinkTo>
 
 <ul>
-  {{#each media as |medium i|}}
+  {{#each this.media as |medium i|}}
     <li>
-      {{#link-to "media.medium" i}}
+      <LinkTo @route="media.medium" @model={{i}} class="media-link">
         {{medium.title}}
-      {{/link-to}}
+      </LinkTo>
     </li>
   {{/each}}
 </ul>

examples/routing/app/templates/media/medium.hbs

@@ -1,3 +1,3 @@
 <h1>Medium</h1>
 
-<p>{{model.title}}</p>
+<p>{{this.model.title}}</p>

examples/routing/app/templates/not-found.hbs

@@ -1,3 +1,3 @@
-<h1>Not Found</h1>
+<h1 class="not-found-title">Not Found</h1>
 
-<p>The page you were looking for could not be found.</p>
+<p class="not-found-description" >The page you were looking for could not be found.</p>

examples/routing/app/utils/delayed-response.js

@@ -1,11 +1,12 @@
-import { later } from '@ember/runloop';
+import { later } from "@ember/runloop";
+import config from "routing/config/environment";
 
-const MIN_DELAY = 1;
-const MAX_DELAY = 3000;
+const { MIN_DELAY, MAX_DELAY } = config;
 
 export default function delayedResponse(response) {
   return new Promise((resolve) => {
-    const delay = Math.floor(Math.random() * (MAX_DELAY - MIN_DELAY)) + MIN_DELAY;
+    const delay =
+      Math.floor(Math.random() * (MAX_DELAY - MIN_DELAY)) + MIN_DELAY;
     later(null, resolve, response, delay);
   });
 }

examples/routing/config/environment.js

@@ -1,49 +1,52 @@
-'use strict';
+"use strict";
 
-module.exports = function(environment) {
+module.exports = function (environment) {
   let ENV = {
-    modulePrefix: 'routing',
+    modulePrefix: "routing",
     environment,
-    rootURL: '/',
-    locationType: 'auto',
+    rootURL: "/",
+    locationType: "auto",
+    MIN_DELAY: 1,
+    MAX_DELAY: 3000,
     EmberENV: {
       FEATURES: {
         // Here you can enable experimental features on an ember canary build
         // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
       },
       EXTEND_PROTOTYPES: {
         // Prevent Ember Data from overriding Date.parse.
-        Date: false
-      }
+        Date: false,
+      },
     },
 
     APP: {
       // Here you can pass flags/options to your application instance
       // when it is created
-    }
+    },
   };
 
-  if (environment === 'development') {
+  if (environment === "development") {
     // ENV.APP.LOG_RESOLVER = true;
     // ENV.APP.LOG_ACTIVE_GENERATION = true;
     // ENV.APP.LOG_TRANSITIONS = true;
     // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
     // ENV.APP.LOG_VIEW_LOOKUPS = true;
   }
 
-  if (environment === 'test') {
+  if (environment === "test") {
     // Testem prefers this...
-    ENV.locationType = 'none';
+    ENV.locationType = "none";
+    ENV.MAX_DELAY = 1;
 
     // keep test console output quieter
     ENV.APP.LOG_ACTIVE_GENERATION = false;
     ENV.APP.LOG_VIEW_LOOKUPS = false;
 
-    ENV.APP.rootElement = '#ember-testing';
+    ENV.APP.rootElement = "#ember-testing";
     ENV.APP.autoboot = false;
   }
 
-  if (environment === 'production') {
+  if (environment === "production") {
     // here you can enable a production-specific feature
   }
 

examples/routing/config/optional-features.json

@@ -1,3 +1,6 @@
 {
-  "jquery-integration": true
+  "application-template-wrapper": false,
+  "default-async-observers": true,
+  "jquery-integration": false,
+  "template-only-glimmer-components": true
 }

examples/routing/config/targets.js

@@ -6,7 +6,7 @@ const browsers = [
   'last 1 Safari versions'
 ];
 
-const isCI = !!process.env.CI;
+const isCI = Boolean(process.env.CI);
 const isProduction = process.env.EMBER_ENV === 'production';
 
 if (isCI || isProduction) {