Prepare all the things

src/core/a11y.js

@@ -15,13 +15,32 @@ const DISABLED_RULES = [
   "region",
 ];
 
+export async function prepare(conf) {
+  if (!conf.a11y) {
+    return;
+  }
+  conf.state[name] = {
+    axeImportPromise: importAxe(),
+  };
+}
+
 export async function run(conf) {
   if (!conf.a11y) {
     return;
   }
 
+  /** @type {typeof window.axe} */
+  let axe;
+  try {
+    axe = await conf.state[name].axeImportPromise;
+  } catch (error) {
+    const msg = `Failed to load a11y linter. ${error.msg}`;
+    showError(msg, name);
+    return;
+  }
+
   const options = conf.a11y === true ? {} : conf.a11y;
-  const violations = await getViolations(options);
+  const violations = await getViolations(axe, options);
   for (const violation of violations) {
     /**
      * We're grouping by failureSummary as it contains hints to fix the issue.
@@ -49,9 +68,10 @@ export async function run(conf) {
 }
 
 /**
+ * @param {typeof window.axe} axe
  * @param {object} opts Options as described at https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter
  */
-async function getViolations(opts) {
+async function getViolations(axe, opts) {
   const { rules, ...otherOptions } = opts;
   const options = {
     rules: {
@@ -64,16 +84,6 @@ async function getViolations(opts) {
     reporter: "v1", // v1 includes a `failureSummary`
   };
 
-  let axe;
-  try {
-    axe = await importAxe();
-  } catch (error) {
-    const msg = "Failed to load a11y linter.";
-    showError(msg, name);
-    console.error(error);
-    return [];
-  }
-
   try {
     const result = await axe.run(document, options);
     return result.violations;

src/core/algorithms.js

@@ -7,24 +7,27 @@ import { fetchAsset } from "./text-loader.js";
 
 export const name = "core/algorithms";
 
-const cssPromise = loadStyle();
-
-async function loadStyle() {
-  try {
-    return (await import("text!../../assets/algorithms.css")).default;
-  } catch {
-    return fetchAsset("algorithms.css");
-  }
+export async function prepare() {
+  const style = document.createElement("style");
+  style.id = "respec-css-algorithms";
+  style.textContent = await loadStyle();
+  document.head.appendChild(style);
 }
 
 export async function run() {
   const elements = Array.from(document.querySelectorAll("ol.algorithm li"));
   elements
     .filter(li => li.textContent.trim().startsWith("Assert: "))
     .forEach(li => li.classList.add("assert"));
-  if (document.querySelector(".assert")) {
-    const style = document.createElement("style");
-    style.textContent = await cssPromise;
-    document.head.appendChild(style);
+  if (!document.querySelector(".assert")) {
+    document.getElementById("respec-css-algorithms").remove();
+  }
+}
+
+async function loadStyle() {
+  try {
+    return (await import("text!../../assets/algorithms.css")).default;
+  } catch {
+    return fetchAsset("algorithms.css");
   }
 }

src/core/biblio.js

@@ -8,29 +8,27 @@
 import { biblioDB } from "./biblio-db.js";
 import { createResourceHint } from "./utils.js";
 
-/** @type {Conf['biblio']} */
-export const biblio = {};
-
 // for backward compatibity
 export { wireReference, stringifyReference } from "./render-biblio.js";
 
 export const name = "core/biblio";
 
 const bibrefsURL = new URL("https://specref.herokuapp.com/bibrefs?refs=");
 
-// Opportunistically dns-prefetch to bibref server, as we don't know yet
-// if we will actually need to download references yet.
-const link = createResourceHint({
-  hint: "dns-prefetch",
-  href: bibrefsURL.origin,
-});
-document.head.appendChild(link);
-let doneResolver;
-
-/** @type {Promise<Conf['biblio']>} */
-const done = new Promise(resolve => {
-  doneResolver = resolve;
-});
+export async function prepare(conf) {
+  // Opportunistically dns-prefetch to bibref server, as we don't know yet
+  // if we will actually need to download references yet.
+  const link = createResourceHint({
+    hint: "dns-prefetch",
+    href: bibrefsURL.origin,
+  });
+  document.head.appendChild(link);
+
+  conf.state[name] = {
+    /** @type {Conf['biblio']} */
+    biblio: {},
+  };
+}
 
 export async function updateFromNetwork(
   refs,
@@ -62,17 +60,17 @@ export async function updateFromNetwork(
 }
 
 /**
+ * @param {Conf['biblio']} biblio
  * @param {string} key
- * @returns {Promise<BiblioData>}
+ * @returns {BiblioData}
  */
-export async function resolveRef(key) {
-  const biblio = await done;
+export function resolveRef(biblio, key) {
   if (!biblio.hasOwnProperty(key)) {
     return null;
   }
   const entry = biblio[key];
   if (entry.aliasOf) {
-    return await resolveRef(entry.aliasOf);
+    return resolveRef(biblio, entry.aliasOf);
   }
   return entry;
 }
@@ -130,12 +128,11 @@ export class Plugin {
   }
 
   async run() {
-    const finish = () => {
-      doneResolver(this.conf.biblio);
-    };
     if (!this.conf.localBiblio) {
       this.conf.localBiblio = {};
     }
+    /** @type {Conf["biblio"]} */
+    const biblio = this.conf.state[name].biblio;
     this.conf.biblio = biblio;
     const localAliases = Object.keys(this.conf.localBiblio)
       .filter(key => this.conf.localBiblio[key].hasOwnProperty("aliasOf"))
@@ -169,6 +166,5 @@ export class Plugin {
       Object.assign(biblio, data);
     }
     Object.assign(biblio, this.conf.localBiblio);
-    finish();
   }
 }

src/core/data-cite.js

@@ -9,13 +9,13 @@
  * `data-cite` to `href` attributes. `data-cite` attributes are added to markup
  * directly by the author as well as via other modules like core/xref.
  */
-import { biblio, resolveRef, updateFromNetwork } from "./biblio.js";
 import {
   refTypeFromContext,
   showError,
   showWarning,
   wrapInner,
 } from "./utils.js";
+import { resolveRef, updateFromNetwork } from "./biblio.js";
 import { sub } from "./pubsubhub.js";
 export const name = "core/data-cite";
 
@@ -26,9 +26,10 @@ export const name = "core/data-cite";
 export const THIS_SPEC = "__SPEC__";
 
 /**
+ * @param {Conf["biblio"]} biblio
  * @param {CiteDetails} citeDetails
  */
-async function getLinkProps(citeDetails) {
+function getLinkProps(biblio, citeDetails) {
   const { key, frag, path } = citeDetails;
   let href = "";
   let title = "";
@@ -37,7 +38,7 @@ async function getLinkProps(citeDetails) {
     href = document.location.href;
   } else {
     // Let's go look it up in spec ref...
-    const entry = await resolveRef(key);
+    const entry = resolveRef(biblio, key);
     if (!entry) {
       return null;
     }
@@ -156,18 +157,20 @@ export function toCiteDetails(elem) {
   return details;
 }
 
-export async function run() {
+export async function run(conf) {
+  /** @type {Conf["biblio"]} */
+  const biblio = conf.state["core/biblio"].biblio;
   /** @type {NodeListOf<HTMLElement>} */
   const elems = document.querySelectorAll(
     "dfn[data-cite]:not([data-cite='']), a[data-cite]:not([data-cite=''])"
   );
 
-  await updateBiblio([...elems]);
+  await updateBiblio(biblio, [...elems]);
 
   for (const elem of elems) {
     const originalKey = elem.dataset.cite;
     const citeDetails = toCiteDetails(elem);
-    const linkProps = await getLinkProps(citeDetails);
+    const linkProps = getLinkProps(biblio, citeDetails);
     if (linkProps) {
       linkElem(elem, linkProps, citeDetails);
     } else {
@@ -181,14 +184,14 @@ export async function run() {
 
 /**
  * Fetch and update `biblio` with entries corresponding to given elements
+ * @param {Conf["biblio"]} biblio
  * @param {HTMLElement[]} elems
  */
-async function updateBiblio(elems) {
-  const promisesForBibEntries = elems.map(toCiteDetails).map(async entry => {
-    const result = await resolveRef(entry.key);
+async function updateBiblio(biblio, elems) {
+  const bibEntries = elems.map(toCiteDetails).map(entry => {
+    const result = resolveRef(biblio, entry.key);
     return { entry, result };
   });
-  const bibEntries = await Promise.all(promisesForBibEntries);
 
   const missingBibEntries = bibEntries
     .filter(({ result }) => result === null)

src/core/data-type.js

@@ -9,25 +9,19 @@ import { fetchAsset } from "./text-loader.js";
 
 export const name = "core/data-type";
 
-const tooltipStylePromise = loadStyle();
-
-async function loadStyle() {
-  try {
-    return (await import("text!../../assets/datatype.css")).default;
-  } catch {
-    return fetchAsset("datatype.css");
-  }
+export async function prepare(conf) {
+  if (!conf.highlightVars) return;
+  const style = document.createElement("style");
+  style.id = "respec-css-data-type";
+  style.textContent = await loadStyle();
+  document.head.appendChild(style);
 }
 
 export async function run(conf) {
   if (!conf.highlightVars) {
     return;
   }
 
-  const style = document.createElement("style");
-  style.textContent = await tooltipStylePromise;
-  document.head.appendChild(style);
-
   let section = null;
   const varMap = new Map();
   /** @type {NodeListOf<HTMLElement>} */
@@ -46,3 +40,11 @@ export async function run(conf) {
     if (type) varElem.dataset.type = type;
   }
 }
+
+async function loadStyle() {
+  try {
+    return (await import("text!../../assets/datatype.css")).default;
+  } catch {
+    return fetchAsset("datatype.css");
+  }
+}

src/core/examples.js

@@ -39,8 +39,6 @@ const localizationStrings = {
 
 const l10n = getIntlData(localizationStrings);
 
-const cssPromise = loadStyle();
-
 async function loadStyle() {
   try {
     return (await import("text!../../assets/examples.css")).default;
@@ -80,7 +78,7 @@ export async function run() {
   );
   if (!examples.length) return;
 
-  const css = await cssPromise;
+  const css = await loadStyle();
   document.head.insertBefore(
     html`<style>
       ${css}

src/core/highlight-vars.js

@@ -13,24 +13,22 @@ import { sub } from "./pubsubhub.js";
 
 export const name = "core/highlight-vars";
 
-const hlVarsPromise = loadStyle();
-
-async function loadStyle() {
-  try {
-    return (await import("text!../../assets/var.css")).default;
-  } catch {
-    return fetchAsset("var.css");
+export async function prepare(conf) {
+  if (!conf.highlightVars) {
+    return;
   }
+
+  const style = document.createElement("style");
+  style.id = "respec-css-highlight-vars";
+  style.textContent = await loadStyle();
+  style.classList.add("removeOnSave");
+  document.head.appendChild(style);
 }
 
 export async function run(conf) {
   if (!conf.highlightVars) {
     return;
   }
-  const styleElement = document.createElement("style");
-  styleElement.textContent = await hlVarsPromise;
-  styleElement.classList.add("removeOnSave");
-  document.head.appendChild(styleElement);
 
   document
     .querySelectorAll("var")
@@ -42,6 +40,14 @@ export async function run(conf) {
   });
 }
 
+async function loadStyle() {
+  try {
+    return (await import("text!../../assets/var.css")).default;
+  } catch {
+    return fetchAsset("var.css");
+  }
+}
+
 function highlightListener(ev) {
   ev.stopPropagation();
   const { target: varElem } = ev;