diff --git a/README.md b/README.md index f05b7b6..b935e04 100644 --- a/README.md +++ b/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('my-image', ({ el }) => (el.src = '...')) +``` + ### Mount a single Component Note: this will also mount any child components. diff --git a/src/mountComponent.ts b/src/mountComponent.ts index 3e61302..b666b67 100644 --- a/src/mountComponent.ts +++ b/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['refs'] const getRefs = (el: HTMLElement): Refs => { const refs: Refs = {} walkComponent(el, el => { diff --git a/src/registerComponent.ts b/src/registerComponent.ts index efd097a..1b662d6 100644 --- a/src/registerComponent.ts +++ b/src/registerComponent.ts @@ -1,12 +1,15 @@ import { Component } from './types' -export const components: Record = {} +export const components: Record> = {} 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 = ( + name: string, + component: Component +) => { if (typeof component !== 'function') { throw new Error(`Component ${name} is not a function.`) } diff --git a/src/types.ts b/src/types.ts index 9fba1c1..abab159 100644 --- a/src/types.ts +++ b/src/types.ts @@ -4,10 +4,10 @@ declare global { } } -export interface ComponentPayload { - el: HTMLElement +export interface ComponentPayload { + el: T ref: Record refs: Record } -export type Component = (payload: ComponentPayload) => any +export type Component = (payload: ComponentPayload) => any