Setup prember

Author: NullVoxPopuli

docs-app/config/fastboot.js

@@ -0,0 +1,24 @@
+/* global ReadableStream, WritableStream, TransformStream */
+module.exports = function () {
+  return {
+    buildSandboxGlobals(defaultGlobals) {
+      return Object.assign({}, defaultGlobals, {
+        fetch,
+        AbortController,
+        ReadableStream:
+          typeof ReadableStream !== 'undefined'
+            ? ReadableStream
+            : require('node:stream/web').ReadableStream,
+        WritableStream:
+          typeof WritableStream !== 'undefined'
+            ? WritableStream
+            : require('node:stream/web').WritableStream,
+        TransformStream:
+          typeof TransformStream !== 'undefined'
+            ? TransformStream
+            : require('node:stream/web').TransformStream,
+        Headers: typeof Headers !== 'undefined' ? Headers : undefined,
+      });
+    },
+  };
+};

docs-app/ember-cli-build.js

@@ -4,11 +4,24 @@ const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 const sortBy = require('lodash.sortby');
 
 module.exports = function (defaults) {
+  let environment = EmberApp.env();
+  let isProduction = environment === 'production';
+
   const app = new EmberApp(defaults, {
     // Add options here
     'ember-cli-babel': {
       enableTypeScriptTransform: true,
     },
+    prember: {
+      enabled: isProduction || process.env.PREMBER === 'true',
+      urls: async function () {
+        let data = await urlsForPrerender();
+
+        console.error(data);
+
+        return data;
+      },
+    },
   });
 
   // Use `app.import` to add additional libraries to the generated
@@ -114,19 +127,17 @@ const createManifest = createUnplugin((options) => {
     name: 'create-manifest',
     async buildStart() {
       const path = await import('node:path');
-      const { globbySync } = await import('globby');
 
-      let paths = globbySync(include, {
-        cwd: path.join(process.cwd(), src),
-        expandDirectories: true,
+      let reshaped = await buildManifest({
+        src,
+        include,
+        exclude,
       });
 
-      paths = paths.filter((path) => !exclude.some((pattern) => path.match(pattern)));
-
       await this.emitFile({
         type: 'asset',
         fileName: path.join(dest, name),
-        source: JSON.stringify(reshape(paths)),
+        source: JSON.stringify(reshaped),
       });
     },
     watchChange(id) {
@@ -135,6 +146,32 @@ const createManifest = createUnplugin((options) => {
   };
 });
 
+async function urlsForPrerender() {
+  let manifest = await buildManifest({
+    src: 'public/docs',
+    include: '**/*',
+    exclude: [],
+  });
+
+  return manifest;
+}
+
+async function buildManifest(options) {
+  const { src, include, exclude } = options;
+
+  const path = await import('node:path');
+  const { globbySync } = await import('globby');
+
+  let paths = globbySync(include, {
+    cwd: path.join(process.cwd(), src),
+    expandDirectories: true,
+  });
+
+  paths = paths.filter((path) => !exclude.some((pattern) => path.match(pattern)));
+
+  return reshape(paths);
+}
+
 /**
  * @param {string[]} paths
  */

docs-app/package.json

@@ -22,6 +22,8 @@
     "lint:prettier": "pnpm -w exec lint prettier",
     "lint:types": "glint",
     "start": "concurrently 'ember serve' 'pnpm _syncPnpm --watch' --names 'docs serve,docs sync deps'",
+    "start:prod": "concurrently 'ember serve --environment=production' 'pnpm _syncPnpm --watch' --names 'serve prod,sync deps'",
+    "start:prember": "PREMBER=true concurrently 'ember serve --environment=production' 'pnpm _syncPnpm --watch' --names 'serve prod,sync deps'",
     "test": "ember test",
     "test:ember": "ember test",
     "_syncPnpm": "pnpm sync-dependencies-meta-injected"
@@ -82,6 +84,7 @@
     "ember-cli": "~5.0.0",
     "ember-cli-app-version": "^6.0.0",
     "ember-cli-babel": "^7.26.11",
+    "ember-cli-fastboot": "^4.1.1",
     "ember-cli-htmlbars": "^6.1.1",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sri": "^2.1.1",
@@ -104,6 +107,7 @@
     "globby": "^13.1.4",
     "loader.js": "^4.7.0",
     "pnpm-sync-dependencies-meta-injected": "0.0.8",
+    "prember": "^2.0.0",
     "prettier": "^2.8.1",
     "prettier-plugin-ember-template-tag": "^0.3.2",
     "qunit": "^2.19.3",

ember-primitives/src/color-scheme.ts

@@ -53,19 +53,54 @@ export function sync() {
 }
 
 export const prefers = {
-  dark: () => window.matchMedia('(prefers-color-scheme: dark)').matches,
-  light: () => window.matchMedia('(prefers-color-scheme: light)').matches,
-  custom: (name: string) => window.matchMedia(`(prefers-color-scheme: ${name})`).matches,
-  none: () => window.matchMedia('(prefers-color-scheme: no-preference)').matches,
+  dark: () => {
+    // Fastboot has no graceful fallbacks
+    if (typeof matchMedia === 'undefined') return;
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  },
+  light: () => {
+    // Fastboot has no graceful fallbacks
+    if (typeof matchMedia === 'undefined') return;
+
+    return window.matchMedia('(prefers-color-scheme: light)').matches;
+  },
+  custom: (name: string) => {
+    // Fastboot has no graceful fallbacks
+    if (typeof matchMedia === 'undefined') return;
+
+    return window.matchMedia(`(prefers-color-scheme: ${name})`).matches;
+  },
+  none: () => {
+    // Fastboot has no graceful fallbacks
+    if (typeof matchMedia === 'undefined') return;
+
+    return window.matchMedia('(prefers-color-scheme: no-preference)').matches;
+  },
 };
 
 const LOCAL_PREF_KEY = 'ember-primitives/color-scheme#local-preference';
 
 export const localPreference = {
   isSet: () => Boolean(localPreference.read()),
-  read: () => localStorage.getItem(LOCAL_PREF_KEY),
-  update: (value: string) => localStorage.setItem(LOCAL_PREF_KEY, value),
-  delete: () => localStorage.removeItem(LOCAL_PREF_KEY),
+  read: () => {
+    // Fastboot has no graceful fallbacks
+    if (typeof localStorage === 'undefined') return;
+
+    return localStorage.getItem(LOCAL_PREF_KEY);
+  },
+  update: (value: string) => {
+    // Fastboot has no graceful fallbacks
+    if (typeof localStorage === 'undefined') return;
+
+    return localStorage.setItem(LOCAL_PREF_KEY, value);
+  },
+  delete: () => {
+    // Fastboot has no graceful fallbacks
+    if (typeof localStorage === 'undefined') return;
+
+    return localStorage.removeItem(LOCAL_PREF_KEY);
+  },
 };
 
 export function getColorScheme(element?: HTMLElement) {

ember-primitives/src/proper-links.ts

@@ -66,6 +66,9 @@ export function properLinks<Instance extends {}, Klass = { new (...args: any[]):
  * This function only requires that a framework object with an owner is passed.
  */
 export function setup(parent: object, ignore?: string[]) {
+  // Fastboot has no graceful fallbacks
+  if (typeof document === 'undefined') return;
+
   const handler = (event: MouseEvent) => {
     /**
      * event.target may not be an anchor,