columbo 0.2.3

Async SSR streaming suspense — render placeholders, stream HTML replacements as futures resolve.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

(() => {
  // only initialize once, even if this script appears multiple times in the DOM
  if (window.__columbo) return;
  window.__columbo = true;

  // optional: window.__columboConfig = { swap: (placeholder, nodes) => { ... } }
  const {swap = (p, n) => p.replaceWith(...n)} = window.__columboConfig || {};

  // watch for streamed <template data-columbo-r-id> elements and swap them in
  new MutationObserver(mutations => {
    for (const {addedNodes} of mutations)
      for (const r of addedNodes) {
        const id = r.dataset?.columboRId;
        // ignore if not a replacement template
        if (!id) continue;

        // execute swap if placeholder exists, then delete replacement
        const p = document.querySelector(`[data-columbo-p-id="${id}"]`);
        if (p) swap(p, [...r.content.childNodes]);
        r.remove();
      }
  }).observe(document.documentElement, {childList: true, subtree: true});
})();