Merge pull request #217 from github/version-4

Warn on use of deprecated elements, functions and properties

src/datetimeformat-ponyfill.ts

@@ -3,6 +3,10 @@ export class DateTimeFormat implements Intl.DateTimeFormat {
   #options: Intl.ResolvedDateTimeFormatOptions
 
   constructor(locale: string, options: Intl.DateTimeFormatOptions) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `time-elements v5.0.0 will no longer ship with DateTimeFormat ponyfill. It must be polyfilled for continued support in older browsers`
+    )
     this.#options = {
       locale: 'en',
       calendar: 'gregory',

src/index.ts

@@ -4,3 +4,5 @@ import TimeAgoElement from './time-ago-element-define.js'
 import TimeUntilElement from './time-until-element-define.js'
 
 export {LocalTimeElement, RelativeTimeElement, TimeAgoElement, TimeUntilElement}
+export default RelativeTimeElement
+export * from './relative-time-element-define.js'

src/local-time-element-define.ts

@@ -3,7 +3,7 @@ import LocalTimeElement from './local-time-element.js'
 const root = (typeof globalThis !== 'undefined' ? globalThis : window) as typeof window
 try {
   customElements.define('local-time', LocalTimeElement)
-  root.LocalTimeElement = LocalTimeElement
+  root.LocalTimeElement = LocalTimeElement as unknown as never
 } catch (e: unknown) {
   if (
     !(root.DOMException && e instanceof DOMException && e.name === 'NotSupportedError') &&
@@ -13,20 +13,9 @@ try {
   }
 }
 
-type JSXBaseElement = JSX.IntrinsicElements extends {span: unknown}
-  ? JSX.IntrinsicElements['span']
-  : Record<string, unknown>
 declare global {
   interface Window {
-    LocalTimeElement: typeof LocalTimeElement
-  }
-  interface HTMLElementTagNameMap {
-    'local-time': LocalTimeElement
-  }
-  namespace JSX {
-    interface IntrinsicElements {
-      ['local-time']: JSXBaseElement & Partial<Omit<LocalTimeElement, keyof HTMLElement>>
-    }
+    LocalTimeElement: never
   }
 }
 

src/local-time-element.ts

@@ -1,13 +1,21 @@
 import RelativeTimeElement from './relative-time-element.js'
 
 export default class LocalTimeElement extends RelativeTimeElement {
+  constructor() {
+    super()
+    // eslint-disable-next-line no-console
+    console.warn('local-time element is deprecated and will be removed in v5.0.0')
+  }
+
   get prefix() {
     return ''
   }
 
   get format() {
     if (super.format.includes('%')) return super.format
-    if (!this.day && !this.month && !this.year && !this.timeZoneName && !this.hour && !this.minute) return ''
+    if (!this.day && !this.month && !this.year && !this.timeZoneName && !this.hour && !this.minute) {
+      return '' as unknown as 'auto'
+    }
     return 'auto'
   }
 

src/relative-time-element.ts

@@ -12,7 +12,7 @@ const DateTimeFormat = supportsIntlDatetime ? Intl.DateTimeFormat : DateTimeForm
 const supportsIntlRelativeTime = typeof Intl !== 'undefined' && 'RelativeTimeFormat' in Intl
 const RelativeTimeFormat = supportsIntlRelativeTime ? Intl.RelativeTimeFormat : RelativeTimeFormatPonyfill
 
-export type Format = 'auto' | 'micro' | 'elapsed' | string
+export type Format = 'auto' | 'micro' | 'elapsed'
 export type Tense = 'auto' | 'past' | 'future'
 
 export class RelativeTimeUpdatedEvent extends Event {
@@ -113,7 +113,7 @@ export default class RelativeTimeElement extends HTMLElement implements Intl.Dat
   // value takes precedence over this custom format.
   //
   // Returns a formatted time String.
-  getFormattedTitle(): string | undefined {
+  #getFormattedTitle(): string | undefined {
     const date = this.date
     if (!date) return
 
@@ -127,7 +127,13 @@ export default class RelativeTimeElement extends HTMLElement implements Intl.Dat
     }).format(date)
   }
 
-  getFormattedDate(now = new Date()): string | undefined {
+  private getFormattedTitle(): string | undefined {
+    // eslint-disable-next-line no-console
+    console.warn(`Calling getFormattedTitle is deprecated and will be removed in v5.0.0`)
+    return this.#getFormattedTitle()
+  }
+
+  #getFormattedDate(now = new Date()): string | undefined {
     const date = this.date
     if (!date) return
     const format = this.format
@@ -168,6 +174,12 @@ export default class RelativeTimeElement extends HTMLElement implements Intl.Dat
     return `${this.prefix} ${formatter.format(date)}`.trim()
   }
 
+  private getFormattedDate(now = new Date()): string | undefined {
+    // eslint-disable-next-line no-console
+    console.warn(`Calling getFormattedTitle is deprecated and will be removed in v5.0.0`)
+    return this.#getFormattedDate(now)
+  }
+
   get second() {
     const second = this.getAttribute('second')
     if (second === 'numeric' || second === '2-digit') return second
@@ -301,11 +313,23 @@ export default class RelativeTimeElement extends HTMLElement implements Intl.Dat
     const format = this.getAttribute('format')
     if (format === 'micro') return 'micro'
     if (format === 'elapsed') return 'elapsed'
-    if (format && format.includes('%')) return format
+    if (format && format.includes('%')) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `srftime formatting is deprecated and will be removed in v5.0.0. stftime formats will default to 'auto'`
+      )
+      return format as unknown as Format
+    }
     return 'auto'
   }
 
   set format(value: Format) {
+    if (value && value.includes('%')) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `srftime formatting is deprecated and will be removed in v5.0.0. stftime formats will default to 'auto'`
+      )
+    }
     this.setAttribute('format', value)
   }
 
