respec2html doesn't process `preProcess` and `postProcess`

[deniak]

Important info

• Command to reproduce the bug: ./tools/respec2html.js -s https://w3c.github.io/alreq/gap-analysis/

-o out.html

• ReSpec version: 26.0.0).

Description of problem

spec-generator relies on respec2html to generate a snapshot and @r12a reported that the snapshot wasn't complete as there are some scripts running to fetch/display github issues.
These scripts are configured in the preProcess option and they don't seem to run while using respec2html.
Same thing for postProcess that should run a script to replace some stylesheets.

The snapshot looks good using the UI.

Expected behavior (e.g., it shouldn't crash): I've attached snapshots.zip containing the actual and expected results.

[sidvishnoi]

The importStyleSheet() in postProcess is not returning a promise that can be awaited. Can you try with following instead:

function importStyleSheet() {
-  [...document.querySelectorAll("link[rel='stylesheet'][data-import]")].forEach(l => {
+  return Promise.all([...document.querySelectorAll("link[rel='stylesheet'][data-import]")].map(l => {
    const style = document.createElement("style");
-   fetch(l.href).then(r => r.text()).then(t => {
+   return fetch(l.href).then(r => r.text()).then(t => {
      style.textContent = t;
      l.replaceWith(style);
    });
  });
}

// Or, if you like async-await
async function importStyleSheet() {
  const elems = document.querySelectorAll(
    `link[rel='stylesheet'][data-import]`
  );
  await Promise.all(
    [...elems].map(async link => {
      const text = await fetch(link.href).then(r => r.text());
      const style = document.createElement("style");
      style.textContent = text;
      link.replaceWith(style);
    })
  );
}

There might be similar problem with preProcess ones.

To clarify, respec2html will try to export the HTML as soon as it finds all functions have _finished_. When you manually generate using UI, the requests have already finished, hence the difference.

[r12a]

@sidvishnoi In case it helps clarify: i work with these docs all the time, since i create and maintain them, and i can't say that i ever remember there being a problem with loading the stylesheet. There also doesn't appear to be a problem when loading the prompts. It's the other content, which is retrieved from GH issues via the GH API that are failing to appear. They always load for the ED, although there may be a second or so of delay. They don't appear to be loading when run through the publication build tool that preprocesses the file for echidna publication. hth

[deniak]

Thanks @sidvishnoi. I was suspecting a race condition but I couldn't figure out the function needed to return promise.
Problem solved!

[sidvishnoi]

i can't say that i ever remember there being a problem with loading the stylesheet

This might have appeared due to network issues. I've experimented locally and only 0 out of 5 times the stylesheets loaded in respec2html when the promise is not returned (present code), compared to 4/4 with the suggested code..

[sidvishnoi]

BTW, I think data-import on stylesheets is something ReSpec could support. It feels like a natural extension to data-include.

Edit: Following works fine without any custom postProcess:

- <link rel="stylesheet" data-import href="https://w3c.github.io/typography/gap-analysis/gapanalysis.css">
+ <style data-include="https://w3c.github.io/typography/gap-analysis/gapanalysis.css"></style>