diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..e162067
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,24 @@
+# unconventional js
+/blueprints/*/files/
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
+/bower_components/
+/node_modules/
+
+# misc
+/coverage/
+!.*
+.eslintcache
+.lint-todo/
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
+/package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try
diff --git a/.prettierrc.js b/.prettierrc.js
new file mode 100644
index 0000000..41a9a46
--- /dev/null
+++ b/.prettierrc.js
@@ -0,0 +1,12 @@
+export default {
+ singleQuote: true,
+ overrides: [
+ {
+ files: '**/*.hbs',
+ options: {
+ parser: 'glimmer',
+ singleQuote: false,
+ },
+ },
+ ],
+};
diff --git a/README.md b/README.md
index c0d2b9f..b4168b1 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
# Sane Document Title [](https://travis-ci.org/kimroen/ember-cli-document-title) [](http://emberobserver.com/addons/ember-cli-document-title) [](https://codeclimate.com/github/kimroen/ember-cli-document-title)
+
This addon adds sane `document.title` integration to your ember app.
Originally based on [this gist by @machty](https://gist.github.com/machty/8413411), and since improved upon by many fabulous contributors.
@@ -6,6 +7,7 @@ Originally based on [this gist by @machty](https://gist.github.com/machty/841341
Tested to work with Ember 1.13.13 and up.
## Install
+
Install by running
```
@@ -13,6 +15,7 @@ ember install ember-cli-document-title
```
## So, how does this work?
+
This adds two new keys to your routes:
1. `titleToken`
@@ -34,43 +37,47 @@ Every time you transition to a route, the following will happen:
## Examples!
### Simple, static titles
+
If you just put strings as the `title` for all your routes, that will be
used as the title for it.
```js
// routes/posts.js
-export default Ember.Route.extend({
- title: 'Our Favorite posts!'
-});
+export default class PostsRoute extends Route {
+ title = 'Our Favorite posts!';
+}
// routes/post.js
-export default Ember.Route.extend({
- title: 'Please enjoy this post'
-});
+export default class PostRoute extends Route {
+ title = 'Please enjoy this post';
+}
```
### Dynamic segments with a static part
+
Let's say you want something like "Posts - My Blog", with "- My Blog"
being static, and "Posts" being something you define on each route.
```js
// routes/posts.js
-export default Ember.Route.extend({
- titleToken: 'Posts'
-});
+export default class PostsRoute extends Route {
+ titleToken: 'Posts';
+}
```
This will be collected and bubble up until it hits the Application Route
+
```js
// routes/application.js
-export default Ember.Route.extend({
- title: function(tokens) {
+export default class ApplicationRoute extends Route {
+ title(tokens) {
return tokens.join(' - ') + ' - My Blog';
}
-});
+}
```
### Dynamic title based on model info
+
In this example, we want something like "Name of current post - Posts -
My Blog".
@@ -78,47 +85,50 @@ Let's say we have this object as our post-model:
```js
Ember.Object.create({
- name: 'Ember is Omakase'
+ name: 'Ember is Omakase',
});
```
+
And we want to use the name of each post in the title.
```js
// routes/post.js
-export default Ember.Route.extend({
- titleToken: function(model) {
+export default class PostRoute extends Route {
+ titleToken(model) {
return model.get('name');
}
-});
+}
```
This will then bubble up until it reaches our Posts Route:
```js
// routes/posts.js
-export default Ember.Route.extend({
- titleToken: 'Posts'
-});
+export default class PostsRoute extends Route {
+ titleToken = 'Posts';
+}
```
And continue to the Application Route:
```js
// routes/application.js
-export default Ember.Route.extend({
- title: function(tokens) {
- tokens = Ember.makeArray(tokens);
- tokens.unshift('My Blog');
- return tokens.reverse().join(' - ');
+export default class ApplicationRoute extends Route {
+ title(tokens) {
+ tokens = Ember.makeArray(tokens);
+ tokens.unshift('My Blog');
+ return tokens.reverse().join(' - ');
}
-});
+}
```
This will result in these titles:
+
- On /posts - "Posts - My Blog"
- On /posts/1 - "Ember is Omakase - Posts - My Blog"
### Async titles using promises
+
You may be in a situation where it makes sense to have one or more of your `titleToken`s be asynchronous. For example if a related model is async, or you just enjoy working with Promises in your past-time.
Luckily, you can return a promise from any of your `titleToken` functions, and they will all be resolved by the time your `title` function receives them.
@@ -127,18 +137,18 @@ An example! Let's say we have these two Ember Data models; a `post` and its `use
```js
// models/post.js
-export default DS.Model.extend({
- name: DS.attr('string'),
- author: DS.belongsTo('user', { async: true })
-});
+export default class PostModel extends Model {
+ @attr('string') name;
+ @belongsTo('user', { async: true }) author;
+}
```
```js
// models/user.js
-export default DS.Model.extend({
- firstName: DS.attr('string'),
- lastName: DS.attr('string')
-});
+export default class UserModel extends Model {
+ @attr('string') firstName;
+ @attr('string') lastName;
+}
```
In our document title, we want the name of the author in parenthesis along with the post title.
@@ -149,21 +159,21 @@ name in parenthesis:
```js
// routes/post.js
-export default Ember.Route.extend({
- titleToken: function(model) {
- var postName = model.get('name');
+export default class PostRoute extends Route {
+ titleToken(model) {
+ const postName = model.get('name');
- return model.get('author')
- .then(function (user) {
- var authorName = user.get('firstName') + user.get('lastName');
+ return model.get('author').then(function (user) {
+ const authorName = user.get('firstName') + user.get('lastName');
- return postName + '(by ' + authorName + ')';
- });
- }
+ return postName + '(by ' + authorName + ')';
+ });
+ },
});
```
With the same configuration for `Posts` and `Application` routes as in the previous example, this will result in this title:
+
- On /posts/1 - "Ember is Omakase (by John Smith) - Posts - My Blog"
It's worth noting that the page title will not update until all the promises have resolved.
@@ -176,14 +186,14 @@ is very straight forward and allows you to use the wonderful route based declara
Only a few tweaks are needed to use both of these addons together:
-* Install both addons:
+- Install both addons:
```sh
ember install ember-cli-head
ember install ember-cli-document-title
```
-* Add `headData` and `setTitle` to your `app/router.js`:
+- Add `headData` and `setTitle` to your `app/router.js`:
```js
const Router = Ember.Router.extend({
@@ -192,13 +202,13 @@ const Router = Ember.Router.extend({
setTitle(title) {
this.get('headData').set('title', title);
- }
+ },
});
```
-* Remove `` from your `app/index.html`.
+- Remove `<title>` from your `app/index.html`.
-* Update `app/templates/head.hbs` (added by ember-cli-head):
+- Update `app/templates/head.hbs` (added by ember-cli-head):
```hbs
{{! app/templates/head.hbs }}
diff --git a/package.json b/package.json
index 59b83a6..112a9c7 100644
--- a/package.json
+++ b/package.json
@@ -30,40 +30,48 @@
"test:all": "ember try:each"
},
"dependencies": {
- "ember-cli-babel": "^6.16.0",
+ "ember-cli-babel": "^7.26.11",
"npm-run-all": "^4.1.5"
},
"devDependencies": {
- "@ember/optional-features": "^0.6.3",
- "broccoli-asset-rev": "^2.7.0",
- "chai": "^4.1.2",
- "ember-ajax": "^3.1.0",
- "ember-cli": "~3.6.0-beta.1",
- "ember-cli-dependency-checker": "^3.0.0",
- "ember-cli-eslint": "^4.2.3",
- "ember-cli-htmlbars": "^3.0.0",
- "ember-cli-htmlbars-inline-precompile": "^1.0.3",
- "ember-cli-inject-live-reload": "^1.8.2",
+ "@ember/optional-features": "^2.0.0",
+ "@ember/test-helpers": "^2.9.3",
+ "babel-eslint": "^10.1.0",
+ "broccoli-asset-rev": "^3.0.0",
+ "chai": "^4.3.7",
+ "ember-auto-import": "^2.5.0",
+ "ember-cli": "~4.4.0",
+ "ember-cli-dependency-checker": "^3.3.1",
+ "ember-cli-htmlbars": "^6.0.1",
+ "ember-cli-inject-live-reload": "^2.1.0",
"ember-cli-sri": "^2.1.1",
- "ember-cli-template-lint": "^1.0.0-beta.1",
- "ember-cli-uglify": "^2.1.0",
+ "ember-cli-terser": "^4.0.2",
"ember-disable-prototype-extensions": "^1.1.3",
- "ember-export-application-global": "^2.0.0",
- "ember-fastboot-addon-tests": "^0.5.0",
- "ember-load-initializers": "^1.1.0",
- "ember-maybe-import-regenerator": "^0.1.6",
- "ember-qunit": "^3.4.1",
- "ember-resolver": "^5.0.1",
- "ember-source": "~3.6.0-beta.4",
- "ember-source-channel-url": "^1.1.0",
- "ember-try": "^1.0.0",
- "eslint-plugin-ember": "^5.2.0",
- "eslint-plugin-node": "^7.0.1",
+ "ember-export-application-global": "^2.0.1",
+ "ember-fastboot-addon-tests": "^0.5.1",
+ "ember-fetch": "^8.1.2",
+ "ember-load-initializers": "^2.1.2",
+ "ember-maybe-import-regenerator": "^1.0.0",
+ "ember-qunit": "^5.1.5",
+ "ember-resolver": "^8.0.3",
+ "ember-source": "~4.4.0",
+ "ember-source-channel-url": "^3.0.0",
+ "ember-template-lint": "^4.3.0",
+ "ember-try": "^2.0.0",
+ "eslint-config-prettier": "^8.6.0",
+ "eslint-plugin-ember": "^10.5.9",
+ "eslint-plugin-node": "^11.1.0",
+ "eslint-plugin-qunit": "^7.2.0",
"loader.js": "^4.7.0",
- "qunit-dom": "^0.8.0"
+ "qunit": "^2.19.3",
+ "qunit-dom": "^2.0.0",
+ "webpack": "^5.75.0"
},
"engines": {
- "node": "6.* || 8.* || >= 10.*"
+ "node": ">= 14.*"
+ },
+ "ember": {
+ "edition": "octane"
},
"ember-addon": {
"configPath": "tests/dummy/config"
diff --git a/tests/dummy/app/components/.gitkeep b/tests/dummy/app/components/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/tests/dummy/app/controllers/.gitkeep b/tests/dummy/app/controllers/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/tests/dummy/app/helpers/.gitkeep b/tests/dummy/app/helpers/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/tests/dummy/app/models/.gitkeep b/tests/dummy/app/models/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/tests/dummy/app/routes/.gitkeep b/tests/dummy/app/routes/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/tests/dummy/app/routes/about.js b/tests/dummy/app/routes/about.js
index 174665a..f2c5190 100644
--- a/tests/dummy/app/routes/about.js
+++ b/tests/dummy/app/routes/about.js
@@ -1,5 +1,5 @@
import Route from '@ember/routing/route';
-export default Route.extend({
- title: "About Us"
-});
+export default class AboutRoute extends Route {
+ title = 'About Us';
+}
diff --git a/tests/dummy/app/routes/application.js b/tests/dummy/app/routes/application.js
index 79257fe..35dfb12 100644
--- a/tests/dummy/app/routes/application.js
+++ b/tests/dummy/app/routes/application.js
@@ -1,10 +1,10 @@
import { makeArray } from '@ember/array';
import Route from '@ember/routing/route';
-export default Route.extend({
- title: function(tokens) {
+export default class ApplicationRoute extends Route {
+ title(tokens) {
tokens = makeArray(tokens);
tokens.unshift('My Blog');
return tokens.reverse().join(' - ');
}
-});
+}
diff --git a/tests/dummy/app/routes/candy.js b/tests/dummy/app/routes/candy.js
index 41cdc74..425057e 100644
--- a/tests/dummy/app/routes/candy.js
+++ b/tests/dummy/app/routes/candy.js
@@ -1,11 +1,11 @@
import Route from '@ember/routing/route';
-export default Route.extend({
+export default class CandyRoute extends Route {
title(tokens) {
return `My favorite candies are ${tokens.join(' and ')}`;
- },
+ }
- titleToken() {
+ get titleToken() {
return ['dumle', 'sort pepper'];
}
-});
+}
diff --git a/tests/dummy/app/routes/friendship-status.js b/tests/dummy/app/routes/friendship-status.js
index 4aeb3fc..bb89cd4 100644
--- a/tests/dummy/app/routes/friendship-status.js
+++ b/tests/dummy/app/routes/friendship-status.js
@@ -1,9 +1,9 @@
import Route from '@ember/routing/route';
-export default Route.extend({
- degree: 'best',
+export default class FriendshipStatusRoute extends Route {
+ degree = 'best';
- title: function(tokens) {
- return `We are ${this.get('degree')} ${tokens.join(' ')}`;
+ title(tokens) {
+ return `We are ${this.degree} ${tokens.join(' ')}`;
}
-});
+}
diff --git a/tests/dummy/app/routes/friendship-status/index.js b/tests/dummy/app/routes/friendship-status/index.js
index e99d1a8..6d74c82 100644
--- a/tests/dummy/app/routes/friendship-status/index.js
+++ b/tests/dummy/app/routes/friendship-status/index.js
@@ -1,9 +1,9 @@
import Route from '@ember/routing/route';
-export default Route.extend({
- status: 'friends',
+export default class FriendshipStatusIndexRoute extends Route {
+ status = 'friends';
- titleToken: function() {
- return this.get('status');
+ titleToken() {
+ return this.status;
}
-});
+}
diff --git a/tests/dummy/app/routes/posts.js b/tests/dummy/app/routes/posts.js
index 678f746..e63adde 100644
--- a/tests/dummy/app/routes/posts.js
+++ b/tests/dummy/app/routes/posts.js
@@ -1,5 +1,5 @@
import Route from '@ember/routing/route';
-export default Route.extend({
- titleToken: "Posts"
-});
+export default class PostsRoute extends Route {
+ titleToken = 'Posts';
+}
diff --git a/tests/dummy/app/routes/posts/index.js b/tests/dummy/app/routes/posts/index.js
index 8b949d2..1332cd5 100644
--- a/tests/dummy/app/routes/posts/index.js
+++ b/tests/dummy/app/routes/posts/index.js
@@ -1,13 +1,14 @@
import EmberObject from '@ember/object';
import Route from '@ember/routing/route';
-export default Route.extend({
- model: function() {
+export default class PostsIndexRoute extends Route {
+ model() {
return EmberObject.create({
- title: "Ember is omakase"
+ title: 'Ember is omakase',
});
- },
- titleToken: function(model) {
+ }
+
+ titleToken(model) {
return model.get('title');
}
-});
+}
diff --git a/tests/dummy/app/routes/promise.js b/tests/dummy/app/routes/promise.js
index 52f2dab..ddd084a 100644
--- a/tests/dummy/app/routes/promise.js
+++ b/tests/dummy/app/routes/promise.js
@@ -1,12 +1,11 @@
-import { Promise as EmberPromise } from 'rsvp';
import Route from '@ember/routing/route';
-export default Route.extend({
+export default class PromiseRoute extends Route {
titleToken() {
- return new EmberPromise(function(resolve) {
+ return new Promise((resolve) => {
setTimeout(function () {
resolve('This title is as async as possible');
}, 3000);
});
}
-});
+}
diff --git a/tests/dummy/app/routes/team.js b/tests/dummy/app/routes/team.js
index 92a77d1..90ba925 100644
--- a/tests/dummy/app/routes/team.js
+++ b/tests/dummy/app/routes/team.js
@@ -1,5 +1,5 @@
import Route from '@ember/routing/route';
-export default Route.extend({
- titleToken: 'The Team'
-});
+export default class TeamRoute extends Route {
+ titleToken = 'The Team';
+}
diff --git a/tests/dummy/app/templates/about.hbs b/tests/dummy/app/templates/about.hbs
index 52893dd..47ef473 100644
--- a/tests/dummy/app/templates/about.hbs
+++ b/tests/dummy/app/templates/about.hbs
@@ -1 +1 @@
-{{link-to "Posts" "posts" class="test-posts-link"}}
\ No newline at end of file
+<LinkTo class="test-posts-link" @route="posts">Posts</LinkTo>
\ No newline at end of file
diff --git a/tests/dummy/app/templates/components/.gitkeep b/tests/dummy/app/templates/components/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/tests/dummy/config/optional-features.json b/tests/dummy/config/optional-features.json
index b190262..77a734e 100644
--- a/tests/dummy/config/optional-features.json
+++ b/tests/dummy/config/optional-features.json
@@ -1,3 +1,5 @@
{
- "jquery-integration": false
+ "application-template-wrapper": false,
+ "jquery-integration": false,
+ "template-only-glimmer-components": true
}
diff --git a/tests/index.html b/tests/index.html
index 5209b85..2ceaf5c 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -1,25 +1,29 @@
<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Dummy Tests
-
-
+
+
- {{content-for "head"}}
- {{content-for "test-head"}}
+ {{content-for "head"}} {{content-for "test-head"}}
-
-
-
+
+
+
- {{content-for "head-footer"}}
- {{content-for "test-head-footer"}}
+ {{content-for "head-footer"}} {{content-for "test-head-footer"}}
- {{content-for "body"}}
- {{content-for "test-body"}}
+ {{content-for "body"}} {{content-for "test-body"}}
+
+
+
@@ -27,7 +31,6 @@
- {{content-for "body-footer"}}
- {{content-for "test-body-footer"}}
+ {{content-for "body-footer"}} {{content-for "test-body-footer"}}