From e47aa7157fa6f5e775b836e444cd0586e04fd054 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 15 Mar 2024 03:50:13 +0100 Subject: [PATCH 1/6] Use `Temporal.PlainDate` for absolute dates --- package-lock.json | 14 ++++++++++++++ package.json | 1 + web_src/js/webcomponents/absolute-date.js | 15 ++++++--------- 3 files changed, 21 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9ed28e671ae02..1b8ed2ddc2cdf 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 efa71a7747067..80a577ba20ef0 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 d12ea0a437ff5..f39eb8335ed70 100644 --- a/web_src/js/webcomponents/absolute-date.js +++ b/web_src/js/webcomponents/absolute-date.js @@ -1,3 +1,5 @@ +import {Temporal} from 'temporal-polyfill'; + window.customElements.define('absolute-date', class extends HTMLElement { static observedAttributes = ['date', 'year', 'month', 'weekday', 'day']; @@ -10,16 +12,11 @@ window.customElements.define('absolute-date', class extends HTMLElement { 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 extract the first 10 characters, e.g. the `yyyy-mm-dd` part + const [isoYear, isoMonth, isoDate] = this.getAttribute('date').substring(0, 10).split('-'); + const date = new Temporal.PlainDate(isoYear, isoMonth, isoDate); if (!this.shadowRoot) this.attachShadow({mode: 'open'}); - this.shadowRoot.textContent = correctedDate.toLocaleString(lang ?? [], { + this.shadowRoot.textContent = date.toLocaleString(lang ?? [], { ...(year && {year}), ...(month && {month}), ...(weekday && {weekday}), From 4977e545ede04ad411d8ab51b8dbb730f3f321b3 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 15 Mar 2024 04:03:43 +0100 Subject: [PATCH 2/6] rename --- web_src/js/webcomponents/absolute-date.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/js/webcomponents/absolute-date.js b/web_src/js/webcomponents/absolute-date.js index f39eb8335ed70..5070e5d869e88 100644 --- a/web_src/js/webcomponents/absolute-date.js +++ b/web_src/js/webcomponents/absolute-date.js @@ -14,9 +14,9 @@ window.customElements.define('absolute-date', class extends HTMLElement { // only extract the first 10 characters, e.g. the `yyyy-mm-dd` part const [isoYear, isoMonth, isoDate] = this.getAttribute('date').substring(0, 10).split('-'); - const date = new Temporal.PlainDate(isoYear, isoMonth, isoDate); + const plainDate = new Temporal.PlainDate(isoYear, isoMonth, isoDate); if (!this.shadowRoot) this.attachShadow({mode: 'open'}); - this.shadowRoot.textContent = date.toLocaleString(lang ?? [], { + this.shadowRoot.textContent = plainDate.toLocaleString(lang ?? [], { ...(year && {year}), ...(month && {month}), ...(weekday && {weekday}), From 9aedf905d30ccc4d5100f0e87f363b5cbb395309 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 15 Mar 2024 04:12:52 +0100 Subject: [PATCH 3/6] use Temporal.PlainDate.from --- web_src/js/webcomponents/absolute-date.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/web_src/js/webcomponents/absolute-date.js b/web_src/js/webcomponents/absolute-date.js index 5070e5d869e88..cea9f6da6572f 100644 --- a/web_src/js/webcomponents/absolute-date.js +++ b/web_src/js/webcomponents/absolute-date.js @@ -12,9 +12,8 @@ window.customElements.define('absolute-date', class extends HTMLElement { this.ownerDocument.documentElement.getAttribute('lang') || ''; - // only extract the first 10 characters, e.g. the `yyyy-mm-dd` part - const [isoYear, isoMonth, isoDate] = this.getAttribute('date').substring(0, 10).split('-'); - const plainDate = new Temporal.PlainDate(isoYear, isoMonth, isoDate); + // only use the first 10 characters, e.g. the `yyyy-mm-dd` part + const plainDate = Temporal.PlainDate.from(this.getAttribute('date').substring(0, 10)); if (!this.shadowRoot) this.attachShadow({mode: 'open'}); this.shadowRoot.textContent = plainDate.toLocaleString(lang ?? [], { ...(year && {year}), From e1de1c7f2223fb8d8fab455589326beb4ff5abab Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 15 Mar 2024 10:02:36 +0100 Subject: [PATCH 4/6] add tests --- web_src/js/webcomponents/absolute-date.js | 8 ++++++-- web_src/js/webcomponents/absolute-date.test.js | 15 +++++++++++++++ 2 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 web_src/js/webcomponents/absolute-date.test.js diff --git a/web_src/js/webcomponents/absolute-date.js b/web_src/js/webcomponents/absolute-date.js index cea9f6da6572f..88fe410b77634 100644 --- a/web_src/js/webcomponents/absolute-date.js +++ b/web_src/js/webcomponents/absolute-date.js @@ -1,5 +1,10 @@ import {Temporal} from 'temporal-polyfill'; +export function toAbsoluteLocaleDate(str, lang, opts) { + const plainDate = Temporal.PlainDate.from(str); + return plainDate.toLocaleString(lang ?? [], opts); +} + window.customElements.define('absolute-date', class extends HTMLElement { static observedAttributes = ['date', 'year', 'month', 'weekday', 'day']; @@ -13,9 +18,8 @@ window.customElements.define('absolute-date', class extends HTMLElement { ''; // only use the first 10 characters, e.g. the `yyyy-mm-dd` part - const plainDate = Temporal.PlainDate.from(this.getAttribute('date').substring(0, 10)); if (!this.shadowRoot) this.attachShadow({mode: 'open'}); - this.shadowRoot.textContent = plainDate.toLocaleString(lang ?? [], { + this.shadowRoot.textContent = toAbsoluteLocaleDate(this.getAttribute('date').substring(0, 10), 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 0000000000000..ba04451b6566e --- /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'); +}); From bb687cccb7493f3d376fe219307d718657280ec2 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 15 Mar 2024 10:05:20 +0100 Subject: [PATCH 5/6] small refactor --- web_src/js/webcomponents/absolute-date.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/web_src/js/webcomponents/absolute-date.js b/web_src/js/webcomponents/absolute-date.js index 88fe410b77634..da622d0b7cff3 100644 --- a/web_src/js/webcomponents/absolute-date.js +++ b/web_src/js/webcomponents/absolute-date.js @@ -1,7 +1,7 @@ import {Temporal} from 'temporal-polyfill'; -export function toAbsoluteLocaleDate(str, lang, opts) { - const plainDate = Temporal.PlainDate.from(str); +export function toAbsoluteLocaleDate(dateStr, lang, opts) { + const plainDate = Temporal.PlainDate.from(dateStr); return plainDate.toLocaleString(lang ?? [], opts); } @@ -14,12 +14,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 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 = toAbsoluteLocaleDate(this.getAttribute('date').substring(0, 10), lang, { + this.shadowRoot.textContent = toAbsoluteLocaleDate(dateStr, lang, { ...(year && {year}), ...(month && {month}), ...(weekday && {weekday}), From 65d766fd4a99babcf60decd3b1b1365ad31c660b Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 15 Mar 2024 10:07:20 +0100 Subject: [PATCH 6/6] another refactor --- web_src/js/webcomponents/absolute-date.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web_src/js/webcomponents/absolute-date.js b/web_src/js/webcomponents/absolute-date.js index da622d0b7cff3..d2be455302450 100644 --- a/web_src/js/webcomponents/absolute-date.js +++ b/web_src/js/webcomponents/absolute-date.js @@ -1,8 +1,7 @@ import {Temporal} from 'temporal-polyfill'; export function toAbsoluteLocaleDate(dateStr, lang, opts) { - const plainDate = Temporal.PlainDate.from(dateStr); - return plainDate.toLocaleString(lang ?? [], opts); + return Temporal.PlainDate.from(dateStr).toLocaleString(lang ?? [], opts); } window.customElements.define('absolute-date', class extends HTMLElement {