Add interactive check to ready event handler

[dsyer]

If HTMX is imported in a module the readyState is "interactive" so the extension processing happens too late. This would fix it.

See #1655

[alexpetros]

This seems good but could you explain the problem and your solution a little more thoroughly?

[dsyer]

There's a sample here: https://github.com/scratches/htmx-demo. If you prefer Python there's a simpler version in the "django" branch. They both work as they are, but they use a hacked version of htmx.js with the change in this PR. If you switch to the regular HTMX (e.g. from unpkg.com) it will break because the extension isn't installed before the ready listener fires.

You can actually get the same result if you replace the module stuff with normal <script> tags but add the "async" attribute. Module imports are asynchronous, so I guess it comes to the same thing. E.g:

	<script async src="https://unpkg.com/htmx.org"></script>
	<script async src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>

[alexpetros]

Got it, thank you. You're right, and the async issue has come up before (#1485). I also think it makes sense to initialize htmx last (after the extensions) anyway.

Just to make sure I understand fully, since there are only three readyStates, this is logically equivalent to following?

if (getDocument().readyState === 'complete')

[dsyer]

I guess it must be. You want to make that change? I tried it in the sample and it worked for me.

Reading that other issue though, I can see this might not work in all circumstances. It's simple though and it works for me, and seems unlikely to break any existing apps (I'm no kind of expert, just trying to find a solution).

[guilleiguaran]

I've tested this with Vite/Rollup (as in #1469) and it's working as expected.

[alexpetros]

Thank you both for verifying, this looks great. I'm not entirely sure why the CI is failing, because it only does so intermittently on my local machine.

@1cg is it possible this timeout just needs to be longer?

htmx/test/core/api.js

Lines 18 to 28 in 66387c0

	setTimeout(function() {
	try {
	var div = make("<div id='d1' hx-get='/test' hx-swap='outerHTML'></div>");
	div.click();
	server.respond();
	byId("d1").getAttribute("foo").should.equal("bar");
	done();
	} finally {
	htmx.off("htmx:load", helper);
	}
	}, 10)

[1cg]

yeah, I'm going to merge this and I'll take a look at that test today

[1cg]

actually, @dsyer can you make this PR against dev for me?

thank you!

[dsyer]

I don't think I know how to do that. I could close this one and open a new PR? Or you could walk me through it if it's possible otherwise and I'm just too stupid.

1cg#1 also #1668 because I don't know what "dev" means.

[1cg]

lmao i have no idea how to do it either I just ask other people to do it

[dsyer]

Sorry, I didn’t check if I needed to rebase before I made those PRs. I’m AFK now but I can do it tomorrow.

[alexpetros]

actually, @dsyer can you make this PR against dev for me?

thank you!

@dsyer what he means is that this PR is set to merge into the "master" branch and there's a setting (should be at the top, when you edit the PR) to chose to merge it against the "dev" branch instead (that's the one we use for commits that will be in the next release).

[dsyer]

I know what he meant, but I don’t think there’s a way to change the base branch once the PR is submitted.

[alexpetros]

Tried to change the branch but unfortunately the PR has a bunch of commits from master in it now, so I cherry-picked your commit and put it in PR #1672 (should still say you authored it).

[alexpetros]

You're in: 347ce7a

Sorry about the weirdness