Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface IComponent<TProps, TEvents>

Interface that must be implemented by all components. Although it has many methods that components can implement, in practice, there is only one mandatory method - render. Components should be ready to have the vn property set, although they don't have to declare it.

Note that you normally don't need to implement this interface because your components will usually derive from the Component class that implements it.

Type parameters

  • TProps: {} = {}

    Type defining properties that can be passed to this class-based component. Default type is an empty object (no properties).

  • TEvents: {} = {}

    Type that maps event names (a.k.a event types) to either Event-derived classes (e.g. MouseEvent) or any other type. The latter will be interpreted as a type of the detail property of a CustomEvent.

Hierarchy

Implemented by

Index

Properties

Optional Readonly displayName

displayName?: string

Components can define display name for tracing purposes; if they don't the default name used is the component's class constructor name. Note that this method can be called before the virtual node is attached to the component.

props

props: ComponentProps<TProps, TEvents>

Component properties. This is normally used only by managed components and is usually undefined for independent components. This object can contains every property from the TProps type and $on_ property for every event defined in the TEvents type.

Optional Readonly updateStrategy

updateStrategy?: UpdateStrategy

Optional update strategy object that determines different aspects of component behavior during updates.

Optional vn

Sets, gets or clears the virtual node object of the component. This property is set twice:

  1. Before the component is rendered for the first time: the component must remember the passed object.
  2. Before the component is destroyed: undefined is passed as a parameter and the component must release the remembered object.

Methods

Optional afterUpdate

  • afterUpdate(): void
  • If the component is scheduled to be updated, this method is invoked during the Mimbl tick after all components scheduled to be updated in this tick (including this one) has already been updated. This method should be implemented by components that require some DOM-writing after rendering. When this method is called, writing DOM information should be safe in regards to not causing layout thrashing. Don't do any DOM-reading activities in this method.

    Returns void

Optional beforeUpdate

  • beforeUpdate(): void
  • If the component is scheduled to be updated, this method is invoked during the Mimbl tick before any component scheduled to be updated in this tick (including this one) are updated. This method should be implemented by components that require some DOM-based calculations (like sizes and positions) for rendering. When this method is called, reading DOM information should be safe in regards to not causing layout thrashing. Don't do any DOM- writing activities in this method.

    Returns void

Optional didReplace

  • This method is only used by independent components.

    Notifies the component that it replaced the given component. This allows the new component to copy whatever internal state it needs from the old component.

    Parameters

    Returns void

Optional handleError

  • handleError(err: unknown): void
  • Handles an exception that occurred during the rendering of one of the component's children. If this method is not implemented or if it throws an error, the error will be propagated up the chain of components until it reaches a component that handles it. If none of the components can handle the error, the entire tree will be unmounted.

    This method should only change the internal state of the component so that the render method, which will be invoked right after the handleError method returns, will return content reflecting the error.

    Parameters

    • err: unknown

      An error object that was thrown during the component's own rendering or rendering of one of its descendants.

    Returns void

render

  • render(): any
  • Returns the component's content that will be ultimately placed into the DOM tree.

    Returns any

Optional shouldUpdate

  • shouldUpdate(newProps: TProps): boolean
  • This method is only used by managed components.

    Informs the component that new properties have been specified. At the time of the call this.props refers to the "old" properties. They will be changed to the new props right after the call returns. If the component returns true, then its render method will be called. If the component doesn't implement the shouldUpdate method it is as though true is returned. If the component returns false, the render method is not called and the DOM tree of the component remains unchanged. The component will have its props member set to the new properties regardless of this method's return value.

    If the component creates its internal structures based on properties, this call is the opportunity to change the internal structures to correspond to the new properties.

    Parameters

    • newProps: TProps

      The new properties that the parent component provides to this component.

    Returns boolean

    True if the component should have its render method called and false otherwise.

Optional willMount

  • willMount(): void
  • Notifies that the component is about to render its content for the first time. This method is called when the virtual node has already been set so the component can request services from it.

    Returns void

Optional willUnmount

  • willUnmount(): void
  • Notifies that the component's content is going to be removed from the DOM tree. After this method returns, a managed component is destroyed.

    Returns void