Migrate away from ember-cli-head for <title> updates

Author: raido

README.md

@@ -8,8 +8,6 @@ This addon provides a helper for changing the title of the page you're on.
 ember install ember-page-title
 ```
 
-Add `{{head-layout}}` to your application's `application.hbs` template.
-
 <details>
 <summary>Fastboot vs Non-Fastboot Notes</summary>
 
@@ -60,21 +58,15 @@ module.exports = function (environment) {
 };
 ```
 
-### Fastboot
-
-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:
-
-```hbs
-<title>{{model.title}}</title>
-```
-
-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.
-
 ### Deprecations
 
 - Since **v5.2.2**: The `{{title}}` helper has been deprecated, use `{{page-title}}` instead, it has the same API. The
   `{{title}}` helper was an AST transform and will be removed in the next major release.
 
+### Upgrading notes for 5.x to 6.x
+
+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.
+
 ### Upgrading notes for 3.x to 4.x
 
 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

@@ -1,13 +1,29 @@
 import { scheduleOnce } from '@ember/runloop';
 import { inject as service } from '@ember/service';
 import Helper from '@ember/component/helper';
-import { set } from '@ember/object';
+import { reads } from '@ember/object/computed';
 import { guidFor } from '@ember/object/internals';
 import { assign } from '@ember/polyfills';
 import { getOwner } from '@ember/application';
 
-function updateTitle(tokens) {
-  set(this, 'title', tokens.toString());
+function updateTitle(document, tokens, isFastBoot) {
+  const toBeTitle = tokens.toString();
+
+  if (isFastBoot) {
+    let childNodes = document.head.childNodes;
+    for (let i = 0; i < childNodes.length; i++) {
+      let node = childNodes.item(i);
+      if (node.tagName.toLowerCase() === 'title') {
+        document.head.removeChild(node);
+      }
+    }
+    let titleEl = document.createElement('title');
+    let titleContents = document.createTextNode(toBeTitle);
+    titleEl.appendChild(titleContents);
+    document.head.appendChild(titleEl);
+  } else {
+    document.title = toBeTitle;
+  }
 }
 
 /**
@@ -18,7 +34,9 @@ function updateTitle(tokens) {
  */
 export default Helper.extend({
   pageTitleList: service(),
-  headData: service(),
+  document: service('-document'),
+  fastboot: service(),
+  isFastBoot: reads('fastboot.isFastBoot'),
 
   init() {
     this._super();
@@ -40,7 +58,7 @@ export default Helper.extend({
     hash.id = guidFor(this);
     hash.title = params.join('');
     tokens.push(hash);
-    scheduleOnce('afterRender', this.headData, updateTitle, tokens);
+    scheduleOnce('afterRender', updateTitle, this.document, tokens, this.isFastBoot);
     return '';
   },
 
@@ -52,16 +70,15 @@ export default Helper.extend({
     let router = getOwner(this).lookup('router:main');
     let routes = router._routerMicrolib || router.router;
     let { activeTransition } = routes || {};
-    let headData = this.headData;
     if (activeTransition) {
-      activeTransition.promise.finally(function () {
-        if (headData.isDestroyed) {
+      activeTransition.promise.finally(() => {
+        if (this.isDestroyed) {
           return;
         }
-        scheduleOnce('afterRender', headData, updateTitle, tokens);
+        scheduleOnce('afterRender', updateTitle, this.document, tokens, this.isFastBoot);
       });
     } else {
-      scheduleOnce('afterRender', headData, updateTitle, tokens);
+      scheduleOnce('afterRender', updateTitle, this.document, tokens, this.isFastBoot);
     }
   },
 });