refactor: Replace component definition boilerplate with a function

Also, we can ask the CustomElementRegistry if it has an entry with a
given name, instead of polluting the window object.

src/UI/Components/Button.js

@@ -1,4 +1,4 @@
-import { Component } from "../../util/Component.js";
+import { Component, defineComponent } from "../../util/Component.js";
 
 export default class Button extends Component {
     static PROPERTIES = {
@@ -64,10 +64,4 @@ export default class Button extends Component {
     }
 }
 
-// TODO: This is necessary because files can be loaded from
-// both `/src/UI` and `/UI` in the URL; we need to fix that
-if ( ! window.__component_button ) {
-    window.__component_button = true;
-
-    customElements.define('c-button', Button);
-}
+defineComponent('c-button', Button);

src/UI/Components/CodeEntryView.js

@@ -1,4 +1,4 @@
-import { Component } from "../../util/Component.js";
+import { Component, defineComponent } from "../../util/Component.js";
 
 export default class CodeEntryView extends Component {
     static PROPERTIES = {
@@ -215,10 +215,4 @@ export default class CodeEntryView extends Component {
     }
 }
 
-// TODO: This is necessary because files can be loaded from
-// both `/src/UI` and `/UI` in the URL; we need to fix that
-if ( ! window.__component_codeEntryView ) {
-    window.__component_codeEntryView = true;
-
-    customElements.define('c-code-entry-view', CodeEntryView);
-}
+defineComponent('c-code-entry-view', CodeEntryView);

src/UI/Components/ConfirmationsView.js

@@ -1,4 +1,4 @@
-import { Component } from "../../util/Component.js";
+import { Component, defineComponent } from "../../util/Component.js";
 
 /**
  * Display a list of checkboxes for the user to confirm.
@@ -58,10 +58,4 @@ export default class ConfirmationsView extends Component {
     }
 }
 
-// TODO: This is necessary because files can be loaded from
-// both `/src/UI` and `/UI` in the URL; we need to fix that
-if ( ! window.__component_confirmationsView ) {
-    window.__component_confirmationsView = true;
-
-    customElements.define('c-confirmations-view', ConfirmationsView);
-}
+defineComponent('c-confirmations-view', ConfirmationsView);

src/UI/Components/Flexer.js

@@ -1,4 +1,4 @@
-import { Component } from "../../util/Component.js";
+import { Component, defineComponent } from "../../util/Component.js";
 
 /**
  * Allows a flex layout of composed components to be
@@ -38,10 +38,4 @@ export default class Flexer extends Component {
     }
 }
 
-// TODO: This is necessary because files can be loaded from
-// both `/src/UI` and `/UI` in the URL; we need to fix that
-if ( ! window.__component_flexer ) {
-    window.__component_flexer = true;
-
-    customElements.define('c-flexer', Flexer);
-}
+defineComponent('c-flexer', Flexer);

src/UI/Components/JustHTML.js

@@ -1,4 +1,4 @@
-import { Component } from "../../util/Component.js";
+import { Component, defineComponent } from "../../util/Component.js";
 
 /**
  * Allows using an HTML string as a component.
@@ -15,10 +15,4 @@ export default class JustHTML extends Component {
     }
 }
 
-// TODO: This is necessary because files can be loaded from
-// both `/src/UI` and `/UI` in the URL; we need to fix that
-if ( ! window.__component_justHTML ) {
-    window.__component_justHTML = true;
-
-    customElements.define('c-just-html', JustHTML);
-}
+defineComponent('c-just-html', JustHTML);

src/UI/Components/QRCode.js

@@ -1,4 +1,4 @@
-import { Component } from "../../util/Component.js";
+import { Component, defineComponent } from "../../util/Component.js";
 import UIComponentWindow from "../UIComponentWindow.js";
 
 export default class QRCodeView extends Component {
@@ -78,10 +78,4 @@ export default class QRCodeView extends Component {
     }
 }
 
-// TODO: This is necessary because files can be loaded from
-// both `/src/UI` and `/UI` in the URL; we need to fix that
-if ( ! window.__component_qr_code ) {
-    window.__component_qr_code = true;
-
-    customElements.define('c-qr-code', QRCodeView);
-}
+defineComponent('c-qr-code', QRCodeView);

src/UI/Components/RecoveryCodeEntryView.js

@@ -1,4 +1,4 @@
-import { Component } from "../../util/Component.js";
+import { Component, defineComponent } from "../../util/Component.js";
 
 export default class RecoveryCodeEntryView extends Component {
     static PROPERTIES = {
@@ -84,4 +84,4 @@ export default class RecoveryCodeEntryView extends Component {
     }
 }
 
-customElements.define('c-recovery-code-entry', RecoveryCodeEntryView);
+defineComponent('c-recovery-code-entry', RecoveryCodeEntryView);

src/UI/Components/RecoveryCodesView.js

@@ -1,4 +1,4 @@
-import { Component } from "../../util/Component.js";
+import { Component, defineComponent } from "../../util/Component.js";
 
 export default class RecoveryCodesView extends Component {
     static PROPERTIES = {
@@ -91,10 +91,4 @@ export default class RecoveryCodesView extends Component {
     }
 }
 
-// TODO: This is necessary because files can be loaded from
-// both `/src/UI` and `/UI` in the URL; we need to fix that
-if ( ! window.__component_recoveryCodesView ) {
-    window.__component_recoveryCodesView = true;
-
-    customElements.define('c-recovery-codes-view', RecoveryCodesView);
-}
+defineComponent('c-recovery-codes-view', RecoveryCodesView);

src/UI/Components/Slider.js

@@ -16,7 +16,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
-import { Component } from "../../util/Component.js";
+import { Component, defineComponent } from "../../util/Component.js";
 
 /**
  * Slider: A labeled slider input.
@@ -105,10 +105,4 @@ export default class Slider extends Component {
     }
 }
 
-// TODO: This is necessary because files can be loaded from
-// both `/src/UI` and `/UI` in the URL; we need to fix that
-if ( ! window.__component_slider ) {
-    window.__component_slider = true;
-
-    customElements.define('c-slider', Slider);
-}
+defineComponent('c-slider', Slider);

src/UI/Components/StepHeading.js

@@ -1,4 +1,4 @@
-import { Component } from "../../util/Component.js";
+import { Component, defineComponent } from "../../util/Component.js";
 
 /**
  * StepHeading renders a heading with a leading symbol.
@@ -58,10 +58,4 @@ export default class StepHeading extends Component {
     }
 }
 
-// TODO: This is necessary because files can be loaded from
-// both `/src/UI` and `/UI` in the URL; we need to fix that
-if ( ! window.__component_stepHeading ) {
-    window.__component_stepHeading = true;
-
-    customElements.define('c-step-heading', StepHeading);
-}
+defineComponent('c-step-heading', StepHeading);

src/UI/Components/StepView.js

@@ -1,4 +1,4 @@
-import { Component } from "../../util/Component.js";
+import { Component, defineComponent } from "../../util/Component.js";
 
 export default class StepView extends Component {
     static PROPERTIES = {
@@ -64,10 +64,4 @@ export default class StepView extends Component {
     }
 }
 
-// TODO: This is necessary because files can be loaded from
-// both `/src/UI` and `/UI` in the URL; we need to fix that
-if ( ! window.__component_stepView ) {
-    window.__component_stepView = true;
-
-    customElements.define('c-step-view', StepView);
-}
+defineComponent('c-step-view', StepView);

src/UI/Components/StringView.js

@@ -1,4 +1,4 @@
-import { Component } from "../../util/Component.js";
+import { Component, defineComponent } from "../../util/Component.js";
 
 /**
  * A simple component that displays a string in the
@@ -42,10 +42,4 @@ export default class StringView extends Component {
     }
 }
 
-// TODO: This is necessary because files can be loaded from
-// both `/src/UI` and `/UI` in the URL; we need to fix that
-if ( ! window.__component_stringView ) {
-    window.__component_stringView = true;
-
-    customElements.define('c-string-view', StringView);
-}
+defineComponent('c-string-view', StringView);

src/UI/Components/TestView.js

@@ -1,4 +1,4 @@
-import { Component } from "../../util/Component.js";
+import { Component, defineComponent } from "../../util/Component.js";
 
 /**
  * A simple component when you just need to test something.
@@ -19,10 +19,4 @@ export default class TestView extends Component {
     }
 }
 
-// TODO: This is necessary because files can be loaded from
-// both `/src/UI` and `/UI` in the URL; we need to fix that
-if ( ! window.__component_testView ) {
-    window.__component_testView = true;
-
-    customElements.define('c-test-view', TestView);
-}
+defineComponent('c-test-view', TestView);

src/util/Component.js

@@ -136,3 +136,11 @@ export class Component extends HTMLElement {
         };
     }
 }
+
+export const defineComponent = (name, component) => {
+    // TODO: This is necessary because files can be loaded from
+    // both `/src/UI` and `/UI` in the URL; we need to fix that
+    if ( ! customElements.get(name) ) {
+        customElements.define(name, component);
+    }
+};