refactor: move obvious global code to prepare()

src/core/algorithms.js

@@ -7,8 +7,6 @@ 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;
@@ -24,7 +22,7 @@ export async function run() {
     .forEach(li => li.classList.add("assert"));
   if (document.querySelector(".assert")) {
     const style = document.createElement("style");
-    style.textContent = await cssPromise;
+    style.textContent = await loadStyle();
     document.head.appendChild(style);
   }
 }

src/core/biblio.js

@@ -18,13 +18,16 @@ 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);
+export async function prepare() {
+  // 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']>} */

src/core/data-type.js

@@ -9,8 +9,6 @@ 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;
@@ -25,7 +23,7 @@ export async function run(conf) {
   }
 
   const style = document.createElement("style");
-  style.textContent = await tooltipStylePromise;
+  style.textContent = await loadStyle();
   document.head.appendChild(style);
 
   let section = null;

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,8 +13,6 @@ 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;
@@ -28,7 +26,7 @@ export async function run(conf) {
     return;
   }
   const styleElement = document.createElement("style");
-  styleElement.textContent = await hlVarsPromise;
+  styleElement.textContent = await loadStyle();
   styleElement.classList.add("removeOnSave");
   document.head.appendChild(styleElement);
 

src/core/highlight.js

@@ -12,8 +12,6 @@ export const name = "core/highlight";
 
 const nextMsgId = msgIdGenerator("highlight");
 
-const ghCssPromise = loadStyle();
-
 async function loadStyle() {
   try {
     return (await import("text!../../assets/highlight.css")).default;
@@ -101,7 +99,7 @@ export async function run(conf) {
   const promisesToHighlight = highlightables
     .filter(elem => elem.textContent.trim())
     .map(highlightElement);
-  const ghCss = await ghCssPromise;
+  const ghCss = await loadStyle();
   document.head.appendChild(
     html`<style>
       ${ghCss}

src/core/issues-notes.js

@@ -78,8 +78,6 @@ const localizationStrings = {
   },
 };
 
-const cssPromise = loadStyle();
-
 async function loadStyle() {
   try {
     return (await import("text!../../assets/issues-notes.css")).default;
@@ -385,7 +383,7 @@ export async function run(conf) {
     return; // nothing to do.
   }
   const ghIssues = await fetchAndStoreGithubIssues(conf.github);
-  const css = await cssPromise;
+  const css = await loadStyle();
   const { head: headElem } = document;
   headElem.insertBefore(
     html`<style>

src/core/style.js

@@ -12,9 +12,6 @@
 import { fetchAsset } from "./text-loader.js";
 export const name = "core/style";
 
-// Opportunistically inserts the style, with the chance to reduce some FOUC
-const styleElement = insertStyle();
-
 async function loadStyle() {
   try {
     return (await import("text!../../assets/respec.css")).default;
@@ -31,8 +28,13 @@ async function insertStyle() {
   return styleElement;
 }
 
-export async function run(conf) {
-  if (conf.noReSpecCSS) {
-    (await styleElement).remove();
+export async function prepare(conf) {
+  if (!conf.noReSpecCSS) {
+    // Insert style early to reduce FOUC
+    await insertStyle();
   }
 }
+
+export async function run(_conf) {
+  /** nothing to do */
+}

src/core/webidl.js

@@ -367,8 +367,6 @@ export function addIDLHeader(pre) {
   addCopyIDLButton(header);
 }
 
-const cssPromise = loadStyle();
-
 async function loadStyle() {
   try {
     return (await import("text!../../assets/webidl.css")).default;
@@ -386,7 +384,7 @@ export async function run() {
     const link = document.querySelector("head link");
     if (link) {
       const style = document.createElement("style");
-      style.textContent = await cssPromise;
+      style.textContent = await loadStyle();
       link.before(style);
     }
   }

src/core/xref.js

@@ -35,14 +35,16 @@ const profiles = {
 
 export const API_URL = "https://respec.org/xref/";
 
-if (
-  !document.querySelector("link[rel='preconnect'][href='https://respec.org']")
-) {
-  const link = createResourceHint({
-    hint: "preconnect",
-    href: "https://respec.org",
-  });
-  document.head.appendChild(link);
+export function prepare() {
+  if (
+    !document.querySelector("link[rel='preconnect'][href='https://respec.org']")
+  ) {
+    const link = createResourceHint({
+      hint: "preconnect",
+      href: "https://respec.org",
+    });
+    document.head.appendChild(link);
+  }
 }
 
 /**