Skip to content

Commit f1ec847

Browse files
committed
Use Temporal.PlainDate for absolute dates (go-gitea#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.
1 parent 31ab839 commit f1ec847

File tree

2 files changed

+25
-10
lines changed

2 files changed

+25
-10
lines changed

web_src/js/webcomponents/GiteaAbsoluteDate.js

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
import {Temporal} from 'temporal-polyfill';
2+
3+
export function toAbsoluteLocaleDate(dateStr, lang, opts) {
4+
return Temporal.PlainDate.from(dateStr).toLocaleString(lang ?? [], opts);
5+
}
6+
17
window.customElements.define('gitea-absolute-date', class extends HTMLElement {
28
static observedAttributes = ['date', 'year', 'month', 'weekday', 'day'];
39

@@ -7,19 +13,13 @@ window.customElements.define('gitea-absolute-date', class extends HTMLElement {
713
const weekday = this.getAttribute('weekday') ?? '';
814
const day = this.getAttribute('day') ?? '';
915
const lang = this.closest('[lang]')?.getAttribute('lang') ||
10-
this.ownerDocument.documentElement.getAttribute('lang') ||
11-
'';
16+
this.ownerDocument.documentElement.getAttribute('lang') || '';
1217

13-
// only extract the `yyyy-mm-dd` part. When converting to Date, it will become midnight UTC and when rendered
14-
// as localized date, will have a offset towards UTC, which we remove to shift the timestamp to midnight in the
15-
// localized date. We should eventually use `Temporal.PlainDate` which will make the correction unnecessary.
16-
// - https://stackoverflow.com/a/14569783/808699
17-
// - https://tc39.es/proposal-temporal/docs/plaindate.html
18-
const date = new Date(this.getAttribute('date').substring(0, 10));
19-
const correctedDate = new Date(date.getTime() - date.getTimezoneOffset() * -60000);
18+
// only use the first 10 characters, e.g. the `yyyy-mm-dd` part
19+
const dateStr = this.getAttribute('date').substring(0, 10);
2020

2121
if (!this.shadowRoot) this.attachShadow({mode: 'open'});
22-
this.shadowRoot.textContent = correctedDate.toLocaleString(lang ?? [], {
22+
this.shadowRoot.textContent = toAbsoluteLocaleDate(dateStr, lang, {
2323
...(year && {year}),
2424
...(month && {month}),
2525
...(weekday && {weekday}),
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {toAbsoluteLocaleDate} from './GiteaAbsoluteDate.js';
2+
3+
test('toAbsoluteLocaleDate', () => {
4+
expect(toAbsoluteLocaleDate('2024-03-15', 'en-US', {
5+
year: 'numeric',
6+
month: 'long',
7+
day: 'numeric',
8+
})).toEqual('March 15, 2024');
9+
10+
expect(toAbsoluteLocaleDate('2024-03-15', 'de-DE', {
11+
year: 'numeric',
12+
month: 'long',
13+
day: 'numeric',
14+
})).toEqual('15. März 2024');
15+
});

0 commit comments

Comments
 (0)