pike/glyph Public Public: anyone can read this; nobody can change it.

// The page stays current without a reload. /events is a stream of what

// changed; each event becomes `live` and `live:<type>` on `document`, and

// any element with data-live="<types>" is refetched and swapped when one of

// its types arrives — server-rendered, so the page never renders twice.

// Without this file the page is the same page, one reload behind.

let since = "";

let tries = 0;

let source;

function connect() {

  source = new EventSource(since ? `/events?since=${since}` : "/events");

  source.onopen = () => {

    if (tries > 0) refresh(); // Reconnected: whatever was missed, catch up.

    tries = 0;

  };

  source.onmessage = (message) => {

    since = message.lastEventId;

    const { type, data } = JSON.parse(message.data);

    document.dispatchEvent(new CustomEvent("live", { detail: { type, data } }));

    document.dispatchEvent(new CustomEvent(`live:${type}`, { detail: data }));

  };

  // The browser retries a dropped connection itself; a refused one it gives

  // up on, and then we try again, later each time.

  source.onerror = () => {

    if (source.readyState !== EventSource.CLOSED) return;

    source.close();

    setTimeout(connect, Math.min(30_000, 1000 * 2 ** tries++));

  };

}

let refreshing = false;

let again = false;

async function refresh(types) {

  const regions = [...document.querySelectorAll("[data-live]")].filter(

    (el) =>

      types === undefined ||

      el.dataset.live.split(" ").some((t) => types.includes(t)),

  );

  if (regions.length === 0) return;

  if (refreshing) {

    again = true;

    return;

  }

  refreshing = true;

  try {

    const response = await fetch(location.href, {

      headers: { accept: "text/html" },

    });

    const fresh = new DOMParser().parseFromString(

      await response.text(),

      "text/html",

    );

    for (const el of regions) {

      const next = fresh.getElementById(el.id);

      if (next) el.replaceWith(next);

    }

  } finally {

    refreshing = false;

    if (again) {

      again = false;

      refresh();

    }

  }

}

document.addEventListener("live", (event) => refresh([event.detail.type]));

connect();