From bdd75c4b5596690a159a827c647fb277fdf92acb Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 30 Oct 2024 17:50:19 +0800 Subject: [PATCH 1/2] [PORT] Fix absolute-date (gitea#32375) --- Conflict resolution: Trivial (package.json package-lock.json) Done differently: Removed typescript types. (cherry picked from commit ce4d909bd693fe903761eb835f7661e476a937ca) --- package-lock.json | 16 ---------- package.json | 1 - web_src/js/webcomponents/absolute-date.js | 30 +++++++++---------- .../js/webcomponents/absolute-date.test.js | 8 ++++- 4 files changed, 21 insertions(+), 34 deletions(-) diff --git a/package-lock.json b/package-lock.json index 23a6f86479..46b7389bb9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,7 +43,6 @@ "sortablejs": "1.15.3", "swagger-ui-dist": "5.17.14", "tailwindcss": "3.4.13", - "temporal-polyfill": "0.2.4", "throttle-debounce": "5.0.0", "tinycolor2": "1.6.0", "tippy.js": "6.3.7", @@ -14888,21 +14887,6 @@ "node": ">=6" } }, - "node_modules/temporal-polyfill": { - "version": "0.2.4", - "resolved": "https://registry.npmjs.org/temporal-polyfill/-/temporal-polyfill-0.2.4.tgz", - "integrity": "sha512-WA5p0CjQTkMjF9m8sP4wSYgpqI8m2d4q7wPUyaJOWhy4bI9mReLb2yGvTV4qf/DPMTe6H6M/Dig5KmTMB7ev6Q==", - "license": "MIT", - "dependencies": { - "temporal-spec": "^0.2.4" - } - }, - "node_modules/temporal-spec": { - "version": "0.2.4", - "resolved": "https://registry.npmjs.org/temporal-spec/-/temporal-spec-0.2.4.tgz", - "integrity": "sha512-lDMFv4nKQrSjlkHKAlHVqKrBG4DyFfa9F74cmBZ3Iy3ed8yvWnlWSIdi4IKfSqwmazAohBNwiN64qGx4y5Q3IQ==", - "license": "ISC" - }, "node_modules/terser": { "version": "5.36.0", "resolved": "https://registry.npmjs.org/terser/-/terser-5.36.0.tgz", diff --git a/package.json b/package.json index fa3f44ea2d..942b0fc238 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,6 @@ "sortablejs": "1.15.3", "swagger-ui-dist": "5.17.14", "tailwindcss": "3.4.13", - "temporal-polyfill": "0.2.4", "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 d2be455302..d2bab0441d 100644 --- a/web_src/js/webcomponents/absolute-date.js +++ b/web_src/js/webcomponents/absolute-date.js @@ -1,30 +1,28 @@ -import {Temporal} from 'temporal-polyfill'; - -export function toAbsoluteLocaleDate(dateStr, lang, opts) { - return Temporal.PlainDate.from(dateStr).toLocaleString(lang ?? [], opts); +export function toAbsoluteLocaleDate(date, lang, opts) { + return new Date(date).toLocaleString(lang || [], opts); } window.customElements.define('absolute-date', class extends HTMLElement { static observedAttributes = ['date', 'year', 'month', 'weekday', 'day']; + initialized = false; + update = () => { - const year = this.getAttribute('year') ?? ''; - const month = this.getAttribute('month') ?? ''; - const weekday = this.getAttribute('weekday') ?? ''; - const day = this.getAttribute('day') ?? ''; + const opt = {}; + for (const attr of ['year', 'month', 'weekday', 'day']) { + if (this.getAttribute(attr)) opt[attr] = this.getAttribute(attr); + } const lang = this.closest('[lang]')?.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); + // only use the date part, it is guaranteed to be in ISO format (YYYY-MM-DDTHH:mm:ss.sssZ) + let date = this.getAttribute('date'); + let dateSep = date.indexOf('T'); + dateSep = dateSep === -1 ? date.indexOf(' ') : dateSep; + date = dateSep === -1 ? date : date.substring(0, dateSep); if (!this.shadowRoot) this.attachShadow({mode: 'open'}); - this.shadowRoot.textContent = toAbsoluteLocaleDate(dateStr, lang, { - ...(year && {year}), - ...(month && {month}), - ...(weekday && {weekday}), - ...(day && {day}), - }); + this.shadowRoot.textContent = toAbsoluteLocaleDate(date, lang, opt); }; attributeChangedCallback(_name, oldValue, newValue) { diff --git a/web_src/js/webcomponents/absolute-date.test.js b/web_src/js/webcomponents/absolute-date.test.js index ba04451b65..89f337f258 100644 --- a/web_src/js/webcomponents/absolute-date.test.js +++ b/web_src/js/webcomponents/absolute-date.test.js @@ -7,9 +7,15 @@ test('toAbsoluteLocaleDate', () => { day: 'numeric', })).toEqual('March 15, 2024'); - expect(toAbsoluteLocaleDate('2024-03-15', 'de-DE', { + expect(toAbsoluteLocaleDate('2024-03-15T01:02:03', 'de-DE', { year: 'numeric', month: 'long', day: 'numeric', })).toEqual('15. März 2024'); + + expect(toAbsoluteLocaleDate('12345-03-15 01:02:03', '', { + year: 'numeric', + month: 'short', + day: 'numeric', + })).toEqual('Mar 15, 12345'); }); From 9b442172fb3cff2cdb5748a79526275d7f5c4035 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 31 Oct 2024 02:36:02 +0800 Subject: [PATCH 2/2] [PORT] Fix toAbsoluteLocaleDate and add more tests (gitea#32387) --- Conflict resolution: None Done differently: Removed typescript types. (cherry picked from commit aee9801d468997ab3cce32978416b697d9df77a7) --- web_src/js/webcomponents/absolute-date.js | 17 +++++++++-------- web_src/js/webcomponents/absolute-date.test.js | 15 ++++++++++----- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/web_src/js/webcomponents/absolute-date.js b/web_src/js/webcomponents/absolute-date.js index d2bab0441d..32f0ad7d13 100644 --- a/web_src/js/webcomponents/absolute-date.js +++ b/web_src/js/webcomponents/absolute-date.js @@ -1,5 +1,12 @@ export function toAbsoluteLocaleDate(date, lang, opts) { - return new Date(date).toLocaleString(lang || [], opts); + // only use the date part, it is guaranteed to be in ISO format (YYYY-MM-DDTHH:mm:ss.sssZ) or (YYYY-MM-DD) + // if there is an "Invalid Date" error, there must be something wrong in code and should be fixed. + // TODO: there is a root problem in backend code: the date "YYYY-MM-DD" is passed to backend without timezone (eg: deadline), + // then backend parses it in server's timezone and stores the parsed timestamp into database. + // If the user's timezone is different from the server's, the date might be displayed in the wrong day. + const dateSep = date.indexOf('T'); + date = dateSep === -1 ? date : date.substring(0, dateSep); + return new Date(`${date}T00:00:00`).toLocaleString(lang || [], opts); } window.customElements.define('absolute-date', class extends HTMLElement { @@ -15,14 +22,8 @@ window.customElements.define('absolute-date', class extends HTMLElement { const lang = this.closest('[lang]')?.getAttribute('lang') || this.ownerDocument.documentElement.getAttribute('lang') || ''; - // only use the date part, it is guaranteed to be in ISO format (YYYY-MM-DDTHH:mm:ss.sssZ) - let date = this.getAttribute('date'); - let dateSep = date.indexOf('T'); - dateSep = dateSep === -1 ? date.indexOf(' ') : dateSep; - date = dateSep === -1 ? date : date.substring(0, dateSep); - if (!this.shadowRoot) this.attachShadow({mode: 'open'}); - this.shadowRoot.textContent = toAbsoluteLocaleDate(date, lang, opt); + this.shadowRoot.textContent = toAbsoluteLocaleDate(this.getAttribute('date'), lang, opt); }; attributeChangedCallback(_name, oldValue, newValue) { diff --git a/web_src/js/webcomponents/absolute-date.test.js b/web_src/js/webcomponents/absolute-date.test.js index 89f337f258..dfd82e3cf1 100644 --- a/web_src/js/webcomponents/absolute-date.test.js +++ b/web_src/js/webcomponents/absolute-date.test.js @@ -13,9 +13,14 @@ test('toAbsoluteLocaleDate', () => { day: 'numeric', })).toEqual('15. März 2024'); - expect(toAbsoluteLocaleDate('12345-03-15 01:02:03', '', { - year: 'numeric', - month: 'short', - day: 'numeric', - })).toEqual('Mar 15, 12345'); + // these cases shouldn't happen + expect(toAbsoluteLocaleDate('2024-03-15 01:02:03', '', {})).toEqual('Invalid Date'); + expect(toAbsoluteLocaleDate('10000-01-01', '', {})).toEqual('Invalid Date'); + + // test different timezone + const oldTZ = process.env.TZ; + process.env.TZ = 'America/New_York'; + expect(new Date('2024-03-15').toLocaleString()).toEqual('3/14/2024, 8:00:00 PM'); + expect(toAbsoluteLocaleDate('2024-03-15')).toEqual('3/15/2024, 12:00:00 AM'); + process.env.TZ = oldTZ; });