From a88545812e08ca617dd3f33174c91b824e0481f1 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 22 Nov 2022 17:45:12 +0000
Subject: [PATCH] move customElements define calls to index.js and refactor

This moves the `customeElements.define` calls from each respective
element and into the index.js file. This is useful for if we wish to
load the components classes without defining the custom element.

In addition, this changes the pattern of how we register the custom
elements, to allow for HMR, as we did in
https://github.com/github/catalyst/pull/197.
---
 src/index.ts                 | 44 ++++++++++++++++++++++++++++++++++++
 src/local-time-element.ts    | 19 ----------------
 src/relative-time-element.ts | 19 ----------------
 src/time-ago-element.ts      | 14 ------------
 src/time-until-element.ts    | 14 ------------
 test/constructor.js          |  3 +--
 test/local-time.js           |  2 +-
 test/relative-time.js        |  2 +-
 test/time-ago.js             |  2 +-
 test/time-until.js           |  2 +-
 test/title-format.js         |  2 +-
 11 files changed, 50 insertions(+), 73 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index f57f30f..b1de0f7 100644
--- a/src/index.ts
+++ b/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}
diff --git a/src/local-time-element.ts b/src/local-time-element.ts
index 956897c..3055c6d 100644
--- a/src/local-time-element.ts
+++ b/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
-  }
-}
diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts
index 3c48216..7d91bd2 100644
--- a/src/relative-time-element.ts
+++ b/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
-  }
-}
diff --git a/src/time-ago-element.ts b/src/time-ago-element.ts
index c670b41..c022204 100644
--- a/src/time-ago-element.ts
+++ b/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
-  }
-}
diff --git a/src/time-until-element.ts b/src/time-until-element.ts
index 6ee58f2..be08fb7 100644
--- a/src/time-until-element.ts
+++ b/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
-  }
-}
diff --git a/test/constructor.js b/test/constructor.js
index 7750379..e80fd71 100644
--- a/test/constructor.js
+++ b/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 () {
diff --git a/test/local-time.js b/test/local-time.js
index a70934d..10079cd 100644
--- a/test/local-time.js
+++ b/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
diff --git a/test/relative-time.js b/test/relative-time.js
index 0851329..2c42e50 100644
--- a/test/relative-time.js
+++ b/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
diff --git a/test/time-ago.js b/test/time-ago.js
index 01ef85c..1abb9c6 100644
--- a/test/time-ago.js
+++ b/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
diff --git a/test/time-until.js b/test/time-until.js
index 83b940d..ef9181f 100644
--- a/test/time-until.js
+++ b/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 () {
diff --git a/test/title-format.js b/test/title-format.js
index db3d8e7..0f39c15 100644
--- a/test/title-format.js
+++ b/test/title-format.js
@@ -1,5 +1,5 @@
 import {assert} from '@open-wc/testing'
-import '../src/local-time-element.ts'
+import '../src/index.ts'
 
 suite('title-format', function () {
   test('null getFormattedTitle if datetime is missing', function () {