1
0
Fork 0
forgejo/package.json
Yarden Shoham 3e8414179c
Introduce htmx and use it to avoid full page load on Subscribe and Follow (#28908)
- Closes https://github.com/go-gitea/gitea/issues/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>
2024-01-30 15:45:54 +01:00

93 lines
2.8 KiB
JSON

{
"type": "module",
"engines": {
"node": ">= 18.0.0"
},
"dependencies": {
"@citation-js/core": "0.7.1",
"@citation-js/plugin-bibtex": "0.7.2",
"@citation-js/plugin-csl": "0.7.2",
"@citation-js/plugin-software-formats": "0.6.1",
"@claviska/jquery-minicolors": "2.3.6",
"@github/markdown-toolbar-element": "2.2.1",
"@github/relative-time-element": "4.3.1",
"@github/text-expander-element": "2.6.1",
"@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
"@primer/octicons": "19.8.0",
"@webcomponents/custom-elements": "1.6.0",
"add-asset-webpack-plugin": "2.0.1",
"ansi_up": "6.0.2",
"asciinema-player": "3.6.3",
"clippie": "4.0.6",
"css-loader": "6.8.1",
"dropzone": "6.0.0-beta.2",
"easymde": "2.18.0",
"esbuild-loader": "4.0.2",
"escape-goat": "4.0.0",
"fast-glob": "3.3.2",
"htmx.org": "1.9.10",
"jquery": "3.7.1",
"katex": "0.16.9",
"license-checker-webpack-plugin": "0.2.1",
"lightningcss-loader": "2.1.0",
"mermaid": "10.6.1",
"mini-css-extract-plugin": "2.7.6",
"minimatch": "9.0.3",
"monaco-editor": "0.45.0",
"monaco-editor-webpack-plugin": "7.1.0",
"pdfobject": "2.2.12",
"pretty-ms": "8.0.0",
"sortablejs": "1.15.1",
"swagger-ui-dist": "5.10.5",
"throttle-debounce": "5.0.0",
"tinycolor2": "1.6.0",
"tippy.js": "6.3.7",
"toastify-js": "1.12.0",
"tributejs": "5.1.3",
"uint8-to-base64": "0.2.0",
"vue": "3.3.13",
"vue-bar-graph": "2.0.0",
"vue-loader": "17.3.1",
"vue3-calendar-heatmap": "2.0.5",
"webpack": "5.89.0",
"webpack-cli": "5.1.4",
"wrap-ansi": "9.0.0"
},
"devDependencies": {
"@eslint-community/eslint-plugin-eslint-comments": "4.1.0",
"@playwright/test": "1.40.1",
"@stoplight/spectral-cli": "6.11.0",
"@stylistic/eslint-plugin-js": "1.5.1",
"@vitejs/plugin-vue": "4.5.2",
"eslint": "8.56.0",
"eslint-plugin-array-func": "4.0.0",
"eslint-plugin-i": "2.29.1",
"eslint-plugin-jquery": "1.5.1",
"eslint-plugin-no-jquery": "2.7.0",
"eslint-plugin-no-use-extend-native": "0.5.0",
"eslint-plugin-regexp": "2.1.2",
"eslint-plugin-sonarjs": "0.23.0",
"eslint-plugin-unicorn": "49.0.0",
"eslint-plugin-vitest": "0.3.18",
"eslint-plugin-vitest-globals": "1.4.0",
"eslint-plugin-vue": "9.19.2",
"eslint-plugin-vue-scoped-css": "2.6.1",
"eslint-plugin-wc": "2.0.4",
"jsdom": "23.0.1",
"markdownlint-cli": "0.38.0",
"postcss-html": "1.5.0",
"stylelint": "15.11.0",
"stylelint-declaration-block-no-ignored-properties": "2.7.0",
"stylelint-declaration-strict-value": "1.9.2",
"stylelint-stylistic": "0.4.3",
"svgo": "3.1.0",
"updates": "15.0.4",
"vite-string-plugin": "1.1.2",
"vitest": "1.1.0"
},
"browserslist": [
"defaults",
"not ie > 0",
"not ie_mob > 0"
]
}