Extract tostring from relative time into element

src/relative-time-element.ts

@@ -4,13 +4,47 @@ import ExtendedTimeElement from './extended-time-element.js'
 import {localeFromElement} from './utils.js'
 
 export default class RelativeTimeElement extends ExtendedTimeElement {
+  static get observedAttributes() {
+    return [...ExtendedTimeElement.observedAttributes, 'prefix']
+  }
+
   getFormattedDate(): string | undefined {
     const date = this.date
     if (!date) return
-    return new RelativeTime(date, localeFromElement(this)).toString({
-      tense: this.tense,
-      format: this.format
-    })
+    const relativeTime = new RelativeTime(date, localeFromElement(this))
+    const format = this.format
+    const tense = this.tense
+    const micro = format === 'micro'
+    if (tense === 'past') {
+      return micro ? relativeTime.microTimeAgo() : relativeTime.timeAgo()
+    }
+    if (tense === 'future') {
+      return micro ? relativeTime.microTimeUntil() : relativeTime.timeUntil()
+    }
+    if (format === 'auto') {
+      const ago = micro ? relativeTime.microTimeAgo() : relativeTime.timeElapsed()
+      if (ago) {
+        return ago
+      }
+      const ahead = micro ? relativeTime.microTimeUntil() : relativeTime.timeAhead()
+      if (ahead) {
+        return ahead
+      }
+    }
+    if (format !== 'auto' && format !== 'micro') {
+      return relativeTime.formatDate(format)
+    }
+    return `${this.prefix ? `${this.prefix} ` : ''}${relativeTime.formatDate()}`
+  }
+
+  /** @deprecated */
+  get prefix(): string {
+    return this.getAttribute('prefix') ?? 'on'
+  }
+
+  /** @deprecated */
+  set prefix(value: string) {
+    this.setAttribute('prefix', value)
   }
 
   get tense(): Tense {

src/relative-time.ts

@@ -13,30 +13,6 @@ export default class RelativeTime {
     this.locale = locale
   }
 
-  toString({format = 'auto', tense = 'auto'}: {format?: Format; tense?: Tense} = {}): string | undefined {
-    const micro = format === 'micro'
-    if (tense === 'past') {
-      return micro ? this.microTimeAgo() : this.timeAgo()
-    }
-    if (tense === 'future') {
-      return micro ? this.microTimeUntil() : this.timeUntil()
-    }
-    if (format === 'auto') {
-      const ago = this.timeElapsed()
-      if (ago) {
-        return ago
-      }
-      const ahead = this.timeAhead()
-      if (ahead) {
-        return ahead
-      }
-    }
-    if (format !== 'auto' && format !== 'micro') {
-      return this.formatDate(format)
-    }
-    return `on ${this.formatDate()}`
-  }
-
   timeElapsed(): string | undefined | null {
     const ms = new Date().getTime() - this.date.getTime()
     const sec = Math.round(ms / 1000)

test/relative-time.js

@@ -130,6 +130,24 @@ suite('relative-time', function () {
     assert.match(time.textContent, /on [A-Z][a-z]{2} \d{1,2}/)
   })
 
+  test('uses `prefix` attribute to customise prefix', function () {
+    const now = new Date(Date.now() + 30 * 60 * 60 * 24 * 1000).toISOString()
+    const time = document.createElement('relative-time')
+    time.setAttribute('prefix', 'will happen by')
+    time.setAttribute('lang', 'en-US')
+    time.setAttribute('datetime', now)
+    assert.match(time.textContent, /will happen by [A-Z][a-z]{2} \d{1,2}/)
+  })
+
+  test('uses `prefix` attribute to customise prefix as empty string', function () {
+    const now = new Date(Date.now() + 30 * 60 * 60 * 24 * 1000).toISOString()
+    const time = document.createElement('relative-time')
+    time.setAttribute('prefix', '')
+    time.setAttribute('lang', 'en-US')
+    time.setAttribute('datetime', now)
+    assert.match(time.textContent, /[A-Z][a-z]{2} \d{1,2}/)
+  })
+
   test('ignores malformed dates', function () {
     const time = document.createElement('relative-time')
     time.textContent = 'Jun 30'