Backport https://github.com/go-gitea/gitea/pull/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.tags/v1.21.9
@@ -39,6 +39,7 @@ | |||
"pretty-ms": "8.0.0", | |||
"sortablejs": "1.15.0", | |||
"swagger-ui-dist": "5.9.0", | |||
"temporal-polyfill": "0.2.3", | |||
"throttle-debounce": "5.0.0", | |||
"tinycolor2": "1.6.0", | |||
"tippy.js": "6.3.7", | |||
@@ -10310,6 +10311,19 @@ | |||
"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": { | |||
"version": "5.21.0", | |||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.21.0.tgz", |
@@ -38,6 +38,7 @@ | |||
"pretty-ms": "8.0.0", | |||
"sortablejs": "1.15.0", | |||
"swagger-ui-dist": "5.9.0", | |||
"temporal-polyfill": "0.2.3", | |||
"throttle-debounce": "5.0.0", | |||
"tinycolor2": "1.6.0", | |||
"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('gitea-absolute-date', class extends HTMLElement { | |||
static observedAttributes = ['date', 'year', 'month', 'weekday', 'day']; | |||
@@ -7,19 +13,13 @@ window.customElements.define('gitea-absolute-date', class extends HTMLElement { | |||
const weekday = this.getAttribute('weekday') ?? ''; | |||
const day = this.getAttribute('day') ?? ''; | |||
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 | |||
// as localized date, will have a offset towards UTC, which we remove to shift the timestamp to midnight in the | |||
// 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); | |||
// only use the first 10 characters, e.g. the `yyyy-mm-dd` part | |||
const dateStr = this.getAttribute('date').substring(0, 10); | |||
if (!this.shadowRoot) this.attachShadow({mode: 'open'}); | |||
this.shadowRoot.textContent = correctedDate.toLocaleString(lang ?? [], { | |||
this.shadowRoot.textContent = toAbsoluteLocaleDate(dateStr, lang, { | |||
...(year && {year}), | |||
...(month && {month}), | |||
...(weekday && {weekday}), |
@@ -0,0 +1,15 @@ | |||
import {toAbsoluteLocaleDate} from './GiteaAbsoluteDate.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'); | |||
}); |