@@ -338,7 +362,7 @@ export default class RelativeTimeElement extends HTMLElement implements Intl.Dat
   attributeChangedCallback(attrName: string, oldValue: unknown, newValue: unknown): void {
     if (oldValue === newValue) return
     if (attrName === 'title') {
-      this.#customTitle = newValue !== null && this.getFormattedTitle() !== newValue
+      this.#customTitle = newValue !== null && this.#getFormattedTitle() !== newValue
     }
     if (!this.#updating && !(attrName === 'title' && this.#customTitle)) {
       this.#updating = (async () => {
@@ -355,11 +379,11 @@ export default class RelativeTimeElement extends HTMLElement implements Intl.Dat
     let newText: string = oldText
     const now = new Date()
     if (!this.#customTitle) {
-      newTitle = this.getFormattedTitle() || ''
+      newTitle = this.#getFormattedTitle() || ''
       if (newTitle) this.setAttribute('title', newTitle)
     }
 
-    newText = this.getFormattedDate(now) || ''
+    newText = this.#getFormattedDate(now) || ''
     if (newText) {
       this.#renderRoot.textContent = newText
     } else if (this.shadowRoot === this.#renderRoot && this.textContent) {

src/relative-time-ponyfill.ts

@@ -1,4 +1,11 @@
 export class RelativeTimeFormat implements Intl.RelativeTimeFormat {
+  constructor() {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `time-elements v5.0.0 will no longer ship with DateTimeFormat ponyfill. It must be polyfilled for continued support in older browsers`
+    )
+  }
+
   formatToParts() {
     return []
   }

src/time-ago-element-define.ts

@@ -3,7 +3,7 @@ import TimeAgoElement from './time-ago-element.js'
 const root = (typeof globalThis !== 'undefined' ? globalThis : window) as typeof window
 try {
   customElements.define('time-ago', TimeAgoElement)
-  root.TimeAgoElement = TimeAgoElement
+  root.TimeAgoElement = TimeAgoElement as unknown as never
 } catch (e: unknown) {
   if (
     !(root.DOMException && e instanceof DOMException && e.name === 'NotSupportedError') &&
@@ -13,20 +13,9 @@ try {
   }
 }
 
-type JSXBaseElement = JSX.IntrinsicElements extends {span: unknown}
-  ? JSX.IntrinsicElements['span']
-  : Record<string, unknown>
 declare global {
   interface Window {
-    TimeAgoElement: typeof TimeAgoElement
-  }
-  interface HTMLElementTagNameMap {
-    'time-ago': TimeAgoElement
-  }
-  namespace JSX {
-    interface IntrinsicElements {
-      ['time-ago']: JSXBaseElement & Partial<Omit<TimeAgoElement, keyof HTMLElement>>
-    }
+    TimeAgoElement: never
   }
 }
 

src/time-ago-element.ts

@@ -2,6 +2,12 @@ import type {Tense} from './relative-time-element.js'
 import RelativeTimeElement from './relative-time-element.js'
 
 export default class TimeAgoElement extends RelativeTimeElement {
+  constructor() {
+    super()
+    // eslint-disable-next-line no-console
+    console.warn('time-ago element is deprecated and will be removed in v5.0.0')
+  }
+
   get tense(): Tense {
     return 'past'
   }

src/time-until-element-define.ts

@@ -3,7 +3,7 @@ import TimeUntilElement from './time-until-element.js'
 const root = (typeof globalThis !== 'undefined' ? globalThis : window) as typeof window
 try {
   customElements.define('time-until', TimeUntilElement)
-  root.TimeUntilElement = TimeUntilElement
+  root.TimeUntilElement = TimeUntilElement as unknown as never
 } catch (e: unknown) {
   if (
     !(root.DOMException && e instanceof DOMException && e.name === 'NotSupportedError') &&
@@ -13,20 +13,9 @@ try {
   }
 }
 
-type JSXBaseElement = JSX.IntrinsicElements extends {span: unknown}
-  ? JSX.IntrinsicElements['span']
-  : Record<string, unknown>
 declare global {
   interface Window {
-    TimeUntilElement: typeof TimeUntilElement
-  }
-  interface HTMLElementTagNameMap {
-    'time-until': TimeUntilElement
-  }
-  namespace JSX {
-    interface IntrinsicElements {
-      ['time-until']: JSXBaseElement & Partial<Omit<TimeUntilElement, keyof HTMLElement>>
-    }
+    TimeUntilElement: never
   }
 }
 

src/time-until-element.ts

@@ -2,6 +2,12 @@ import type {Tense} from './relative-time-element.js'
 import RelativeTimeElement from './relative-time-element.js'
 
 export default class TimeUntilElement extends RelativeTimeElement {
+  constructor() {
+    super()
+    // eslint-disable-next-line no-console
+    console.warn('time-ago element is deprecated and will be removed in v5.0.0')
+  }
+
   get tense(): Tense {
     return 'future'
   }

test/constructor.js

@@ -2,16 +2,6 @@ import {assert} from '@open-wc/testing'
 import '../src/index.ts'
 
 suite('constructor', function () {
-  test('create local-time from document.createElement', function () {
-    const time = document.createElement('local-time')
-    assert.equal('LOCAL-TIME', time.nodeName)
-  })
-
-  test('create local-time from constructor', function () {
-    const time = new window.LocalTimeElement()
-    assert.equal('LOCAL-TIME', time.nodeName)
-  })
-
   test('create relative-time from document.createElement', function () {
     const time = document.createElement('relative-time')
     assert.equal('RELATIVE-TIME', time.nodeName)
@@ -23,12 +13,12 @@ suite('constructor', function () {
   })
 
   test('ignores elements without a datetime attr', function () {
-    const time = document.createElement('local-time')
+    const time = document.createElement('relative-time')
     assert.equal(time.textContent, '')
   })
 
   test('leaves contents alone if only datetime is set', function () {
-    const time = document.createElement('local-time')
+    const time = document.createElement('relative-time')
     time.setAttribute('datetime', '1970-01-01T00:00:00.000Z')
     assert.equal(time.textContent, '')
   })

test/title-format.js

@@ -3,39 +3,39 @@ import '../src/index.ts'
 
 suite('title-format', function () {
   test('null getFormattedTitle if datetime is missing', async () => {
-    const time = document.createElement('local-time')
+    const time = document.createElement('relative-time')
     assert.isUndefined(time.getFormattedTitle())
   })
 
   test('locale-aware getFormattedTitle for datetime value', async () => {
-    const time = document.createElement('local-time')
+    const time = document.createElement('relative-time')
     time.setAttribute('datetime', '1970-01-01T00:00:00.000Z')
     assert.match(time.getFormattedTitle(), /\d{4}/)
   })
 
   test('skips setting a title attribute if already provided', async () => {
-    const time = document.createElement('local-time')
+    const time = document.createElement('relative-time')
     time.setAttribute('title', 'does not change')
     time.setAttribute('datetime', '1970-01-01T00:00:00.000Z')
     await Promise.resolve()
     assert.equal(time.getAttribute('title'), 'does not change')
   })
 
   test('skips setting a title attribute if datetime is missing', async () => {
-    const time = document.createElement('local-time')
+    const time = document.createElement('relative-time')
     await Promise.resolve()
     assert.isNull(time.getAttribute('title'))
   })
 
   test('sets the title attribute for datetime value', async () => {
-    const time = document.createElement('local-time')
+    const time = document.createElement('relative-time')
     time.setAttribute('datetime', '1970-01-01T00:00:00.000Z')
     await Promise.resolve()
     assert.match(time.getAttribute('title'), /\d{4}/)
   })
 
   test('update the title attribute after a datetime value change', async () => {
-    const time = document.createElement('local-time')
+    const time = document.createElement('relative-time')
     time.setAttribute('datetime', '1970-05-01T00:00:00.000Z')
     await Promise.resolve()
     assert.match(time.getAttribute('title'), /1970/)
@@ -50,7 +50,7 @@ suite('title-format', function () {
 
   test('set the title attribute when parsed element is upgraded', async () => {
     const root = document.createElement('div')
-    root.innerHTML = '<local-time datetime="1970-01-01T00:00:00.000Z"></local-time>'
+    root.innerHTML = '<relative-time datetime="1970-01-01T00:00:00.000Z"></relative-time>'
     if ('CustomElements' in window) {
       window.CustomElements.upgradeSubtree(root)
     }