From 1a17c39e00cc264dceff316433ca5106c6c08d0a Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 15 Mar 2024 10:13:01 +0100 Subject: [PATCH] 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 `` 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) --- package-lock.json | 14 +++++++++++++ package.json | 1 + web_src/js/webcomponents/absolute-date.js | 20 +++++++++---------- .../js/webcomponents/absolute-date.test.js | 15 ++++++++++++++ 4 files changed, 40 insertions(+), 10 deletions(-) create mode 100644 web_src/js/webcomponents/absolute-date.test.js diff --git a/package-lock.json b/package-lock.json index d80e02b64f..52c065020a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index efa71a7747..80a577ba20 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/web_src/js/webcomponents/absolute-date.js b/web_src/js/webcomponents/absolute-date.js index d12ea0a437..d2be455302 100644 --- a/web_src/js/webcomponents/absolute-date.js +++ b/web_src/js/webcomponents/absolute-date.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('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}), diff --git a/web_src/js/webcomponents/absolute-date.test.js b/web_src/js/webcomponents/absolute-date.test.js new file mode 100644 index 0000000000..ba04451b65 --- /dev/null +++ b/web_src/js/webcomponents/absolute-date.test.js @@ -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'); +});