Component

Source: Component.ts:165

Modifiers: abstract

Abstract base component class

Remarks

Provides a foundation for building UI components with:

• Lifecycle management
• Event handling
• Props management
• State management

Type Parameters

• P extends ComponentProps = ComponentProps — Props type (extends ComponentProps)
• S extends object = object — State type

Example

interface ButtonProps extends ComponentProps {
  label: string
  onClick?: () => void
}

interface ButtonState {
  isPressed: boolean
}

class Button extends Component<ButtonProps, ButtonState> {
  protected getInitialState(): ButtonState {
    return { isPressed: false }
  }

  public render(): string {
    return `<button class="${this.props.className}">
      ${this.props.label}
    </button>`
  }
}

Constructors

new Component< P extends ComponentProps = ComponentProps, S extends object = object, >( props: P, ): Component<P, S>

Parameters

• props (P) — Initial component props

Returns

Component<P, S>

Implements

• LifecycleHooks

Properties

_internalState: S

Component internal state

_props: P

Component props

children: Component<ComponentProps, object>[]

Child components

Default: []

instanceId: string

Unique component instance ID

parent: Component<ComponentProps, object>

Parent component reference

Accessors

get internalState(): Readonly<S>

Gets the internal component state

get props(): Readonly<P>

Gets the current props

get state(): ComponentState

Gets the current component lifecycle state

Methods

addChild(child: Component): void

Adds a child component

Parameters

• child (Component) — Child component to add

Returns

• void

emit<T>(type: string, data?: T): void

Emits an event

Type Parameters

• T — Event data type

Parameters

• type (string) — Event type
• data (T, optional) — Event data

Returns

• void

Example

this.emit('valueChange', { oldValue: 1, newValue: 2 })

findChildById( id: string, ): Component<ComponentProps, object> | undefined

Finds a child component by ID

Parameters

• id (string) — Component ID to find

Returns

• Component<ComponentProps, object> | undefined — Found component or undefined

getInitialState(): S

Returns the initial internal state

Returns

• S — Initial state object

mount(): void

Mounts the component

Returns

• void

off(event: string, handler: ComponentEventHandler): void

Removes an event listener

Parameters

• event (string) — Event type
• handler (ComponentEventHandler) — Event handler to remove

Returns

• void

on< T, >( event: string, handler: ComponentEventHandler<T>, ): () => void

Adds an event listener

Type Parameters

• T — Event data type

Parameters

• event (string) — Event type
• handler (ComponentEventHandler<T>) — Event handler

Returns

• () => void — Function to remove the listener

Example

const off = button.on('click', (event) => {
  console.log('Button clicked!', event.data)
})

// Later: remove listener
off()

onBeforeMount(): void

Implementation of onBeforeMount

Called before component mounts

Returns

• void

onBeforeUnmount(): void

Implementation of onBeforeUnmount

Called before component unmounts

Returns

• void

onBeforeUpdate( _prevProps: ComponentProps, _nextProps: ComponentProps, ): void

Implementation of onBeforeUpdate

Called before component updates

Parameters

• _prevProps (ComponentProps)
• _nextProps (ComponentProps)

Returns

• void

onError(_error: Error): void

Implementation of onError

Called when an error occurs in the component

Parameters

• _error (Error)

Returns

• void

onMounted(): void

Implementation of onMounted

Called after component mounts

Returns

• void

onStateChange(_prevState: S, _newState: S): void

Called when internal state changes

Parameters

• _prevState (S)
• _newState (S)

Returns

• void

onUnmounted(): void

Implementation of onUnmounted

Called after component unmounts

Returns

• void

onUpdated(_prevProps: ComponentProps): void

Implementation of onUpdated

Called after component updates

Parameters

• _prevProps (ComponentProps)

Returns

• void

removeChild(child: Component): boolean

Removes a child component

Parameters

• child (Component) — Child component to remove

Returns

• boolean — True if child was removed

render(): unknown

Renders the component

Returns

• unknown — Rendered output

setProps(nextProps: Partial<P>): void

Updates component props

Parameters

• nextProps (Partial<P>) — New props

Returns

• void

setState(updates: Partial<S>): void

Updates the internal state

Parameters

• updates (Partial<S>) — Partial state updates

Returns

• void

Example

this.setState({ count: this.internalState.count + 1 })

unmount(): void

Unmounts the component

Returns

• void

update(): void

Updates the component

Returns

• void