Merge pull request #222 from github/improve-type-definition-for-custom-element-class-instance

improve type definition for custom element class/instance

Author: keithamus

src/attr.ts

@@ -1,4 +1,4 @@
-import type {CustomElement} from './custom-element.js'
+import type {CustomElementClass} from './custom-element.js'
 import {dasherize} from './dasherize.js'
 import {meta} from './core.js'
 
@@ -82,7 +82,7 @@ export function initializeAttrs(instance: HTMLElement, names?: Iterable<string>)
 
 const attrToAttributeName = (name: string) => `data-${dasherize(name)}`
 
-export function defineObservedAttributes(classObject: CustomElement): void {
+export function defineObservedAttributes(classObject: CustomElementClass): void {
   let observed = classObject.observedAttributes || []
   Object.defineProperty(classObject, 'observedAttributes', {
     configurable: true,

src/controller.ts

@@ -1,11 +1,11 @@
 import {CatalystDelegate} from './core.js'
-import type {CustomElement} from './custom-element.js'
+import type {CustomElementClass} from './custom-element.js'
 /**
  * Controller is a decorator to be used over a class that extends HTMLElement.
  * It will automatically `register()` the component in the customElement
  * registry, as well as ensuring `bind(this)` is called on `connectedCallback`,
  * wrapping the classes `connectedCallback` method if needed.
  */
-export function controller(classObject: CustomElement): void {
+export function controller(classObject: CustomElementClass): void {
   new CatalystDelegate(classObject)
 }

src/core.ts

@@ -2,12 +2,12 @@ import {register} from './register.js'
 import {bind, bindShadow} from './bind.js'
 import {autoShadowRoot} from './auto-shadow-root.js'
 import {defineObservedAttributes, initializeAttrs} from './attr.js'
-import type {CustomElement} from './custom-element.js'
+import type {CustomElementClass} from './custom-element.js'
 
 const symbol = Symbol.for('catalyst')
 
 export class CatalystDelegate {
-  constructor(classObject: CustomElement) {
+  constructor(classObject: CustomElementClass) {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const delegate = this
 

src/custom-element.ts

@@ -1,4 +1,16 @@
-export interface CustomElement {
-  new (): HTMLElement
+export interface CustomElement extends HTMLElement {
+  connectedCallback?(): void
+  attributeChangedCallback?(name: string, oldValue: string | null, newValue: string | null): void
+  disconnectedCallback?(): void
+  adoptedCallback?(): void
+  formAssociatedCallback?(form: HTMLFormElement): void
+  formDisabledCallback?(disabled: boolean): void
+  formResetCallback?(): void
+  formStateRestoreCallback?(state: unknown, reason: 'autocomplete' | 'restore'): void
+}
+
+export interface CustomElementClass {
+  new (): CustomElement
   observedAttributes?: string[]
+  formAssociated?: boolean
 }

src/register.ts

@@ -1,4 +1,4 @@
-import type {CustomElement} from './custom-element.js'
+import type {CustomElementClass} from './custom-element.js'
 import {dasherize} from './dasherize.js'
 
 /**
@@ -8,7 +8,7 @@ import {dasherize} from './dasherize.js'
  *
  * Example: HelloController => hello-controller
  */
-export function register(classObject: CustomElement): CustomElement {
+export function register(classObject: CustomElementClass): CustomElementClass {
   const name = dasherize(classObject.name).replace(/-element$/, '')
 
   try {