Htmx callback plugin and htmx based report view

core/static/bundled/base-bundle-index.ts

@@ -10,6 +10,10 @@ import sort from "@alpinejs/sort";
 import Alpine from "alpinejs";
 import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
 import htmx from "htmx.org";
+import { getErrorCallbacksExt } from "#core:htmx/error-callback";
+
+("#core:htmx/error-callback");
+
 import { limitedChoices } from "#core:alpine/limited-choices";
 import { expireOldStorage } from "#core:core/localstorage";
 import { default as navbar } from "#core:core/navbar";
@@ -57,6 +61,9 @@ document.body.addEventListener(
   },
 );
 
+const errorCallbackExt = getErrorCallbacksExt();
+htmx.defineExtension(errorCallbackExt.name, errorCallbackExt.extension);
+
 Object.assign(window, { htmx });
 
 /**

core/static/bundled/htmx/error-callback.ts

@@ -0,0 +1,80 @@
+import type { HtmxExtension } from "htmx.org";
+
+interface CustomHtmxExtension {
+  name: string;
+  extension: Partial<HtmxExtension>;
+}
+
+export const getErrorCallbacksExt = () => {
+  const attrPrefix = "hx-callback-";
+  let htmxApi: {
+    [x: string]: any;
+    getClosestAttributeValue: any;
+  };
+
+  const getCallback = (elt: HTMLElement, responseCode: number) => {
+    if (!elt || !responseCode) {
+      return () => {};
+    }
+
+    const code = responseCode.toString();
+
+    // '*' is the original syntax, as the obvious character for a wildcard.
+    // The 'x' alternative was added for maximum compatibility with HTML
+    // templating engines, due to ambiguity around which characters are
+    // supported in HTML attributes.
+    //
+    // Start with the most specific possible attribute and generalize from
+    // there.
+    const suffixes = [
+      code,
+
+      code.substring(0, 2) + "*",
+      code.substring(0, 2) + "x",
+
+      code.substring(0, 1) + "*",
+      code.substring(0, 1) + "x",
+      code.substring(0, 1) + "**",
+      code.substring(0, 1) + "xx",
+
+      "*",
+      "x",
+      "***",
+      "xxx",
+    ];
+    if (code.startsWith("4") || code.startsWith("5")) {
+      suffixes.push("error");
+    }
+
+    for (const suffix of suffixes) {
+      const attr = attrPrefix + suffix;
+      const callback = htmxApi?.getClosestAttributeValue(elt, attr);
+      if (callback) {
+        return Function("src", "target", callback);
+      }
+    }
+
+    return () => {};
+  };
+
+  return {
+    name: "error-callbacks",
+    extension: {
+      init: (api: any) => {
+        htmxApi = api;
+      },
+      onEvent: (name: string, event: CustomEvent) => {
+        if (name !== "htmx:responseError") {
+          return true;
+        }
+
+        getCallback(event.detail.requestConfig.elt, event.detail.xhr.status)(
+          event.detail.requestConfig.elt,
+          htmxApi.getTarget(event.detail.requestConfig.elt),
+        );
+
+        return true;
+      },
+    },
+  } as CustomHtmxExtension;
+};