preload for GET forms

[chrisdone]

Example

Here's a simple "put in some code and see the reply below" form. The evaluator is pure (for a subset of Haskell), and therefore a POST/PUT is not correct, a GET is, and the result should be cached (because it will never change). That's all good. I can achieve that with hx-include, as seen below.

<form hx-include="find [name='code']" hx-get="/evaluator" hx-target="find .reply">
  <textarea name="code"></textarea>
  <div class="reply"></div>
  <button class="run-button">Run</button>
</form>

Current behavior

As it stands, I can only specify preload="mousedown", but two things happen:

1. This applies to the whole form, not to the submit button.
2. The hx-include is ignored (presumably because nobody expected I'd be trying to preload a form!)

Desired behavior

It's not super important to me that when a user clicks "Run" that it immediately shows a result, it just adds to an overall feeling of snappiness. But, it seems worth discussing.

Evaluation is cheap and quick, but the latency hit can only be mitigated by preloading.

What would be nice is to specify, e.g.

<form .. preload="mousedown:find .run-button">

What do you think?

Related links

As it happens, there is an RFC to add a QUERY method which would effectively be a GET that lets you submit a body to it, which would be a lovely use-case for this kind of end-point. However, it's only an RFC.

[chrisdone]

Another way of writing it:

<form>
  <textarea name="code" class="code"></textarea>
  <div class="reply"></div>
  <button hx-include="previous .code" hx-get="/evaluator" hx-target="previous .reply" class="">Run</button>
</form>

This fixes the mousedown issue. It's a little less clean than the 'find' (IMHO), but is okay on locality of behavior. However, the hx-include issue remains.

[chrisdone-artificial]

I think below is where we could pay attention to the hx-include property:

htmx/src/ext/preload.js

Lines 49 to 55 in 6180ad2

	var hxGet = node.getAttribute("hx-get") || node.getAttribute("data-hx-get")
	if (hxGet) {
	htmx.ajax("GET", hxGet, {handler:function(elt, info) {
	done(info.xhr.responseText);
	}});
	return;
	}