Don't do a full page load when clicking the subscribe button

[yardenshoham]

• Refactor the form around the subscribe button into its own template
• Use htmx to perform the form submission
  • hx-boost="true" to prevent the default form submission behavior of a full page load
  • hx-sync="this:replace" to replace the current request (in case the button is clicked again before the response is returned)
  • hx-target="this" to replace the form tag with the new form tag
  • hx-push-url="false" to disable a change to the URL
  • hx-swap="show:no-scroll" to preserve the scroll position
• Change the backend response to return a <form> tag instead of a redirect to the issue page
• Include htmx.org in javascript imports

This change introduces htmx with the hope we could use it to make Gitea more reactive while keeping our "HTML rendered on the server" approach.

Before

After

[yardenshoham]

From CI: ERROR in License: htmx.org@1.9.10 has disallowed license BSD 2-Clause. Can we add htmx or is it not allowed?

[delvh]

According to my quick search, BSD2 is compatible with MIT, so it should be possible.

[lunny]

I think we need enough disscuss before introducing htmx. Maybe a new issue with proposql is better.

[yardenshoham]

I asked in discord and there was no negative response. We can discuss on this PR

[lunny]

I asked in discord and there was no negative response. We can discuss on this PR

I think we have ever discussed htmx here #5937

[denyskon]

I'm in favour of introducing HTMX, as in this case it allows for more elegant and functional UI without having to rebuild everything to a JS framework and without adding much overhead

[lunny]

So then we will mix the framework include vue3+jquery+htmx+go template on the same repository?

[yardenshoham]

I think if I was using vue3 or jquery for this PR it would add more lines of code than using htmx

[6543]

HTMX looks promising!

[denyskon]

Wasn't that maybe a bit too fast? If there are objections against using HTMX, we should discuss them.....

[6543]

Didn't you lgtm ?!?

[denyskon]

I fully support this change, and it's also true that two lgtms are enough to merge a PR according to our guidelines. I'm just in favour of discussing all objections before merging :)

[6543]

Ah ok next time just reject and ask for it first 😆

Anyway atm I'm still a TOC member (till we get the vote results...) that did accept it ... so should be fine ;)

But i can bring it up to discust to the whole TOC if you'd like to.

[denyskon]

As I said, I fully support this change. We finally need a thought-out decision-making process for such things, but we don't have one yet to I guess it it is fine 😆

[delvh]

You can also count in a tentative approval from me.
I cannot evaluate how good it is yet as I don't have enough experience with it.
I'd say we can simply try it out, and if we notice that it isn't for us, we can still remove it again.

[lunny]

@6543 You should not merge it too fast since we have more maintainers ecspcially @wxiaoguang and @silverwind haven't introduce their reviews. After all, this is a new framework/js library. We should consider it carefully.

[wxiaoguang]

I do not think the problem has been clearly defined or resolved.

If htmx is introduced, now there are at least 3 frameworks in Gitea:

• Vanilla JS
• jQuery + Fomantic UI
• Vue
• htmx

Is there a clear roadmap for how to refactor legacy code and introduce new changes? For example:

1. Will the jQuery code be there forever?
2. How to implement a new UI feature, use Vanilla JS, or Fomantic UI, or htmx?

Then the question is: does htmx really help and will be widely used?

I have been following htmx for some time. My feeling is:

• How does htmx handle error messages and network failure in Gitea? How does it handling the "loading" indicator?
• The basic feature like "replace inner html" could be easily implement by a few lines in our framework, ex: we already have "link-action" and "form-fetch-action"
• Some advanced features overlaps with existing mechanisms, eg: modal. Should new code use Fomantic Modal, Gitea's self modal or htmx's modal?
• Some advanced features like "htmx script" is quite fragile and I don't know how to lint/test them. It would cause maintainability problems.

So, IMO the only useful part of htmx at the moment is the "replacing inner html by ajax", while it is quite simple and could (should) be implemented by existing "link-action" and "form-fetch-action". Other htmx features are unlikely useful in foreseeable future

[6543]

the consensis was that we do want to get rid of jQuery or has this changed?

[wxiaoguang]

the consensis was that we do want to get rid of jQuery or has this changed?

I have asked many times: if new PRs come with jQuery, what should be done? Ask (force) the contributors to rewrite the code? Maintainer help to rewrite the code?

If few people would really like to spend time on rewriting legacy code and rewriting jQuery PRs code, how would the "get rid of jQuery" plan succeed?

More thoughts are here: #5937 (comment)

---

And jQuery is somewhat off-topic here. The key question is: "Then the question is: does htmx really help and will be widely used?"

[lunny]

I agree "Ask (force) the contributors to rewrite the code"

[6543]

#28879

[6543]

well we should not talk at closed/merged issues/pulls so i created #28880

[a1012112796]

Hmm, I think it's necessary to do a full page load when clicking the subscribe button because It can help users to get the new comments on time.

[6543]

no that's not the point at all ?!?

if we want to see "live" updates on comments that's a totali different issue and we do have to have either a smal background loop checking if there is something new and then update the html (proper way) or reload the page (non proper way).