Merge pull request #257 from github/add-define-static-method

keithamus · web-flow · commit a3f21920c42d · 2023-04-18T14:26:04.000+01:00
add define static method
diff --git a/src/relative-time-element-define.ts b/src/relative-time-element-define.ts
@@ -1,9 +1,8 @@
-import RelativeTimeElement from './relative-time-element.js'
+import {RelativeTimeElement} from './relative-time-element.js'
 
 const root = (typeof globalThis !== 'undefined' ? globalThis : window) as typeof window
 try {
-  customElements.define('relative-time', RelativeTimeElement)
-  root.RelativeTimeElement = RelativeTimeElement
+  root.RelativeTimeElement = RelativeTimeElement.define()
 } catch (e: unknown) {
   if (
     !(root.DOMException && e instanceof DOMException && e.name === 'NotSupportedError') &&
diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts
@@ -1,6 +1,5 @@
 import {Duration, elapsedTime, getRelativeTimeUnit, isDuration, roundToSingleUnit, Unit, unitNames} from './duration.js'
-const root = (typeof globalThis !== 'undefined' ? globalThis : window) as typeof window
-const HTMLElement = root.HTMLElement || (null as unknown as typeof window['HTMLElement'])
+const HTMLElement = globalThis.HTMLElement || (null as unknown as typeof window['HTMLElement'])
 
 export type DeprecatedFormat = 'auto' | 'micro' | 'elapsed'
 export type ResolvedFormat = 'duration' | 'relative' | 'datetime'
@@ -73,7 +72,12 @@ const dateObserver = new (class {
   }
 })()
 
-export default class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFormatOptions {
+export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFormatOptions {
+  static define(tag = 'relative-time', registry = customElements) {
+    registry.define(tag, this)
+    return this
+  }
+
   #customTitle = false
   #updating: false | Promise<void> = false
 
@@ -462,3 +466,5 @@ export default class RelativeTimeElement extends HTMLElement implements Intl.Dat
     this.#updating = false
   }
 }
+
+export default RelativeTimeElement
