mirrors/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-08-22 02:11:12 +00:00
Code Issues Projects Releases Packages Wiki Activity

frontend: generic lazy loader for webcomponents (#8510)

Browse source 
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>
This commit is contained in:
oliverpool 2025-07-23 04:10:50 +02:00 • committed by Gusted
commit 83ea43cf49
14 changed files with 166 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

6
web_src/js/render/gltf.js
View file

@ -1,6 +0,0 @@
export async function initGltfViewer() {
const els = document.querySelectorAll('model-viewer');
if (!els.length) return;
await import(/* webpackChunkName: "@google/model-viewer" */'@google/model-viewer');
}

19
web_src/js/render/pdf.js
View file

@ -1,19 +0,0 @@
import {htmlEscape} from 'escape-goat';
export async function initPdfViewer() {
const els = document.querySelectorAll('.pdf-content');
if (!els.length) return;
const pdfobject = await import(/* webpackChunkName: "pdfobject" */'pdfobject');
for (const el of els) {
const src = el.getAttribute('data-src');
const fallbackText = el.getAttribute('data-fallback-button-text');
pdfobject.embed(src, el, {
fallbackLink: htmlEscape`
<a role="button" class="ui basic button pdf-fallback-button" href="[url]">${fallbackText}</a>
`,
});
el.classList.remove('is-loading');
}
}