Components

Published: September 03, 2019
Edited: October 18, 2019

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.

NameEvent
_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
}