client side script that detects deployment changes, callback (JavaScript)

onDeploy.js

export default function detectDeployment(
  onDeployDetected: () => void,
  timeoutSec = 60 * 60 // default 1 hour
) {
  const scriptFiles = { cache: "" }; // as object for pointer reference

  const profit$ = () =>
    handleDetectScriptFileChanges(onDeployDetected, scriptFiles);

  setInterval(profit$, timeoutSec * 1000);
  profit$();
}

async function handleDetectScriptFileChanges(
  onDeployDetected: () => void,
  scriptFiles: { cache: string }
) {
  let html = "";

  try {
    const response = await fetch(window.location.origin);
    if (!response.ok) {
      throw new Error("Network response was not OK");
    }
    html = await response.text();
  } catch (error) {
    console.error("Deployment detection error:", (error as Error).message);
    return;
  }

  const currentScriptFiles = parseScriptFiles(html).sort().join(";");

  if (!scriptFiles.cache) {
    scriptFiles.cache = currentScriptFiles;
  } else if (scriptFiles.cache !== currentScriptFiles) {
    // If script file changes detected, then new deployment detected
    onDeployDetected();
  }
}

function parseScriptFiles(html: string): string[] {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, "text/html");

  return Array.from(doc.querySelectorAll("script"))
    .map((script) => script.src)
    .filter(Boolean);
}