Deno Fresh Partial Fetch Events

client.ts

export default () => {
  const browserFetch = globalThis.fetch;

  globalThis.fetch = async function (input, ...args) {
    const urlOrUrlString = input instanceof Request ? input.url : input;
    const url = new URL(urlOrUrlString);
    const isPartialFetch = url.searchParams.get("fresh-partial") === "true";

    if (isPartialFetch) {
      globalThis.dispatchEvent(
        new CustomEvent("beforePartialFetch", { detail: { url } }),
      );
    }

    const response = await browserFetch(input, ...args);

    if (isPartialFetch) {
      globalThis.dispatchEvent(
        new CustomEvent("afterPartialFetch", { detail: { url } }),
      );
    }

    return response;
  };
};

mod.ts

import type { Plugin } from "$fresh/server.ts";
import { dirname } from "@std/path";
import { join } from "@std/path/join";

export const partialFetchEventsPlugin = {
  name: "partial-fetch-events",
  entrypoints: {
    client: join(dirname(import.meta.url), "client.ts"),
  },
  render(ctx) {
    const res = ctx.render();
    return {
      ...res,
      scripts: [
        {
          entrypoint: "client",
          state: {},
        },
      ],
    };
  },
} satisfies Plugin;

PartialLoadingBar.tsx

import { useSignal } from "@preact/signals";
import { useEffect } from "preact/hooks";

export const PartialLoadingBar = () => {
  const loadState = useSignal<"loading" | "loaded" | "not-loading">(
    "not-loading",
  );
  useEffect(() => {
    const onBeforePartialFetch = () => {
      loadState.value = "loading";
    };

    const onAfterPartialFetch = () => {
      loadState.value = "loaded";
      setTimeout(() => {
        loadState.value = "not-loading"; // careful! race condition possible
      }, 500);
    };

    globalThis.addEventListener("beforePartialFetch", onBeforePartialFetch);
    globalThis.addEventListener("afterPartialFetch", onAfterPartialFetch);

    return () => {
      globalThis.removeEventListener(
        "beforePartialFetch",
        onBeforePartialFetch,
      );
      globalThis.removeEventListener("afterPartialFetch", onAfterPartialFetch);
    };
  });

  return (
    <div
      class={mixClasssssssss(
        "h-1 w-[0%] bg-primary-500 transition-[width,opacity] duration-500 absolute z-40 top-0 left-0",
        {
          "not-loading": "opacity-0",
          loading: "w-[30%] opacity-100",
          loaded: "w-[100%] opacity-0",
        }[loadState.value],
      )}
    />
  );
};

for denoland/fresh#2547