document lifecycle of component

[Yoshiya Hinosawa]

• When the component first mounted
• When the event listeners defined by @on bind to elements
• When init is called
• When constructors are called
• The diagram of the above

[Yoshiya Hinosawa]

capsid lifecycle

φ -> [mount] -> mounted -> [discard] -> φ

capsid lifecycle events

• mount

  • at DOMContentLoaded all elements in the page which have the capsid class-names are mounted by the capsid components
  • at mount event element and coelement (instance of the component class) are coupled and starting working together. See the below for details.
  • after DOMContentLoaded, you need to call prep function explicitly to mount capsid components to corresponding elements.

• discard

  • capsid doesn't provide the special method for unmounting the components. If you stop using a component, then simply remove the corresponding dom from the page. That's the end of the component lifecycle.

anatomy of [mount]

At [mount] event, many things happen. Those are the core feature of capsid.js:

• The component class's instance is created.
• instance.el is set to corresponding dom element.
• event listeners defined by @on decorators are attached to the dom element.
• plugin hooks are invoked if you use any.
• if instance has init method, then instance.__init__() is called.

These things happen in this order, which means in __init__ method you can access the dom element by this.el and you can invoke the event handlers by triggering event at this.el.

See the source code of initComponent method for detail: https://github.com/capsidjs/capsid/blob/master/src/init-component.js#L14-L44

capsid lifecycle methods

constructor

The constructor is called at the start of mount event. Its instance (coelement) is bound to element by the framework.

__init__

__init__ is called at the end of the mount event. When it called, dom element, event handlers are ready and available through this.el.