git724/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Use Temporal.PlainDate for absolute dates (#29804)

Browse source 
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.

(cherry picked from commit 0d3ec8e2adfcf49329b52d74367698b62ffb3f73)
This commit is contained in:
silverwind 2024-03-15 10:13:01 +01:00 • committed by Earl Warren
parent ab01aac0c0
commit 1a17c39e00
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00
4 changed files with 40 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

20
web_src/js/webcomponents/absolute-date.js
View file

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