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.

(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

14
package-lock.json generated
View file

@ -47,6 +47,7 @@
"sortablejs": "1.15.2",
"swagger-ui-dist": "5.12.0",
"tailwindcss": "3.4.1",
"temporal-polyfill": "0.2.3",
"throttle-debounce": "5.0.0",
"tinycolor2": "1.6.0",
"tippy.js": "6.3.7",
@ -11524,6 +11525,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.29.2",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.29.2.tgz",

View file

@ -46,6 +46,7 @@
"sortablejs": "1.15.2",
"swagger-ui-dist": "5.12.0",
"tailwindcss": "3.4.1",
"temporal-polyfill": "0.2.3",
"throttle-debounce": "5.0.0",
"tinycolor2": "1.6.0",
"tippy.js": "6.3.7",

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

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