From 682264ccfb48a3a770ea0c3dd5bc405941557e1a Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Thu, 5 Dec 2024 16:59:03 -0500 Subject: [PATCH 1/6] fix: wrap Intl.<>() calls in try/catch --- src/relative-time-element.ts | 81 ++++++++++++++++++++++++++---------- 1 file changed, 59 insertions(+), 22 deletions(-) diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts index 2130065..1b59ed4 100644 --- a/src/relative-time-element.ts +++ b/src/relative-time-element.ts @@ -120,14 +120,27 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor // // Returns a formatted time String. #getFormattedTitle(date: Date): string | undefined { - return new Intl.DateTimeFormat(this.#lang, { - day: 'numeric', - month: 'short', - year: 'numeric', - hour: 'numeric', - minute: '2-digit', - timeZoneName: 'short', - }).format(date) + let dateTimeFormat + try { + dateTimeFormat = new Intl.DateTimeFormat(this.#lang, { + day: 'numeric', + month: 'short', + year: 'numeric', + hour: 'numeric', + minute: '2-digit', + timeZoneName: 'short', + }) + } catch (_e) { + dateTimeFormat = new Intl.DateTimeFormat('default', { + day: 'numeric', + month: 'short', + year: 'numeric', + hour: 'numeric', + minute: '2-digit', + timeZoneName: 'short', + }) + } + return dateTimeFormat.format(date) } #resolveFormat(duration: Duration): ResolvedFormat { @@ -172,10 +185,20 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor } #getRelativeFormat(duration: Duration): string { - const relativeFormat = new Intl.RelativeTimeFormat(this.#lang, { - numeric: 'auto', - style: this.formatStyle, - }) + let relativeFormat + + try { + relativeFormat = new Intl.RelativeTimeFormat(this.#lang, { + numeric: 'auto', + style: this.formatStyle, + }) + } catch (_e) { + relativeFormat = new Intl.RelativeTimeFormat('default', { + numeric: 'auto', + style: this.formatStyle, + }) + } + const tense = this.tense if (tense === 'future' && duration.sign !== 1) duration = emptyDuration if (tense === 'past' && duration.sign !== -1) duration = emptyDuration @@ -187,16 +210,30 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor } #getDateTimeFormat(date: Date): string { - const formatter = new Intl.DateTimeFormat(this.#lang, { - second: this.second, - minute: this.minute, - hour: this.hour, - weekday: this.weekday, - day: this.day, - month: this.month, - year: this.year, - timeZoneName: this.timeZoneName, - }) + let formatter + try { + formatter = new Intl.DateTimeFormat(this.#lang, { + second: this.second, + minute: this.minute, + hour: this.hour, + weekday: this.weekday, + day: this.day, + month: this.month, + year: this.year, + timeZoneName: this.timeZoneName, + }) + } catch (_e) { + formatter = new Intl.DateTimeFormat('default', { + second: this.second, + minute: this.minute, + hour: this.hour, + weekday: this.weekday, + day: this.day, + month: this.month, + year: this.year, + timeZoneName: this.timeZoneName, + }) + } return `${this.prefix} ${formatter.format(date)}`.trim() } From 0a42e68e491c1f68bdc0929c35e9725360460ec9 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 6 Dec 2024 16:11:11 -0500 Subject: [PATCH 2/6] fix: add try/catch to lang getter --- src/relative-time-element.ts | 92 ++++++++++++------------------------ 1 file changed, 29 insertions(+), 63 deletions(-) diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts index 1b59ed4..4eac55b 100644 --- a/src/relative-time-element.ts +++ b/src/relative-time-element.ts @@ -82,11 +82,13 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor #updating: false | Promise = false get #lang() { - return ( - this.closest('[lang]')?.getAttribute('lang') || - this.ownerDocument.documentElement.getAttribute('lang') || - 'default' - ) + const lang = this.closest('[lang]')?.getAttribute('lang') || + this.ownerDocument.documentElement.getAttribute('lang') + try { + return new Intl.Locale(lang ?? '').toString() + } catch { + return 'default' + } } #renderRoot: Node = this.shadowRoot ? this.shadowRoot : this.attachShadow ? this.attachShadow({mode: 'open'}) : this @@ -120,27 +122,14 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor // // Returns a formatted time String. #getFormattedTitle(date: Date): string | undefined { - let dateTimeFormat - try { - dateTimeFormat = new Intl.DateTimeFormat(this.#lang, { - day: 'numeric', - month: 'short', - year: 'numeric', - hour: 'numeric', - minute: '2-digit', - timeZoneName: 'short', - }) - } catch (_e) { - dateTimeFormat = new Intl.DateTimeFormat('default', { - day: 'numeric', - month: 'short', - year: 'numeric', - hour: 'numeric', - minute: '2-digit', - timeZoneName: 'short', - }) - } - return dateTimeFormat.format(date) + return new Intl.DateTimeFormat(this.#lang, { + day: 'numeric', + month: 'short', + year: 'numeric', + hour: 'numeric', + minute: '2-digit', + timeZoneName: 'short', + }).format(date) } #resolveFormat(duration: Duration): ResolvedFormat { @@ -185,19 +174,10 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor } #getRelativeFormat(duration: Duration): string { - let relativeFormat - - try { - relativeFormat = new Intl.RelativeTimeFormat(this.#lang, { - numeric: 'auto', - style: this.formatStyle, - }) - } catch (_e) { - relativeFormat = new Intl.RelativeTimeFormat('default', { - numeric: 'auto', - style: this.formatStyle, - }) - } + const relativeFormat = new Intl.RelativeTimeFormat(this.#lang, { + numeric: 'auto', + style: this.formatStyle, + }) const tense = this.tense if (tense === 'future' && duration.sign !== 1) duration = emptyDuration @@ -210,30 +190,16 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor } #getDateTimeFormat(date: Date): string { - let formatter - try { - formatter = new Intl.DateTimeFormat(this.#lang, { - second: this.second, - minute: this.minute, - hour: this.hour, - weekday: this.weekday, - day: this.day, - month: this.month, - year: this.year, - timeZoneName: this.timeZoneName, - }) - } catch (_e) { - formatter = new Intl.DateTimeFormat('default', { - second: this.second, - minute: this.minute, - hour: this.hour, - weekday: this.weekday, - day: this.day, - month: this.month, - year: this.year, - timeZoneName: this.timeZoneName, - }) - } + const formatter = new Intl.DateTimeFormat(this.#lang, { + second: this.second, + minute: this.minute, + hour: this.hour, + weekday: this.weekday, + day: this.day, + month: this.month, + year: this.year, + timeZoneName: this.timeZoneName, + }) return `${this.prefix} ${formatter.format(date)}`.trim() } From 2449b0c54c88a6492480a5056d755cd637436d22 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 6 Dec 2024 16:11:45 -0500 Subject: [PATCH 3/6] fix: remove extra space --- src/relative-time-element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts index 4eac55b..24c5713 100644 --- a/src/relative-time-element.ts +++ b/src/relative-time-element.ts @@ -178,7 +178,6 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor numeric: 'auto', style: this.formatStyle, }) - const tense = this.tense if (tense === 'future' && duration.sign !== 1) duration = emptyDuration if (tense === 'past' && duration.sign !== -1) duration = emptyDuration From 048df51331840f2c1f1d7c8a4bbeb94bee71b78f Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 6 Dec 2024 16:40:30 -0500 Subject: [PATCH 4/6] fix: lint --- src/relative-time-element.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts index 24c5713..068183d 100644 --- a/src/relative-time-element.ts +++ b/src/relative-time-element.ts @@ -82,8 +82,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor #updating: false | Promise = false get #lang() { - const lang = this.closest('[lang]')?.getAttribute('lang') || - this.ownerDocument.documentElement.getAttribute('lang') + const lang = this.closest('[lang]')?.getAttribute('lang') || this.ownerDocument.documentElement.getAttribute('lang') try { return new Intl.Locale(lang ?? '').toString() } catch { From b6136cc111a74e0765c444014b5bc2da842410e7 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Mon, 9 Dec 2024 16:04:17 -0500 Subject: [PATCH 5/6] test: add relative-time test for invalid lang --- test/relative-time.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/test/relative-time.js b/test/relative-time.js index b00e592..3fb26d3 100644 --- a/test/relative-time.js +++ b/test/relative-time.js @@ -434,6 +434,18 @@ suite('relative-time', function () { }) } + test('renders correctly when given an invalid lang', async () => { + const now = new Date().toISOString() + + const element = document.createElement('relative-time') + element.setAttribute('datetime', now) + element.setAttribute('lang', 'does-not-exist') + assert.doesNotThrow(() => element.attributeChangedCallback('lang', null, null)) + + await Promise.resolve() + assert.equal(element.shadowRoot.textContent, 'now') + }) + suite('[tense=past]', function () { test('always uses relative dates', async () => { freezeTime(new Date(2033, 1, 1)) From b6dbae3ea0ef37057fe6fd80e93aebdb378f4030 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Tue, 10 Dec 2024 08:14:20 -0500 Subject: [PATCH 6/6] Update test/relative-time.js Co-authored-by: Keith Cirkel --- test/relative-time.js | 1 - 1 file changed, 1 deletion(-) diff --git a/test/relative-time.js b/test/relative-time.js index 3fb26d3..0d13096 100644 --- a/test/relative-time.js +++ b/test/relative-time.js @@ -440,7 +440,6 @@ suite('relative-time', function () { const element = document.createElement('relative-time') element.setAttribute('datetime', now) element.setAttribute('lang', 'does-not-exist') - assert.doesNotThrow(() => element.attributeChangedCallback('lang', null, null)) await Promise.resolve() assert.equal(element.shadowRoot.textContent, 'now')