Merge pull request uswds#230 from uswds/eg/229-provide-check-before-registering-custom-element

Web components: provide check before registering custom element

Author: annepetersen

CHANGELOG.md

@@ -5,8 +5,8 @@
 ### Patch Changes
 
 - 3661a08: Web components: TypeScript conversion and build improvements.
-  - Resolved vite error [#222](https://github.com/uswds/uswds-elements/issues/222#issue-3623280254)
-  - Provided types export in package [#221](https://github.com/uswds/uswds-elements/issues/221)
+    - Resolved vite error [#222](https://github.com/uswds/uswds-elements/issues/222#issue-3623280254)
+    - Provided types export in package [#221](https://github.com/uswds/uswds-elements/issues/221)
 
 ## 1.0.0-alpha.3
 

src/components/usa-banner/index.ts

@@ -10,6 +10,7 @@ import iconHttps from "@uswds/uswds/img/icon-https.svg";
 import iconClose from "../../shared/icons/close.svg";
 import iconExpandMore from "../../shared/icons/expand_more.svg";
 import iconExpandLess from "../../shared/icons/expand_less.svg";
+import { defineCustomElement } from "../../utils";
 
 interface UsaBannerTranslations {
   banner: {
@@ -277,4 +278,4 @@ export class UsaBanner extends LitElement {
   }
 }
 
-customElements.define("usa-banner", UsaBanner);
+defineCustomElement("usa-banner", UsaBanner);

src/components/usa-link/index.ts

@@ -1,5 +1,6 @@
 import { LitElement, html } from "lit";
 import styles from "./usa-link.css";
+import { defineCustomElement } from "../../utils";
 
 /**
  * @summary The usa-link component.
@@ -62,4 +63,4 @@ export class UsaLink extends LitElement {
   }
 }
 
-customElements.define("usa-link", UsaLink);
+defineCustomElement("usa-link", UsaLink);

src/utils/index.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { defineCustomElement } from "./index";
+
+describe("defineCustomElement", () => {
+  let customElementsDefineSpy: ReturnType<typeof vi.spyOn>;
+  let customElementsGetSpy: ReturnType<typeof vi.spyOn>;
+  let Component: CustomElementConstructor;
+  let tagName: string;
+
+  beforeEach(() => {
+    Component = class extends HTMLElement {};
+    tagName = "usa-test-element";
+
+    customElementsDefineSpy = vi.spyOn(customElements, "define");
+    customElementsGetSpy = vi.spyOn(customElements, "get");
+  });
+
+  it("should define a custom element if it does not already exist", () => {
+    defineCustomElement(tagName, Component);
+
+    expect(customElementsGetSpy).toHaveBeenCalledWith(tagName);
+    expect(customElementsDefineSpy).toHaveBeenCalledTimes(1);
+    expect(customElementsDefineSpy).toHaveBeenCalledWith(tagName, Component);
+  });
+
+  it("should not define a custom element if it already exists", () => {
+    defineCustomElement(tagName, Component);
+    defineCustomElement(tagName, Component);
+
+    expect(customElementsGetSpy).toHaveBeenCalledWith(tagName);
+    // we still expect this to be called once because of the conditional check in our function
+    expect(customElementsDefineSpy).toHaveBeenCalledTimes(1);
+  });
+});

src/utils/index.ts

@@ -0,0 +1,8 @@
+export const defineCustomElement = (
+  tag: string,
+  className: CustomElementConstructor,
+) => {
+  if (!customElements || customElements.get(tag)) return;
+
+  customElements.define(tag, className);
+};