Allow generic HTMLElement sub type

README.md

@@ -85,6 +85,13 @@ type Component = (payload: {
 }) => any
 ```
 
+You can also use a sub type of `HTMLElement`, for example if you are using
+a component only for `HTMLImageElement`:
+
+```ts
+registerComponent<HTMLImageElement>('my-image', ({ el }) => (el.src = '...'))
+```
+
 ### Mount a single Component
 
 Note: this will also mount any child components.

src/mountComponent.ts

@@ -2,7 +2,7 @@ import { getComponent } from './registerComponent'
 import { ComponentPayload } from './types'
 import { walkComponent } from './walkComponent'
 
-type Refs = ComponentPayload['refs']
+type Refs = ComponentPayload<any>['refs']
 const getRefs = (el: HTMLElement): Refs => {
   const refs: Refs = {}
   walkComponent(el, el => {

src/registerComponent.ts

@@ -1,12 +1,15 @@
 import { Component } from './types'
 
-export const components: Record<string, Component> = {}
+export const components: Record<string, Component<any>> = {}
 export const getComponent = (el: HTMLElement) => {
   const name = el.dataset.simpleComponent
   return name ? components[name] : undefined
 }
 
-export const registerComponent = (name: string, component: Component) => {
+export const registerComponent = <T extends HTMLElement>(
+  name: string,
+  component: Component<T>
+) => {
   if (typeof component !== 'function') {
     throw new Error(`Component ${name} is not a function.`)
   }

src/types.ts

@@ -4,10 +4,10 @@ declare global {
   }
 }
 
-export interface ComponentPayload {
-  el: HTMLElement
+export interface ComponentPayload<T> {
+  el: T
   ref: Record<string, HTMLElement>
   refs: Record<string, HTMLElement[]>
 }
 
-export type Component = (payload: ComponentPayload) => any
+export type Component<T> = (payload: ComponentPayload<T>) => any