Merge pull request #209 from github/move-customelements-define-calls-to-index-js-and-refactor

move customElements define calls to index.js and refactor

Author: keithamus

src/index.ts

@@ -3,4 +3,48 @@ import RelativeTimeElement from './relative-time-element.js'
 import TimeAgoElement from './time-ago-element.js'
 import TimeUntilElement from './time-until-element.js'
 
+const root = (typeof globalThis !== 'undefined' ? globalThis : window) as typeof window
+try {
+  customElements.define('relative-time', RelativeTimeElement)
+  root.RelativeTimeElement = RelativeTimeElement
+} catch (e: unknown) {
+  if (!(e instanceof DOMException && e.name === 'NotSupportedError') && !(e instanceof ReferenceError)) throw e
+}
+
+try {
+  customElements.define('local-time', LocalTimeElement)
+  root.LocalTimeElement = LocalTimeElement
+} catch (e: unknown) {
+  if (!(e instanceof DOMException && e.name === 'NotSupportedError') && !(e instanceof ReferenceError)) throw e
+}
+
+try {
+  customElements.define('time-ago', TimeAgoElement)
+  root.TimeAgoElement = TimeAgoElement
+} catch (e: unknown) {
+  if (!(e instanceof DOMException && e.name === 'NotSupportedError') && !(e instanceof ReferenceError)) throw e
+}
+
+try {
+  customElements.define('time-until', TimeUntilElement)
+  root.TimeUntilElement = TimeUntilElement
+} catch (e: unknown) {
+  if (!(e instanceof DOMException && e.name === 'NotSupportedError') && !(e instanceof ReferenceError)) throw e
+}
+
+declare global {
+  interface Window {
+    RelativeTimeElement: typeof RelativeTimeElement
+    LocalTimeElement: typeof LocalTimeElement
+    TimeAgoElement: typeof TimeAgoElement
+    TimeUntilElement: typeof TimeUntilElement
+  }
+  interface HTMLElementTagNameMap {
+    'relative-time': RelativeTimeElement
+    'local-time': LocalTimeElement
+    'time-ago': TimeAgoElement
+    'time-until': TimeUntilElement
+  }
+}
+
 export {LocalTimeElement, RelativeTimeElement, TimeAgoElement, TimeUntilElement}

src/local-time-element.ts

@@ -28,22 +28,3 @@ export default class LocalTimeElement extends RelativeTimeElement {
     if (year === 'numeric' || year === '2-digit') return year
   }
 }
-
-// Public: LocalTimeElement constructor.
-//
-//   var time = new LocalTimeElement()
-//   # => <local-time></local-time>
-//
-if (!window.customElements.get('local-time')) {
-  window.LocalTimeElement = LocalTimeElement
-  window.customElements.define('local-time', LocalTimeElement)
-}
-
-declare global {
-  interface Window {
-    LocalTimeElement: typeof LocalTimeElement
-  }
-  interface HTMLElementTagNameMap {
-    'local-time': LocalTimeElement
-  }
-}

src/relative-time-element.ts

@@ -374,22 +374,3 @@ export default class RelativeTimeElement extends HTMLElement implements Intl.Dat
     }
   }
 }
-
-// Public: RelativeTimeElement constructor.
-//
-//   var time = new RelativeTimeElement()
-//   # => <relative-time></relative-time>
-//
-if (!window.customElements.get('relative-time')) {
-  window.RelativeTimeElement = RelativeTimeElement
-  window.customElements.define('relative-time', RelativeTimeElement)
-}
-
-declare global {
-  interface Window {
-    RelativeTimeElement: typeof RelativeTimeElement
-  }
-  interface HTMLElementTagNameMap {
-    'relative-time': RelativeTimeElement
-  }
-}

src/time-ago-element.ts

@@ -6,17 +6,3 @@ export default class TimeAgoElement extends RelativeTimeElement {
     return 'past'
   }
 }
-
-if (!window.customElements.get('time-ago')) {
-  window.TimeAgoElement = TimeAgoElement
-  window.customElements.define('time-ago', TimeAgoElement)
-}
-
-declare global {
-  interface Window {
-    TimeAgoElement: typeof TimeAgoElement
-  }
-  interface HTMLElementTagNameMap {
-    'time-ago': TimeAgoElement
-  }
-}

src/time-until-element.ts

@@ -6,17 +6,3 @@ export default class TimeUntilElement extends RelativeTimeElement {
     return 'future'
   }
 }
-
-if (!window.customElements.get('time-until')) {
-  window.TimeUntilElement = TimeUntilElement
-  window.customElements.define('time-until', TimeUntilElement)
-}
-
-declare global {
-  interface Window {
-    TimeUntilElement: typeof TimeUntilElement
-  }
-  interface HTMLElementTagNameMap {
-    'time-until': TimeUntilElement
-  }
-}

test/constructor.js

@@ -1,6 +1,5 @@
 import {assert} from '@open-wc/testing'
-import '../src/local-time-element.ts'
-import '../src/relative-time-element.ts'
+import '../src/index.ts'
 
 suite('constructor', function () {
   test('create local-time from document.createElement', function () {

test/local-time.js

@@ -1,5 +1,5 @@
 import {assert} from '@open-wc/testing'
-import '../src/local-time-element.ts'
+import '../src/index.ts'
 
 suite('local-time', function () {
   let fixture

test/relative-time.js

@@ -1,5 +1,5 @@
 import {assert} from '@open-wc/testing'
-import RelativeTimeElement from '../src/relative-time-element.ts'
+import {RelativeTimeElement} from '../src/index.ts'
 
 suite('relative-time', function () {
   let dateNow

test/time-ago.js

@@ -1,5 +1,5 @@
 import {assert} from '@open-wc/testing'
-import '../src/time-ago-element.ts'
+import '../src/index.ts'
 
 suite('time-ago', function () {
   let dateNow

test/time-until.js

@@ -1,5 +1,5 @@
 import {assert} from '@open-wc/testing'
-import '../src/time-until-element.ts'
+import '../src/index.ts'
 
 suite('time-until', function () {
   test('always uses relative dates', function () {