refactor: dynamic import for assets

.babelrc

@@ -9,6 +9,8 @@
     ]
   ],
   "plugins": [
+    "./tools/babel-plugin-dynamic-import-requirejs",
+    "./tools/babel-plugin-import-meta-ignore",
     "./tools/babel-plugin-import-path-requirejs.js"
   ]
 }

.eslintrc.json

@@ -8,6 +8,7 @@
     "worker": true
   },
   "extends": ["eslint:recommended", "plugin:prettier/recommended"],
+  "parser": "babel-eslint",
   "parserOptions": {
     "sourceType": "module",
     "ecmaVersion": 2019

package.json

@@ -23,7 +23,11 @@
   "devDependencies": {
     "@babel/cli": "^7.4.3",
     "@babel/core": "^7.4.3",
+    "@babel/helper-module-transforms": "^7.4.3",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-syntax-import-meta": "^7.2.0",
     "@babel/preset-env": "^7.4.3",
+    "@babel/template": "^7.4.0",
     "@types/clipboard": "^2.0.1",
     "@types/pluralize": "0.0.29",
     "babel-eslint": "^10.0.1",

src/core/algorithms.js

@@ -3,18 +3,27 @@
 Currently used only for adding 'assert' class to algorithm lists
 */
 
-import css from "text!../../assets/algorithms.css";
-
 export const name = "core/algorithms";
 
+async function loadStyle() {
+  try {
+    return (await import("text!../../assets/algorithms.css")).default;
+  } catch {
+    const res = await fetch(
+      new URL("../../assets/algorithms.css", import.meta.url)
+    );
+    return await res.text();
+  }
+}
+
 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 = css;
+    style.textContent = await loadStyle();
     document.head.appendChild(style);
   }
 }

src/core/best-practices.js

@@ -4,13 +4,21 @@
 // The summary is generated if there is a section in the document with ID bp-summary.
 // Best practices are marked up with span.practicelab.
 import { addId } from "./utils.js";
-import css from "text!../../assets/bp.css";
 import hyperHTML from "hyperhtml";
 import { pub } from "./pubsubhub.js";
 
 export const name = "core/best-practices";
 
