[Question] Option to override xhr request with call to my SDK

[7flash]

I understand htmx works best with REST but in my case there is black box SDK in between, therefore I am trying to override beforeRequest to handle form submission with my SDK, wrap it with HTML response and then proceed as normal, can it work?

htmx.on("htmx:beforeRequest", async function(evt){
	const response = await window.my_sdk(evt);
	return `<h1>${response}</h1>`
})

[7flash]

#340

[7flash]

Second alternative, I considered using a service worker which implements SDK interactions

[7flash]

Third alternative, I tried to override XHR with Proxy

XMLHttpRequest = new Proxy(XMLHttpRequest, {
      construct: function (target, args) {
        const xhr = () => my_sdk;
        return xhr;
      },
    });

[Telroshan]

Hey, if you're making a call to a black box SDK, that apparently doesn't return an HTML response, will probably not use any of the htmx features such as response headers, you might be better off simply not using htmx in this case and process the response yourself, from a standard form's submit default-prevented event, in your JS.

[7flash]

I believe htmx allows me to write more clean code

Look at this example of using my SDK (backend) with lit framework:

import { html, render } from 'lit-html';
import { backend } from 'declarations/backend';

class App {
  greeting = '';

  constructor() {
    this.#render();
  }

  #handleSubmit = async (e) => {
    e.preventDefault();
    const name = document.getElementById('name').value;
    this.greeting = await backend.greet(name);
    this.#render();
  };

  #render() {
    let body = html`
      <main>
        <form action="#">
          <label for="name">Enter your name: &nbsp;</label>
          <input id="name" alt="Name" type="text" />
          <button type="submit">Click Me!</button>
        </form>
        <section id="greeting">${this.greeting}</section>
      </main>
    `;
    render(body, document.getElementById('root'));
    document
      .querySelector('form')
      .addEventListener('submit', this.#handleSubmit);
  }
}

export default App;

With htmx it can be more concise just like this:

      <main>
        <form hx-post="/greet" hx-target="#greeting">
          <label for="name">Enter your name: &nbsp;</label>
          <input id="name" alt="Name" type="text" />
          <button type="submit">Click Me!</button>
        </form>
        <section id="greeting"></section>
      </main>

[Telroshan]

Well, looking at those exact snippets, it would seem that the htmx version is cleaner & more concise.
But is it? Because in that second scenario, as you mentioned above you would have to add code elsewhere to intercept, mock the requests and return HTML from your JS to have the swap happen. So it would not just be that little html snippet compared to the first one that is on the other hand self-sufficient.

Plus, you oppose it with a framework's syntax that has a lot of boilerplate code compared to the actual logic, so it feels like an unfair comparison here. With vanilla JS, it would be like this

<main>
  <form id="myForm">
    <label for="name">Enter your name: &nbsp;</label>
    <input id="name" alt="Name" type="text" />
    <button type="submit">Click Me!</button>
  </form>
  <section id="greeting"></section>
</main>

Note that this HTML didn't change much from your second more-concise approach, I just removed the hx attributes as we won't use it (not use htmx at all) and added an ID to the form to retrieve it easily

document.getElementById("myForm").addEventListener("submit", async function(event) {
    event.preventDefault();
    const name = document.getElementById('name').value;
    const greeting = await backend.greet(name);
    document.getElementById("greeting").innerHTML = greeting
})

Now, would that still be a "less concise" approach than what you would have to do to mock this SDK behavior and make it act as it was a XHR request? I would really doubt so.
Out of the 5 lines of code above, you would still need to extract the name from the payload, you would still need to call the SDK and you would still need to return a HTML response to be swapped in. So it seems like the only lines of code you'd save are the
submit event binding and the preventDefault call, which really doesn't feel like a win to me, given the complexity to reach what you were trying to do

[7flash]

Actually I succeed on this using Service Worker as in example of POST request in htmx form below:

https://github.com/galaxydo/ic-sw-starter/blob/fed15d9b3bfba91d499e2816340fd4808ee95a52/src/may16-galaxy-frontend/src/pages/Index.tsx#L12

It's being intercepted by SW here which handles the request and responds with HTML as a proper backend would do

https://github.com/galaxydo/ic-sw-starter/blob/fed15d9b3bfba91d499e2816340fd4808ee95a52/src/may16-galaxy-frontend/src/index.tsx#L108

But in this scenario, since we are building dapp, we try to avoid using any centralized server, yet by moving the backend with SSR to the edge in SW, we can still enjoy all benefits of proper hypertext with HTMX.