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.

web_src/js/webcomponents/GiteaAbsoluteDate.js

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

web_src/js/webcomponents/GiteaAbsoluteDate.test.js

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