kevadesu/forgejo
1
0
Fork 1
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-08-12 22:26:47 +02: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
parent c3b18a6deb
commit 83ea43cf49
14 changed files with 166 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

75
web_src/js/webcomponents/i18n.js
View file

@ -1,75 +0,0 @@
const {pageData} = window.config;
/**
* A list of plural rules for all languages.
* `plural_rules.go` defines the index for each of the 14 known plural rules.
*
* `pageData.PLURAL_RULE_LANG` is the index of the plural rule for the current language.
* `pageData.PLURAL_RULE_FALLBACK` is the index of the plural rule for the default language,
* to be used when a string is not translated in the current language.
*
* Each plural rule is a function that maps an amount `n` to the appropriate plural form index.
* Which index means which rule is specific for each language and also defined in `plural_rules.go`.
* The actual strings are in `pageData.PLURALSTRINGS_LANG` and `pageData.PLURALSTRINGS_FALLBACK`
* respectively, which is an array indexed by the plural form index.
*
* Links to the language plural rule and form definitions:
* https://codeberg.org/forgejo/forgejo/src/branch/forgejo/modules/translation/plural_rules.go
* https://www.unicode.org/cldr/charts/46/supplemental/language_plural_rules.html
* https://translate.codeberg.org/languages/$LANGUAGE_CODE/#information
* https://github.com/WeblateOrg/language-data/blob/main/languages.csv
*/
const PLURAL_RULES = [
// [ 0] Common 2-form, e.g. English, German
function (n) { return n !== 1 ? 1 : 0 },
// [ 1] Bengali 2-form
function (n) { return n > 1 ? 1 : 0 },
// [ 2] Icelandic 2-form
function (n) { return n % 10 !== 1 || n % 100 === 11 ? 1 : 0 },
// [ 3] Filipino 2-form
function (n) { return n !== 1 && n !== 2 && n !== 3 && (n % 10 === 4 || n % 10 === 6 || n % 10 === 9) ? 1 : 0 },
// [ 4] One form
function (_) { return 0 },
// [ 5] Czech 3-form
function (n) { return (n === 1) ? 0 : (n >= 2 && n <= 4) ? 1 : 2 },
// [ 6] Russian 3-form
function (n) { return n % 10 === 1 && n % 100 !== 11 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2 },
// [ 7] Polish 3-form
function (n) { return n === 1 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2 },
// [ 8] Latvian 3-form
function (n) { return (n % 10 === 0 || n % 100 >= 11 && n % 100 <= 19) ? 0 : ((n % 10 === 1 && n % 100 !== 11) ? 1 : 2) },
// [ 9] Lithunian 3-form
function (n) { return (n % 10 === 1 && (n % 100 < 11 || n % 100 > 19)) ? 0 : ((n % 10 >= 2 && n % 10 <= 9 && (n % 100 < 11 || n % 100 > 19)) ? 1 : 2) },
// [10] French 3-form
function (n) { return (n === 0 || n === 1) ? 0 : ((n !== 0 && n % 1000000 === 0) ? 1 : 2) },
// [11] Catalan 3-form
function (n) { return (n === 1) ? 0 : ((n !== 0 && n % 1000000 === 0) ? 1 : 2) },
// [12] Slovenian 4-form
function (n) { return n % 100 === 1 ? 0 : n % 100 === 2 ? 1 : n % 100 === 3 || n % 100 === 4 ? 2 : 3 },
// [13] Arabic 6-form
function (n) { return n === 0 ? 0 : n === 1 ? 1 : n === 2 ? 2 : n % 100 >= 3 && n % 100 <= 10 ? 3 : n % 100 >= 11 ? 4 : 5 },
];
/**
* Look up the correct localized plural form for amount `n` for the string with the translation key `key`.
* If the current language does not contain a translation for this key, returns the text in the default language,
* or `null` if `suppress_fallback` is set to `true`.
*/
export function GetPluralizedString(key, n, suppress_fallback) {
const result = pageData.PLURALSTRINGS_LANG[key]?.[PLURAL_RULES[pageData.PLURAL_RULE_LANG](n)];
if (result || suppress_fallback) return result;
return pageData.PLURALSTRINGS_FALLBACK[key][PLURAL_RULES[pageData.PLURAL_RULE_FALLBACK](n)];
}

3
web_src/js/webcomponents/index.js
View file

@ -1,6 +1,5 @@
import './polyfills.js';
import './i18n.js';
import './relative-time.js';
import './origin-url.js';
import './overflow-menu.js';
import './absolute-date.js';
import './lazy-webc.js'; // infrequently used components should be lazy-loaded with <lazy-webc tag="..." custom-attrs>...</>

66
web_src/js/webcomponents/lazy-webc.js Normal file
View file

@ -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
}
}
},
);
});

14
web_src/js/webcomponents/pdf-object.js Normal file
View file

@ -0,0 +1,14 @@
import pdfobject from 'pdfobject';
window.customElements.define(
'pdf-object',
class extends HTMLElement {
connectedCallback() {
// since the web-component is defined after the DOM is ready, it is safe to look at the children.
const fallbackLink = this.innerHTML; // eslint-disable-line wc/no-child-traversal-in-connectedcallback
pdfobject.embed(this.getAttribute('src'), this, {
fallbackLink,
});
}
},
);

