#### state
Variable holding state of the component. It is not necessary to use state at all, as components are not used to actually render HTML. However, in combination with setState and stateChange methods, state can be useful for certain components, like some sort of filter where simple state can be helpful. Another use case is component which often updates DOM, as by using setState and stateChange methods, modifications of DOM are made only when the state actually changed. State should only be changed by setState function and takes a form of object.
`javascript
console.log(this.state); // {}
`

$3

Component has a set of methods that can be used through it's lifecycle.

#### require
Method used for code splitting to require any libraries needed for the component to work.
This method is asynchronous and after it is resolved, the execution of mount method follows.
`javascript
async require() {
this.throttle = await import('lodash/throttle');
}
`

#### mount
Method called after all assets are loaded - if any defined (after require method is resolved).
This is where you would add all your listeners and such...
`javascript
mount() {
this.scrollHandler = this.handleScroll.bind(this);

this.element.addEventListener('click', this.handleClick.bind(this));
window.addEventListener('scroll', this.scrollHandler);
}
`

#### unmount
Method called before the component is destroyed (on removeComponents call).
This is where you would remove any global listeners.
Note that any listeners attached on or within the component root element are removed when the element is removed from DOM, as the component instance is stored within the element, so there is no need to remove those listeners, in case the element is removed from DOM.
`javascript
unmount() {
this.element.removeEventListener('click', this.handleClick); // mostly not needed
window.removeEventListener('scroll', this.scrollHandler);
}
`

#### setState
Method called to update state of the component. Only the changes of state are required to be passed in a form of object. Component will merge the changes with current state on it's own.
`javascript
this.setState({
a: "a"
});
`
Note that it is recommended to only use simple state with one layer for the state to work correctly. State is here to allow some simple manipulation powered with state, not to store a complex state of whole application.
`javascript
this.setState({
a: "a",
b: ["a"],
c: {a: "a"}
}); // all fine

this.setState({
a: {
b: {c: "c"}
}
}); // not recommended
`

#### stateChange
This function gets called by setState method and any changes to state are passed as an argument. Ideally, any manipulation with DOM would be done within this function, as only the actual changes to state are passed on to here in a form of object.
`javascript
stateChange(stateChanges) {
if('a' in stateChanges) {
// "a" property of state was updated
}
console.log(stateChanges, this.state);
}
`
`javascript
this.setState({ a: "a", b: "b" }); // { a: "a", b: "b" } { a: "a", b: "b" }
this.setState({ a: "a", b: "c" }); // { b: "c" } { a: "a", b: "c" }
this.setState({ b: "d" }); // { b: "d" } { a: "a", b: "d" }
`

Helpers

loadComponents(components [, context]); // context is optional and defaults to document.documentElement
`

$3

removeComponents([context]); // context is optional and defaults to document.documentElement
`

$3

instance._load(); // this is necessary
`
Note that calling instance._load() is required to start the lifecycle of the component.

$3

destroyInstance(element);
`

$3

let element = document.getElementById('element');
let componentInstance = getComponentFromElement(element);
`

$3

Config is used as a store for options used in Gia and also as an interface to change default options. Currently, only the log option is available.
`javascript
import config from 'gia/config';

config.set('log', false); // disables unnecessary console.log calls
`

$3

Eventbus can be used to communicate between components in a clear way. While it is possible to get an instance of another component and modify it directly, eventbus provides a simple interface that makes the interaction clearly visible from within the component.
`javascript
import eventbus from 'gia/eventbus';
import Component from 'gia/Component';

class Component1 extends Component {
mount() {
eventbus.on('writeConsole', this.handleEventBusCall);
}

handleEventBusCall() {
console.log("Component2 triggered this through evenbus.");
}
}

class Component2 extends Component {
mount() {
eventbus.emit("writeConsole");
}
}

const components = {
"Component1": Component1,
"Component2": Component2
}

loadComponents(components); // will console.log "Component2 triggered this through evenbus."
`

#### on
Registers handler of event.
`javascript
eventbus.on('eventName', handler);
`

#### once
Registers handler of event, but handler is only called once and then removed.
`javascript
eventbus.once('eventName', handler);
`

#### emit
Calls any handlers previously registered with the same event name. Optional event object can be used as a argument, which gets passed into a handlers as an argument.
`javascript
eventbus.emit('eventName'[, eventObject]);
`

#### off
Unregisters handler of event. In case no handler is defined, eventbus removes all handlers for that event. In case not even event name is defined, eventbus removes all handlers for all events.
`javascript
eventbus.off('eventName', handler);
``