-export function run() {
+async function loadStyle() {
+  try {
+    return (await import("text!../../assets/bp.css")).default;
+  } catch {
+    const res = await fetch(new URL("../../assets/bp.css", import.meta.url));
+    return await res.text();
+  }
+}
+
+export async function run() {
   let num = 0;
   const bps = document.querySelectorAll("span.practicelab");
   const ul = document.createElement("ul");
@@ -27,6 +35,7 @@ export function run() {
   }
   const bpSummary = document.getElementById("bp-summary");
   if (bps.length) {
+    const css = await loadStyle();
     document.head.insertBefore(
       hyperHTML`<style>${[css]}</style>`,
       document.head.querySelector("link")

src/core/caniuse.js

@@ -5,7 +5,6 @@
  * Usage options: https://github.com/w3c/respec/wiki/caniuse
  */
 import { pub, sub } from "./pubsubhub.js";
-import caniuseCss from "text!../../assets/caniuse.css";
 import { createResourceHint } from "./utils.js";
 import hyperHTML from "hyperhtml";
 
@@ -43,6 +42,17 @@ const supportTitles = new Map([
   ["d", "Disabled by default (needs to enabled)."],
 ]);
 
+async function loadStyle() {
+  try {
+    return (await import("text!../../assets/caniuse.css")).default;
+  } catch {
+    const res = await fetch(
+      new URL("../../assets/caniuse.css", import.meta.url)
+    );
+    return await res.text();
+  }
+}
+
 export async function run(conf) {
   if (!conf.caniuse) {
     return; // nothing to do.
@@ -57,9 +67,12 @@ export async function run(conf) {
     hint: "preconnect",
     href: "https://respec.org",
   });
-  document.head.appendChild(link);
-  document.head.appendChild(hyperHTML`
-    <style class="removeOnSave">${caniuseCss}</style>`);
+  const caniuseCss = await loadStyle();
+  document.head.append(
+    link,
+    hyperHTML`
+      <style class="removeOnSave">${caniuseCss}</style>`
+  );
 
   const headDlElem = document.querySelector(".head dl");
   const contentPromise = new Promise(async resolve => {

src/core/examples.js

@@ -7,7 +7,6 @@
 // be used by a containing shell to extract all examples.
 
 import { addId } from "./utils.js";
-import css from "text!../../assets/examples.css";
 import { lang as defaultLang } from "../core/l10n.js";
 import html from "hyperhtml";
 import { pub } from "./pubsubhub.js";
@@ -58,13 +57,25 @@ function makeTitle(conf, elem, num, report) {
   `;
 }
 
-export function run(conf) {
+async function loadStyle() {
+  try {
+    return (await import("text!../../assets/examples.css")).default;
+  } catch {
+    const res = await fetch(
+      new URL("../../assets/examples.css", import.meta.url)
+    );
+    return await res.text();
+  }
+}
+
+export async function run(conf) {
   /** @type {NodeListOf<HTMLElement>} */
   const examples = document.querySelectorAll(
     "pre.example, pre.illegal-example, aside.example"
   );
   if (!examples.length) return;
 
+  const css = await loadStyle();
   document.head.insertBefore(
     html`
       <style>

src/core/highlight-vars.js

@@ -7,17 +7,16 @@
  * All is done while keeping in mind that exported html stays clean
  * on export.
  */
-import hlVars from "text!../../assets/var.css";
 import { sub } from "./pubsubhub.js";
 
 export const name = "core/highlight-vars";
 
-export function run(conf) {
+export async function run(conf) {
   if (!conf.highlightVars) {
     return;
   }
   const styleElement = document.createElement("style");
-  styleElement.textContent = hlVars;
+  styleElement.textContent = await loadStyle();
   styleElement.classList.add("removeOnSave");
   document.head.appendChild(styleElement);
 
@@ -31,6 +30,15 @@ export function run(conf) {
   });
 }
 
+async function loadStyle() {
+  try {
+    return (await import("text!../../assets/var.css")).default;
+  } catch {
+    const res = await fetch(new URL("../../assets/var.css", import.meta.url));
+    return await res.text();
+  }
+}
+
 function highlightListener(ev) {
   ev.stopPropagation();
   const { target: varElem } = ev;

src/core/highlight.js

@@ -4,10 +4,9 @@
  *
  * Performs syntax highlighting to all pre and code elements.
  */
-import ghCss from "text!../../assets/github.css";
 import html from "hyperhtml";
 import { msgIdGenerator } from "./utils.js";
-import { worker } from "./worker.js";
+import { workerPromise } from "./worker.js";
 export const name = "core/highlight";
 
 const nextMsgId = msgIdGenerator("highlight");
@@ -46,13 +45,14 @@ async function highlightElement(elem) {
   elem.setAttribute("aria-busy", "false");
 }
 
-function sendHighlightRequest(code, languages) {
+async function sendHighlightRequest(code, languages) {
   const msg = {
     action: "highlight",
     code,
     id: nextMsgId(),
     languages,
   };
+  const worker = await workerPromise;
   worker.postMessage(msg);
   return new Promise((resolve, reject) => {
     const timeoutId = setTimeout(() => {
@@ -70,6 +70,17 @@ function sendHighlightRequest(code, languages) {
   });
 }
 
+async function loadStyle() {
+  try {
+    return (await import("text!../../assets/github.css")).default;
+  } catch {
+    const res = await fetch(
+      new URL("../../assets/github.css", import.meta.url)
+    );
+    return await res.text();
+  }
+}
+
 export async function run(conf) {
   // Nothing to highlight
   if (conf.noHighlightCSS) return;
@@ -87,6 +98,7 @@ export async function run(conf) {
   if (!highlightables.length) {
     return;
   }
+  const ghCss = await loadStyle();
   const promisesToHighlight = highlightables
     .filter(elem => elem.textContent.trim())
     .map(highlightElement);

src/core/issues-notes.js

@@ -12,7 +12,6 @@
 // If the configuration has issueBase set to a non-empty string, and issues are
 // manually numbered, a link to the issue is created using issueBase and the issue number
 import { addId, joinAnd, parents } from "./utils.js";
-import css from "text!../../assets/issues-notes.css";
 import { lang as defaultLang } from "../core/l10n.js";
 import { fetchAndStoreGithubIssues } from "./github-api.js";
 import hyperHTML from "hyperhtml";
@@ -273,13 +272,25 @@ function createLabel(label, repoURL) {
     href="${issuesURL.href}">${name}</a>`;
 }
 
+async function loadStyle() {
+  try {
+    return (await import("text!../../assets/issues-notes.css")).default;
+  } catch {
+    const res = await fetch(
+      new URL("../../assets/issues-notes.css", import.meta.url)
+    );
+    return await res.text();
+  }
+}
+
 export async function run(conf) {
   const query = ".issue, .note, .warning, .ednote";
   /** @type {NodeListOf<HTMLElement>} */
   const issuesAndNotes = document.querySelectorAll(query);
   if (!issuesAndNotes.length) {
     return; // nothing to do.
   }
+  const css = await loadStyle();
   /** @type {Map<number, GitHubIssue>} */
   const ghIssues = conf.githubAPI
     ? await fetchAndStoreGithubIssues(conf)