Add a new service to abstract over fastboot.isFastBoot, in-line

clear-double-boot instance-initializer

Author: kategengler

app/controllers/project-version.js

@@ -17,7 +17,7 @@ export default class ProjectVersionController extends Controller {
   project;
 
   @service
-  fastboot;
+  prerender;
 
   @service router;
   @service('project') projectService;

app/instance-initializers/clear-double-boot.js

@@ -0,0 +1,48 @@
+// Overriding the ember-cli-fastboot instance-initializer so that
+// we can own this and migrate away.
+// When using `ember serve` when fastboot addon is installed the application
+// output will already be rendered to the DOM when the actual JavaScript
+// loads. Ember does not automatically clear its `rootElement` so this
+// leads to the "double" applications being visible at once (only the
+// "bottom" one is running via JS and is interactive).
+//
+// This removes any pre-rendered ember-view elements, so that the booting
+// application will replace the pre-rendered output
+export function clearHtml() {
+  let current = document.getElementById('fastboot-body-start');
+  let endMarker = document.getElementById('fastboot-body-end');
+
+  if (current && endMarker) {
+    let shoeboxNodes = document.querySelectorAll('[type="fastboot/shoebox"]');
+    let shoeboxNodesArray = []; // Note that IE11 doesn't support more concise options like Array.from, so we have to do something like this
+    for (let i = 0; i < shoeboxNodes.length; i++) {
+      shoeboxNodesArray.push(shoeboxNodes[i]);
+    }
+    let parent = current.parentElement;
+    let nextNode;
+    do {
+      nextNode = current.nextSibling;
+      parent.removeChild(current);
+      current = nextNode;
+    } while (
+      nextNode &&
+      nextNode !== endMarker &&
+      shoeboxNodesArray.indexOf(nextNode) < 0
+    );
+    endMarker.parentElement.removeChild(endMarker);
+  }
+}
+export default {
+  name: 'clear-double-boot',
+
+  initialize(instance) {
+    if (typeof FastBoot === 'undefined') {
+      var originalDidCreateRootView = instance.didCreateRootView;
+
+      instance.didCreateRootView = function () {
+        clearHtml();
+        originalDidCreateRootView.apply(instance, arguments);
+      };
+    }
+  },
+};

app/routes/application.js

@@ -15,7 +15,7 @@ export default class ApplicationRoute extends Route {
   router;
 
   @service
-  fastboot;
+  prerender;
 
   @service
   metrics;
@@ -25,7 +25,7 @@ export default class ApplicationRoute extends Route {
 
   constructor() {
     super(...arguments);
-    if (!this.fastboot.isFastBoot) {
+    if (!this.prerender.isPrerendering) {
       this.router.on('routeDidChange', this.trackPage);
 
       /* Hax from https://github.com/DockYard/ember-router-scroll/issues/263 

app/services/prerender.js

@@ -0,0 +1,9 @@
+import Service, { service } from '@ember/service';
+
+export default class PrerenderService extends Service {
+  @service fastboot;
+
+  get isPrerendering() {
+    return this.fastboot.isFastBoot;
+  }
+}

app/templates/project-version.gjs

@@ -44,7 +44,7 @@ import ScrollToTopButton from 'ember-api-docs/components/scroll-to-top-button';
     <section class="content-wrapper">
       {{outlet}}
 
-      {{#unless @controller.fastboot.isFastBoot}}
+      {{#unless @controller.prerender.isPrerendering}}
         <ScrollToTopButton />
       {{/unless}}
     </section>