Replace fastboot with a prerender script that uses playwright

- Replace ember-cli-head with <InHead> component
- Replace fastboot's shoebox behavior with similar

Author: kategengler

.gitignore

@@ -29,3 +29,6 @@ local.log
 # ember-api-docs-data checkout
 /ember-api-docs-data/
 /ember-api-docs-data
+
+# prerendered output tmp dir
+/prerender

CONTRIBUTING.md

@@ -80,22 +80,22 @@ cd to the cloned ember-api-docs directory
 ensure Node.js and npm are installed
 
 follow these commands to build ember.js
- - npm install
- - npm build
+ - pnpm install
+ - pnpm build
 ```
 
 ## Development steps
 
 1. Follow the setup steps listed above under [Building Ember.js API](#building-emberjs-api-docs).
 
-2. To start the development server, run `npm start`.
+2. To start the development server, run `pnpm start`.
 
-3. To run all tests run `npm test`
+3. To run all tests run `pnpm test`
 
-4. To run the app with fastboot cli like our server deployment run the following commands,
+4. To run prerender and run the site as it would be for a production deploy,
 ```
-- ember deploy production
-- ./bin/ember-fastboot tmp/deploy-dist
+- pnpm build
+- cd dist && npx http-server
 ```
 
 

app/adapters/application.js

@@ -80,9 +80,7 @@ export default class Application extends JSONAPIAdapter {
       throw new Error('Unexpected model lookup');
     }
 
-    const base = this.fastboot.isFastBoot
-      ? config.APP.domain
-      : window.location.origin;
+    const base = window.location.origin;
 
     url = `${base}/${url}.json`;
     try {

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

@@ -1,19 +1,11 @@
-// 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
+// This removes any pre-rendered 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');
+  let current = document.getElementById('prerender-body-start');
+  let endMarker = document.getElementById('prerender-body-end');
 
   if (current && endMarker) {
-    let shoeboxNodes = document.querySelectorAll('[type="fastboot/shoebox"]');
+    let shoeboxNodes = document.querySelectorAll('[type="prerender/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]);
@@ -38,7 +30,7 @@ export default {
   initialize(instance) {
     const prerender = instance.lookup('service:prerender');
     if (!prerender.isPrerendering) {
-      var originalDidCreateRootView = instance.didCreateRootView;
+      const originalDidCreateRootView = instance.didCreateRootView;
 
       instance.didCreateRootView = function () {
         clearHtml();

…ance-initializers/ember-data-fastboot.js …nce-initializers/ember-data-prerender.jsapp/instance-initializers/ember-data-fastboot.js renamed to app/instance-initializers/ember-data-prerender.js app/instance-initializers/ember-data-fastboot.js renamed to app/instance-initializers/ember-data-prerender.js

@@ -1,8 +1,10 @@
-import Ember from 'ember';
+import { dasherize } from '@ember/string';
 
 export function initialize(applicationInstance) {
+  window.__emberApiDocs = window.__emberApiDocs ?? applicationInstance;
+
   let store = applicationInstance.lookup('service:store');
-  let shoebox = applicationInstance.lookup('service:fastboot').get('shoebox');
+  let shoebox = applicationInstance.lookup('service:shoebox');
   const isPrerendering =
     applicationInstance.lookup('service:prerender').isPrerendering;
 
@@ -18,7 +20,7 @@ export function initialize(applicationInstance) {
     return;
   }
 
-  shoebox.put('ember-data-store', {
+  shoebox?.put('ember-data-store', {
     get records() {
       const modelNames = Object.keys(store._modelFactoryCache);
       return modelNames
@@ -34,7 +36,7 @@ export function initialize(applicationInstance) {
             const link = record[meta.kind](name).link();
 
             if (link) {
-              const dashName = Ember.String.dasherize(name);
+              const dashName = dasherize(name);
 
               serializedRecord.data.relationships =
                 serializedRecord.data.relationships || {};
@@ -60,6 +62,6 @@ export function initialize(applicationInstance) {
 }
 
 export default {
-  name: 'ember-data-fastboot',
+  name: 'ember-data-prerender',
   initialize,
 };

app/instance-initializers/ember-meta-store.js

@@ -2,11 +2,10 @@ import { isPresent } from '@ember/utils';
 
 export function initialize(appInstance) {
   const metaStore = appInstance.lookup('service:meta-store');
-  const fastBootService = appInstance.lookup('service:fastboot');
+  const shoebox = appInstance.lookup('service:shoebox');
+  const isPrerendering = appInstance.lookup('service:prerender').isPrerendering;
 
-  const shoebox = fastBootService.get('shoebox');
-
-  if (typeof FastBoot !== 'undefined') {
+  if (isPrerendering) {
     shoebox.put(
       'meta-store',
       metaStore.getProperties('availableProjectVersions', 'projectRevMap'),

app/router.js

@@ -2,7 +2,7 @@ import EmberRouter from '@ember/routing/router';
 import config from 'ember-api-docs/config/environment';
 import { withHashSupport } from 'ember-api-docs/utils/url-hash-polyfill';
 
-// The following adds support for URL hash routing for those URLs not rendered with fastboot
+// The following adds support for URL hash routing for those URLs not prerendered
 @withHashSupport
 class AppRouter extends EmberRouter {
   location = config.locationType;

app/routes/application.js

@@ -23,14 +23,17 @@ export default class ApplicationRoute extends Route {
   @service
   routerScroll;
 
+  @service
+  shoebox;
+
   constructor() {
     super(...arguments);
     if (!this.prerender.isPrerendering) {
       this.router.on('routeDidChange', this.trackPage);
 
       /* Hax from https://github.com/DockYard/ember-router-scroll/issues/263 
          to handle router scroll behavior when the page was initially served 
-         with fastboot
+         pre-rendered
        */
       this.routerScroll.set('preserveScrollPosition', true);
 
@@ -40,8 +43,16 @@ export default class ApplicationRoute extends Route {
         }
       }, 1000);
     }
+
+    if (this.prerender.isPrerendering) {
+      this.router.on('routeDidChange', this.storeShoebox);
+    }
   }
 
+  storeShoebox = () => {
+    this.shoebox.store();
+  };
+
   trackPage = () => {
     // this is constant for this app and is only used to identify page views in the GA dashboard
     const hostname = ENV.APP.domain.replace(/(http|https)?:?\/\//g, '');

app/routes/not-found.js

@@ -1,17 +1,6 @@
 import Route from '@ember/routing/route';
-import { service } from '@ember/service';
 
 export default class NotFoundRoute extends Route {
-  @service fastboot;
-
-  beforeModel() {
-    if (!this.fastboot.isFastBoot) {
-      return;
-    }
-
-    this.fastboot.response.statusCode = 404;
-  }
-
   redirect() {
     if (typeof window === 'undefined' || !window.location) {
       return;

app/routes/project-version.js

@@ -4,12 +4,7 @@ import semverCompare from 'semver-compare';
 import getFullVersion from 'ember-api-docs/utils/get-full-version';
 import getLastVersion from 'ember-api-docs/utils/get-last-version';
 
-import config from 'ember-api-docs/config/environment';
-
 export default class ProjectVersionRoute extends Route {
-  @service
-  fastboot;
-
   @service
   headData;
 
@@ -115,16 +110,6 @@ export default class ProjectVersionRoute extends Route {
   _gatherHeadDataFromVersion(model, projectVersion) {
     this.headData.isRelease = projectVersion === 'release';
     this.headData.compactVersion = model.get('compactVersion');
-    this.headData.urlVersion = projectVersion;
-    if (!this.headData.isRelease) {
-      let request = this.fastboot.request;
-      let href = this.fastboot.isFastBoot
-        ? `${config.APP.domain}/${request.path}`
-        : window.location.href;
-      let version = new RegExp(model.get('compactVersion'), 'g');
-      let canonicalUrl = href.replace(version, 'release');
-      this.headData.canonicalUrl = canonicalUrl;
-    }
   }
 
   serialize(model) {