Skip to content

Commit 38f432b

Browse files
patsy-issapatsy-issa
authored
Update routing example (#362)
* update ember dependencies * run class codemod * update to current idioms * move artificial delay to config * add basic functionality acceptance test
1 parent 9deb9b4 commit 38f432b

22 files changed

+170
-113
lines changed

‎examples/routing/.editorconfig

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44

55
root = true
66

7-
87
[*]
98
end_of_line = lf
109
charset = utf-8

‎examples/routing/.eslintrc.js

+12-9
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1+
'use strict';
2+
13
module.exports = {
24
root: true,
5+
parser: 'babel-eslint',
36
parserOptions: {
47
ecmaVersion: 2018,
5-
sourceType: 'module'
8+
sourceType: 'module',
9+
ecmaFeatures: {
10+
legacyDecorators: true
11+
}
612
},
713
plugins: [
814
'ember'
@@ -14,8 +20,7 @@ module.exports = {
1420
env: {
1521
browser: true
1622
},
17-
rules: {
18-
},
23+
rules: {},
1924
overrides: [
2025
// node files
2126
{
@@ -30,21 +35,19 @@ module.exports = {
3035
'server/**/*.js'
3136
],
3237
parserOptions: {
33-
sourceType: 'script',
34-
ecmaVersion: 2015
38+
sourceType: 'script'
3539
},
3640
env: {
3741
browser: false,
3842
node: true
3943
},
4044
plugins: ['node'],
41-
rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
42-
// add your custom rules and overrides for node files here
43-
45+
extends: ['plugin:node/recommended'],
46+
rules: {
4447
// this can be removed once the following is fixed
4548
// https://github.com/mysticatea/eslint-plugin-node/issues/77
4649
'node/no-unpublished-require': 'off'
47-
})
50+
}
4851
}
4952
]
5053
};

‎examples/routing/.template-lintrc.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
'use strict';
22

33
module.exports = {
4-
extends: 'recommended'
4+
extends: 'octane'
55
};

‎examples/routing/README.md

+6-5
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,16 @@ A short introduction of this app could easily go here.
88
You will need the following things properly installed on your computer.
99

1010
* [Git](https://git-scm.com/)
11-
* [Node.js](https://nodejs.org/) (with npm)
11+
* [Node.js](https://nodejs.org/)
12+
* [Yarn](https://yarnpkg.com/)
1213
* [Ember CLI](https://ember-cli.com/)
1314
* [Google Chrome](https://google.com/chrome/)
1415

1516
## Installation
1617

1718
* `git clone <repository-url>` this repository
1819
* `cd routing`
19-
* `npm install`
20+
* `yarn install`
2021

2122
## Running / Development
2223

@@ -35,9 +36,9 @@ Make use of the many generators for code, try `ember help generate` for more det
3536

3637
### Linting
3738

38-
* `npm run lint:hbs`
39-
* `npm run lint:js`
40-
* `npm run lint:js -- --fix`
39+
* `yarn lint:hbs`
40+
* `yarn lint:js`
41+
* `yarn lint:js --fix`
4142

4243
### Building
4344

‎examples/routing/app/app.js

+7-9
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import Application from '@ember/application';
2-
import Resolver from './resolver';
2+
import Resolver from 'ember-resolver';
33
import loadInitializers from 'ember-load-initializers';
4-
import config from './config/environment';
4+
import config from 'routing/config/environment';
55

6-
const App = Application.extend({
7-
modulePrefix: config.modulePrefix,
8-
podModulePrefix: config.podModulePrefix,
9-
Resolver
10-
});
6+
export default class App extends Application {
7+
modulePrefix = config.modulePrefix;
8+
podModulePrefix = config.podModulePrefix;
9+
Resolver = Resolver;
10+
}
1111

1212
loadInitializers(App, config.modulePrefix);
13-
14-
export default App;

‎examples/routing/app/controllers/media.js

+17-13
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
1-
import Controller from '@ember/controller';
2-
import { computed } from '@ember/object';
3-
import { equal } from '@ember/object/computed';
1+
import Controller from "@ember/controller";
2+
import { tracked } from "@glimmer/tracking";
43

5-
export default Controller.extend({
6-
queryParams: ['filter'],
7-
filter: 'albums',
4+
export default class MediaController extends Controller {
5+
queryParams = ["filter"];
6+
@tracked filter = "albums";
87

9-
showAlbums: equal('filter', 'albums'),
10-
showMovies: equal('filter', 'movies'),
8+
get showAlbums() {
9+
return this.filter === "albums";
10+
}
1111

12-
media: computed('showAlbums', 'showMovies', function() {
12+
get showMovies() {
13+
return this.filter === "movies";
14+
}
15+
16+
get media() {
1317
if (this.showAlbums) {
1418
return this.model.albums;
1519
} else if (this.showMovies) {
1620
return this.model.movies;
17-
} else {
18-
return [];
1921
}
20-
})
21-
});
22+
23+
return [];
24+
}
25+
}

‎examples/routing/app/router.js

+11-13
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
import EmberRouter from '@ember/routing/router';
2-
import config from './config/environment';
1+
import EmberRouter from "@ember/routing/router";
2+
import config from "routing/config/environment";
33

4-
const Router = EmberRouter.extend({
5-
location: config.locationType,
6-
rootURL: config.rootURL
7-
});
4+
export default class Router extends EmberRouter {
5+
location = config.locationType;
6+
rootURL = config.rootURL;
7+
}
88

9-
Router.map(function() {
10-
this.route('media', function() {
11-
this.route('medium', { path: '/:medium_id' });
9+
Router.map(function () {
10+
this.route("media", function () {
11+
this.route("medium", { path: "/:medium_id" });
1212
});
13-
this.route('fail');
14-
this.route('not-found', { path: '*wildcard' });
13+
this.route("fail");
14+
this.route("not-found", { path: "*wildcard" });
1515
});
16-
17-
export default Router;

‎examples/routing/app/routes/fail.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1+
import { action } from '@ember/object';
12
import Route from '@ember/routing/route';
23

3-
export default Route.extend({
4+
export default class FailRoute extends Route {
45
model() {
56
return Promise.reject('an error occured!');
6-
},
7+
}
78

8-
actions: {
9-
error(e) {
10-
//eslint-disable-next-line no-console
11-
console.error('Routing error:', e);
12-
}
9+
@action
10+
error(e) {
11+
//eslint-disable-next-line no-console
12+
console.error('Routing error:', e);
1313
}
14-
});
14+
}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ const MOVIES = [
1818
{ title: "Creed – Rocky’s Legacy" }
1919
];
2020

21-
export default Route.extend({
21+
export default class MediaRoute extends Route {
2222
model() {
2323
return hash({
2424
albums: delayedResponse(ALBUMS),
2525
movies: delayedResponse(MOVIES)
2626
});
2727
}
28-
});
28+
}

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import Route from '@ember/routing/route';
2-
import delayedResponse from '../../utils/delayed-response';
1+
import Route from "@ember/routing/route";
2+
import delayedResponse from "../../utils/delayed-response";
33

4-
export default Route.extend({
4+
export default class MediumRoute extends Route {
55
model(params) {
66
const title = `The individual medium for ID ${params.medium_id}`;
77

88
return delayedResponse({ title });
99
}
10-
});
10+
}

‎examples/routing/app/templates/application.hbs

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<nav>
22
<ul>
33
<li>
4-
{{link-to "Home" "index"}}
4+
<LinkTo @route="index">Home</LinkTo>
55
</li>
66
<li>
7-
{{link-to "Media" "media"}}
7+
<LinkTo @route="media">Media</LinkTo>
88
</li>
99
<li>
10-
{{link-to "Error" "fail"}}
10+
<LinkTo @route="fail">Error</LinkTo>
1111
</li>
1212
<li>
1313
<a href="/unknown-page">Unknown Page</a>

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<h1>Media</h1>
22

3-
{{link-to "Albums" (query-params filter="albums")}}
4-
{{link-to "Movies" (query-params filter="movies")}}
3+
<LinkTo @query={{hash filter="albums"}} class="album-link">Albums</LinkTo>
4+
<LinkTo @query={{hash filter="movies"}} class="movies-link">Movies</LinkTo>
55

66
<ul>
7-
{{#each media as |medium i|}}
7+
{{#each this.media as |medium i|}}
88
<li>
9-
{{#link-to "media.medium" i}}
9+
<LinkTo @route="media.medium" @model={{i}} class="media-link">
1010
{{medium.title}}
11-
{{/link-to}}
11+
</LinkTo>
1212
</li>
1313
{{/each}}
1414
</ul>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<h1>Medium</h1>
22

3-
<p>{{model.title}}</p>
3+
<p>{{this.model.title}}</p>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<h1>Not Found</h1>
1+
<h1 class="not-found-title">Not Found</h1>
22

3-
<p>The page you were looking for could not be found.</p>
3+
<p class="not-found-description" >The page you were looking for could not be found.</p>

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

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { later } from '@ember/runloop';
1+
import { later } from "@ember/runloop";
2+
import config from "routing/config/environment";
23

3-
const MIN_DELAY = 1;
4-
const MAX_DELAY = 3000;
4+
const { MIN_DELAY, MAX_DELAY } = config;
55

66
export default function delayedResponse(response) {
77
return new Promise((resolve) => {
8-
const delay = Math.floor(Math.random() * (MAX_DELAY - MIN_DELAY)) + MIN_DELAY;
8+
const delay =
9+
Math.floor(Math.random() * (MAX_DELAY - MIN_DELAY)) + MIN_DELAY;
910
later(null, resolve, response, delay);
1011
});
1112
}

‎examples/routing/config/environment.js

+16-13
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,52 @@
1-
'use strict';
1+
"use strict";
22

3-
module.exports = function(environment) {
3+
module.exports = function (environment) {
44
let ENV = {
5-
modulePrefix: 'routing',
5+
modulePrefix: "routing",
66
environment,
7-
rootURL: '/',
8-
locationType: 'auto',
7+
rootURL: "/",
8+
locationType: "auto",
9+
MIN_DELAY: 1,
10+
MAX_DELAY: 3000,
911
EmberENV: {
1012
FEATURES: {
1113
// Here you can enable experimental features on an ember canary build
1214
// e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
1315
},
1416
EXTEND_PROTOTYPES: {
1517
// Prevent Ember Data from overriding Date.parse.
16-
Date: false
17-
}
18+
Date: false,
19+
},
1820
},
1921

2022
APP: {
2123
// Here you can pass flags/options to your application instance
2224
// when it is created
23-
}
25+
},
2426
};
2527

26-
if (environment === 'development') {
28+
if (environment === "development") {
2729
// ENV.APP.LOG_RESOLVER = true;
2830
// ENV.APP.LOG_ACTIVE_GENERATION = true;
2931
// ENV.APP.LOG_TRANSITIONS = true;
3032
// ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
3133
// ENV.APP.LOG_VIEW_LOOKUPS = true;
3234
}
3335

34-
if (environment === 'test') {
36+
if (environment === "test") {
3537
// Testem prefers this...
36-
ENV.locationType = 'none';
38+
ENV.locationType = "none";
39+
ENV.MAX_DELAY = 1;
3740

3841
// keep test console output quieter
3942
ENV.APP.LOG_ACTIVE_GENERATION = false;
4043
ENV.APP.LOG_VIEW_LOOKUPS = false;
4144

42-
ENV.APP.rootElement = '#ember-testing';
45+
ENV.APP.rootElement = "#ember-testing";
4346
ENV.APP.autoboot = false;
4447
}
4548

46-
if (environment === 'production') {
49+
if (environment === "production") {
4750
// here you can enable a production-specific feature
4851
}
4952

‎examples/routing/config/optional-features.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
{
2-
"jquery-integration": true
2+
"application-template-wrapper": false,
3+
"default-async-observers": true,
4+
"jquery-integration": false,
5+
"template-only-glimmer-components": true
36
}

‎examples/routing/config/targets.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const browsers = [
66
'last 1 Safari versions'
77
];
88

9-
const isCI = !!process.env.CI;
9+
const isCI = Boolean(process.env.CI);
1010
const isProduction = process.env.EMBER_ENV === 'production';
1111

1212
if (isCI || isProduction) {

0 commit comments

Comments
 (0)