Skip to content

Commit 3e84141

Browse files
yardenshoham6543GiteaBot
authored
Introduce htmx and use it to avoid full page load on Subscribe and Follow (#28908)
- Closes #28880 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. - Add `htmx.js` that imports `htmx.org` and initializes error toasts - Place `hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}'` on the `<body>` tag so every request that htmx sends is authenticated - Place `hx-swap="outerHTML"` on the `<body>` tag so the response of each htmx request replaces the tag it targets (as opposed to its inner content) - Place `hx-push-url="false"` on the `<body>` tag so no changes to the URL happen in `<form>` tags - Add the `is-loading` class during request ### Error toasts in action ![errors](https://github.com/go-gitea/gitea/assets/20454870/181a1beb-1cb8-4858-abe8-fa1fc3f5b8f3) ## Don't do a full page load when clicking the subscribe button - 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 - Change the backend response to return a `<form>` tag instead of a redirect to the issue page ### Before ![subscribe_before](https://github.com/go-gitea/gitea/assets/20454870/cb2439a2-c3c0-425c-8d3c-5d646b1cdc28) ### After ![subscribe_after](https://github.com/go-gitea/gitea/assets/20454870/6fcd77d8-7b11-40b0-af4f-b152aaad787c) ## Don't do a full page load when clicking the follow button - Use htmx to perform the button request - `hx-post="{{.ContextUser.HomeLink}}?action=follow"` to send a POST request to follow the user - `hx-target="#profile-avatar-card"` to target the card div for replacement - `hx-indicator="#profile-avatar-card"` to place the loading indicator on the card - Change the backend response to return a `<div>` tag (the card) instead of a redirect to the user page ### Before ![follow_before](https://github.com/go-gitea/gitea/assets/20454870/a210b643-6e74-4ff9-8e61-d658c62edf1f) ### After ![follow_after](https://github.com/go-gitea/gitea/assets/20454870/5bb19ae9-0d59-4ae3-b538-4c83334e4722) --------- Signed-off-by: Yarden Shoham <git@yardenshoham.com> Co-authored-by: 6543 <m.huber@kithara.com> Co-authored-by: Giteabot <teabot@gitea.io>
1 parent 27d4c11 commit 3e84141

File tree

11 files changed

+62
-21
lines changed

11 files changed

+62
-21
lines changed

‎package-lock.json

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"esbuild-loader": "4.0.2",
2626
"escape-goat": "4.0.0",
2727
"fast-glob": "3.3.2",
28+
"htmx.org": "1.9.10",
2829
"jquery": "3.7.1",
2930
"katex": "0.16.9",
3031
"license-checker-webpack-plugin": "0.2.1",

‎routers/web/repo/issue_watch.go

+8-1
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,15 @@ import (
88
"strconv"
99

1010
issues_model "code.gitea.io/gitea/models/issues"
11+
"code.gitea.io/gitea/modules/base"
1112
"code.gitea.io/gitea/modules/context"
1213
"code.gitea.io/gitea/modules/log"
1314
)
1415

16+
const (
17+
tplWatching base.TplName = "repo/issue/view_content/watching"
18+
)
19+
1520
// IssueWatch sets issue watching
1621
func IssueWatch(ctx *context.Context) {
1722
issue := GetActionIssue(ctx)
@@ -52,5 +57,7 @@ func IssueWatch(ctx *context.Context) {
5257
return
5358
}
5459

55-
ctx.Redirect(issue.Link())
60+
ctx.Data["Issue"] = issue
61+
ctx.Data["IssueWatch"] = &issues_model.IssueWatch{IsWatching: watch}
62+
ctx.HTML(http.StatusOK, tplWatching)
5663
}

‎routers/web/user/profile.go

+9-2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import (
1414
"code.gitea.io/gitea/models/db"
1515
repo_model "code.gitea.io/gitea/models/repo"
1616
user_model "code.gitea.io/gitea/models/user"
17+
"code.gitea.io/gitea/modules/base"
1718
"code.gitea.io/gitea/modules/context"
1819
"code.gitea.io/gitea/modules/git"
1920
"code.gitea.io/gitea/modules/log"
@@ -26,6 +27,10 @@ import (
2627
shared_user "code.gitea.io/gitea/routers/web/shared/user"
2728
)
2829

30+
const (
31+
tplProfileBigAvatar base.TplName = "shared/user/profile_big_avatar"
32+
)
33+
2934
// OwnerProfile render profile page for a user or a organization (aka, repo owner)
3035
func OwnerProfile(ctx *context.Context) {
3136
if strings.Contains(ctx.Req.Header.Get("Accept"), "application/rss+xml") {
@@ -309,8 +314,10 @@ func Action(ctx *context.Context) {
309314

310315
if err != nil {
311316
log.Error("Failed to apply action %q: %v", ctx.FormString("action"), err)
312-
ctx.JSONError(fmt.Sprintf("Action %q failed", ctx.FormString("action")))
317+
ctx.Error(http.StatusBadRequest, fmt.Sprintf("Action %q failed", ctx.FormString("action")))
313318
return
314319
}
315-
ctx.JSONOK()
320+
321+
shared_user.PrepareContextForProfileBigAvatar(ctx)
322+
ctx.HTML(http.StatusOK, tplProfileBigAvatar)
316323
}

‎templates/base/head.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
{{template "base/head_style" .}}
3030
{{template "custom/header" .}}
3131
</head>
32-
<body>
32+
<body hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}' hx-swap="outerHTML" hx-push-url="false">
3333
{{ctx.DataRaceCheck $.Context}}
3434
{{template "custom/body_outer_pre" .}}
3535

‎templates/repo/issue/view_content/sidebar.tmpl

+1-13
Original file line numberDiff line numberDiff line change
@@ -270,19 +270,7 @@
270270
<div class="ui watching">
271271
<span class="text"><strong>{{ctx.Locale.Tr "notification.notifications"}}</strong></span>
272272
<div class="gt-mt-3">
273-
<form method="post" action="{{.Issue.Link}}/watch">
274-
<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}">
275-
{{$.CsrfTokenHtml}}
276-
<button class="fluid ui button">
277-
{{if $.IssueWatch.IsWatching}}
278-
{{svg "octicon-mute" 16 "gt-mr-3"}}
279-
{{ctx.Locale.Tr "repo.issues.unsubscribe"}}
280-
{{else}}
281-
{{svg "octicon-unmute" 16 "gt-mr-3"}}
282-
{{ctx.Locale.Tr "repo.issues.subscribe"}}
283-
{{end}}
284-
</button>
285-
</form>
273+
{{template "repo/issue/view_content/watching" .}}
286274
</div>
287275
</div>
288276
{{end}}

‎templates/repo/issue/view_content/watching.tmpl

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<form hx-boost="true" hx-sync="this:replace" hx-target="this" method="post" action="{{.Issue.Link}}/watch">
2+
<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}">
3+
<button class="fluid ui button">
4+
{{if $.IssueWatch.IsWatching}}
5+
{{svg "octicon-mute" 16 "gt-mr-3"}}
6+
{{ctx.Locale.Tr "repo.issues.unsubscribe"}}
7+
{{else}}
8+
{{svg "octicon-unmute" 16 "gt-mr-3"}}
9+
{{ctx.Locale.Tr "repo.issues.subscribe"}}
10+
{{end}}
11+
</button>
12+
</form>

‎templates/shared/user/profile_big_avatar.tmpl

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="ui card">
1+
<div id="profile-avatar-card" class="ui card">
22
<div id="profile-avatar" class="content gt-df">
33
{{if eq .SignedUserID .ContextUser.ID}}
44
<a class="image" href="{{AppSubUrl}}/user/settings" data-tooltip-content="{{ctx.Locale.Tr "user.change_avatar"}}">
@@ -110,13 +110,13 @@
110110
</li>
111111
{{end}}
112112
{{if and .IsSigned (ne .SignedUserID .ContextUser.ID)}}
113-
<li class="follow">
113+
<li class="follow" hx-target="#profile-avatar-card" hx-indicator="#profile-avatar-card" >
114114
{{if $.IsFollowing}}
115-
<button class="ui basic red button link-action" data-url="{{.ContextUser.HomeLink}}?action=unfollow">
115+
<button hx-post="{{.ContextUser.HomeLink}}?action=unfollow" class="ui basic red button">
116116
{{svg "octicon-person"}} {{ctx.Locale.Tr "user.unfollow"}}
117117
</button>
118118
{{else}}
119-
<button class="ui basic primary button link-action" data-url="{{.ContextUser.HomeLink}}?action=follow">
119+
<button hx-post="{{.ContextUser.HomeLink}}?action=follow" class="ui basic primary button">
120120
{{svg "octicon-person"}} {{ctx.Locale.Tr "user.follow"}}
121121
</button>
122122
{{end}}

‎web_src/js/features/common-global.js

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {showTemporaryTooltip} from '../modules/tippy.js';
1212
import {confirmModal} from './comp/ConfirmModal.js';
1313
import {showErrorToast} from '../modules/toast.js';
1414
import {request, POST} from '../modules/fetch.js';
15+
import '../htmx.js';
1516

1617
const {appUrl, appSubUrl, csrfToken, i18n} = window.config;
1718

‎web_src/js/htmx.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import * as htmx from 'htmx.org';
2+
import {showErrorToast} from './modules/toast.js';
3+
4+
// https://htmx.org/reference/#config
5+
htmx.config.requestClass = 'is-loading';
6+
htmx.config.scrollIntoViewOnBoost = false;
7+
8+
// https://htmx.org/events/#htmx:sendError
9+
document.body.addEventListener('htmx:sendError', (event) => {
10+
// TODO: add translations
11+
showErrorToast(`Network error when calling ${event.detail.requestConfig.path}`);
12+
});
13+
14+
// https://htmx.org/events/#htmx:responseError
15+
document.body.addEventListener('htmx:responseError', (event) => {
16+
// TODO: add translations
17+
showErrorToast(`Error ${event.detail.xhr.status} when calling ${event.detail.requestConfig.path}`);
18+
});

‎webpack.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,7 @@ export default {
214214
},
215215
override: {
216216
'khroma@*': {licenseName: 'MIT'}, // https://github.com/fabiospampinato/khroma/pull/33
217+
'htmx.org@1.9.10': {licenseName: 'BSD-2-Clause'}, // "BSD 2-Clause" -> "BSD-2-Clause"
217218
},
218219
emitError: true,
219220
allow: '(Apache-2.0 OR BSD-2-Clause OR BSD-3-Clause OR MIT OR ISC OR CPAL-1.0 OR Unlicense OR EPL-1.0 OR EPL-2.0)',

0 commit comments

Comments
 (0)