Fix readyState check

[wxiaoguang]

Description

See MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

loading -> (prepare DOM tree) -> interactive (DOM tree is ready) -> DOMContentLoaded event -> (load sub-resources such as scripts, images, stylesheets and frames) -> complete -> load event

Without the fix, there is a bug: if the htmx is loaded in DOMContentLoaded with readyState="interactive" (for example: async chunked import) , then htmx will not initialize.

Checklist

• I have read the contribution guidelines
• I have targeted this PR against the correct branch (master for website changes, dev for
  source changes)
• This is either a bugfix, a documentation update, or a new feature that has been explicitly
  approved via an issue
• I ran the test suite locally (npm run test) and verified that it succeeded

[MichaelWest22]

See #2264

This issue has been attempted to be fixed many times. We used to have the exact same change you are proposing in place but there were issues this caused with extensions being loaded in the wrong order causing issues which lead to the current implementation. There was attempts to fix it but this just caused other regressions. Right now the current implementation works for all users who are not trying to load htmx via non standard async methods when it really should just be loaded like a normal script to keep things simple.

There was a proposal to implement a custom initialize function that could be called manually by users with weird edge cases to trigger the load at a different time but this may not have been easy to implement and looks like it has not happened.

[wxiaoguang]

Could you elaborate which case leads to "extensions being loaded in the wrong order causing issues"?

If I understand correctly, the old code does this:

• Before DOMContentLoaded, import htmx, then htmx is always initialized in DOMContentLoaded (meanwhile readyState==interactive)
• After DOMContentLoaded and before load event, import htmx, then htmx is never initialized
• After load event, import htmx, then htmx is initialized in ready

The the new code:

• Before DOMContentLoaded, import htmx, then htmx is always initialized in DOMContentLoaded (meanwhile readyState==interactive) (same as before)
• After DOMContentLoaded and before load event, import htmx, then htmx is initialized in ready (FIXED)
• After load event, import htmx, then htmx is initialized in ready (same as before)

Which case would make new code doesn't work?

[MichaelWest22]

see #1672 where this exact line change was made. and #1659 where the initial PR was discussed before it was rebased and merged. Also there is #2808 which has some more discussion on the topic and the same change you are proposing as well.

[wxiaoguang]

Hopefully the tricky (and problematic) designs could be fixed.

[alexpetros]

I think we need to add a note about this to the quirks page.

#3387

[wxiaoguang]

TBH I am going to stay away from htmx ..... too many quirks and unsuitable for a large project.