Move instance initializer cleanup to head-layout component

Previously, any eventual head data built by fastboot was cleaned up in an instance initializer. This was now moved into the head-layout component, where this happens on init.

This fixes an issue where this cleanup happens multiple times when using lazy loading engines.

Additionally, this moves the head-layout component into the addon namespace, which makes it possible to overwrite/extend from it.

Author: Francesco Novy

addon/components/head-layout.js

@@ -0,0 +1,58 @@
+import Component from '@ember/component';
+import { get, computed } from '@ember/object';
+import { getOwner } from '@ember/application';
+import layout from '../templates/components/head-layout';
+
+export default Component.extend({
+  tagName: '',
+  layout,
+
+  /**
+   * If true, this will tear down any existing head on init of this component.
+   * This is useful if there is a head built with fastboot - it will then be torn down when this is initialized in the browser.
+   * If you do not want this behavior, you can set this to false.
+   * @public
+   */
+  shouldTearDownOnInit: true,
+
+  headElement: computed(function() {
+    let documentService = getOwner(this).lookup('service:-document');
+    return documentService.head;
+  }),
+
+  init() {
+    this._super(...arguments);
+
+    if (get(this, 'shouldTearDownOnInit')) {
+      this._tearDownHead();
+    }
+  },
+
+  /**
+   * Tear down any previous head, if there was one.
+   * @private
+   */
+  _tearDownHead() {
+    if (this._isFastboot()) {
+      return;
+    }
+
+    // clear fast booted head (if any)
+    let startMeta = document.querySelector('meta[name="ember-cli-head-start"]');
+    let endMeta = document.querySelector('meta[name="ember-cli-head-end"]');
+    if (startMeta && endMeta) {
+      let el = startMeta.nextSibling;
+      while (el && el !== endMeta) {
+        document.head.removeChild(el);
+        el = startMeta.nextSibling;
+      }
+      document.head.removeChild(startMeta);
+      document.head.removeChild(endMeta);
+    }
+  },
+
+  _isFastboot() {
+    return typeof FastBoot !== 'undefined'
+  }
+
+});

app/components/head-layout.js

@@ -1,11 +1 @@
-import Ember from 'ember';
-import layout from 'ember-cli-head/templates/components/head-layout';
-
-export default Ember.Component.extend({
-  tagName: '',
-  headElement: Ember.computed(function() {
-    let documentService = Ember.getOwner(this).lookup('service:-document');
-    return documentService.head;
-  }),
-  layout
-});
+export { default } from 'ember-cli-head/components/head-layout';

app/instance-initializers/head-browser.js

@@ -1,27 +1,8 @@
-import ENV from '../config/environment';
-
-export function initialize() {
-  if (ENV['ember-cli-head'] && ENV['ember-cli-head']['suppressBrowserRender']) { return true; }
-
-  // clear fast booted head (if any)
-  let startMeta = document.querySelector('meta[name="ember-cli-head-start"]')
-  let endMeta = document.querySelector('meta[name="ember-cli-head-end"]')
-  if (startMeta && endMeta) {
-    let el = startMeta.nextSibling
-    while(el && el !== endMeta) {
-      document.head.removeChild(el);
-      el = startMeta.nextSibling;
-    }
-    document.head.removeChild(startMeta);
-    document.head.removeChild(endMeta);
-  }
-}
-
 export default {
   name: 'head-browser',
   initialize() {
-    if (typeof FastBoot === 'undefined') {
-      initialize(...arguments);
-    }
+    // do nothing!
+    // this functionality has been moved into addon/components/head-layout.js
+    // This is only here in order to not break existing addons relying on this, e.g. ember-page-title.
   }
 };