kevadesu/forgejo
1
0
Fork 1
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-08-06 03:06:44 +02:00
Code Issues Projects Releases Packages Wiki Activity
forgejo/web_src/js/webcomponents
History
oliverpool 83ea43cf49 frontend: generic lazy loader for webcomponents (#8510) 
After seeing #8111 use a webcomponent, I think that they are a neat usecase for Forgejo where most of the frontend is backend-generated, with some "island of enhancements".

I am considering using a webcomponent for the CITATION management (last occurrence of [`Blob.GetBlobContent`](https://codeberg.org/forgejo/forgejo/issues/8222)), however I noticed that the developer experience wasn't ideal.

With this PR it would be very easy to declare a webcomponent, which will be loaded only if needed (I converted `model-viewer` and `pdf-object` to this technique).

Some cleanup in the neighbor webcomponents.

## Testing

1) Create a new repository or use an existing one.
2) Upload a `.pdf` or `.glb`  file (such as https://codeberg.org/forgejo/forgejo/src/branch/forgejo/tests/testdata/data/viewer/Unicode%E2%9D%A4%E2%99%BBTest.glb)
3) Open the Network inspector and view the file in the repository.
    - After a short loading spinner, the PDF or 3D model should be rendered in a viewer
    - the related JS should have been loaded (e.g. http://localhost:3000/assets/js/model-viewer.494bf0cd.js)
    - visiting another page and check that this JS file isn't loaded

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8510
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: oliverpool <git@olivier.pfad.fr>
Co-committed-by: oliverpool <git@olivier.pfad.fr>
2025-07-23 04:10:50 +02:00
..
absolute-date.js [PORT] Fix toAbsoluteLocaleDate and add more tests (gitea#32387) 2024-11-03 15:55:05 +01:00
absolute-date.test.js fix(tests): prevent frontend test dependency on system locale (#6649) 2025-01-22 03:56:36 +00:00
index.js frontend: generic lazy loader for webcomponents (#8510) 2025-07-23 04:10:50 +02:00
lazy-webc.js frontend: generic lazy loader for webcomponents (#8510) 2025-07-23 04:10:50 +02:00
origin-url.js Add <overflow-menu>, rename webcomponents (#29400) 2024-03-20 08:46:29 +01:00
origin-url.test.js [PORT] Fix a number of typescript issues (gitea#32308) 2024-11-04 09:15:06 +01:00
overflow-menu.js Add typescript 2024-10-29 18:15:09 +01:00
pdf-object.js frontend: generic lazy loader for webcomponents (#8510) 2025-07-23 04:10:50 +02:00
README.md Add <overflow-menu>, rename webcomponents (#29400) 2024-03-20 08:46:29 +01:00
relative-time.js frontend: generic lazy loader for webcomponents (#8510) 2025-07-23 04:10:50 +02:00
relative-time.test.js Make relative-time a self-maintaining custom element (#8134) 2025-06-10 20:12:21 +02:00

README.md

Web Components

This webcomponents directory contains the source code for the web components used in the Gitea Web UI.

https://developer.mozilla.org/en-US/docs/Web/Web_Components

Guidelines

  • These components are loaded in <head> (before DOM body) in a separate entry point, they need to be lightweight to not affect the page loading time too much.
  • Do not import svg.js into a web component because that file is currently not tree-shakeable, import svg files individually insteat.
  • All our components must be added to webpack.config.js so they work correctly in Vue.