upgrade element code to support define() & React

Author: keithamus

custom-elements.json

@@ -9,8 +9,42 @@
         {
           "kind": "class",
           "description": "",
-          "name": "AutocompleteElement",
+          "name": "AutoCompleteEvent",
           "members": [
+            {
+              "kind": "field",
+              "name": "relatedTarget",
+              "type": {
+                "text": "HTMLInputElement"
+              },
+              "default": "relatedTarget"
+            }
+          ],
+          "superclass": {
+            "name": "Event",
+            "module": "src/auto-complete-element.ts"
+          }
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "AutoCompleteElement",
+          "members": [
+            {
+              "kind": "method",
+              "name": "define",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "tag",
+                  "default": "'auto-complete'"
+                },
+                {
+                  "name": "registry",
+                  "default": "customElements"
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "setCSPTrustedTypesPolicy",
@@ -123,7 +157,7 @@
             {
               "name": "auto-complete-change",
               "type": {
-                "text": "AutocompleteEvent"
+                "text": "AutoCompleteEvent"
               }
             }
           ],
@@ -141,24 +175,31 @@
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "auto-complete",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "default",
+          "name": "AutoCompleteEvent",
           "declaration": {
-            "name": "AutocompleteElement",
+            "name": "AutoCompleteEvent",
             "module": "src/auto-complete-element.ts"
           }
         },
         {
-          "kind": "custom-element-definition",
-          "name": "auto-complete",
+          "kind": "js",
+          "name": "AutoCompleteElement",
+          "declaration": {
+            "name": "AutoCompleteElement",
+            "module": "src/auto-complete-element.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
           "declaration": {
-            "name": "AutocompleteElement",
+            "name": "AutoCompleteElement",
             "module": "src/auto-complete-element.ts"
           }
         }

src/auto-complete-element-define.ts

@@ -0,0 +1,35 @@
+import {AutoCompleteElement} from './auto-complete-element.js'
+
+const root = (typeof globalThis !== 'undefined' ? globalThis : window) as typeof window
+try {
+  // Lowercase C is here for backwards compat
+  root.AutocompleteElement = root.AutoCompleteElement = AutoCompleteElement.define()
+} catch (e: unknown) {
+  if (
+    !(root.DOMException && e instanceof DOMException && e.name === 'NotSupportedError') &&
+    !(e instanceof ReferenceError)
+  ) {
+    throw e
+  }
+}
+
+type JSXBase = JSX.IntrinsicElements extends {span: unknown}
+  ? JSX.IntrinsicElements
+  : Record<string, Record<string, unknown>>
+declare global {
+  interface Window {
+    AutoCompleteElement: typeof AutoCompleteElement
+    AutocompleteElement: typeof AutoCompleteElement
+  }
+  interface HTMLElementTagNameMap {
+    'auto-complete': AutoCompleteElement
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      ['auto-complete']: JSXBase['span'] & Partial<Omit<AutoCompleteElement, keyof HTMLElement>>
+    }
+  }
+}
+
+export default AutoCompleteElement
+export * from './auto-complete-element.js'

src/auto-complete-element.ts

@@ -1,5 +1,18 @@
 import Autocomplete from './autocomplete.js'
-import AutocompleteEvent from './auto-complete-event.js'
+const HTMLElement = globalThis.HTMLElement || (null as unknown as (typeof window)['HTMLElement'])
+
+type AutoCompleteEventInit = EventInit & {
+  relatedTarget: HTMLInputElement
+}
+
+export class AutoCompleteEvent extends Event {
+  relatedTarget: HTMLInputElement
+
+  constructor(type: 'auto-complete-change', {relatedTarget, ...init}: AutoCompleteEventInit) {
+    super(type, init)
+    this.relatedTarget = relatedTarget
+  }
+}
 
 const state = new WeakMap()
 
@@ -16,8 +29,12 @@ interface CSPTrustedHTMLToStringable {
 
 let cspTrustedTypesPolicyPromise: Promise<CSPTrustedTypesPolicy> | null = null
 
-// eslint-disable-next-line custom-elements/file-name-matches-element
-export default class AutocompleteElement extends HTMLElement {
+export class AutoCompleteElement extends HTMLElement {
+  static define(tag = 'auto-complete', registry = customElements) {
+    registry.define(tag, this)
+    return this
+  }
+
   static setCSPTrustedTypesPolicy(policy: CSPTrustedTypesPolicy | Promise<CSPTrustedTypesPolicy> | null): void {
     cspTrustedTypesPolicyPromise = policy === null ? policy : Promise.resolve(policy)
   }
@@ -155,7 +172,7 @@ export default class AutocompleteElement extends HTMLElement {
           autocomplete.input.value = newValue
         }
         this.dispatchEvent(
-          new AutocompleteEvent('auto-complete-change', {
+          new AutoCompleteEvent('auto-complete-change', {
             bubbles: true,
             relatedTarget: autocomplete.input,
           }),
@@ -165,17 +182,4 @@ export default class AutocompleteElement extends HTMLElement {
   }
 }
 
-declare global {
-  interface Window {
-    AutocompleteElement: typeof AutocompleteElement
-  }
-  interface HTMLElementTagNameMap {
-    'auto-complete': AutocompleteElement
-  }
-}
-
-if (!window.customElements.get('auto-complete')) {
-  window.AutocompleteElement = AutocompleteElement
-  // eslint-disable-next-line custom-elements/tag-name-matches-class
-  window.customElements.define('auto-complete', AutocompleteElement)
-}
+export default AutoCompleteElement

src/auto-complete-event.ts

@@ -1,14 +0,0 @@
-type AutocompleteEventType = 'auto-complete-change'
-
-type AutocompleteEventInit = CustomEventInit & {
-  relatedTarget: HTMLInputElement
-}
-
-export default class AutocompleteEvent extends CustomEvent<null> {
-  relatedTarget: HTMLInputElement
-
-  constructor(type: AutocompleteEventType, init: AutocompleteEventInit) {
-    super(type, init)
-    this.relatedTarget = init.relatedTarget
-  }
-}

src/index.ts

@@ -1,3 +1,5 @@
-import AutoCompleteElement from './auto-complete-element.js'
-export {AutoCompleteElement, AutoCompleteElement as default}
-export {default as AutocompleteEvent} from './auto-complete-event.js'
+import {AutoCompleteElement} from './auto-complete-element-define.js'
+
+export {AutoCompleteElement}
+export default AutoCompleteElement
+export * from './auto-complete-element-define.js'