Merge pull request #297 from github/francinelucca/fix/locale-error

francinelucca · web-flow · commit a80c1bf3fad1 · 2024-12-10T08:26:30.000-05:00
fix: wrap Intl.&lt;&gt;() calls in try/catch
diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts
@@ -82,11 +82,12 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
   #updating: false | Promise<void> = 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
diff --git a/test/relative-time.js b/test/relative-time.js
@@ -434,6 +434,17 @@ 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')
+
+    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))
