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>

web_src/js/webcomponents/lazy-webc.js

@@ -0,0 +1,66 @@
+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
+        }
+      }
+    },
+  );
+});