17
web_src/js/webcomponents/polyfills.js
View file

@ -1,17 +0,0 @@
try {
// some browsers like PaleMoon don't have full support for Intl.NumberFormat, so do the minimum polyfill to support "relative-time-element"
// https://repo.palemoon.org/MoonchildProductions/UXP/issues/2289
new Intl.NumberFormat('en', {style: 'unit', unit: 'minute'}).format(1);
} catch {
const intlNumberFormat = Intl.NumberFormat;
Intl.NumberFormat = function(locales, options) {
if (options.style === 'unit') {
return {
format(value) {
return ` ${value} ${options.unit}`;
},
};
}
return intlNumberFormat(locales, options);
};
}

70
web_src/js/webcomponents/relative-time.js
View file

@ -1,4 +1,3 @@
import {GetPluralizedString} from './i18n.js';
import dayjs from 'dayjs';
const {pageData} = window.config;
@ -17,8 +16,75 @@ const ABSOLUTE_DATETIME_FORMAT = new Intl.DateTimeFormat(navigator.language, {
});
const FALLBACK_DATETIME_FORMAT = new Intl.RelativeTimeFormat(navigator.language, {style: 'long'});
/**
* A list of plural rules for all languages.
* `plural_rules.go` defines the index for each of the 14 known plural rules.
*
* `pageData.PLURAL_RULE_LANG` is the index of the plural rule for the current language.
* `pageData.PLURAL_RULE_FALLBACK` is the index of the plural rule for the default language,
* to be used when a string is not translated in the current language.
*
* Each plural rule is a function that maps an amount `n` to the appropriate plural form index.
* Which index means which rule is specific for each language and also defined in `plural_rules.go`.
* The actual strings are in `pageData.PLURALSTRINGS_LANG` and `pageData.PLURALSTRINGS_FALLBACK`
* respectively, which is an array indexed by the plural form index.
*
* Links to the language plural rule and form definitions:
* https://codeberg.org/forgejo/forgejo/src/branch/forgejo/modules/translation/plural_rules.go
* https://www.unicode.org/cldr/charts/46/supplemental/language_plural_rules.html
* https://translate.codeberg.org/languages/$LANGUAGE_CODE/#information
* https://github.com/WeblateOrg/language-data/blob/main/languages.csv
*/
const PLURAL_RULES = [
// [ 0] Common 2-form, e.g. English, German
function (n) { return n !== 1 ? 1 : 0 },
// [ 1] Bengali 2-form
function (n) { return n > 1 ? 1 : 0 },
// [ 2] Icelandic 2-form
function (n) { return n % 10 !== 1 || n % 100 === 11 ? 1 : 0 },
// [ 3] Filipino 2-form
function (n) { return n !== 1 && n !== 2 && n !== 3 && (n % 10 === 4 || n % 10 === 6 || n % 10 === 9) ? 1 : 0 },
// [ 4] One form
function (_) { return 0 },
// [ 5] Czech 3-form
function (n) { return (n === 1) ? 0 : (n >= 2 && n <= 4) ? 1 : 2 },
// [ 6] Russian 3-form
function (n) { return n % 10 === 1 && n % 100 !== 11 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2 },
// [ 7] Polish 3-form
function (n) { return n === 1 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2 },
// [ 8] Latvian 3-form
function (n) { return (n % 10 === 0 || n % 100 >= 11 && n % 100 <= 19) ? 0 : ((n % 10 === 1 && n % 100 !== 11) ? 1 : 2) },
// [ 9] Lithunian 3-form
function (n) { return (n % 10 === 1 && (n % 100 < 11 || n % 100 > 19)) ? 0 : ((n % 10 >= 2 && n % 10 <= 9 && (n % 100 < 11 || n % 100 > 19)) ? 1 : 2) },
// [10] French 3-form
function (n) { return (n === 0 || n === 1) ? 0 : ((n !== 0 && n % 1000000 === 0) ? 1 : 2) },
// [11] Catalan 3-form
function (n) { return (n === 1) ? 0 : ((n !== 0 && n % 1000000 === 0) ? 1 : 2) },
// [12] Slovenian 4-form
function (n) { return n % 100 === 1 ? 0 : n % 100 === 2 ? 1 : n % 100 === 3 || n % 100 === 4 ? 2 : 3 },
// [13] Arabic 6-form
function (n) { return n === 0 ? 0 : n === 1 ? 1 : n === 2 ? 2 : n % 100 >= 3 && n % 100 <= 10 ? 3 : n % 100 >= 11 ? 4 : 5 },
];
/**
* Look up the correct localized plural form for amount `n` for the string with the translation key `key`.
* If the current language does not contain a translation for this key, fallback to the browser's formatting.
*/
function GetPluralizedStringOrFallback(key, n, unit) {
const translation = GetPluralizedString(key, n, true);
const translation = pageData.PLURALSTRINGS_LANG[key]?.[PLURAL_RULES[pageData.PLURAL_RULE_LANG](n)];
if (translation) return translation.replace('%d', n);
return FALLBACK_DATETIME_FORMAT.format(-n, unit);
}