A mermaid extension for odoc
Add odoc-spa-loaded event for extension SPA support
The SPA shell now dispatches a 'odoc-spa-loaded' custom event on
document after all external scripts from the fetched page have
loaded and inline scripts have executed. Extensions listen for
this event instead of polling for CDN library availability.
This replaces the unreliable polling approach — the MutationObserver
fires before CDN scripts load, and no further mutations occur to
trigger re-rendering. The custom event fires at exactly the right
moment: after content is swapped AND all scripts are ready.
Updated mermaid, dot, and msc extensions to use the new event.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+11
-36
+11
-36
src/mermaid_extension.ml
+11
-36
src/mermaid_extension.ml
···
248
248
try { mermaid.run({ nodes: Array.from(pending) }); } catch(e) { console.error('mermaid.run error:', e); }
249
249
}
250
250
251
-
function init() {
252
-
renderAll();
253
-
observe();
254
-
// If mermaid isn't loaded yet but there are pending elements,
255
-
// start polling immediately (handles SPA where this script loads
256
-
// after content swap but before CDN script finishes).
257
-
if (typeof mermaid === 'undefined' &&
258
-
document.querySelectorAll('pre.mermaid:not([data-mermaid-init])').length > 0) {
259
-
waitForMermaid();
260
-
}
261
-
}
262
-
263
251
if (document.readyState === 'loading') {
264
-
document.addEventListener('DOMContentLoaded', init);
252
+
document.addEventListener('DOMContentLoaded', function() {
253
+
renderAll();
254
+
observe();
255
+
});
265
256
} else {
266
-
init();
257
+
renderAll();
258
+
observe();
267
259
}
268
260
269
261
function observe() {
270
-
new MutationObserver(function() {
271
-
renderAll();
272
-
// If mermaid isn't loaded yet but there are pending elements,
273
-
// poll until it loads (handles SPA where mermaid CDN script
274
-
// loads after content swap).
275
-
if (typeof mermaid === 'undefined' &&
276
-
document.querySelectorAll('pre.mermaid:not([data-mermaid-init])').length > 0) {
277
-
waitForMermaid();
278
-
}
279
-
}).observe(document.body, { childList: true, subtree: true });
280
-
}
281
-
282
-
var waitTimer = null;
283
-
function waitForMermaid() {
284
-
if (waitTimer) return;
285
-
waitTimer = setInterval(function() {
286
-
if (typeof mermaid !== 'undefined') {
287
-
clearInterval(waitTimer);
288
-
waitTimer = null;
289
-
renderAll();
290
-
}
291
-
}, 200);
262
+
// Re-render on DOM mutations (new content added dynamically)
263
+
new MutationObserver(function() { renderAll(); })
264
+
.observe(document.body, { childList: true, subtree: true });
265
+
// Re-render after SPA navigation completes (all scripts loaded)
266
+
document.addEventListener('odoc-spa-loaded', function() { renderAll(); });
292
267
}
293
268
})();
294
269
|}