mirror of
https://github.com/go-gitea/gitea
synced 2024-09-12 09:26:56 +02:00
Use Temporal.PlainDate
for absolute dates (#29804)
Use the upcoming [Temporal.PlainDate](https://tc39.es/proposal-temporal/docs/plaindate.html) via polyfill. If there is any remaining bugs in `<absolute-date>` this will iron them out. I opted for the lightweight polyfill because both seem to achieve our goal of localizeable absolute dates. - With [`@js-temporal/polyfill`](https://www.npmjs.com/package/@js-temporal/polyfill) chunk size goes from 81.4 KiB to 274 KiB - With [`temporal-polyfill`](https://www.npmjs.com/package/temporal-polyfill) chunk size goes from 81.4 KiB to 142 KiB Also see [this table](https://github.com/fullcalendar/temporal-polyfill?tab=readme-ov-file#comparison-with-js-temporalpolyfill) for more comparisons of these polyfills. Soon there will be [treeshakable API](https://github.com/fullcalendar/temporal-polyfill?tab=readme-ov-file#tree-shakable-api) as well which will further reduce size.
This commit is contained in:
parent
277f90d416
commit
0d3ec8e2ad
14
package-lock.json
generated
14
package-lock.json
generated
@ -47,6 +47,7 @@
|
|||||||
"sortablejs": "1.15.2",
|
"sortablejs": "1.15.2",
|
||||||
"swagger-ui-dist": "5.12.0",
|
"swagger-ui-dist": "5.12.0",
|
||||||
"tailwindcss": "3.4.1",
|
"tailwindcss": "3.4.1",
|
||||||
|
"temporal-polyfill": "0.2.3",
|
||||||
"throttle-debounce": "5.0.0",
|
"throttle-debounce": "5.0.0",
|
||||||
"tinycolor2": "1.6.0",
|
"tinycolor2": "1.6.0",
|
||||||
"tippy.js": "6.3.7",
|
"tippy.js": "6.3.7",
|
||||||
@ -11524,6 +11525,19 @@
|
|||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/temporal-polyfill": {
|
||||||
|
"version": "0.2.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/temporal-polyfill/-/temporal-polyfill-0.2.3.tgz",
|
||||||
|
"integrity": "sha512-7ZJRc7wq/1XjrOQYkkNpgo2qfE9XLrUU8D/DS+LAC/T0bYqZ46rW6dow0sOTXTPZS4bwer8bD/0OyuKQBfA3yw==",
|
||||||
|
"dependencies": {
|
||||||
|
"temporal-spec": "^0.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/temporal-spec": {
|
||||||
|
"version": "0.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/temporal-spec/-/temporal-spec-0.2.0.tgz",
|
||||||
|
"integrity": "sha512-r1AT0XdEp8TMQ13FLvOt8mOtAxDQsRt2QU5rSWCA7YfshddU651Y1NHVrceLANvixKdf9fYO8B/S9fXHodB7HQ=="
|
||||||
|
},
|
||||||
"node_modules/terser": {
|
"node_modules/terser": {
|
||||||
"version": "5.29.2",
|
"version": "5.29.2",
|
||||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.29.2.tgz",
|
"resolved": "https://registry.npmjs.org/terser/-/terser-5.29.2.tgz",
|
||||||
|
@ -46,6 +46,7 @@
|
|||||||
"sortablejs": "1.15.2",
|
"sortablejs": "1.15.2",
|
||||||
"swagger-ui-dist": "5.12.0",
|
"swagger-ui-dist": "5.12.0",
|
||||||
"tailwindcss": "3.4.1",
|
"tailwindcss": "3.4.1",
|
||||||
|
"temporal-polyfill": "0.2.3",
|
||||||
"throttle-debounce": "5.0.0",
|
"throttle-debounce": "5.0.0",
|
||||||
"tinycolor2": "1.6.0",
|
"tinycolor2": "1.6.0",
|
||||||
"tippy.js": "6.3.7",
|
"tippy.js": "6.3.7",
|
||||||
|
@ -1,3 +1,9 @@
|
|||||||
|
import {Temporal} from 'temporal-polyfill';
|
||||||
|
|
||||||
|
export function toAbsoluteLocaleDate(dateStr, lang, opts) {
|
||||||
|
return Temporal.PlainDate.from(dateStr).toLocaleString(lang ?? [], opts);
|
||||||
|
}
|
||||||
|
|
||||||
window.customElements.define('absolute-date', class extends HTMLElement {
|
window.customElements.define('absolute-date', class extends HTMLElement {
|
||||||
static observedAttributes = ['date', 'year', 'month', 'weekday', 'day'];
|
static observedAttributes = ['date', 'year', 'month', 'weekday', 'day'];
|
||||||
|
|
||||||
@ -7,19 +13,13 @@ window.customElements.define('absolute-date', class extends HTMLElement {
|
|||||||
const weekday = this.getAttribute('weekday') ?? '';
|
const weekday = this.getAttribute('weekday') ?? '';
|
||||||
const day = this.getAttribute('day') ?? '';
|
const day = this.getAttribute('day') ?? '';
|
||||||
const lang = this.closest('[lang]')?.getAttribute('lang') ||
|
const lang = this.closest('[lang]')?.getAttribute('lang') ||
|
||||||
this.ownerDocument.documentElement.getAttribute('lang') ||
|
this.ownerDocument.documentElement.getAttribute('lang') || '';
|
||||||
'';
|
|
||||||
|
|
||||||
// only extract the `yyyy-mm-dd` part. When converting to Date, it will become midnight UTC and when rendered
|
// only use the first 10 characters, e.g. the `yyyy-mm-dd` part
|
||||||
// as localized date, will have a offset towards UTC, which we remove to shift the timestamp to midnight in the
|
const dateStr = this.getAttribute('date').substring(0, 10);
|
||||||
// localized date. We should eventually use `Temporal.PlainDate` which will make the correction unnecessary.
|
|
||||||
// - https://stackoverflow.com/a/14569783/808699
|
|
||||||
// - https://tc39.es/proposal-temporal/docs/plaindate.html
|
|
||||||
const date = new Date(this.getAttribute('date').substring(0, 10));
|
|
||||||
const correctedDate = new Date(date.getTime() - date.getTimezoneOffset() * -60000);
|
|
||||||
|
|
||||||
if (!this.shadowRoot) this.attachShadow({mode: 'open'});
|
if (!this.shadowRoot) this.attachShadow({mode: 'open'});
|
||||||
this.shadowRoot.textContent = correctedDate.toLocaleString(lang ?? [], {
|
this.shadowRoot.textContent = toAbsoluteLocaleDate(dateStr, lang, {
|
||||||
...(year && {year}),
|
...(year && {year}),
|
||||||
...(month && {month}),
|
...(month && {month}),
|
||||||
...(weekday && {weekday}),
|
...(weekday && {weekday}),
|
||||||
|
15
web_src/js/webcomponents/absolute-date.test.js
Normal file
15
web_src/js/webcomponents/absolute-date.test.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import {toAbsoluteLocaleDate} from './absolute-date.js';
|
||||||
|
|
||||||
|
test('toAbsoluteLocaleDate', () => {
|
||||||
|
expect(toAbsoluteLocaleDate('2024-03-15', 'en-US', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric',
|
||||||
|
})).toEqual('March 15, 2024');
|
||||||
|
|
||||||
|
expect(toAbsoluteLocaleDate('2024-03-15', 'de-DE', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric',
|
||||||
|
})).toEqual('15. März 2024');
|
||||||
|
});
|
Loading…
Reference in New Issue
Block a user