Firebolt – Learn and Build

Components is a way to make them reusable and extendable across your application.

Create a component

You can create components with your template.

class MyComponent extends lng.Component {
    static _template() {
        return {
            //Component template
        }
    }

    _init() {
        // fires when a component is instantiated.
        // check the full list of events below
    }

    //... more code, methods, events... 
    // active, attach, detach etc........describe order
}

Component events

There are a couple of lifecycle events that you can implement by specifying the specific method.

Name	Event
`_construct()`	Instance created, before spawning the template
`_build()`	Instance created, spawned the template
`_setup()`	Attached to the render tree, top-down (for the first time)
`_init()`	Attached (for the first time)
`_attach()`	Attached to the render tree, bottom-up
`_detach()`	Detached, bottom-up
`_firstEnable()`	Enabled (for the first time)
`_enable()`	Enabled (both attached and visible: true and alpha > 0)
`_disable()`	Disabled (either detached or invisible or both)
`_firstActive()`	Activated (for the first time)
`_active()`	Activated (both enabled and on screen)
`_inactive()`	Inactive (either detached, invisible or off screen)

Creating a Component

To create an instance of an Component, use the type attribute in your template.

class MyApp extends lng.Application {
    static _template() {
        return {
            MyComponentInstance: {
                type: MyComponent
            }
        }
    }
}

Passing attribute data

You can pass some extra parameters that will be accessible to the component when initializing:

MyComponentInstance: {
    type: MyComponent,
    someData,
}

Your instance will be initialized with your data available:

_init() {
    console.log(this.someData) //logs the content of someData
}