Replace fastboot + prember with a playwright script

.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

@@ -2,7 +2,6 @@ import { service } from '@ember/service';
 import JSONAPIAdapter from '@ember-data/adapter/json-api';
 import { pluralize } from 'ember-inflector';
 import { isBlank } from '@ember/utils';
-import config from 'ember-api-docs/config/environment';
 
 export default class Application extends JSONAPIAdapter {
   currentProject = '';
@@ -80,9 +79,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/components/in-head.gjs

@@ -0,0 +1,9 @@
+function getHead() {
+  return document.head;
+}
+
+<template>
+  {{#in-element (getHead) insertBefore=null}}
+    {{yield}}
+  {{/in-element}}
+</template>

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,41 @@
+// This removes any pre-rendered elements, so that the booting
+// application will replace the pre-rendered output
+export function clearHtml() {
+  let current = document.getElementById('prerender-body-start');
+  let endMarker = document.getElementById('prerender-body-end');
+
+  if (current && endMarker) {
+    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]);
+    }
+    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) {
+    const prerender = instance.lookup('service:prerender');
+    if (!prerender.isPrerendering) {
+      const originalDidCreateRootView = instance.didCreateRootView;
+
+      instance.didCreateRootView = function () {
+        clearHtml();
+        originalDidCreateRootView.apply(instance, arguments);
+      };
+    }
+  },
+};

app/instance-initializers/ember-data-prerender.js

@@ -0,0 +1,67 @@
+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:shoebox');
+  const isPrerendering =
+    applicationInstance.lookup('service:prerender').isPrerendering;
+
+  if (!isPrerendering) {
+    if (!shoebox) {
+      return;
+    }
+    let dump = shoebox.retrieve('ember-data-store');
+    if (!dump) {
+      return;
+    }
+    store.pushPayload(dump.records);
+    return;
+  }
+
+  shoebox?.put('ember-data-store', {
+    get records() {
+      const modelNames = Object.keys(store._modelFactoryCache);
+      return modelNames
+        .map((name) => {
+          return store.peekAll(name).toArray();
+        })
+        .reduce((a, b) => a.concat(b), [])
+        .filter((record) => record.get('isLoaded') && !record.get('isNew'))
+        .map((record) => {
+          const serializedRecord = record.serialize({ includeId: true });
+
+          record.eachRelationship((name, meta) => {
+            const link = record[meta.kind](name).link();
+
+            if (link) {
+              const dashName = dasherize(name);
+
+              serializedRecord.data.relationships =
+                serializedRecord.data.relationships || {};
+              serializedRecord.data.relationships[dashName] =
+                serializedRecord.data.relationships[dashName] || {};
+              serializedRecord.data.relationships[dashName].links = {
+                related: link,
+              };
+            }
+          });
+
+          return serializedRecord;
+        })
+        .reduce(
+          (a, b) => {
+            a.data.push(b.data);
+            return a;
+          },
+          { data: [] },
+        );
+    },
+  });
+}
+
+export default {
+  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

@@ -15,22 +15,25 @@ export default class ApplicationRoute extends Route {
   router;
 
   @service
-  fastboot;
+  prerender;
 
   @service
   metrics;
 
   @service
   routerScroll;
 
+  @service
+  shoebox;
+
   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 
          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) {

app/routes/project.js

@@ -25,7 +25,7 @@ export default class ProjectRoute extends Route {
     });
   }
 
-  // Using redirect instead of afterModel so transition succeeds and returns 307 in fastboot
+  // Using redirect instead of afterModel so transition succeeds
   redirect(project /*, transition */) {
     return this.router.transitionTo(
       'project-version',

app/services/head-data.js

@@ -5,7 +5,6 @@ export default class HeadDataService extends Service {
   @tracked title;
   @tracked isRelease;
   @tracked compactVersion;
-  @tracked urlVersion;
   @tracked canonicalUrl;
   @tracked description;
   @tracked cdnDomain;

app/services/prerender.js

@@ -0,0 +1,7 @@
+import Service from '@ember/service';
+
+export default class PrerenderService extends Service {
+  get isPrerendering() {
+    return window.__isPrerendering;
+  }
+}