kevadesu/forgejo
1
0
Fork 1
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-08-10 05:06:44 +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

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