Reference Source
import Component from 'flarum/Component'
public class | source

Component

The Component class defines a user interface 'building block'. A component generates a virtual DOM to be rendered on each redraw.

Essentially, this is a wrapper for Mithril's components that adds several useful features:

  • In the oninit and onbeforeupdate lifecycle hooks, we store vnode attrs in `this.attrs. This allows us to use attrs across components without having to pass the vnode to every single method.
  • The static initAttrs method allows a convenient way to provide defaults (or to otherwise modify) the attrs that have been passed into a component.
  • When the component is created in the DOM, we store its DOM element under this.element; this lets us use jQuery to modify child DOM state from internal methods via the this.$() method.
  • A convenience component method, which serves as an alternative to hyperscript and JSX.

As with other Mithril components, components extending Component can be initialized and nested using JSX, hyperscript, or a combination of both. The component method can also be used.

Static Method Summary

Static Public Methods
public static

component(attrs: undefined, children: undefined): *

Convenience method to attach a component without JSX.

public static

initAttrs(attrs: T): undefined

Initialize the component's attrs.

This can be used to assign default values for missing, optional attrs.

Member Summary

Public Members
public

attrs: *

public

element: *

public get

props: *

The attributes passed into the component.

public set

Method Summary

Public Methods
public

$(selector: undefined): *

Returns a jQuery object for this component's element. If you pass in a selector string, this method will return a jQuery object, using the current element as its buffer.

For example, calling component.$('li') will return a jQuery object containing all of the li elements inside the DOM element of this component.

public

onbeforeupdate(vnode: *)

public

oncreate(vnode: *)

public

oninit(vnode: *)

public

setAttrs(attrs: T): undefined

Saves a reference to the vnode attrs after running them through initAttrs, and checking for common issues.

Static Public Methods

public static component(attrs: undefined, children: undefined): * source

Convenience method to attach a component without JSX. Has the same effect as calling m(THIS_CLASS, attrs, children).

Params:

NameTypeAttributeDescription
attrs undefined
children undefined

Return:

*

public static initAttrs(attrs: T): undefined source

Initialize the component's attrs.

This can be used to assign default values for missing, optional attrs.

Params:

NameTypeAttributeDescription
attrs T

Return:

undefined

Public Members

public attrs: * source

public element: * source

public get props: * source

The attributes passed into the component.

public set props: undefined source

Public Methods

public $(selector: undefined): * source

Returns a jQuery object for this component's element. If you pass in a selector string, this method will return a jQuery object, using the current element as its buffer.

For example, calling component.$('li') will return a jQuery object containing all of the li elements inside the DOM element of this component.

Params:

NameTypeAttributeDescription
selector undefined

Return:

*

public onbeforeupdate(vnode: *) source

Params:

NameTypeAttributeDescription
vnode *

public oncreate(vnode: *) source

Params:

NameTypeAttributeDescription
vnode *

public oninit(vnode: *) source

Params:

NameTypeAttributeDescription
vnode *

public setAttrs(attrs: T): undefined source

Saves a reference to the vnode attrs after running them through initAttrs, and checking for common issues.

Params:

NameTypeAttributeDescription
attrs T

Return:

undefined