mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2025-11-04 00:11:04 +00:00
83ea43cf49
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>
66 lines
2.1 KiB
JavaScript
66 lines
2.1 KiB
JavaScript
import {onDomReady} from '../utils/dom.js';
|
|
|
|
/**
|
|
* Lazy-load the promise (making it a singleton).
|
|
* @param {()=>Promise} newPromise Promise factory.
|
|
* @returns {()=>Promise} Singleton promise
|
|
*/
|
|
function lazyPromise(newPromise) {
|
|
/** @type {Promise?} */
|
|
let p;
|
|
return () => {
|
|
p ??= newPromise();
|
|
return p;
|
|
};
|
|
}
|
|
|
|
// the following web components will only be loaded if present in the page (to reduce the bundle size for infrequently used components)
|
|
const loadableComponents = {
|
|
'model-viewer': lazyPromise(() => {
|
|
return import(/* webpackChunkName: "model-viewer" */ '@google/model-viewer');
|
|
}),
|
|
'pdf-object': lazyPromise(() => {
|
|
return import(/* webpackChunkName: "pdf-object" */ './pdf-object.js');
|
|
}),
|
|
};
|
|
|
|
/**
|
|
* Replace elt with an element having the given tag.
|
|
* @param {HTMLElement} elt The element to replace.
|
|
* @param {string} name The tagName of the new element.
|
|
*/
|
|
function replaceTag(elt, name) {
|
|
const successor = document.createElement(name);
|
|
// Move the children to the successor
|
|
while (elt.firstChild) {
|
|
successor.append(elt.firstChild);
|
|
}
|
|
// Copy the attributes to the successor
|
|
for (let index = elt.attributes.length - 1; index >= 0; --index) {
|
|
successor.attributes.setNamedItem(elt.attributes[index].cloneNode());
|
|
}
|
|
// Replace elt with the successor
|
|
elt.parentNode.replaceChild(successor, elt);
|
|
}
|
|
|
|
onDomReady(() => {
|
|
// The lazy-webc component will replace itself with an element of the type given in the attribute tag.
|
|
// This seems to be the best way without having to create a global mutationObserver.
|
|
// See https://codeberg.org/forgejo/forgejo/pulls/8510 for discussion.
|
|
window.customElements.define(
|
|
'lazy-webc',
|
|
class extends HTMLElement {
|
|
connectedCallback() {
|
|
const name = this.getAttribute('tag');
|
|
if (loadableComponents[name]) {
|
|
loadableComponents[name]().finally(() => {
|
|
replaceTag(this, name);
|
|
});
|
|
} else {
|
|
console.error('lazy-webc: unknown webcomponent:', name);
|
|
replaceTag(this, name); // still replace it, maybe it was eagerly defined
|
|
}
|
|
}
|
|
},
|
|
);
|
|
});
|