Skip to content

Commit b121f85

Browse files
committed
Migrate away from ember-cli-head for <title> updates
1 parent 4f249a9 commit b121f85

File tree

9 files changed

+10525
-7657
lines changed

9 files changed

+10525
-7657
lines changed

README.md

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ This addon provides a helper for changing the title of the page you're on.
88
ember install ember-page-title
99
```
1010

11-
Add `{{head-layout}}` to your application's `application.hbs` template.
12-
1311
<details>
1412
<summary>Fastboot vs Non-Fastboot Notes</summary>
1513

@@ -54,21 +52,15 @@ module.exports = function (environment) {
5452
};
5553
```
5654

57-
### Fastboot
58-
59-
When working with other addons that use `ember-cli-head`, you'll need to create a custom `head.hbs` file that exposes the `<title>` tag properly:
60-
61-
```hbs
62-
<title>{{model.title}}</title>
63-
```
64-
65-
This file is added automatically if you use `ember install`. This is for all the folks using ember-cli-head addons like ember-cli-meta-tags.
66-
6755
### Deprecations
6856

6957
- Since **v5.2.2**: The `{{title}}` helper has been deprecated, use `{{page-title}}` instead, it has the same API. The
7058
`{{title}}` helper was an AST transform and will be removed in the next major release.
7159

60+
### Upgrading notes for 5.x to 6.x
61+
62+
From 6.x onward, you don't need to have `{{head-layout}}` within your application's `application.hbs` template. If you have `ember-cli-head` as direct dependency on your project, but not used for anything else you can also remove it.
63+
7264
### Upgrading notes for 3.x to 4.x
7365

7466
From 4.x onward, you need to have `{{head-layout}}` within your application's `application.hbs` template. Without this, you will not see a page title appear.

addon/helpers/page-title.js

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,30 @@
11
import { scheduleOnce } from '@ember/runloop';
22
import { inject as service } from '@ember/service';
33
import Helper from '@ember/component/helper';
4-
import { set, get } from '@ember/object';
4+
import { get } from '@ember/object';
5+
import { reads } from '@ember/object/computed';
56
import { guidFor } from '@ember/object/internals';
67
import { assign } from '@ember/polyfills';
78
import { getOwner } from '@ember/application';
89

9-
function updateTitle(tokens) {
10-
set(this, 'title', tokens.toString());
10+
function updateTitle(document, tokens, isFastBoot) {
11+
const toBeTitle = tokens.toString();
12+
13+
if (isFastBoot) {
14+
let childNodes = document.head.childNodes;
15+
for (let i = 0; i < childNodes.length; i++) {
16+
let node = childNodes.item(i);
17+
if (node.tagName.toLowerCase() === 'title') {
18+
document.head.removeChild(node);
19+
}
20+
}
21+
let titleEl = document.createElement('title');
22+
let titleContents = document.createTextNode(toBeTitle);
23+
titleEl.appendChild(titleContents);
24+
document.head.appendChild(titleEl);
25+
} else {
26+
document.title = toBeTitle;
27+
}
1128
}
1229

1330
/**
@@ -18,7 +35,9 @@ function updateTitle(tokens) {
1835
*/
1936
export default Helper.extend({
2037
pageTitleList: service(),
21-
headData: service(),
38+
document: service('-document'),
39+
fastboot: service(),
40+
isFastBoot: reads('fastboot.isFastBoot'),
2241

2342
init() {
2443
this._super();
@@ -40,7 +59,7 @@ export default Helper.extend({
4059
hash.id = guidFor(this);
4160
hash.title = params.join('');
4261
tokens.push(hash);
43-
scheduleOnce('afterRender', get(this, 'headData'), updateTitle, tokens);
62+
scheduleOnce('afterRender', updateTitle, get(this, 'document'), tokens, get(this, 'isFastBoot'));
4463
return '';
4564
},
4665

@@ -52,16 +71,17 @@ export default Helper.extend({
5271
let router = getOwner(this).lookup('router:main');
5372
let routes = router._routerMicrolib || router.router;
5473
let { activeTransition } = routes || {};
55-
let headData = get(this, 'headData');
74+
let document = get(this, 'document');
75+
let isFastBoot = get(this, 'isFastBoot');
5676
if (activeTransition) {
5777
activeTransition.promise.finally(function () {
58-
if (headData.isDestroyed) {
78+
if (document.isDestroyed) {
5979
return;
6080
}
61-
scheduleOnce('afterRender', headData, updateTitle, tokens);
81+
scheduleOnce('afterRender', updateTitle, document, tokens, isFastBoot);
6282
});
6383
} else {
64-
scheduleOnce('afterRender', headData, updateTitle, tokens);
84+
scheduleOnce('afterRender', updateTitle, document, tokens, isFastBoot);
6585
}
6686
},
6787
});

0 commit comments

Comments
 (0)